/* ==========================================================================
   davidbermejo.es · hoja de estilos única
   Dirección visual "Intervalo", variante A2 (Fraunces de titular y de cuerpo,
   IBM Plex Mono solo para cifras). Es la variante elegida el 6 de agosto de
   2026 en pruebas-diseno/a2-intervalo-fraunces.html, y esta hoja la extiende
   a las once páginas del sitio.

   Sin dependencias, sin build y sin peticiones externas.

   La regla que gobierna todo: se separa con filetes de 1 px, no con cajas.
   No hay fondos de tarjeta, ni esquinas redondeadas, ni sombras. Lo único
   que rompe esa regla a propósito son tres cosas: el hueco del vídeo, el
   bloque de captación de correo y los marcadores amarillos de pendiente.

   Y el reparto tipográfico: la mono significa "cantidad medida". Se usa en
   cifras y en etiquetas de dato, en ningún otro sitio. Antetítulos, notas al
   pie y títulos del pie son prosa y van en Fraunces.

   Índice
   01 · Variables y contrastes verificados
   02 · Base, retículo y accesibilidad
   03 · Tipografía
   04 · Enlaces, filetes y botones
   05 · Cabecera y menú móvil
   06 · Hero, cabecera de página y secciones con marginalia
   07 · Figura de la afirmación medida (el gráfico de las 18 marcas)
   08 · Franja de credenciales
   09 · Prosa larga
   10 · Rejillas: puertas, celdas y fichas de datos
   11 · Publicaciones
   12 · Citas, cifras y vídeo
   13 · Formularios y captación de correo
   14 · Marcadores de pendiente
   15 · Retrato
   16 · Pie de página
   17 · Utilidades y ajustes de móvil estrecho
   ========================================================================== */


/* 01 · Variables y contrastes verificados ---------------------------------- */

:root{
  /* Paleta Intervalo. Ratios calculados el 6 de agosto de 2026 sobre --ground. */
  --ground:#F7F8F7;
  --ink:#12151A;              /* 17,18:1 */
  --muted:#5C6672;            /*  5,48:1 · también el borde de los campos */
  --medido:#22398F;           /*  9,62:1 · solo valores medidos y enlaces */
  --limite:#A33B2A;           /*  6,13:1 · solo límites, fallos y cautelas */
  --rule:#DCE0DE;             /*  1,25:1 · SOLO separadores decorativos */
  --ink-lead:#252A31;         /* 13,56:1 · entradilla */
  --ink-quote:#1B1F26;        /* 15,52:1 · citas */
  --obs:rgba(34,57,143,.62);  /*  3,52:1 · observaciones individuales */
  --axis:rgba(18,21,26,.5);   /*  3,43:1 · eje del gráfico */
  --limite-rule:rgba(163,59,42,.72);   /* 3,52:1 */

  /* Marcadores de pendiente. Son andamio: tienen que cantar. */
  --warn-bg:#FBF0D5;
  --warn-ink:#4A3608;         /* 10,17:1 sobre el marcador */
  --warn-edge:#7A5A06;        /*  5,63:1 sobre el marcador y 5,99:1 sobre papel */

  --display:'Fraunces VF',Georgia,'Times New Roman',serif;
  --text:'Fraunces VF',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:184px;   /* gutter de marginalia: donde vive el antetítulo */
  --gap:44px;
  --col:660px;   /* ~73 caracteres con Fraunces de cuerpo */
}


/* 02 · Base, retículo y accesibilidad ------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  /* cuerpo: corte óptico de texto. opsz bajo, WONK a 0. */
  font-variation-settings:'opsz' 11,'SOFT' 28,'WONK' 0;
  font-size:clamp(17.2px,0.98vw + 14.4px,19px);
  line-height:1.7;
  font-kerning:normal;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

/* OJO: aquí va padding-inline, no el atajo `padding`. Las secciones llevan a
   la vez .sec y .wrap, y el atajo les borraría el padding vertical desde la
   media query del final del fichero, que gana por orden. Pasó, y en móvil
   estrecho las secciones se quedaron pegadas unas a otras. */
