/*
 * AXIS site-v2 base.css — estilos compartidos entre las 5 plantillas.
 * Define layout, tipografía base, header, footer, formularios y accesibilidad.
 * Los tokens de color/fuente específicos de cada plantilla se sobreescriben
 * en su archivo `{template}.css`.
 *
 * ─── Contrato de marca "nivel A" (Fase AV) ───────────────────────────────
 * La PLANTILLA es la BASE (estructura + personalidad). La MARCA (color de
 * acento + pareja de fuentes) se aplica ENCIMA sobre cualquier plantilla, sin
 * romper su carácter, con el patrón var-con-fallback (sin guerra de
 * especificidad). El layout inyecta estas variables en `:root` SOLO cuando el
 * sitio las configuró; si no, cada plantilla cae a su propio default (el 2º
 * argumento de var()). NO definir defaults globales acá que pisen plantillas.
 *
 *   --brand-primary        primario: botones, enlaces, CTAs, estados activos,
 *                          focus, date-badge, barras y bordes de realce.
 *   --brand-primary-hover  el primario oscurecido ~12% (para hovers, AA).
 *   --brand-on-primary     tinta legible SOBRE el primario (blanco o negro por
 *                          luminancia WCAG) — úsala como color de texto donde
 *                          el primario es fondo.
 *   --brand-accent         ACENTO secundario: eyebrows, badges, subrayados,
 *                          barra de progreso de causas, detalles. NUNCA fondo
 *                          de texto largo. Cada plantilla trae su propio default.
 *   --brand-accent-hover   el acento oscurecido ~12% (para hovers, AA).
 *   --brand-on-accent      tinta legible SOBRE el acento (blanco o negro por
 *                          luminancia WCAG) — úsala donde el acento es fondo.
 *   --brand-font-display   familia de TÍTULOS elegida.
 *   --brand-font-body      familia de CUERPO elegida.
 *
 * Se QUEDAN en cada plantilla (personalidad estructural, no marca): neutros
 * (bg/ink/muted/border), radios, sombras, escala tipográfica, forma del
 * overlay del hero, tratamiento de cards y ritmo de secciones.
 */

