/* ============================================================================
   miurata.com — la hoja del sitio corporativo.

   POR QUE EXISTE ESTE ARCHIVO, y la carpeta llevaba tiempo vacia: las cuatro
   paginas publicas llevaban su CSS en un `<style>` propio, con 57 lineas
   IDENTICAS en las cuatro y 126 entre privacy y terms. Cambiar un color de
   marca eran cuatro ediciones y la que se te olvidara no fallaba, solo quedaba
   distinta. Medido en la auditoria del 2026-08-23.

   `index.html` ya consume esta hoja. Las otras tres se migran cuando se toquen;
   hasta entonces conviven, que es peor que migrarlas y mejor que reescribir
   cuatro paginas en un commit que nadie puede revisar.

   LAS TIPOGRAFIAS SE AUTO-HOSPEDAN. Hasta el 2026-08-23 las cuatro paginas
   pedian Inter al CDN de Google con seis pesos, y eso le daba la IP de cada
   visitante a un tercero que la politica de privacidad no declaraba. El resto
   del taller ya habia migrado; este sitio no.
   ============================================================================ */

@font-face{
  font-family:'Source Serif';
  src:url(/fonts/sourceserif-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Source Serif';
  src:url(/fonts/sourceserif-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url(/fonts/jetbrains-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* Papel calido. La escena de uso decide el claro: quien evalua una empresa
     de software la abre en un portatil, en una oficina, de dia. */
  --paper:#fbfaf7;
  --paper-2:#f2efe9;
  --ink:#1c1a17;      /* 16.5:1 sobre paper */
  --text:#3a3733;     /* 10.3:1 */
  --quiet:#6b665f;    /*  5.2:1, el piso de esta hoja */
  --rule:#ddd8cf;
  --mark:#7a2e2e;     /* granate, 8.1:1 sobre paper */
  --on-mark:#fbfaf7;

  /* LAS CINCO TINTAS DEL REGISTRO, y existen por una razon que no es decorar.
     El founder vio la pagina publicada y dijo: "no tiene colores, solo blanco y
     negro". Tenia razon -- el primer viewport no llevaba un solo punto de
     croma-- y la salida NO es pintar el heroe, que es justo lo que la direccion
     elegida rechaza. La salida es que el color CARGUE UN DATO: cada familia de
     producto tiene su tinta, y el registro se lee de un vistazo como lo que es,
     un indice codificado. Es como usa el color un informe anual, no una landing.

     Las cinco son oscuras a proposito. Todas dan >6:1 sobre el papel, o sea
     pasan AA como texto y no solo como adorno, y ninguna compite con el granate
     de las acciones: el granate sigue significando "esto se pulsa" y nada mas. */
  --t-pago:      #1f3f6e;   /* azul de tinta,  10.1:1 */
  --t-mercado:   #2f5d3f;   /*        verde,    7.2:1 */
  --t-concilia:  #1f5a5e;   /*        petroleo, 7.4:1 */
  --t-contrato:  #7a5320;   /*        ocre,     6.0:1 */
  --t-produccion:#5b3a6e;   /*        ciruela,  8.4:1 */
  --rail:1080px;
  --serif:'Source Serif',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ============================ TEMA OSCURO ============================
   El claro de arriba es el default y se declara en `:root` pelado, sin media
   query: es la escena de uso principal --quien evalua una empresa de software
   la abre en un portatil, de dia-- y una paleta que solo existe dentro de una
   media query desaparece en cualquier contexto que no la evalue.

   Aqui SOLO se redefinen tokens. Ninguna regla de layout cambia de tema, y esa
   es la prueba de que la paleta esta bien hecha: si el oscuro necesitara mover
   un margen, seria que un color estaba haciendo de estructura.

   TRES BLOQUES Y NO UNO, y el orden importa:
     1. `prefers-color-scheme: dark` con `:not([data-theme="light"])` -> el
        sistema manda mientras el visitante no haya elegido.
     2. `[data-theme="dark"]` -> la eleccion explicita gana en los DOS sentidos.
   Sin el `:not()` del primero, alguien en un sistema oscuro que pide claro se
   queda en oscuro y el boton parece roto.

   EL OSCURO NO ES EL CLARO INVERTIDO. El papel calido se vuelve tinta calida
   (#191712), no negro: un #000 detras de una serifa fina la adelgaza y la
   pagina pierde la voz que es su identidad entera. Y las cinco tintas del
   registro se aclaran, porque las oscuras sobre tinta darian 1,5:1. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#191712;
    --paper-2:#201d17;
    --ink:#f4f1ea;
    --text:#d8d3c8;
    --quiet:#a09a8e;
    --rule:#38342c;
    --mark:#e09a90;
    --on-mark:#191712;
    --t-pago:#93b6e2;
    --t-mercado:#8ecba2;
    --t-concilia:#7cc6cb;
    --t-contrato:#dcb46e;
    --t-produccion:#c2a4d8;
  }
}
:root[data-theme="dark"]{
  --paper:#191712;
  --paper-2:#201d17;
  --ink:#f4f1ea;
  --text:#d8d3c8;
  --quiet:#a09a8e;
  --rule:#38342c;
  --mark:#e09a90;
  --on-mark:#191712;
  --t-pago:#93b6e2;
  --t-mercado:#8ecba2;
  --t-concilia:#7cc6cb;
  --t-contrato:#dcb46e;
  --t-produccion:#c2a4d8;
}

/* La foto del retrato lleva `grayscale(1)` y en oscuro eso la deja como un
   recorte blanco flotando. Se le baja el brillo lo justo para que se apoye en
   el papel en vez de perforarlo. */
:root[data-theme="dark"] .retrato img{
  filter:grayscale(1) contrast(1.04) brightness(.88);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .retrato img{
    filter:grayscale(1) contrast(1.04) brightness(.88);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* La barra de scroll no se esconde: se le reserva el hueco. */
  scrollbar-gutter:stable;
}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--serif);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.rail{width:min(var(--rail),calc(100% - 2*clamp(1.5rem,6vw,4.5rem)));margin-inline:auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86em}
a{color:inherit}
img{max-width:100%;display:block}

/* EL GUARD DE IDIOMA, CON FAILSAFE DE CSS PURO.
   Hasta el 2026-08-23 las cuatro paginas llevaban `visibility:hidden` en el
   propio <html> y el UNICO revelado era una linea de JS al final del body. Sin
   noscript, sin temporizador. Un error de JS, una extension de privacidad o un
   `localStorage` bloqueado --que LANZA en modo privado de Safari-- y la pagina
   se quedaba en blanco para siempre. No degradaba: desaparecia.
   Aqui el ingles vive en el HTML, asi que en ingles NO SE OCULTA NADA. Solo el
   espanol espera al diccionario, y esta animacion de 0s con 1,5s de retraso lo
   revela aunque el JS no llegue nunca. */
.i18n-wait body{visibility:hidden;animation:i18n-failsafe 0s linear 1.5s forwards}
@keyframes i18n-failsafe{to{visibility:visible}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* El reset no puede tocar el failsafe: ponerle 0.01ms lo dispararia de
     inmediato y devolveria el destello que el guard existe para evitar. */
  .i18n-wait body{animation-duration:0s !important}
}

.skip{
  position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:100;
  background:var(--mark);color:var(--on-mark);padding:.75rem 1.1rem;
  font-weight:600;text-decoration:none;
}
.skip:focus{inset-inline-start:0}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--mark);outline-offset:3px;
}
main:focus{outline:none}

/* ---------- cabecera ---------- */
.top{border-bottom:1px solid var(--ink);background:var(--paper)}
.top .rail{display:flex;align-items:baseline;gap:1.5rem;padding:1.4rem 0 1.1rem;flex-wrap:wrap}
.razon{font-weight:600;font-size:1.22rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.nav{display:flex;gap:1.5rem;margin-left:auto;flex-wrap:wrap}
.nav a{
  text-decoration:none;color:var(--quiet);font-size:.95rem;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink)}
/* La regla de `aria-current` se escribe el mismo dia que el atributo, y el
   2026-08-23 esta se escribio ANTES: la portada no lo llevaba en ninguna parte y
   la regla nacio muerta. La usa `team.html`, que si es una pagina aparte y si
   puede estar "actual". La portada navega a anclas de si misma y no la usa. */
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mark)}
/* 28px a proposito, como en el resto del taller: al tamano de un boton de
   accion competian con el acceso y empujaban la barra al cambiar de idioma,
   porque el rotulo mide distinto en cada idioma. WCAG 2.2 pide 24px. */
