/* =====================================================================
   Sitio comercial de TPV LP (tpvlp.app)
   =====================================================================

   R1 identidad visual: esta hoja YA NO define su propia paleta ni su
   propia tipografia. Todo sale de `tokens.css`, compartido con el panel.

   Antes habia dos sistemas sin un solo valor en comun; `/comprar` llegaba
   a pintar el cuerpo en papel `#F3F0E9` y el pie en gris `#f3f4f6` de
   Tailwind. Ahora hay uno.

   Fuera: Bodoni Moda como display. La serif tocaba el 3,5% de los
   elementos y costaba dos ejes de una familia servida por un tercero.
   ===================================================================== */
@import "tokens-6anun4X.css";

:root{
  /* Alias sobre tokens.css. Se conservan los nombres cortos porque los
     usan ~400 declaraciones de esta hoja. */
  --paper:var(--t-paper);
  --paper-2:var(--t-surface-2);
  --paper-3:var(--t-rule);
  --ink:var(--t-ink);
  --ink-2:var(--t-ink-2);
  --ink-3:var(--t-ink-3);
  --rule:var(--t-rule);
  --rule-2:var(--t-rule-strong);
  --accent:var(--t-accent);
  --accent-soft:var(--t-accent-soft);
  --kraft:var(--t-ink-3);

  /* `--serif` ya no es una serif. Se mantiene el nombre para que las
     reglas existentes no se rompan, pero apunta a la unica familia del
     sistema: los titulares son Archivo 800, no otra fuente. */
  --serif:var(--t-sans);
  --sans:var(--t-sans);
  --mono:var(--t-mono);

  --gut:clamp(20px,4vw,64px);
  --sec:clamp(48px,5.5vw,84px);
  --max:1180px;
}

/* =====================================================================
   NOTA sobre el mono
   =====================================================================
   Antes IBM Plex Mono tocaba 183 de los 632 elementos de la portada
   (29 %): cintillos, etiquetas de seccion, botones, navegacion, pies de
   figura y hasta parrafos. Estaba ahi por parecer tecnico.

   Ahora se usa en cuatro sitios, y en los cuatro el contenido ES una
   lectura de maquina: el EAN impreso, los atributos de la etiqueta, la
   tabla de existencias y las horas del recorrido de tienda.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* ── escala tipográfica (una sola familia: Archivo) ── */
/*
 * Antes: Bodoni Moda 700 a 4,4rem con interlineado 1.02 — el titular
 * ocupaba seis lineas y empujaba el producto fuera del primer viewport.
 * Ahora: la unica familia del sistema en 800. Mas pequeno, mas apretado,
 * y deja sitio a lo que el visitante viene a ver.
 */
.display{
  font-family:var(--sans);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.022em;
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  max-width:20ch;
}
/* La segunda linea es el giro del argumento. Antes iba en cursiva serif,
   que es el gesto editorial mas repetido del genero. Ahora se distingue
   por color, que ademas es la unica cosa que el acento significa aqui:
   "atiende a esto". */
.display-turn{color:var(--accent)}
.h2{
  font-family:var(--sans);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.018em;
  font-size:clamp(1.5rem,2.4vw,2rem);
}
.h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.06rem;
  line-height:1.35;
  letter-spacing:-.005em;
}
.lede{
  font-size:clamp(1.06rem,1.7vw,1.32rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:56ch;
}
.body{color:var(--ink-2);max-width:64ch}
.small{font-size:.94rem;line-height:1.55;color:var(--ink-2)}

/* mono is the operational voice */
.mono{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-3);
}
.num{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;color:var(--accent);font-weight:500}

