/* ============================================================
   boutique.css — Ara Boutique custom styles
   Complementa Tailwind CDN con clases que no se pueden
   generar dinámicamente en tiempo de ejecución.
   ============================================================ */

/* ----- Íconos Material Symbols ----- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* ----- Gradiente editorial del navbar ----- */
.editorial-gradient {
    background: linear-gradient(to bottom, #efedec, transparent);
}

/* ----- FAB WhatsApp con blur ----- */
.glass-fab {
    background: rgba(251, 249, 247, 0.8);
    backdrop-filter: blur(12px);
}

/* ----- Ocultar scrollbar horizontal en tabs ----- */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE / Edge */
    scrollbar-width: none;
    /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari */
}

/* ----- Animación suave al filtrar productos ----- */
#product-grid [data-category] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#product-grid [data-category].hidden-product {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
    display: none;
}

/* Navbar: transición suave — los valores los maneja JS con inline style */
#main-navbar {
    transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
#main-navbar .hamburger-line {
    transition: background-color 0.4s ease;
}
#main-navbar .fav-icon {
    transition: color 0.4s ease;
}
#main-navbar .btn-consultar {
    transition: background 0.4s ease, color 0.4s ease, border 0.4s ease;
}
#main-navbar .nav-link-desktop {
    transition: color 0.4s ease;
}

/* ----- Hero Carousel ----- */
#hero-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Ocupa toda la pantalla — el navbar flota encima */
    height: 100svh;
}

@media (min-width: 768px) {
    #hero-carousel {
        height: 921px;
    }
}

#carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.carousel-slide {
    position: relative;
    /* Crítico: ancho exacto del contenedor, no más */
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
}

/* Animacion de entrada del texto */
.carousel-slide .relative.z-10 > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.carousel-slide.is-active .relative.z-10 > * {
    opacity: 1;
    transform: translateY(0);
}
.carousel-slide.is-active .relative.z-10 > *:nth-child(1) { transition-delay: 0.1s; }
.carousel-slide.is-active .relative.z-10 > *:nth-child(2) { transition-delay: 0.2s; }
.carousel-slide.is-active .relative.z-10 > *:nth-child(3) { transition-delay: 0.3s; }
.carousel-slide.is-active .relative.z-10 > *:nth-child(4) { transition-delay: 0.4s; }

/* Dots */
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}
.carousel-dot.active-dot {
    width: 32px;
    background: #fff;
}

/* ----- Home: Nuestra Colección — ajustes cards en mobile ----- */
@media (max-width: 639px) {
    #home-product-grid .group .p-6 {
        padding: 0.6rem 0.5rem;
    }
    #home-product-grid .group h3 {
        font-size: 0.85rem;
        line-height: 1.2;
        margin-bottom: 0.15rem;
    }
    #home-product-grid .group p.text-xs {
        font-size: 0.65rem;
    }
    #home-product-grid .group .text-lg {
        font-size: 0.8rem;
    }
    #home-product-grid .group a[href*="wa.me"],
    #home-product-grid .group a[href*="whatsapp"] {
        padding: 0.4rem 0.5rem;
        font-size: 0.6rem;
        gap: 0.2rem;
    }
    #home-product-grid .group a[href*="wa.me"] .material-symbols-outlined,
    #home-product-grid .group a[href*="whatsapp"] .material-symbols-outlined {
        font-size: 0.8rem;
    }
}