/* ════════════════════════════════════════════════════════════════════
   DUXENIA · hoja común de la variación B (landing-b + páginas de segmento)
   Tokens copiados de sistema-de-color.html, con dos correcciones de
   contraste anotadas donde están.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --verde-50:#E4F8ED;  --verde-100:#BFF3D6; --verde-200:#36EB85; --verde-300:#00CC58;
  --verde-400:#00A949; --verde-500:#00893C; --verde-600:#007332; --verde-700:#005E29;
  --verde-800:#004A20; --verde-900:#023518;
  --verde-vivo:#00AB4A;

  --bronce-50:#F8F3E8;  --bronce-100:#F3E6CD; --bronce-200:#E9CB8E; --bronce-300:#E3A72F;
  --bronce-400:#C3870F; --bronce-500:#9F6D0A; --bronce-600:#855B07; --bronce-700:#6D4A05;
  --bronce-800:#553A04; --bronce-900:#3C2A05;

  --violeta-50:#F8F1FC;  --violeta-100:#F1E2F9; --violeta-200:#E3C3F6; --violeta-300:#D39BF4;
  --violeta-400:#C36CF6; --violeta-500:#AF34F7; --violeta-600:#9607E9; --violeta-700:#7C05C1;
  --violeta-800:#620499; --violeta-900:#47076D;

  --rojo-300:#EE9B98; --rojo-400:#E76E69; --rojo-500:#DD3630;
  --rojo-600:#BF241F; --rojo-700:#9D1E1A;

  --n-0:#FFFFFF;   --n-50:#FAFAFA;  --n-100:#F1F3F4; --n-200:#E6E8EA; --n-300:#CBD0D3;
  --n-400:#9BA3A8; --n-500:#79828A; --n-600:#5F676C; --n-700:#3A4146; --n-800:#1C2023;
  --n-900:#0E1011; --n-950:#08090A;

  color-scheme:light;
  --ground:var(--n-0); --surface:var(--n-50); --surface-2:var(--n-100);
  --rule:var(--n-200); --border-ui:var(--n-600);
  --ink:var(--n-900); --ink-2:var(--n-700); --ink-3:var(--n-600);
  --primary:var(--verde-600); --primary-vivo:var(--verde-vivo); --primary-ink:var(--verde-900);
  /* CORRECCIÓN 28-10: --secondary era bronce-500, que cumple 4,5:1 solo contra
     blanco puro. Sobre --surface daba 4,31 y sobre fila teñida 4,00. bronce-600
     da 5,75 y 5,34. Ver nota en docs/01-sistema-de-color.md. */
  --secondary:var(--bronce-600);
  --accent:var(--violeta-600); --error:var(--rojo-600); --info:var(--n-600);
  --tint:10%; --tint-row:7%; --glow:13%;

  --font-display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.0625rem;
  --fs-lg:1.1875rem; --fs-xl:1.4375rem;
  --fs-h3:clamp(1.1875rem, 1rem + .8vw, 1.5rem);
  --fs-h2:clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem);
  --fs-h1:clamp(2.125rem, 1.35rem + 3.4vw, 3.875rem);
  --lh-tight:1.08; --lh-snug:1.3; --lh-base:1.6;
  --ls-tight:-.022em; --ls-label:.08em;
  --w-regular:400; --w-medium:500; --w-semi:650; --w-bold:700; --w-black:800;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:88px;
  --gut:max(18px, env(safe-area-inset-left,0px));
  --measure:60ch; --max:1140px;
  --r-sm:6px; --r-md:10px; --r-lg:18px; --r-pill:999px;

  --t-tap:90ms; --t-ui:160ms; --t-move:320ms; --t-scene:640ms;
  --e-out:cubic-bezier(.2,.8,.25,1); --e-io:cubic-bezier(.65,0,.35,1);
  --d-near:6px; --d-far:18px; --stagger:60ms;
  --shadow-1:0 1px 3px color-mix(in oklab, var(--n-950) 14%, transparent);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:var(--n-950); --surface:var(--n-900); --surface-2:var(--n-800);
    --rule:var(--n-800); --border-ui:var(--n-500);
    --ink:var(--n-100); --ink-2:var(--n-400); --ink-3:var(--n-500);
    --primary:var(--verde-400); --primary-vivo:var(--verde-300); --primary-ink:var(--verde-900);
    --secondary:var(--bronce-300);
    --accent:var(--violeta-400); --error:var(--rojo-400); --info:var(--n-400);
    --tint:16%; --tint-row:10%; --glow:26%;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:var(--n-950); --surface:var(--n-900); --surface-2:var(--n-800);
  --rule:var(--n-800); --border-ui:var(--n-500);
  --ink:var(--n-100); --ink-2:var(--n-400); --ink-3:var(--n-500);
  --primary:var(--verde-400); --primary-vivo:var(--verde-300); --primary-ink:var(--verde-900);
  --secondary:var(--bronce-300);
  --accent:var(--violeta-400); --error:var(--rojo-400); --info:var(--n-400);
  --tint:16%; --tint-row:10%; --glow:26%;
}
:root[data-hc="on"]{
  --ground:var(--n-0); --surface:var(--n-0); --surface-2:var(--n-100);
  --ink:#000; --ink-2:#17191A; --ink-3:#33383B; --rule:#8A9196; --border-ui:#33383B;
  --primary:var(--verde-800); --secondary:var(--bronce-700);
  --accent:var(--violeta-800); --error:var(--rojo-700);
  --tint:0%; --tint-row:0%; --glow:0%; --shadow-1:none;
}
@media (prefers-color-scheme: dark){
  :root[data-hc="on"]:not([data-theme="light"]){
    --ground:#000; --surface:#000; --surface-2:var(--n-900);
    --ink:#FFF; --ink-2:#E9ECEE; --ink-3:#C2C8CC; --rule:#5A6267; --border-ui:#C2C8CC;
    --primary:var(--verde-300); --secondary:var(--bronce-300);
    --accent:var(--violeta-300); --error:var(--rojo-300);
  }
}
:root[data-hc="on"][data-theme="dark"]{
  --ground:#000; --surface:#000; --surface-2:var(--n-900);
  --ink:#FFF; --ink-2:#E9ECEE; --ink-3:#C2C8CC; --rule:#5A6267; --border-ui:#C2C8CC;
  --primary:var(--verde-300); --secondary:var(--bronce-300);
  --accent:var(--violeta-300); --error:var(--rojo-300);
}

