/* ============================================================
   ANIMACIONES.CSS · Movimiento suave y corporativo
   ------------------------------------------------------------
   Familias:
   1. Entrada al cargar (fade + subida) para caja, ícono, texto.
   2. Botones escalonados (uno tras otro).
   3. Foto de las internas entrando hacia arriba.
   4. Modal con zoom elegante.
   5. Scroll-reveal (index): elementos suben al entrar en pantalla.

   Accesibilidad: si el usuario pide "reducir movimiento",
   se desactivan todas las animaciones (buena práctica pro).
   ============================================================ */

/* ---------- Keyframes base ---------- */
@keyframes subirFade {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomFade {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes fondoFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   1 + 2. ENTRADAS AL CARGAR (internas e intros)
   Los elementos empiezan invisibles y entran con subida+fade.
   El escalonado se logra con retrasos crecientes.
   ============================================================ */

/* Elementos que se animan al cargar: parten ocultos */
.anim-entrada {
    opacity: 0;
    animation: subirFade 0.6s ease-out forwards;
}

/* Retrasos para el efecto escalonado (stagger) */
.anim-d1 { animation-delay: 0.05s; }
.anim-d2 { animation-delay: 0.15s; }
.anim-d3 { animation-delay: 0.25s; }
.anim-d4 { animation-delay: 0.35s; }
.anim-d5 { animation-delay: 0.45s; }
.anim-d6 { animation-delay: 0.55s; }
.anim-d7 { animation-delay: 0.65s; }

/* ============================================================
   3. FOTO DE LAS INTERNAS entrando hacia arriba
   Un poco más lenta y con más recorrido, se siente cinematográfica.
   ============================================================ */
@keyframes fotoEntra {
    from { opacity: 0; transform: translateY(48px) scale(1.04); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.anim-foto {
    animation: fotoEntra 0.8s ease-out forwards;
}

/* ============================================================
   4. MODAL con zoom elegante
   El fondo aparece con fade; la caja entra con zoom suave.
   ============================================================ */
.modal.abierto {
    animation: fondoFade 0.25s ease-out;
}
.modal.abierto .modal__caja {
    animation: zoomFade 0.35s ease-out;
}

/* ============================================================
   5. SCROLL-REVEAL (index): elementos suben al entrar en pantalla
   Parten ocultos; el JS les añade .visible cuando aparecen.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   ACCESIBILIDAD: respetar "reducir movimiento"
   Si el sistema del usuario lo pide, todo aparece sin animación.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .anim-entrada,
    .anim-foto,
    .modal.abierto,
    .modal.abierto .modal__caja {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}