/* === ESTILOS PARA LA NUEVA PÁGINA "PROTOCOLO GÉNESIS" (CON ANIMACIONES) === */

/* --- Hero de la Página --- */
.protocol-hero {
    background-color: var(--color-background-secondary);
    border-bottom: 1px solid var(--color-border);
}

/* --- Sección 1: La Chispa --- */
.spark-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 40px;
}
@media (min-width: 992px) {
    .spark-grid { grid-template-columns: 200px 1fr; }
}

.spark-graphic-col .fa-brain {
    font-size: 120px;
    color: var(--color-primary);
    transition: text-shadow 0.5s ease;
}
/* Animación especial para el icono "chispa" */
.spark-graphic-col.visible .fa-brain {
    animation: brain-glow 1.5s ease-in-out forwards;
}
@keyframes brain-glow {
    0% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 40px var(--color-primary); }
    100% { text-shadow: 0 0 20px var(--color-primary); }
}

.spark-content-col p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    max-width: 700px;
}
.spark-content-col strong { color: var(--color-text); }


/* --- Sección 2: Manifiesto --- */
#manifiesto {
    background-color: var(--color-background-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.manifesto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.protocol-card {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 25px;
    background-color: var(--color-background-card);
}
.protocol-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.protocol-header span {
    font-family: var(--font-code);
    color: var(--color-accent-blue);
    font-size: 0.9rem;
}
.protocol-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 10px;
}
.protocol-card p {
    color: var(--color-text-light);
    font-size: 1rem;
}


/* --- Sección 3: Ecosistema --- */
.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.ecosystem-card {
    text-align: center;
    padding: 30px;
    border-radius: var(--border-radius);
    background-color: transparent;
    border: 1px solid var(--color-border);
}
.ecosystem-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.ecosystem-card h3 {
    text-transform: uppercase;
    font-size: 1.2rem;
}
.ecosystem-card p {
    color: var(--color-text-light);
    font-size: 1rem;
}


/* ================================================ */
/* ANIMACIONES DE ENTRADA                  */
/* ================================================ */

/* --- 1. Estado Inicial (Oculto) --- */
/* Todos los elementos a animar comienzan invisibles y ligeramente desplazados */
.spark-grid > div,
.protocol-card,
.ecosystem-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* --- 2. Estado Final (Visible) --- */
/* Cuando el script añade la clase .visible, los elementos vuelven a su posición original */
.spark-grid > div.visible,
.protocol-card.visible,
.ecosystem-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 3. Retrasos Escalonados (Stagger) --- */
/* Esto hace que no aparezcan todos a la vez */

/* Columnas de "La Chispa" */
.spark-grid > .spark-graphic-col.visible { transition-delay: 0.2s; }
.spark-grid > .spark-content-col.visible { transition-delay: 0.3s; }

/* Tarjetas del Manifiesto */
.manifesto-grid .protocol-card.visible:nth-child(1) { transition-delay: 0.2s; }
.manifesto-grid .protocol-card.visible:nth-child(2) { transition-delay: 0.3s; }
.manifesto-grid .protocol-card.visible:nth-child(3) { transition-delay: 0.4s; }
.manifesto-grid .protocol-card.visible:nth-child(4) { transition-delay: 0.5s; }

/* Tarjetas del Ecosistema */
.ecosystem-grid .ecosystem-card.visible:nth-child(1) { transition-delay: 0.2s; }
.ecosystem-grid .ecosystem-card.visible:nth-child(2) { transition-delay: 0.3s; }
.ecosystem-grid .ecosystem-card.visible:nth-child(3) { transition-delay: 0.4s; }


/* --- 4. Efectos Hover Adicionales --- */
/* Para que las tarjetas sigan siendo interactivas */
.protocol-card, .ecosystem-card {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, border-color 0.3s ease, background-color 0.3s ease;
}
.protocol-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent-blue);
}
.ecosystem-card:hover {
    background-color: var(--color-background-card);
    transform: translateY(-5px);
    border-color: var(--color-primary);
}