/* ══ BASE ══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-display); font-size:var(--fs-md); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}
::selection{background:color-mix(in oklab, var(--primary-vivo) 28%, transparent)}
h1,h2,h3,h4{margin:0; letter-spacing:var(--ls-tight); line-height:var(--lh-tight)}
h1{font-size:var(--fs-h1); font-weight:var(--w-black); text-wrap:pretty}
h2{font-size:var(--fs-h2); font-weight:var(--w-bold); text-wrap:pretty}
h3{font-size:var(--fs-h3); font-weight:var(--w-semi); line-height:var(--lh-snug)}
h4{font-size:var(--fs-base); font-weight:var(--w-semi); line-height:var(--lh-snug)}
p{margin:0; max-width:var(--measure)}
a{color:inherit}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.stack{display:flex; flex-direction:column; gap:var(--s-5)}
.stack-sm{display:flex; flex-direction:column; gap:var(--s-3)}

/* Bandas: tres suelos, para que el ritmo no sea plano */
.band{padding-block:var(--s-8)}
.band--alt{background:var(--surface)}
.band--ink{background:var(--n-900); color:var(--n-100)}
:root[data-theme="dark"] .band--ink,
:root[data-hc="on"] .band--ink{background:var(--surface-2); color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .band--ink{background:var(--surface-2); color:var(--ink)} }
.band--ink .lede, .band--ink .nota{color:color-mix(in oklab, currentColor 72%, transparent)}

.eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:var(--w-medium);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:var(--s-2); margin:0;
}
.eyebrow::before{content:""; inline-size:22px; block-size:2px; background:var(--primary-vivo);
  border-radius:var(--r-pill); flex:none}
.band--ink .eyebrow{color:color-mix(in oklab, currentColor 70%, transparent)}
.lede{font-size:var(--fs-lg); color:var(--ink-2); line-height:var(--lh-snug)}
.nota{font-size:var(--fs-sm); color:var(--ink-3)}
.mono{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-label);
  text-transform:uppercase}

