/* Configuración General */
body {
    font-family: 'Inter', sans-serif;
    /* Eliminamos el overflow hidden global para permitir scroll */
    overflow-x: hidden; 
}

/* --- ANIMACIONES DE ENTRADA (HERO) --- */
.fade-in-up {
    animation: fadeInUp 1.2s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.delay-100 { animation-delay: 0.2s; }
.delay-200 { animation-delay: 0.4s; }
.delay-300 { animation-delay: 0.6s; }

/* --- ANIMACIONES DE SCROLL (REVEAL) --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animación de rotación lenta (Asterisco) */
.animate-spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- ESTILOS DEL SCROLLER INFINITO --- */
.scroller {
    max-width: 100%;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .scroller[data-animated="true"] {
        overflow: hidden;
        -webkit-mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
        mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
    }

    .scroller[data-animated="true"] .scroller__inner {
        width: max-content;
        flex-wrap: nowrap;
        animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
    }

    .scroller[data-direction="right"] { --_animation-direction: reverse; }
    .scroller[data-direction="left"] { --_animation-direction: normal; }
    .scroller[data-speed="fast"] { --_animation-duration: 20s; }
    .scroller[data-speed="slow"] { --_animation-duration: 30s; }
}

@keyframes scroll {
    to { transform: translate(calc(-50% - 0.75rem)); }
}

/* Bordes Punteados */
.border-dashed {
    border-style: dashed;
}

/* --- TEXT GLOW PARA TARJETAS OSCURAS --- */
.text-glow {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- ZOOM SECTION --- */
#zoom-image-container img {
    image-rendering: -webkit-optimize-contrast;
    transition: filter 0.1s linear, transform 0.1s linear;
}

#zoom-scroll-section {
    clip-path: inset(0);
}

section {
    margin-bottom: -1px;
}

/* Detalles (FAQ) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Ocultar en móvil */
@media (max-width: 767px) {
    .hide-on-mobile { display: none !important; }
}

/* ======================================================== */
/*  AQUÍ ESTABA EL ERROR: FALTABAN ESTILOS DE ACTIVACIÓN    */
/* ======================================================== */

/* 1. Contenedor del Paso (Fijo en el centro) */
.story-step {
    /* Posición fija en el centro */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 48rem;
    
    /* Estado inicial */
    opacity: 0;
    filter: blur(20px); /* Empieza muy borroso */
    
    /* IMPORTANTE: Quitamos transición de opacity/filter para que el JS sea instantáneo */
    /* Solo dejamos transform para suavizar movimientos si los hubiera */
    transition: transform 0.1s linear; 
    
    pointer-events: none;
    will-change: opacity, filter, transform;
}

/* 2. Estado Activo (Esto faltaba): Hace visible el contenedor */
.story-step.active {
    opacity: 1;
    pointer-events: auto;
}

/* El contenido interno ya no necesita animación CSS, el JS lo hará todo */
.story-content {
    display: inline-block;
}

/* Cuando el paso está activo, el contenido sube */
.story-step.active .story-content {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Palabras Flotantes (Step 3) */
.story-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.story-word.active {
    opacity: 1;
    transform: translateY(0);
}

/* 5. Barras de Progreso */
.progress-segment {
    transition: height 0.3s ease;
}
.progress-segment.active {
    height: 3px;
}
.progress-segment > div {
    width: 0%;
    transition: width 0.1s linear;
}