/* ============================================================================
   Fundación FUNDAMAZONA — hoja de estilos del sitio
   ----------------------------------------------------------------------------
   Derivada del sistema «Broadsheet» (papel prensa: Source Serif 4 sobre papel
   claro, jerarquía por escala y aire, no por cajas) y re-entintada a la paleta
   verde de FUNDAMAZONA. Divergencia deliberada respecto de Broadsheet: se añade
   Archivo Narrow como voz de la microtipografía (kickers, etiquetas, cifras),
   que en el sistema original iría también en serif. Y una tercera voz, muy
   acotada: Montserrat 700 sólo para el rótulo «FUNDAMAZONA» de la cabecera y
   el pie, que es marca, no texto.

   Los tokens de :root son la única fuente de verdad del color y de la
   tipografía: nunca escribas un hex ni un nombre de fuente en el HTML. Los
   ajustes de retícula de un solo uso (un gap, un max-width) sí van en línea.
   ========================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Tintas */
  --paper:        #F3F2F2;  /* fondo general — el papel */
  --paper-2:      #EAE9E9;  /* superficie hundida: campos de formulario */
  --ink:          #1A1A1A;  /* texto principal y reglas fuertes */
  --ink-2:        #34322E;  /* texto secundario de párrafo */
  --ink-3:        #57544E;  /* etiquetas */
  --ink-4:        #6B6B6B;  /* texto terciario / notas */

  --green:        #1E6B3B;  /* verde institucional — acción e interacción */
  --green-deep:   #14502D;  /* verde oscuro — textos sobre fondo claro fotográfico */
  --green-hi:     #2F8A4C;  /* hover / foco */
  --green-mid:    #6DBF67;  /* cifras y acentos sobre fondo oscuro */
  --green-pale:   #E7F3E8;  /* tinte de fondo */
  --green-paler:  #C7E9C4;  /* acento sobre banda verde */

  --rule:         rgba(26, 26, 26, 0.20);  /* regla fina */
  --rule-soft:    rgba(26, 26, 26, 0.16);
  --rule-faint:   rgba(26, 26, 26, 0.10);

  /* Tipografías */
  --serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --narrow: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  /* Voz de la marca: sólo para el rótulo «FUNDAMAZONA» de la cabecera y el pie.
     Montserrat es geométrica y mucho más ancha que Archivo Narrow, así que el
     rótulo pide un cuerpo menor y menos prosa entre letras que el que llevaba
     en condensada — ver .masthead__wordmark. No la uses para nada más: la
     microtipografía sigue siendo --narrow. */
  --brand:  "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo */
  --measure:  1360px;   /* ancho máximo de la caja tipográfica */
  --gutter:   40px;     /* margen lateral — se reduce en pantallas pequeñas */
  --section:  88px;     /* separación entre secciones */

  --radius:   6px;
  --radius-sm: 4px;

  /* Retícula de semitono de la separación de color. El canvas de diseño la
     controlaba con la prop `halftone`; aquí queda fija en 1 y se puede apagar
     poniendo --am-ht: 0 en :root. */
  --am-ht: 1;
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --section: 60px; }
}
@media (max-width: 560px) {
  :root { --gutter: 18px; --section: 48px; }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .newscard { transition: none; }
  .newscard:hover { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-hi); }

::selection { background: rgba(47, 138, 76, 0.28); }
:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 2px; }

/* Enlace de salto: primer tabulador de la página. */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--green); color: var(--paper);
  font-family: var(--narrow); font-weight: 700; font-size: 15px;
  padding: 10px 16px; border-radius: var(--radius); text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 8px; color: var(--paper); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Contenedor ─────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-top: var(--section); }
.section--last { padding-bottom: var(--section); }