:root {
    --v2s-navy: #081D29;
    --v2s-green: var(--brand-primary, #3ED338);
    --v2s-green-hover: var(--brand-primary-hover, #30A02A);
    --v2s-bg: #F7F7F7;
    --v2s-paper: #FFFFFF;
    --v2s-muted: #6B7280;
    --v2s-border: #E5E7EB;
    --v2s-radius: 12px;
    --v2s-radius-lg: 20px;
    --v2s-shadow: 0 8px 24px rgba(8, 29, 41, 0.06);
    --v2s-sans: var(--brand-font-body, 'Mulish', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    --v2s-serif: var(--brand-font-display, 'Instrument Serif', Georgia, serif);
    --v2s-content-max: 1140px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--v2s-sans);
    background: var(--v2s-bg);
    color: var(--v2s-navy);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Skip link (accesibilidad) */
.v2s__skip {
    position: absolute;
    top: -100px;
    left: 12px;
    padding: 10px 16px;
    background: var(--v2s-navy);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    z-index: 1000;
    transition: top .2s ease;
}
.v2s__skip:focus { top: 12px; outline: 2px solid var(--v2s-green); }

.v2s__container {
    width: 100%;
    max-width: var(--v2s-content-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Header ─────────────────────────────────────────────────────── */
.v2s__header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--v2s-border);
}
.v2s__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 68px;
}
.v2s__brand {
    text-decoration: none;
    color: var(--v2s-navy);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
}
.v2s__brand-logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}
@media (max-width: 800px) {
    .v2s__brand-logo { height: 42px; max-width: 200px; }
}
/* Una sola línea SIEMPRE en desktop: nowrap + tipografía compacta. Con menús
   largos (8+ ítems) el hamburguesa entra antes (≤1024px) — nunca dos filas. */
.v2s__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    min-width: 0;
}
.v2s__nav-link {
    color: var(--v2s-navy);
    text-decoration: none;
    padding: 8px 9px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: background .15s ease;
}
.v2s__nav-link:hover { background: var(--v2s-bg); }
.v2s__cta-header {
    padding: 10px 18px;
    background: var(--v2s-green);
    color: var(--brand-on-primary, var(--v2s-navy));
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s ease;
    flex: none;
}
.v2s__cta-header:hover { background: var(--v2s-green-hover); color: var(--brand-on-primary, #fff); }

/* ─── Menú hamburguesa móvil (Fase BG — compartido por las 5 plantillas) ──
   En desktop el botón está oculto y el nav es horizontal EXACTAMENTE como
   siempre. Bajo el breakpoint (≤1024px) el nav inline se colapsa detrás del
   botón ☰ y se despliega como panel vertical bajo el header cuando el header
   toma la clase .is-open (la setea v2-site-nav.js). Contraste AA vía las
   variables de marca — sin color hardcodeado. */
.v2s__nav-toggle {
    display: none; /* oculto en desktop; el media query lo muestra en móvil */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: none;
    border: 1px solid var(--v2s-border);
    border-radius: 10px;
    background: transparent;
    color: var(--v2s-navy);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.v2s__nav-toggle:hover { background: var(--v2s-bg); }
.v2s__nav-toggle:focus-visible { outline: 2px solid var(--v2s-green); outline-offset: 2px; }
.v2s__nav-toggle-icon { display: block; pointer-events: none; }

/* El Donar del panel solo existe en móvil (dentro del <nav>). */
.v2s__nav-cta { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .v2s__nav-toggle { transition: background .15s ease, border-color .15s ease; }
}

@media (max-width: 1024px) {
    .v2s__header-inner { position: relative; }
    .v2s__nav-toggle { display: inline-flex; }
    /* El CTA de escritorio (hermano directo) se esconde: Donar vive en el panel. */
    .v2s__header-inner > .v2s__cta-header { display: none; }

    .v2s__nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 16px 16px;
        background: var(--v2s-paper);
        border-bottom: 1px solid var(--v2s-border);
        box-shadow: var(--v2s-shadow);
        display: none; /* colapsado por defecto */
    }
    .v2s__header.is-open .v2s__nav { display: flex; }

    .v2s__nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 15px;
        border-radius: 10px;
    }

    .v2s__nav-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin-top: 8px;
        text-align: center;
    }
}

/* ─── Main + sections ────────────────────────────────────────────── */
.v2s__main { padding: 40px 0 80px; }
.v2s__section { padding: var(--v2s-section-pad, 60px) 0; }
.v2s__section-alt { background: var(--v2s-section-alt-bg, var(--v2s-paper)); }

.v2s__eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2s-green-hover);
    margin: 0 0 12px;
}
.v2s__h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 20px; color: var(--v2s-navy); }
.v2s__h2 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 16px; color: var(--v2s-navy); }
.v2s__h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--v2s-navy); }
.v2s__lead { font-size: clamp(16px, 2vw, 18px); color: var(--v2s-muted); line-height: 1.6; margin: 0 0 24px; max-width: 640px; }

