/* sistema.css · EL SISTEMA VISUAL DE LA LANDING, EN UN SOLO SITIO.
 *
 * Dirección A · «el expediente». Votada por Miguel el 21 sep 2026 sobre la
 * comparación de tres direcciones (app · public/maquetas/landing-B135).
 *
 * EL SISTEMA EN UNA FRASE: CERO CAJAS. Nada de tarjetas con sombra y esquina
 * redonda. Lo que separa es una REGLA y lo que ordena es una COLUMNA, como un
 * expediente técnico — que es literalmente lo que el producto entrega. El
 * contraste no lo pone el color: lo pone la ESCALA (titular a 104px contra
 * cuerpo a 16,5) y el acento no es un color de relleno: numera y señala (ver
 * TOKENS).
 *
 * POR QUÉ UN FICHERO Y NO CSS EN LÍNEA EN CADA PLANTILLA · lo gobiernan SEIS
 * páginas (home, /planes y las cuatro de solución) y hasta aquí cada una
 * llevaba su propia copia. Seis copias divergen a la primera corrección, y la
 * que se queda atrás no da error: simplemente se ve distinta. Es la misma
 * regla que hizo que `lib/identity-colors.js` sea una tabla única en la app.
 *
 * Y de paso quita una clase entera de fallos de i18n: la sustitución del
 * constructor es por SUBCADENA sobre el fichero entero, `<style>` incluido,
 * así que una clave corta podía tocar una declaración CSS. Aquí no llega.
 *
 * LAS NUEVE PÁGINAS DE MÓDULO lo enlazan TAMBIÉN, pero conservan su CSS en
 * línea DETRÁS: heredan los tokens, la cabecera, el pie y la tipografía, y su
 * cuerpo sigue con la maquetación que ya tenían. Reescribirlas es una tanda de
 * contenido con su revisión —siguen escritas en el vocabulario de módulos de
 * julio— y no un efecto colateral de un cambio de diseño. Queda DECLARADO.
 *
 * Creado: 21 sep 2026 · B135.
 */

/* ═══ TOKENS ══════════════════════════════════════════════════════════════
 * Color   · papel #FBFBFA · tinta #14171A · apagado #6B7280
 *           regla rgba(20,23,26,.14) · superficie #F2F2F0
 *           acento #E1341A, con DOS usos y ninguno más (B305 · la regla decía
 *           «SOLO en el número de sección y el filo del CTA» y esta misma hoja
 *           lo gastaba en nueve sitios, así que se reescribe para que diga lo
 *           que el CSS hace): (1) NUMERAR — número de sección, el de la
 *           rótula, el de cada vía, el «+» de la FAQ —; (2) SEÑALAR lo que se
 *           toca o está elegido — filo del CTA y del botón fantasma, fila
 *           activa, foco, casilla marcada, hover del botón primario, borde
 *           del consejo —. Nunca: relleno de botón en reposo, texto corrido,
 *           superficie o decoración. Como relleno o cifra GRANDE, una vez por
 *           pantalla.
 *           Los colores de identidad (azul/lima/oro/morado) son de MÓDULO y
 *           solo marcan a qué solución pertenece algo: nunca decoran.
 * Tipo    · Archivo 800 para titular (escala 104/44/34/26/22)
 *           DM Sans para cuerpo · JetBrains Mono para dato y rótulo
 * Trama   · rejilla ASIMÉTRICA 7fr/5fr. El titular no se centra ni se mete en
 *           una caja de 1100: la columna izquierda manda y la derecha es la
 *           ficha del expediente.
 * ═══════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FBFBFA; --ink:#14171A; --dim:#4B5563; --soft:#6B7280; --faint:#9CA3AF;
  --line:rgba(20,23,26,.14); --line2:rgba(20,23,26,.24); --rule:#14171A;
  --surface:#F2F2F0;
  --accent:#E1341A; --accent-ink:#C22C12;
  --warn:#8A5A00; --warn-wash:rgba(180,131,14,.10);
  --ok:#3F6212; --ok-wash:rgba(77,124,15,.13);
  --crit-wash:rgba(225,52,26,.13); --crit-ink:#B02A10;

  /* Identidad de las cuatro soluciones. B305: este comentario decía «los
     MISMOS valores que la app (lib/identity-colors.js)» y era falso — la app
     colorea por MÓDULO (siete) y aquí se colorea por SOLUCIÓN (cuatro), con
     valores distintos: Engineering #2563EB aquí y #2F6BFF el módulo de la app,
     Innovation #6D28D9 aquí y #6D5BE0 allí. La correspondencia está en el
     design system (tabla solución ↔ módulo). Las tintas existen porque estos
     colores no llegan a 4,5:1 sobre blanco en el cuerpo pequeño. */
  --eng:#2563EB; --sus:#4D7C0F; --deep:#B4830E; --inn:#6D28D9;
  --core:#374151; --full:#14171A;

  --pad:56px; --max:1440px;
  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  /* El radio deja de existir como decisión: A no tiene esquinas blandas. Se
     conserva el NOMBRE porque las nueve páginas de módulo lo consumen. */
  --radius:0px;
  /* Nombres que usaban las plantillas viejas · se mantienen como alias para
     que las nueve de módulo sigan compilando mientras no se reescriban. */
  --ink-dim:var(--dim); --ink-soft:var(--soft); --line-strong:var(--line2);
  --red:var(--accent); --red-ink:var(--accent-ink);
  --teal:#0F766E; --blue:var(--eng); --gold:var(--deep); --purple:var(--inn);
  --indigo:#4f46e5; --green:var(--sus); --lime:var(--sus);
  --teal-ink:#0f766e; --blue-ink:var(--eng); --gold-ink:#8a6a0a;
  --purple-ink:var(--inn); --green-ink:var(--sus); --lime-ink:var(--sus);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);
  font-size:16.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* El ancho lo pone la PÁGINA, no una caja centrada: la rejilla asimétrica va
   a sangre. `--max` solo evita que en un monitor de 2560 la línea de texto se
   vuelva ilegible. */
.pg{max-width:var(--max);margin:0 auto;background:var(--paper)}
.wrap{padding:0 var(--pad)}