/* ── skip link ──────────────────────────────── */
.skip{min-height:44px;display:inline-flex;align-items:center;
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-family:var(--sans);font-size:.8rem;
}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ── masthead ───────────────────────────────── */
.masthead{
  border-bottom:1px solid var(--rule-2);
  position:sticky;top:0;z-index:50;
  background:var(--paper);
}
.masthead-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:14px;
}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap;flex-shrink:0}
.brand-mark{
  font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;
}
.brand-sub{font-family:var(--sans);font-size:.75rem;letter-spacing:0;color:var(--ink-3)}
.nav{display:flex;gap:26px;align-items:center}
.nav a{
  font-family:var(--sans);font-size:.85rem;letter-spacing:0;
  text-decoration:none;color:var(--ink-2);padding-block:6px;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
@media (max-width:940px){.nav{display:none}}
@media (max-width:420px){.brand-sub{display:none}.masthead-in{padding-block:11px}}

/* ── buttons ────────────────────────────────── */
/* Accion principal = acento, igual que en el panel. El negro se reserva
   para el texto. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  /* Sin versalitas: un boton no es una etiqueta de seccion. En caja mixta
     se lee mas rapido y deja de parecer un cintillo mas. */
  font-family:var(--sans);font-size:.9rem;letter-spacing:0;font-weight:600;
  padding:11px 20px;text-decoration:none;border:1px solid var(--accent);
  border-radius:var(--t-r-control);
  background:var(--accent);color:var(--t-on-accent);
  transition:background var(--t-dur-micro) var(--t-ease),border-color var(--t-dur-micro) var(--t-ease);
}
.btn:hover{background:var(--t-accent-hover);border-color:var(--t-accent-hover)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-sm{padding:8px 14px;font-size:.82rem;min-height:44px}
.btn .arrow{transition:transform .15s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ── section frame ──────────────────────────── */
/*
 * Antes: 124px arriba y 124px abajo por seccion. Nueve secciones = 2.232px
 * de la pagina eran solo aire, y las nueve tenian la misma altura, que es
 * lo que hacia que el scroll se leyera como una plantilla repetida.
 * Ahora el ritmo es mas corto y ADEMAS alterna: las secciones de prueba
 * (identidad, dia) respiran mas que las de ficha (requisitos, precio).
 */
.section{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--rule)}
.section--wide{padding-block:clamp(52px,6.5vw,96px)}
.section--tight{padding-block:clamp(32px,4vw,56px)}
/* sticky masthead must not swallow the anchor target */
:where(section[id]){scroll-margin-top:86px}
.section-head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-bottom:clamp(32px,4.5vw,56px)}
.section-head .num{padding-top:.7em}

/* ── hero ───────────────────────────────────── */
.hero{padding-top:clamp(28px,3vw,44px);padding-bottom:clamp(40px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,48px)}
@media (min-width:1000px){
  /* La prueba pesa casi tanto como la afirmacion: 1.1 / 1, no 1.35 / .85. */
  .hero-grid{grid-template-columns:1.1fr 1fr;align-items:start;gap:clamp(36px,4vw,56px)}
}
.hero h1{margin-bottom:18px}
.hero .lede{margin-bottom:24px;font-size:clamp(1rem,1.3vw,1.15rem);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
/* El precio va junto al boton, no en una nota al pie. Es informacion de
   compra, no una aclaracion. */
.hero-price{display:flex;flex-direction:column;line-height:1.25}
.hero-price b{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.hero-price span{font-size:.78rem;color:var(--ink-3)}
/* El mono deja de ser textura: aqui es una linea de ficha tecnica, y son
   datos tecnicos de verdad. */
.hero-note{font-size:.78rem;color:var(--ink-3);margin-top:20px;padding-top:14px;border-top:1px solid var(--rule)}

/* ── the price label (real product artefact) ── */
.tag-stack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.tag-figure{margin:0;display:flex;flex-direction:column;gap:14px;width:100%;align-items:flex-start}
.tag{
  width:100%;max-width:340px;
  background:var(--paper-2);
  border:1px solid var(--rule-2);
  border-radius:3px;
  padding:13px 15px 11px;
  box-shadow:0 1px 0 var(--rule);
}
.tag-name{
  font-family:var(--sans);font-weight:600;font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--rule);
}
.tag-body{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
.tag-bars{width:100%;height:46px;color:var(--ink)}
.tag-ean{font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:var(--ink-3);margin-top:5px}
.tag-attrs{font-family:var(--mono);font-size:.68rem;line-height:1.5;text-align:center;color:var(--ink-2);letter-spacing:.04em}
.tag-attrs .sep{color:var(--ink-3)}
.tag-price{font-family:var(--serif);font-weight:700;font-size:1.4rem;text-align:center;margin-top:5px;letter-spacing:-.02em}
.tag-caption{font-family:var(--sans);font-size:.78rem;letter-spacing:0;color:var(--ink-3);line-height:1.5;max-width:38ch}
.stockbox{width:100%;max-width:340px;border:1px solid var(--rule-2);background:var(--paper-2);padding:14px 15px 12px;margin-top:4px}
.stockbox .sb-h{font-family:var(--sans);font-size:.75rem;letter-spacing:var(--t-tracking-caps);text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.sb-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.8125rem;font-variant-numeric:tabular-nums}
.sb-table th,.sb-table td{padding:5px 2px;text-align:right;border-bottom:1px solid var(--rule);font-weight:400}
.sb-table th:first-child,.sb-table td:first-child{text-align:left;color:var(--ink-2)}
.sb-table thead th{font-size:.75rem;letter-spacing:var(--t-tracking-caps);text-transform:uppercase;color:var(--ink-3);border-bottom-color:var(--rule-2)}
.sb-table tbody tr:last-child td{border-bottom:0}
.sb-table td{color:var(--ink)}
.sb-table td.zero{color:var(--accent)}
.sb-foot{font-family:var(--sans);font-size:.78rem;letter-spacing:0;color:var(--ink-3);margin:12px 0 0;line-height:1.5}
.tag-caption b{color:var(--ink-2);font-weight:500}

/* ── two-column editorial split ─────────────── */
.split{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}}
.split-wide{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px)}
@media (min-width:900px){.split-wide{grid-template-columns:1.1fr .9fr;align-items:start}}