.wrap{
  width:100%;
  max-width:calc(var(--col) + 48px);
  margin:0 auto;
  padding-inline:24px;
}
@media (min-width:1120px){
  .wrap{max-width:calc(var(--gut) + var(--gap) + var(--col) + 48px)}
}

/* Medida de lectura para bloques que no van dentro de .sec__body */
.measure{max-width:var(--col)}

:focus-visible{
  outline:2px solid var(--medido);
  outline-offset:3px;
  border-radius:1px;
}


/* 03 · Tipografía --------------------------------------------------------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  margin:0;
  letter-spacing:-.017em;
  text-wrap:balance;
}
h1{
  font-size:clamp(2.3rem,5.9vw,3.95rem);
  line-height:1.035;
  font-variation-settings:'opsz' 144,'SOFT' 8,'WONK' 1;
  letter-spacing:-.026em;
}
h1 em{font-style:italic;font-variation-settings:'opsz' 144,'SOFT' 14,'WONK' 1}
h2{
  font-size:clamp(1.6rem,3.3vw,2.28rem);
  line-height:1.125;
  font-variation-settings:'opsz' 90,'SOFT' 10,'WONK' 1;
}
h3{
  font-size:clamp(1.12rem,1.7vw,1.32rem);
  line-height:1.28;
  font-variation-settings:'opsz' 42,'SOFT' 14,'WONK' 1;
  letter-spacing:-.008em;
}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

em{font-style:italic}
strong{font-weight:600}

/* Mono: solo cifras y etiquetas de dato. Alinea y significa "medido". */
.ord,.m,.axis span,.stat__k,.creds__v,.metric__num,.metric__den,.stat__v,
.pub__doi,.navtoggle,code,.pending .k{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  font-variation-settings:normal;
}

/* Antetítulos de sección: son prosa de navegación, no datos. La mono
   significa "cantidad medida" y aquí no hay ninguna. */
.eyebrow{
  font-family:var(--text);
  font-size:.6875rem;
  line-height:1.5;
  letter-spacing:.09em;
  font-weight:600;
  font-variation-settings:'opsz' 12,'SOFT' 0,'WONK' 0;
  color:var(--muted);
  margin:0;
  text-transform:uppercase;
}

/* Nota al pie: fuentes, atribuciones y glosas. Es prosa, no es un dato,
   así que va en la fuente de cuerpo, en caja normal y en gris. */
.src,.metric__cap,.creds__k,.video__label{
  font-family:var(--text);
  font-size:.855rem;
  line-height:1.5;
  letter-spacing:0;
  font-weight:400;
  color:var(--muted);
  margin:0;
}
.src{margin-top:1.05em;max-width:530px}

/* Etiqueta de dato: va en mono porque rotula una cifra. */
.stat__k{
  font-size:.6875rem;line-height:1.5;letter-spacing:.075em;
  font-weight:400;color:var(--muted);margin:0;
  text-transform:uppercase;
}

/* Medida / límite */
.m{                                        /* cifra medida */
  font-size:.9em;
  font-weight:500;
  color:var(--medido);
  letter-spacing:-.01em;
}
.q{color:var(--medido);font-weight:600}    /* cantidad expresada en palabras */
.lim{color:var(--limite);font-weight:600}  /* dónde falla */

code{
  font-size:.86em;
  background:rgba(18,21,26,.055);
  padding:1px 5px;
  color:var(--ink);
}

/* Salto retórico: se activa cuando la segunda frase cabe en una línea */
.brk{display:none}
@media (min-width:600px){.brk{display:inline}}


/* 04 · Enlaces, filetes y botones ----------------------------------------- */

a{color:var(--medido)}

.link,.prose a,.facts a,.note a,.measure a:not(.btn):not(.linkrow a){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(34,57,143,.42);
}
.link:hover,.prose a:hover,.facts a:hover,.note a:hover{text-decoration-color:var(--medido)}

/* Filete: una hairline de 1 px, sin marcas de escala. La caja conserva su
   altura para no alterar el ritmo vertical: el filete se dibuja arriba y el
   resto es aire. */
.rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:0;width:100%;height:11px;
}
.rule--limite{border-top-color:var(--limite-rule)}
.rule--short{height:7px}

.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{
  font-family:var(--text);
  font-variation-settings:'opsz' 12,'SOFT' 26,'WONK' 0;
  font-size:.95rem;font-weight:600;letter-spacing:-.004em;
  line-height:1.3;
  text-decoration:none;
  display:inline-block;
  padding:14px 22px;
  border:1px solid var(--ink);
  cursor:pointer;
  text-align:center;
}
.btn--solid{background:var(--ink);color:var(--ground)}
.btn--solid:hover{background:#000}
.btn--line{background:none;color:var(--ink)}
.btn--line:hover{background:rgba(18,21,26,.05)}
.btn--min{padding:9px 15px;font-size:.875rem}
.note{color:var(--muted);font-size:.9rem}


/* 05 · Cabecera y menú móvil ---------------------------------------------- */

.top{padding-block:26px 22px}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  font-variation-settings:'opsz' 30,'SOFT' 6,'WONK' 1;
  letter-spacing:-.012em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.brand:hover{color:var(--medido)}

#menu{display:none}
#menu.is-open{display:block}
/* Sin JavaScript la navegación se queda visible y apilada, nunca desaparece. */
html:not(.js) #menu{display:block}
html:not(.js) .navtoggle{display:none}

.nav{list-style:none;margin:0;padding:0}
.nav a{
  color:var(--ink);
  text-decoration:none;
  font-variation-settings:'opsz' 12,'SOFT' 26,'WONK' 0;
  font-size:.925rem;
  font-weight:600;
  letter-spacing:-.004em;
}
.nav a:hover{color:var(--medido)}
.nav a[aria-current='page']{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.28em;
  text-decoration-color:var(--medido);
}
.nav .sep{color:var(--rule);user-select:none}

.navtoggle{
  font-size:.6875rem;letter-spacing:.09em;
  background:none;border:1px solid var(--muted);color:var(--ink);
  padding:11px 13px;cursor:pointer;
  min-height:44px;
}
.navtoggle:hover{border-color:var(--ink)}

@media (max-width:899px){
  #menu{width:100%;order:3}
  #menu.is-open,html:not(.js) #menu{padding-top:20px}
  .nav{display:flex;flex-direction:column;gap:0}
  .nav li{border-top:1px solid var(--rule)}
  .nav li a{display:block;padding:13px 0;font-size:1.02rem}
  .nav .sep{display:none}
  .nav li:last-child{border-bottom:1px solid var(--rule)}
  .top__in{flex-wrap:wrap}
  #menu .cta-min{display:inline-block;margin-top:20px}
}
@media (min-width:900px){
  #menu{display:flex!important;align-items:center;gap:26px}
  .navtoggle{display:none}
  .nav{display:flex;align-items:center;gap:9px}
}


/* 06 · Hero, cabecera de página y secciones con marginalia ---------------- */

.hero{padding-block:clamp(30px,4.4vw,58px) clamp(46px,5vw,66px)}
.hero .eyebrow{margin-bottom:clamp(20px,2.4vw,30px)}
.lead{
  font-variation-settings:'opsz' 20,'SOFT' 26,'WONK' 0;
  font-size:1.115em;
  line-height:1.55;
  color:var(--ink-lead);
  margin:clamp(26px,3vw,34px) 0 clamp(28px,3.2vw,38px);
}
.lead:last-child{margin-bottom:0}

/* Cabecera de las páginas interiores: el mismo hero sin figura. */
.pagehead{padding-block:clamp(30px,4.4vw,58px) clamp(34px,4vw,50px)}
.pagehead .eyebrow{margin-bottom:clamp(20px,2.4vw,30px)}
.pagehead h1{font-size:clamp(2.05rem,4.9vw,3.3rem)}

.sec{padding-block:clamp(52px,6.4vw,86px)}
.sec--tight{padding-block:clamp(38px,4.4vw,56px)}
.sec__body{max-width:var(--col)}
.sec .eyebrow{margin-bottom:16px}
.sec h2{margin-bottom:clamp(20px,2.3vw,28px)}
.sec--limite .eyebrow{color:var(--limite)}

@media (min-width:1120px){
  .sec,.hero,.pagehead{
    display:grid;grid-template-columns:var(--gut) minmax(0,1fr);column-gap:var(--gap);
  }
  .sec>.eyebrow,.hero>.eyebrow,.pagehead>.eyebrow{
    grid-column:1;text-align:right;margin:0;padding-top:.72em;
  }
  .sec__body{grid-column:2}
  .hero>.eyebrow,.pagehead>.eyebrow{padding-top:1.15em}
}


/* 07 · Figura de la afirmación medida ------------------------------------- */

.metric{margin:clamp(28px,3.4vw,40px) 0 0}
.metric__body{
  display:flex;align-items:flex-end;gap:clamp(20px,3.4vw,38px);
  padding:20px 0 14px;
}
.metric__value{display:flex;align-items:baseline;gap:.42em;flex:0 0 auto}
.metric__num{
  font-weight:500;
  font-size:clamp(2.5rem,7.2vw,3.35rem);
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--medido);
}
.metric__den{font-size:.95rem;font-weight:400;color:var(--muted);letter-spacing:.02em}
.metric__plot{flex:1 1 auto;min-width:0}
.rug{display:block;width:100%;height:auto}
.axis{position:relative;height:1.2em;margin-top:2px}
.axis span{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:.625rem;color:var(--muted);letter-spacing:.02em;
}
.metric__cap{border-top:1px solid var(--rule);padding-top:10px;max-width:560px}

