/*
 * Estilos para el Slider de Héroe Personalizado v5.0 (Enfoque Híbrido)
 */

.hero-slider-wrapper {
    position: relative;
    width: 100%;
    height: 550px;
    background-color: #fff;
    overflow: hidden;
}

.hero-slider { position: relative; width: 100%; height: 100%; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide-layers { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

/* CAMBIO: Los elementos inician con opacidad 0 y se harán visibles con JS */
.slide-layer {
    position: absolute;
    max-width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease; /* Transición suave para cuando JS los haga visibles */
}

/* Durante la carga, nos aseguramos de que las capas permanezcan invisibles */
.hero-slider-wrapper.is-loading .slide-layer {
    display: none;
}

/* CAMBIO: 'animation-fill-mode' ya no es necesario aquí */
.hero-slider-wrapper:not(.is-loading) .slide-layer {
    animation-fill-mode: forwards;
}

/* --- DEFINICIÓN DE LAS ANIMACIONES (@keyframes) --- */
/* (Volvemos a la versión anterior, sin 'visibility' al 100%) */

@keyframes slideUp {
    from { transform: translateY(20%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes dropDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- APLICACIÓN DE LAS ANIMACIONES A LAS CAPAS --- */

.hero-slider-wrapper:not(.is-loading) .slide.is-active .slide-background {
    animation: slideUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.1s;
}
.hero-slider-wrapper:not(.is-loading) .slide.is-active .slide-products {
    animation: dropDown 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s;
}
.hero-slider-wrapper:not(.is-loading) .slide.is-active .slide-main-text {
    animation: slideInLeft 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.9s;
}
.hero-slider-wrapper:not(.is-loading) .slide.is-active .slide-button {
    animation: fadeIn 1.2s ease forwards;
    animation-delay: 1.3s;
}


/* --- POSICIONAMIENTO Y ESTILOS (Sin cambios) --- */
.slide-background { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slide-products { width: 60%; max-width: 800px; }
.slide-main-text { width: 50%; max-width: 650px; top: 10%; }
.slide-button { width: 25%; max-width: 350px; bottom: 10%; }
.slide-button img { display: block; }
.desktop-only { display: block; }
.mobile-only { display: none; }
.slider-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; }
.nav-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #8A2BE2; background-color: transparent; cursor: pointer; padding: 0; transition: background-color 0.3s ease; }
.nav-dot.is-active { background-color: #8A2BE2; }

/* --- RESPONSIVE (Sin cambios) --- */
@media (max-width: 1024px) {
    .hero-slider-wrapper { height: 450px; }
    .slide-products { width: 70%; }
    .slide-main-text { width: 60%; }
    .slide-button { width: 35%; bottom: 8%; }
}
@media (max-width: 767px) {
    .hero-slider-wrapper { height: 600px; }
    .desktop-only { display: none; }
    .mobile-only { display: block; }
    .slide-products { width: 90%; max-width: 400px; }
    .slide-main-text { width: 80%; max-width: 380px; top: 5%; }
    .slide-button { width: 60%; max-width: 300px; bottom: 5%; }
}