/* ── identity rows (tallas / colores / unidad) ─ */
.idlist{margin-top:34px;border-top:1px solid var(--rule-2)}
.idlist li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding-block:18px;border-bottom:1px solid var(--rule);
}
.idlist .k{font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:.25em;min-width:74px}
.idlist .v strong{display:block;font-weight:600;font-size:1rem;margin-bottom:3px}
.idlist .v span{color:var(--ink-2);font-size:.95rem;line-height:1.5}

/* ── the "escribe, no sincroniza" diagram ───── */
.flowbox{border:1px solid var(--rule-2);background:var(--paper-2);padding:clamp(20px,3vw,32px)}
.flowbox h3{font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 20px;font-weight:500}
.flowrow{display:grid;grid-template-columns:1fr;gap:12px}
.flowcell{
  border:1px solid var(--rule);background:var(--paper);
  padding:14px 16px;
}
.flowcell .t{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.flowcell .d{font-size:.94rem;color:var(--ink-2);line-height:1.5}
.flowcell.is-shared{border-color:var(--accent);background:var(--accent-soft)}
.flowcell.is-shared .t{color:var(--accent)}
.flowcell.is-shared .d{color:var(--ink)}
.flowjoin{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;color:var(--ink-3);
  text-align:center;padding-block:2px;
}

/* ── a day in the shop: timeline ────────────── */
.day{border-top:1px solid var(--rule-2);counter-reset:step}
.day li{
  display:grid;grid-template-columns:1fr;gap:8px;
  padding-block:clamp(22px,3vw,30px);border-bottom:1px solid var(--rule);
}
@media (min-width:820px){
  .day li{grid-template-columns:96px 1fr 1fr;gap:clamp(20px,3vw,44px);align-items:start}
}
.day .hour{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--accent);font-weight:500;padding-top:.2em}
.day .what strong{display:block;font-family:var(--sans);font-weight:600;font-size:1.06rem;line-height:1.35;margin-bottom:6px}
.day .what span{color:var(--ink-2);font-size:.95rem;line-height:1.55;display:block}
.day .sys{
  font-family:var(--sans);font-size:.74rem;line-height:1.7;color:var(--ink-3);
  border-left:1px solid var(--rule-2);padding-left:16px;letter-spacing:.02em;
}
@media (max-width:819px){.day .sys{border-left:0;padding-left:0;border-top:1px dashed var(--rule-2);padding-top:12px;margin-top:4px}}
.day .sys b{color:var(--ink-2);font-weight:500}

/* ── capability ledger (not cards) ──────────── */
.ledger{border-top:1px solid var(--rule-2)}
.ledger-group{border-bottom:1px solid var(--rule-2)}
.ledger-group > summary{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding-block:20px;cursor:pointer;list-style:none;
}
.ledger-group > summary::-webkit-details-marker{display:none}
.ledger-group > summary:hover .lg-title{color:var(--accent)}
.lg-num{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.lg-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.01em;line-height:1.15}
.lg-meta{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ledger-group[open] .lg-meta::after{content:" −"}
.ledger-group:not([open]) .lg-meta::after{content:" +"}
.lg-body{padding-bottom:26px}
.lg-intro{color:var(--ink-2);max-width:62ch;margin-bottom:20px;font-size:.98rem}
.lg-items{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
@media (min-width:760px){.lg-items{grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px)}}
.lg-items li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding-block:11px;border-bottom:1px solid var(--rule);
}
.lg-items .bullet{font-family:var(--sans);font-size:.7rem;color:var(--accent);padding-top:.35em}
.lg-items strong{font-weight:600;font-size:.96rem}
.lg-items span{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.5;margin-top:2px}

