/**
 * StudioMix - Home Card Stacking Scroll
 * Efecto cinematográfico de tarjetas apilables para la página de inicio
 */

:root {
    --home-menu-offset: 92px; /* Borde inferior del menú de navegación flotante en desktop */
}

@media (max-width: 768px) {
    :root {
        --home-menu-offset: 65px; /* Offset para tablets y móviles */
    }
}

/* ==========================================================================
   Contenedor y estructura general del Home
   ========================================================================== */
.home-page,
.home-page body,
.home-page #page,
.home-page #main,
.home-page .site-main {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* ==========================================================================
   Tarjetas Apilables (Card Stacking)
   ========================================================================== */
.home-card-block {
    position: relative;
    width: 100%;
    background-color: var(--white, #ffffff);
    box-sizing: border-box;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    will-change: transform;
}

/* Base Sticky para tarjetas */
.home-card-block.home-card-sticky {
    position: sticky;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -18px 45px rgba(0, 0, 0, 0.12), 0 -4px 12px rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

/* ==========================================================================
   Posicionamiento Top Diferenciado (Ajustes de Usuario)
   ========================================================================== */

/* 1. Hero Principal: Top 0 */
.home-card-1.hero-carousel-new {
    position: sticky;
    top: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    z-index: 10;
}

/* 2. Categorías: Llega hasta el TOPE SUPERIOR (top: 0) */
.home-card-2.categories-carousel-section {
    top: 0 !important;
    z-index: 20;
    background: #ffffff;
    padding: 6.5rem 0 4rem; /* Padding superior amplio para que el título quede visible bajo el menú */
    min-height: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.home-card-2 .categories-section-header {
    margin-bottom: 2rem;
}

/* 3 a 7. Secciones siguientes: Se detienen exactamente al borde inferior del menú */
.home-card-3.nueva-temporada-section,
.home-card-4.marcas-brasileñas-section,
.home-card-5.banner-destacado-section,
.home-card-6.tendencias-producto-section,
.home-card-7.estilos-section {
    top: var(--home-menu-offset) !important;
}

/* ==========================================================================
   Z-Index Progresivo por Capa
   ========================================================================== */
.home-card-1 { z-index: 10; } /* Hero */
.home-card-2 { z-index: 20; } /* Categorías */
.home-card-3 { z-index: 30; } /* Nueva Temporada */
.home-card-4 { z-index: 40; } /* Marcas Brasileñas */
.home-card-5 { z-index: 50; } /* Banner Destacado */
.home-card-6 { z-index: 60; } /* Tendencias de Producto */
.home-card-7 { z-index: 70; } /* Estilos */

/* ==========================================================================
   Estilos específicos por tarjeta
   ========================================================================== */

/* 3. Nueva Temporada */
.home-card-3.nueva-temporada-section {
    background: #fbfbfb;
    padding: 3.5rem 0 4.5rem;
    min-height: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 4. Marcas Brasileñas */
.home-card-4.marcas-brasileñas-section {
    background: #ffffff;
    padding: 3.5rem 0 4rem;
    min-height: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* 5. Banner Destacado */
.home-card-5.banner-destacado-section {
    padding: 0;
    min-height: 560px;
    height: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -22px 55px rgba(0, 0, 0, 0.2);
}

/* 6. Tendencias de Producto */
.home-card-6.tendencias-producto-section {
    background: #fbfbfb;
    padding: 3.5rem 0 4.5rem;
    min-height: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 7. Estilos */
.home-card-7.estilos-section {
    background: #ffffff;
    padding: 3.5rem 0 5.5rem;
    min-height: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* 8. Footer: Flujo normal al final, NO superposicionado */
.home-page .site-footer {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    z-index: 100 !important;
    border-radius: 36px 36px 0 0;
    box-shadow: 0 -18px 45px rgba(0, 0, 0, 0.25);
    background: #111111;
    color: #ffffff;
    padding: 2.5rem 0 2rem;
    margin-top: 0;
}

.home-page .site-footer .footer-content {
    padding: 0;
}

.home-page .site-footer .footer-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

/* ==========================================================================
   Efecto de escala y atenuación al ser cubierta (GSAP / Scroll)
   ========================================================================== */
.home-card-block.is-under {
    transform: scale(0.965);
    opacity: 0.88;
    filter: brightness(0.95);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease, filter 0.5s ease;
}

/* ==========================================================================
   Responsive (Móvil y Tablets)
   ========================================================================== */
@media (max-width: 991px) {
    .home-card-block.home-card-sticky {
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.1);
    }
    
    .home-card-2.categories-carousel-section {
        padding: 5.5rem 0 3rem;
    }
    
    .home-card-3.nueva-temporada-section,
    .home-card-4.marcas-brasileñas-section,
    .home-card-6.tendencias-producto-section,
    .home-card-7.estilos-section {
        padding: 2.5rem 0;
    }
}

@media (max-width: 768px) {
    /* ==========================================================================
       DESACTIVACIÓN DE APILAMIENTO EN MÓVIL: SCROLL NATIVO, PLANO Y CONTINUO
       ========================================================================== */
    .home-card-block,
    .home-card-block.home-card-sticky {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-top: none !important;
        transform: none !important;
        will-change: auto !important;
        overflow: visible !important;
    }

    .home-card-1.hero-carousel-new {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
    }

    .home-card-2.categories-carousel-section {
        padding: 3rem 0 2rem !important;
    }

    .home-card-3.nueva-temporada-section,
    .home-card-6.tendencias-producto-section {
        padding: 2rem 0 !important;
    }

    .home-card-4.marcas-brasileñas-section {
        padding: 2rem 0 !important;
    }

    .home-card-5.banner-destacado-section {
        min-height: 440px !important;
        height: auto !important;
    }

    .home-card-7.estilos-section {
        padding: 2rem 0 !important;
    }

    .home-page,
    .home-page body,
    .home-page #page,
    .home-page #main,
    .home-page .site-main {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
}