/* Identidad de la Auditoría RESET: DM Sans en todo, monoespaciada para los datos, ámbar
   comedido sobre fondo oscuro. Repartida en fichero para poder servirla sin estilos en línea
   (CSP sin 'unsafe-inline').

   19/09/2026 · LA SERIF SE FUE, por decisión de Javier: «esta fuente de letras hay que quitarla
   de toda la web». Era Playfair Display, en los títulos, en el nombre del perfil y en las dos
   tarjetas de la puerta. Venía de legacy/ y era lo último que quedaba del diseño viejo; el
   sistema de la casa (RESET · Panel/docs/diseno-sistema.md) no tiene ninguna serif, así que con
   esto la web y el panel se parecen de verdad. Se quitó el token, las tres reglas que lo usaban
   y el fichero de la fuente. Lo sujeta tests/paleta.test.js. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/assets/fonts/dmsans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Paleta de la casa (RESET · Panel/lotus/diseno/*.css — ver DISENO-SISTEMA.md).
   Se conservan los nombres de variable de siempre para no tocar cada regla:
   solo cambia el valor. La casa no distingue un tono "claro" para el acento
   ni un tono "alto" para el texto (--gold-light, --hi y --cream colapsan
   sobre --gold/--tx), y solo da un tono de línea (--line y --line2 quedan
   iguales). --hecho-texto/--bloqueado-texto son derivados propios (mezcla
   con --tx al 50%), medidos para leerse sobre una franja teñida del color
   de estado — contraste medido en la entrega. */
:root {
  --bg: #14161a;               /* fondo */
  --card: #1b1e23;              /* superficie */
  --card2: #14161a;             /* superficie oscura (gradientes, vídeo): reusa fondo */
  --card3: #23262c;             /* superficie 2 */
  --bg-rgb: 20, 22, 26;         /* fondo en rgb, para rgba() */
  --gold: #d98e2b;              /* acento */
  --gr: 217, 142, 43;           /* acento en rgb, para rgba() */
  --gold-suave: #7a5a2c;        /* acento suave */
  --gold-light: #d98e2b;        /* sin tono claro propio: plano, igual al acento */
  --cream: #ece9e2;             /* texto (colapsa con --tx) */
  --tx: #ece9e2;                /* texto */
  --hi: #ece9e2;                /* texto (colapsa con --tx) */
  --muted: #9ba0a6;             /* suave */
  /* 19/09/2026 · era #686d74, el mismo «texto tenue» que el panel (--ink-faint). Allí es para
     metadatos y contadores; aquí se estaba usando para rótulos que la gente LEE, a .72rem, y
     daba 3,47:1 sobre el fondo — por debajo del mínimo legible (AA pide 4,5:1). Sube lo justo
     para llegar: 5,07:1 sobre el fondo y 4,68:1 sobre la superficie de tarjeta, que son los dos
     fondos donde se usa. Sigue siendo claramente más apagado que --muted, que es lo que tiene
     que hacer. Lo guarda tests/paleta.test.js, que ahora mide el contraste en vez de creérselo. */
  --dim: #83888f;               /* tenue */
  --line: #33373e;              /* línea */
  --line2: #33373e;             /* línea (la casa no da un segundo tono) */
  --hecho: #4f9a86;
  --esperando: #d98e2b;
  --bloqueado: #c9583f;
  --pausado: #6b7078;
  --green: #4f9a86;             /* = hecho */
  --green-rgb: 79, 154, 134;
  --red: #c9583f;               /* = bloqueado */
  --red-rgb: 201, 88, 63;
  --hecho-texto: #9ec2b4;       /* hecho aclarado sobre --tx, para leer sobre franja teñida */
  --bloqueado-texto: #dba191;   /* bloqueado aclarado sobre --tx, ídem */
  /* La escala: SIETE peldaños y ni uno más. Había 31 tamaños distintos repartidos por los tres
     CSS, mezclando px y rem, con nueve valores entre .58 y .78rem para lo mismo. Javier, 18/09:
     «unas muy pequeñas, otras muy grandes». Todo tamaño nuevo sale de aquí o no existe. */
  --t1: 1.85rem;        /* nombre del perfil, titular de pantalla */
  --d1: 2.2rem;         /* SU cifra, y solo esa. Siempre con mono y tabular-nums */
  --t2: 1.25rem;        /* título de bloque, frase del test */
  --p: 1.0625rem;       /* prosa */
  --p2: .9rem;          /* secundario */
  --m1: .72rem;         /* rótulo mono en versalitas */
  --m2: .66rem;         /* micro-etiqueta mono */
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, 'SF Mono', Consolas, monospace;
  color-scheme: dark;
}