/* ══ MARCA ═════════════════════════════════════════════════════════ */
.mark{display:inline-flex; align-items:center; gap:.06em; font-weight:var(--w-black);
  letter-spacing:var(--ls-tight); line-height:1; text-decoration:none}
.mark svg{block-size:1em; inline-size:auto; display:block; transform:translateY(.02em)}
.mark .stk{stroke:currentColor}
.mark .dot{fill:var(--primary-vivo)}

/* ══ BOTONES ═══════════════════════════════════════════════════════ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-block-size:44px; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-pill); border:1px solid transparent;
  font-family:inherit; font-size:var(--fs-base); font-weight:var(--w-semi);
  text-decoration:none; cursor:pointer;
  transition:transform var(--t-tap) var(--e-out), background var(--t-ui) var(--e-out),
             border-color var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out)}
.btn:active{transform:translateY(1px)}
/* CORRECCIÓN 28-10: el hover daba 2,29:1 (tinta verde-900 sobre verde-600).
   Ahora la tinta pasa a blanco sobre verde-600 → 6,00:1. */
.btn-primary{background:var(--primary-vivo); color:var(--primary-ink); font-weight:var(--w-bold)}
.btn-primary:hover{background:var(--primary); color:var(--n-0)}
:root[data-hc="on"] .btn-primary{background:var(--primary); color:var(--n-0)}
.btn-ghost{border-color:var(--border-ui); color:inherit}
.btn-ghost:hover{background:color-mix(in oklab, currentColor 8%, transparent)}
.acciones{display:flex; flex-wrap:wrap; gap:var(--s-3)}

/* ══ CABECERA Y MENÚ ══════════════════════════════════════════════
   Patrón de barra con desplegables. El capítulo 12 solo permite
   transiciones de estado en lo interactivo, máximo 150 ms: los paneles
   aparecen y desaparecen, no se animan al entrar. */
.top{position:sticky; top:0; z-index:40;
  background:color-mix(in oklab, var(--ground) 92%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid transparent;
  transition:border-color var(--t-ui) var(--e-out);
  padding-top:env(safe-area-inset-top,0px)}
.top[data-scrolled="yes"]{border-bottom-color:var(--rule)}
.top .wrap{display:flex; align-items:center; gap:var(--s-4); min-block-size:62px}
.top .mark{font-size:var(--fs-lg); flex:none; min-block-size:44px; align-items:center}

.menu{margin-inline-start:auto; display:flex; align-items:center; gap:var(--s-1)}
.item{position:relative}

.disp, .suelto{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-block-size:40px; padding:0 var(--s-3);
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer;
  font-family:inherit; font-size:var(--fs-sm); font-weight:var(--w-semi);
  color:var(--ink-2); text-decoration:none;
  transition:color var(--t-ui) var(--e-out), background var(--t-ui) var(--e-out)}
.disp:hover, .suelto:hover{color:var(--ink); background:var(--surface-2)}
.disp svg{inline-size:10px; block-size:auto; opacity:.6;
  transition:transform var(--t-ui) var(--e-out)}
.disp[aria-expanded="true"]{color:var(--ink); background:var(--surface-2)}
.disp[aria-expanded="true"] svg{transform:rotate(180deg)}
.cta{margin-inline-start:var(--s-3)}

.panel{
  position:absolute; inset-inline-start:0; inset-block-start:calc(100% + var(--s-2));
  min-inline-size:320px; padding:var(--s-3);
  background:var(--ground); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:0 12px 32px color-mix(in oklab, var(--n-950) 14%, transparent);
  display:none; gap:var(--s-4)}
.panel--ancho{inset-inline-start:auto; inset-inline-end:0; min-inline-size:520px;
  grid-template-columns:1fr 1fr}
.disp[aria-expanded="true"] + .panel{display:grid}
/* Puente invisible sobre el hueco entre el botón y el panel: sin él, al
   bajar el ratón se cruza una zona muerta y salta `mouseleave`, con lo
   que el menú se cierra justo cuando vas a elegir. */
.panel::before{content:""; position:absolute; inset-inline:0;
  inset-block-end:100%; block-size:var(--s-3)}
.panel .ct{font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-3);
  padding:var(--s-2) var(--s-3) var(--s-1); margin:0; max-inline-size:none}
