/* ═══════════════════════════════════════════════════════════════
   FUNDACIÓN DIES — CAPA DE DISEÑO
   Se carga DESPUÉS de styles-dies.css y trabaja redefiniendo sus
   variables, así que tu hoja original no se toca.

   Tesis del diseño: el sitio trata de convertir evidencia en
   decisiones. Lo único que se permite gritar es esa cadena —
   Investigar · Co-diseñar · Validar · Transferir · Escalar —;
   todo lo demás guarda silencio para que se oiga.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. COLOR · corrección de contraste

   Tres colores de la paleta no llegaban al mínimo WCAG AA (4.5:1
   para texto normal). Se conserva el tono y la saturación; solo
   baja la luminosidad hasta que el texto es legible.

     --slate       #6E7884 → #5C6673   4.14:1 → 5.38:1 sobre mist
     --regatta     #4476BB → #3A66A6   4.26:1 → 5.34:1 sobre mist
     --terracotta  #C65D2E → #A94D26   4.19:1 → 5.14:1 sobre mist

   El terracota de marca original NO desaparece: sigue vivo en
   --terracotta-brand para titulares grandes y elementos decorativos,
   donde el mínimo exigible es 3:1 y lo cumple de sobra.
   ─────────────────────────────────────────────────────────────── */
:root {
  --terracotta-brand: #C65D2E;   /* marca: titulares, acentos, trazos */
  --terracotta:       #A94D26;   /* texto y rellenos de botón */
  --regatta:          #3A66A6;
  --slate:            #5C6673;

  --terracotta-soft: rgba(169, 77, 38, .07);
  --terracotta-line: rgba(169, 77, 38, .26);
  --regatta-soft:    rgba(58, 102, 166, .07);
  --regatta-line:    rgba(58, 102, 166, .24);

  /* NO se toca --line. styles-dies.css lo usa como color de TEXTO
     sobre fondo oscuro en seis sitios (principios, método, viñetas
     del panel…). Redefinirlo a un gris translúcido hacía
     desaparecer ese texto. Para los bordes propios va --borde. */
  --hairline: rgba(19, 25, 55, .10);
  --borde:    rgba(19, 25, 55, .16);

  /* ── Sombras en dos capas ──────────────────────────────────
     Una sombra sola se lee como una mancha. En la realidad hay
     dos: el contacto (corta y marcada) y el ambiente (larga y
     tenue). Separarlas es lo que distingue una tarjeta que
     reposa sobre el papel de una que flota sin razón. */
  --shadow-sm:
    0 1px 2px rgba(19, 25, 55, .06),
    0 1px 1px rgba(19, 25, 55, .04);
  --shadow:
    0 1px 2px rgba(19, 25, 55, .05),
    0 8px 24px -8px rgba(19, 25, 55, .10);
  --shadow-lg:
    0 2px 4px rgba(19, 25, 55, .05),
    0 24px 56px -16px rgba(19, 25, 55, .16);

  /* ── Curvas ───────────────────────────────────────────────
     Las nativas de CSS son flojas. ease-out arranca rápido: a
     igual duración, se percibe más atento. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ── Ritmo vertical ──────────────────────────────────────── */
  --space-2xs: 4px;  --space-xs: 8px;  --space-sm: 12px;
  --space-md: 20px;  --space-lg: 32px; --space-xl: 52px;
  --space-2xl: 84px; --space-3xl: 136px;
}

/* ───────────────────────────────────────────────────────────────
   2. MODO OSCURO

   El sitio no lo tenía. Quien navegue de noche con el sistema en
   oscuro recibía un folio blanco a plena luz.

   No es invertir colores: los blancos puros se suavizan (#F2F5F9,
   nunca #FFF, que vibra sobre negro) y la marca se aclara para
   sobrevivir al fondo oscuro.
   ─────────────────────────────────────────────────────────────── */
/* OJO, trampa que costó una pasada entera:
   en styles-dies.css, --white significa DOS cosas — el fondo de las
   tarjetas y la tinta blanca de los paneles oscuros (.section-ink,
   .process-step span…). Si aquí se redefine --white a un gris
   oscuro, esos textos se vuelven ilegibles sobre su propio panel.

   Por eso --white se queda siendo blanco, y las superficies se
   reescriben una por una, con sus selectores reales. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --superficie:   #10141F;   /* fondo de página y tarjetas */
    --superficie-2: #171D2C;   /* fondo hundido */

    --mist:     #171D2C;
    --graphite: #E6EBF2;   /* texto principal — 14.8:1 */
    --slate:    #A3AEBF;   /* texto secundario —  7.6:1 */

    --deep-blue:        #7FA5DC;
    --navy:             #0B0E17;
    --regatta:          #8AB0E6;
    --terracotta:       #E08C5F;
    --terracotta-brand: #E8A077;

    --terracotta-soft: rgba(224, 140, 95, .12);
    --terracotta-line: rgba(224, 140, 95, .30);
    --regatta-soft:    rgba(138, 176, 230, .12);
    --regatta-line:    rgba(138, 176, 230, .28);

    --hairline: rgba(255, 255, 255, .09);
    --borde:    rgba(255, 255, 255, .15);
    /* --line sigue siendo claro: es tinta sobre los paneles oscuros */
    --line:     #AEB9CC;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow:    0 2px 4px rgba(0, 0, 0, .40), 0 12px 32px -8px rgba(0, 0, 0, .50);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .45), 0 28px 64px -16px rgba(0, 0, 0, .60);
  }

  /* Superficies, una por una, con los selectores reales de
     styles-dies.css. Nada de magia: lo que no esté en esta lista
     conserva su fondo claro, y se nota al revisarlo. */
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) .section,
  :root:not([data-theme="light"]) .pillar-card,
  :root:not([data-theme="light"]) .statement-card,
  :root:not([data-theme="light"]) .contact-card,
  :root:not([data-theme="light"]) .main-nav,
  :root:not([data-theme="light"]) .menu-toggle,
  :root:not([data-theme="light"]) .button-secondary,
  :root:not([data-theme="light"]) .anchor-nav a,
  :root:not([data-theme="light"]) .step-item,
  :root:not([data-theme="light"]) .news-card,
  :root:not([data-theme="light"]) .session-item,
  :root:not([data-theme="light"]) .contact-field input,
  :root:not([data-theme="light"]) .contact-field textarea {
    background: var(--superficie);
    border-color: var(--borde);
  }

  :root:not([data-theme="light"]) .section-soft,
  :root:not([data-theme="light"]) .page-hero,
  :root:not([data-theme="light"]) .intro-strip,
  :root:not([data-theme="light"]) .cta-strip,
  :root:not([data-theme="light"]) .empty-state,
  :root:not([data-theme="light"]) .site-footer,
  :root:not([data-theme="light"]) .step-item:nth-child(odd),
  :root:not([data-theme="light"]) .action-tag {
    background: var(--superficie-2);
  }

  :root:not([data-theme="light"]) .hero {
    background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
  }

  :root:not([data-theme="light"]) .site-header {
    background: color-mix(in srgb, var(--superficie) 82%, transparent);
  }

  /* El panel oscuro ya era oscuro: se hunde un punto más para que
     siga leyéndose como una capa por encima del fondo. */
  :root:not([data-theme="light"]) .section-ink,
  :root:not([data-theme="light"]) .statement-dark {
    background: var(--navy);
  }

  /* Los enlaces del menú usaban var(--navy), que en oscuro es casi
     negro: quedaban invisibles sobre su propio fondo. */
  :root:not([data-theme="light"]) .main-nav a { color: var(--graphite); }
  :root:not([data-theme="light"]) .main-nav a:hover,
  :root:not([data-theme="light"]) .main-nav a.is-active { color: var(--terracotta); }
  :root:not([data-theme="light"]) .main-nav .nav-cta { color: #0B0E17; }

  /* styles-dies.css usa --line (un color de BORDE) como color de
     TEXTO en estos dos sitios. En claro colaba; en oscuro el texto
     desaparece. Se les da un color de texto de verdad. */
  :root:not([data-theme="light"]) .process-step small,
  :root:not([data-theme="light"]) .section-ink .bullet-list li {
    color: #AEB9CC;          /* 7.3:1 sobre #0B0E17 */
  }

  :root:not([data-theme="light"]) img:not([src$=".svg"]) {
    /* Las fotos a pleno brillo deslumbran sobre fondo oscuro */
    filter: brightness(.92) contrast(1.02);
  }
}

