/* ============ ALTERNANCIA DE SECCIONES ============
   Cada sección de la portada alterna entre el color principal
   «subido» (fuerte) y el fondo claro. Sigue la paleta activa. */

.sec-claro {
    background: var(--crema);
}

.sec-fuerte {
    background: var(
        --fondo-fuerte,
        radial-gradient(
            ellipse at 85% -10%,
            rgba(255, 255, 255, 0.07),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 10% 110%,
            rgba(255, 255, 255, 0.05),
            transparent 50%
        ),
        linear-gradient(165deg, var(--verde), var(--verde-oscuro) 70%)
    );
    color: var(--texto-fuerte, #fffdf6);
}

/* Encabezados de sección sobre fondo fuerte */
.sec-fuerte .section-head h2,
.sec-fuerte .scrolly-step h3,
.sec-fuerte .tl-item h3,
.sec-fuerte .give-text h2 {
    color: var(--texto-fuerte, #fffdf6);
}

.sec-fuerte .section-head p,
.sec-fuerte .scrolly-step p,
.sec-fuerte .scrolly-step li,
.sec-fuerte .tl-item p,
.sec-fuerte .give-text > p {
    color: var(--texto-fuerte-sub, rgba(255, 253, 246, 0.78));
}
/* las cards internas de give-method mantienen colores oscuros sobre fondo crema */
.sec-fuerte .give-methods .give-method {
    background: var(--tarjeta-fuerte, var(--crema));
}
.sec-fuerte .give-methods .give-method h4 {
    color: var(--verde-oscuro);
}
.sec-fuerte .give-methods .give-method p {
    color: var(--tinta-sub);
}

.sec-fuerte .eyebrow {
    color: var(--eyebrow-fuerte, var(--oro-claro));
}

/* Línea del tiempo (agenda) */
.sec-fuerte .timeline::before {
    background: var(--fuerte-linea, rgba(255, 253, 246, 0.22));
}
.sec-fuerte .tl-place {
    color: var(--texto-fuerte-suave, rgba(255, 253, 246, 0.68));
}

/* Contador de intenciones */
.sec-fuerte .intencion-counter span {
    color: var(--texto-fuerte-sub, rgba(255, 253, 246, 0.82));
}
.sec-fuerte .intencion-counter strong {
    text-shadow: var(--fuerte-sombra, 0 2px 0 rgba(0, 0, 0, 0.25));
}

/* Botón oscuro de donaciones sobre fondo fuerte */
.sec-fuerte .btn-dark {
    border-color: var(--fuerte-btn-borde, var(--oro-claro));
    color: var(--fuerte-btn-texto, var(--oro-suave));
}
.sec-fuerte .btn-dark:hover,
.sec-fuerte .btn-dark:focus-visible {
    background: var(--oro);
    border-color: var(--oro);
    color: #fffdf6;
}

/* Contacto sobre fondo fuerte: textos e íconos claros para que se lean bien */
.sec-fuerte .contact-row h4,
.sec-fuerte .contact-social-title {
    color: var(--eyebrow-fuerte, var(--oro-claro));
}
.sec-fuerte .contact-row p {
    color: var(--texto-fuerte-sub, rgba(255, 253, 246, 0.82));
}
.sec-fuerte .seal svg,
.sec-fuerte .social-row svg {
    stroke: var(--fuerte-icono, var(--oro-claro));
}
.sec-fuerte .social-row a {
    border-color: var(--fuerte-linea, rgba(255, 253, 246, 0.28));
}
.sec-fuerte .social-row a:hover {
    border-color: var(--fuerte-icono, var(--oro-claro));
}

/* ============ FRASE DE LA VIRGEN (portada) ============ */
.cita-virgen {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.cita-inner {
    max-width: 840px;
    margin: 0 auto;
}
.cita-ornamento {
    display: block;
    color: var(--oro);
    width: 1.15rem;
    height: 1.15rem;
    margin: 0 auto 1.5rem;
}
.cita-frase {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    color: var(--verde-oscuro);
    font-size: clamp(1.45rem, 4.2vw, 2.5rem);
    line-height: 1.45;
    letter-spacing: 0.01em;
    min-height: 1.45em;
}
/* Cursor parpadeante de la máquina de escribir */
.cita-caret {
    display: inline-block;
    color: var(--oro);
    font-style: normal;
    font-weight: 400;
    margin-left: 0.05em;
    animation: citaCaret 0.85s steps(1) infinite;
}
@keyframes citaCaret {
    50% {
        opacity: 0;
    }
}