.panel a{display:grid; gap:2px; padding:var(--s-2) var(--s-3);
  border-radius:var(--r-sm); text-decoration:none; color:inherit;
  transition:background var(--t-ui) var(--e-out)}
.panel a:hover{background:var(--surface-2)}
.panel a[aria-current="page"]{background:color-mix(in oklab, var(--primary-vivo) var(--tint-row), transparent)}
.panel a[aria-current="page"] .t{color:var(--primary)}
.panel .t{font-size:var(--fs-sm); font-weight:var(--w-semi); line-height:var(--lh-snug)}
.panel .d{font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-snug)}

/* ── Selector de idioma. Visible y sin redirección automática: adivinar
      por IP y no dejar salir es el error clásico, y esconde las otras
      versiones al rastreador. ── */
.idiomas{display:flex; align-items:center; gap:var(--s-1); margin-inline-start:var(--s-2);
  padding-inline-start:var(--s-3); border-inline-start:1px solid var(--rule)}
.idiomas a{display:inline-flex; align-items:center; min-block-size:40px; padding:0 var(--s-2);
  font-size:var(--fs-sm); font-weight:var(--w-semi); color:var(--ink-3);
  text-decoration:none; border-radius:var(--r-sm);
  transition:color var(--t-ui) var(--e-out), background var(--t-ui) var(--e-out)}
.idiomas a:hover{color:var(--ink); background:var(--surface-2)}
.idiomas--pie{margin-inline-start:0; padding-inline-start:0; border-inline-start:0}
.idiomas--pie a{min-block-size:44px}
@media (max-width:879px){
  .idiomas{margin-inline-start:0; padding-inline-start:0; border-inline-start:0;
    border-block-start:1px solid var(--rule); margin-block-start:var(--s-2);
    padding-block-start:var(--s-2); inline-size:100%}
  .idiomas a{min-block-size:48px; font-size:var(--fs-base)}
}

/* ── La hamburguesa y el menú en móvil ── */
.hamb{display:none; margin-inline-start:auto; inline-size:44px; block-size:44px;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  background:none; border:1px solid var(--rule); border-radius:var(--r-sm);
  cursor:pointer}
.hamb span{display:block; inline-size:17px; block-size:2px; background:var(--ink-2);
  border-radius:var(--r-pill); transition:transform var(--t-ui) var(--e-out),
  opacity var(--t-ui) var(--e-out)}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:879px){
  .hamb{display:flex}
  .menu{display:none; position:absolute; inset-inline:0; inset-block-start:100%;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:var(--s-3) var(--gut) var(--s-5);
    background:var(--ground); border-block-end:1px solid var(--rule);
    max-block-size:calc(100dvh - 62px); overflow-y:auto}
  .top[data-menu="abierto"] .menu{display:flex}
  .disp, .suelto{inline-size:100%; justify-content:space-between;
    min-block-size:48px; font-size:var(--fs-base); border-radius:var(--r-sm)}
  .panel{position:static; min-inline-size:0; box-shadow:none; border:0;
    padding:0 0 var(--s-3) var(--s-3); background:none}
  .panel--ancho{min-inline-size:0; grid-template-columns:1fr}
  .cta{margin-inline-start:0; margin-block-start:var(--s-3); inline-size:100%}
}

/* ══ HÉROE ═════════════════════════════════════════════════════════ */
.hero{padding-block:var(--s-9) var(--s-8); position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:1; display:grid; gap:var(--s-5)}
.hero h1{max-inline-size:20ch}
.hero .sub{font-size:var(--fs-xl); font-weight:var(--w-regular); color:var(--ink-2);
  line-height:var(--lh-snug); max-inline-size:40ch}
.hero .sub b{color:var(--ink); font-weight:var(--w-semi)}
/* el filo verde: estructura, no blob */
.hero::before{content:""; position:absolute; inset-block:0; inset-inline-start:0;
  inline-size:3px; background:linear-gradient(to bottom, var(--primary-vivo), transparent 70%)}

/* la promesa de marca, arriba y no en la tercera tarjeta */
.prenda{display:flex; align-items:center; gap:var(--s-3); flex-wrap:nowrap;
  padding:var(--s-4) var(--s-5); border-radius:var(--r-md);
  border:1px solid color-mix(in oklab, var(--primary) 32%, var(--rule));
  background:color-mix(in oklab, var(--primary-vivo) var(--tint-row), var(--ground));
  font-size:var(--fs-base); max-inline-size:56ch}