/* ───────────────────────────────────────────────────────────────
   3. TIPOGRAFÍA

   El detalle que más separa un sitio cuidado de uno corriente no
   es la fuente: es el tracking. Un titular a 56 px con el mismo
   espaciado entre letras que un párrafo a 16 px se ve suelto,
   blando. A medida que crece el cuerpo, el espaciado debe cerrarse.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Escala fluida: interpola con el ancho de pantalla en vez de
     saltar en cada breakpoint. Sin saltos bruscos al rotar. */
  --text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.81rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --text-xl:   clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.52rem + 1.15vw, 2.5rem);
  --text-3xl:  clamp(2.125rem, 1.70rem + 2.10vw, 3.5rem);
}

body {
  font-size: var(--text-base);
  /* Cifras tabulares y ligaduras contextuales: las fechas y los
     números de la cadena se alinean en columna. */
  font-feature-settings: "cv05" 1, "ss03" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .hero h1 {
  /* Cuanto más grande el texto, más cerrado el tracking */
  letter-spacing: -0.022em;
  line-height: 1.08;
  /* Reparte las líneas para que no quede una palabra suelta
     colgando al final de un titular */
  text-wrap: balance;
}

h1, .hero h1 { font-size: var(--text-3xl); letter-spacing: -0.032em; }
h2           { font-size: var(--text-2xl); letter-spacing: -0.026em; }
h3           { font-size: var(--text-xl);  letter-spacing: -0.018em; line-height: 1.2; }

p {
  text-wrap: pretty;          /* evita líneas huérfanas al final */
  line-height: 1.65;
}

/* Medida de lectura: por encima de ~70 caracteres el ojo pierde
   el renglón al volver al margen izquierdo. */
.hero p, .page-lead, .section > .container > p,
.news-card p, .collaboration-copy p {
  max-inline-size: 68ch;
}

/* Los «eyebrow» en versalitas necesitan MÁS espaciado, no menos:
   a cuerpo pequeño y en mayúsculas, las letras se amontonan. */
.eyebrow, .contact-kicker, .news-tag {
  letter-spacing: 0.085em;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────────
   4. LA FIRMA · la cadena de la evidencia

   Es el único sitio donde el diseño levanta la voz, y se la ha
   ganado: esos cinco pasos no son decoración numerada, son el
   método de la fundación. La numeración dice algo verdadero sobre
   el contenido —hay un orden, y el paso 4 depende del 3—, que es
   exactamente cuando numerar está justificado.

   El hilo vertical que une los números hace visible esa
   dependencia que el texto ya afirma.
   ─────────────────────────────────────────────────────────────── */
.process-list, .method-steps, .intro-strip ol {
  position: relative;
}

.process-list li, .method-steps li {
  position: relative;
  padding-inline-start: 4px;
}

/* El hilo que conecta un paso con el siguiente */
.process-list li:not(:last-child)::before,
.method-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: 2.1em;
  inset-block-end: -1.1em;
  inset-inline-start: 0.95em;
  inline-size: 1px;
  background: linear-gradient(
    to bottom,
    var(--terracotta-line),
    transparent 88%
  );
}

/* Los números: cifras tabulares para que 01 y 05 ocupen lo mismo */
.process-list .step-num, .method-steps .step-num,
.process-list li > span:first-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--terracotta-brand);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ───────────────────────────────────────────────────────────────
   5. CABECERA · efecto de borde al desplazar

   En reposo la cabecera es parte del papel: sin línea, sin sombra.
   Solo cuando el contenido empieza a pasar por debajo aparece la
   separación. La línea surge porque hay algo de lo que separarse,
   no porque sí.
   ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--white) 82%, transparent);
  border-block-end: 1px solid transparent;
  transition: border-color 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out),
              background 240ms var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.site-header.is-scrolled {
  border-block-end-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}

/* ───────────────────────────────────────────────────────────────
   6. MOVIMIENTO

   Regla que se aplica aquí: animar solo lo que se ve pocas veces.
   Las secciones aparecen una vez al bajar; los botones responden
   al dedo. Nada más se mueve.
   ─────────────────────────────────────────────────────────────── */

/* Aparición al entrar en pantalla. 'revelar' lo pone el JS solo si
   hay soporte, así que sin JavaScript todo se ve desde el principio. */
.js-revelar .revelar {
  opacity: 0;
  transform: translateY(14px);
}

.js-revelar .revelar.visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out),
              transform 620ms var(--ease-out);
}

/* Escalonado: 55 ms entre hermanos. Más lento se percibe lento. */
.js-revelar .revelar.visible:nth-child(2) { transition-delay: 55ms; }
.js-revelar .revelar.visible:nth-child(3) { transition-delay: 110ms; }
.js-revelar .revelar.visible:nth-child(4) { transition-delay: 165ms; }
.js-revelar .revelar.visible:nth-child(5) { transition-delay: 220ms; }

/* Respuesta al pulsar. Entre el clic y la carga de la página
   siguiente no pasaba nada visible: el botón parecía no haber
   recibido la pulsación. */
.button, .nav-cta, .menu-toggle, .news-card {
  transition: transform 160ms var(--ease-out),
              background 200ms ease,
              border-color 200ms ease,
              color 200ms ease,
              box-shadow 240ms var(--ease-out);
}

.button:active, .nav-cta:active, .menu-toggle:active { transform: scale(0.97); }
.news-card:active { transform: scale(0.994); }

/* El hover solo donde hay puntero de verdad. En móvil se dispara
   al tocar y se queda pegado: la tarjeta se ve activa cuando ya
   no lo está. */
@media (hover: hover) and (pointer: fine) {
  .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .card:hover, .linea-card:hover { transform: translateY(-2px); }
  .button:hover { transform: translateY(-1px); }
}

/* Menos movimiento para quien lo pide. Reducir no es eliminar:
   se conservan opacidad y color, que ayudan a comprender; se
   quita el desplazamiento, que es lo que marea. */
@media (prefers-reduced-motion: reduce) {
  .js-revelar .revelar { opacity: 1; transform: none; }
  .js-revelar .revelar.visible { transition: opacity 200ms ease; }
  .button:active, .nav-cta:active, .menu-toggle:active,
  .news-card:hover, .card:hover, .linea-card:hover, .button:hover {
    transform: none;
  }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }
