/* ============================================================
   HOJA DE ESTILOS MOBILE COMPLETA - MU AMERIKA
   ============================================================ */

/* ------------------------------------------------------------
   1. REGLAS GLOBALES (Tablets y Celulares hasta 992px)
   ------------------------------------------------------------ */
@media screen and (max-width: 992px) {
    /* Forzar a que la estructura pase de Horizontal a Vertical */
    .container_web { 
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* La caja de contenido principal ocupa el 100% en lugar del calc() */
    .content { 
        width: 100% !important; 
        padding: 20px 15px !important; 
        margin: 0 !important;
    }

    /* Quita los adornos de fondo que se rompen en móvil */
    .content:after { display: none !important; }

    /* Las barras laterales ahora toman el 100% del ancho */
    .container_web aside { 
        width: 100% !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Slider responsivo */
    .swiper-container {
        width: 100% !important;
        margin-left: 0 !important;
        height: 250px !important;
    }
    .swiper-slide { height: 250px !important; }
}


/* ------------------------------------------------------------
   2. REGLAS ESTRICTAS PARA CELULARES (Hasta 768px)
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    
    /* --- MENÚ SUPERIOR REPARADO (HORIZONTAL TÁCTIL) --- */
    .topPanel { 
        height: auto !important; 
        position: relative !important; 
        padding: 10px 5px !important; 
    }
    
    .menu { 
        display: flex !important; 
        flex-direction: row !important; /* Lo mantenemos horizontal */
        flex-wrap: wrap !important;     /* Permite que baje a una 2da línea si no cabe */
        justify-content: center !important; 
        width: 100% !important; 
        gap: 8px !important;            /* Separación entre botones */
    }
    
    .menu li { 
        display: inline-block !important; 
        width: auto !important; 
    }
    
    .menu li a { 
        height: auto !important; 
        padding: 8px 12px !important; 
        font-size: 12px !important; 
        white-space: nowrap !important; /* Evita que las palabras se partan por la mitad */
        
        /* Estilo de botón para celular */
        background: rgba(255, 255, 255, 0.05) !important; 
        border-radius: 5px !important;
        border: 1px solid rgba(255, 215, 0, 0.1) !important;
        color: #fff !important;
    }
    
    .menu li.active a, .menu li a:hover {
        background: rgba(241, 196, 15, 0.2) !important; /* Dorado al tocar o activo */
        border-color: #f1c40f !important;
        color: #f1c40f !important;
    }
    
    .menu li a::after { display: none !important; } /* Quitamos la línea naranja inferior */

    /* --- HERO & LOGO --- */
    header { 
        height: auto !important; 
        padding: 40px 10px !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Quitamos la posición absoluta rebelde de tu logo viejo */
    .logo { 
        position: relative !important; 
        bottom: auto !important; 
        left: auto !important; 
        width: 100% !important; 
        text-align: center !important; 
        margin-bottom: 30px !important; 
    }
    .logo img { max-width: 90% !important; height: auto !important; }

    /* --- BLOQUES LATERALES (Descarga, Server, Login) --- */
    .download-button, .serverBlock, .block, .blockLogin {
        width: 100% !important; 
        max-width: 400px !important; /* Evita que se estiren de más en tablets */
        margin: 0 auto 20px auto !important;
    }

    .socBlock { height: auto !important; display: flex !important; flex-wrap: wrap !important; }
    .socBlock a { width: 100% !important; margin-bottom: 10px !important; justify-content: center !important; }

    /* --- TABLAS (Rankings e Información) --- */
    table, tbody, th, td, tr { 
        display: block !important; /* Las tablas se apilan como tarjetas */
        width: 100% !important; 
    }
    table { overflow-x: auto !important; }
    .tableBlock-tr { flex-direction: column !important; align-items: flex-start !important; padding: 10px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important;}
    .tableBlock-td { width: 100% !important; padding: 5px !important; text-align: left !important; }
    .td-15, .td-20, .td-25, .td-30, .td-40, .td-50, .td-65 { width: 100% !important; }

    /* --- FORMULARIOS E INPUTS --- */
    input, textarea, select { 
        width: 100% !important; 
        font-size: 16px !important; /* Evita que los iPhone hagan zoom automático al escribir */
    }

    /* --- BOTONES VIEJOS DEL CMS --- */
    button, .button { 
        width: 100% !important; 
        max-width: 300px !important; 
        margin: 5px auto !important; 
        background-size: cover !important; 
    }

    /* --- KAIZEN: NUESTRO COUNTDOWN Y BOTONES MODERNOS --- */
    .hero-controls {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .btn-kaizen-gold, .btn-kaizen-purple {
        width: 100% !important;
        max-width: 320px !important;
        height: 60px !important;
        font-size: 16px !important;
    }

    .mu-countdown-main { margin-top: 30px !important; }
    .mu-timer-title { font-size: 16px !important; margin-bottom: 15px !important; }
    .mu-timer-grid { gap: 10px !important; flex-wrap: nowrap !important; }
    
    .mu-num-glow { font-size: 32px !important; }
    .mu-label-gold { font-size: 10px !important; }
}

/* ------------------------------------------------------------
   3. CORRECCIONES EXTRA PARA PANTALLAS MUY PEQUEÑAS (iPhone SE, etc.)
   ------------------------------------------------------------ */
@media screen and (max-width: 380px) {
    .mu-timer-grid { gap: 5px !important; }
    .mu-num-glow { font-size: 26px !important; }
    .logo img { max-width: 100% !important; }
}