.prenda span{flex:1; min-width:0}
.prenda b{font-weight:var(--w-semi)}
.prenda svg{flex:none; inline-size:20px; block-size:20px; color:var(--primary)}

/* ══ PARA QUIÉN · la fila de reconocimiento, en el héroe ══════════
   Cada uno se identifica antes de leer nada, y va directo a su página. */
.para-quien{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-4);
  margin-block-start:var(--s-3); padding-block-start:var(--s-5);
  border-block-start:1px solid var(--rule)}
.para-quien > .et{font-size:var(--fs-sm); font-weight:var(--w-semi); color:var(--ink-2);
  margin-inline-end:var(--s-1)}
.para-quien a{font-size:var(--fs-sm); color:var(--ink-3); text-decoration:none;
  display:inline-flex; align-items:center; min-block-size:44px;
  border-block-end:1px solid transparent;
  transition:color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out)}
.para-quien a:hover{color:var(--ink); border-block-end-color:var(--primary-vivo)}
.para-quien a[aria-current="page"]{color:var(--primary); font-weight:var(--w-semi);
  border-block-end-color:var(--primary)}

/* ══ LAS SEIS FILAS · el diagrama que nos separa ═══════════════════ */
.filas{display:grid; gap:var(--s-2); margin-top:var(--s-6)}
.fila{display:grid; gap:var(--s-2) var(--s-4); align-items:center;
  grid-template-columns:auto 1fr; padding:var(--s-4);
  border:1px solid var(--rule); border-radius:var(--r-md); background:var(--ground)}
@media (min-width:820px){ .fila{grid-template-columns:76px 1.1fr 1fr auto} }
.fila[data-tipo="conectado"]{background:var(--surface-2); border-style:dashed}
.fila[data-tipo="nuestro"]{border-color:color-mix(in oklab, var(--primary) 40%, var(--rule))}
.puntos{display:flex; gap:var(--s-1)}
.punto{inline-size:13px; block-size:13px; border-radius:var(--r-pill);
  border:2px solid var(--ink-3)}
.punto[data-on="si"]{background:var(--ink-3)}
.fila[data-tipo="nuestro"] .punto{border-color:var(--primary)}
.fila[data-tipo="nuestro"] .punto[data-on="si"]{background:var(--primary)}
.fila .qué{font-weight:var(--w-semi); font-size:var(--fs-base); line-height:var(--lh-snug)}
.fila .ej{font-size:var(--fs-sm); color:var(--ink-3); font-style:italic}
.fila .como{font-size:var(--fs-xs); font-family:var(--font-mono); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--secondary); white-space:nowrap}
.fila[data-tipo="nuestro"] .como{color:var(--primary)}
.leyenda{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4);
  margin-top:var(--s-4); font-size:var(--fs-xs); color:var(--ink-3);
  font-family:var(--font-mono); max-inline-size:none}
.leyenda .clave{display:inline-flex; align-items:center; gap:var(--s-2)}
.leyenda .sep{inline-size:1px; block-size:14px; background:var(--rule)}

/* para lectores de pantalla, no para la vista */
.oculto-visual{position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ══ LA CADENA · tabla de dos carriles, visible sin pulsar nada ════ */
.carriles{inline-size:100%; border-collapse:collapse; margin-top:var(--s-6);
  font-size:var(--fs-sm)}
.carriles caption{text-align:start; padding-bottom:var(--s-3); color:var(--ink-3);
  font-size:var(--fs-sm)}
.carriles th, .carriles td{text-align:start; padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--rule); vertical-align:top}
.carriles thead th{font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-3);
  font-weight:var(--w-medium); border-bottom-width:2px}
.carriles tbody th{font-weight:var(--w-semi); color:var(--ink); inline-size:30%}
.carriles tbody th small{display:block; font-weight:var(--w-regular); color:var(--ink-3);
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-label);
  text-transform:uppercase; margin-top:2px}
.c-hoy{color:var(--secondary)}
.c-nos{color:var(--primary); background:color-mix(in oklab, var(--primary-vivo) var(--tint-row), transparent)}
.c-nos[data-parcial="si"]{color:var(--secondary);
  background:color-mix(in oklab, var(--secondary) var(--tint-row), transparent)}