.mark{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .mark{opacity:0;animation:appear .3s ease-out forwards}
  .meanline{opacity:0;animation:appear .45s ease-out .43s forwards}
}
@keyframes appear{from{opacity:0}to{opacity:1}}

@media (max-width:600px){
  .metric__body{flex-direction:column;align-items:stretch;gap:16px}
  .metric__plot{width:100%}
}


/* 08 · Franja de credenciales -------------------------------------------- */

.creds{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.creds li{
  padding:22px 18px 24px;
  border-left:1px solid var(--rule);
  display:flex;flex-direction:column;gap:10px;
}
.creds li:first-child{border-left:0;padding-left:0}
.creds__v{
  font-weight:500;font-size:1.02rem;letter-spacing:-.022em;
  color:var(--ink);
}
.creds__v a{
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:rgba(34,57,143,.42);
}
.creds__v a:hover{color:var(--medido);text-decoration-color:var(--medido)}
.creds__k{max-width:29ch}

@media (max-width:900px){
  .creds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creds li:nth-child(odd){border-left:0;padding-left:0}
  .creds li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:540px){
  .creds{grid-template-columns:1fr}
  .creds li{border-left:0;padding:16px 0 17px;border-top:1px solid var(--rule)}
  .creds li:first-child{border-top:0;padding-top:20px}
  .creds__k{max-width:none}
}


/* 09 · Prosa larga ------------------------------------------------------- */

.prose{max-width:var(--col)}
.prose h2{
  font-size:clamp(1.42rem,2.6vw,1.78rem);
  margin:clamp(38px,3.6vw,52px) 0 .6em;
}
.prose h2:first-child{margin-top:0}
.prose h3{margin:clamp(26px,2.4vw,34px) 0 .5em}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.35em}
.prose li{margin-bottom:.42em}
.prose li:last-child{margin-bottom:0}
.prose li::marker{color:var(--muted)}
.prose .facts{margin:1.4em 0 1.6em}

/* Aviso dentro de la prosa: se marca con un filete a la izquierda, no con
   una caja de color. */
.note--block{
  border-left:2px solid var(--limite-rule);
  padding:2px 0 2px 18px;
  margin:1.6em 0;
  font-size:.96em;
  color:var(--ink-lead);
}


/* 10 · Rejillas: puertas, celdas y fichas de datos ----------------------- */