/* El ancla no queda debajo de la cabecera pegajosa */
:target, [id] { scroll-margin-block-start: 88px; }

/* ───────────────────────────────────────────────────────────────
   7. FOCO

   El contorno de 3 px ya estaba bien. Se le añade un halo claro
   para que también se vea sobre fondos oscuros, donde un contorno
   azul sobre azul marino desaparecía.
   ─────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--regatta);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--regatta) 18%, transparent);
}

.section-ink :focus-visible, .hero-panel :focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .22);
}

/* ───────────────────────────────────────────────────────────────
   8. MÓVIL · lo que separa «una web» de algo que parece una app
   ─────────────────────────────────────────────────────────────── */
a, button, .button, .nav-cta {
  -webkit-tap-highlight-color: transparent;   /* destello gris de Android */
}

.button, .nav-cta {
  -webkit-user-select: none;
  user-select: none;
  min-block-size: 44px;      /* área táctil mínima */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* OJO: aquí NO se toca 'display'. El botón de menú lo oculta
   styles-dies.css en escritorio, y declarar display lo resucitaría
   como una caja vacía junto al logo. Solo se fija el área táctil. */
.menu-toggle {
  -webkit-user-select: none;
  user-select: none;
  min-block-size: 44px;
  min-inline-size: 44px;
}

.contact-field input, .contact-field textarea {
  /* Por debajo de 16 px Safari hace zoom al enfocar y el
     formulario se sale de la pantalla */
  font-size: max(16px, 1rem);
  transition: border-color 180ms ease, box-shadow 180ms var(--ease-out);
}

body {
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  overflow-x: hidden;       /* ninguna sección empuja el ancho */
}

/* ───────────────────────────────────────────────────────────────
   9. FORMULARIO · estados visibles
   ─────────────────────────────────────────────────────────────── */
.form-status:empty { display: none; }

.form-status {
  margin-block-start: var(--space-sm);
  padding: 11px 15px;
  border-radius: 12px;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.form-status.is-ok {
  color: #14532D;
  background: rgba(22, 163, 74, .10);
  border: 1px solid rgba(22, 163, 74, .28);
}

.form-status.is-error {
  color: #7F1D1D;
  background: var(--terracotta-soft);
  border: 1px solid var(--terracotta-line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-status.is-ok    { color: #86EFAC; }
  :root:not([data-theme="light"]) .form-status.is-error { color: #FCA5A5; }
}

/* El honeypot se oculta sin display:none — algunos bots ignoran
   los campos ocultos de esa forma y así los delatamos igual. */
.hp-field {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────
   10. LOGO · sin saltos al cargar
   ─────────────────────────────────────────────────────────────── */
/* El logo nuevo es vertical (900×556), no apaisado: cambian la
   proporción y el tamaño para que la cabecera no crezca de más. */
/* Una sola regla para el logo del pie. Antes estaba repartida en
   tres sitios y al reorganizarlas se perdió block-size:auto: la
   imagen conservaba su alto natural de 556 px dentro de un ancho
   de 150, y salía estirada como un palo. */
.footer-brand img {
  aspect-ratio: 900 / 556;
  inline-size: 150px;
  block-size: auto;      /* ← lo que faltaba */
  opacity: .95;
}
.brand img {
  aspect-ratio: 900 / 438;
  block-size: auto;
}

.brand img        { inline-size: clamp(104px, 11vw, 134px); }

/* ───────────────────────────────────────────────────────────────
   11. IMPRESIÓN

   Una fundación que publica informes acaba imprimiéndose. Sin
   esto, el papel sale con la cabecera pegada y los enlaces mudos.
   ─────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .menu-toggle, .cta-strip, .skip-link,
  .hero-orb, .contact-form { display: none !important; }

  body { color: #000; background: #fff; font-size: 11pt; }
  .section { padding-block: 1.2cm; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Un enlace impreso sin su dirección no sirve de nada */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. CAPA VISUAL
   Hasta aquí la hoja corregía y afinaba. A partir de aquí cambia
   el aspecto: escala tipográfica, profundidad, ritmo y materia.
   La estructura y los textos siguen siendo los mismos.
   ═══════════════════════════════════════════════════════════════ */

/* ── 12.1 Fondo con materia ───────────────────────────────────
   El blanco puro no existe en nada impreso. Un fondo apenas frío
   con las tarjetas en blanco encima genera profundidad antes de
   dibujar una sola sombra: el papel y lo que reposa sobre él. */
:root {
  --papel:  #FAFBFD;
  --tinta:  #0E1B33;
}

body { background: var(--papel); }

/* OJO: .section-ink y .statement-dark quedan FUERA de esta lista.
   Llevan las dos clases (.section .section-ink), así que una regla
   .section posterior les ganaba el fondo azul marino y su texto
   blanco se quedaba sobre fondo blanco: invisible salvo al
   seleccionarlo. Pasó en «Principios» y en «Compromiso institucional». */
.section:not(.section-ink), .pillar-card, .contact-card,
.news-card, .step-item, .session-item,
.statement-card:not(.statement-dark) { background: transparent; }

/* Y por si alguna regla futura vuelve a intentarlo, se reafirma: */
.section-ink   { background: var(--navy) !important; color: var(--white); }
.statement-dark { background: var(--deep-blue) !important; }
.section-ink h2, .section-ink h3, .section-ink .eyebrow,
.section-ink .section-lead, .section-ink p { color: var(--white); }
.section-ink .section-lead, .section-ink p { opacity: .88; }

/* ── 12.2 Grano ───────────────────────────────────────────────
   Una textura de ruido al 2,5 % sobre toda la página. No se ve
   conscientemente; lo que se nota es que las superficies dejan de
   parecer plásticas. Es un SVG embebido: cero peticiones al
   servidor, menos de 1 KB. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 12.3 Escala tipográfica editorial ────────────────────────
   El salto de tamaño entre un titular y el cuerpo es lo que
   construye la sensación de criterio. Antes la diferencia era de
   2,2×; ahora llega a 4,5× en pantallas grandes. */
:root {
  --text-3xl: clamp(2.6rem, 1.45rem + 5.1vw, 4.75rem);
  --text-2xl: clamp(1.9rem, 1.42rem + 2.15vw, 3.1rem);
  --text-xl:  clamp(1.3rem, 1.16rem + 0.62vw, 1.7rem);
  --text-lg:  clamp(1.1rem, 1.03rem + 0.34vw, 1.3rem);
}

.hero h1 {
  font-size: var(--text-3xl);
  font-weight: 900;
  letter-spacing: -0.042em;
  line-height: 0.99;
  color: var(--tinta);
}

h2 { font-weight: 900; }

.hero-lead, .section-lead, .page-lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--slate);
  max-inline-size: 62ch;
}

/* ── 12.4 Hero ────────────────────────────────────────────────
   Una malla de dos focos de color de la propia marca, muy
   desaturada. Da aire y profundidad sin competir con el texto. */
.hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 132px) clamp(64px, 10vw, 150px);
  background:
    radial-gradient(70ch 55ch at 12% -8%,  rgba(68, 118, 187, .13), transparent 62%),
    radial-gradient(55ch 45ch at 96% 18%, rgba(198, 93, 46, .10),  transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--papel) 100%);
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--terracotta-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--terracotta) 7%, #FFFFFF);
  color: var(--terracotta);
  margin-block-end: var(--space-md);
}