/* El borde va en `--quiet` y no en `--rule`: la retícula da 1,36:1 contra el
   papel, y esto no es una retícula, es el limite de un CONTROL. WCAG 1.4.11
   pide 3:1 para eso; `--quiet` da 5,45:1. Un pelo de 1px a ese contraste se lee
   como un contorno nitido, no como un marco pesado. */
/* `inline-flex` y `line-height:1`, Y ESO NO ES COSMETICA: sin los dos, este
   boton heredaba el `line-height:1.62` del body y medía 31px de alto contra los
   28px del de tema, que es `inline-flex` con un SVG dentro. Tres pixeles de
   diferencia entre dos controles pegados el uno al otro no se leen como tres
   pixeles: se leen como que uno de los dos esta mal puesto. Medido el
   2026-08-23 sobre la pagina publicada, 37x31 contra 33x28. */
.lang{
  font:inherit;font-size:.82rem;line-height:1;background:none;color:var(--quiet);
  border:1px solid var(--quiet);padding:.25rem .6rem;cursor:pointer;min-height:28px;
  display:inline-flex;align-items:center;justify-content:center;
}
.lang:hover{color:var(--ink);border-color:var(--quiet)}

/* Los dos controles de preferencia viajan juntos y comparten caja.
   `.55rem` y no `.4rem`: a 6px, dos cajas con filete propio se tocan casi y
   dejan de leerse como dos controles. */
