/* 
  ========================================
  DR. MABUSE MOBILE FIXES (FORCE OVERRIDES)
  ========================================
  Este archivo inyecta reglas CSS globales para evitar 
  problemas de visualización en los diseños de Elementor exportados 
  al ser vistos desde dispositivos móviles.
*/

/* 1. Prevenir overflow horizontal (scroll lateral que rompe la página) */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100vw;
}

/* 2. Reglas generales para Tablets (iPad) y Móviles */
@media (max-width: 1024px) {

    /* Hacer que las columnas internas de Elementor bajen una debajo de otra (Stacking) */
    .elementor-container .elementor-row {
        flex-direction: column !important;
        display: flex !important;
    }

    .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 20px !important;
        /* Separación entre cajas apiladas */
    }

    /* Reducir paddings y márgenes masivos de escritorio */
    .elementor-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .elementor-widget-wrap {
        padding: 10px !important;
        margin: 0 !important;
    }

    /* Forzar contenedores al 100% de ancho para que el texto no se asfixie */
    .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Forzar que las imágenes y vídeos no se salgan nunca de su caja principal */
    img,
    iframe,
    video,
    .elementor-image img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        transform: none !important;
        /* Prevenir imágenes desplazadas fuera de pantalla */
    }

    /* Reducir tamaños de fuentes gigantes de escritorio y arreglar cortes (a trozos) */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .elementor-heading-title {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: manual !important;
        overflow: visible !important;
        white-space: normal !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    h1 {
        font-size: 2.2rem !important;
        line-height: normal !important;
    }

    h2 {
        font-size: 1.8rem !important;
        line-height: normal !important;
    }

    h3 {
        font-size: 1.5rem !important;
        line-height: normal !important;
    }

    p,
    span,
    div {
        font-size: 1rem !important;
    }

    /* Ajustar visores de PDF o Iframes largos */
    .elementor-widget-iframe iframe {
        width: 100% !important;
        min-height: 300px !important;
    }

    /* Botones adaptados a dedo (Touch Targets) */
    .elementor-button,
    .btn,
    button {
        width: 100% !important;
        max-width: 300px !important;
        margin: 10px auto !important;
        display: block !important;
        text-align: center !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        /* mínimo 16px para iOS zoom prevention */
    }

    /* ----- MENU Y CABECERA ----- */
    /* El menú inyectado "menu_global.html" debe comportarse bien en móvil */
    .site-header {
        padding: 10px !important;
    }

    .main-navigation ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-navigation li {
        width: 100% !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .main-navigation li a {
        display: block !important;
        padding: 15px !important;
        font-size: 1.1rem !important;
        width: 100% !important;
    }

    /* Ocultar elementos de navegación complejos de escritorio si los hay (submenus flotantes) */
    .main-navigation ul ul {
        position: static !important;
        display: none !important;
        /* En modo estático básico es mejor plegarlo si no hay JS */
        width: 100% !important;
    }

    /* Reducir logo */
    .hfe-site-logo-img {
        max-width: 80% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* 3. Modo Smartphone en Vertical estricto */
@media (max-width: 480px) {

    .elementor-spacer,
    .elementor-spacer-inner {
        height: 20px !important;
        max-height: 20px !important;
        /* Matar espaciadores gigantes */
    }

    h1 {
        font-size: 1.8rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    /* Tarjetas de programación o carteles superpuestos */
    .elementor-image-carousel-wrapper {
        width: 100% !important;
    }
}