/* ═══ CABECERA Y TIRA LEGAL · viven en `/cabecera.css` ══════════════════
   No es una separación por gusto: INNsights NO enlaza esta hoja (son 24
   páginas con su propio CSS y treinta selectores que se pisarían) y su
   cabecera tiene que ser LA MISMA. Un bloque copiado allí serían dos
   implementaciones, y la que se quedara atrás no daría error: perdería una
   entrada y nadie lo miraría. Las 56 enlazan `/cabecera.css`.
   Lo que se fue de aquí: `.v98-nav`, `.vitaminn-logo`, `.navdrop*`,
   `.v98-cta`, `.v98-burger`, el cajón `.v98-mobile-*` (que era un SEGUNDO
   marcado y ya no existe) y `.lang-pick`/`.lang-menu`. ═══════════════════ */

/* ═══ TITULARES Y SECCIONES ══════════════════════════════════════════════
   LA ESCALA DE A, y está aquí después de haberla movido y haberla devuelto
   (B137, 21 sep 2026). Queda escrito para que nadie repita el camino
   creyendo que es nuevo.

   Las FAMILIAS nunca fueron el problema y no se han tocado nunca: A usa
   exactamente las mismas que la dirección anterior (DM Sans, Archivo,
   JetBrains Mono). Lo que hace que A se lea severa son TRES palancas
   empujando a la vez — el titular a 104px con el tracking apretado a
   -.055em, el párrafo de entrada a 16,5 en vez de 18, y el destacado del
   titular retirado.

   Se construyó y se midió la versión contenida (76px / -.04em / .95, lede a
   18/1.55) y Miguel eligió volver a ESTA. Lo que se sabe de aquel paso, por
   si alguna vez se reabre: a 1440 el titular a 104px ocupa 3 líneas y 275px
   de alto, y a 76px ocupa 2 y 144. Y aflojar el tracking ENSANCHA cada
   palabra, así que «Sustainability» —una sola palabra, la más larga de las
   seis páginas— pasaba a necesitar 275px a 38px donde un móvil de 320 ofrece
   268, y había que bajar el suelo del `clamp` de 38 a 36 para compensar. Con
   -.055em ese problema no existe, y por eso el suelo vuelve a 38.

   El tamaño del teléfono NO se fija aquí: lo gobierna el `clamp` de la media
   query de más abajo, y un valor fijo en un selector más específico la
   anularía EN SILENCIO. ══════════════════════════════════════════════════ */
h1{font-family:var(--f-display);font-weight:800;font-size:104px;line-height:.88;
  letter-spacing:-.055em;text-wrap:balance}
.lede{font-size:16.5px;line-height:1.5;color:var(--dim);max-width:46ch}
.eyebrow,.kicker{display:flex;align-items:baseline;gap:11px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.03em;color:var(--soft);text-transform:none}
.eyebrow b,.kicker b{color:var(--accent);font-weight:500}

section{border-bottom:1px solid var(--line)}
.sec-h{display:flex;align-items:baseline;gap:18px;padding:38px var(--pad) 22px}
.sec-n{font-family:var(--f-display);font-weight:800;font-size:38px;letter-spacing:-.05em;
  color:var(--accent);line-height:1;flex:none}
