/* === ANIMACIÓN LÍNEA ÁUREA === */
.linea-aurea-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    z-index: 0;
    opacity: 0.5;
}

.linea-aurea-svg path {
    stroke: var(--color-accent);
}

/* === ANIMACIÓN DE DESPLIEGUE (FADE IN ON SCROLL) - CORREGIDA === */
.fade-in-section {
    opacity: 0;
    transform: translateY(50px); 
    transition: opacity 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000), 
                transform 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* === NUEVO: ANIMACIÓN DE DESPLIEGUE "ORIGAMI" === */
/* Esta es la clase que aplicarás a las secciones que quieres que se "desplieguen". */
.origami-reveal {
    opacity: 0;
    /* Inicia rotado 90 grados en el eje X, como si estuviera plegado en el suelo */
    transform: perspective(1000px) rotateX(-90deg);
    /* El origen de la transformación es el borde superior */
    transform-origin: top center;
    /* Transición lenta y suave para un efecto elegante */
    transition: opacity 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                transform 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* El estado final cuando el elemento es visible */
.origami-reveal.is-visible {
    opacity: 1;
    /* Vuelve a la rotación normal, completando el despliegue */
    transform: perspective(1000px) rotateX(0deg);
}