/* LGS — el sitio público. Sin framework y sin dependencias, como el resto del
   frontend (ADR 0007). Paleta y tipografía alineadas con el panel. */
:root {
  --tinta: #131a2c; --papel: #fbf7f2;
  /* El color de accion es el hi-vis del panel, con SUS tokens (panel.css):
     lo que un tradie pulsa aqui es del mismo amarillo que «el siguiente
     paso» dentro. Solo va en `.cta`; nunca como texto sobre crema (2.0:1).
     docs/direccion-visual.md §4. */
  --hivis: #FFD400; --hivis-tinta: #1a1600;
  /* --suave es el texto secundario: navegación, entradilla y pie. Estaba en
     #5a6274, que sobre #fbf7f2 da 5.73:1 -- pasa AA y NO pasa AAA, y lo cazó
     `auditoria_propia.py` en las ocho páginas a la vez porque es la navegación.
     #4a5164 da 7.42:1. El 7:1 no es un umbral elegido: es la constante de
     WCAG AAA para texto normal. El valor oscuro ya estaba en 8.44:1. */
  --suave: #4a5164; --regla: #dcd6cd; --max: 62rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --tinta: #f2efe9; --papel: #0f1420; --suave: #a8b0c0; --regla: #2a3244; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.container { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--tinta);
  color: var(--papel); padding: .75rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; }

.site-header { border-bottom: 1px solid var(--regla); }
.nav-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between; padding-block: 1rem;
}
.brand { font-weight: 700; font-size: 1.25rem; letter-spacing: .02em;
         color: inherit; text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
             list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--suave); text-decoration: none; }
.nav-links a:hover, .nav-links a:focus { color: var(--tinta);
                                         text-decoration: underline; }
/* La accion de la barra («Start trial»; «Dashboard» en las fichas de add-on)
   es un boton SECUNDARIO: borde de tinta y fondo transparente (E-141: un
   fondo del navegador en tema oscuro no llega al contraste), 40 px de alto
   para que la barra siga en una linea a 1440 y, con «Sign in» delante, quepa
   a 320 sin desbordar (lo mide sitio_en_navegador.mjs con ANCHOS=320). El
   anillo de foco es el de :focus-visible, en tinta; el subrayado del hover
   de los enlaces de texto no le aplica porque el borde ya dice que se pulsa. */
.nav-links a.nav-cta {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .3rem .9rem; border: 2px solid var(--tinta); border-radius: .5rem;
  color: var(--tinta); font-weight: 600;
}
.nav-links a.nav-cta:hover, .nav-links a.nav-cta:focus {
  text-decoration: none; background: var(--tinta); color: var(--papel);
}

main > section { padding-block: 2.5rem; }
main > section + section { border-top: 1px solid var(--regla); }
/* Instrument Serif (OFL), servida desde el propio origen: un woff2 de 11 KB,
   precargado en la portada, `swap` en el resto. docs/diseno-final.md §4:
   es lo unico que separa el «parte tecnico» de un dashboard mas, y por eso
   DESIGN.md §2 la admite como la UNICA fuente descargada. La CSP no cambia:
   font-src cae en default-src 'self'. */
pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/instrument-serif-regular.woff2") format("woff2");
}
h1, h2, .paso-titulo, .parte-lectura .lectura-cifra b {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.02; margin: 0 0 1rem; max-width: 16ch; }
h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 .75rem; }
p { margin: 0 0 1rem; max-width: 60ch; }
.lead { font-size: 1.15rem; color: var(--suave); }
ol.pasos { max-width: 60ch; padding-left: 1.2rem; }
ol.pasos li { margin-bottom: .75rem; }
ul { max-width: 60ch; }

/* La llamada a la acción está PINTADA: fondo propio y área de pulsación de
   48 px. Un enlace de texto no se lee como la acción de la página (lo mide
   `calidad.sin_accion_primaria`). */
.cta, .cta-2 {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: .6rem 1.25rem; border-radius: .5rem; margin: 0 .5rem .5rem 0;
  font-weight: 600; text-decoration: none;
}
.cta { background: var(--hivis); color: var(--hivis-tinta); }
.cta:hover, .cta:focus-visible { background: var(--tinta); color: var(--papel); }
/* `background: transparent` porque un <button class="cta-2"> (el «No thanks»
   del banner de consentimiento) traia el fondo gris del navegador: en tema
   oscuro, rgb(107,107,107) bajo texto claro, 4,64:1. Medido el 18/09 en los
   diez anchos con prefers-color-scheme: dark (E-141). */