.prefs{display:flex;gap:.55rem;align-items:center}

/* UN ICONO, NO UNA PALABRA, y la razon es de maquetado: con texto el boton
   mediria lo que mida la etiqueta activa y cada clic empujaria la barra. El JS
   solo estampa `data-theme-state` en <html> y el CSS decide cual de los dos SVG
   se ve, asi que el boton NO PUEDE cambiar de ancho. Copiado en forma --no en
   codigo-- de scalebatch, que ya midio el problema. */
.theme-btn{
  font:inherit;background:none;color:var(--quiet);cursor:pointer;
  border:1px solid var(--quiet);padding:.25rem .5rem;min-height:28px;
  display:inline-flex;align-items:center;justify-content:center;
}
.theme-btn:hover{color:var(--ink)}
.theme-btn .ico{display:none}
/* Sin eleccion explicita manda el sistema: se ensena el icono de LO QUE PASARIA
   al pulsar, o sea la luna cuando estas en claro. */
.theme-btn .ico-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .ico-moon{display:none}
  :root:not([data-theme="light"]) .theme-btn .ico-sun{display:block}
}
:root[data-theme="dark"] .theme-btn .ico-moon{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:block}
:root[data-theme="light"] .theme-btn .ico-sun{display:none}
:root[data-theme="light"] .theme-btn .ico-moon{display:block}

/* ---------- declaracion ---------- */
/* EL PLIEGUE SE MIDIO, no se estimo, y ahora se cumple.
   El contrato de direccion pide "el arranque del registro dentro del pliegue".
   Historia corta de tres mediciones:

     antes         h2 del registro en y=831 (en) / y=951 (es)
     tras el ajuste de relleno del 2026-08-23   y=756 / y=905
     hoy, con 28ch en el h1 y un parrafo en vez de dos   y=651 / y=680

   Contra 768 de viewport, o sea CUMPLE EN LOS DOS IDIOMAS, con 117px de holgura
   en ingles y 88 en espanol. Lo que lo cerro no fue apretar el aire: fue la
   medida del titular --que solo castigaba al espanol-- y fundir los dos
   parrafos de la declaracion en uno, porque el segundo repetia lo que el h1 ya
   afirma.

   LO QUE "ARRANQUE DEL REGISTRO" SIGNIFICA, ahora que hay numeros: el h2 y su
   intro. La PRIMERA FILA no entra --y=783 en ingles, y=840 en espanol-- y no va
   a entrar: ni llevando el titular a 32ch se gana lo que falta en espanol. Una
   version anterior de este comentario prometia el h2 "y la primera entrada", y
   esa promesa nunca fue medible; se retira en vez de dejarla de adorno. */