.carriles td b{font-weight:var(--w-semi)}
@media (max-width:719px){
  .carriles, .carriles tbody, .carriles tr, .carriles td, .carriles th{display:block}
  .carriles thead{position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%)}
  .carriles tr{border:1px solid var(--rule); border-radius:var(--r-md); margin-bottom:var(--s-3)}
  .carriles tbody th{inline-size:auto; border-bottom:0; padding-bottom:0}
  .carriles td{border-bottom:0; padding-top:var(--s-2)}
  .carriles td::before{content:attr(data-et) " · "; font-family:var(--font-mono);
    font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase;
    color:var(--ink-3)}
}

/* ══ EL PROTOCOLO · lo que un PM quiere ver ════════════════════════ */
.protocolo{display:grid; gap:var(--s-3); margin-top:var(--s-6);
  grid-template-columns:1fr}
@media (min-width:600px){ .protocolo{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .protocolo{grid-template-columns:repeat(5,minmax(0,1fr))} }
/* la tarjeta lleva su propia tinta: sobre .band--ink la banda es oscura
   pero la tarjeta es clara, y heredar el color de la banda dejaba el
   título invisible sobre su propio fondo. */
.etapa{position:relative; padding:var(--s-4); border-radius:var(--r-md);
  border:1px solid var(--rule); background:var(--ground); color:var(--ink);
  display:flex; flex-direction:column; gap:var(--s-2)}
/* el conector: hace que cinco tarjetas se lean como una secuencia y no
   como cinco cosas. Es un trazo estático, no una animación. */
.etapa:not(:last-child)::after{
  content:""; position:absolute; background:var(--rule)}
@media (min-width:980px){
  .etapa:not(:last-child)::after{
    inset-inline-start:100%; inset-block-start:calc(var(--s-4) + .55em);
    inline-size:var(--s-3); block-size:2px}
}
@media (max-width:979px){
  .etapa:not(:last-child)::after{
    inset-block-start:100%; inset-inline-start:calc(var(--s-4) + 7px);
    block-size:var(--s-3); inline-size:2px}
}
.etapa .n{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--primary);
  letter-spacing:var(--ls-label); font-weight:var(--w-medium);
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:24px; block-size:24px; border-radius:var(--r-pill);
  border:1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  background:color-mix(in oklab, var(--primary-vivo) var(--tint-row), var(--ground))}
.etapa .t{font-weight:var(--w-semi); font-size:var(--fs-base); line-height:var(--lh-snug)}
.etapa .d{font-size:var(--fs-sm); color:var(--ink-2)}
.estado{display:inline-flex; align-items:center; gap:var(--s-2); align-self:flex-start;
  max-inline-size:100%; overflow-wrap:anywhere;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-label);
  text-transform:uppercase; padding:3px var(--s-2); border-radius:var(--r-pill);
  border:1px solid currentColor; margin-top:auto}
.estado[data-tono="espera"]{color:var(--secondary)}
.estado[data-tono="hecho"]{color:var(--primary)}
.estado[data-tono="no"]{color:var(--error)}

/* ══ DATOS · «la cifra sola» del capítulo 12 ══════════════════════
   Un número a tamaño de titular con una línea debajo. Toda cifra lleva
   denominador y fuente en la misma tarjeta (capítulo 07). */
.datos{display:grid; gap:var(--s-5) var(--s-4); margin-top:var(--s-6);
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr))}
.dato{display:flex; flex-direction:column; gap:var(--s-2);
  padding-inline-start:var(--s-4); border-inline-start:2px solid var(--primary-vivo)}
.dato .v{font-size:clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight:var(--w-black);
  letter-spacing:var(--ls-tight); line-height:1; font-variant-numeric:tabular-nums}
.dato .k{font-size:var(--fs-base); line-height:var(--lh-snug); max-inline-size:30ch}
.dato .f{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-3);
  margin-block-start:auto; padding-block-start:var(--s-2)}
.band--ink .dato .f{color:color-mix(in oklab, currentColor 62%, transparent)}
.dato--aparte{border-inline-start-color:var(--secondary)}