/* Las dos puertas: filas separadas por filete. */
.ways{margin-top:6px}
.way{border-top:1px solid var(--rule);padding:24px 0 26px}
.way:last-child{padding-bottom:0}

/* La bifurcación de la home. Dos puertas apiladas se leen como una lista de
   dos cosas; una al lado de la otra se leen como una elección, que es lo que
   son. Solo a partir de 1120 px, que es donde el bloque puede salirse de la
   columna de lectura y ocupar el ancho completo, igual que la franja de
   credenciales: con 888 px quedan dos columnas de 400, unos 46 caracteres.
   Por debajo se apilan, porque en 660 px dos columnas dejan una medida
   ilegible. */
@media (min-width:1120px){
  .ways--fork{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:0;
    border-top:1px solid var(--rule);
    margin-top:clamp(28px,3vw,38px);
  }
  .ways--fork .way{border-top:0;padding:26px 0 0}
  .ways--fork .way:first-child{padding-right:44px}
  .ways--fork .way:last-child{border-left:1px solid var(--rule);padding-left:44px}
}
.ways--fork .btns{margin-top:clamp(16px,1.8vw,22px)}

/* Enlace secundario junto a un botón: necesita algo más de aire que los
   12 px de separación entre botones. */
.btns .link{margin-left:6px}
.way h3{margin-bottom:.55em}
/* Ordinal en mono. Dentro de un h3 va reducido; dentro de un antetítulo, que
   ya está a 11 px, se queda al mismo cuerpo o no se lee. */
.ord{color:var(--muted);font-size:.66em;font-weight:400;letter-spacing:.04em}
.eyebrow .ord{font-size:1em;letter-spacing:.06em}
.way p{margin-bottom:.9em}
.way p:last-child{margin-bottom:0}

/* Celdas: filas separadas por filete, no columnas.
   En columnas no caben: tres celdas dentro de una medida de 660 px dejan
   líneas de veinte caracteres, que es ilegible. Las únicas rejillas de varias
   columnas del sitio son las que llevan texto cortísimo, la franja de
   credenciales y las tablas de cifras. */
.tiles{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rule);
}
.tiles li{
  border-bottom:1px solid var(--rule);
  padding:19px 0 21px;
  display:flex;flex-direction:column;gap:9px;
}
.tiles h3{margin:0}
.tiles p{margin:0}
.tiles .eyebrow{margin:0}

/* Fichas de datos. Nunca una <table>: en móvil se apila y así no hay
   desplazamiento horizontal en ninguna anchura. */
.facts{margin:0;padding:0;border-top:1px solid var(--rule)}
.facts .row{
  border-bottom:1px solid var(--rule);
  padding:16px 0 17px;
  display:grid;gap:4px 28px;
}
.facts dt{
  font-family:var(--text);
  font-weight:600;
  font-size:.83rem;
  line-height:1.45;
  letter-spacing:.055em;
  text-transform:uppercase;
  font-variation-settings:'opsz' 12,'SOFT' 0,'WONK' 0;
  color:var(--muted);
}
.facts dd{margin:0}
.facts dd .src{display:block;margin-top:.3em}
@media (min-width:720px){
  .facts .row{grid-template-columns:210px minmax(0,1fr)}
  .facts dt{padding-top:.28em}
}

.linkrow{
  display:flex;flex-wrap:wrap;gap:4px 26px;
  margin-top:clamp(24px,2.6vw,32px);
}
.linkrow a{
  font-size:.925rem;font-weight:600;
  font-variation-settings:'opsz' 12,'SOFT' 26,'WONK' 0;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:rgba(34,57,143,.42);
  padding:11px 0;min-height:44px;display:inline-flex;align-items:center;
}
.linkrow a:hover{text-decoration-color:var(--medido)}


/* 11 · Publicaciones ----------------------------------------------------- */