/* ── honesty block ──────────────────────────── */
.honest{border:1px solid var(--rule-2);border-left:3px solid var(--accent);background:var(--paper-2);padding:clamp(24px,3.4vw,40px)}
.honest li:last-child{border-bottom:0}
@media (min-width:900px){#limites .split-wide > div:first-child{position:sticky;top:110px}}
.honest ul{margin-top:22px;border-top:1px solid var(--rule)}
.honest li{padding-block:14px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:14px}
.honest .st{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:.3em;min-width:104px}
.honest .tx strong{display:block;font-weight:600;font-size:.98rem;margin-bottom:2px}
.honest .tx span{color:var(--ink-2);font-size:.92rem;line-height:1.5}

/* ── requirements strip ─────────────────────── */
.reqs{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule-2)}
@media (min-width:760px){.reqs{grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,4vw,56px)}}
.reqs > div{padding-block:18px;border-bottom:1px solid var(--rule)}
.reqs dt{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.reqs dd{margin:0;font-size:.96rem;color:var(--ink-2);line-height:1.5}
.reqs dd b{color:var(--ink);font-weight:600}

/* ── price ──────────────────────────────────── */
.price-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px);align-items:start}
@media (min-width:900px){.price-grid{grid-template-columns:.9fr 1.1fr}}
.price-figure{border:1px solid var(--rule-2);background:var(--paper-2);padding:clamp(26px,3.4vw,38px)}
.price-amount{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.price-amount .n{font-family:var(--serif);font-weight:700;font-size:clamp(3.4rem,8vw,4.8rem);line-height:.92;letter-spacing:-.03em}
.price-amount .u{font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;color:var(--ink-3)}
.price-unit{font-family:var(--sans);font-size:.85rem;letter-spacing:0;color:var(--accent);margin-bottom:20px}
.price-figure hr{border:0;border-top:1px solid var(--rule);margin-block:20px}
.price-list li{display:grid;grid-template-columns:auto 1fr;gap:11px;padding-block:7px;font-size:.94rem;color:var(--ink-2)}
.price-list .tick{color:var(--accent);font-family:var(--sans);font-size:.78rem;padding-top:.15em}

/* ── FAQ ────────────────────────────────────── */
.faq{border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding-block:20px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-weight:600;font-size:1.02rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .sign{font-family:var(--sans);font-size:.9rem;color:var(--ink-3)}
.faq details[open] summary .sign::after{content:"−"}
.faq details:not([open]) summary .sign::after{content:"+"}
.faq .ans{padding-bottom:22px;color:var(--ink-2);max-width:70ch;font-size:.97rem;line-height:1.6}

/* ── closing CTA ────────────────────────────── */
.close{border-top:1px solid var(--rule-2);padding-block:clamp(64px,9vw,120px)}
.close .h2{max-width:20ch;margin-bottom:24px}
.close .lede{margin-bottom:34px}
.close-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ── footer ─────────────────────────────────── */
.foot{border-top:1px solid var(--rule-2);padding-block:34px}
.foot-in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:baseline}
.foot a{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.foot a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot small{font-family:var(--sans);font-size:.8rem;letter-spacing:0;color:var(--ink-3)}

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


/* =====================================================================
   Acceso de clientes (R3.3)
   =====================================================================
   Única página con formulario de la web comercial. Estilos aquí y no en
   línea: un `style=""` por campo es imposible de mantener y no responde
   a los tokens de color del modo oscuro.
   ===================================================================== */
.auth {
    max-width: 26rem;
}

.auth-field {
    margin-block-end: 16px;
}

.auth-field label {
    display: block;
    margin-block-end: 6px;
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--ink-2);
}

.auth-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--rule-2);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.auth-field input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.auth .btn {
    width: 100%;
    justify-content: center;
    /* "Entrar" es la accion principal de la pantalla y medía 40px. */
    min-height: 44px;
}

/* Error de credenciales. Contraste suficiente sobre papel y sobre
   tinta: el vermellón es el acento de la marca en los dos modos. */
.auth-error {
    border-inline-start: 3px solid var(--accent);
    padding: 10px 12px;
    margin-block-end: 20px;
    background: var(--accent-soft);
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--ink);
}

.auth-alt {
    margin-block-start: 24px;
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--ink-2);
}


/* A 375px la marca, la navegacion y el CTA no caben en una linea. Antes
   esto desbordaba la pagina 19px a la derecha. */
@media (max-width:420px){
  .masthead-in{flex-wrap:wrap;row-gap:10px}
  .masthead-in .btn-sm{margin-left:auto}
}


/* WCAG 2.5.8. La navegacion de cabecera se oculta por debajo de 940px, asi
   que los enlaces de 19px de alto en movil eran los del PIE, que si estan
   siempre presentes y no son prosa en linea. */
.nav a{display:inline-flex;align-items:center;min-height:44px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:520px){
  .foot-links{gap:0 18px;flex-wrap:wrap}
}


/* Suelo de 12px para etiquetas de seccion y cintillos. Por debajo de eso
   dejan de leerse en un movil, y son la unica pista de estructura que
   tiene el lector cuando la navegacion esta oculta. */
.num,.lg-num{font-size:.78rem}
.idlist .k,.flowcell .t,.honest .st,.reqs dt,.lg-meta,.flowbox h3{font-size:.75rem}
.sb-foot,.tag-caption{font-size:.78rem}