/* =========================================================
   MENTE & MANOS - MÓVIL PROFESIONAL V8.6

   A) OFERTAS:
      3 opciones visibles al mismo tiempo en celular.

   B) EXPLORADOR:
      Sección mucho más compacta.
      La lista tiene scroll interno y el bloque completo
      queda aprox. en 55–65% de la altura visible.
   ========================================================= */


/* =========================================================
   A) OFERTAS EN 3 COLUMNAS EN CELULAR
   ========================================================= */

@media (max-width: 720px) {

    /* Menos aire alrededor de la sección */
    #ofertas.seccion {
        padding:
            24px
            8px
            26px
            !important;
    }

    #ofertas .tituloSeccion {
        margin-bottom:
            0
            !important;
    }

    #ofertas .tituloSeccion > span {
        font-size:
            9px
            !important;

        letter-spacing:
            1.1px
            !important;
    }

    #ofertas .tituloSeccion h2 {
        margin:
            4px
            0
            4px
            !important;

        font-size:
            23px
            !important;

        line-height:
            1.05
            !important;
    }

    #ofertas .tituloSeccion p {
        margin:
            0
            !important;

        font-size:
            11px
            !important;

        line-height:
            1.3
            !important;
    }


    /*
       LAS 3 OFERTAS JUNTAS
       Sin scroll horizontal.
    */
    #ofertas .ofertas {
        display:
            grid
            !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            )
            !important;

        gap:
            6px
            !important;

        width:
            100%
            !important;

        margin-top:
            15px
            !important;

        align-items:
            stretch
            !important;
    }


    /* Tarjeta */
    #ofertas .oferta {
        min-width:
            0
            !important;

        min-height:
            222px
            !important;

        padding:
            11px
            8px
            9px
            !important;

        border-radius:
            13px
            !important;

        gap:
            0
            !important;
    }


    /* VIP no debe crecer mucho más que las demás */
    #ofertas .oferta[data-oferta="3"] {
        min-height:
            222px
            !important;

        margin-top:
            0
            !important;

        border-width:
            1.5px
            !important;
    }


    /* Encabezado de cada tarjeta */
    #ofertas .oferta .cabeceraOferta {
        display:
            flex
            !important;

        flex-direction:
            column
            !important;

        align-items:
            flex-start
            !important;

        justify-content:
            flex-start
            !important;

        gap:
            4px
            !important;

        min-width:
            0
            !important;
    }


    #ofertas .oferta .cabeceraOferta span {
        max-width:
            100%
            !important;

        font-size:
            8px
            !important;

        line-height:
            1
            !important;

        letter-spacing:
            .02em
            !important;

        white-space:
            normal
            !important;
    }


    #ofertas .oferta .cabeceraOferta strong {
        margin:
            0
            !important;

        font-size:
            13px
            !important;

        line-height:
            1
            !important;

        white-space:
            nowrap
            !important;
    }


    /* Título principal */
    #ofertas .oferta > h3 {
        margin:
            12px
            0
            0
            !important;

        font-size:
            11.5px
            !important;

        line-height:
            1.15
            !important;

        min-height:
            40px
            !important;

        overflow-wrap:
            anywhere
            !important;
    }


    /*
       Conservamos el texto, pero limitamos visualmente
       a 3 líneas para que las 3 opciones sean comparables.
    */
    #ofertas .oferta > p {
        display:
            -webkit-box
            !important;

        -webkit-box-orient:
            vertical
            !important;

        -webkit-line-clamp:
            3
            !important;

        overflow:
            hidden
            !important;

        margin:
            7px
            0
            0
            !important;

        font-size:
            9.5px
            !important;

        line-height:
            1.28
            !important;

        min-height:
            37px
            !important;
    }


    /* Caja "7 ING completos / S/ 4.27" */
    #ofertas .vipValorV65 {
        margin:
            8px
            0
            0
            !important;

        padding:
            6px
            6px
            !important;

        border-radius:
            8px
            !important;
    }


    #ofertas .vipValorV65 strong {
        font-size:
            8.5px
            !important;

        line-height:
            1.05
            !important;
    }


    #ofertas .vipValorV65 span,
    #ofertas .vipValorV65 div {
        font-size:
            7px
            !important;

        line-height:
            1.05
            !important;
    }


    /* Badge VIP */
    #ofertas .vipBadgeV65 {
        top:
            -9px
            !important;

        left:
            50%
            !important;

        max-width:
            calc(100% - 8px)
            !important;

        padding:
            4px
            6px
            !important;

        font-size:
            6.5px
            !important;

        line-height:
            1
            !important;

        letter-spacing:
            .025em
            !important;

        text-align:
            center
            !important;
    }


    /* Botones */
    #ofertas .oferta > .elegirOferta {
        width:
            100%
            !important;

        min-height:
            34px
            !important;

        margin-top:
            auto
            !important;

        padding:
            6px
            4px
            !important;

        border-radius:
            9px
            !important;

        font-size:
            9.5px
            !important;

        line-height:
            1.08
            !important;

        white-space:
            normal
            !important;
    }


    /*
       Cuando una opción queda seleccionada,
       evitamos que el borde extra cambie el tamaño
       de la grilla.
    */
    #ofertas .ofertaSeleccionada {
        border-width:
            1.5px
            !important;

        box-shadow:
            0 0 0 2px
            rgba(37,211,102,.08)
            !important;
    }

    #ofertas .ofertaSeleccionada::after {
        display:
            none
            !important;
    }
}


