/* ==========================================================================
   Propósito del inicio (#proposito) — «Análisis · Evidencia · Territorio»
   --------------------------------------------------------------------------
   Sección inmediatamente después del hero. Fondo transparente (el color de
   página y las constelaciones del fondo global quedan detrás), tres columnas
   sin tarjeta separadas por hilos verticales, iconos de trazo y mucho aire.

   Prefijo `vp-`. Especificidad `#proposito.vp-section` para ganar al
   `section { padding }` de styles.css sin tocarlo. Solo animaciones de
   entrada (assets/js/proposito.js añade `.is-in`); no hay estados hover.
   ========================================================================== */

#proposito.vp-section {
    --vp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --vp-line: rgba(0, 45, 90, 0.13);
    --vp-muted: var(--gray-text);
    --vp-node-line: rgba(13, 83, 145, 0.09);
    --vp-node: rgba(30, 120, 190, 0.13);
    --vp-node-ring: rgba(35, 113, 179, 0.11);

    position: relative;
    padding: clamp(72px, 8vw, 112px) 0 clamp(64px, 7vw, 96px);
    overflow: hidden;
    background-color: transparent !important;
    background-image: none !important;
}

/* Lavado casi imperceptible a la derecha, como en la referencia. */
#proposito.vp-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(55% 60% at 100% 62%, rgba(0, 75, 135, 0.045), rgba(0, 75, 135, 0) 70%);
}

.vp-wrap {
    position: relative;
    z-index: 1;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Nodos discretos en las esquinas ------------------------------------- */

.vp-deco {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease 0.2s;
}

#proposito.is-in .vp-deco { opacity: 1; }

.vp-deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vp-deco line { stroke: var(--vp-node-line); stroke-width: 1; }
.vp-deco circle { fill: var(--vp-node); }
.vp-deco circle.vp-deco__ring { fill: none; stroke: var(--vp-node-ring); stroke-width: 1; }

.vp-deco--tl { top: -28px; left: -36px; width: clamp(200px, 22vw, 320px); height: clamp(200px, 22vw, 320px); }
.vp-deco--br { right: -48px; bottom: -40px; width: clamp(180px, 20vw, 280px); height: clamp(180px, 20vw, 280px); }

/* --- Encabezado ---------------------------------------------------------- */

.vp-head {
    max-width: 980px;
    margin: 0 auto clamp(48px, 5.5vw, 72px);
    text-align: center;
}

.vp-eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding-top: 18px;
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-blue);
}

/* Línea verde encima, centrada; se dibuja al entrar. */
.vp-eyebrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--emerald);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.9s var(--vp-ease) 0.15s;
}

.vp-head.is-in .vp-eyebrow::before { transform: translateX(-50%) scaleX(1); }

.vp-title {
    margin: 0 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2.1rem, 3.5vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--primary-blue);
    text-wrap: balance;
}

.vp-title .vp-dot {
    display: inline; /* no inline-block: permitiría cortar línea justo antes del punto */
    margin: 0 0.18em;
    color: var(--emerald);
    font-weight: 900;
}

.vp-lead {
    margin: 0 auto;
    max-width: 640px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.6;
    color: var(--vp-muted);
    text-wrap: pretty;
}

/* --- Tres columnas ------------------------------------------------------- */

.vp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vp-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px clamp(20px, 3vw, 44px);
}

/* Hilo vertical entre columnas: crece desde arriba al entrar. */
.vp-col + .vp-col::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--vp-line) 18%, var(--vp-line) 82%, transparent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1s var(--vp-ease) calc(var(--d, 0) * 0.11s + 0.2s);
}

.vp-col.is-in::before { transform: scaleY(1); }

.vp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 26px;
    border-radius: 50%;
    color: var(--accent-blue);
    background: rgba(0, 75, 135, 0.08);
}

.vp-icon svg {
    width: 40px;
    height: 40px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vp-icon--green {
    color: #3F7A1E;
    background: rgba(141, 198, 63, 0.18);
}

.vp-icon--navy {
    color: var(--primary-blue);
    background: rgba(0, 45, 90, 0.07);
}

.vp-col__title {
    margin: 0 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-blue);
}

.vp-col__text {
    margin: 0;
    max-width: 30ch;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vp-muted);
    text-wrap: pretty;
}

/* --- Cierre: dos barras de marca ----------------------------------------- */

.vp-mark {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(44px, 5vw, 64px);
}

.vp-mark span {
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--primary-blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.9s var(--vp-ease) 0.1s;
}

.vp-mark span:last-child {
    background: var(--emerald);
    transform-origin: left;
    transition-delay: 0.25s;
}

.vp-mark.is-in span { transform: scaleX(1); }

/* --- Entrada en viewport ------------------------------------------------- */

.vp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.85s var(--vp-ease), transform 0.85s var(--vp-ease);
    transition-delay: calc(var(--d, 0) * 0.11s);
    will-change: opacity, transform;
}

.vp-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* --- Responsive ---------------------------------------------------------- */

/* Portátiles con poca altura: menos aire vertical, como la Sala de Prensa. */
@media (max-height: 820px) and (min-width: 1200px) {
    #proposito.vp-section { padding: 56px 0 48px; }
    .vp-head { margin-bottom: 40px; }
    .vp-icon { width: 84px; height: 84px; margin-bottom: 20px; }
    .vp-mark { margin-top: 36px; }
}

@media (max-width: 899px) {
    .vp-grid { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    .vp-col { padding: 28px 8px; }

    /* Apiladas: el hilo pasa a horizontal, corto y centrado. */
    .vp-col + .vp-col::before {
        top: 0;
        bottom: auto;
        left: 50%;
        width: 120px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--vp-line) 25%, var(--vp-line) 75%, transparent);
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
    }
    .vp-col.is-in::before { transform: translateX(-50%) scaleX(1); }

    /* Cada bloque entra cuando le toca; sin escalonado acumulado. */
    .vp-reveal { transition-delay: 0s; }
    .vp-col + .vp-col::before { transition-delay: 0.15s; }

    .vp-deco--br { display: none; }
    .vp-deco--tl { top: -40px; left: -60px; width: 200px; height: 200px; }
}

@media (max-width: 767px) {
    #proposito.vp-section { padding: 60px 0 52px; }
    .vp-head { margin-bottom: 36px; }
    .vp-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .vp-title .vp-dot { margin: 0 0.12em; }
    .vp-lead { font-size: 1.02rem; }
    .vp-icon { width: 84px; height: 84px; margin-bottom: 18px; }
    .vp-icon svg { width: 36px; height: 36px; }
    .vp-col__title { font-size: 1.04rem; }
    .vp-mark { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-reveal,
    .vp-deco,
    .vp-eyebrow::before,
    .vp-col + .vp-col::before,
    .vp-mark span {
        transition: none;
        opacity: 1;
    }
    .vp-reveal, .vp-mark span { transform: none; }
    .vp-eyebrow::before { transform: translateX(-50%) scaleX(1); }
    .vp-col + .vp-col::before { transform: scaleY(1); }
    @media (max-width: 899px) {
        .vp-col + .vp-col::before { transform: translateX(-50%) scaleX(1); }
    }
}

/* Sin titular ni texto de entrada (2026-09-21): las tres columnas van solas,
   con menos aire arriba para que no quede un vacío tras el hero. */
#proposito.vp-section--compact { padding: clamp(56px, 6vw, 80px) 0 clamp(56px, 6vw, 84px); }
.vp-head--label { margin-bottom: clamp(28px, 3.5vw, 44px); }
.vp-head--label .vp-eyebrow { margin-bottom: 0; }