/* ── Tipografía ─────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--narrow); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green);
}

.label {
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}

.note {
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4);
}

/* Titular de portada de sección. */
.h-display {
  margin: 0;
  font-size: clamp(2.75rem, 7.2vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: pretty;
}
/* Titular de las pantallas interiores — un punto por debajo de la portada. */
.h-page {
  margin: 12px 0 0;
  font-size: clamp(2.5rem, 6.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: pretty;
}
.h-section {
  margin: 0;
  font-size: clamp(1.9rem, 3.9vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: pretty;
}
.h-sub {
  margin: 0;
  font-size: clamp(1.65rem, 3.1vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: pretty;
}

/* Titular de sección en verde. Nació para «Líneas de trabajo»: esa pantalla es
   una sucesión larga de titulares cortos —tres campos, quince líneas, dos
   beneficios— y con todo en tinta se leía como un muro plano y sin jerarquía.
   No entra un color nuevo: es el mismo --green de los kickers y de los
   .ruled__title, repartido por los niveles intermedios.

   La regla que aplica es «el título de la pantalla en tinta, los titulares de
   sección en verde»: por eso .h-page se queda negro y esto sólo va en .h-sub.
   Si algún día se quiere en todo el sitio, no hace falta ir marcando nodos —
   basta con mover `color: var(--green)` de aquí a `.h-sub`. */
.h-sub--green { color: var(--green); }

.lead {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 21px);
  line-height: 1.48;
  font-weight: 600;
  text-wrap: pretty;
}

.p        { margin: 0; text-wrap: pretty; }
.p--muted { color: var(--ink-2); }
.p--small { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.quote {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 30px);
  line-height: 1.35;
  font-style: italic;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.stack   { display: flex; flex-direction: column; gap: 18px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.stack-l { display: flex; flex-direction: column; gap: 26px; }

/* ── Botones y enlaces de acción ────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--narrow); font-weight: 700; font-size: 16px;
  letter-spacing: 0.02em; line-height: 1.2;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--solid   { background: var(--green); color: var(--paper); }
.btn--solid:hover  { background: var(--green-hi); color: var(--paper); }
.btn--outline { color: var(--ink); border-color: rgba(26, 26, 26, 0.30); padding-inline: 20px; }
.btn--outline:hover { background: rgba(26, 26, 26, 0.06); color: var(--ink); }
/* Variantes para la banda verde. */
.btn--paper {
  background: var(--paper); color: var(--green);
  border: 2px solid var(--green);
}
.btn--paper:hover {
  background: var(--green-pale); color: var(--green-deep);
  border-color: var(--green-deep);
}
.btn--ghost   { color: var(--paper); border-color: rgba(243, 242, 242, 0.5); padding-inline: 20px; }
.btn--ghost:hover { background: rgba(243, 242, 242, 0.12); color: var(--paper); }
.btn--sm      { font-size: 14px; padding: 11px 18px; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Enlace con flecha subrayado en verde. */
.link-arrow {
  align-self: flex-start;
  font-family: var(--narrow); font-weight: 700; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
.link-arrow:hover { color: var(--green); }

/* Marcador de contenido pendiente de la fundación. Visible a propósito:
   señala en la propia página lo que falta por recibir del cliente. */
.todo {
  align-self: flex-start;
  display: inline-block;
  background: var(--green-pale);
  border: 1px dashed var(--green-hi);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-family: var(--narrow);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green);
}
.todo--dark {
  background: rgba(109, 191, 103, 0.16);
  border-color: var(--green-mid);
  color: var(--green-paler);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.header { position: sticky; top: 0; z-index: 40; background: var(--paper); }

.topbar { background: var(--ink); color: var(--paper); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 8px;
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.topbar__right { display: flex; gap: 14px; align-items: center; }
.topbar__mail { color: inherit; text-decoration: none; }
.topbar__mail:hover { color: var(--green-mid); }
.topbar__sep { opacity: 0.4; }

.langs { display: flex; gap: 8px; align-items: center; }
.lang {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--narrow); font-size: 12px; letter-spacing: 0.1em;
  font-weight: 500; color: rgba(243, 242, 242, 0.55);
}
.lang[aria-pressed="true"] { font-weight: 700; color: var(--green-mid); }

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 20px 14px;
}
.masthead__meta {
  width: 250px;
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.5;
}
/* Logotipo: isotipo + tipografía viva. Al recibir el logotipo oficial en mapa
   de bits basta sustituir el bloque del HTML por una sola <img>. */
.masthead__logo {
  display: flex; align-items: center; gap: 14px; flex: none;
  text-decoration: none; color: var(--ink);
}
.masthead__logo img { height: 54px; width: auto; }
.masthead__lockup { display: flex; flex-direction: column; gap: 2px; }
.masthead__wordmark {
  font-family: var(--brand); font-weight: 700;
  font-size: 28px; line-height: 1; letter-spacing: -0.01em;
}
/* 40ch mantiene la bajada en tres líneas tanto en español como en inglés, que
   es más largo; con menos medida el inglés rompe a cinco y desequilibra la
   cabecera. */
.masthead__sub {
  font-family: var(--narrow);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.3; max-width: 40ch;
}
.masthead__cta { width: 250px; display: flex; justify-content: flex-end; }
.masthead__cta .btn { white-space: nowrap; }

.mainnav { border-top: 2px solid var(--ink); border-bottom: 1px solid rgba(26, 26, 26, 0.25); }
.mainnav__inner {
  display: flex; justify-content: center; gap: 34px; padding-block: 10px;
  font-family: var(--narrow); font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mainnav a {
  text-decoration: none; color: var(--ink); font-weight: 500;
  transition: color 0.15s ease;
}
.mainnav a:hover { color: var(--green); }
.mainnav a[aria-current="page"] { color: var(--green); font-weight: 700; }

/* Botón de menú — sólo aparece en pantallas estrechas. */
.navtoggle {
  display: none;
  align-items: center; gap: 10px;
  background: transparent; border: 1px solid rgba(26, 26, 26, 0.30);
  border-radius: var(--radius); padding: 9px 14px; cursor: pointer;
  font-family: var(--narrow); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.navtoggle__bars { display: inline-flex; flex-direction: column; gap: 3px; }
.navtoggle__bars span { display: block; width: 16px; height: 2px; background: currentColor; }

/* ── Portada ────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px;
  align-items: start; padding-block: 40px 26px;
}
.hero__aside {
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid var(--rule); padding-left: 34px;
}
.hero__meta {
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4);
  border-top: 1px solid var(--rule); padding-top: 10px;
}

/* Regla gruesa con el banderín verde en el extremo derecho. */
.flag { height: 2px; background: var(--ink); width: 100%; position: relative; }
.flag::after {
  content: ""; position: absolute; right: 0; top: -8px;
  width: 34px; height: 18px; background: var(--green);
  clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%);
}

/* Escena de portada: la fotografía cubre toda la sección y los textos van
   encima. El velo oscurece arriba —blanco al 80 %— para que el titular se
   lea y se disuelve hasta la transparencia total en la zona baja, donde la
   foto respira. */
.hero-scene {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(26, 26, 26, 0.25);
  border-bottom: 2px solid var(--ink);
}
.hero-scene .plate--hero {
  position: absolute; inset: 0;
  border: 0;
}
.hero-scene__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 38%, rgba(255, 255, 255, 0.55) 62%, rgba(255, 255, 255, 0) 85%);
}
.hero-scene .hero {
  position: relative; z-index: 1;
  padding-top: clamp(48px, 9vh, 110px);
  padding-bottom: clamp(140px, 26vh, 300px);
  color: var(--ink);
}
.hero-scene .kicker { color: var(--green-deep); }
.hero-scene .p--small { color: var(--ink); }
.hero-scene .hero__aside {
  border-left-color: var(--rule);
  border-top-color: var(--rule);
}
.hero-scene .hero__meta {
  color: var(--ink-3);
  border-top-color: var(--rule);
}
.hero-scene .flag { background: var(--ink); }
.hero-scene .flag::after { background: var(--green-deep); }
.hero-scene .btn--outline {
  color: var(--green);
  background: var(--paper);
  border: 2px solid var(--green);
}
.hero-scene .btn--outline:hover {
  background: var(--green-pale);
  color: var(--green-deep);
  border-color: var(--green-deep);
}
.hero-scene .plate__caption { z-index: 2; }

/* ── Tratamiento de imprenta ────────────────────────────────────────────── */
/* Las fotografías se imprimen como sus planchas de separación desalineadas
   (filtro SVG #am-sep, definido en index.html) y encima la retícula de
   semitono. El filtro va en un envoltorio y no en la <img> para que el
   recorte y el pie de foto queden fuera de la separación. */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--green-pale);
}
.plate__ink { position: absolute; inset: 0; filter: url(#am-sep); }
.plate__ink img { width: 100%; height: 100%; object-fit: cover; }
.plate__screen {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--am-ht);
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 30%, transparent 32%);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* Copia nítida de la fotografía, sin filtrar, encima de la plancha.

   Nació para tapar el desregistro del antiguo #am-sep-soft; hoy, con
   #am-tinte, la plancha ya es nítida en reposo y lo que revela esta copia es
   el COLOR pleno, no el foco. Sigue haciendo falta por lo mismo de siempre:
   `filter` no interpola entre una referencia a filtro SVG y `none`, así que
   quitar el entintado con una transición daría un salto seco. Con una segunda
   <img> idéntica encima, lo único que se anima es su opacidad, que sí
   interpola. El navegador no la vuelve a descargar: misma URL, misma caché.

   Los dos mandos son --pl-sharp (cuánta copia limpia se mezcla) y --pl-scale
   (la escala de ambas capas). La usan .linecard (portadas de #lineas) y
   .newscard (miniaturas de la actualidad); las dos los suben en el hover.

   Los valores por defecto van como RESERVA del var(), no como declaración en
   `.plate`. Es la diferencia que rompió esto una vez: `.plate { --pl-sharp: 0 }`
   se aplica al propio elemento de la portada, y el valor puesto en el
   elemento gana sobre el que hereda de su .linecard, así que las quince
   portadas se quedaban sin copia nítida. Con la reserva no hay declaración que
   pisar y la herencia funciona. */
.plate__sharp {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  opacity: var(--pl-sharp, 0);
  transform: scale(var(--pl-scale, 1));
  transition: opacity 0.5s ease,
              transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.plate__caption {
  position: absolute; left: 0; bottom: 0;
  background: var(--paper);
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px; color: var(--ink-2);
  border-top-right-radius: var(--radius);
}
/* Banda a sangre, de borde a borde de la ventana. */
.plate--band {
  height: clamp(220px, 34vw, 420px);
  border-top: 1px solid rgba(26, 26, 26, 0.25);
  border-bottom: 2px solid var(--ink);
}
.plate--band-sm { height: clamp(200px, 30vw, 380px); }
.plate--3x2 { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.plate--4x5 { aspect-ratio: 4 / 5; border-radius: var(--radius); }

/* Fotografía real: entintado sin desregistro (#am-tinte, en index.html) y
   semitono casi apagado. La foto se ve nítida en reposo — el desregistro
   permanente del antiguo #am-sep-soft se leía como «borroso» y la fundadora
   lo reportó como baja calidad—; el carácter de imprenta lo ponen el
   semitono, el pie y los filetes. */
.plate--photo .plate__ink { filter: url(#am-tinte); }
.plate--photo .plate__screen { opacity: calc(var(--am-ht) * 0.15); }

/* Hover de imprenta para la fotografía suelta —bandas, galería de
   #restauracion, retratos de pantalla—, sólo con puntero que de verdad puede
   posarse: la plancha se acerca apenas, el semitono se levanta y el pie de
   foto recibe el filete verde. Quedan fuera, cada una por su motivo: el hero
   (su foto ocupa la portada entera y el zoom se dispararía con sólo entrar),
   y las portadas de .linecard, .newscard y .fieldrow, que traen su propio
   sistema de revelado más abajo. El transform va en la <img> (nunca en
   .plate, que rompería el pie); .plate ya recorta con overflow. */
@media (hover: hover) {
  .plate--photo .plate__ink img { transition: transform 0.5s ease-out; }
  .plate--photo .plate__screen { transition: opacity 0.5s ease-out; }
  .plate--photo .plate__caption { transition: box-shadow 0.5s ease-out, color 0.5s ease-out; }
  .plate--photo:not(.plate--hero):not(.linecard__cover):not(.newscard__cover):not(.fieldrow__plate):hover .plate__ink img { transform: scale(1.03); }
  .plate--photo:not(.plate--hero):not(.linecard__cover):not(.newscard__cover):not(.fieldrow__plate):hover .plate__screen { opacity: 0; }
  .plate--photo:not(.plate--hero):not(.linecard__cover):not(.newscard__cover):not(.fieldrow__plate):hover .plate__caption {
    box-shadow: 0 -3px 0 0 var(--green);
    color: var(--green-deep);
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  /* Sin transform si el visitante pidió menos movimiento: ni animado ni a
     saltos. El resto (semitono, filete) es un cambio de opacidad y se queda. */
  .plate--photo:not(.plate--hero):hover .plate__ink img { transform: none; }
}

/* ── Cifras ─────────────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule-soft);
}
.stats--ruled { border-top: 2px solid var(--ink); margin-top: 44px; }
.stat { padding-block: 26px; display: flex; align-items: baseline; gap: 14px; }
.stat + .stat { border-left: 1px solid var(--rule-soft); padding-left: 34px; }
.stat__num {
  font-family: var(--narrow); font-weight: 700;
  font-size: clamp(2rem, 4vw, 52px); line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: 0.5em; }
.stat__label {
  font-family: var(--narrow);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); max-width: 18ch; line-height: 1.35;
}

/* ── Retículas genéricas ────────────────────────────────────────────────── */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.grid-2-t { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.grid-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; }
.grid-aside { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }

/* Variantes de proporción. Van aquí y NO como `style=` en el HTML: un estilo en
   línea gana a cualquier media query, así que una retícula ajustada a mano en
   el HTML se queda multicolumna también en el móvil. Pasó con estas dos: el
   formulario de contacto se quedaba a dos columnas de 190 px y la dirección
   caía a una palabra por línea. */
.grid-split--form { grid-template-columns: 1.1fr 1fr; }
.grid-4--pair { grid-template-columns: 1fr 1fr; gap: 22px 28px; }

/* Cabecera de sección: título a la izquierda, apoyo o enlace a la derecha. */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 26px;
}
.sec-head__lead { margin: 0; max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
.sec-head .link-arrow { flex: none; }

/* ── Valores y bloques con filete superior ──────────────────────────────── */
.ruled       { border-top: 1px solid var(--rule); padding-top: 14px; }
.ruled--bold { border-top: 2px solid var(--ink); padding-top: 14px; }
.ruled__title {
  font-family: var(--narrow); font-weight: 700;
  font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green);
}
.ruled__title--ink { color: var(--ink); }
.ruled__text { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* Cifra ordinal grande en verde claro. */
.ordinal {
  font-family: var(--narrow); font-weight: 700;
  font-size: 40px; line-height: 1; color: var(--green-mid); flex: none;
}
.ordinal--sm { font-size: 36px; }

/* ── Acordeón ───────────────────────────────────────────────────────────── */
.acc__item { border-top: 1px solid var(--rule); }
.acc__item:first-child { border-top: 2px solid var(--ink); }
.acc--framed .acc__item:last-child { border-bottom: 2px solid var(--ink); }

.acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; background: transparent; border: 0; padding: 20px 0;
  cursor: pointer; text-align: left;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 26px); letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.15s ease;
}
.acc__head:hover { color: var(--green); }
.acc__head[aria-expanded="true"] { color: var(--green); }
.acc__num {
  font-family: var(--narrow); font-size: 13px; letter-spacing: 0.1em;
  color: var(--ink-4); margin-right: 14px;
}
.acc__icon {
  font-family: var(--narrow); font-size: 22px; color: var(--green); flex: none;
}
.acc__body { padding: 0 0 22px; max-width: 78ch; }
.acc__body[hidden] { display: none; }

/* ── Acordeón grande de #proyectos ────────────────────────────────────────
   Sustituye a `.acc--lg` + `.acc__media`. El resto del bloque «Acordeón» —el
   `.acc` a secas del avance de campos que hay en #inicio— no se toca: todo lo
   de aquí cuelga de `.acc--lg`.

   El encargo era «ese desplegable se ve tosco, no me da ganas de abrir los
   demás», y el fallo no estaba en el panel abierto sino en los tres cerrados:
   un rótulo institucional («Acciones constitucionales») es una ETIQUETA, y una
   etiqueta no promete nada. Un plegable de preguntas frecuentes no necesita
   promesa porque la pregunta ya dice lo que hay dentro; aquí no. Por eso cada
   cabecera cerrada lleva ahora su BAJADA —el sumario de una línea que en un
   periódico va bajo el titular—, y por eso la bajada se retira al abrir: ya
   cumplió, y dentro está el párrafo que decía lo mismo.

   Lo demás es geometría. La cabecera era un flex con `space-between`: el signo
   `+` quedaba a 700 px de su título, sin nada en medio, y no se leía como
   parte de la fila sino como un carácter suelto. Ahora la fila es una retícula
   de tres columnas —ordinal · texto · marca— y el hueco es el canal del
   ordinal, no un vacío. */
.acc--lg {
  --acc-gut:  clamp(26px, 2.8vw, 40px);   /* canal del ordinal */
  --acc-gap:  clamp(14px, 1.6vw, 24px);
  --acc-mark: 46px;                        /* lado de la caja del signo */
}

/* El marco se cierra arriba y abajo con filete fuerte, como ya lo cerraba por
   abajo `.acc--framed`. Antes `.acc--lg` bajaba el de arriba a 1 px y el
   bloque quedaba abierto por la cabeza y cerrado por los pies; esa asimetría
   era la mitad de lo «tosco». Esta línea sustituye a la que había
   —`.acc--lg .acc__item:first-child { border-top: 1px solid var(--rule) }`—,
   así que bórrala al integrar en vez de dejar las dos. */
.acc--lg .acc__item:first-child { border-top: 2px solid var(--ink); }

/* El cuerpo y la prosa del titular son los que ya tenía `.acc--lg`; se repiten
   aquí porque este bloque sustituye a aquél entero y no debe depender de una
   línea que se va a borrar. Se probaron los 26 px del `.acc` normal ahora que
   la fila lleva bajada: con 32 las cuatro entradas se leen como capítulos y la
   bajada queda por debajo en la jerarquía, que es lo que tiene que pasar. */
.acc--lg .acc__head {
  position: relative;
  font-size: clamp(1.4rem, 2.8vw, 32px); letter-spacing: -0.02em;
  display: grid;
  grid-template-columns: var(--acc-gut) minmax(0, 1fr) var(--acc-mark);
  align-items: start;
  gap: 0 var(--acc-gap);
  padding-block: clamp(22px, 2.6vw, 30px);
}

/* El filete del pliegue. Se traza de izquierda a derecha por el borde inferior
   de la cabecera, que es exactamente por donde el panel se abre: en una fila
   cerrada dice «aquí se abre», y en una abierta se queda de techo del panel.
   Es el mismo gesto de «entrar en registro» que ya tienen las portadas de
   #lineas, puesto donde aquí significa algo. */
.acc--lg .acc__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.acc--lg .acc__head[aria-expanded="true"]::after,
.acc--lg .acc__head:focus-visible::after { transform: scaleX(1); }

.acc--lg .acc__head:focus-visible {
  /* Desplazamiento negativo: en una fila a todo el ancho de `.wrap`, un
     `outline-offset` positivo se sale de la caja y saca barra horizontal a
     320 px. */
  outline: 2px solid var(--green); outline-offset: -2px;
}

/* El ordinal en su columna. Sigue siendo microtipografía de 14 px y no la
   cifra grande de `.fieldrow__num`: los tres campos de acción son un índice
   que se lee y llevan el número como número de capítulo; estas cuatro son
   piezas que se abren, y el peso tiene que estar en el titular y en la marca,
   no en el ordinal. El `padding-top` lo baja a la altura de mayúsculas del
   titular, que es serif y tiene otra caja. */
.acc--lg .acc__num {
  grid-column: 1;
  font-size: 14px; line-height: 1; margin-right: 0;
  padding-top: 0.72em;
  transition: color 0.2s ease;
}
.acc--lg .acc__head[aria-expanded="true"] .acc__num { color: var(--green-hi); }

/* El bloque de texto de la fila es a su vez una retícula de dos filas —titular
   y bajada— porque la segunda se pliega al abrir, y plegarla con `max-height`
   obliga a inventar un tope: se midió a diez anchos y en los dos idiomas y la
   bajada más alta ocupa 2,81 em, pero el tope que cubre eso miente la mitad
   del recorrido en las que sólo ocupan 1,38. Con `0fr → 1fr` la altura es la
   real, valga una línea o tres, y nadie tiene que mantener un número. */
.acc--lg .acc__lines {
  grid-column: 2; min-width: 0;
  display: grid; grid-template-rows: auto 1fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.acc--lg .acc__head[aria-expanded="true"] .acc__lines { grid-template-rows: auto 0fr; }

/* `line-height` corto: el titular tenía el 1,65 heredado del cuerpo, que a
   32 px son 53 px de línea y separaba el rótulo de su propia bajada más que de
   la fila de al lado. El aire entre titular y bajada va en el `padding` del
   titular y no en un `margin` de la bajada ni en el `row-gap`: los dos siguen
   ocupando sitio cuando la fila de la retícula vale cero, y quedaría un
   escalón de 9 px bajo el titular de la fila abierta. */
.acc--lg .acc__title {
  display: block; line-height: 1.08;
  padding-bottom: 9px;
  transition: padding-bottom 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.acc--lg .acc__head[aria-expanded="true"] .acc__title { padding-bottom: 0; }

/* La bajada. Va en Archivo Narrow y en gris de etiqueta para que no compita
   con el titular serif: es aparato, no texto. Los 66 caracteres de medida son
   los que dejan las cuatro bajadas en una sola línea en escritorio en los dos
   idiomas —con 54 se partían la 01 en español y la 04 en inglés—; en teléfono
   caben en dos y el pliegue las mide igual de bien. */
.acc--lg .acc__deck {
  display: block;
  overflow: hidden; min-height: 0;
  font-family: var(--narrow); font-weight: 400;
  font-size: 16px; line-height: 1.4; letter-spacing: 0.015em;
  color: var(--ink-3);
  max-width: 66ch;
  opacity: 1;
  transition: opacity 0.22s ease, color 0.2s ease;
}
.acc--lg .acc__head[aria-expanded="true"] .acc__deck { opacity: 0; }

/* La marca. Deja de ser un glifo suelto y pasa a ser un control con caja: es
   lo que hace que la fila cerrada se lea como algo que se pulsa. El signo lo
   dibujan dos barras del CSS y no el carácter, por dos motivos: `+` y `–` no
   se centran a la misma altura óptica dentro de una caja, y con barras el paso
   de uno a otro es un giro de 90° y no un cambio de carácter.
   `font-size: 0` apaga el glifo que site.js sigue escribiendo — el JS no se
   toca, y si algún día se quita este bloque el `+`/`–` reaparece solo. */
.acc--lg .acc__icon {
  grid-column: 3; justify-self: end; align-self: start;
  position: relative; margin-top: 2px;
  width: var(--acc-mark); height: var(--acc-mark);
  border: 1px solid var(--green); border-radius: var(--radius-sm);
  color: var(--green); font-size: 0;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.acc--lg .acc__icon::before,
.acc--lg .acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 2px; margin: -1px 0 0 -8px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.acc--lg .acc__icon::after { transform: rotate(90deg); }
.acc--lg .acc__head[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc--lg .acc__head[aria-expanded="true"] .acc__icon {
  background: var(--green); border-color: var(--green); color: var(--paper);
}

/* Los estados de puntero van tras `hover: hover`: en un teléfono el hover se
   queda pegado después del toque y la fila que acabas de cerrar seguiría
   marcada en verde. */
@media (hover: hover) {
  .acc--lg .acc__head:hover::after { transform: scaleX(1); }
  .acc--lg .acc__head:hover .acc__num { color: var(--green-hi); }
  .acc--lg .acc__head:hover .acc__deck { color: var(--ink-2); }
  .acc--lg .acc__head:hover .acc__icon { border-color: var(--green); background: var(--green-pale); }
  .acc--lg .acc__head[aria-expanded="true"]:hover .acc__icon { background: var(--green); }
}

/* ── El panel ─────────────────────────────────────────────────────────────
   Va sangrado a la columna del titular: el ordinal se queda solo en su canal y
   el bloque se lee como un sumario con sus artículos debajo.

   El pliegue se anima con `grid-template-rows: 0fr → 1fr` y no con
   `max-height`: un tope fijo obliga a inventar una altura, y aquí el panel 02
   tiene tres líneas y el 04 tiene además los dos foros; con un tope común la
   curva mentiría en los dos. El recorte lo hace el `overflow: hidden` de
   `.acc__panel`, que por eso no se puede quitar.

   Y se anima también al CERRAR, que es la mitad que se suele dejar coja: como
   el estado cerrado es el atributo `hidden` —o sea `display: none`—, hace
   falta `transition-behavior: allow-discrete` para que el `display` espere a
   que la fila termine de plegarse, y `@starting-style` para que al aparecer
   arranque de 0fr en vez de estar ya abierta. Donde el navegador no los
   entienda, el panel aparece y desaparece de golpe: exactamente lo que hacía
   antes, así que no hay nada que reparar.

   OJO A LA ESPECIFICIDAD, que aquí muerde: `.acc__body[hidden] { display:none }`
   de más arriba y `.acc--lg .acc__body` empatan a (0,2,0), y este bloque va
   después en la hoja, así que ganaría y los tres paneles cerrados se verían.
   Por eso el `hidden` se vuelve a declarar aquí dentro. No lo borres. */
.acc--lg .acc__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  max-width: none;
  padding: 0;
  /* Ésta es la transición de CERRAR: una transición usa las propiedades del
     estado al que va, así que la que se escribe en la regla base es la que
     actúa al plegarse. Cerrar va más rápido y con curva simétrica; abrir va
     más lento y desacelerando, que es donde se lee el contenido. */
  transition: grid-template-rows 0.30s cubic-bezier(0.4, 0, 0.25, 1),
              opacity 0.18s ease,
              display 0.30s allow-discrete;
}
.acc--lg .acc__body[hidden] { display: none; }
.acc--lg .acc__body:not([hidden]) {
  grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 0.30s ease 0.06s,
              display 0.42s allow-discrete;
}
@starting-style {
  .acc--lg .acc__body:not([hidden]) { grid-template-rows: 0fr; opacity: 0; }
}
.acc--lg .acc__panel {
  overflow: hidden;   /* es lo que recorta la fila mientras se pliega */
  min-height: 0;      /* sin esto un elemento de retícula no baja de su mínimo */
  padding-inline-start: calc(var(--acc-gut) + var(--acc-gap));
  /* Una sola medida para todo lo que hay dentro. El tope va en el panel y no
     en el párrafo porque el panel 04 lleva además los dos foros: con el tope
     sólo en `.p`, el párrafo medía 60 caracteres y el texto de los foros se
     iba a 130, y las dos columnas quedaban desalineadas por la derecha dentro
     del mismo panel. */
  max-width: 68ch;
}
/* El aire de arriba y de abajo va en MÁRGENES DE LOS HIJOS y no en el
   `padding` del panel, y esto no es manía: con `box-sizing: border-box` —que
   la hoja pone en `*`— el relleno forma parte de la altura de la caja, así que
   la fila de la retícula no podía bajar de los 68 px que suman los dos
   rellenos. El panel se plegaba hasta ahí y de ahí saltaba a cero: un tirón al
   final de cada cierre. Con márgenes, el mínimo es 0 de verdad. */
.acc--lg .acc__panel > :first-child { margin-top: clamp(18px, 2vw, 24px); }
.acc--lg .acc__panel > :last-child  { margin-bottom: clamp(30px, 3.6vw, 44px); }

/* El párrafo es ahora todo el premio de abrir, así que se le da cuerpo de
   lectura y medida corta. No se toca el texto: es institucional. */
.acc--lg .acc__panel .p {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--ink-2);
}

/* ── Teléfono ─────────────────────────────────────────────────────────────
   El ordinal sube a su propia línea —ya lo hacía la regla general de 620 px— y
   la retícula pasa a dos columnas: texto y marca. Con tres columnas, a 360 px
   el titular se quedaba en 250 px y «participación ciudadana» partía por la
   mitad. El panel pierde la sangría por el mismo motivo. */
@media (max-width: 620px) {
  .acc--lg .acc__head {
    grid-template-columns: minmax(0, 1fr) var(--acc-mark);
    grid-template-areas: "num  num" "text mark";
    gap: 7px var(--acc-gap);
    font-size: 1.3rem;
    padding-block: 20px;
  }
  .acc--lg .acc__num   { grid-area: num;  padding-top: 0; margin-bottom: 0; }
  .acc--lg .acc__lines { grid-area: text; }
  .acc--lg .acc__icon  { grid-area: mark; align-self: center; margin-top: 0; }
  .acc--lg .acc__deck  { font-size: 14px; max-width: none; }
  .acc--lg .acc__title { padding-bottom: 7px; }
  .acc--lg .acc__panel { padding-inline-start: 0; }
}

/* Puntero grueso: no hay nada que agrandar. El objetivo táctil no es la caja
   del signo sino la fila entera, que es el `<button>`, y mide de 100 a 152 px
   de alto según el ancho — medido a 320, 360, 390, 768, 900, 1280 y 1600 px.
   Lo único que hacía falta atender era el hover pegado tras el toque, y de eso
   se ocupa el bloque `hover: hover` de más arriba. Se deja dicho para que
   quien venga detrás no lo busque. */

/* Un plegable que anima su altura es justo lo que hay que neutralizar aquí. La
   regla global de `*` ya fuerza `transition-duration: 0.01ms !important`, y se
   comprobó con `--force-prefers-reduced-motion` que las cuatro transiciones de
   este bloque caen a 1e-05 s; se apaga además de forma explícita para que
   quien lea aquí no tenga que confiar en que la regla de arriba siga estando.
   Todo pasa a ser instantáneo —el pliegue, el filete, el color y el giro del
   signo— pero ninguno de esos estados desaparece: el que abre sigue viéndose
   abierto. */
@media (prefers-reduced-motion: reduce) {
  .acc--lg .acc__body,
  .acc--lg .acc__body:not([hidden]) { transition: none; }
  .acc--lg .acc__deck,
  .acc--lg .acc__lines,
  .acc--lg .acc__title,
  .acc--lg .acc__num,
  .acc--lg .acc__icon,
  .acc--lg .acc__icon::before,
  .acc--lg .acc__icon::after,
  .acc--lg .acc__head::after { transition: none; }
}

/* En papel no hay nada plegado: los cuatro paneles se imprimen abiertos y la
   marca sobra. La bajada se queda: impresa es el sumario del apartado. */
@media print {
  /* Hay que devolver las tres propiedades del pliegue, no sólo el `display`:
     la regla base deja el cuerpo en `0fr` y a opacidad 0, así que un
     `display: block` a secas imprimiría cuatro paneles en blanco. */
  .acc--lg .acc__body,
  .acc--lg .acc__body[hidden] { display: block; opacity: 1; }
  .acc--lg .acc__icon { display: none; }
  /* Con el selector de estado, para que gane también a la cabecera abierta. */
  .acc--lg .acc__head::after { display: none; }
}

/* ── Tarjetas numeradas y artículos ─────────────────────────────────────── */
.card { display: flex; flex-direction: column; gap: 10px; }
.card__num {
  font-family: var(--narrow); font-weight: 700;
  font-size: 40px; line-height: 1; color: var(--green-mid);
}
.card__title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; }

.post { display: flex; flex-direction: column; gap: 12px; }
.post__meta {
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green);
}
.post__title {
  margin: 0; font-size: clamp(1.25rem, 2vw, 26px); line-height: 1.16;
  font-weight: 600; letter-spacing: -0.015em;
}
.post--brief { gap: 10px; border-top: 1px solid var(--rule); padding-top: 16px; }
.post--brief .post__title { font-size: clamp(1.2rem, 1.8vw, 24px); }

/* ── Actualidad externa ───────────────────────────────────────────────────
   Notas de terceros que la fundación agrega como contexto: la ficha entera es
   un enlace saliente. Sigue la retícula .grid-3, así que hereda los cortes
   responsivos; sólo cambia el tratamiento interno. Nada de cajas ni píldoras:
   una regla superior, microtipografía en Archivo Narrow y titular en serif. */
.newscard {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 2px solid var(--ink); padding-top: 14px;
  color: inherit; text-decoration: none;
  transition: border-top-color 0.18s ease, transform 0.18s ease;
}
.newscard:hover { border-top-color: var(--green); transform: translateY(-2px); }
.newscard:hover .newscard__title { color: var(--green); }
.newscard:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }

/* La miniatura es la portada de la nota de destino, sacada de su `og:image`
   —la imagen que la propia publicación declara para que la usen los enlaces—.
   Va arriba, como en las portadas de #lineas, y con el mismo tratamiento de
   imprenta: son fotografías ajenas, y pasarlas por la plancha de la casa las
   integra en la página en vez de dejar seis recortes de estilos distintos.
   Procedencia y advertencias de uso, en docs/fuentes-actualidad.md.

   Reposo un punto más limpio que en #lineas (0,42 frente a 0,30): aquí la
   miniatura es más pequeña y compite con menos texto, así que aguanta —y
   necesita— más nitidez para que se entienda de qué es la foto. */
.newscard__cover {
  --pl-sharp: 0.42;
  --pl-scale: 1.03;
  /* La ficha es un <a>, así que su envoltorio va en <span> para no meter un
     bloque dentro de un enlace en línea; sin `display: block` el `aspect-ratio`
     no se aplicaría y la miniatura colapsaría a cero de alto. */
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  margin-bottom: 2px;
}
.newscard:hover .newscard__cover,
.newscard:focus-visible .newscard__cover { --pl-sharp: 1; --pl-scale: 1; }

.newscard__cover .plate__ink img {
  transform: scale(var(--pl-scale, 1));
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* El semitono va por encima de la copia nítida (que está en z-index 1) y se
   apaga al revelar, igual que en .linecard. */
.newscard__cover.plate--photo .plate__screen {
  z-index: 2;
  opacity: calc(var(--am-ht) * 0.18);
  transition: opacity 0.5s ease;
}
.newscard:hover .newscard__cover .plate__screen,
.newscard:focus-visible .newscard__cover .plate__screen { opacity: 0; }

/* Sin puntero fino no hay hover: la miniatura va ya casi limpia, como las
   portadas de #lineas. */
@media (pointer: coarse) {
  .newscard__cover { --pl-sharp: 0.8; --pl-scale: 1; }
  .newscard__cover.plate--photo .plate__screen { opacity: calc(var(--am-ht) * 0.09); }
}
@media (prefers-reduced-motion: reduce) {
  .newscard__cover { --pl-scale: 1; }
}
@media print {
  .newscard__cover { --pl-sharp: 1; --pl-scale: 1; }
  .newscard__cover .plate__ink img { filter: none; }
}
.newscard__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.newscard__tag {
  font-family: var(--narrow); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green);
}
.newscard__date { font-family: var(--narrow); font-size: 12px; color: var(--ink-3); }
.newscard__title { margin: 0; font-size: 20px; line-height: 1.22; font-weight: 600; }
.newscard__sum { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); flex: 1; }
.newscard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-family: var(--narrow); font-size: 12px;
}
.newscard__src { color: var(--ink-2); font-weight: 700; letter-spacing: 0.04em; }
.newscard__go {
  color: var(--green); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}


/* ── Líneas de trabajo con portada ────────────────────────────────────────
   Las quince fichas de #lineas llevan foto. El hover no añade un efecto ajeno
   al sitio: usa el mismo lenguaje de imprenta que ya tienen las fotografías.
   En reposo la imagen está FUERA DE REGISTRO —semitono subido, tinta a medio
   entintar, plancha un punto grande—; al pasar por encima ENTRA EN REGISTRO:
   la retícula se apaga, el color vuelve y la plancha se asienta en su sitio.
   Es la metáfora que ya cuenta el sitio, no un zoom cualquiera.

   Que la escala vaya de 1,045 a 1 —y no al revés— tiene además un motivo
   práctico: las fotos de estas portadas son pequeñas, de 366 a 832 px de ancho
   de origen, así que el estado revelado es también el que menos las amplía. El
   gesto que las enseña es el que mejor las ve.

   Los cuatro valores que cambian van en variables declaradas en la ficha, y
   :hover sólo las redefine. Con reglas sueltas, la del estado de reposo
   —.linecard__cover.plate--photo .plate__screen, tres clases— empataba en
   especificidad con la del hover y sólo ganaba por ir después en el archivo:
   un empate que se rompe solo el día que alguien reordene el bloque. Así hay
   una única regla por propiedad y el orden deja de importar. La transición
   sigue funcionando porque se declara sobre la propiedad final —opacity,
   transform, filter—, no sobre la variable.

   No lleva cajas ni sombras: la ficha sigue siendo .ruled, un filete y texto.
   Lo único que se le añade encima del filete es el trazo de registro. */
/* ── Campos de acción ─────────────────────────────────────────────────────
   Los TRES campos de acción de #lineas. No son lo mismo que las quince líneas
   de trabajo —los campos organizan la fundación por dentro, las líneas son los
   servicios que se ofertan— y CLAUDE.md insiste en no fundirlos.

   La primera versión intentó marcar esa diferencia con la escala: la misma
   ficha de las quince, con la portada más alta y los números más grandes. No
   funciona, y el cliente lo llamó por su nombre. Una diferencia de tamaño no
   crea una categoría: crea la misma cosa dos veces. Con la misma retícula de
   tres columnas, el mismo filete y el mismo orden de lectura —foto, rótulo,
   párrafo—, la fila de campos se leía como la primera fila de un catálogo de
   dieciocho.

   La regla que ordena esto es: UN CATÁLOGO ES UNA RETÍCULA; UNA ESTRUCTURA NO.
   Las quince son quince fichas sueltas en `grid-3`, que es lo que debe ser un
   catálogo. Los tres son un índice: tres FILAS a todo el ancho, enmarcadas
   arriba y abajo por un filete fuerte, o sea una sola pieza en tres partes. Al
   cambiar el eje —columnas contra filas— las dos familias dejan de poder
   confundirse aunque se miren de reojo.

   Cada fila se ancla en los dos márgenes: el ordinal en el izquierdo, la
   lámina en el derecho y el texto en medio, a una medida cómoda. Es la
   diferencia entre esto y colgar el texto de la foto: la fila no se queda
   coja por la derecha.

   Y sube de rango donde importa, que es la tipografía: el titular va en serif
   a 40 px y en TINTA, contra los 15 px en versalitas y verde de `.ruled__title`
   de las quince. Un campo pesa más que una línea en la página porque pesa más
   en la institución, no porque su foto sea más grande.

   Lo que NO lleva, a propósito: hover. Las quince fichas entran en registro al
   pasar por encima porque son un catálogo que se recorre pieza a pieza; los
   tres campos no son piezas que se elijan, son el índice que se lee. Un
   revelado aquí sería el mismo gesto sin el motivo — y era parte de lo que
   hacía que las dos familias se leyeran iguales. Por eso tampoco llevan
   `.plate__sharp`: sin hover que la anime, la copia nítida no pinta nada.
   ========================================================================= */

/* Ojo con el nombre: la fila es .fieldrow y no .field porque `.field` ya
   existe —es el envoltorio de cada campo del formulario de contacto, con
   `display: flex`— y va más abajo en el archivo, así que le habría ganado a
   la retícula de aquí y el bloque se habría apilado sin previo aviso.

   El marco. El filete de abajo lo pone el contenedor y el de arriba la primera
   fila, de modo que los tres campos quedan cerrados como un solo bloque. Las
   quince líneas, en cambio, llevan cada una su filete y ninguno las agrupa:
   ahí está, en dos reglas, la diferencia entre estructura y catálogo. */
.fields { border-bottom: 2px solid var(--ink); }

.fieldrow {
  /* La lámina crece con la ventana pero nunca pasa de 410 px: por encima de
     ese ancho las fuentes —de 338 a 390 px— se amplían y se rompen. */
  --fld-plate: clamp(240px, 30vw, 410px);
  --fld-num:   clamp(64px, 7vw, 96px);

  /* Tratamiento de la lámina — ver .fieldrow__plate. */
  --fld-sat:  0;      /* sin color: no es una fotografía, es una plancha */
  --fld-con:  1;      /* el 1,2 compensaba los negros que levantaba el viejo
                         #am-sep-soft; #am-tinte no los toca y con 1,2 la
                         plancha quedaría dura de más */
  --fld-veil: 0.35;   /* tinta verde de la casa sobre el gris */
  --fld-ht:   0.30;   /* retícula de semitono, al doble que en una foto normal */

  display: grid;
  grid-template-columns: var(--fld-num) minmax(0, 1fr) var(--fld-plate);
  grid-template-areas: "num body plate";
  gap: 0 clamp(24px, 3.4vw, 48px);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-block: clamp(26px, 3.2vw, 40px);
}
.fields .fieldrow:first-child { border-top: 2px solid var(--ink); }

/* El ordinal en el margen izquierdo, como el número de capítulo de un informe.
   `line-height: 0.78` y el desplazamiento de un pelo alinean su altura de
   mayúsculas con la del titular, que es serif y tiene otra caja. */
.fieldrow__num {
  grid-area: num;
  font-family: var(--narrow); font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 54px);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: var(--green);
  padding-top: 0.06em;
}

.fieldrow__body { grid-area: body; }

/* El titular en tinta y en serif, un escalón por encima de todo lo que hay en
   esta pantalla salvo el título de página. Ver CLAUDE.md: el verde es de los
   titulares de sección —el «Tres campos de acción» que va encima—, y dejarlo
   fuera de aquí es lo que hace que este bloque se lea como texto de fondo y no
   como quince rótulos más. */
.fieldrow__title {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
}
.fieldrow__text {
  margin: 14px 0 0;
  font-size: 17px; line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

/* La lámina.

   Aquí está la otra mitad del encargo. El archivo de campo documenta
   ACTIVIDADES, y una actividad es una línea de trabajo haciendo su trabajo;
   un campo de acción no es una actividad, es una de las tres partes en que se
   organiza la fundación. Por eso ninguna foto del archivo «es» un campo, y por
   eso tres fotos de gente reunida encima de los tres campos leían como más de
   lo mismo por muy distintos que fueran los archivos.

   La salida no es quitar la imagen —el cliente la pidió y hace falta— sino
   cambiarle el registro: aquí la fotografía no ilustra, marca. Se le quita el
   color, se le sube la retícula al doble que a una foto normal y se le pasa un
   velo de verde de la casa: sale una plancha impresa, no un documento. Puestas
   al lado de las quince portadas en color se leen como otra clase de imagen, y
   ese es exactamente el trabajo que tienen que hacer.

   Se probaron los cuatro puntos de la escala. En color son indistinguibles de
   una `.linecard`. En blanco y negro puro quedan muertas sobre el papel crema.
   Con el velo a 0,75 vuelve la mancha verde uniforme que ya obligó a inventar
   #am-sep-soft. 0,35 es donde la escena se sigue leyendo y la imagen ya no
   compite. */
.fieldrow__plate {
  grid-area: plate;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  /* El velo va en `mix-blend-mode`, así que conviene cerrarle el contexto de
     composición: sin esto se mezclaría con lo que haya debajo de la lámina. */
  isolation: isolate;
}
/* La desaturación va encadenada en la <img> y no en .plate__ink por el mismo
   motivo que en .linecard: .plate__ink ya tiene ocupada su `filter` con
   url(#am-tinte). */
.fieldrow__plate .plate__ink img {
  filter: saturate(var(--fld-sat)) contrast(var(--fld-con));
}
/* Se escribe multiplicando por --am-ht para que apagar la retícula en :root
   siga apagándola también aquí. */
.fieldrow__plate.plate--photo .plate__screen {
  z-index: 2;
  opacity: calc(var(--am-ht) * var(--fld-ht));
}
.fieldrow__plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 3;
  background: var(--green-deep);
  mix-blend-mode: color;   /* tono de esta capa, luminosidad de la foto */
  opacity: var(--fld-veil);
}

/* A una columna la fila se apila en el orden ordinal · lámina · texto, y no
   ordinal · texto · lámina, que era lo primero que salía. El motivo es que en
   un teléfono la entrada tiene que abrir con su imagen: si la lámina cae al
   final de un párrafo de doce líneas, los tres campos empiezan en seco
   mientras las quince fichas de abajo abren todas con foto, y el bloque que
   debía pesar más pasa a parecer el pobre. */
@media (max-width: 900px) {
  .fieldrow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "plate" "body";
    gap: 12px 0;
  }
  .fieldrow__num { padding-top: 0; }
  /* Apilada, la lámina ocupa el ancho de la columna, y entre 768 y 900 px eso
     son 700 px sacados de un original de 338: se rompe. El tope la deja en su
     tamaño y la alinea con el ordinal, que en una figura de margen es lo
     natural. En un teléfono la columna es más estrecha que el tope y no actúa. */
  .fieldrow__plate { margin-bottom: 6px; max-width: 460px; }
  .fieldrow__title { font-size: clamp(1.5rem, 6vw, 30px); }
  .fieldrow__text { font-size: 16px; }
}

/* Sin puntero fino no hay hover que atender —este bloque no tiene ninguno— y
   la lámina ya está en su estado único. Sólo se le baja un punto la retícula:
   a 320 px de ancho el punto de 3 px empieza a comerse la escena. */
@media (pointer: coarse) {
  .fieldrow { --fld-ht: 0.22; }
}

/* Nada se mueve aquí, así que `prefers-reduced-motion` no tiene qué quitar.
   Se deja dicho para que quien venga detrás no lo busque. */

/* Sobre papel no hay tinta que ahorrar ni retícula que simular —la imprime la
   imprenta—, así que la lámina va como la fotografía que es, igual que hace el
   resto del archivo con #am-tinte. */
@media print {
  .fieldrow { --fld-veil: 0; --fld-ht: 0; --fld-sat: 1; --fld-con: 1; }
  .fieldrow__plate .plate__ink img { filter: none; }
}

.linecard {
  position: relative;
  /* 8 px entre titular y texto: los que ya llevaban estas quince fichas. */
  display: flex; flex-direction: column; gap: 8px;

  --lc-halftone: 0.20;   /* factor de retícula, sobre el --am-ht global */
  --lc-veil:     0.10;   /* velo de tinta verde */
  --lc-sat:      0.62;   /* saturación de la plancha */
  --pl-scale:    1.03;   /* escala de la plancha — ver .plate__sharp */
  --pl-sharp:    0.30;   /* cuánta copia nítida se mezcla — ver .plate__sharp */
}
.linecard:hover, .linecard:focus-within {
  --lc-halftone: 0;
  --lc-veil:     0;
  --lc-sat:      1;
  --pl-scale:    1;
  --pl-sharp:    1;
}

/* El trazo de registro: una regla verde que se traza de izquierda a derecha
   sobre el filete de .ruled. Va en absoluto y no engorda el borde, para que
   marcar una ficha no desplace ni un píxel de la retícula. */
.linecard::before {
  content: ""; position: absolute; z-index: 1;
  left: 0; top: -1px; width: 100%; height: 1px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.linecard:hover::before,
.linecard:focus-within::before { transform: scaleX(1); }

/* 16:9, no 4:3. Con quince fichas seguidas una portada cuadrada convierte la
   pantalla en un muro de fotos y entierra el texto, que es lo que aquí importa:
   son servicios que se ofertan, no una galería. Apaisada y baja se lee como la
   viñeta de un periódico y deja el titular a la vista. De paso recorta el 4:3
   de origen por arriba y por abajo, que es donde estas fotos de campo llevan
   cielo y suelo. */
.linecard__cover {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  margin-bottom: 6px;
}

/* La plancha: un punto fuera de sitio y sin entintar del todo. Las dos cosas
   van en la <img> y no en .plate__ink, por dos motivos distintos. La escala,
   porque transformar el elemento filtrado obliga al navegador a recalcular el
   filtro SVG en cada fotograma. Y la saturación, porque .plate__ink ya tiene
   ocupada su propiedad `filter` con url(#am-tinte), y un filtro de CSS no
   se puede interpolar contra una referencia a filtro SVG. Encadenadas en dos
   elementos, las dos animan.

   Desaturar, y no teñir de verde, que fue el primer intento: catorce de estas
   quince fotos son selva, así que una capa verde por encima las igualaba todas
   en el mismo verde plano —el fallo que ya obligó a inventar #am-sep-soft—.
   Sin saturación se leen como una prueba de prensa; con ella, como la foto. */
.linecard__cover .plate__ink img {
  transform: scale(var(--pl-scale, 1));
  filter: saturate(var(--lc-sat)) contrast(0.98);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
              filter 0.5s ease;
}

/* Semitono subido en reposo, casi apagado al revelar. Se escribe multiplicando
   por --am-ht, igual que .plate--photo, para que poner --am-ht: 0 en :root siga
   apagando la retícula en todo el sitio, también aquí. */
.linecard__cover.plate--photo .plate__screen {
  z-index: 2;   /* por encima de .plate__sharp, que va en 1 */
  opacity: calc(var(--am-ht) * var(--lc-halftone));
  transition: opacity 0.5s ease;
}

/* Una pizca de tinta verde: sólo la justa para que lo desaturado caiga del
   lado del verde de la casa y no en un gris muerto. `color` toma el tono de
   esta capa y la luminosidad de la foto. Va por encima de la copia nítida
   —z-index mayor— pero se apaga en el hover, así que no la ensucia.
   En 0,10 se nota y no iguala; por encima de 0,20 las quince portadas vuelven
   a ser el mismo rectángulo. */
.linecard__cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 3;
  background: var(--green-deep);
  mix-blend-mode: color;
  opacity: var(--lc-veil);
  transition: opacity 0.5s ease;
}

.linecard .ruled__title { transition: color 0.25s ease; }
.linecard:hover .ruled__title,
.linecard:focus-within .ruled__title { color: var(--green-hi); }

/* Nota sobre el móvil, porque es una ausencia y no se ve en el código: a una
   sola columna la ficha NO gira a fila con la portada de miniatura al lado del
   texto. Se probó y sale mal: ese patrón es para breves de dos o tres líneas y
   estos párrafos tienen doce, así que la foto quedaba en 124 px, el texto caía
   a diecinueve caracteres por línea y debajo de la miniatura se abría media
   columna vacía. La portada se queda a todo el ancho. Es más scroll, pero se
   lee y la foto se ve, que es para lo que está. */

/* Sin puntero fino no hay hover, y el reposo es el único estado que existe:
   se le quita casi todo el fuera de registro para que la foto se vea. Queda
   algo de retícula y de verde —el gesto se conserva—, pero no se le pide al
   dedo que revele nada. Los valores acaban muy cerca de los de .plate--photo,
   que es justo lo que se busca: en un teléfono estas portadas se comportan
   como cualquier otra fotografía del sitio. */
@media (pointer: coarse) {
  .linecard {
    --lc-halftone: 0.10;
    --lc-veil:     0.05;
    --lc-sat:      0.94;
    --pl-scale:    1;
    --pl-sharp:    0.72;   /* sin hover que la revele, la portada va casi limpia */
  }
}

/* Quien pide menos movimiento sigue viendo el cambio de estado —el color
   vuelve, la retícula se apaga—, pero sin desplazamiento: la plancha arranca
   ya en su sitio y el trazo aparece puesto. Las transiciones las neutraliza
   la regla global de prefers-reduced-motion del principio del archivo. */
@media (prefers-reduced-motion: reduce) {
  .linecard, .linecard:hover, .linecard:focus-within { --pl-scale: 1; }
  .linecard::before { transform: scaleX(1); background: var(--rule); }
  .linecard:hover::before,
  .linecard:focus-within::before { background: var(--green); }
}

/* Sobre papel no hay hover ni tinta que ahorrar: la portada va como la foto.
   El archivo ya apaga #am-tinte al imprimir; falta la capa de esta ficha. */
@media print {
  .linecard {
    --lc-sat: 1; --pl-scale: 1; --lc-veil: 0; --lc-halftone: 0; --pl-sharp: 1;
  }
  .linecard__cover .plate__ink img { filter: none; }
}
/* ── Cinta de financiadores ───────────────────────────────────────────────
   Se desplaza sola, sin JavaScript. El carril lleva la lista de logos DOS
   VECES —la segunda con aria-hidden, para que un lector de pantalla no la
   repita— y se anima hasta que la copia queda justo donde empezaba el
   original: al reiniciarse el fotograma es idéntico y el salto no se ve.

   El desplazamiento NO es -50%, y es el error fácil de cometer aquí. El
   carril mide (fila + hueco + fila), así que su mitad cae medio hueco por
   delante de donde empieza la segunda fila y la cinta da un tirón en cada
   vuelta. De ahí el `calc(-50% - var(--fin-gap) / 2)`: recupera ese medio
   hueco. Si cambias --fin-gap no hay que tocar nada más; si cambias el
   número de logos, cámbialo EN LAS DOS FILAS.

   La animación se detiene al pasar el ratón o al tabular dentro, y con
   `prefers-reduced-motion` no arranca: la cinta se convierte en una fila
   centrada que se pliega, y la copia se esconde. */
.funders {
  --fin-gap: 76px;
  padding: 80px 0 8px;
}
.funders__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 34px;
}
.funders__viewport {
  overflow: hidden;
  /* Desvanece los dos extremos para que los logos no aparezcan cortados
     contra el borde de la caja tipográfica. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
/* La duración va con el número de logos, no es un número redondo cualquiera:
   el carril recorre su propia longitud, así que si se añade uno y no se sube
   el tiempo, la cinta pasa a correr más deprisa. Van ~9 s por logo. */
.funders__track {
  display: flex; width: max-content; gap: var(--fin-gap);
  animation: funders-roll 64s linear infinite;
}
.funders__viewport:hover .funders__track,
.funders__track:focus-within { animation-play-state: paused; }
.funders__row { display: flex; align-items: center; gap: var(--fin-gap); }
/* Caja de tamaño fijo con `object-fit: contain`, y no una altura común: aquí
   conviven escudos municipales cuadrados con logotipos apaisados —el del SGR
   mide 4500×2097—. Igualando sólo la altura, el escudo queda diminuto y el
   logotipo apaisado se come la cinta. Con la caja, cada uno se ajusta dentro y
   todos ocupan ópticamente lo mismo. */
.funders__item {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 176px; height: 78px;
}
.funders__item img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
.funders__note {
  font-family: var(--narrow); font-size: 13px; color: var(--ink-4);
  letter-spacing: 0.04em; margin-top: 30px;
}

@keyframes funders-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--fin-gap) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .funders__track {
    animation: none; width: auto;
    flex-wrap: wrap; justify-content: center; row-gap: 40px;
  }
  .funders__row--dup { display: none; }
  .funders__row { flex-wrap: wrap; justify-content: center; row-gap: 40px; }
  .funders__viewport { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 700px) {
  .funders { --fin-gap: 44px; padding-top: 64px; }
  .funders__item { width: 132px; height: 62px; }
}

/* ── Banda verde de cooperación ─────────────────────────────────────────── */
.cta {
  margin-top: 96px;
  background: var(--green); color: var(--paper);
  position: relative; overflow: hidden;
}
.cta a:not(.btn) { color: var(--paper); }
.cta__inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
  align-items: center; padding-block: 64px;
}
.cta__title {
  margin: 0; font-size: clamp(2rem, 4.4vw, 52px); line-height: 1.04;
  letter-spacing: -0.025em; font-weight: 600; text-wrap: pretty;
}
.cta__lead {
  margin: 0; font-size: clamp(1.05rem, 1.6vw, 18px); line-height: 1.6;
  max-width: 58ch; color: rgba(243, 242, 242, 0.92); text-wrap: pretty;
}
.cta__kicker { color: var(--green-paler); }
.cta__contact { display: flex; flex-direction: column; gap: 16px; font-family: var(--narrow); }
.cta__label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-paler);
}
.cta__value { font-size: 24px; font-weight: 700; }
.cta__value--sm { font-size: 20px; font-weight: 700; }
.cta__value--addr { font-size: 18px; line-height: 1.4; font-weight: 400; }
.cta__mark {
  position: absolute; right: -30px; bottom: -40px;
  width: 260px; height: 286px; opacity: 0.1;
  background-image: url(../brand/isotipo-fa.svg);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  mix-blend-mode: screen; pointer-events: none;
}

