@media (max-width: 992px) {
    /* ==================================================================== */
    /*                        HEADER Y NAVEGACIÓN                         */
    /* ==================================================================== */
    body {
        padding-top: 9rem;
    }
    .logo {
        
        height: 70px;
        /* Reducimos ligeramente la altura */
    }
    .segunda-barra {
        flex-wrap: wrap;
        justify-content: space-between; 
        gap: 15px;
    }
    .busqueda {
        order: 1;
        width: 90%;
        margin: 0;
    }
    .busqueda input {
        font-size: 14px;
    }
    .nav-menu {
        display: none;
    }
    .boton-nav {
        display: block;
        /* --- NUEVO ---: Añadimos la transición para el efecto hover */
        transition: transform 0.3s ease;
    }
    /* --- NUEVO ---: Regla para el efecto hover */
    .boton-nav:hover {
        transform: scale(1.15);
        /* Mismo escalado que el carrito */
    }
    .carrito {
        margin-right: 0;
    }

    .carrito img{
        margin-bottom: 4px;
    }

    .mobile-menu.active {
        margin-right: 320px;
        margin-top: 5px;
        margin-left: 2px;
    }
    .mobile-menu {
        margin-right: 320px;
        margin-top: 10px;
    }

    .contador-carrito{
        margin-bottom: 20px;
    }

    /* ==================================================================== */
    /*                     SECCIÓN "SOBRE NOSOTROS"                       */
    /* ==================================================================== */
    .about-container {
        flex-direction: column;
        text-align: center;
    }
    .about-text-content {
        flex-basis: 100%;
        width: 100%;
    }
    .about-description {
        margin-left: auto;
        margin-right: auto;
    }
    .benefits-list {
        text-align: left;
        margin: 30px auto;
        max-width: 450px;
    }
    .cta-area {
        display: block;
        justify-content: center;
    }
    
    .cta-area .pushable-link{
        margin-top: 5%;
    }
    
    .image-collage-container {
        position: relative;
        /* Lo mantenemos por si acaso, pero no es crucial para este método */
        width: 100%;
        max-width: 450px;
        margin: 60px auto 0;
        /* --- CAMBIO CLAVE ---: ELIMINAMOS la altura fija. El contenedor crecerá con el contenido. */
        height: auto;
        perspective: none;
    }
    .collage-img {
        /* --- CAMBIO CLAVE ---: Quitamos position: absolute y ajustamos el display */
        position: static;
        /* Volvemos al flujo normal del documento */
        display: block;
        /* Aseguramos que cada imagen ocupe su propia línea */
        margin-left: auto;
        /* Centramos las imágenes */
        margin-right: auto;
        width: 80%;
        /* Damos un ancho consistente */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        /* Mantenemos bordes redondeados */
    }
    /* Imagen 1 (arriba, centrada) */
    .img-1 {
        z-index: 1;
        /* Estará debajo de las demás */
    }
    /* Imagen 2 (Se superpone a la primera) */
    .img-2 {
        /* --- CAMBIO CLAVE ---: Usamos margen negativo para subirla */
        margin-top: -100px;
        /* Sube la imagen 100px. Ajusta este valor si quieres más o menos superposición */
        margin-left: 0;
        /* La alineamos un poco a la izquierda para el efecto diagonal */
        z-index: 2;
        /* Se pone por encima de la img-1 */
    }
    /* Imagen 3 (Se superpone a la segunda) */
    .img-3 {
        /* --- CAMBIO CLAVE ---: Usamos un margen negativo aún mayor */
        margin-top: -120px;
        /* Sube la imagen 120px. Ajusta este valor */
        margin-right: 0;
        /* La alineamos un poco a la derecha */
        margin-left: auto;
        /* Anulamos el margin-left anterior */
        z-index: 3;
        /* Se pone por encima de todas */
    }

    /* ==================================================================== */
    /*              SECCIÓN DE PRODUCTOS (LAYOUT DESKTOP)                 */
    /* ==================================================================== */
    .promo-section iframe{
        height: 100%;
        width: 100%;
    }

    .seccion-productos .contenedor-tarjetas {
        grid-template-columns: repeat(3, 1fr);
    }
    .promo-btn {
        margin-right: auto;
        margin-left: auto;
    }
    .card-1 .promo-image-container {
        margin-right: 20px;
    }

    .card-2 .promo-text {
        margin-right: 20px;
    }

    .card-1 .promo-text{
        margin-right: 0;
    }

    .card-4 .promo-text {
        margin-right: 20px;
    }
    .card-4 .promo-image-container {
        margin-top: auto;
        margin-bottom: auto;
    }
    
    .promo-image-container-full img {
        margin-left: auto;
        margin-right: auto;
    }
    /* Regla general para centrar el texto en todas las promo-cards */
    .promo-card .promo-text {
        text-align: center;
        align-items: center; /* Centra los elementos hijos (como el botón) */
    }

    /* El botón se alinea al centro en lugar de a la izquierda */
    .promo-card .promo-btn {
        align-self: center;
    }

    /* Regla específica para la card-1 (ahora sin imagen) */
    .promo-card.card-1 {
        justify-content: center; /* Centra el .promo-text verticalmente */
    }

    /* Regla específica para la card-2 (mapa) */
    .promo-card.card-2 {
        /* --- CAMBIO CLAVE ---: Forzamos la relación de aspecto cuadrada */
        aspect-ratio: 1 / 1;
        padding: 0; /* Eliminamos el padding para que el mapa ocupe todo */
    }
    
    .promo-card.card-2 .mapa {
        border-radius: 12px; /* Mantenemos los bordes redondeados */
    }

    /* ==================================================================== */
    /*                SECCIÓN DE DESCUENTOS (LAYOUT DESKTOP)              */
    /* ==================================================================== */
    .seccion-descuentos .contenedor-tarjetas {
        grid-template-columns: repeat(3, 1fr);
    }
    /* ==================================================================== */
    /*                 SECCIÓN DE OFERTAS PROMOCIONALES                   */
    /* ==================================================================== */
    .promo-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    /* Reseteamos el posicionamiento de grid para que fluya */
    .card-1,
    .card-2,
    .card-3,
    .card-4,
    .card-5 {
        grid-column: auto;
        grid-row: auto;
    }
    .card-3 {
        grid-column: 1 / -1;
    }
    /* Nos aseguramos de que el texto no se encoja y tenga espacio */
    .promo-card.card-4 .promo-text,
    .promo-card.card-5 .promo-text {
        flex-basis: 60%;
        /* El texto ocupa el 60% del espacio */
        flex-shrink: 0;
        /* Evita que se encoja */
    }
    /* Le damos al contenedor de la imagen un tamaño fijo */
    .promo-card.card-4 .promo-image-container,
    .promo-card.card-5 .promo-image-container {
        flex-basis: 40%;
        /* La imagen ocupa el 40% del espacio */
        flex-shrink: 0;
        /* Evita que se encoja */
        /* Centramos la imagen dentro de su contenedor */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Nos aseguramos de que la imagen se vea bien dentro de su contenedor */
    .promo-card.card-4 .promo-image-container img {
        max-width: 120%;
        max-height: 150%;
        object-fit: contain;
    }
    .promo-card.card-5 .promo-image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .card-1 {
        align-items: center;
    }
    
}