/* ── 12.5 El panel de la evidencia ────────────────────────────
   Es la firma del sitio, así que se le permite el único gesto
   caro de la página: elevación real y un filo superior de luz,
   como el canto de una tarjeta física. */
.hero-visual .visual-frame,
.visual-frame {
  position: relative;
  border-radius: 26px;
  box-shadow:
    0 2px 6px rgba(14, 27, 51, .10),
    0 32px 72px -20px rgba(14, 27, 51, .42);
}

.visual-frame::after {
  /* filo de luz de 1 px en el borde superior */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.17), transparent 42%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}

/* ── 12.6 Ritmo entre secciones ───────────────────────────────
   Antes todas las secciones eran iguales: fondo blanco, caja
   centrada, título y rejilla. Apiladas, se leen como una lista.
   Ahora respiran más y las alternas se apoyan sobre una losa de
   esquinas redondeadas, que separa los bloques sin una sola línea. */
.section { padding-block: clamp(64px, 8.5vw, 132px); }

.section-soft, .intro-strip {
  border-radius: clamp(24px, 3vw, 40px);
  margin-inline: clamp(12px, 2.5vw, 28px);
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.section-ink {
  border-radius: clamp(24px, 3vw, 40px);
  margin-inline: clamp(12px, 2.5vw, 28px);
  box-shadow: 0 30px 80px -28px rgba(14, 27, 51, .55);
}

/* ── 12.7 Marcador de sección ─────────────────────────────────
   Un número correlativo delante de cada título de la portada,
   contado por CSS: no hay que escribirlo ni mantenerlo a mano.
   Repite el motivo de la cadena y ata la página entera. */
.pagina-inicio main { counter-reset: seccion; }

/* Un selector simple que alcanza a todas las secciones de la
   portada, sea cual sea su estructura interna. El hero queda
   fuera porque no lleva la clase .section. */
.pagina-inicio .section .eyebrow::before {
  counter-increment: seccion;
  content: counter(seccion, decimal-leading-zero) " / ";
  color: var(--terracotta-brand);
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

/* ── 12.8 Tarjetas con jerarquía ──────────────────────────────
   El número deja de ser una etiqueta pequeña y pasa a ser una
   marca de agua: ordena la lectura sin robar atención. */
.pillar-card, .news-card, .statement-card, .contact-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pillar-card { padding: clamp(26px, 3vw, 38px); }

.pillar-card .pillar-number {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 18px;
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--terracotta);
  opacity: .085;
  letter-spacing: -0.05em;
  pointer-events: none;
}

/* Filo de color: aparece al pasar el cursor, nunca en reposo.
   Si estuviera siempre, cinco tarjetas con raya de color compiten
   entre sí y ninguna destaca. */
.pillar-card::before, .news-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--terracotta-brand), var(--regatta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pillar-card:hover::before, .news-card:hover::before { transform: scaleX(1); }
  .pillar-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
}

.pillar-card { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }

/* ── 12.9 Las cinco líneas ────────────────────────────────────
   Cada una es una fila con su número a la izquierda y el hilo que
   la une con la siguiente: la misma cadena del hero, desplegada. */
.action-item {
  position: relative;
  padding-block: clamp(22px, 2.4vw, 32px);
  border-block-end: 1px solid var(--hairline);
  transition: background 240ms var(--ease-out), padding-inline-start 240ms var(--ease-out);
}

.action-item:last-child { border-block-end: 0; }

.action-item .action-index {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 900;
  color: var(--terracotta);
  opacity: .30;
  letter-spacing: -0.03em;
  transition: opacity 240ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .action-item:hover { background: color-mix(in srgb, var(--terracotta) 3.5%, transparent); }
  .action-item:hover .action-index { opacity: 1; }
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 10px;
  color: var(--regatta);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
}

.action-link span { transition: transform 220ms var(--ease-out); }
.action-link:hover span { transform: translateX(4px); }

/* ── 12.10 Botones ────────────────────────────────────────────
   Relleno sólido, sin degradado: en una web institucional el
   degradado envejece mal y distrae. La elevación hace el trabajo. */
.button-primary {
  background: var(--deep-blue);
  box-shadow: 0 1px 2px rgba(14, 27, 51, .18), 0 8px 20px -8px rgba(14, 27, 51, .45);
}