/* ── Formulario ─────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.input {
  font-family: var(--serif); font-size: 16px;
  padding: 11px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  width: 100%;
}
.input:hover { border-color: rgba(26, 26, 26, 0.45); }
.input:focus-visible { border-color: var(--green); outline-offset: 0; }
textarea.input { resize: vertical; min-height: 120px; }

/* Grupo de intereses — botones de radio con apariencia de fichas. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin: 0; padding: 0; }
.chips__legend {
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); width: 100%; margin-bottom: 8px; padding: 0; float: left;
}
.chip {
  font-family: var(--narrow); font-size: 14px; letter-spacing: 0.04em;
  padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid rgba(26, 26, 26, 0.25);
  background: transparent; cursor: pointer; color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover { background: var(--green-pale); }
.chip[aria-checked="true"] {
  background: var(--green); color: var(--paper); border-color: var(--green);
}

.form__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form__note {
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4);
}
.form__note--ok { color: var(--green); }

/* Bloques de datos de contacto. */
.contact-block { display: flex; flex-direction: column; gap: 6px; }
.contact-block__title {
  font-family: var(--narrow); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green);
}
.contact-block__value { font-size: 19px; line-height: 1.5; }
.contact-block__value a { color: var(--ink); text-decoration: none; }
.contact-block__value a:hover { color: var(--green); text-decoration: underline; }