/* ══ VÍAS, agrupadas por papel ═════════════════════════════════════ */
.grupo-vias{margin-top:var(--s-6)}
.grupo-vias > h3{display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap;
  padding-bottom:var(--s-3); border-bottom:2px solid var(--rule)}
.grupo-vias > h3 .mono{color:var(--ink-3); font-weight:var(--w-regular)}
.via{display:grid; gap:var(--s-2) var(--s-5); padding:var(--s-5) 0;
  grid-template-columns:1fr; border-bottom:1px solid var(--rule)}
@media (min-width:760px){ .via{grid-template-columns:230px 1fr} }
.via h4 a{color:var(--primary); text-decoration:none; text-underline-offset:3px}
.via h4 a:hover{text-decoration:underline}
.via p{color:var(--ink-2); font-size:var(--fs-base); min-width:0}

/* ══ SEGMENTOS · las tarjetas que llevan a las páginas ═════════════ */
.segmentos{display:grid; gap:var(--s-3); margin-top:var(--s-6);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.seg{display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-5); border-radius:var(--r-md); border:1px solid var(--rule);
  background:var(--ground); color:var(--ink); text-decoration:none;
  transition:border-color var(--t-ui) var(--e-out), transform var(--t-move) var(--e-out)}
.seg:hover{border-color:var(--primary); transform:translateY(calc(-1 * var(--d-near)))}
.seg .papel{font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-3)}
.seg .tit{font-weight:var(--w-semi); font-size:var(--fs-lg); line-height:var(--lh-snug)}
.seg .q{font-size:var(--fs-sm); color:var(--ink-2)}
.seg .ir{margin-top:auto; padding-top:var(--s-3); color:var(--primary);
  font-size:var(--fs-sm); font-weight:var(--w-semi)}

/* ══ LÍMITES · lista plana con filetes, sin caja ═══════════════════ */
.limites{margin-top:var(--s-6); display:grid; gap:0}
.limite{display:grid; gap:var(--s-1); padding:var(--s-4) 0; border-top:1px solid var(--rule)}
.limite:last-child{border-bottom:1px solid var(--rule)}
.limite b{font-weight:var(--w-semi)}
.limite span{color:var(--ink-2); font-size:var(--fs-base)}

/* ══ PIE ═══════════════════════════════════════════════════════════ */
.pie{padding-block:var(--s-7); border-top:1px solid var(--rule); color:var(--ink-3)}
.pie .wrap{display:grid; gap:var(--s-5)}
.pie .fila-pie{display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center;
  justify-content:space-between; font-size:var(--fs-sm)}
.pie .mark{font-size:var(--fs-base); color:var(--ink-2)}
.correo-pie{color:var(--ink-2); text-decoration:none; font-weight:var(--w-semi);
  display:inline-flex; align-items:center; min-block-size:44px;
  border-block-end:1px solid transparent;
  transition:color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out)}
.correo-pie:hover{color:var(--primary); border-block-end-color:var(--primary-vivo)}
.pie nav{display:flex; flex-wrap:wrap; gap:0 var(--s-5); font-size:var(--fs-sm)}
.pie nav a{color:var(--ink-3); text-decoration:none;
  display:inline-flex; align-items:center; min-block-size:44px}
.pie nav a:hover{color:var(--ink)}
.iconbtn{min-inline-size:44px; min-block-size:44px; display:inline-flex;
  align-items:center; justify-content:center; background:none;
  border:1px solid var(--rule); border-radius:var(--r-sm); color:var(--ink-3);
  cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-label);
  transition:color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out)}
.iconbtn:hover{color:var(--ink); border-color:var(--border-ui)}
.iconbtn[aria-pressed="true"]{color:var(--primary); border-color:var(--primary)}

/* ══ MOVIMIENTO ═══════════════════════════════════════════════════
   El capítulo 12 solo admite transiciones de estado en lo interactivo
   —hover, foco, pulsado—, y prohíbe expresamente la animación al hacer
   scroll. Se quitó el 28-10-2026 después de ver que escondía las dos
   últimas filas del diagrama de la oferta y las dos últimas tarjetas
   del protocolo: justo el final de los dos argumentos. El motivo del
   manual, además, es el principio 05 — una página que se mueve pide
   que la mires en vez de que la leas. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important; transition-duration:1ms !important}
}