.sec-h h2{font-family:var(--f-display);font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:1.05}
.sec-h .rule{flex-grow:1;height:1px;background:var(--line);align-self:center}
.sec-h .hint{font-family:var(--f-mono);font-size:11.5px;color:var(--soft);white-space:nowrap;flex:none}
.sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--soft);margin-bottom:13px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ═══ HERO · rejilla asimétrica + ficha del expediente ═══════════════════ */
.hero{display:grid;grid-template-columns:7fr 5fr;border-bottom:1px solid var(--line)}
.hero-l{padding:54px 40px 46px var(--pad);border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.hero-l h1{margin:0 0 22px}
.hero-r{padding:54px var(--pad) 46px 36px;display:flex;flex-direction:column}
.ficha-t{font-family:var(--f-mono);font-size:11px;color:var(--soft);margin-bottom:18px;letter-spacing:.03em}
.ficha-r{display:flex;align-items:baseline;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.ficha-r span:first-child{flex-grow:1}
.ficha-r span:last-child{font-family:var(--f-mono);font-size:13px}
.big{display:flex;align-items:baseline;gap:14px;margin-top:auto;padding-top:22px}
.big b{font-family:var(--f-display);font-weight:800;font-size:62px;letter-spacing:-.05em;line-height:.9}
.big span{font-size:14px;line-height:1.35;color:var(--dim)}
.hero-actions{display:flex;gap:26px;align-items:baseline;margin-top:28px;flex-wrap:wrap}

/* ═══ BOTONES · el acento no se gasta aquí ══════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--ink);
  background:transparent;color:var(--ink);transition:background .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{border-color:transparent;border-bottom:2px solid var(--accent);padding:0 0 2px}
.btn-ghost:hover{background:transparent;color:var(--ink);border-bottom-color:var(--ink)}

/* ═══ 01 · EL SELECTOR DE TRABAJO ═══════════════════════════════════════
   La tira es una REJILLA de seis columnas, no seis tarjetas. El panel de
   respuesta va debajo y se conmuta con `hidden`: el contenido de los seis
   vive en el MARCADO —no lo inyecta JavaScript— porque el constructor
   traduce la plantilla y no lo que un script escriba después. Una frase
   inyectada saldría en español en la versión inglesa, en silencio. */
/* SIETE, no seis: el séptimo es «Dirigir el proyecto», que es Core y del que
   cuelgan los otros — se elige un trabajo DENTRO de un proyecto. `minmax(0,…)`
   NO es decorativo: sin él una pista de rejilla no baja del `min-content` de
   su ítem, y con siete columnas las etiquetas largas empujarían la tira. */
.jobs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.job{display:flex;flex-direction:column;gap:9px;padding:20px 18px;min-height:44px;
  border:0;border-right:1px solid var(--line);background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer;transition:background .12s var(--ease)}
.job:last-child{border-right:0}
.job:hover{background:var(--surface)}
.job[aria-pressed="true"]{background:var(--surface);box-shadow:inset 0 3px 0 var(--accent)}
.job-n{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.job-l{font-size:15px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.job-bar{width:20px;height:3px;background:var(--c)}
.job[aria-pressed="true"] .job-bar{width:32px;height:4px}
.job-t{display:flex;align-items:baseline;gap:8px;font-family:var(--f-mono);
  font-size:11.5px;color:var(--faint);margin-top:auto}
.job-t s{text-decoration:line-through}
.job-t b{color:var(--ink);font-weight:500}

.answer{padding:30px var(--pad) 40px;border-top:1px solid var(--line);background:var(--surface)}
.ans-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.ans-top h3{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.035em}
/* LA TINTA DE LA PASTILLA LA DECIDE SU FONDO (B305): blanco sobre `--deep`
   daba 3,39:1, por debajo de AA a 11,5px. `--c-on` va junto a `--c` donde el
   color de identidad es claro; el ocre no se oscurece porque es identidad. */
.pill{padding:3px 10px;font-size:11.5px;font-weight:600;background:var(--c);color:var(--c-on,#fff)}
.ans-q{margin:0 0 26px;font-size:15.5px;color:var(--dim);max-width:62ch}
.ans-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:start}
.del{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;
  padding:13px 0;border-top:1px solid var(--line)}
.fmt{font-family:var(--f-mono);font-size:10.5px;font-weight:500;padding:3px 7px;
  border:1px solid var(--line);color:var(--soft);align-self:start}
.del-t{font-size:16px;font-weight:600;letter-spacing:-.01em;align-self:center}
.del-d{grid-column:2;font-size:13.5px;line-height:1.5;color:var(--dim)}
.srcs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.src{font-family:var(--f-mono);font-size:11.5px;padding:5px 9px;border:1px solid var(--line);color:var(--soft)}
.limit{padding:14px 16px;background:var(--warn-wash);border-left:3px solid var(--warn)}
.limit b{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--warn);
  margin-bottom:6px;letter-spacing:.03em}
.limit p{font-size:13.5px;line-height:1.5}
.times{display:flex;gap:26px;margin:22px 0 26px;padding-top:18px;border-top:1px solid var(--line)}
.time b{display:block;font-family:var(--f-display);font-weight:800;font-size:30px;
  letter-spacing:-.04em;line-height:1}
.time span{display:block;font-size:12.5px;color:var(--soft);margin-top:5px}
.time.was b{color:var(--faint);text-decoration:line-through;text-decoration-thickness:2px}

/* ═══ 02 · EL VISOR DE ENTREGABLES ══════════════════════════════════════ */
.docs{display:grid;grid-template-columns:240px 1fr;border-top:1px solid var(--line);min-height:430px}
.doc-list{border-right:1px solid var(--line);display:flex;flex-direction:column}
.doc-b{border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;
  color:inherit;text-align:left;cursor:pointer;padding:15px 20px;display:flex;
  flex-direction:column;gap:5px;min-height:44px}
.doc-b:hover{background:var(--surface)}
.doc-b[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.doc-b strong{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.doc-b em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;opacity:.7}
.doc-v{padding:26px 32px}
.doc-v h3{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.03em;margin-bottom:6px}
.doc-meta{font-family:var(--f-mono);font-size:11.5px;color:var(--soft);margin-bottom:20px}
.sheet{border:1px solid var(--line);overflow:hidden;margin-bottom:20px;background:var(--paper)}
.sheet-h{display:flex;border-bottom:1px solid var(--line);background:var(--surface)}
.sheet-h span{padding:8px 12px;font-family:var(--f-mono);font-size:10.5px;
  color:var(--soft);border-right:1px solid var(--line);white-space:nowrap}
.sheet-h span:first-child{color:var(--ink);font-weight:500}
.sheet table{width:100%;border-collapse:collapse;font-size:12.5px}
.sheet th{text-align:left;font-weight:600;font-size:11px;letter-spacing:.02em;color:var(--soft);
  padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.sheet td{padding:8px 12px;border-bottom:1px solid var(--line)}
.sheet tr:last-child td{border-bottom:0}
.tag{display:inline-block;padding:2px 7px;font-size:10.5px;font-weight:600;font-family:var(--f-mono)}
.tag.ok{background:var(--ok-wash);color:var(--ok)}
.tag.no{background:var(--crit-wash);color:var(--crit-ink)}
.tag.mid{background:var(--warn-wash);color:var(--warn)}

/* ═══ 03 · LO QUE HOY PAGAS FUERA · tabla a sangre, sin caja ════════════ */
.tabla{padding:0 var(--pad) 34px}
.tabla .fila{display:grid;grid-template-columns:44px 1.25fr 1fr 1.35fr;
  align-items:baseline;column-gap:24px;padding:15px 0;border-top:1px solid var(--line)}
.tabla .fila.cab{padding:0 0 9px;border-top:0}
.tabla .cab span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint)}
.tabla .n{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.tabla .t{font-size:17px;font-weight:500;letter-spacing:-.01em}
.tabla .hoy{font-size:14.5px;color:var(--dim)}
.tabla .con{font-size:14.5px}

/* ═══ 04 · PRECIO ═══════════════════════════════════════════════════════ */
.price{display:grid;grid-template-columns:1fr 400px;border-top:1px solid var(--line)}
.price-l{padding:28px var(--pad) 38px;border-right:1px solid var(--line)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.chk{display:flex;align-items:flex-start;gap:11px;padding:12px 0;
  border-bottom:1px solid var(--line);cursor:pointer;min-height:44px}
.chk input{appearance:none;width:19px;height:19px;flex:none;margin:2px 0 0;
  border:2px solid var(--line);cursor:pointer;position:relative;background:var(--paper)}
.chk input:checked{background:var(--accent);border-color:var(--accent)}
.chk input:checked::after{content:'';position:absolute;left:4px;top:.5px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.chk-t{display:block;font-size:15px;font-weight:500;line-height:1.3}
.chk-s{display:block;font-size:12.5px;color:var(--soft);margin-top:2px}
.seats{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.seats-l{font-size:15px;font-weight:500}
.stepper{display:flex;align-items:center;border:1px solid var(--line)}
.stepper button{border:0;background:transparent;color:inherit;font:inherit;font-size:18px;
  width:44px;height:44px;cursor:pointer}
.stepper button:hover{background:var(--surface)}
.stepper .calc-n{width:60px;height:44px;text-align:center;font-family:var(--f-mono);
  font-size:17px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:transparent;color:inherit;-moz-appearance:textfield}
.stepper .calc-n::-webkit-outer-spin-button,.stepper .calc-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.price-r{padding:28px 32px 38px;display:flex;flex-direction:column}
.tot{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
.tot b{font-family:var(--f-display);font-weight:800;font-size:58px;letter-spacing:-.05em;line-height:.95}
/* HIJO DIRECTO, nunca descendiente (B295). El importe vive en un
   `<span class="calc-mes">` DENTRO del <b> —existe porque precios.js necesita
   un objetivo donde escribir, no porque se quiera pintar distinto—, asi que
   `.tot span` lo alcanzaba y lo dejaba en 15px mientras el simbolo de euro,
   que va suelto en el <b>, se quedaba con los 58: medido, el simbolo era casi
   cuatro veces la cifra. Es el mismo defecto que B131 arreglo en
   `.sprice span`, vivo en la regla de al lado. El `>` deja la etiqueta
   «al mes» donde estaba. Lo fija check:precio. */
.tot>span{font-size:15px;color:var(--soft)}
.lines{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.lines>div{display:flex;gap:12px}
/* UN `display` DE AUTOR GANA AL ATRIBUTO `hidden` (B293) · `[hidden]` es
   `display:none` de la hoja del NAVEGADOR, y cualquier regla nuestra que fije
   `display` se la lleva por delante por origen de cascada. Medido en
   Chromium: las SIETE líneas del panel de precio se pintaban siempre —Core,
   las cuatro soluciones, Full y «Por separado · 0 soluciones sueltas · 0 €»—
   pasara lo que pasara con las casillas, así que `calcTrabajos` llevaba
   ocultando líneas que nadie ocultaba. Preexistente, comprobado contra `main`.
   No da ningún error: la calculadora funciona y el panel miente. */
.lines>div[hidden]{display:none}
.lines>div span:first-child{flex-grow:1}
.lines i{font-style:normal;color:var(--soft)}
.lines .m{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.lines .tachado{text-decoration:line-through}
.advice{margin-top:auto;padding-top:20px}
.advice-in{padding:15px 17px;border:1px solid var(--accent);background:var(--warn-wash)}
.advice-in>b{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.advice-in p{font-size:13px;line-height:1.5;color:var(--dim)}

/* ═══ 05 · CÓMO SE TRABAJA + FUENTES ════════════════════════════════════ */
.dos{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.via{padding:26px 34px 32px var(--pad);border-right:1px solid var(--line)}
.via:last-child{border-right:0;padding-left:34px;padding-right:var(--pad)}
.via-n{font-family:var(--f-mono);font-size:11px;color:var(--accent);margin-bottom:10px}
.via h3{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.035em;margin-bottom:9px}
.via p{font-size:14.5px;line-height:1.55;color:var(--dim);margin-bottom:16px}
.via-ej{padding:13px 15px;background:var(--surface);font-family:var(--f-mono);
  font-size:12.5px;line-height:1.6}
.via-ej i{font-style:normal;color:var(--faint)}
.fuentes{padding:24px var(--pad) 34px;border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.f-c{padding:14px 20px 14px 0;border-top:1px solid var(--line);min-width:0}
.f-c b{display:block;font-family:var(--f-display);font-weight:700;font-size:15.5px;
  letter-spacing:-.02em;margin-bottom:4px}
.f-c span{font-size:13px;line-height:1.45;color:var(--dim)}
.det{padding:0 var(--pad) 30px;font-size:14px;line-height:1.6;color:var(--dim);max-width:78ch}
.det b{color:var(--ink);font-weight:600}

/* ═══ CIERRE · el origen, el acceso y la FAQ ════════════════════════════ */
.origen-box{display:grid;grid-template-columns:1fr 250px;gap:36px;align-items:start;
  padding:34px var(--pad);border-bottom:1px solid var(--line)}
.origen-box h2{font-family:var(--f-display);font-weight:800;font-size:30px;
  letter-spacing:-.04em;margin:8px 0 10px}
.origen-box p{font-size:15px;line-height:1.6;color:var(--dim);max-width:60ch}
.origen-link{display:inline-block;margin-top:14px;font-weight:600;font-size:14px;
  border-bottom:2px solid var(--accent);padding-bottom:1px}
.origen-nums{display:grid;gap:14px}
.origen-nums .on{padding-top:11px;border-top:1px solid var(--line)}
.origen-nums .on b{display:block;font-family:var(--f-display);font-weight:800;font-size:28px;
  letter-spacing:-.04em;line-height:1}
.origen-nums .on span{display:block;margin-top:3px;font-size:12.5px;color:var(--soft);line-height:1.35}

.close{display:grid;grid-template-columns:1fr 420px;border-top:1px solid var(--line)}
.close-l{padding:44px 40px 48px var(--pad);border-right:1px solid var(--line)}
.close-l h2{font-family:var(--f-display);font-weight:800;font-size:44px;
  letter-spacing:-.045em;line-height:1.02;margin-bottom:14px}
.close-l>p{font-size:16px;color:var(--dim);max-width:46ch;margin-bottom:24px}
.close-r{padding:44px var(--pad) 48px 36px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:14px 0;font-size:15px;font-weight:500;cursor:pointer;list-style:none;
  display:flex;gap:12px;align-items:baseline;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';font-family:var(--f-mono);color:var(--accent);font-size:15px;flex:none}
.faq details[open] summary::before{content:'–'}
.faq summary h3{font-size:15px;font-weight:500;display:inline}
.faq p{margin:0 0 16px 24px;font-size:14px;line-height:1.55;color:var(--dim);max-width:62ch}

.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:12.5px;color:var(--soft);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font:inherit;font-size:15px}
.form-priv,.form-privacy{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--soft)}
.form-priv a{text-decoration:underline}
.form-error{margin-top:10px;font-size:13px;color:var(--crit-ink);min-height:1em}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.footer{padding:20px var(--pad) 34px;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:11.5px;color:var(--soft)}
.footer a{color:inherit}
.footer a:hover{color:var(--ink)}
.fbeta{margin-top:3px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;font-size:11.5px}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:11.5px}

/* ═══ MODAL DE ACCESO ═══════════════════════════════════════════════════ */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(20,23,26,.45);
  align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{position:relative;background:var(--paper);border:1px solid var(--rule);
  padding:30px 32px;width:min(460px,100%);max-height:90dvh;overflow-y:auto}
.modal h3{font-family:var(--f-display);font-weight:800;font-size:28px;
  letter-spacing:-.04em;margin:10px 0 8px}
.modal .m-sub{font-size:14.5px;color:var(--dim);margin-bottom:22px;line-height:1.5}
.modal-close{position:absolute;top:10px;right:12px;background:none;border:0;
  font-size:24px;line-height:1;color:var(--soft);cursor:pointer;padding:4px 8px}
.form-success{text-align:center;padding:14px 0}
.ok-mark{font-family:var(--f-mono);font-size:30px;color:var(--ok);margin-bottom:8px}

/* ═══ SELECTOR DE IDIOMA · la base vive en `/cabecera.css` ══════════════
   Es el mismo control en la barra y en el pie, y en las 56 páginas. Aquí
   quedan solo los DOS modificadores del pie, que son de esta hoja porque solo
   existen dentro de su pie. ══════════════════════════════════════════════ */
.lang-menu--up{top:auto;bottom:100%;right:auto;left:0;margin:0 0 6px}
.lang-pick--foot{margin-top:12px}

.lang-suggest{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--ink);
  color:var(--paper);display:none;align-items:center;justify-content:center;gap:14px;
  padding:12px 18px;font-size:13.5px;flex-wrap:wrap}
.lang-suggest.show{display:flex}
.lang-suggest a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lang-suggest button{background:none;border:1px solid rgba(255,255,255,.4);color:inherit;
  padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}

/* ═══ PÁGINA DE SOLUCIÓN ════════════════════════════════════════════════ */
.sol-hero{display:grid;grid-template-columns:7fr 5fr;border-bottom:1px solid var(--line)}
.sol-l{padding:50px 40px 44px var(--pad);border-right:1px solid var(--line)}
/* UN ESCALÓN POR DEBAJO DEL TITULAR GLOBAL, y el 88 depende del 104: si el
   global se moviera, este tiene que moverse con él. Se comprobó midiendo
   (B137): con el global contenido a 76, mantener el 88 dejaba las CUATRO
   páginas de solución más gritonas que la home, al revés de la jerarquía.
   Sus titulares son además una sola palabra («Engineering»). */
.sol-l h1{font-size:88px;margin:0 0 22px}
.sol-marca{display:inline-block;width:56px;height:5px;background:var(--c);margin-bottom:22px}
.sol-r{padding:50px var(--pad) 44px 36px;display:flex;flex-direction:column}
.sol-num{display:flex;align-items:baseline;gap:13px;margin-bottom:auto}
.sol-num b{font-family:var(--f-display);font-weight:800;font-size:72px;letter-spacing:-.05em;line-height:.88}
.sol-num span{font-size:14px;line-height:1.35;color:var(--dim)}
.sol-pvp{padding-top:22px;border-top:1px solid var(--line);margin-top:26px}
.sol-pvp b{font-family:var(--f-display);font-weight:800;font-size:38px;letter-spacing:-.04em}
.sol-pvp i{font-style:normal;font-size:14px;color:var(--soft);margin-left:8px}
.sol-pvp p{margin-top:8px;font-size:13px;line-height:1.5;color:var(--dim)}
.herr{padding:0 var(--pad) 34px}
.herr-fila{display:grid;grid-template-columns:44px 1.1fr 1.6fr auto;align-items:baseline;
  column-gap:22px;padding:14px 0;border-top:1px solid var(--line)}
.herr-fila.cab{padding:0 0 9px;border-top:0}
.herr-fila.cab span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint)}
.herr-n{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.herr-t{font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.herr-d{font-size:13.5px;line-height:1.5;color:var(--dim)}
.comp{font-family:var(--f-mono);font-size:10.5px;padding:3px 8px;border:1px solid var(--line);
  color:var(--soft);white-space:nowrap}
.enlaces{display:flex;flex-wrap:wrap;padding:0 var(--pad) 34px}
.enl{flex:1 1 210px;min-width:0;padding:16px 22px 16px 0;border-top:1px solid var(--line)}
.enl b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.enl span{font-size:13px;color:var(--dim);line-height:1.45}
/* El bloque de soluciones de la home va en DOS GRUPOS desde B293 · «para
   cualquier organización» y «si desarrollas producto físico». El rótulo del
   grupo habla el lenguaje de `.sub`, no el de un titular: separa sin competir
   con los nombres de producto, que es lo que se viene a leer.
   `--2` porque el primer grupo trae DOS tarjetas en una rejilla de tres, y un
   hueco a la derecha se lee como una tarjeta que falta. */
.grupo-sol{padding:22px var(--pad) 9px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--soft)}
.otras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 var(--pad) 34px}
.otras--2{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:12px}
.otra{display:block;padding:18px 24px 20px 0;border-top:2px solid var(--c);min-width:0}
.otra:hover{background:var(--surface)}
.otra b{display:block;font-family:var(--f-display);font-weight:800;font-size:24px;
  letter-spacing:-.035em;margin-bottom:7px}
.otra span{display:block;font-size:13.5px;line-height:1.5;color:var(--dim);margin-bottom:11px}
.otra i{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--faint)}

/* ═══ PÁGINA DE PRECIOS ═════════════════════════════════════════════════ */
.prods{border-top:1px solid var(--line)}
.prod{display:grid;grid-template-columns:44px 1.15fr 1.7fr auto auto;align-items:baseline;
  column-gap:24px;padding:20px var(--pad);border-bottom:1px solid var(--line)}
.prod.cab{padding-top:0;padding-bottom:10px;border-bottom:0}
.prod.cab span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint)}
.prod-marca{width:24px;height:5px;background:var(--c);align-self:center}
.prod-n{font-family:var(--f-display);font-weight:800;font-size:23px;letter-spacing:-.035em}
.prod-tag{font-size:14.5px;color:var(--dim);line-height:1.45}
.prod-h{font-family:var(--f-mono);font-size:12.5px;color:var(--faint);white-space:nowrap}
.prod-p{font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.04em;white-space:nowrap}
.prod-p i{font-style:normal;font-size:12.5px;font-family:var(--f-body);font-weight:400;
  color:var(--soft);margin-left:6px}
.billing{display:inline-flex;border:1px solid var(--line);margin:0 var(--pad) 18px}
.billing button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;
  color:var(--soft);padding:9px 16px;cursor:pointer;min-height:44px}
.billing button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.billing .save{font-weight:400;font-size:12px}
.comparativa{padding:0 var(--pad) 40px}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th{position:sticky;top:57px;background:var(--paper);text-align:center;font-family:var(--f-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.03em;color:var(--soft);padding:10px 6px;
  border-bottom:1px solid var(--rule);white-space:nowrap}
.cmp th:first-child{text-align:left;padding-left:0}
.cmp td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:center}
.cmp td:first-child{text-align:left;padding-left:0;font-size:14.5px}
.cmp tr.mod td{padding:20px 0 7px;border-bottom:1px solid var(--rule);font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.04em;color:var(--faint);text-align:left}
.punto{display:inline-block;width:7px;height:7px;background:var(--ink)}
.punto.off{background:transparent;border:1px solid var(--line)}
.fine{padding:0 var(--pad) 30px;font-size:13px;color:var(--soft);line-height:1.6}
.fine a{border-bottom:1px solid var(--line2)}

/* ═══ LAS MAQUETAS DE LAS PÁGINAS DE MÓDULO ═════════════════════════════
   Cuatro bloques que enseñan una pantalla del producto: el gantt, el flujo
   de sourcing, la ficha de patente y la tabla de elegibilidad.

   NACIERON SIN CSS y se sirvieron así desde `cf14c95` (10 jul 2026): el
   marcado se copió de la HOME, donde sus reglas sí vivían, y las reglas se
   quedaron allí. Ocho páginas publicadas los pintaban como texto suelto.
   La dirección A NO los rompió —medido en `0ab17f1`, el commit anterior:
   cero definiciones— y la entrada B139 que decía lo contrario está
   corregida: una causa falsa es lo que hace que nadie vuelva a mirarlo.

   Van AQUÍ y no en cada página porque `demo-card`, `demo-tag` y `pat-title`
   las usan varias: cuatro copias divergen a la primera corrección y la que
   se queda atrás no da error, se ve distinta — que es justo el motivo por
   el que existe esta hoja.

   Vocabulario de A, sin inventar ninguno: la caja es `.sheet` (borde de
   línea, papel, radio 0, sin sombra), el rótulo es su cabecera, las
   pastillas son `.src` y los estados son `.tag.ok` / `.tag.mid`. El color
   lo pone `--acc`, que es la identidad de esa página y la gasta UNA vez. */
/* El TECHO no es estético: sin él la caja mide 1.328px en un portátil y la
   fila del proveedor deja 1.100 de vacío entre su nombre y su CNAE, que es
   lo contrario de enseñar una pantalla. Medido a 1440 antes de ponerlo. */
.demo-card{border:1px solid var(--line);background:var(--paper);max-width:760px;
  padding:0 0 16px;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
/* El rótulo es una BANDA, no una etiqueta flotando en la esquina: así es
   como A rotula una superficie (`.sheet-h`).
   EL RELLENO VA EN LOS HIJOS Y NO EN LA CAJA, que es lo contrario de lo
   natural. La primera versión daba `padding:0 16px` a la caja y sacaba la
   banda con `margin:0 -16px`: se veía bien y el banco la cazó saliéndose 16px
   de la caja de contenido de su padre. Un margen negativo es un desborde de
   verdad, y taparlo con `overflow:hidden` en la caja habría SILENCIADO el
   aserto en vez de arreglar nada. */
.demo-card>:not(.demo-tag){margin-inline:16px}
.demo-card .demo-tag{padding:8px 16px;margin-bottom:4px;background:var(--surface);
  border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.04em;color:var(--soft)}

/* Gantt · el carril es la superficie y la barra es tinta de la página. Las
   barras llevan `left` y `width` EN LÍNEA porque eso es el dato; el color
   ya no, que eran cuatro tonos sin relación entre sí ni con la página. */
.gantt-row{display:grid;grid-template-columns:minmax(0,96px) 1fr;align-items:center;gap:12px}
.gantt-label{font-family:var(--f-mono);font-size:10.5px;color:var(--soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-track{position:relative;height:10px;background:var(--surface);min-width:0}
.gantt-bar{position:absolute;top:0;height:10px;background:var(--acc,var(--accent))}

/* Flujo de sourcing · las cajas hablan el idioma de `.src` (mono, borde de
   línea, sin relleno de color) y envuelven: con `nowrap` la fila empujaba
   su columna en un teléfono sin sacar scroll de página (B287). */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flow-box{font-family:var(--f-mono);font-size:10.5px;padding:5px 9px;
  border:1px solid var(--line);color:var(--soft)}
.flow-arrow{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.supplier{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:6px 14px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px}
.prov{font-weight:500}
.cnae{font-family:var(--f-mono);font-size:10.5px;color:var(--soft)}

/* Ficha de patente · el número es lo único que lleva color. */
.pat-num{font-family:var(--f-mono);font-size:12.5px;font-weight:600;color:var(--acc,var(--accent))}
.pat-title{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.pat-chips{display:flex;flex-wrap:wrap;gap:6px}
.pat-chips .chip{font-family:var(--f-mono);font-size:10.5px;padding:3px 8px;
  border:1px solid var(--line);color:var(--soft)}
.pat-meta{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:9px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--soft)}

/* Elegibilidad · los estados son `.tag.ok` y `.tag.mid` con otro nombre, así
   que toman sus MISMOS valores: dos vocabularios para «cumple» y «depende»
   obligarían a aprenderlos dos veces. */
.elig{display:flex;flex-direction:column}
.elig-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:6px 12px;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.elig .ek{color:var(--dim)}
.elig-state{font-family:var(--f-mono);font-size:10.5px;font-weight:600;padding:2px 7px}
.elig-yes{background:var(--ok-wash);color:var(--ok)}
.elig-dep{background:var(--warn-wash);color:var(--warn)}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════
   Un ítem de REJILLA no baja de su min-content, así que las pistas que
   contienen un scroller o un nombre largo llevan `min-width:0` explícito: sin
   él la pista se estira por dentro y arrastra a su vecina, y el scroll de
   página NO lo ve (B286, B287). */
@media(max-width:980px){
  :root{--pad:26px}
  .hero,.sol-hero,.dos,.docs,.price,.close,.origen-box{grid-template-columns:1fr}
  .docs>*,.price>*,.close>*,.origen-box>*{min-width:0}
  .hero-l,.sol-l,.via,.doc-list,.price-l,.close-l{border-right:0;border-bottom:1px solid var(--line)}
  .via:last-child{border-bottom:0;padding-left:var(--pad)}
  .hero-l,.sol-l{padding:34px var(--pad) 28px}
  .hero-r,.sol-r,.doc-v,.price-r,.close-r{padding:26px var(--pad) 32px}
  /* EL SUELO DEPENDE DEL TRACKING, y eso no se ve leyendo. Con el -.055em
     de A, «Sustainability» —una sola palabra, la más larga de las seis
     páginas— cabe a 38px. Aflojar el tracking la ENSANCHA: a -.04em pasa a
     necesitar 275px donde un móvil de 320 ofrece 268, y como una palabra no
     se parte, empujaba su columna a 327px y sacaba 7px de scroll a la página
     ENTERA. Si alguna vez se vuelve a aflojar, este suelo baja a 36 con él.
     Lo cazó `check:movil`, no la lectura: a 360px ya cabía, así que mirar un
     solo ancho habría dado verde. */
  h1,.sol-l h1{font-size:clamp(38px,9.5vw,62px)}
  .jobs{grid-template-columns:1fr}
  .job{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;
    align-items:center;gap:12px;min-height:56px}
  .job-bar{width:3px;height:18px;flex:none}
  .job-l{flex-grow:1}
  .job-t{margin-top:0;flex:none}
  /* EL ACORDEÓN (23 sep 2026) · selector.js mueve cada panel justo detrás
     de su fila, así que fila y panel se leen como un solo bloque: la fila
     abierta pierde su línea inferior y la pone el panel al cerrar. El
     chevron es lo que dice que la fila se despliega; sin él, siete filas
     con una cifra a la derecha se leen como una tabla. */
  .job::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 0 4px;
    border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
    transform:translateY(-2px) rotate(45deg);transition:transform .15s var(--ease)}
  .job[aria-pressed="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .job[aria-pressed="true"]{border-bottom-color:transparent}
  .jobs>.answer{border-top:0;border-bottom:1px solid var(--line);padding-top:6px}
  /* Pegado a su fila, el título del panel repetía la etiqueta que el dedo
     acaba de tocar. Se oculta A LA VISTA y no con display:none: sigue siendo
     el encabezado del panel para quien navega por encabezados. */
  .jobs>.answer .ans-top h3{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .ans-grid,.checks{grid-template-columns:1fr;gap:26px}
  .doc-list{flex-direction:row;overflow-x:auto}
  .doc-b{min-width:182px;border-bottom:0;border-right:1px solid var(--line)}
  .sec-h{flex-wrap:wrap;gap:12px;padding:28px var(--pad) 18px}
  .sec-h .rule,.sec-h .hint{display:none}
  .sec-h h2{font-size:26px}
  .close-l h2{font-size:32px}
  .tot b{font-size:46px}
  .sheet{overflow-x:auto}
  .f-grid{grid-template-columns:1fr 1fr}
  .tabla .fila,.herr-fila{grid-template-columns:34px 1fr;row-gap:5px}
  .tabla .fila.cab,.herr-fila.cab{display:none}
  .tabla .hoy,.tabla .con,.herr-d,.comp{grid-column:2}
  .comp{justify-self:start}
  .otras{grid-template-columns:1fr}
  .otra{padding:16px 0 18px}
  /* La colocación del precio va EXPLÍCITA: con dos hijos que ocupan las
     columnas 2-3 el cursor de autocolocación ya ha pasado de largo cuando le
     toca, y la celda caía en la columna 1 de una cuarta fila. */
  .prod{grid-template-columns:24px minmax(0,1fr) max-content;column-gap:16px;
    row-gap:7px;padding:18px var(--pad)}
  .prod.cab{display:none}
  .prod-marca{grid-area:1/1}
  .prod-n{grid-area:1/2;font-size:21px}
  .prod-p{grid-area:1/3;text-align:right}
  .prod-p i{display:block;margin-top:2px;text-align:right}
  .prod-tag{grid-area:2/2/2/4}
  .prod-h{grid-area:3/2/3/4}
  .comparativa{padding:0 0 40px;overflow-x:auto}
  .cmp{min-width:560px}
  .cmp th:first-child,.cmp td:first-child,.cmp tr.mod td{padding-left:var(--pad)}
  .cmp th{position:static}
}
@media(max-width:600px){
  .times{gap:18px}
  .job-t s{display:none}
  .f-grid{grid-template-columns:1fr}
  .eyebrow,.kicker{flex-wrap:wrap}
}

/* La tabla de dos columnas · la copia de solución no trae el «hoy», así que
   esa columna no se pinta en vez de rellenarse con un valor repetido. */
.tabla .fila.dos-col{grid-template-columns:44px 1fr 1.6fr}
@media(max-width:980px){.tabla .fila.dos-col{grid-template-columns:34px 1fr}}

/* Y la de tres · «Para quién» (B293). El reparto NO es el de la tabla base
   (1.25fr 1fr 1.35fr): ahí la columna ancha es la última, y aquí la larga es
   la del medio —qué usa cada organización— con un nombre corto delante y un
   par de productos detrás. Con el reparto de la base, la del medio se parte
   en cinco renglones y la última sobra medio ancho.
   La columna del producto va en `.con`, que es la tinta normal: es la
   respuesta, no la letra pequeña. */
.tabla .fila.tres-col{grid-template-columns:44px 1fr 1.9fr .8fr}
.tabla .fila.tres-col .sol{font-family:var(--f-mono);font-size:12px;color:var(--dim)}
@media(max-width:980px){.tabla .fila.tres-col{grid-template-columns:34px 1fr}
  .tabla .fila.tres-col .sol{grid-column:2}}

/* ═══ LA ÚNICA BANDA OSCURA · el cierre ═════════════════════════════════
   A es papel, así que las dos bandas de vídeo del sistema anterior no
   encajan. Se conserva UNA, en el cierre, que es donde una banda oscura
   suma —cierra— en vez de partir la lectura. El vídeo se dibuja MÁS ALTO
   que su caja y anclado arriba para que la marca de agua del generador
   caiga siempre fuera, sea cual sea la proporción de la ventana. */
/* LAS DOS BANDAS COMPARTEN MECÁNICA, no dos copias parecidas: el hero y el
   cierre. Lo único que cambia entre ellas es el RECORTE, y por un motivo
   medido, no estético.

   La marca de agua del generador —una estrella de cuatro puntas— vive al 91 %
   del ancho y entre el 79 % y el 87 % del alto del fotograma, y solo se ve en
   el tramo de OFICINA (el bucle es 0-4,3 s plano aéreo de Londres · 5,3-8,4 s
   oficina · 9,4 s monitores con CAD). Con `object-position:center top` y una
   altura de 1/(1-crop), lo que se corta por abajo es `1 - 1,778/R`, donde R es
   la razón de la caja: no depende del recorte mientras la caja sea ANCHA.
   El cierre mide 2,363 y corta el 24,8 % — la estrella (que empieza al 79 %)
   queda fuera con margen. Un hero mide ~1,9 y cortaría el 6,4 %, así que ahí
   el recorte SÍ tiene que trabajar: sube a .26, que en la rama estrecha corta
   ese 26 % directo.
   Y en un teléfono las dos son estrechas (R < 1,778), así que manda el
   recorte en las dos. */
.vsec,.hero-band{--crop:.16;--veil:.68;position:relative;isolation:isolate;
  overflow:hidden;background:#0B0F12}
.hero-band{--crop:.26}
.vsec>.vband-media,.hero-band>.vband-media{position:absolute;inset:0;overflow:hidden;z-index:0}
.vsec>.close,.hero-band>.hero{position:relative;z-index:1}
.vband-media video,.vband-media .vband-ph{position:absolute;top:0;left:0;width:100%;
  height:calc(100% / (1 - var(--crop)));object-fit:cover;object-position:center top;display:block}
.vband-ph{background:radial-gradient(120% 100% at 50% 0%,#16323a 0%,#0b1418 70%)}
.vband-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(7,16,20,var(--veil))}
/* Sobre la banda, el texto va en paleta CLARA FIJA y no por token: un color
   que sigue al tema es invisible la mitad de las veces sobre un fondo que no
   cambia. Es la lección del saludo sobre el lienzo en la aplicación. */
.vsec .close{border-top:0}
.vsec .close-l,.vsec .close-r{border-color:rgba(255,255,255,.16)}
.vsec .close-l h2{color:#F4F7F6}
.vsec .close-l>p,.vsec .lede{color:#C7D4D0}
.vsec .sub{color:#8FA8A0}
.vsec .faq{border-top-color:rgba(255,255,255,.16)}
.vsec .faq details{border-bottom-color:rgba(255,255,255,.16)}
.vsec .faq summary{color:#E6EFEC}
.vsec .faq p{color:#B3C4BF}
/* EL BOTÓN SE INVIERTE, NO SE PINTA DE ACENTO. Esta regla decía
   `background:var(--accent)` y era BYTE A BYTE la misma declaración que
   `.btn-primary:hover` de la línea 204: el único punto de conversión de la
   web se pintaba permanentemente en su estado pulsado, así que pasar el ratón
   por encima no hacía nada y quien lo mira con recelo lee «esto está roto».
   Y gastaba el acento por SEGUNDA vez en la misma pantalla, que es justo lo
   que A prohíbe. La lógica correcta es la de la versión clara dada la vuelta:
   allí el reposo es la tinta sobre papel y el hover es el acento; aquí el
   reposo es el papel sobre tinta y el hover sigue siendo el acento. */
.vsec .btn-primary{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.vsec .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.vsec .form-privacy{color:#8FA8A0}

/* ── EL HERO SOBRE VÍDEO · la paleta clara, FIJA ──────────────────────────
   Mismo criterio que la banda de cierre y por el mismo motivo: estos colores
   NO pueden salir de los tokens, porque los tokens describen tinta sobre
   papel y aquí el fondo es un vídeo oscuro que no cambia con ellos.
   El botón primario se INVIERTE (papel sobre tinta) en vez de pintarse de
   acento: gastarlo aquí sería la segunda vez en la misma pantalla —el número
   de sección ya se lo lleva— y además dejaría el reposo idéntico al hover,
   que es el defecto que hubo que arreglar en el cierre. */
.hero-band .hero{border-bottom:0}
.hero-band .hero-l,.hero-band .hero-r{border-color:rgba(255,255,255,.18)}
.hero-band h1{color:#F4F7F6}
.hero-band .lede{color:#C7D4D0}
.hero-band .eyebrow,.hero-band .ficha-t{color:#BCCBC6}
/* EL ACENTO SE ACLARA SOBRE EL VÍDEO, y el valor está calculado, no elegido.
   El `#E1341A` de papel y el `#FF7A5C` que probé primero se quedan en 2,99:1
   sobre el fotograma más claro del bucle. Haciendo la cuenta al revés desde
   el peor fondo medido, hace falta luminancia relativa 0,564; `#FFB8A8` da
   0,582. Sigue siendo el acento —es el mismo tono— y sigue gastándose UNA
   vez por pantalla. */
.hero-band .eyebrow b{color:#FFB8A8}
.hero-band .ficha-r{color:#E3ECE9;border-bottom-color:rgba(255,255,255,.18)}
.hero-band .ficha-r span:last-child{color:#F4F7F6}
.hero-band .big b{color:#fff}
.hero-band .big span{color:#C7D4D0}
.hero-band .btn-primary{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.hero-band .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hero-band .btn-ghost{color:#F4F7F6;border-bottom-color:var(--accent)}
.hero-band .btn-ghost:hover{color:#fff;border-bottom-color:#fff}