.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a {
  font-family: var(--narrow); font-size: 14px; letter-spacing: 0.04em;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid rgba(26, 26, 26, 0.25);
  text-decoration: none; color: var(--ink);
  transition: background-color 0.15s ease;
}
.social a:hover { background: var(--green-pale); color: var(--ink); }

/* ── Banda tintada ──────────────────────────────────────────────────────── */
.tint { background: var(--green-pale); margin-top: 80px; }
.tint__inner { padding-block: 64px; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.footer { background: var(--ink); color: var(--paper); }
.footer__inner {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px;
  padding-block: 56px 30px;
}
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { height: 52px; width: auto; }
.footer__wordmark {
  font-family: var(--brand); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em; line-height: 1;
}
.footer__tagline {
  font-family: var(--narrow); font-size: 13px; line-height: 1.5;
  color: rgba(243, 242, 242, 0.72); max-width: 34ch;
}
.footer__col {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--narrow); font-size: 14px; line-height: 1.6;
}
.footer__head {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-mid); margin-bottom: 4px;
}
.footer__col a { color: rgba(243, 242, 242, 0.85); text-decoration: none; }
.footer__col a:hover { color: var(--paper); text-decoration: underline; }
.footer__col span { color: rgba(243, 242, 242, 0.85); }
.footer__col a[href^="mailto"], .footer__col a[target] { color: var(--green-paler); }

