/* Certif · marca v5 (aprobada el 3-oct-2026). Tokens del kit, fuentes servidas por la app (OFL, sin servidores externos) y la capa semántica
   que usan verificar.css y panel.css. Claro = marfil; oscuro = grafito (por preferencia del sistema). Todo texto pasa WCAG AA en su fondo. */
@font-face{font-family:"Cormorant Garamond";src:url(/fuentes/CormorantGaramond-Variable.ttf) format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fuentes/CormorantGaramond-Italic-Variable.ttf) format("truetype");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(/fuentes/FragmentMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fuentes/HankenGrotesk-Variable.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(/fuentes/FragmentMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* ===== TOKENS ÚNICOS DE CERTIF (revisión 10/10 E). Esta es la ÚNICA hoja donde se escribe un color: todas las demás usan var(--…). =====
   Se regenera/valida con `node scripts/tokens_css.js` (--revisar). Claro = marfil; oscuro = grafito (por preferencia del sistema). Todo texto pasa WCAG AA en su fondo. */
:root{
  color-scheme:light dark; /* los controles del navegador (casillas, listas, barras de desplazamiento) siguen el esquema de la página */
  /* 1 · Paleta de marca (valores fijos: no cambian con el modo oscuro) */
  --certif-grafito-0:#0B0B0D;--certif-grafito:#0E0E10;--certif-grafito-1:#141417;--certif-grafito-2:#17181B;--certif-grafito-3:#1D1E22;
  --certif-marfil:#F1EBE0;--certif-papel:#FAF7F0;--certif-tinta:#1A1614;--certif-tinta-2:#4A4037;--certif-linea:#D9D0C0;--certif-linea-oscura:#2A2B30;--certif-arena:#D9C7A6;
  --certif-lacre:#8C1A1F;--certif-lacre-oscuro:#7D161B;--certif-lacre-hover:#9B1F25;--certif-lacre-claro:#C8646A;--certif-lacre-medio:#DB7B81;--certif-lacre-tenue:#E6B4B7;--certif-lacre-palido:#F3E4E1;--certif-vino:#3F0F12;
  --certif-plata:#BDB8AE;
  --certif-texto-sobre-grafito:#E9E2D6;--certif-texto-suave-sobre-grafito:#CFC7BA;--certif-texto-medio-sobre-grafito:#A39C90;--certif-texto-2-sobre-grafito:#8F887C;--certif-texto-2-sobre-marfil:#6B6157;--certif-texto-sobre-lacre:#F6F1E8;
  /* 2 · Paleta única de estados (AA sobre su fondo). «sobre-claro» va sobre marfil o papel; «sobre-oscuro», sobre grafito. */
  --ok-sobre-claro:#1E6B47;--ok-soft-claro:#DCEBDD;--warn-sobre-claro:#7A5200;--warn-soft-claro:#F4E6C4;--bad-sobre-claro:#8C1A1F;--bad-soft-claro:#F3DDD9;--info-sobre-claro:#4A4037;--info-soft-claro:#E9E2D6;
  --ok-sobre-oscuro:#7CC9A0;--ok-soft-oscuro:#14261D;--warn-sobre-oscuro:#E0B65A;--warn-soft-oscuro:#2A2112;--bad-sobre-oscuro:#F0817B;--bad-soft-oscuro:#2A1517;--info-sobre-oscuro:#BDB8AE;--info-soft-oscuro:#1D1E22;
  --bad-acento-oscuro:#E0625B;--bad-tenue-sobre-oscuro:#F3B8B4; /* acento = bordes, íconos y aros; tenue = texto de aviso sobre el tinte del error */
  /* 3 · Colores de producto (muestras del catálogo) y de terceros */
  --cat-grafito:#1A1B1E;--cat-titanio:#C9C5BD;--cat-marfil:#F4EEE3;--cat-tinta:#1E2A4A;--cat-pasaporte:#123A33;--cat-champan:#C9AC70;--cat-bronce:#5E3820;--cat-petroleo:#0F4C5C;--cat-ciruela:#4A1B3A;--linkedin:#0A66C2;
  /* 4 · Tipografía: una familia por oficio, con el mismo respaldo en todas las hojas */
  --certif-fuente-titulos:'Cormorant Garamond',Georgia,serif;
  --certif-fuente-texto:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --certif-fuente-datos:'Fragment Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* escala: rótulo mono 12 · ayuda 13.5 · texto 16 · cuerpo grande 17 · título de tarjeta 25 · título de sección · título de página */
  --fs-rotulo:12px;--fs-ayuda:13.5px;--fs-texto:16px;--fs-lead:17px;--fs-h3:25px;--fs-h2:clamp(32px,4.8vw,52px);--fs-h1:clamp(38px,6.4vw,76px);--fs-h1-app:clamp(30px,4vw,40px);
  /* 5 · Forma, movimiento y capas */
  --r-0:0;--r-ctl:2px;--r:3px;--r-lg:4px;--wrap:1200px;
  --t:.2s ease;--t-lento:.45s cubic-bezier(.2,.8,.2,1);
  --z-menu:20;--z-pop:30;--z-salto:100;
  --alto-ctl:48px;--alto-ctl-movil:44px; /* altura de botón y campo (el celular nunca baja de 44 px) */

  /* capa semántica (claro) */
  --bg:var(--certif-marfil);--surface:var(--certif-papel);--surface-2:var(--certif-marfil);--ink:var(--certif-tinta);--ink-2:var(--certif-tinta-2);--ink-3:var(--certif-texto-2-sobre-marfil);--line:var(--certif-linea);
  --brand:var(--certif-lacre);            /* acento como TEXTO sobre fondo claro */
  --foco:var(--certif-lacre);
  --lacre:var(--certif-lacre);--sobre-lacre:var(--certif-texto-sobre-lacre);
  --ok:var(--ok-sobre-claro);--ok-soft:var(--ok-soft-claro);--bad:var(--bad-sobre-claro);--bad-soft:var(--bad-soft-claro);--warn:var(--warn-sobre-claro);--warn-soft:var(--warn-soft-claro);--info:var(--info-sobre-claro);--info-soft:var(--info-soft-claro);
  --n900:var(--certif-grafito);             /* bandas siempre oscuras (cabecera, héroes) */
  --acc-oscuro:var(--certif-lacre-claro);   /* acento sobre bandas siempre oscuras */
  --on:var(--certif-texto-sobre-lacre);--on-2:rgba(241,235,224,.8);--on-3:rgba(241,235,224,.6);--glass-line:rgba(241,235,224,.16);
  --shadow:0 2px 6px rgba(26,22,20,.06),0 22px 44px -18px rgba(26,22,20,.28);--shadow-pop:0 24px 60px rgba(0,0,0,.55);
  --f:var(--certif-fuente-texto);--m:var(--certif-fuente-datos);--ft:var(--certif-fuente-titulos);
}
@media (prefers-color-scheme:dark){:root{
  --bg:var(--certif-grafito);--surface:var(--certif-grafito-2);--surface-2:var(--certif-grafito-3);--ink:var(--certif-texto-sobre-grafito);--ink-2:var(--certif-plata);--ink-3:var(--certif-texto-2-sobre-grafito);--line:var(--certif-linea-oscura);
  --brand:var(--certif-lacre-claro);--foco:var(--certif-lacre-claro);
  --ok:var(--ok-sobre-oscuro);--ok-soft:var(--ok-soft-oscuro);--bad:var(--bad-sobre-oscuro);--bad-soft:var(--bad-soft-oscuro);--warn:var(--warn-sobre-oscuro);--warn-soft:var(--warn-soft-oscuro);--info:var(--info-sobre-oscuro);--info-soft:var(--info-soft-oscuro);
  --shadow:0 2px 6px rgba(0,0,0,.4),0 24px 48px -18px rgba(0,0,0,.7);
}}
/* Un código, una URL o una cifra que no debe partirse en el guion al saltar de línea (revisión 10/10). */
.nb{white-space:nowrap}
/* Acabado común a todas las superficies (revisión 10/10 E): selección con el color de marca, marcadores de campo legibles, desplazamiento suave con reposo para quien prefiere menos movimiento,
   barras de desplazamiento internas discretas y anclas que no quedan pegadas al borde. */
::selection{background:var(--certif-lacre);color:var(--certif-texto-sobre-lacre)}
::placeholder{color:var(--ink-3);opacity:1}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:not(html){scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* Impresión y «Guardar como PDF» (revisión 10/10): las páginas son oscuras con texto claro; sin el fondo (el navegador no lo imprime por defecto) el texto clarito
   quedaba casi invisible sobre el papel blanco. En papel: tinta oscura sobre blanco, sin cabecera, pie, menús, botones ni dibujos decorativos. */
@media print{
  @page{margin:12mm}
  html,body{background:#fff!important;color:#1A1614!important}
  *,*::before,*::after{background-color:transparent!important;background-image:none!important;color:#1A1614!important;text-shadow:none!important;box-shadow:none!important;animation:none!important;transition:none!important}
  .hd,.ft,.menu,.sr,.ve__huella,.ve__tel,.ve__go,.cz-res__huella,.cz-acc,.cz-nota,.cz-rep,.cz-descargas,.cz-aro-w::before,.pt__onda,.pt__velo{display:none!important}
  a{text-decoration:none}
  img,svg,figure,tr,.cz-kv,.cz-tr,.cz-ev{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}