/* ─── Botones ────────────────────────────────────────────────────── */
.v2s__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--v2s-btn-radius, 10px);
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--v2s-sans);
    transition: background .15s ease, transform .15s ease;
}
.v2s__btn--primary {
    background: var(--v2s-green);
    color: var(--brand-on-primary, var(--v2s-navy));
}
.v2s__btn--primary:hover { background: var(--v2s-green-hover); color: var(--brand-on-primary, #fff); }
.v2s__btn--outline {
    background: transparent;
    color: var(--v2s-navy);
    border: 1.5px solid var(--v2s-navy);
}
.v2s__btn--outline:hover { background: var(--v2s-navy); color: #fff; }
.v2s__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.v2s__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ─── Hero ───────────────────────────────────────────────────────── */
.v2s__hero {
    padding: 80px 0 60px;
    background: linear-gradient(180deg, var(--v2s-paper) 0%, var(--v2s-bg) 100%);
}

/* ─── Cards genéricas ────────────────────────────────────────────── */
.v2s__card {
    background: var(--v2s-paper);
    border: 1px solid var(--v2s-border);
    border-radius: var(--v2s-radius);
    padding: 24px;
    box-shadow: var(--v2s-shadow);
}

/* ─── KPIs ──────────────────────────────────────────────────────── */
.v2s__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 32px 0;
}
.v2s__kpi {
    text-align: center;
    padding: 24px 12px;
    background: var(--v2s-paper);
    border: 1px solid var(--v2s-border);
    border-radius: var(--v2s-radius);
}
.v2s__kpi-num {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: var(--v2s-green-hover);
    letter-spacing: -0.02em;
    line-height: 1;
}
.v2s__kpi-label {
    font-size: 13px;
    color: var(--v2s-muted);
    font-weight: 600;
    margin-top: 8px;
}

/* ─── Grid genérico ──────────────────────────────────────────────── */
.v2s__grid {
    display: grid;
    gap: 24px;
}
.v2s__grid--2 { grid-template-columns: 1fr; }
.v2s__grid--3 { grid-template-columns: 1fr; }
.v2s__grid--4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .v2s__grid--2 { grid-template-columns: repeat(2, 1fr); }
    .v2s__grid--3 { grid-template-columns: repeat(2, 1fr); }
    .v2s__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .v2s__grid--3 { grid-template-columns: repeat(3, 1fr); }
    .v2s__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Cards de item (evento, programa, historia, aliado, convocatoria) */
.v2s__item-card {
    display: flex;
    flex-direction: column;
    background: var(--v2s-paper);
    border: 1px solid var(--v2s-border);
    border-radius: var(--v2s-radius);
    overflow: hidden;
    box-shadow: var(--v2s-shadow);
    text-decoration: none;
    color: var(--v2s-navy);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.v2s__item-card:hover {
    box-shadow: 0 12px 32px rgba(8, 29, 41, 0.10);
    transform: translateY(-2px);
    border-color: var(--v2s-green);
}
.v2s__item-card-cover {
    aspect-ratio: 4/3;
    background: var(--v2s-bg);
    overflow: hidden;
}
.v2s__item-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v2s__item-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.v2s__item-card-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v2s-green-hover);
}
.v2s__item-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.v2s__item-card-summary {
    font-size: 14px;
    color: var(--v2s-muted);
    margin: 0;
    line-height: 1.5;
}
.v2s__item-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--v2s-muted);
    margin-top: auto;
}

/* Sección con título centrado */
.v2s__section-title {
    text-align: center;
    margin-bottom: 40px;
}
.v2s__section-title .v2s__eyebrow { display: inline-block; }

/* ─── Prose (contenido largo) ───────────────────────────────────── */
.v2s__prose {
    max-width: 720px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: var(--v2s-navy);
}
.v2s__prose p { margin: 0 0 16px; }
.v2s__prose h2 { font-size: 24px; font-weight: 800; margin: 32px 0 12px; }
.v2s__prose h3 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; }
.v2s__prose ul, .v2s__prose ol { padding-left: 22px; margin: 0 0 16px; }
.v2s__prose li { margin: 4px 0; }
.v2s__prose a { color: var(--v2s-green-hover); }