.footer__legal {
  border-top: 1px solid rgba(243, 242, 242, 0.18);
  padding-top: 16px; margin-top: 0;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--narrow);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(243, 242, 242, 0.6);
}
.footer__legal-wrap { padding-bottom: 34px; }

/* ── Mapa ───────────────────────────────────────────────────────────────── */
.map-note { margin-top: 10px; }
.leaflet-container { font-family: var(--serif); }

/* El mapa es un contexto de apilamiento propio: sin esto, los z-index
   internos de las teselas de Leaflet (200–700) se escapan por encima del
   header sticky (z-index 40) al hacer scroll. */
amazona-map { display: block; width: 100%; position: relative; z-index: 0; }

.amap {
  display: grid; grid-template-columns: 1fr 300px;
  min-height: 520px;
  background: var(--green-pale);
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
}
.amap__canvas { min-height: 520px; background: var(--green-pale); }
/* Las teselas se escurren hacia el verde de la marca para que el mapa no
   rompa la estética impresa del resto de la página. */
.amap__canvas .leaflet-tile-pane {
  filter: grayscale(0.55) sepia(0.18) hue-rotate(58deg) saturate(1.25) contrast(1.02) brightness(1.02);
}
.amap__list {
  border-left: 1px solid rgba(26, 26, 26, 0.18);
  background: var(--paper);
  overflow: auto; max-height: 520px;
}
.amap__head { padding: 16px 18px 12px; border-bottom: 2px solid var(--ink); }
.amap__head-title {
  font-family: var(--narrow); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green);
}
.amap__head-sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