.pubs{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.pub{border-bottom:1px solid var(--rule);padding:20px 0 21px}
.pub__t{
  font-family:var(--display);
  font-weight:600;
  font-size:1.06em;
  line-height:1.34;
  letter-spacing:-.008em;
  font-variation-settings:'opsz' 30,'SOFT' 16,'WONK' 0;
  margin:0 0 .35em;
  text-wrap:pretty;
}
.pub__where{font-size:.94em;color:var(--muted);margin:0 0 .5em}
.pub__meta{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline}
.pub__role{
  font-family:var(--text);font-size:.8rem;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;color:var(--muted);
  font-variation-settings:'opsz' 12,'SOFT' 0,'WONK' 0;
}
.pub__doi{font-size:.78rem;letter-spacing:-.01em}
.pub__doi a{
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:rgba(34,57,143,.42);
}
.pub__doi a:hover{text-decoration-color:var(--medido)}


/* 12 · Citas, cifras y vídeo -------------------------------------------- */

/* Citas. Se identifican por tres señales a la vez, porque solo con las
   comillas tipográficas se leían como una frase suelta más:
     1. el bloque entero va sangrado y con un filete vertical a la izquierda,
     2. la comilla de apertura CUELGA fuera de la caja de texto (sangría
        negativa), que es el gesto tipográfico clásico de "esto es una cita",
     3. la letra es de display y de otro color que el cuerpo.
   El filete usa --rule, que es justo el token de separadores decorativos, así
   que no se toca la semántica de color del sistema. */
.quotes{
  margin:0 0 clamp(30px,3.4vw,40px);
  padding-left:clamp(16px,1.8vw,24px);
  border-left:2px solid var(--rule);
}
.quote{
  margin:0;
  border-top:1px solid var(--rule);
  padding:20px 0 21px;
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:'opsz' 36,'SOFT' 20,'WONK' 0;
  font-size:1.12em;
  line-height:1.42;
  letter-spacing:-.008em;
  color:var(--ink-quote);
  text-wrap:pretty;
  text-indent:-.44em;   /* la comilla de apertura queda fuera del bloque */
}
.quote p{margin:0}
.quote:first-child{border-top:0;padding-top:2px}
.quote:last-child{border-bottom:0;padding-bottom:2px}

/* Las citas ya no cierran con filete propio (ahora el bloque se marca con el
   filete vertical de la izquierda), así que cuando les sigue una tabla de
   cifras hace falta separación y que la tabla recupere su filete superior. */
.quotes + .stats{margin-top:clamp(26px,2.8vw,34px)}

.stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats li{
  padding:20px 18px 21px;
  border-left:1px solid var(--rule);
  display:flex;flex-direction:column;gap:9px;
}
.stats li:first-child{border-left:0;padding-left:0}
.stat__v{
  font-weight:500;font-size:1.42rem;letter-spacing:-.035em;
  color:var(--medido);line-height:1;
}
@media (max-width:540px){
  .stats,.stats--2{grid-template-columns:1fr}
  .stats li{border-left:0;border-top:1px solid var(--rule);padding:15px 0 16px}
  .stats li:first-child{border-top:0;padding-top:19px}
}

/* Hueco del vídeo. Es una caja porque representa un rectángulo que todavía
   no existe. */
.video{margin:0 0 clamp(24px,2.6vw,32px)}
.video__frame{
  aspect-ratio:16/9;
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  background-image:repeating-linear-gradient(135deg,rgba(18,21,26,.055) 0 1px,transparent 1px 9px);
}
.video__label{
  line-height:1.6;
  text-align:center;max-width:300px;
  background:var(--ground);padding:8px 13px;
}


/* 13 · Formularios y captación de correo -------------------------------- */

/* Ningún control usa --rule (1,25:1). El borde va en --muted, 5,48:1 sobre
   papel, muy por encima del 3:1 que exige la norma para componentes. */
.form{max-width:var(--col);margin:0}
.field{margin-bottom:22px}
.form .field:last-of-type{margin-bottom:26px}

label{
  display:block;
  font-weight:600;
  font-size:.925rem;
  line-height:1.45;
  font-variation-settings:'opsz' 12,'SOFT' 26,'WONK' 0;
  margin-bottom:8px;
}
.opt{font-weight:400;color:var(--muted)}
.help{
  display:block;font-weight:400;font-size:.855rem;line-height:1.5;
  color:var(--muted);margin-top:3px;
}

input[type=text],input[type=email],select,textarea{
  width:100%;
  font-family:var(--text);
  font-variation-settings:'opsz' 14,'SOFT' 26,'WONK' 0;
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  background:#FFFFFF;
  border:1px solid var(--muted);
  border-radius:0;
  padding:12px 14px;
  min-height:48px;
  -webkit-appearance:none;appearance:none;
}
select{
  padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
textarea{min-height:150px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--medido);outline-offset:1px;border-color:var(--ink);
}

/* Error: siempre en texto, nunca solo en color. */
.err{
  display:block;color:var(--limite);font-weight:600;
  font-size:.9rem;margin-top:6px;
}
.field--err input,.field--err select,.field--err textarea{border-color:var(--limite)}

.form-foot{
  border-top:1px solid var(--rule);
  padding-top:22px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.form-foot p{margin:0;font-size:.9rem;color:var(--muted)}
.form-foot [role=status]:empty{display:none}
.form-foot [role=status]{color:var(--ink);font-weight:600}

/* Captación de correo: enmarcada con hairline, sin relleno de color. */
.capture{
  border:1px solid var(--rule);
  padding:clamp(24px,3vw,34px);
  max-width:var(--col);
}
.capture .eyebrow{margin-bottom:14px}
.capture h2{font-size:clamp(1.36rem,2.4vw,1.72rem);margin-bottom:.55em}
/* En columna, no en fila: con una casilla de consentimiento de por medio, el
   orden de lectura tiene que ser campo, casilla, botón. La acción va última. */
.capture-form{margin:clamp(20px,2.4vw,26px) 0 12px}
.capture-form .field{margin:0 0 clamp(14px,1.6vw,18px);max-width:420px}
.capture-form .btn{display:inline-block}
.capture .small{font-size:.855rem;color:var(--muted);margin:0}

/* Casilla de consentimiento. Va separada del envío y sin marcar: el
   consentimiento para la lista no puede ir condicionado a recibir el recurso,
   o no es libre. Área táctil de 24 px, que es lo que pide la norma para un
   control de este tamaño, y la etiqueta entera es zona de clic. */
.consent{
  display:flex;align-items:flex-start;gap:11px;
  margin:0 0 clamp(14px,1.6vw,18px);
}
.consent input[type=checkbox]{
  flex:0 0 auto;
  width:24px;height:24px;margin:0;
  border:1px solid var(--muted);
  accent-color:var(--medido);
  cursor:pointer;
}
.consent label{
  margin:0;font-weight:400;font-size:.9rem;line-height:1.5;
  color:var(--ink-lead);cursor:pointer;
  font-variation-settings:'opsz' 12,'SOFT' 26,'WONK' 0;
}


/* 14 · Marcadores de pendiente ------------------------------------------ */

/* Andamio deliberado: se ve en amarillo para que no se cuele en producción.
   Para quitar uno, se borra el <div class="pending"> entero. */
.pending{
  background:var(--warn-bg);
  border-left:3px solid var(--warn-edge);
  color:var(--warn-ink);
  padding:16px 20px 17px;
  margin:clamp(22px,2.4vw,30px) 0;
  max-width:var(--col);
  font-size:.93rem;
  line-height:1.6;
}
.pending .k{
  display:block;
  font-size:.6875rem;letter-spacing:.075em;text-transform:uppercase;
  margin-bottom:8px;
}
.pending p{margin:0 0 .7em}
.pending p:last-child{margin-bottom:0}
.pending a{color:var(--warn-ink);text-decoration-color:currentColor}
.pending code{background:rgba(74,54,8,.09);color:var(--warn-ink)}
.pending--wide{max-width:none}


/* 15 · Retrato ---------------------------------------------------------- */

/* Va en la sección de los límites, que es el momento más personal de la
   página, y es lo único que aporta presencia humana a una dirección que sin
   él es todo instrumento. No flota: el texto no lo rodea, va en su propia
   columna, porque rodearlo dejaba una medida de 40 caracteres. */
.retrato{margin:0;width:100%}
.retrato img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.retrato figcaption{margin-top:10px}

/* La rejilla de dos columnas va atada a una clase explícita, no a la sección
   de límites: hay secciones de límites sin retrato (investigación,
   organizaciones) y ahí la segunda columna dejaba el texto en 370 px. */
.sec__body--retrato{
  display:grid;
  grid-template-columns:1fr min(36%,262px);
  column-gap:44px;
  align-items:start;
}
.sec__body--retrato>h2{grid-column:1/-1}
.sec__body--retrato>p{grid-column:1}
.sec__body--retrato>.retrato{grid-column:2;grid-row:2/span 99}
/* El marcador ocupa las dos columnas y cae debajo del retrato: en la columna
   estrecha se quedaba en 370 px y partía las rutas de fichero. */
.sec__body--retrato>.pending{grid-column:1/-1}

@media (max-width:760px){
  .sec__body--retrato{grid-template-columns:1fr}
  .sec__body--retrato>h2,.sec__body--retrato>p,
  .sec__body--retrato>.pending{grid-column:1}
  .sec__body--retrato>.retrato{
    grid-column:1;grid-row:auto;width:min(56%,206px);margin:0 0 26px;
  }
}


/* 16 · Pie de página ---------------------------------------------------- */

.foot{padding-block:34px 60px}
.foot__id{max-width:var(--col);margin-bottom:30px}
.foot__id p{font-size:.95rem;margin:0;color:var(--muted)}
.foot__id p:first-child{color:var(--ink);font-weight:600;margin-bottom:2px}

.foot__cols{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:30px 22px;
}
/* Los títulos del pie son navegación, no datos: fuera de la mono. */
.foot__k{
  display:block;
  font-family:var(--text);
  font-size:.6875rem;line-height:1.5;letter-spacing:.09em;
  font-weight:600;text-transform:uppercase;
  font-variation-settings:'opsz' 12,'SOFT' 0,'WONK' 0;
  color:var(--ink);
  margin-bottom:11px;
}
.foot__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot__cols li{margin-bottom:.15em}
.foot__cols a{
  color:var(--muted);text-decoration:none;
  font-variation-settings:'opsz' 10,'SOFT' 28,'WONK' 0;
  font-size:.875rem;line-height:1.4;
  display:inline-block;padding:3px 0;
}
.foot__cols a:hover{color:var(--medido);text-decoration:underline;text-underline-offset:.2em}

.foot__end{
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  border-top:1px solid var(--rule);
  margin-top:clamp(30px,3.4vw,40px);
  padding-top:20px;
  font-size:.855rem;color:var(--muted);
}
.foot__end a{color:var(--muted);text-decoration:underline;text-underline-offset:.2em}
.foot__end a:hover{color:var(--medido)}

@media (max-width:420px){.foot__cols{grid-template-columns:1fr}}


/* 17 · Utilidades y ajustes de móvil estrecho --------------------------- */

.skip{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--ink);color:var(--ground);
  padding:12px 16px;font-size:.9rem;font-weight:600;z-index:9;
  text-decoration:none;
}
.skip:focus{
  width:auto;height:auto;clip-path:none;overflow:visible;
  left:12px;top:12px;
}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Móvil estrecho: la medida se quedaba en 30-33 caracteres por línea, que es
   demasiado corta y produce un rag picado. Se gana ancho por dos vías, menos
   margen lateral y algo menos de cuerpo, hasta unos 38-40 caracteres.
   Los titulares NO se tocan: aguantan bien y son lo que sostiene la página. */
@media (max-width:430px){
  .wrap{padding-inline:16px}
  .sec__body>p,.sec__body li,.prose p,.prose li,.quote,.way p,.lead,.src,
  .facts dd,.tiles p,.pending p,.foot__cols a{
    font-size:.94em;
    line-height:1.62;
  }
  .btn{width:100%}
  .btns .note{width:100%}
}