/* ─── Formularios ────────────────────────────────────────────────── */
.v2s__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 560px;
    margin: 0 auto;
}
.v2s__form-field label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--v2s-navy);
}
.v2s__form-field .v2s__form-hint {
    display: block;
    font-size: 12.5px;
    color: var(--v2s-muted);
    margin-bottom: 6px;
}
.v2s__form-field input[type="text"],
.v2s__form-field input[type="email"],
.v2s__form-field input[type="tel"],
.v2s__form-field input[type="number"],
.v2s__form-field select,
.v2s__form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    font-size: 15px;
    color: var(--v2s-navy);
    font-family: var(--v2s-sans);
    background: #fff;
}
.v2s__form-field textarea {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}
.v2s__form-field input:focus,
.v2s__form-field textarea:focus,
.v2s__form-field select:focus {
    outline: none;
    border-color: var(--v2s-green);
    box-shadow: 0 0 0 3px rgba(62, 211, 56, 0.15);
}
.v2s__form-consent {
    display: flex;
    gap: 10px;
    padding: 16px;
    background: var(--v2s-bg);
    border: 1px solid var(--v2s-border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--v2s-muted);
    line-height: 1.5;
}
.v2s__form-consent input { margin-top: 2px; accent-color: var(--v2s-green); }
.v2s__form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}
.v2s__form-error {
    color: #E5484D;
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}
.v2s__form-success {
    padding: 16px;
    background: #EDFCEC;
    border: 1px solid var(--v2s-green);
    color: var(--v2s-green-hover);
    border-radius: 10px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.v2s__footer {
    background: var(--v2s-navy);
    color: #fff;
    padding: 60px 0 0;
    margin-top: 80px;
}
.v2s__footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
}
@media (min-width: 700px) {
    .v2s__footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.v2s__footer-name { margin: 0 0 8px; font-weight: 800; font-size: 20px; }
.v2s__footer-logo { display: block; height: 48px; width: auto; max-width: 240px; object-fit: contain; margin: 0 0 14px; }
.v2s__footer-tagline { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; }
.v2s__footer-heading { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; color: rgba(255, 255, 255, 0.55); }
.v2s__footer-nav ul { list-style: none; margin: 0; padding: 0; }
.v2s__footer-nav li { margin-bottom: 6px; }
.v2s__footer-nav a { color: #fff; text-decoration: none; font-size: 14px; opacity: 0.85; }
.v2s__footer-nav a:hover { opacity: 1; text-decoration: underline; }
.v2s__footer-contact p { margin: 0 0 6px; font-size: 14px; opacity: 0.85; }
.v2s__footer-contact a { color: #fff; }
.v2s__footer-social-links { display: flex; flex-direction: column; gap: 6px; }
.v2s__footer-social-links a { color: #fff; text-decoration: none; font-size: 14px; opacity: 0.85; }
.v2s__footer-social-links a:hover { opacity: 1; text-decoration: underline; }
.v2s__footer-credit {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}
.v2s__footer-credit a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-weight: 700; }
.v2s__footer-credit a:hover { color: #fff; text-decoration: underline; }

/* ─── Badge de fecha (evento, convocatoria) ─────────────────────── */
.v2s__date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--v2s-green);
    color: var(--v2s-navy);
    border-radius: 10px;
    padding: 6px 10px;
    min-width: 56px;
    font-family: var(--v2s-sans);
}
.v2s__date-badge-day { font-size: 22px; font-weight: 800; line-height: 1; }
.v2s__date-badge-month { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

/* ─── Hero con imagen de fondo ───────────────────────────────────────
   El partial emite style="--v2s-hero-img:url('…')" y la clase --img.
   Cada plantilla define su propio overlay via --v2s-hero-overlay. */
.v2s__hero--img {
    position: relative;
    background-image:
        var(--v2s-hero-overlay, linear-gradient(160deg, rgba(8, 29, 41, 0.86) 0%, rgba(8, 29, 41, 0.62) 55%, rgba(8, 29, 41, 0.45) 100%)),
        var(--v2s-hero-img);
    background-size: cover, cover;
    background-position: center, center;
    padding: 110px 0 90px;
}
.v2s__hero--img .v2s__h1 { color: #FFFFFF; }
.v2s__hero--img .v2s__lead { color: rgba(255, 255, 255, 0.92); }
.v2s__hero--img .v2s__eyebrow { color: rgba(255, 255, 255, 0.88); }
.v2s__hero--img .v2s__h1 em { color: var(--v2s-hero-em, #FFFFFF); }
.v2s__hero--img .v2s__btn--outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.85);
}
.v2s__hero--img .v2s__btn--outline:hover { background: #FFFFFF; color: var(--v2s-navy); border-color: #FFFFFF; }

/* ─── Cover de respaldo (card sin imagen) ────────────────────────────
   Gradiente del color de la plantilla + inicial grande del título. */
.v2s__item-card-cover--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2s-ph-grad, linear-gradient(135deg, var(--v2s-green) 0%, var(--v2s-green-hover) 100%));
}
.v2s__item-card-cover--ph span {
    font-size: clamp(44px, 7vw, 64px);
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--v2s-ph-font, var(--v2s-sans));
    user-select: none;
}

/* ─── Banda CTA de cierre (home) ────────────────────────────────────── */
.v2s__band-cta {
    background: var(--v2s-navy);
    color: #FFFFFF;
}
.v2s__band-cta .v2s__h2 { color: #FFFFFF; }
.v2s__band-cta .v2s__lead {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 24px;
}

/* ─── Barra de progreso de recaudación (Fase AW — ADN NGOO Charity) ───
   El relleno usa el ACENTO secundario si la fundación lo configuró
   (var(--brand-accent, …)); si no, cae al color primario (--v2s-green) —
   idéntico al comportamiento previo (retrocompat). El radio de la píldora es
   propio del componente (charity), no de la plantilla. */
.v2s__progress { margin-top: 14px; }
.v2s__progress-track {
    height: 9px;
    background: color-mix(in srgb, var(--brand-accent, var(--v2s-green)) 18%, var(--v2s-bg));
    border-radius: 999px;
    overflow: hidden;
}
.v2s__progress-fill {
    height: 100%;
    min-width: 8px;
    background: var(--brand-accent, var(--v2s-green));
    border-radius: 999px;
    transition: width .5s ease;
}
.v2s__progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 700;
}
.v2s__progress-raised { color: var(--v2s-muted); }
.v2s__progress-pct { color: var(--v2s-green-hover); }

/* ─── Tres tarjetas de acción: Dona / Sé voluntario / Comparte ───────── */
.v2s__actions {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
@media (min-width: 760px) {
    .v2s__actions { grid-template-columns: repeat(3, 1fr); }
}
.v2s__action-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 30px 26px;
    background: var(--v2s-paper);
    border: 1px solid var(--v2s-border);
    border-radius: var(--v2s-radius);
    box-shadow: var(--v2s-shadow);
}
.v2s__action-icon {
    width: 54px;
    height: 54px;
    align-self: center;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    background: color-mix(in srgb, var(--v2s-green) 15%, var(--v2s-paper));
    color: var(--v2s-green-hover);
}
.v2s__action-icon svg { width: 28px; height: 28px; display: block; }

/* ─── Icono de pilar (set SVG en vez de emoji) ────────────────────────
   Chip con el acento de marca; el SVG toma currentColor. Si el emoji del
   pilar no está en el set, cae al emoji tal cual (font-size grande). */
.v2s__pillar-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    background: color-mix(in srgb, var(--v2s-green) 14%, var(--v2s-paper));
    color: var(--v2s-green-hover);
}
.v2s__pillar-icon svg { width: 28px; height: 28px; display: block; }
.v2s__action-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--v2s-navy); }
.v2s__action-text { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--v2s-muted); }
.v2s__action-card .v2s__btn { margin-top: 4px; }