/* Un poco más pequeño en celulares angostos */
@media (max-width: 390px) {

    #ofertas.seccion {
        padding-left:
            6px
            !important;

        padding-right:
            6px
            !important;
    }

    #ofertas .ofertas {
        gap:
            5px
            !important;
    }

    #ofertas .oferta {
        padding:
            10px
            6px
            8px
            !important;
    }

    #ofertas .oferta > h3 {
        font-size:
            10.5px
            !important;
    }

    #ofertas .oferta > p {
        font-size:
            9px
            !important;
    }

    #ofertas .oferta > .elegirOferta {
        font-size:
            9px
            !important;
    }
}


/* =========================================================
   B) EXPLORADOR: ~60% DE UNA PANTALLA
   ========================================================= */

@media (max-width: 720px) {

    /*
       La sección antes tenía padding de 60px.
       Aquí recuperamos mucho espacio.
    */
    #contenido.seccion {
        padding:
            14px
            10px
            10px
            !important;
    }


    /* Título superior */
    #contenido .tituloSeccion > span {
        font-size:
            9px
            !important;

        line-height:
            1
            !important;

        letter-spacing:
            1.5px
            !important;
    }


    #contenido .tituloSeccion h2 {
        margin:
            3px
            0
            0
            !important;

        font-size:
            22px
            !important;

        line-height:
            1.02
            !important;

        letter-spacing:
            -.02em
            !important;
    }


    /* Buscador */
    #contenido .buscador {
        margin:
            10px
            0
            6px
            !important;
    }


    #contenido .buscador input {
        height:
            36px
            !important;

        min-height:
            36px
            !important;

        padding:
            7px
            10px
            !important;

        border-radius:
            10px
            !important;

        font-size:
            12.5px
            !important;
    }


    /*
       Estadísticas + navegación en una sola franja
       siempre que haya espacio.
    */
    #contenido .arbolMeta {
        display:
            grid
            !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            !important;

        align-items:
            center
            !important;

        gap:
            6px
            !important;

        margin:
            5px
            0
            !important;
    }


    #contenido .arbolStats {
        min-width:
            0
            !important;

        gap:
            1px
            !important;
    }


    #contenido .arbolStats strong {
        display:
            block
            !important;

        overflow:
            hidden
            !important;

        text-overflow:
            ellipsis
            !important;

        white-space:
            nowrap
            !important;

        font-size:
            12px
            !important;

        line-height:
            1.1
            !important;
    }


    #contenido .arbolStats span {
        font-size:
            10.5px
            !important;

        line-height:
            1.1
            !important;
    }


    /* Botonera Drive más pequeña */
    #contenido .arbolBotones {
        width:
            auto
            !important;

        gap:
            2px
            !important;

        padding:
            2px
            !important;

        border-radius:
            9px
            !important;
    }


    #contenido .navDriveBtn,
    #contenido .arbolBoton {
        width:
            auto
            !important;

        min-width:
            58px
            !important;

        min-height:
            30px
            !important;

        height:
            30px
            !important;

        padding:
            3px
            6px
            !important;

        border-radius:
            7px
            !important;

        gap:
            3px
            !important;

        font-size:
            10px
            !important;
    }


    /*
       En versiones anteriores se ocultaban los textos.
       Aquí los recuperamos, pero muy compactos.
    */
    #contenido .navDriveBtn > span:not(.navFlecha) {
        display:
            inline
            !important;
    }


    #contenido .navFlecha {
        width:
            16px
            !important;

        height:
            16px
            !important;

        font-size:
            13px
            !important;
    }


    /* Ruta actual / breadcrumb */
    #contenido .rutaArbolDrive {
        min-height:
            28px
            !important;

        margin:
            4px
            0
            6px
            !important;

        padding:
            4px
            6px
            !important;

        gap:
            2px
            !important;

        border-radius:
            9px
            !important;
    }


    #contenido .crumbDrive {
        padding:
            3px
            5px
            !important;

        font-size:
            9.5px
            !important;

        border-radius:
            6px
            !important;
    }


    #contenido .crumbSeparador {
        font-size:
            12px
            !important;
    }


    /*
       CLAVE DEL CAMBIO:
       lista con scroll interno.
       Esto evita que el explorador se coma toda la página.
    */
    #contenido #visorArchivos,
    #contenido .visorArchivos {
        max-height:
            34svh
            !important;

        min-height:
            205px
            !important;

        overflow-y:
            auto
            !important;

        overflow-x:
            hidden
            !important;

        overscroll-behavior:
            contain
            !important;

        -webkit-overflow-scrolling:
            touch
            !important;

        border-radius:
            11px
            !important;

        scrollbar-width:
            thin;
    }


    /* Cabecera del listado */
    #contenido .driveHeader,
    #contenido .driveRow {
        grid-template-columns:
            24px
            minmax(0, 1fr)
            18px
            !important;

        gap:
            5px
            !important;
    }


    #contenido .driveHeader {
        min-height:
            26px
            !important;

        height:
            26px
            !important;

        padding:
            0
            7px
            !important;

        font-size:
            8px
            !important;
    }


    /* Filas */
    #contenido .driveRow {
        min-height:
            38px
            !important;

        padding:
            4px
            7px
            !important;
    }


    /* Nombre */
    #contenido .driveNombre {
        min-width:
            0
            !important;

        font-size:
            11px
            !important;

        line-height:
            1.12
            !important;

        font-weight:
            600
            !important;

        overflow-wrap:
            anywhere
            !important;
    }


    /* Carpeta */
    #contenido .driveFolderIcon {
        width:
            19px
            !important;

        height:
            14px
            !important;
    }


    #contenido .driveFolderIcon::before {
        width:
            7px
            !important;

        height:
            3px
            !important;

        top:
            -2px
            !important;
    }


    /* Archivo */
    #contenido .driveFileBadge {
        min-width:
            20px
            !important;

        height:
            17px
            !important;

        padding:
            0
            3px
            !important;

        border-radius:
            4px
            !important;

        font-size:
            5.5px
            !important;
    }


    /* Flecha a carpeta */
    #contenido .driveFolderRow .driveEntrar {
        width:
            18px
            !important;

        height:
            18px
            !important;

        font-size:
            15px
            !important;
    }


    /*
       Tipo y contenido siguen ocultos en móvil;
       el espacio se dedica al nombre real.
    */
    #contenido .driveTipo,
    #contenido .driveCantidad,
    #contenido .driveHeader span:nth-child(3),
    #contenido .driveHeader span:nth-child(4) {
        display:
            none
            !important;
    }


    /*
       El CTA flotante ya no debe tapar tantas carpetas.
    */
    .whatsappFlotante {
        right:
            10px
            !important;

        bottom:
            10px
            !important;

        padding:
            10px
            14px
            !important;

        font-size:
            13px
            !important;

        border-radius:
            999px
            !important;
    }
}


/* Pantallas pequeñas */
@media (max-width: 390px) {

    #contenido.seccion {
        padding-left:
            8px
            !important;

        padding-right:
            8px
            !important;
    }


    #contenido .tituloSeccion h2 {
        font-size:
            20px
            !important;
    }


    #contenido .arbolStats strong {
        font-size:
            11px
            !important;
    }


    #contenido .arbolStats span {
        font-size:
            9.5px
            !important;
    }


    #contenido .navDriveBtn,
    #contenido .arbolBoton {
        min-width:
            52px
            !important;

        font-size:
            9px
            !important;
    }


    #contenido #visorArchivos,
    #contenido .visorArchivos {
        max-height:
            32svh
            !important;

        min-height:
            190px
            !important;
    }


    #contenido .driveRow {
        min-height:
            36px
            !important;
    }


    #contenido .driveNombre {
        font-size:
            10.5px
            !important;
    }
}