.amap__item {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--rule-faint);
  padding: 11px 18px; cursor: pointer;
  font-family: var(--serif); font-size: 15px; color: var(--ink);
}
.amap__item:hover { background: var(--green-pale); }
.amap__idx {
  font-family: var(--narrow); font-size: 11px; letter-spacing: 0.08em;
  color: #9B9797; min-width: 20px;
}
.amap__idx--sede { color: var(--green); }
.amap__badge {
  font-family: var(--narrow); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green); margin-left: 8px;
}
/* Velo de activación del mapa en pantallas táctiles: lo pone map.js sólo si el
   puntero es grueso. Va por encima de los paneles y los controles de Leaflet
   (que llegan a z-index 1000) para que el primer toque lo consuma él. */
.amap__velo {
  position: absolute; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(26, 26, 26, 0.28);
  -webkit-tap-highlight-color: transparent;
}
.amap__velo-txt {
  font-family: var(--narrow); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green);
  background: var(--paper);
  padding: 10px 16px;
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.18);
}
.amap__velo:focus-visible { outline: 3px solid var(--green-mid); outline-offset: -3px; }

.amap__pop-name { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }
.amap__pop-note {
  font-family: var(--narrow); font-size: 12px; letter-spacing: 0.04em;
  color: var(--green); margin-top: 2px;
}