.dec{padding:clamp(3rem,5vw,4.5rem) 0 clamp(1.5rem,3vw,2.2rem)}
/* 28ch Y NO 22ch, Y ES LO QUE CIERRA EL PLIEGUE SIN TOCAR EL AIRE.
   La medida vieja partia el titular espanol en CINCO lineas --300px-- contra
   las TRES del ingles, y esos 120px eran la diferencia entera entre cumplir el
   contrato de direccion y no cumplirlo. O sea: la medida solo apretaba al
   idioma que mas letra necesita, y no daba nada a cambio.

   Barrido sobre el CSS real, con recarga sin cache, midiendo las cajas de linea
   con un Range --el espanol, que es el caso malo:

     24ch y 26ch -> 4 lineas, h2 del registro en y=740
     28ch a 32ch -> 3 lineas, h2 en y=680

   Se toma 28ch, el primero que iguala los dos idiomas en tres lineas: 26ch
   tambien cumplia, pero dejaba 28px de holgura y una palabra mas en el
   diccionario lo rompia sin que nadie se enterara. En ingles 26 y 28 dan lo
   mismo, asi que el cambio no le cuesta nada. La caja queda en 821px sobre un
   riel de 1080: sigue siendo una columna, no un titular a sangre.

   AVISO PARA QUIEN MIDA ESTO OTRA VEZ: mutar `style.maxWidth` desde la consola
   y leer la altura NO reproduce la carga limpia --da numeros que luego no
   salen-- y el navegador cachea la hoja aunque el servidor sirva la nueva. Se
   edita el CSS, se recarga con un query distinto, y se mide. Las tres primeras
   mediciones de esta linea salieron mal por saltarse eso. */
h1{
  margin:0;font-weight:600;font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.12;
  letter-spacing:-.02em;max-width:28ch;color:var(--ink);text-wrap:balance;
  overflow-wrap:break-word;
}
.dec p{margin:1.6rem 0 0;max-width:64ch;font-size:clamp(1.02rem,1.3vw,1.13rem)}
.part{
  margin-top:1.6rem;display:flex;gap:2.5rem;flex-wrap:wrap;color:var(--quiet);
  font-size:.94rem;border-top:1px solid var(--rule);padding-top:1.2rem;
}
/* Aqui es donde el founder miraba cuando dijo que la pagina no tiene color:
   las tres cifras del primer viewport eran negras sobre crema, igual que todo
   lo demas. En granate siguen siendo tres palabras y ya se ven como cifras. */
.part strong{color:var(--mark)}
/* EL TERCER PARTICULAR NO ES UNA CIFRA, y por eso no lleva granate. Los dos
   primeros parten en dato + rotulo --"Seven" brands, "One" platform-- y solo el
   dato va marcado. El tercero es un lugar y no se parte, asi que el `strong`
   se comia la linea entera y "Orlando, Florida" salia igual que un enlace.
   En esta hoja el granate significa "esto se pulsa" y nada mas (DESIGN.md §2);
   una direccion que no se pulsa pintada de granate rompe la unica convencion
   de color que la pagina tiene. Peso si, tinta de accion no. */
.part .place{color:var(--ink)}

/* ---------- registro de productos ---------- */
/* El relleno de arriba baja porque el pliegue lo pedia; la cuenta completa, en
   el comentario de `.dec`. */
/* El aire que se recorta es el de ENTRE bloques, no el del heroe. Este
   padding y el de abajo de `.dec` estan separados ademas por un filete, que
   ya hace el trabajo de separar; el de arriba del heroe es el que se ve y ese
   no se toca. Son ~23px que el registro gana sin que la pagina se note mas
   apretada. */
.reg{padding:clamp(1.5rem,3vw,2.4rem) 0 clamp(2.5rem,5vw,4rem)}
h2{margin:0 0 .4rem;font-weight:600;font-size:1.5rem;letter-spacing:-.015em;color:var(--ink)}
/* `balance` reparte las lineas parejo y solo sirve en titulares de dos o tres;
   sobre un parrafo de seis lineas lo que hace falta es `pretty`, que ataca la
   VIUDA -- la ultima linea con una sola palabra. El registro tenia tres: una
   fila terminaba en "write.", el intro en espanol en "plataforma." */
.intro{margin:0 0 2rem;color:var(--quiet);max-width:62ch;text-wrap:pretty}
/* CUATRO columnas, y la primera es el folio. Un registro cuyas filas no estan
   numeradas es una lista; el numero es lo que lo vuelve citable -- "la entrada
   04" -- y es la unica pieza de esta pagina que no necesita traduccion. */