.cta-2 { border: 2px solid var(--tinta); color: var(--tinta); background: transparent; }
.cta-2:hover { filter: brightness(1.15); }
/* El anillo de foco va en la TINTA, no en el hi-vis. El acento salmon de antes (#e8956b)
   sobre `--papel` (#fbf7f2) da 2.2:1, y WCAG 1.4.11 pide 3:1 a un indicador
   de foco: era un fallo de accesibilidad en las ocho paginas a la vez, y no lo
   caza el motor visual porque mide el foco de otra manera. La tinta da 16.25:1
   en claro y 16.03:1 en oscuro, porque `--tinta` se invierte con el tema. */
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

.plan {
  border: 1px solid var(--regla); border-radius: .6rem;
  padding: 1.25rem; margin-bottom: 1rem;
}
.plan h3 { margin: 0 0 .35rem; }
.plan .precio { font: 400 clamp(2.4rem, 5vw, 3.2rem)/1 "Instrument Serif", Georgia, "Times New Roman", serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan ul { margin: .6rem 0 0; padding-left: 1.2rem; }

/* La reserva de sitio de /pricing. Las alturas salen de MEDIR la lista real
   con el catalogo de `planes.py` en cinco anchos: 1469px de 768 para arriba y
   1802-1904px por debajo, repartidos entre cinco tarjetas. No es una altura
   elegida a ojo; si el catalogo cambia de tamano, lo dice el guardian. */
.plan-esqueleto { border: 1px solid var(--regla); border-radius: .6rem;
                  min-height: 17rem; margin-bottom: 1rem; }
@media (max-width: 47.9rem) { .plan-esqueleto { min-height: 22rem; } }

.site-footer { border-top: 1px solid var(--regla); padding-block: 2rem;
               color: var(--suave); }
.site-footer address { font-style: normal; }
.legales { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none;
           margin: .75rem 0 0; padding: 0; }
.legales a { color: inherit; }

/* --- Tablas (comparativa y prueba) ---------------------------------------
   `.tabla-scroll` NO es decoración: la tabla de /proof.html tiene ocho
   columnas y a 360px no cabe. Sin el contenedor con scroll propio, el que se
   desborda es el documento entero, y eso es justo lo que el motor visual
   reprocha a los sitios de los clientes. */
.tabla-scroll { overflow-x: auto; margin-block: 1.5rem; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; }
caption { text-align: left; color: var(--suave); padding-bottom: .75rem; }
th, td { border-bottom: 1px solid var(--regla); padding: .6rem .7rem;
         text-align: left; }
thead th { border-bottom-width: 2px; }
tbody th[scope="row"] { font-weight: 600; }
td.destacada, th.destacada { background: color-mix(in srgb, var(--hivis) 18%, transparent); }
/* Sin `font-size` reducido: 0.95rem daba 15px y el suelo de texto corrido
   es 16px -- el mismo que el informe le exige al cliente. El color ya la
   separa del texto normal. */
.leyenda { color: var(--suave); }

/* Oculto a la vista y NO al lector de pantalla: recortar a 1px conserva el
   texto en el árbol de accesibilidad, que es lo que `display:none` destruye. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* =========================================================================
   EL SISTEMA VISUAL · «la ficha de obra»
   docs/diseno-lgs.md explica la direccion. Dos reglas mandan en todo lo que
   sigue, y las dos son aritmetica, no gusto:

   1. NINGUN ESTILO EN LINEA. La CSP que sirve este sitio es
      `style-src 'self'` sin `'unsafe-inline'`, asi que ni `<style>` ni
      `style=""`. Un visual dirigido por datos saca su valor de un atributo
      (`data-nota="41"`) con su regla escrita aqui. Como una regla que falte
      deja el visual mudo SIN romper nada, lo vigila
      `backend/tests/test_visuales_con_regla.py`.

   2. EL COLOR DE DATO NO SALE DE `.consola`. Medido sobre `--papel`
      (#fbf7f2): #00FFAA da 1.24:1, #FFD400 1.34:1, #FFAA00 1.79:1,
      #FF7A7A 2.37:1. Los cuatro fallan AA sobre el crema y los cuatro lo
      pasan de sobra sobre el negro de la consola. La rampa de severidad
      vive dentro de la superficie oscura y en ningun otro sitio.
   ========================================================================= */

/* --- La superficie de producto -------------------------------------------
   Es la pantalla de la furgoneta empotrada en la ficha de papel: los mismos
   tokens del panel (`backend/app/static/panel.css`), en su propio ambito,
   para que lo que se ve aqui sea lo que se ve al entrar. */
.consola {
  --c-fondo: #0a0e0d; --c-panel: #0f1513; --c-borde: #1b2422;
  --c-tinta: #e6edf3; --c-tenue: #9aa7a3;
  --c-ok: #00FFAA; --c-ambar: #FFAA00; --c-naranja: #FF8A3D; --c-rojo: #FF7A7A;
  --c-baja: #9aa7a3; --c-info: #6f7d78;
  background: var(--c-fondo); color: var(--c-tinta);
  border: 1px solid var(--c-borde); border-radius: .875rem;
  padding: 1.25rem; margin-block: 1.5rem;
  font-variant-numeric: tabular-nums;
}
/* En tema oscuro la pagina (#0f1420) y la consola (#0a0e0d) quedan a 1.06:1,
   o sea: el borde es lo unico que dice donde empieza la pantalla. */
@media (prefers-color-scheme: dark) { .consola { --c-borde: #6f7d78; } }
.consola p { color: var(--c-tenue); max-width: 58ch; }
.consola a { color: var(--c-ok); }

/* La etiqueta de la consola: de donde sale el dato, sin adornos. */
.consola-etiqueta {
  font: 600 .875rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-tenue); margin: 0 0 .75rem;
}

/* --- La lectura: una auditoria medida ------------------------------------
   Nombre del sitio, nota, y el reparto por severidad. La misma forma para
   las cuatro (`small multiple`): se leen como cuatro lecturas del mismo
   instrumento, no como cuatro ofertas. */
.lectura + .lectura { border-top: 1px solid var(--c-borde); margin-top: 1rem; padding-top: 1rem; }
.lectura-sitio {
  font: 600 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--c-tinta); margin: 0 0 .5rem; word-break: break-word;
}
.lectura-cifra {
  display: flex; align-items: baseline; gap: .35rem; margin: 0 0 .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.lectura-cifra b { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.lectura-cifra span { color: var(--c-tenue); font-size: .875rem; }

/* El medidor. El ancho y el color salen de `data-nota`, y la banda es la del
   panel: >=80 verde, >=50 ambar, por debajo rojo (DESIGN.md §5). Hay una
   regla por nota publicada porque no hay forma de calcularlo sin estilo en
   linea, y el guardian comprueba que no falte ninguna. */
.medidor { height: 10px; border-radius: 5px; background: var(--c-panel);
           border: 1px solid var(--c-borde); overflow: hidden; }
.medidor i { display: block; height: 100%; background: var(--c-rojo); }
.lectura[data-nota="21"] .medidor i { width: 21%; }
.lectura[data-nota="28"] .medidor i { width: 28%; }
.lectura[data-nota="41"] .medidor i { width: 41%; }
.lectura[data-nota="50"] .medidor i { width: 50%; background: var(--c-ambar); }
/* El ciclo medido de la portada (backend/tests/data/ciclo_medido.json). */
.lectura[data-nota="23"] .medidor i { width: 23%; }
.lectura[data-nota="26"] .medidor i { width: 26%; }

/* Las marcas: UNA por hallazgo, no una barra proporcional. Se pueden contar,
   que es lo que convierte «44 findings» en algo que se ve. El guardian
   comprueba que el numero de marcas es el numero escrito al lado. */
.marcas { display: flex; flex-wrap: wrap; gap: 3px .75rem; list-style: none;
          margin: .75rem 0 0; padding: 0; }
.marcas li { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.marcas i { display: block; width: 7px; height: 14px; border-radius: 1.5px; }
.marcas [data-g="critical"] i { background: var(--c-rojo); }
.marcas [data-g="high"] i     { background: var(--c-naranja); }
.marcas [data-g="medium"] i   { background: var(--c-ambar); }
.marcas [data-g="low"] i      { background: var(--c-baja); }
.marcas [data-g="info"] i     { background: var(--c-info); }
/* La cifra va delante de sus marcas, VISIBLE: «10 high» y diez marcas. Un
   parte de trabajo enseña el numero; antes iba oculta para el lector de
   pantalla y una leyenda aparte ataba los colores -- y esa leyenda no tenia
   color, porque sus reglas nunca casaron (mision v3 §2). Con la cifra al lado
   la leyenda sobra. En tenue y no en el color del grupo: `--c-info` sobre el
   fondo no llega a AA en texto pequeño, y la marca ya lleva el color. */
.cifra-marca {
  font: 600 .8125rem/14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--c-tenue); margin-right: .2rem; white-space: nowrap;
}

/* --- Los cuatro pasos ----------------------------------------------------- */
.pasos-visuales { list-style: none; margin: 1.5rem 0 0; padding: 0;
                  display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .pasos-visuales { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; } }
/* Cuatro columnas desde 1024 px: los cuatro pasos en una franja, el icono
   encima del titulo. Por debajo, 2×2; en movil, una columna. */
/* Cuatro columnas a partir de 1024 se retiraron el 17/09/2026: con el
   contenedor a 62rem cada parrafo quedaba a 172px y la auto-auditoria lo
   acuso (7-8 lineas, layout.paragraph_too_long). Dos columnas desde 46rem
   dan ~40 caracteres por linea, que es lo que dice docs/usabilidad.md. */
.pasos-visuales li { display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem;
                     align-items: start; }
.paso-icono { grid-row: span 2; width: 44px; height: 44px; border-radius: .6rem;
              border: 1px solid var(--regla); display: grid; place-items: center;
              color: var(--tinta); }
.paso-icono svg { width: 22px; height: 22px; }
.paso-titulo { margin: 0; font-size: 1.6rem; line-height: 1.1; display: flex; align-items: baseline; gap: .5rem; }
.paso-titulo span { font: 600 .875rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                    color: var(--suave); letter-spacing: .06em; }
.pasos-visuales p { margin: 0; max-width: 42ch; color: var(--suave); }

/* --- Las fichas de add-on ------------------------------------------------- */
.fichas { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 46rem) { .fichas { grid-template-columns: repeat(3, 1fr); } }
.ficha { border: 1px solid var(--regla); border-radius: .75rem; padding: 1.1rem; }
.ficha svg { width: 24px; height: 24px; color: var(--tinta); }
.ficha h3 { margin: .6rem 0 .35rem; font-size: 1.125rem; }
/* El titulo con sello («Coming soon»): en flex con salto, para que a 320 px
   el sello baje de linea en vez de pisar el enlace (axe: link-in-text-block). */
.ficha h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.ficha h3 a { color: inherit; text-decoration: none; }
.ficha h3 a:hover, .ficha h3 a:focus { text-decoration: underline; }
.ficha p { margin: 0; color: var(--suave); max-width: 60ch; }

/* --- La semana de prueba -------------------------------------------------
   Siete dias y el octavo, que es el unico en el que pasa algo con el dinero.
   Los numeros salen de `settings.stripe_trial_days` / ADR 0009. */
/* Dos columnas en el movil mas estrecho, cuatro despues, ocho en cuanto caben.
   A 360px con cuatro columnas la pagina se iba a 389px de ancho y lo cazo
   `layout.overflow_x` en `auditoria_propia.py`: una celda de rejilla trae
   `min-width: auto`, asi que la palabra mas larga del rotulo --«cancelled»--
   empujaba la fila entera por encima del viewport. `min-width: 0` es lo que
   deja que el texto se parta en vez de ensanchar la columna. */
.linea-dias { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem;
              list-style: none; margin: 1.5rem 0 0; padding: 0; }
@media (min-width: 26rem) { .linea-dias { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 46rem) { .linea-dias { grid-template-columns: repeat(8, 1fr); } }
.linea-dias li { border: 1px solid var(--c-borde); border-radius: .5rem;
                 padding: .6rem .5rem; background: var(--c-panel);
                 min-width: 0; overflow-wrap: break-word; }
.dia-num { display: block; font: 700 1.125rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           color: var(--c-tinta); }
.dia-que { display: block; margin-top: .3rem; font-size: .875rem; line-height: 1.35;
           color: var(--c-tenue); }
.linea-dias [data-cobro] { border-color: var(--c-ambar); }
.linea-dias [data-cobro] .dia-num { color: var(--c-ambar); }
.linea-dias [data-aviso] .dia-que { color: var(--c-tinta); }

/* --- El hueco declarado --------------------------------------------------
   Una seccion que todavia no tiene su captura real NO se disimula: dice que
   falta y que falta. Una seccion ausente se olvida; un hueco con su nombre
   escrito se llena. `docs/capturas-pendientes.md` lleva la lista. */
.hueco { border: 2px dashed var(--c-borde); border-radius: .75rem;
         padding: 1.5rem 1.25rem; text-align: left; }
.hueco p { margin: 0; color: var(--c-tenue); }
.hueco p + p { margin-top: .6rem; }
.hueco strong { color: var(--c-tinta); }

/* --- Movimiento con proposito --------------------------------------------
   150 ms para color y borde, que es lo unico que se mueve aqui. Entero
   dentro de `no-preference`: con la preferencia activa no se mueve ni un
   fotograma, que es la regla de DESIGN.md §3. */
@media (prefers-reduced-motion: no-preference) {
  .ficha, .paso-icono, .cta, .cta-2, .nav-links a, .lectura {
    transition: border-color 150ms ease-out, background-color 150ms ease-out,
                color 150ms ease-out, filter 150ms ease-out;
  }
  .ficha:hover, .ficha:focus-within { border-color: var(--tinta); }
  .pasos-visuales li:hover .paso-icono { border-color: var(--tinta); }

  /* La nota se dibuja (400 ms) y las marcas aparecen por severidad (40 ms de
     escalon, 160 ms en total) cuando la lectura entra en pantalla. `.animar`
     lo pone assets/sitio.js SOLO con esta misma preferencia, y `.visto` al
     entrar; sin JS no hay `.animar` y el estado inicial es el final. El
     escalon va por grupo (`nth-child`) y no por marca porque un estilo en
     linea lo prohibe la CSP (`style-src 'self'`). */
  .medidor i { transition: width 400ms cubic-bezier(.25, 1, .5, 1); }
  .marcas i { transition: opacity 250ms ease-out; }
  .marcas li:nth-child(2) i { transition-delay: 40ms; }
  .marcas li:nth-child(3) i { transition-delay: 80ms; }
  .marcas li:nth-child(4) i { transition-delay: 120ms; }
  .marcas li:nth-child(5) i { transition-delay: 160ms; }
  .animar .lectura:not(.visto) .medidor i { width: 0; }
  .animar .lectura:not(.visto) .marcas i { opacity: 0; }
}

/* --- La captura del producto ---------------------------------------------
   Producto real, no dibujo: sale del recorrido e2e (`E2E_CAPTURAS`), que
   levanta la aplicacion entera y fotografia el panel. Se recorta a la primera
   pantalla A PROPOSITO, y el motivo esta en docs/capturas-pendientes.md: mas
   abajo la captura muestra cifras de siembra («99998 audits available this
   month») que en una pagina de venta se leerian como una promesa. Un
   pantallazo de verdad con datos falsos sigue siendo un dato falso. */
.captura { margin: 0; }
.captura img {
  display: block; width: 100%; height: auto; border-radius: .5rem;
  border: 1px solid var(--c-borde);
}
.captura figcaption {
  margin-top: .75rem; color: var(--c-tenue); font-size: .875rem;
  line-height: 1.5; max-width: 60ch;
}

/* --- El ciclo: dos lecturas lado a lado, el diff y lo que queda -----------
   Mismo instrumento dos veces, antes y despues. En una columna van una
   debajo de otra con la regla de siempre; desde 46rem, a dos columnas y sin
   la regla entre medias (la separa el hueco). */
.ciclo { display: grid; gap: 1rem; }
@media (min-width: 46rem) {
  .ciclo { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .ciclo .lectura + .lectura { border-top: 0; margin-top: 0; padding-top: 0; }
}
.ciclo-cifra { color: var(--c-tinta); font-size: 1.125rem; }

/* El diff real: solo las lineas que SitePilot escribio. Se envuelve en vez
   de desbordar, porque una meta description ocupa mas que un movil. */
.diff {
  margin: 0 0 1rem; padding: .9rem 1rem;
  background: var(--c-panel); border: 1px solid var(--c-borde); border-radius: .5rem;
  font: 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 80ch;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--c-tenue);
}
.diff ins { text-decoration: none; color: var(--c-ok); }
.diff del { text-decoration: none; color: var(--c-baja); }

/* La confianza con que el motor afirma un hallazgo: tres valores, tres
   colores, y solo dentro de la consola, donde pasan AA sobre oscuro
   (docs/diseno-lgs.md §2). El texto va ademas en letras: el color no es el
   unico canal. */
.chip {
  display: inline-block; padding: .05rem .5rem; border-radius: 999px;
  font: 600 .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; vertical-align: middle;
}
.chip[data-confianza="CONFIRMED"] { color: var(--c-ok); }
.chip[data-confianza="LIKELY"]    { color: var(--c-ambar); }
.chip[data-confianza="POSSIBLE"]  { color: var(--c-baja); }
.pendientes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.pendientes li { color: var(--c-tenue); max-width: 60ch; }

/* --- El parte de trabajo: etiqueta, casillas y sello -----------------------
   Lo que un tradie tiene en la guantera: la etiqueta pequena en mayusculas
   y el dato grande debajo, lineas de pauta, y un sello sobre lo que se
   midio. Sellos rectos, en tinta plana, sin textura: lo inclinado y lo
   desgastado es disfraz (docs/direccion-visual.md §3B). */
.etiqueta {
  font: 600 .875rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--suave); margin: 0 0 .5rem;
  /* A 1440 el rotulo del hero se partia dejando «HOUR» sola en la segunda
     linea (medido el 18/09/2026, docs/diseno/critica-hero.md). `balance`
     reparte las dos lineas y no cambia cuantas hay; donde no exista, no
     hace nada. */
  text-wrap: balance;
}
.parte { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem;
         margin: 1.25rem 0; padding: .75rem 0; border-top: 1px solid var(--regla);
         border-bottom: 1px solid var(--regla); max-width: 60ch; }
.parte dt { font: 600 .875rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.parte dd { margin: 0; }
.sello {
  display: inline-block; padding: .1rem .55rem; border: 2px solid currentColor;
  border-radius: .25rem; vertical-align: middle;
  font: 700 .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta);
}
.consola .sello { color: var(--c-ok); }
.consola-etiqueta .sello { margin-left: .5rem; }

/* --- El hero en vivo: una ejecucion grabada del motor, reproducida ----------
   El parte de doce filas (area · cuenta · marcas), la casilla de la nota, el
   diff y la segunda lectura. Todo ocupa su hueco final desde el primer
   fotograma: el JS solo cambia opacidad, texto y el ancho de la barra, nunca
   el alto de nada (cero desplazamiento de maquetado). Sin JS o con
   prefers-reduced-motion, lo que hay en el HTML ES el resultado final
   (docs/wow-design.md). */
.demo .demo-nota-sitio { margin: 0 0 1rem; }
.demo-fases { display: grid; gap: 1.25rem; }
@media (min-width: 60rem) {
  .demo-fases { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .demo-fase[data-fase="audit"] { grid-row: span 2; }
}
.demo-fase .etiqueta { color: var(--c-tenue); margin-bottom: .75rem; }
.demo-lectura { margin: 0 0 1rem; }
.demo-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.demo-areas li {
  display: grid; grid-template-columns: minmax(7.5rem, 1fr) auto; gap: .15rem .75rem;
  align-items: center; min-height: 1.75rem; border-top: 1px solid var(--c-borde); padding-top: .35rem;
}
.demo-area { color: var(--c-tinta); font-size: .875rem; }
.demo-cuenta { font: .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
               color: var(--c-tenue); text-align: right; white-space: nowrap; }
.demo-marcas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; min-height: 14px; }
.demo-marcas i { display: block; width: 7px; height: 14px; border-radius: 1.5px; }
.demo-marcas i[data-g="critical"] { background: var(--c-rojo); }
.demo-marcas i[data-g="high"]     { background: var(--c-naranja); }
.demo-marcas i[data-g="medium"]   { background: var(--c-ambar); }
.demo-marcas i[data-g="low"]      { background: var(--c-baja); }
.demo-marcas i[data-g="info"]     { background: var(--c-info); }
@media (min-width: 30rem) {
  .demo-areas li { grid-template-columns: minmax(8.5rem, auto) auto 1fr; }
  .demo-marcas { grid-column: auto; }
}
.demo-diff { margin: 0; }
.demo-diff .diff { margin: 0; }
.demo-cierre { margin: 0; }
.demo-acciones { margin: 1rem 0 0; }
/* El boton de saltar reserva su sitio siempre y solo se ve cuando hay algo
   que saltar: sin JS o con reduced-motion no hay animacion que parar. */
.demo-saltar { visibility: hidden; }
.demo[data-estado="animando"] .demo-saltar { visibility: visible; }
/* Un <button> trae fondo gris del navegador: sobre la consola, el verde
   encima de ese gris no pasa AA (Lighthouse lo cazo). Fondo transparente. */
.consola .cta-2 { border-color: var(--c-ok); color: var(--c-ok); background: transparent;
                  font: inherit; cursor: pointer; }


/* --- El hero «parte tecnico» (docs/diseno-final.md, V1) --------------------
   60/40 desde 60rem; la lectura es la misma `.lectura` de /proof.html con la
   consola en papel: las variables --c-* se reescriben una vez y el resto del
   componente (medidor, marcas, sello) es el de siempre. */
@media (min-width: 60rem) {
  .hero { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; align-items: start; }
}
.hero .lead { max-width: 40ch; }
.consola.parte-lectura {
  --c-fondo: #ffffff; --c-panel: #ebe6de; --c-borde: var(--tinta);
  --c-tinta: var(--tinta); --c-tenue: var(--suave);
  --c-ok: #1b6b3a; --c-ambar: #a16207; --c-naranja: #c2410c; --c-rojo: #b3261e;
  --c-baja: #4a5164; --c-info: #6b7386;
  border-width: 1.5px; border-radius: .25rem; margin-block: 1.5rem 0; padding: 1.25rem 1.25rem 1.5rem;
}
@media (prefers-color-scheme: dark) {
  .consola.parte-lectura { --c-fondo: #161c2c; --c-panel: #2a3244; --c-borde: #8e97ab; --c-ok: #6fdc9a; --c-ambar: #ffc247; --c-naranja: #ff9a5c; --c-rojo: #ff8a8a; --c-baja: #c3c9d6; --c-info: #9aa3b5; }
}
.parte-lectura .lectura-cifra { flex-wrap: wrap; align-items: baseline; gap: .15rem; margin: .25rem 0 .75rem; font-family: inherit; }
.parte-lectura .lectura-cifra b { font-size: clamp(5.5rem, 12vw, 8.5rem); line-height: .9; letter-spacing: -.04em; font-weight: 400; font-variant-numeric: tabular-nums; }
.parte-lectura .lectura-cifra span { font-size: 1.1rem; color: var(--c-tenue); }
.parte-lectura .medidor { height: 10px; border-radius: 2px; border: 1px solid var(--c-borde); background: var(--c-panel); }
.parte-lectura .marcas { margin-top: .75rem; display: grid; gap: .3rem; }
.parte-lectura .marcas li { font-size: .95rem; }
.parte-lectura .lectura-fecha { margin: 1.25rem 0 0; font-size: .875rem; color: var(--c-tenue); max-width: none; }
.parte-lectura .lectura-fecha a { color: var(--c-tinta); }
.parte-lectura .sello { color: var(--c-tinta); margin-right: .35rem; }

/* La tabla de «what you see when you log in»: dos columnas, sin adornos. */
.tabla-panel { border-collapse: collapse; width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; margin-top: 1rem; }
.tabla-panel caption { text-align: left; font-weight: 600; padding: .5rem 0; caption-side: top; }
.tabla-panel th, .tabla-panel td { text-align: left; vertical-align: top; padding: .7rem .5rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--regla); }
.tabla-panel thead th { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); border-bottom: 1.5px solid var(--tinta); }
.tabla-panel tbody th { width: 32%; }

/* La prueba (/proof.html): cuatro lecturas del mismo instrumento, en papel,
   con la cifra en serif como en el hero (docs/gramatica-lgs.md). */
.consola.parte-lectura .lecturas { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .consola.parte-lectura .lecturas { grid-template-columns: repeat(2, 1fr); } }
.consola.parte-lectura .lectura + .lectura { border-top: 0; margin-top: 0; padding-top: 0; }
.consola.parte-lectura .lectura { border-top: 1.5px solid var(--c-borde); padding-top: 1rem; }
.consola.parte-lectura .lectura .lectura-cifra b { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: .9; letter-spacing: -.03em; }

/* El banner de consentimiento de analitica: solo aparece con AUDIT_GA_ID y
   sin eleccion guardada (analitica.js). Papel, regla de tinta, dos botones. */
.consentimiento { position: fixed; inset: auto 0 0 0; z-index: 20; background: var(--papel); color: var(--tinta);
  border-top: 1.5px solid var(--tinta); padding: 1rem clamp(1rem, 4vw, 3rem); }
.consentimiento p { margin: 0 0 .5rem; max-width: 60ch; }
.consentimiento-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- El sonar del hero (docs/escaner-v2.md, docs/sonar-construccion.md) --
   sonar.js crea un <canvas> dentro de .sonar-disco y dibuja SOLO geometria
   (aro, barrido, marcas), leyendo los colores de las variables --c-* de esta
   tarjeta con getComputedStyle: por eso el tema oscuro funciona sin tocar el
   JS. La cifra, la cuenta, la leyenda y la lista de doce son HTML. Ningun
   svg. Sin JS o con prefers-reduced-data no hay canvas: el aro lo pone el
   CSS mientras el estado es «quieto», y el HTML ya es el estado final. */
.sonar-tarjeta { position: relative; }
.sonar-tarjeta .lectura-sitio { margin-bottom: .5rem; padding-right: 5.5rem; }
.sonar-disco { position: relative; width: min(100%, 380px); aspect-ratio: 1 / 1; margin: 0 auto; }
.sonar[data-estado="quieto"] .sonar-disco { border: 1.5px solid var(--c-borde); border-radius: 50%; }
.sonar-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Sin `pointer-events: none`: axe localiza el fondo de un texto con
   elementsFromPoint, y un elemento transparente a los eventos no aparece en
   su propia pila; devolvia color-contrast «parcialmente tapado» (medido). */
.sonar-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
                justify-content: center; text-align: center; }
/* Fondo propio bajo la cifra: axe no puede determinar el fondo de un texto
   que se apoya en un <canvas> y devuelve color-contrast «incompleto» (el
   recorrido lo cuenta como fallo); con fondo propio lo mide. Es el mismo
   color que el disco, asi que solo se nota en que el barrido pasa por debajo. */
.sonar-cifras { background: var(--c-fondo); border-radius: .25rem; padding: .5rem 1.3rem; }
.sonar-centro .lectura-cifra { margin: 0; justify-content: center; gap: .1rem; }
/* La cifra en tinta, no en tenue: es la protagonista (critica-hero-actual.md).
   Interlinea 1.2 y no la .9 del resto de lecturas: con .9 el rectangulo del
   texto (145 px a 112 px de cuerpo) desborda la caja del <b> (101 px) y axe
   devuelve color-contrast «parcialmente tapado» (medido: con 1.2, limpio).
   Va dentro del disco, asi que no cambia el alto de la tarjeta. */
.sonar-centro .lectura-cifra b { color: var(--c-tinta); font-size: clamp(4.5rem, 10vw, 7rem); line-height: 1.2; }
.sonar-centro .sonar-cuenta-linea, .sonar-leyenda {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
  color: var(--c-tenue); max-width: none; }
.sonar-centro .sonar-cuenta-linea { margin: .35rem 0 0; font-size: .9rem; }
/* Dos lineas reservadas: la leyenda cambia de largo doce veces por vuelta y
   la tarjeta no puede cambiar de alto. */
.sonar-leyenda { margin: .35rem 0 0; min-height: 2.6em; font-size: .75rem; line-height: 1.3; text-align: center; }
.sonar-areas { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .1rem .8rem; }
@media (min-width: 48rem) { .sonar-areas { grid-template-columns: 1fr 1fr; } }
.sonar-fila { font-size: .8rem; line-height: 1.2; }
.sonar-area { color: var(--c-tinta); }
.sonar-fila .sonar-cuenta { color: var(--c-tenue); font-size: .75rem; }
/* El punto de cada fila lleva la peor severidad en DOS canales (WCAG 1.4.1):
   el color y la forma. De menos a mas grave: anillo (nada), circulo (baja),
   rombo (media), cuadrado (alta), triangulo (critica); la nota de cobertura
   (`info`, peso cero) es un anillo a trazos. Sin color siguen siendo cinco
   formas distintas; test_sonar_severidad_forma.py lo fija. Las mismas cinco
   formas dibuja sonar.js en el disco. */
.sonar-punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c-info); vertical-align: -1px; margin-right: .35rem; box-sizing: border-box; }
.sonar-punto[data-g="critical"] { background: var(--c-rojo); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sonar-punto[data-g="high"]     { background: var(--c-naranja); border-radius: 0; }
.sonar-punto[data-g="medium"]   { background: var(--c-ambar); border-radius: 0; transform: rotate(45deg) scale(.8); }
.sonar-punto[data-g="low"]      { background: var(--c-baja); }
.sonar-punto[data-g="info"]     { background: transparent; border: 2px dashed var(--c-info); }
.sonar-punto[data-g="none"]     { background: transparent; border: 2px solid var(--c-ok); }
.sonar-altos { margin: .4rem 0 0; font-size: .75rem; line-height: 1.3; max-width: none; }
.sonar-altos q { color: var(--c-tinta); }
.sonar-tarjeta .lectura-fecha { margin-top: .5rem; font-size: .8rem; line-height: 1.35; }
/* Pause/Play (WCAG 2.2.2): fuera del flujo, para que la tarjeta acabe donde
   acaba el dato; sonar.js lo ensena solo cuando hay algo que parar. */
.sonar-pausa { position: absolute; top: .6rem; right: .6rem; padding: .35rem .7rem; font-size: .8rem; }
.consola.parte-lectura .cta-2.sonar-pausa { border-color: var(--c-tinta); color: var(--c-tinta); }
.sonar-pausa[hidden] { display: none; }