@media (max-width: 820px) {
  .amap { grid-template-columns: 1fr; min-height: 0; }
  .amap__canvas { min-height: 380px; }
  /* El listado deja de tener scroll propio: apilado bajo el mapa, una caja de
     300 px con scroll interno dentro de una página que ya scrollea es la misma
     trampa que el arrastre del mapa — el dedo mueve la lista en vez de la
     página. Con los 16 municipios a la vista la sección es más larga, pero se
     recorre con el gesto que el visitante ya está haciendo. */
  .amap__list {
    border-left: 0; border-top: 1px solid rgba(26, 26, 26, 0.18);
    max-height: none; overflow: visible;
  }
  .amap__item { padding-block: 14px; }   /* objetivo táctil de ~48 px */
}

/* ══ Adaptación a pantallas pequeñas ═════════════════════════════════════ */
@media (max-width: 1080px) {
  .grid-aside { grid-template-columns: 1fr; gap: 32px; }
  .cta__inner { grid-template-columns: 1fr; gap: 36px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }

  /* La cabecera en móvil se queda en DOS filas: la barra negra con el idioma y
     la fila del logotipo con el botón de menú a la derecha. Antes eran tres, y
     la tercera existía sólo para sostener ese botón. */
  .masthead {
    flex-wrap: wrap; justify-content: space-between; row-gap: 14px;
    border-bottom: 2px solid var(--ink); padding-bottom: 12px;
  }
  .masthead__meta { display: none; }
  .masthead__cta { width: auto; }
  /* «Alianzas y cooperación» aparece otra vez en la portada, tres dedos más
     abajo. En la cabecera se comía una fila entera sin añadir nada. */
  .masthead__cta .btn { display: none; }
  .masthead__logo img { height: 42px; }
  .masthead__logo { gap: 10px; }
  .masthead__wordmark { font-size: 21px; }
  .masthead__sub { display: none; }

  /* El correo no cabe en la barra negra sin partirse, y ya está en la portada,
     en el pie y en la pantalla de contacto. Arriba sólo queda el idioma. */
  .topbar__mail, .topbar__sep { display: none; }

  .navtoggle { display: inline-flex; }
  /* Sin el botón dentro, <nav> cerrado sería una franja vacía de 3 px: los
     filetes pasan al borde inferior de .masthead. */
  .mainnav { border-top: 0; border-bottom: 0; }
  .mainnav__inner {
    display: none;
    flex-direction: column; align-items: flex-start;
    gap: 0; padding-block: 4px 12px;
  }
  .mainnav__inner.is-open { display: flex; }
  .mainnav a {
    width: 100%; padding-block: 12px;
    border-bottom: 1px solid var(--rule-faint);
    font-size: 16px;
  }

  .hero { grid-template-columns: 1fr; gap: 26px; }
  .hero__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 20px; }

  .grid-2, .grid-2-t, .grid-split { grid-template-columns: 1fr; gap: 34px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .stats { grid-template-columns: 1fr; }
  .stat + .stat {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule-soft);
  }
  .stat { padding-block: 18px; }

  .cta { margin-top: 64px; }
  .cta__mark { display: none; }
}