.ent{
  display:grid;
  grid-template-columns:2.5rem minmax(0,1fr) minmax(0,2.1fr) auto;gap:1.6rem;
  padding:1.5rem 0;border-top:1px solid var(--rule);align-items:baseline;
}
/* El folio y el rotulo de clase toman la tinta de la familia. Son las DOS
   piezas de la fila que ya eran metadato, asi que el color no agrega ruido:
   colorea lo que de todos modos habia que leer como etiqueta. */
.ent .folio{font-size:.86rem;letter-spacing:.02em;color:var(--tinta,var(--quiet))}
.ent[data-clase="pago"]      {--tinta:var(--t-pago)}
.ent[data-clase="mercado"]   {--tinta:var(--t-mercado)}
.ent[data-clase="concilia"]  {--tinta:var(--t-concilia)}
.ent[data-clase="contrato"]  {--tinta:var(--t-contrato)}
.ent[data-clase="produccion"]{--tinta:var(--t-produccion)}
.ent:last-of-type{border-bottom:1px solid var(--rule)}
.ent h3{margin:0;font-weight:600;font-size:1.24rem;letter-spacing:-.015em;color:var(--ink)}
.ent .clase{display:block;margin-top:.15rem;color:var(--tinta,var(--quiet))}
.ent p{margin:0;max-width:58ch;text-wrap:pretty}
.ent a{
  color:var(--mark);text-decoration:none;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;
}
.ent a:hover,.ent a:focus-visible{border-bottom-color:var(--mark)}

/* ---------- mecanismos ---------- */
.mec{padding:clamp(2.5rem,5vw,4rem) 0;background:var(--paper-2);border-top:1px solid var(--rule)}
/* EL NOMBRE DE LA FAMILIA. Va en el cuerpo de la pagina y no en el `h2` porque
   el `h2` rotula la SECCION --y el enlace del nav dice "Mechanisms"--, mientras
   que esto es el nombre propio de la doctrina que agrupa a los nueve. Dos cosas
   distintas que en un prospecto se leen a la vez sin competir: el rotulo arriba,
   pequeno; el nombre debajo, grande. */
.family{
  margin:1.1rem 0 .3rem;font-weight:600;color:var(--ink);
  font-size:clamp(1.28rem,2vw,1.6rem);letter-spacing:-.015em;
}

/* EL SIMBOLO NO SE PONE EN SUPERINDICE CON `vertical-align`, que descuadra la
   caja de linea y arrastra el interlineado de toda la fila. `font-size` mas
   pequeno y `line-height:0` lo suben sin tocar el flujo. En `--quiet` porque un
   simbolo legal a la misma tinta que el nombre compite con el nombre. */
.tm{
  font-size:.58em;line-height:0;vertical-align:.55em;
  color:var(--quiet);margin-left:.08em;font-weight:400;
}

/* SOLO LOS NOMBRES, en dos columnas. Aqui vivia un `dl` con la descripcion de
   cada mecanismo y debajo una matriz de siete por seis; las dos se retiraron el
   2026-08-23 porque las siglas de la matriz son nomenclatura interna y el
   "quien lo corre" es dato de la landing de cada marca, no de esta pagina.
   Lo que queda es un indice de nomenclatura, y por eso se maqueta como indice:
   dos columnas, filete entre filas, nada de vinetas. Una columna sola de seis
   nombres cortos deja el riel de 1080px vacio en sus dos tercios derechos y se
   lee como una lista a medio hacer. `break-inside` porque una fila partida
   entre columnas es justo lo que un indice impreso no hace. */
/* `columns:16rem 2` y no `columns:2`, o sea "dos columnas COMO MUCHO, y solo
   si cada una llega a 16rem". Con `columns:2` a secas el navegador parte en dos
   siempre: medido a 375px daban 132px cada una y cuatro de los seis nombres se
   rompian en dos lineas --"Contract-On-/Trigger"--, que es justo lo que un
   indice no hace. La forma corta lo resuelve sin un breakpoint que mantener, y
   el punto de corte sale del contenido en vez de un numero elegido a ojo. */
.names{
  margin:1.6rem 0 0;padding:0;list-style:none;
  columns:16rem 2;column-gap:3rem;max-width:52rem;
}
.names li{
  break-inside:avoid;font-weight:600;color:var(--ink);
  padding:.7rem 0;border-bottom:1px solid var(--rule);
}
/* `float` Y NO `flex`, y la razon es el simbolo de marca: `vertical-align` no
   aplica a un flex item, asi que con `display:flex` en el `li` el `™` se caeria
   a la linea base y ademas el `gap` lo separaria del nombre como si fuera otra
   palabra. En flujo normal el superindice funciona y el float manda el rotulo
   al filo derecho de SU columna, que es donde un indice pone la nota. */