/* ─── Banda de voluntariado con foto de fondo (Fase AW) ───────────────
   Reutiliza .v2s__band-cta (personalidad por plantilla). Cuando el partial
   inyecta --v2s-band-img, superponemos overlay oscuro + foto y forzamos
   texto blanco AA (pisa incluso el band-cta blanco de minimal). */
.v2s .v2s__band-volunteer[style*="band-img"] {
    background-image:
        linear-gradient(120deg, rgba(8, 29, 41, 0.86) 0%, rgba(8, 29, 41, 0.62) 55%, color-mix(in srgb, var(--v2s-green) 45%, rgba(8, 29, 41, 0.55)) 130%),
        var(--v2s-band-img);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
.v2s .v2s__band-volunteer[style*="band-img"] .v2s__h2,
.v2s .v2s__band-volunteer[style*="band-img"] .v2s__lead,
.v2s .v2s__band-volunteer[style*="band-img"] .v2s__eyebrow { color: #FFFFFF; }
.v2s .v2s__band-volunteer[style*="band-img"] .v2s__btn--outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.85);
}
.v2s .v2s__band-volunteer[style*="band-img"] .v2s__btn--outline:hover { background: #FFFFFF; color: var(--v2s-navy); }

/* ─── Barra superior de contacto (Fase AW — discreta) ─────────────────── */
.v2s__topbar {
    background: var(--v2s-navy);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}
.v2s__topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.v2s__topbar-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.v2s__topbar-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-weight: 600; }
.v2s__topbar-link:hover { color: #FFFFFF; text-decoration: underline; }
.v2s__topbar-cta {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.v2s__topbar-cta:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .v2s__topbar-contact { display: none; }
    .v2s__topbar-inner { justify-content: center; }
}

/* ─── ODS oficiales ONU (Fase AW) ────────────────────────────────────
   Grilla de tarjetas cuadradas con el color OFICIAL de cada objetivo
   (--ods-color, inyectado inline desde SdgCatalog) + número grande +
   nombre corto. La tinta de texto la calcula el partial por luminancia
   (AA sobre cualquier color oficial, incluidos los amarillos). El radio
   sigue la personalidad de la plantilla via --v2s-radius (editorial = 0
   cuadrado tipo UN, orgánica = redondeado, etc.). */
.v2s__ods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
@media (max-width: 480px) {
    .v2s__ods-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.v2s__ods-tile {
    --ods-color: var(--v2s-green);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 150px;
    aspect-ratio: 1 / 1;
    padding: 15px 16px;
    background: var(--ods-color);
    color: #FFFFFF;
    border-radius: var(--v2s-radius);
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.v2s__ods-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(8, 29, 41, 0.18);
}
.v2s__ods-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.v2s__ods-ico { display: block; margin: -2px -2px 0 0; flex: none; }
.v2s__ods-ico svg,
.v2s__ods-pictogram {
    width: 40px;
    height: 40px;
    display: block;
    color: inherit;
}
.v2s__ods-num {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.v2s__ods-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.v2s__ods-note {
    text-align: center;
    margin: 24px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--v2s-muted);
}

/* Sección de KPIs — hook para tratamiento fuerte por plantilla */
.v2s__section--kpis { padding: 48px 0; }

/* Utilidades */
.v2s__center { text-align: center; }
.v2s__mt-lg { margin-top: 40px; }
.v2s__mb-lg { margin-bottom: 40px; }

/* ─── Eventos realizados (vitrina de gestión) ────────────────────────
   Estilo neutro que las 5 plantillas heredan: badge de fecha apagado,
   tag "Realizado" y nota de cierre en el detalle. */
.v2s__event-past .v2s__item-card-cover img { filter: saturate(0.85); }
.v2s__date-badge--past {
    background: var(--v2s-bg);
    color: var(--v2s-muted);
    border: 1px solid var(--v2s-border);
}
.v2s__event-past-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--v2s-bg);
    border: 1px solid var(--v2s-border);
    color: var(--v2s-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.v2s__event-results { font-weight: 600; color: var(--v2s-navy); }
.v2s__event-past-note { border-left: 4px solid var(--v2s-green); }

/* ============================================================
   Donar — medios de giro (Fase AL). AXIS nunca procesa dinero:
   la fundación muestra sus datos y el donante gira directo.
   Acentos de marca por medio, sobrescribibles por plantilla.
   ============================================================ */
.v2s__donate { max-width: 900px; }
.v2s__donate-title { text-align: center; }
.v2s__donate-sub { text-align: center; margin-left: auto; margin-right: auto; }

/* Mini-guía 1-2-3 */
.v2s__donate-steps {
    list-style: none;
    margin: 4px 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    counter-reset: none;
}
.v2s__donate-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--v2s-paper);
    border: 1px solid var(--v2s-border);
    border-radius: var(--v2s-radius);
}
.v2s__donate-step-num {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--v2s-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
}
.v2s__donate-step-text { font-size: 14px; font-weight: 600; color: var(--v2s-navy); line-height: 1.35; }