@media (max-width: 620px) {
  /* Se queda en fila: apilar la barra sólo tenía sentido cuando llevaba el
     correo. Con el idioma solo, la fila ahorra una línea de alto. */
  .topbar__inner { align-items: center; gap: 12px; font-size: 11px; }
  .langs { flex: none; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; gap: 8px; }
  .acc__head { font-size: 1.15rem; gap: 12px; }
  .acc__num { display: block; margin-bottom: 4px; }
}

/* Teléfonos estrechos. El logotipo se queda a la izquierda y el botón de menú
   a la derecha, en la misma línea: son las dos únicas cosas que hay. */
@media (max-width: 440px) {
  .masthead { justify-content: space-between; row-gap: 10px; }
  .masthead__cta { width: auto; justify-content: flex-end; }
  .masthead__wordmark { font-size: 18px; }
  .btn-row .btn { flex: 1 1 100%; text-align: center; }
  .plate__caption { font-size: 10px; padding: 6px 10px; }
}

/* ══ Objetivos táctiles ══════════════════════════════════════════════════
   Se consulta el puntero, no el ancho: una tableta ancha también se toca con
   el dedo. Sólo crece el área sensible —con margen negativo donde haría falta
   para no mover la retícula—, no la tipografía: la identidad no cambia.
   El caso grave era el conmutador de idioma, que con `padding: 0` ofrecía un
   blanco de unos 20 x 14 px. */
@media (pointer: coarse) {
  .lang { padding: 10px 8px; margin-block: -10px; }
  .chip { padding: 12px 18px; }
  .navtoggle { padding: 12px 16px; }
  .btn--sm { padding: 13px 18px; }
  .social a, .footer__col a { padding-block: 4px; }
}

/* ── Impresión ──────────────────────────────────────────────────────────── */
@media print {
  .header, .navtoggle, .cta, .form, .skip { display: none !important; }
  .screen[hidden] { display: block !important; }
  body { font-size: 11pt; }
  .plate__ink { filter: none; }
}