/* ==========================================================================
   ANIMACIONES Y ESTADOS ESPECIALES
   ========================================================================== */

/* Efecto de aparición (Reveal) al hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px); /* Empieza un poco más abajo */
    transition: all 0.8s ease-out;
}

/* Clase que se añade mediante JavaScript cuando el elemento es visible */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Modal / Lightbox para ver imágenes en grande */
.lightbox {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 2000;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    align-items: center; 
    justify-content: center;
}

.lightbox img { 
    max-width: 90%; 
    max-height: 80%; 
    border-radius: 10px; 
}