/* el atributo hidden debe ganar siempre: sin esto, cualquier regla de autor con
   display:block/flex (p.ej. .seenow, .err) lo pisa porque el origen de autor manda
   sobre la hoja del user-agent aunque la especificidad sea la misma. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  line-height: 1.72;
  font-size: var(--p);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}
::selection { background: rgba(var(--gr), .3); color: var(--tx); }

h1, h2, h3 { font-family: var(--sans); color: var(--cream); margin: 0 0 16px; font-weight: 600; }
/* El <em> de un titular ya no se inclina: el navegador lo hace por defecto y hay que
   decirle que no. Javier, 18/09: «no me gusta nada la cursiva». */
h1 em, h2 em, h3 em { color: var(--gold); font-style: normal; font-weight: 500; }
p { margin: 0 0 16px; color: var(--tx); font-weight: 400; }
strong { color: var(--hi); font-weight: 500; }

a { color: var(--gold); }

/* foco visible global (hallazgo 5 de 2-diseno-y-usabilidad.md: ninguna página lo tenía) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* El foco que pone el programa al cambiar de pantalla no pinta contorno: el contorno es para quien tabula. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.btn {
  display: block;
  text-decoration: none;   /* un enlace con aspecto de botón no se subraya */
  text-align: center;
  width: 100%;
  background: var(--gold);
  color: var(--bg);
  font-weight: 700;
  font-size: var(--p);
  padding: 17px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--sans);
  min-height: 56px;
  letter-spacing: .2px;
  transition: transform .12s, box-shadow .25s;
}
.btn:active { transform: scale(.99); }
@media (hover: hover) {
  .btn:hover { border-color: var(--gold); }
}
.btn:disabled { opacity: .6; cursor: not-allowed; }

.wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 18px 22px; border-radius: 8px; cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-size: var(--p2); font-weight: 700; letter-spacing: .04em;
  background: var(--card3);
  border: 1px solid var(--line2); color: var(--gold); min-height: 56px;
  transition: border-color .2s, box-shadow .2s;
}
@media (hover: hover) {
  .wa-btn:hover { border-color: var(--gold); }
}
.wa-btn:active { transform: scale(.985); }
.wa-btn svg { width: 18px; height: 18px; fill: var(--gold); flex-shrink: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 20px;
  margin-bottom: 18px;
}

.eyebrow {
  font-family: var(--mono); font-size: var(--m2); letter-spacing: .24em; text-transform: uppercase;
  font-variant-caps: small-caps; font-variant-numeric: tabular-nums;
  color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 9px;
}

.trust {
  font-family: var(--mono); font-size: var(--p2); letter-spacing: .12em; text-transform: uppercase;
  font-variant-caps: small-caps; font-variant-numeric: tabular-nums;
  color: var(--muted); text-align: center; margin-top: 16px; line-height: 1.6;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0;
}

.brand { text-align: center; margin-bottom: 30px; }
/* 19/09/2026 · la marca entra por la regla del ámbar del sistema de la casa: «el ámbar no se
   reparte — aparece en la eyebrow, en los números de paso, en las etiquetas, y poco más; en
   cuanto se usa para bordes, botones y títulos a la vez, la página pierde lo que le gustó a
   Javier». Esto era un título en ámbar, y en la puerta se juntaba con dos iconos ámbar y el
   enlace del pie. Pasa a ser lo que de verdad es: el rótulo de arriba, en mono y versalitas,
   que es el sitio donde el sistema SÍ pone el ámbar. */
.brand .nm {
  font-family: var(--mono);
  font-size: var(--m1);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variant-caps: small-caps;
  color: var(--gold);
}

.err {
  background: rgba(var(--red-rgb), .1); border: 1px solid var(--red); color: var(--bloqueado-texto);
  border-radius: 8px; padding: 14px 16px; font-size: var(--p2); margin-top: 12px; line-height: 1.55;
}

.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;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}