/* Grid de tarjetas de medios */
.v2s__donate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

/* Tarjeta de medio con identidad por marca (--pay-accent) */
.v2s__pay-card {
    --pay-accent: var(--v2s-navy);
    position: relative;
    background: var(--v2s-paper);
    border: 1px solid var(--v2s-border);
    border-top: 4px solid var(--pay-accent);
    border-radius: var(--v2s-radius);
    padding: 24px;
    box-shadow: var(--v2s-shadow);
}
.v2s__pay-card--nequi { --pay-accent: #DA0081; }
.v2s__pay-card--daviplata { --pay-accent: #ED1C27; }
.v2s__pay-card--breb { --pay-accent: #7C3AED; }
.v2s__pay-card--bank { --pay-accent: #2563EB; }
.v2s__pay-card--star { border-width: 1px; box-shadow: 0 10px 30px rgba(124, 58, 237, 0.16); }

.v2s__pay-tag {
    position: absolute;
    top: -11px;
    right: 18px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pay-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.v2s__pay-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.v2s__pay-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--pay-accent) 12%, #fff);
    color: var(--pay-accent);
}
.v2s__pay-icon svg { width: 22px; height: 22px; }
.v2s__pay-name { margin: 0; font-size: 18px; font-weight: 800; color: var(--v2s-navy); }
.v2s__pay-label { margin: 0 0 6px; font-size: 13px; color: var(--v2s-muted); }
.v2s__pay-value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.v2s__pay-data { font-size: 20px; font-weight: 800; color: var(--v2s-navy); overflow-wrap: anywhere; }
.v2s__pay-copy {
    padding: 7px 14px;
    border: 1.5px solid var(--pay-accent);
    border-radius: 8px;
    background: transparent;
    font-family: var(--v2s-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--pay-accent);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.v2s__pay-copy:hover { background: var(--pay-accent); color: #fff; }
.v2s__pay-copy:disabled { opacity: 1; background: var(--pay-accent); color: #fff; cursor: default; }
.v2s__pay-qr {
    display: block;
    width: 160px;
    height: 160px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--v2s-border);
    background: #fff;
    padding: 6px;
}
.v2s__pay-card--breb .v2s__pay-qr { width: 176px; height: 176px; }
.v2s__pay-note { margin: 12px 0 0; font-size: 13px; color: var(--v2s-muted); line-height: 1.5; }
.v2s__pay-dl { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.v2s__pay-dl dt { color: var(--v2s-muted); font-size: 13px; }
.v2s__pay-dl dd { margin: 2px 0 0; font-weight: 700; color: var(--v2s-navy); }

/* Señales de confianza */
.v2s__donate-trust {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
    padding: 18px 22px;
    background: color-mix(in srgb, var(--v2s-green) 10%, var(--v2s-paper));
    border: 1px solid color-mix(in srgb, var(--v2s-green) 30%, var(--v2s-border));
    border-radius: var(--v2s-radius);
}
.v2s__donate-trust-icon { flex: none; width: 26px; height: 26px; color: var(--v2s-green-hover); margin-top: 1px; }
.v2s__donate-trust-lead { margin: 0; font-size: 15px; font-weight: 700; color: var(--v2s-navy); }
.v2s__donate-trust-detail { margin: 4px 0 0; font-size: 14px; color: var(--v2s-muted); }
.v2s__donate-trust-detail strong { color: var(--v2s-navy); }

@media (max-width: 640px) {
    .v2s__donate-steps { grid-template-columns: 1fr; gap: 10px; }
    .v2s__donate-grid { grid-template-columns: 1fr; }
    .v2s__pay-qr, .v2s__pay-card--breb .v2s__pay-qr { margin-left: auto; margin-right: auto; }
}