.planned{
  float:right;font-weight:400;color:var(--quiet);
  font-size:.78rem;letter-spacing:.02em;text-transform:lowercase;
}

/* ---------- particulares ---------- */
.par{padding:clamp(2.5rem,5vw,4rem) 0}
/* Sin `max-width` en la fila de marcas: el tope de 72ch partia
   "Invoice-On-Payment, USPTO / 99830481" y dejaba el numero de registro en la
   linea siguiente, huerfano de su marca. El riel tiene 300px sin usar. */
.par dl{margin:1.4rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.75rem 2rem;max-width:72ch}
.par dl.ancho{max-width:none}
/* Marca y numero viajan juntos o no viajan. */
.par .junto{white-space:nowrap}
.par dt{color:var(--quiet);white-space:nowrap}
.par dd{margin:0;color:var(--ink)}
.par dd a{color:var(--mark);text-decoration:none;border-bottom:1px solid transparent}
.par dd a:hover{border-bottom-color:var(--mark)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.65rem 1.3rem;font-family:inherit;font-weight:600;font-size:1rem;
  text-decoration:none;background:var(--mark);color:var(--on-mark);
  border:1px solid var(--mark);margin-top:2rem;
}
.btn:hover{filter:brightness(1.12)}
/* Tinta oscura CON `outline-offset`, que es lo que hace que funcione: el
   anillo se dibuja 3px POR FUERA del boton, o sea sobre el papel, donde da
   16,6:1. Sin el offset caeria encima del granate y daria 1,87:1, que es tan
   invisible como el anillo granate que este remedia. */
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- pie ---------- */
.foot{border-top:1px solid var(--ink);padding:1.8rem 0 2.6rem;font-size:.92rem;color:var(--quiet)}
.foot .rail{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:baseline}
/* 44px, NO 28. La excepcion de 28px de este producto cubre SOLO `.seg button` /
   `.lang`, que es un control de preferencia; los enlaces del pie son navegacion.
   Es exactamente donde matchitfy los perdio y buildsigned los recupero. */
.foot a{color:var(--quiet);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot .der{margin-left:auto}

@media (max-width:860px){
  /* LA MASCARA NO ES DECORACION: es la unica senal de que esto se desplaza.
     Medido a 375px, la nav desborda 19px y la barra esta oculta a proposito,
     asi que el ultimo enlace salia cortado --se leia "Sto"-- sin nada que
     dijera que hay mas. Un rotulo truncado a secas se lee como maquetado roto.
     Se degrada sola: cuando los cuatro caben, la nav ocupa el 100% del riel,
     los enlaces se apoyan a la izquierda y el desvanecido cae sobre papel
     vacio, donde no se ve. Solo aparece cuando de verdad hay algo cortado. */
  .nav{width:100%;margin-left:0;order:3;overflow-x:auto;flex-wrap:nowrap;gap:1rem;
       scrollbar-width:none;
       mask-image:linear-gradient(to right,#000 calc(100% - 1.5rem),transparent)}
  /* La nav se va a la fila de abajo con `order:3` y deja de empujar; sin esto el
     boton de idioma se quedaba pegado al nombre de la empresa con 200px de papel
     vacio a la derecha, que se lee como un error de maquetado y no como una
     decision. */
  .lang{margin-left:auto}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  /* En movil el folio no gasta una fila propia: se apoya sobre el nombre. */
  .ent{grid-template-columns:auto 1fr;gap:.4rem .8rem}
  .ent .folio{grid-row:1}
  .ent h3{grid-column:2}
  .ent p,.ent a{grid-column:1/-1}
  .part{gap:1.4rem}
}

@media (max-width:600px){
  /* Los particulares eran dos columnas con `white-space:nowrap` en el rotulo, y
     en espanol "Marcas registradas" se comia el 45% del ancho y partia
     "Invoice-On-/Payment" con guion. A una columna el rotulo manda sobre su
     valor, que es como se lee una ficha en un movil. */
  .par dl{grid-template-columns:1fr;gap:0}
  .par dt{margin-top:1.1rem}
  .par dt:first-of-type{margin-top:0}
  .par dd{margin-top:.15rem}
}