.button-primary:hover { background: #17407A; }

.button-secondary {
  background: #FFFFFF;
  border: 1px solid var(--borde);
  box-shadow: var(--shadow-sm);
}

/* ── 12.11 Pie ────────────────────────────────────────────────
   Cerrar en oscuro da un final a la página. Antes terminaba en
   gris claro y parecía que faltaba algo por cargar. */
.site-footer {
  background: var(--tinta);
  color: var(--on-dark);
  margin-block-start: clamp(40px, 6vw, 90px);
  border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0;
  padding-block: clamp(44px, 6vw, 76px);
}

.site-footer a, .site-footer p { color: var(--on-dark); }
.site-footer .footer-nav a { font-weight: 700; }
.site-footer .footer-nav a:hover { color: var(--peach); }


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --papel: #10141F; --tinta: #070B14; }
  :root:not([data-theme="light"]) body { background: var(--papel); }
  :root:not([data-theme="light"]) .hero {
    background:
      radial-gradient(70ch 55ch at 12% -8%, rgba(68, 118, 187, .16), transparent 62%),
      radial-gradient(55ch 45ch at 96% 18%, rgba(198, 93, 46, .11), transparent 60%),
      linear-gradient(180deg, #141A28 0%, var(--papel) 100%);
  }
  :root:not([data-theme="light"]) .pillar-card,
  :root:not([data-theme="light"]) .news-card,
  :root:not([data-theme="light"]) .statement-card,
  :root:not([data-theme="light"]) .contact-card,
  :root:not([data-theme="light"]) .section-soft,
  :root:not([data-theme="light"]) .intro-strip,
  :root:not([data-theme="light"]) .button-secondary { background: var(--superficie-2); }
  :root:not([data-theme="light"]) .hero .eyebrow { background: color-mix(in srgb, var(--terracotta) 12%, transparent); }
  :root:not([data-theme="light"]) body::before { opacity: .04; }
}

/* El enlace de cada línea vive dentro de la columna de texto; que
   no se parta en dos renglones por falta de ancho. */
.action-link { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   13. DIDACTAVITAL GROUP
   ═══════════════════════════════════════════════════════════════ */
.grupo-seccion { padding-block: clamp(64px, 8.5vw, 132px); }

.grupo-shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.grupo-nota {
  font-size: var(--text-sm);
  color: var(--slate);
  border-inline-start: 2px solid var(--terracotta-line);
  padding-inline-start: 16px;
  margin-block: var(--space-md);
  max-inline-size: 52ch;
}

.grupo-panel {
  background: #FFFFFF;
  border-radius: 24px;
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: var(--shadow);
}

.grupo-logo {
  inline-size: clamp(150px, 19vw, 200px);
  block-size: auto;
  display: block;
  margin-inline: auto;
  margin-block-end: var(--space-lg);
}

.grupo-lista { list-style: none; margin: 0; padding: 0; }

.grupo-lista li { border-block-start: 1px solid var(--hairline); }

.grupo-lista a, .grupo-lista div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 15px;
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start 260ms var(--ease-out),
              background 260ms var(--ease-out);
}

.grupo-lista strong { font-size: var(--text-base); color: var(--deep-blue); font-weight: 800; }
.grupo-lista span   { font-size: var(--text-sm); color: var(--slate); }
.grupo-lista em     { font-style: normal; color: var(--terracotta); font-weight: 700; }

.grupo-lista .es-dies div { background: var(--terracotta-soft); }

@media (hover: hover) and (pointer: fine) {
  .grupo-lista a:hover {
    padding-inline-start: 10px;
    background: var(--regatta-soft);
  }
}

@media (max-width: 900px) {
  .grupo-shell { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   14. PIE
   ═══════════════════════════════════════════════════════════════ */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.footer-lema { font-size: var(--text-sm); opacity: .78; margin-block: 14px 20px; max-inline-size: 34ch; }

.footer-pertenencia {
  font-size: var(--text-sm);
  line-height: 1.5;
  opacity: .78;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(255, 255, 255, .13);
}
.footer-pertenencia strong { color: #FFFFFF; opacity: 1; font-weight: 800; }

.footer-col { display: flex; flex-direction: column; gap: 11px; }

.footer-titulo {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--peach);
  margin: 0 0 4px;
}

.footer-col a, .footer-inerte {
  font-size: var(--text-sm);
  text-decoration: none;
  opacity: .82;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}

.footer-inerte { opacity: .52; }

@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { opacity: 1; transform: translateX(3px); }
}

.footer-cta {
  margin-block-start: 8px;
  color: var(--peach) !important;
  font-weight: 800;
  opacity: 1 !important;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: clamp(32px, 4vw, 52px);
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(255, 255, 255, .13);
}
.footer-legal p { font-size: var(--text-xs); opacity: .6; margin: 0; }

@media (max-width: 860px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   15. MOTION

   Cada bloque declara por qué existe. Las que no pasaron el filtro
   quedan fuera a propósito: no se anima el menú, ni los campos del
   formulario, ni nada que el visitante toque muchas veces. Animar
   lo cotidiano hace que la web se sienta lenta, no viva.

   Todo corre sobre transform y opacity —las dos propiedades que
   van en la GPU— y todo se apaga con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── 15.1 Barra de progreso de lectura ────────────────────────
   Propósito: indicación de estado. Dice cuánto queda de página.
   Movimiento constante → curva lineal.
   Va atada al scroll con animation-timeline: no hay JavaScript
   detrás, así que no se entrecorta aunque la página esté cargando. */
@supports (animation-timeline: scroll()) {
  body::after {
    content: "";
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 100;
    block-size: 3px;
    inline-size: 100%;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--terracotta-brand), var(--regatta));
    animation: barra-progreso linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes barra-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── 15.2 Revelado del titular ────────────────────────────────
   Propósito: explicación. Se ve una vez por visita, en el momento
   en que el visitante decide si sigue leyendo: es donde vive el
   presupuesto de impacto.
   Cada palabra sube desde detrás de una máscara, 42 ms de
   diferencia entre una y la siguiente. Animación CSS, no JS: así
   se mantiene fluida mientras el resto de la página carga. */
.js-motion .hero h1 .palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.js-motion .hero h1 .palabra > span {
  display: inline-block;
  transform: translateY(104%) rotate(2.5deg);
  opacity: 0;
  animation: palabra-sube 860ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 42ms + 120ms);
}

@keyframes palabra-sube {
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

/* El resto del hero entra detrás del titular, sin competir */
.js-motion .hero .eyebrow,
.js-motion .hero-lead,
.js-motion .hero-actions,
.js-motion .hero-proof {
  opacity: 0;
  animation: sube-suave 700ms var(--ease-out) forwards;
}
.js-motion .hero .eyebrow   { animation-delay: 60ms; }
.js-motion .hero-lead       { animation-delay: 420ms; }
.js-motion .hero-actions    { animation-delay: 520ms; }
.js-motion .hero-proof      { animation-delay: 600ms; }

@keyframes sube-suave {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── 15.3 La cadena de la evidencia ───────────────────────────
   Propósito: explicación — es la animación mejor justificada de
   la página, porque representa literalmente lo que dice el panel:
   de la evidencia a la acción. Los cinco pasos entran en orden y
   un hilo de luz baja uniéndolos.
   80 ms entre pasos: el máximo del rango útil, porque aquí la
   secuencia ES el mensaje y conviene que se lea. */
.js-motion .visual-frame { position: relative; }

.js-motion .process-stack { position: relative; }

.js-motion .process-stack::before {
  content: "";
  position: absolute;
  inset-block: 10px 10px;
  inset-inline-start: 26px;
  inline-size: 2px;
  background: linear-gradient(180deg, var(--terracotta-brand), rgba(198, 93, 46, 0));
  transform: scaleY(0);
  transform-origin: top;
  animation: hilo-baja 1500ms var(--ease-in-out) 700ms forwards;
}

@keyframes hilo-baja { to { transform: scaleY(1); } }

.js-motion .process-step {
  opacity: 0;
  animation: paso-entra 620ms var(--ease-out) forwards;
}
.js-motion .process-step:nth-child(1) { animation-delay: 760ms; }
.js-motion .process-step:nth-child(2) { animation-delay: 840ms; }
.js-motion .process-step:nth-child(3) { animation-delay: 920ms; }
.js-motion .process-step:nth-child(4) { animation-delay: 1000ms; }
.js-motion .process-step:nth-child(5) { animation-delay: 1080ms; }

@keyframes paso-entra {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* El punto del encabezado late despacio: señal de que el panel
   está "vivo", no una captura de pantalla. */
.js-motion .status-dot {
  animation: late 2.8s ease-in-out infinite;
}
@keyframes late {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* ── 15.4 Fondo del hero en deriva ────────────────────────────
   Propósito: evitar que una pantalla grande y quieta parezca
   congelada. 34 segundos por ciclo: por debajo del umbral en que
   el ojo detecta el movimiento, pero el conjunto respira. */
.js-motion .hero-orb {
  animation: deriva 34s ease-in-out infinite alternate;
  will-change: transform;
}
.js-motion .hero-orb-two { animation-duration: 44s; animation-direction: alternate-reverse; }

@keyframes deriva {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.1); }
}

/* ── 15.5 Tarjetas: inclinación y foco ────────────────────────
   Propósito: retorno táctil. La tarjeta se inclina hacia el
   cursor y un halo la sigue, como un objeto físico bajo una luz.
   Solo con ratón de verdad: en una pantalla táctil el :hover se
   queda pegado tras el toque. */
@media (hover: hover) and (pointer: fine) {
  .js-motion .pillar-card, .js-motion .news-card {
    transform-style: preserve-3d;
    transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  }

  .js-motion .pillar-card::after, .js-motion .news-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms var(--ease-out);
    background: radial-gradient(
      26ch 26ch at var(--foco-x, 50%) var(--foco-y, 50%),
      color-mix(in srgb, var(--terracotta) 13%, transparent),
      transparent 72%
    );
  }

  .js-motion .pillar-card:hover::after,
  .js-motion .news-card:hover::after { opacity: 1; }
}

/* ── 15.6 Entradas al desplazar, atadas al scroll ─────────────
   Propósito: evitar un cambio brusco. Con animation-timeline la
   aparición sigue la posición real de la sección en pantalla en
   vez de dispararse de golpe: el navegador la calcula fuera del
   hilo principal y no se pierde un fotograma. */
@supports (animation-timeline: view()) {
  .js-motion .revelar {
    animation: entra-con-scroll linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
  @keyframes entra-con-scroll {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  /* Con scroll-timeline disponible, el observador de JS sobra */
  .js-revelar .revelar { opacity: 1; transform: none; }
}

/* Los números de sección cuentan hacia arriba al entrar */
@supports (animation-timeline: view()) {
  .js-motion .action-item {
    animation: fila-entra linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 20%;
  }
  @keyframes fila-entra {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── 15.7 Menos movimiento ────────────────────────────────────
   Reducir no es eliminar: se conservan las opacidades, que ayudan
   a entender que algo apareció; se quita todo desplazamiento,
   toda rotación y todo bucle infinito, que es lo que marea. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .hero h1 .palabra > span,
  .js-motion .hero .eyebrow, .js-motion .hero-lead,
  .js-motion .hero-actions, .js-motion .hero-proof,
  .js-motion .process-step, .js-motion .revelar, .js-motion .action-item {
    animation: aparece 240ms ease forwards !important;
    animation-delay: 0ms !important;
    transform: none !important;
  }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

  .js-motion .hero-orb, .js-motion .status-dot,
  .js-motion .process-stack::before { animation: none !important; }
  .js-motion .process-stack::before { transform: scaleY(1); }

  body::after { animation: none !important; transform: scaleX(0) !important; }

  .js-motion .pillar-card, .js-motion .news-card { transform: none !important; }
}

/* La barra separadora del rastro de navegación usaba --line
   (#C9D3DF) sobre blanco: 1,46:1, casi invisible. Es decorativa,
   pero si está, que se vea. */
.breadcrumb span[aria-hidden] { color: var(--slate); opacity: .55; }

/* ═══════════════════════════════════════════════════════════════
   16. GRÁFICOS ANIMADOS
   ═══════════════════════════════════════════════════════════════ */

/* ── 16.1 Las tres áreas ────────────────────────────────────── */
.g-areas { inline-size: 100%; block-size: auto; max-inline-size: 460px; display: block; margin-inline: auto; }

.ga-c { fill-opacity: .20; stroke-width: 2; }
.ga-c1 { fill: var(--regatta);        stroke: var(--regatta); }
.ga-c2 { fill: var(--terracotta-brand); stroke: var(--terracotta-brand); }
.ga-c3 { fill: var(--deep-blue);      stroke: var(--deep-blue); }

.ga-t {
  font: 800 15px/1 Inter, sans-serif;
  fill: var(--slate);
  letter-spacing: .04em;
  text-anchor: middle;
}
.ga-centro   { font: 900 24px/1 Inter, sans-serif; fill: var(--deep-blue); text-anchor: middle; letter-spacing: -.02em; }
.ga-centro-2 { font: 700 13px/1 Inter, sans-serif; fill: var(--slate);     text-anchor: middle; }

.js-motion .g-areas .ga-c,
.js-motion .g-areas .ga-nucleo,
.js-motion .g-areas text { opacity: 0; }

@supports (animation-timeline: view()) {
  .js-motion .g-areas .ga-c {
    animation: ga-entra linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 34%;
    transform-origin: center;
  }
  .js-motion .g-areas .ga-c2 { animation-range: entry 14% cover 38%; }
  .js-motion .g-areas .ga-c3 { animation-range: entry 18% cover 42%; }

  .js-motion .g-areas .ga-nucleo,
  .js-motion .g-areas text {
    animation: ga-aparece linear both;
    animation-timeline: view();
    animation-range: entry 26% cover 48%;
  }
}

@keyframes ga-entra {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ga-aparece { from { opacity: 0; } to { opacity: 1; } }

/* Respiración lenta: el diagrama no se queda congelado.
   OJO: va sobre el GRUPO <g>, no sobre cada círculo. Si se pone
   en los círculos, la propiedad abreviada «animation» pisa la de
   entrada y los círculos se quedan en opacity:0, invisibles. */
.js-motion .g-areas .g-areas-circulos { animation: ga-respira 9s ease-in-out infinite alternate; }

@keyframes ga-respira {
  from { transform: translate(0, 0); }
  to   { transform: translate(5px, -4px); }
}

/* ── 16.2 El método en cuatro pasos ─────────────────────────── */
.g-metodo { inline-size: 100%; block-size: auto; display: block; overflow: visible; }

.gm-riel   { stroke: var(--borde); stroke-width: 2; }
.gm-avance { stroke: var(--terracotta-brand); stroke-width: 2.5; stroke-linecap: round; }

.gm-halo { fill: var(--terracotta-brand); opacity: .12; }
.gm-bola { fill: #FFFFFF; stroke: var(--terracotta-brand); stroke-width: 2.5; }
.gm-num  { font: 900 14px/1 Inter, sans-serif; fill: var(--terracotta); text-anchor: middle; }
.gm-etq  { font: 800 14px/1 Inter, sans-serif; fill: var(--deep-blue); text-anchor: middle; letter-spacing: -.01em; }

.section-ink .gm-bola { fill: var(--navy); }
.section-ink .gm-etq  { fill: #FFFFFF; }
.section-ink .gm-riel { stroke: rgba(255,255,255,.18); }

/* La línea se dibuja con stroke-dashoffset: es la forma de
   animar un trazo sin tocar geometría, y va en la GPU. */
.js-motion .gm-avance {
  stroke-dasharray: 580;
  stroke-dashoffset: 580;
}
.js-motion .gm-nodo { opacity: 0; }

@supports (animation-timeline: view()) {
  .js-motion .gm-avance {
    animation: gm-dibuja linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 46%;
  }
  .js-motion .gm-nodo {
    animation: gm-nodo-entra linear both;
    animation-timeline: view();
    /* Cada nodo aparece cuando la línea pasa por él */
    animation-range: entry calc(14% + var(--n) * 7%) cover calc(30% + var(--n) * 7%);
    transform-origin: center;
  }
}

@keyframes gm-dibuja { to { stroke-dashoffset: 0; } }
@keyframes gm-nodo-entra {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
  .g-metodo { min-inline-size: 640px; }
  .g-metodo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-block-end: 8px; }
}

/* Sin JavaScript o con movimiento reducido: los gráficos se ven
   enteros y quietos. Nunca se quedan invisibles. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .g-areas .ga-c, .js-motion .g-areas .ga-nucleo,
  .js-motion .g-areas text, .js-motion .gm-nodo { opacity: 1 !important; animation: none !important; }
  .js-motion .gm-avance { stroke-dashoffset: 0 !important; animation: none !important; }
  .js-motion .g-areas .g-areas-circulos circle { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   17. PORTADA
   Bloques de entrada: dicen lo justo y llevan a su subpágina.
   ═══════════════════════════════════════════════════════════════ */

.portada-split {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.portada-lista { list-style: none; margin: var(--space-lg) 0; padding: 0; }

.portada-lista li {
  padding-block: 13px;
  border-block-start: 1px solid var(--hairline);
  font-size: var(--text-base);
  color: var(--slate);
}
.portada-lista li:last-child { border-block-end: 1px solid var(--hairline); }
.portada-lista strong { color: var(--deep-blue); font-weight: 800; }

.portada-grafico {
  display: grid;
  place-items: center;
  padding: clamp(16px, 2.5vw, 32px);
}

@media (max-width: 900px) {
  .portada-split { grid-template-columns: 1fr; }
  .portada-grafico { order: -1; }
}

/* ── El raíl de las cinco líneas ──────────────────────────────
   Solo número, título y etiqueta. El desarrollo de cada una
   vive en lineas-de-accion.php, que es justo el motivo de que
   esa pestaña exista. */
.lineas-rail {
  display: grid;
  gap: 10px;
  margin-block: var(--space-lg);
}

.linea-chip {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: clamp(16px, 1.9vw, 22px) clamp(18px, 2.2vw, 26px);
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out),
              border-color 260ms var(--ease-out);
}

.linea-num {
  font: 900 clamp(1.3rem, 2vw, 1.75rem)/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--terracotta);
  opacity: .34;
  letter-spacing: -.03em;
  transition: opacity 260ms var(--ease-out);
}

.linea-nombre { font-weight: 800; font-size: var(--text-lg); color: var(--deep-blue); letter-spacing: -.015em; }

.linea-tag {
  padding: 6px 13px;
  border: 1px solid var(--regatta-line);
  border-radius: 999px;
  background: var(--regatta-soft);
  color: var(--regatta);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .linea-chip:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow);
    border-color: var(--terracotta-line);
  }
  .linea-chip:hover .linea-num { opacity: 1; }
}

.linea-chip:active { transform: scale(.995); }

@media (max-width: 600px) {
  .linea-chip { grid-template-columns: 44px 1fr; row-gap: 10px; }
  .linea-tag  { grid-column: 2; justify-self: start; }
}

.section-actions { margin-block-start: var(--space-lg); display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .linea-chip { background: var(--superficie-2); }
}

/* En la portada las secciones respiran algo menos que en las
   subpáginas: aquí cada bloque es un resumen, no una lectura
   larga, y 264 px de relleno por sección convertían una entrada
   en un desfiladero. En las subpáginas el relleno amplio se queda,
   porque ahí sí hay texto que leer. */
.pagina-inicio .section { padding-block: clamp(52px, 5.6vw, 88px); }
.pagina-inicio .grupo-seccion { padding-block: clamp(52px, 5.6vw, 88px); }
.pagina-inicio .section-heading { margin-block-end: var(--space-lg); }

/* Cita de la fuente bajo misión y visión. Para una fundación que
   vende trazabilidad, decir de qué artículo sale cada texto no es
   un detalle menor. */
.statement-fuente {
  margin-block-start: var(--space-md);
  padding-block-start: 12px;
  border-block-start: 1px solid var(--hairline);
  font-size: var(--text-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .62;
}
.statement-dark .statement-fuente { border-block-start-color: rgba(255,255,255,.18); }

/* SEGURIDAD: las animaciones atadas al scroll devuelven el
   elemento a opacity:0 cuando sale de pantalla. Al imprimir no hay
   scroll, así que la página saldría en blanco. Aquí se fuerza todo
   a visible. */
@media print {
  .revelar, .ga-c, .gm-nodo, .g-areas text, .ga-nucleo,
  .hero h1 .palabra > span, .process-step,
  .hero .eyebrow, .hero-lead, .hero-actions, .hero-proof {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .gm-avance { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* El párrafo quedaba pegado al titular en misión y visión */
.statement-card h2 { margin-block-end: var(--space-md); }
.statement-card p  { margin-block: 0; }

/* ═══════════════════════════════════════════════════════════════
   18. AJUSTES SOBRE LOS GRÁFICOS
   ═══════════════════════════════════════════════════════════════ */

/* ── 18.1 La sigla, bajo el titular ───────────────────────────
   Al recortar el bajo-logo de la cabecera para que se leyera,
   el visitante dejó de saber qué significa DIES. Vuelve aquí,
   donde hay sitio para leerlo. */
.hero-sigla {
  margin-block: var(--space-md) 0;
  font-size: var(--text-sm);
  letter-spacing: .02em;
  color: var(--slate);
}
.hero-sigla strong {
  color: var(--terracotta);
  font-weight: 900;
  letter-spacing: .06em;
}

/* ── 18.2 Los cuatro pasos, en texto ──────────────────────────
   Sustituyen al diagrama que duplicaba la cadena del hero. */
.metodo-pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-block: var(--space-lg);
  padding: 0;
  counter-reset: none;
}

.metodo-pasos li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block-start: 16px;
  border-block-start: 2px solid rgba(255, 255, 255, .16);
}

.metodo-pasos span {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: 900;
  color: var(--peach);
  letter-spacing: .06em;
}

.metodo-pasos strong {
  font-size: var(--text-base);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
}

/* El borde superior se tiñe en secuencia: el avance se ve sin
   necesidad de otro diagrama. */
.js-motion .metodo-pasos li { border-block-start-color: rgba(255,255,255,.16); }

@supports (animation-timeline: view()) {
  .js-motion .metodo-pasos li {
    animation: paso-marca linear both;
    animation-timeline: view();
    animation-range: entry 16% cover 44%;
  }
  .js-motion .metodo-pasos li:nth-child(2) { animation-range: entry 20% cover 48%; }
  .js-motion .metodo-pasos li:nth-child(3) { animation-range: entry 24% cover 52%; }
  .js-motion .metodo-pasos li:nth-child(4) { animation-range: entry 28% cover 56%; }
}

@keyframes paso-marca {
  from { border-block-start-color: rgba(255,255,255,.16); opacity: .45; }
  to   { border-block-start-color: var(--terracotta-brand); opacity: 1; }
}

@media (max-width: 760px) {
  .metodo-pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .metodo-pasos { grid-template-columns: 1fr; }
}

/* ── 18.3 Nombres centrados en cada esfera ───────────────────── */
.ga-t  { font-size: 17px; fill: var(--deep-blue); }
.ga-t1 { fill: var(--regatta); }
.ga-t2 { fill: var(--terracotta); }
.ga-t3 { fill: var(--deep-blue); }

/* ── 18.4 El punto que recorre el cruce ───────────────────────
   Movimiento constante → curva lineal. 11 s por vuelta: se
   percibe como algo vivo, no como algo que exige atención. */
.ga-viajero { fill: var(--terracotta-brand); }

.js-motion .ga-viajero {
  offset-path: path("M 260 118 A 80 80 0 1 1 259 118");
  offset-rotate: 0deg;
  animation: ga-vuelta 11s linear infinite;
}

@keyframes ga-vuelta {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@supports not (offset-path: path("M 0 0")) {
  .ga-viajero { display: none; }
}

/* ── 18.5 El avance por la cadena del hero ───────────────────
   Un realce recorre los cinco pasos en bucle. Es la única
   animación infinita de la página, y existe porque la cadena
   ES el mensaje: de la evidencia a la acción.
   7,5 s por ciclo, 1,5 s por paso. */
.js-motion .process-step {
  position: relative;
  border-radius: 10px;
}

.js-motion .process-step::before {
  content: "";
  position: absolute;
  inset: -3px -8px;
  border-radius: 10px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--terracotta-brand) 20%, transparent),
    transparent 72%);
  opacity: 0;
  pointer-events: none;
  animation: avance 7.5s ease-in-out infinite;
}

.js-motion .process-step:nth-child(1)::before { animation-delay: 1.4s; }
.js-motion .process-step:nth-child(2)::before { animation-delay: 2.9s; }
.js-motion .process-step:nth-child(3)::before { animation-delay: 4.4s; }
.js-motion .process-step:nth-child(4)::before { animation-delay: 5.9s; }
.js-motion .process-step:nth-child(5)::before { animation-delay: 7.4s; }

@keyframes avance {
  0%, 100% { opacity: 0; }
  6%       { opacity: 1; }
  18%      { opacity: 0; }
}

/* El número del paso se enciende al pasar el realce */
.js-motion .process-step b { transition: color 400ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .ga-viajero { animation: none !important; display: none; }
  .js-motion .process-step::before { animation: none !important; opacity: 0 !important; }
  .js-motion .metodo-pasos li { animation: none !important; opacity: 1 !important;
                                border-block-start-color: var(--terracotta-brand) !important; }
}

/* styles-dies.css le pone a .footer-grid un borde superior en
   --line (#C9D3DF), pensado para el pie claro de antes. Sobre el
   pie oscuro quedaba una raya blanca atravesada. */
.site-footer .footer-grid { border-block-start: 0; }

/* ═══════════════════════════════════════════════════════════════
   19. FOTOGRAFÍA

   Las imágenes son de archivo con licencia: ilustran el alcance
   del trabajo, no documentan proyectos de la fundación. Por eso
   ningún pie de foto las atribuye a una iniciativa concreta —en
   un sitio cuyo argumento es la trazabilidad, dar a entender lo
   contrario sería el error más caro de todos.
   ═══════════════════════════════════════════════════════════════ */

/* ── 19.1 Franja del curso de vida ───────────────────────────── */
.vida-tira {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin-block-start: var(--space-lg);
}

.vida-item {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--superficie-2, #EEF2F7);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.vida-item img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform 700ms var(--ease-out);
}

/* Velo oscuro para que el texto se lea sobre cualquier foto.
   Un degradado, no un color plano: así la imagen no se apaga
   entera, solo la zona donde apoya el texto. */
.vida-item figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 44px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #FFFFFF;
  background: linear-gradient(to top,
    rgba(7, 11, 20, .92) 0%,
    rgba(7, 11, 20, .70) 42%,
    rgba(7, 11, 20, 0) 100%);
}

.vida-item figcaption strong { font-size: var(--text-base); font-weight: 800; letter-spacing: -.01em; }
.vida-item figcaption span   { font-size: var(--text-xs); opacity: .88; line-height: 1.4; }

@media (hover: hover) and (pointer: fine) {
  .vida-item:hover img { transform: scale(1.045); }
}

/* Entran escalonadas, de la infancia a la vejez: el orden de la
   animación es el orden del contenido. */
@supports (animation-timeline: view()) {
  .js-motion .vida-item {
    animation: vida-entra linear both;
    animation-timeline: view();
    animation-range: entry calc(12% + var(--n) * 5%) cover calc(34% + var(--n) * 5%);
  }
}
@keyframes vida-entra {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 860px) { .vida-tira { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .vida-tira { grid-template-columns: 1fr; } }

/* ── 19.2 Miniaturas en las tres áreas ──────────────────────── */
.portada-lista.con-foto li { padding-block: 0; border: 0; }
.portada-lista.con-foto li + li { margin-block-start: 10px; }

.portada-lista.con-foto a {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 260ms var(--ease-out),
              border-color 260ms var(--ease-out),
              background 260ms var(--ease-out);
}

.portada-lista.con-foto img {
  inline-size: 76px;
  block-size: 56px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.portada-lista.con-foto span { font-size: var(--text-sm); color: var(--slate); line-height: 1.45; }
.portada-lista.con-foto strong { color: var(--deep-blue); font-weight: 800; }

@media (hover: hover) and (pointer: fine) {
  .portada-lista.con-foto a:hover {
    transform: translateX(5px);
    border-color: var(--terracotta-line);
    background: var(--terracotta-soft);
  }
}

/* ── 19.3 Foto ancha reutilizable (subpáginas) ───────────────── */
.foto-ancha {
  margin: var(--space-lg) 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.foto-ancha img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Las fotos nunca se imprimen: gastan tóner y no aportan al papel */
@media print { .vida-tira, .foto-ancha, .portada-lista.con-foto img { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   20. AJUSTES DE CABECERA EN MÓVIL Y TABLET
   ═══════════════════════════════════════════════════════════════ */

/* El botón de menú se corre hacia el borde derecho.
   Partía de 14 px en móvil y 20 px en tablet; queda en 10 px en
   ambos. No lo pego al canto a propósito: por debajo de 8 px el
   pulgar falla y en pantallas con bordes curvos el círculo se
   corta por la mitad. */
@media (max-width: 980px) {
  .site-header .menu-toggle { margin-inline-end: -4px; }
}
@media (max-width: 980px) and (min-width: 561px) {
  .site-header .menu-toggle { margin-inline-end: -10px; }
}

/* Con el tema claro forzado, el pie mantiene su fondo oscuro
   propio: eso no es «modo oscuro», es el diseño del pie. */

/* ═══════════════════════════════════════════════════════════════
   21. LA TARJETA «PROPÓSITO»

   Estaba en posición absoluta colgando 160 px por debajo de su
   contenedor: se salía del hero, se comía el aire de la sección
   siguiente y en móvil quedaba medio tapada. Dos tratamientos
   distintos, uno por contexto.
   ═══════════════════════════════════════════════════════════════ */

/* ── Escritorio: sigue flotando, pero dentro de casa ──────────
   Se mantiene el solape con el panel oscuro, que es lo que da
   profundidad, pero el contenedor crece lo necesario para que la
   tarjeta quepa entera y le sobre aire por abajo. */
@media (min-width: 981px) {
  .hero-visual { min-height: 700px; }

  .floating-card {
    inset-inline-end: -12px;
    inset-block-end: 0;
    inline-size: min(312px, 80%);
    padding: 26px 24px;
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid var(--borde);
    box-shadow: var(--shadow-lg);
  }

  .floating-card strong { font-size: 1.2rem; line-height: 1.25; display: block; }
  .floating-card p { margin-block-start: 10px; font-size: .9rem; line-height: 1.55; }
}

/* ── Móvil y tablet: deja de flotar ───────────────────────────
   Posición absoluta sobre una columna estrecha no cabe. Aquí el
   panel y la tarjeta se apilan en flujo normal, cada uno con su
   sitio, y la tarjeta se lee entera. */
@media (max-width: 980px) {
  .hero-visual {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .visual-frame {
    position: static;
    inset: auto;
    padding: clamp(22px, 4vw, 32px);
  }

  .floating-card {
    position: static;
    inset: auto;
    inline-size: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 26px);
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--borde);
    box-shadow: var(--shadow);
  }

  .floating-card strong { font-size: 1.12rem; line-height: 1.3; display: block; }
  .floating-card p { margin-block-start: 9px; font-size: .92rem; line-height: 1.55; }
}

/* El rótulo «PROPÓSITO», en los tres tamaños */
.floating-label {
  display: block;
  margin-block-end: 9px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta);
}