/* Keravo — hoja compartida de las páginas de contenido.
   La home (index.html) lleva su propio CSS: es una pieza interactiva y no
   comparte estructura con estas. */


/* ---------- ESCALA TIPOGRÁFICA -----------------------------------------
   Razón 10:9 (1.111, el tono menor). Peldaño de referencia 15px, el texto
   corrido: es el único tamaño que no se movió al derivar la escala.

   Por qué 10:9 y no otra razón:

     · Es la mayor razón que NO mueve ninguna columna de texto. Las medidas
       de esta hoja se fijan en `ch` —56ch la entradilla, 64ch el párrafo,
       62ch la lista— y el navegador redondea el `ch` a píxeles enteros: con
       Inter, cuyo cero mide 0.6 em, el `ch` salta de valor en 13.33, 15 y
       16.67px. Una razón de 1.125 pone peldaños en 13.33 y 16.88, justo al
       otro lado de dos de esos saltos, y estrecha o ensancha las columnas
       un 11 % sin tocar el tamaño de letra. 10:9 pone los suyos en 13.5,
       15 y 16.6: dentro de las mismas franjas que los tamaños actuales, así
       que las columnas miden exactamente lo que medían.

     · Aun así separa dos peldaños contiguos a simple vista (11 %). Por
       debajo reaparecen tamaños indistinguibles entre sí, que es justo el
       desorden que esto corrige.

     · Deja la marca casi quieta: 34px del numeral pasan a 34.8, 21px del
       dato destacado a 20.6 y 19px del logotipo a 18.5.

   Los tres registros de MARCA.md 1.3 ocupan tramos distintos de la escala:
     JetBrains Mono REGISTRA  →  sello · pie · etiqueta · rótulo   6.5 – 8.9
     Inter EXPLICA            →  detalle · apunte · interfaz ·
                                 nota · cuerpo · entradilla        9.8 – 16.6
     Newsreader AFIRMA        →  logotipo · cifra · epígrafe ·
                                 numeral · sección · titular      18.5 – 53.1

   La escalera completa, redondeada a la décima de píxel:
     6.5  7.2  8  8.9  9.8  10.9  12.2  13.5  15  16.6  18.5  20.6
     22.9  25.4  28.2  31.4  34.8  38.7  43  47.8  53.1  59

   El peldaño 16.6 es el único que se redondea hacia abajo en vez de al más
   próximo: su valor exacto, 16.667, cae clavado en el salto del `ch` y con
   16.7px la entradilla se ensancharía de 560 a 616px.

   Aquí se declaran solo los peldaños que esta hoja usa. Si hiciera falta uno
   nuevo sale de la escalera; no se inventa un tamaño intermedio.

   Los dos clamp() unen dos peldaños: mínimo y máximo son peldaños de la
   escalera y la pendiente en vw es la que ya tenía el diseño.
--------------------------------------------------------------------- */
:root{
  --t-etiqueta:8px;             /* etiquetas de procedencia y descriptor de marca */
  --t-rotulo:8.9px;             /* navegación, antetítulos, encabezados de tabla y letra fina del pie */
  --t-detalle:9.8px;            /* el detalle que se lee de cerca: rótulo de botón y pie de figura */
  --t-apunte:10.9px;            /* rótulo de subsección */
  --t-interfaz:12.2px;          /* símbolos de control */
  --t-nota:13.5px;              /* texto secundario: celdas de tabla, notas al margen, avisos */
  --t-cuerpo:15px;              /* texto corrido. El peldaño que no se mueve */
  --t-entradilla:16.6px;        /* la entrada de la página */
  --t-logotipo:18.5px;          /* logotipo */
  --t-cifra:20.6px;             /* un dato a tamaño de titular */
  --t-numeral-estrecho:25.4px;  /* el numeral cuando la columna se estrecha */
  --t-epigrafe:28.2px;          /* el titular de sección en su tamaño máximo */
  --t-numeral:34.8px;           /* el numeral de los pasos */
  --t-seccion:clamp(var(--t-cifra),3.4vw,var(--t-epigrafe));
  --t-titular:clamp(31.4px,6vw,53.1px);
}


/* ---------- COLOR ------------------------------------------------------
   Arco de MARCA.md: el negro es el problema y la observación; el hueso es
   el documento. Las páginas de lectura larga —metodología, cómo funciona,
   legales— son documento, así que van en claro. El hero y la narrativa
   van en oscuro.

   Cambiar de tema es poner data-tema="oscuro" en <html>.
--------------------------------------------------------------------- */
:root{
  /* Declarado para que el anillo de foco por defecto, la barra de
     desplazamiento y los controles nativos —el selector de fichero de
     verificar.html— se pinten con el esquema que la página usa de verdad. */
  color-scheme:light;
  --fondo:#F7F4EB;
  --tinta:#141410;
  --tinta-2:#55534A;      /* texto discursivo */
  --tinta-3:#6E6B60;      /* secundario — 4.85:1 sobre hueso */
  --tinta-4:#807D6F;      /* tenue — 3.76:1: solo texto grande o líneas */
  --linea:#E4E0D2;
  --linea-2:#D5D0BE;
  --borde:#BFB9A5;
  --ambar:#9A6415;        /* ámbar oscurecido para contraste sobre hueso */
  --inverso:#F7F4EB;
}
html[data-tema="oscuro"]{
  color-scheme:dark;
  --fondo:#0E0E0C;
  --tinta:#F7F4EB;
  --tinta-2:#8A8778;
  --tinta-3:#8A8778;      /* gris piedra — 5.93:1 sobre negro */
  --tinta-4:#6E6B60;      /* tenue — solo líneas y texto grande */
  --linea:#171713;
  --linea-2:#22221D;
  --borde:#34342C;
  --ambar:#B8781F;
  --inverso:#0E0E0C;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  background:var(--fondo);
  color:var(--tinta);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
body{line-height:1.6}

/* Reparto de MARCA.md, tres funciones:
   Instrument Serif afirma · Inter explica · JetBrains Mono registra lo medido.
   La monoespaciada NUNCA en texto discursivo. */
.mono,.eyebrow,.nav a,.markd,.etq,.tabla th,footer a,footer .fine,h3,.fine{
  font-family:'JetBrains Mono',monospace;
}

.serif{font-family:'Newsreader',Georgia,serif;font-weight:400}
a{color:inherit}

/* ---------- enlace de salto ----------
   Primera parada de tabulación de cada página. Fuera de pantalla hasta que
   recibe el foco: sin él hay que atravesar los seis enlaces de la cabecera
   en cada una de las 22 páginas antes de llegar al contenido. */
.saltar{position:absolute;left:-9999px;top:0;z-index:100}
.saltar:focus{
  left:0;top:0;
  background:var(--fondo);color:var(--tinta);
  border:1px solid var(--tinta);padding:12px 18px;text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:var(--t-rotulo);letter-spacing:2px;
}
/* El destino del salto recibe el foco por guion, no por tabulación: ahí el
   anillo sobra. Cuando llega por teclado sí se dibuja. */
main[tabindex]:focus{outline:none}
main[tabindex]:focus-visible{outline:2px solid var(--tinta-2);outline-offset:-3px}

/* ---------- LA BANDA ---------------------------------------------------
   Toda página que no sea la home abre con una banda negra —haz de fondo,
   logotipo e isotipo— y sigue en hueso para el cuerpo. Es el mismo arco que
   ya hace el expediente en PDF: portada negra, cuerpo en papel.

   Por qué no todo oscuro. MARCA.md 1.4 fija el significado: el negro es el
   problema y la observación, el hueso es el documento. Volver oscuro también
   el cuerpo daría más unidad visual y perdería el arco entero, además de
   castigar la lectura larga —metodología, normativa y legales pasan de las
   mil palabras—.

   Por qué no dejarlo como estaba. Sin nada compartido arriba, cada página
   parecía de un sitio distinto hasta leer el logotipo. La banda resuelve el
   reconocimiento en el primer píxel sin tocar el cuerpo.

   Los colores de la banda van fijos, no por variable de tema: la banda es
   negra en todos los temas, y escribirlos aquí es lo que permite que la
   puerta de marca resuelva el contraste de su texto sin adivinar el fondo.
--------------------------------------------------------------------- */
.banda{
  position:relative;overflow:hidden;
  background:#0E0E0C;
  min-height:170px;
  display:flex;flex-direction:column;
  padding:24px 30px 20px;
}
/* El lienzo del haz. Sin JavaScript queda una banda negra lisa, que sigue
   siendo la banda: el haz añade, no sostiene. */
.haz{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.banda-in{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}

/* Los selectores nombran a `.banda` a propósito: es lo que permite a la puerta
   de marca resolver sobre qué fondo va cada texto —el negro de la banda, no el
   hueso de la página— y medir el contraste de verdad en vez de darlo por no
   resoluble. */
.banda .mark{font-family:'Newsreader',Georgia,serif;font-size:var(--t-logotipo);letter-spacing:-.3px;line-height:1;text-decoration:none;color:#F7F4EB}
.banda .markd{font-size:var(--t-etiqueta);letter-spacing:2.2px;color:#8A8778;margin-top:4px}
.nav{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end}
.banda .nav a{font-size:var(--t-rotulo);letter-spacing:1.6px;color:#8A8778;text-decoration:none;white-space:nowrap}
.banda .nav a:hover,.banda .nav a[aria-current]{color:#F7F4EB}
/* Sobre negro el anillo de foco del navegador —que sigue a color-scheme:light—
   se pierde. Aquí se declara uno propio, en hueso. */
.banda .mark:focus-visible,.banda .nav a:focus-visible{outline:2px solid #F7F4EB;outline-offset:4px}

/* ---------- EL ISOTIPO EN LA BANDA -------------------------------------
   Cuatro esquinas, la cuarta desplazada, dibujadas con fondos y bordes: sin
   fichero de imagen, sin petición de red y sin depender de JavaScript. Mismo
   trazado que el vector del expediente (packages/report/templates/dossier.typ).

   Las medidas van escritas, no en variables propias: una regla con propiedades
   personalizadas la lee la puerta de marca como si fuera un tema nuevo, y
   duplica cada comprobación de contraste de la hoja entera.

   Cuadrado de 32, cuarta esquina desplazada 5, brazo de 9 y trazo de 1: las
   mismas proporciones del vector del expediente (brazo 0.30, desplazamiento
   0.17 del lado).
--------------------------------------------------------------------- */
.iso{
  position:relative;z-index:1;flex-shrink:0;
  margin-top:auto;align-self:flex-end;
  width:37px;height:37px;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(#9A9486,#9A9486),linear-gradient(#9A9486,#9A9486),
    linear-gradient(#9A9486,#9A9486),linear-gradient(#9A9486,#9A9486),
    linear-gradient(#9A9486,#9A9486),linear-gradient(#9A9486,#9A9486);
  background-size:9px 1px,1px 9px, 9px 1px,1px 9px, 9px 1px,1px 9px;
  background-position:0 0,0 0, 23px 0,31px 0, 0 31px,0 23px;
}
/* marca-ok: la cuarta esquina desplazada ES el hallazgo — MARCA.md 1.2: el
   hueco «es lo que Keravo señala». El halo y el punto del vértice son los que
   le dan el peso distinto, no solo otro color, que es la decisión del 4/8/2026
   registrada en docs/DECISIONES-DISENO.md. Es el único ámbar de toda la banda:
   en una cabecera no hay hallazgos, y por eso el haz va en cianotipo. */
.iso::before{
  content:"";position:absolute;right:-13px;bottom:-13px;width:26px;height:26px;
  background-image:
    radial-gradient(circle at 50% 50%,rgba(184,120,31,.22) 0%,rgba(184,120,31,.07) 38%,rgba(184,120,31,0) 66%),
    radial-gradient(circle at 50% 50%,#B8781F 0%,#B8781F 8%,rgba(184,120,31,0) 9%);
}
.iso::after{
  content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;
  border-right:1.7px solid #B8781F;border-bottom:1.7px solid #B8781F;
}
/* En estrecho el menú envuelve en tres filas y llega hasta el borde derecho:
   ahí el isotipo quedaría pegado al último enlace. Pasa al hueco de la
   izquierda, bajo el descriptor, donde no compite con nada. */
@media(max-width:640px){
  .iso{
    align-self:flex-start;margin-bottom:2px;
    width:30px;height:30px;
    background-size:7.5px 1px,1px 7.5px, 7.5px 1px,1px 7.5px, 7.5px 1px,1px 7.5px;
    background-position:0 0,0 0, 18.5px 0,25px 0, 0 25px,0 18.5px;
  }
  .iso::before{right:-11px;bottom:-11px;width:22px;height:22px}
  .iso::after{width:9px;height:9px}
}

/* ---------- contenedor ---------- */
.wrap{max-width:820px;margin:0 auto;padding:52px 30px 90px}
@media(max-width:640px){.wrap{padding:36px 22px 70px}.banda{min-height:0;padding:18px 22px 46px}}

/* ---------- COLUMNA DE MARGEN ------------------------------------------
   La columna colgante del expediente traída a la web: el número de sección
   cuelga fuera de la caja de texto y el título arranca donde arranca el
   párrafo. Es lo que le da al PDF aire de informe pericial en vez de folleto
   —la mancha de texto deja de estar centrada y aparece una columna de
   servicio— y aquí hace lo mismo.

   El criterio es uno solo: la lleva el documento que NO se numera ya por su
   cuenta. Dos numeraciones a la vista y el lector no sabe cuál sigue cuál.

   Dónde SÍ, con <body class="doc">: metodología · las fichas y guías de
   normativa · los artículos de actualidad · preguntas · nuestro expediente.

   Dónde NO, y por qué:
     · «cómo funciona» es una secuencia 01-04 dentro del propio texto.
     · Los índices de normativa, actualidad y chatbots numeran sus entradas.
     · El aviso legal y la política de privacidad numeran sus apartados en el
       propio título («1 · Responsable del tratamiento»); cookies va con ellas
       porque los tres se leen como un bloque.
     · Contacto, el verificador y la comprobación de un expediente son
       herramientas, no documentos; el expediente de ejemplo es una portada.

   El ancho de la columna de texto no se mueve: 990 − 200 − 30 = 760 px, los
   mismos que daba 820 − 60. Lo que cambia es que el bloque entero se
   descentra, que es justo el efecto buscado.

   Por debajo de 1120 px no hay sitio para colgar nada sin invadir el texto o
   desbordar, así que la columna no aparece y la página se ve exactamente como
   antes. El contador se lleva igualmente fuera de la consulta para que la
   numeración no dependa del ancho de la ventana.
--------------------------------------------------------------------- */
.doc .wrap{counter-reset:sec}
.doc .wrap h2{counter-increment:sec}
@media(min-width:1120px){
  .doc .wrap,.doc footer .in{max-width:990px;padding-left:200px}
  .doc .wrap h2{position:relative}
  /* El número es un localizador, no parte del título: el texto alternativo
     vacío lo deja fuera del nombre accesible del encabezado, que no cambia. */
  .doc .wrap h2::before{
    content:counter(sec,decimal-leading-zero) / "";
    position:absolute;left:-170px;top:.1em;width:140px;text-align:right;
    font-family:'JetBrains Mono',monospace;font-size:var(--t-numeral);
    line-height:1;color:var(--tinta-3);
  }
}

.eyebrow{font-size:var(--t-rotulo);letter-spacing:2.6px;color:var(--tinta-2);margin-bottom:28px}
h1{font-size:var(--t-titular);line-height:1.04;letter-spacing:-1.5px;margin-bottom:24px}
h1 em{font-style:italic;color:var(--tinta-2)}
.lede{font-size:var(--t-entradilla);line-height:1.75;color:var(--tinta-2);max-width:56ch;letter-spacing:0;margin-bottom:22px}

h2{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:var(--t-seccion);
   letter-spacing:-.5px;margin:54px 0 18px;line-height:1.2}
h3{font-size:var(--t-apunte);letter-spacing:2px;color:var(--tinta);margin:32px 0 12px}

p{font-size:var(--t-cuerpo);line-height:1.8;color:var(--tinta-2);letter-spacing:0;margin-bottom:16px;max-width:64ch}
p b,li b{color:var(--tinta);font-weight:400}
p em{color:var(--tinta);font-style:normal}

ul,ol{margin:0 0 18px 0;padding-left:20px;max-width:62ch}
li{font-size:var(--t-cuerpo);line-height:1.8;color:var(--tinta-2);letter-spacing:0;margin-bottom:10px}
li::marker{color:var(--tinta-4)}

hr{border:none;border-top:1px solid var(--linea);margin:46px 0}

/* ---------- pasos numerados ---------- */
.paso{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--linea)}
.paso:last-child{border-bottom:none}
.paso .n{font-family:'Newsreader',Georgia,serif;font-size:var(--t-numeral);line-height:1;color:var(--tinta-3);flex-shrink:0;width:52px}
.paso .c{flex:1}
.paso h3{margin:0 0 10px}
/* Un paso que no cuelga de ninguna sección es de primer nivel y su encabezado
   tiene que ser h2. Se pinta igual que el h3: el nivel es semántica, no estilo. */
.paso h2{font-family:'JetBrains Mono',monospace;font-weight:400;
  font-size:var(--t-apunte);letter-spacing:2px;color:var(--tinta);margin:0 0 10px}
.paso p{margin-bottom:0}
@media(max-width:560px){.paso{gap:14px}.paso .n{width:34px;font-size:var(--t-numeral-estrecho)}}

/* ---------- etiquetas de procedencia ---------- */
.etq{
  display:inline-block;font-size:var(--t-etiqueta);letter-spacing:1.1px;padding:4px 7px;
  white-space:nowrap;vertical-align:middle;
}
/* Relleno sólido: lo observó la máquina */
.e-maq{background:var(--tinta);color:var(--inverso)}
/* Contorno: lo aporta un humano */
.e-hum{border:1px solid var(--tinta-2);color:var(--tinta)}
/* Discontinuo: lo dedujo el sistema */
.e-inf{border:1px dashed var(--tinta-2);color:var(--tinta-2)}

.tabla{width:100%;border-collapse:collapse;margin:22px 0}
.tabla th{
  font-size:var(--t-rotulo);letter-spacing:1.6px;color:var(--tinta-3);text-align:left;font-weight:400;
  padding:0 12px 12px 0;border-bottom:1px solid var(--linea-2);
}
.tabla td{
  font-size:var(--t-nota);color:var(--tinta-2);padding:15px 14px 15px 0;border-bottom:1px solid var(--linea);
  vertical-align:top;line-height:1.7;
}
.tabla td:first-child{white-space:nowrap;width:1%}
@media(max-width:640px){
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla thead{display:none}
  .tabla tr{border-bottom:1px solid var(--linea);padding:14px 0}
  .tabla td{border:none;padding:3px 0}
}

/* ---------- nota lateral, ámbar solo donde hay hallazgo ---------- */
.note{border-left:1px solid var(--ambar);padding:16px 0 16px 20px;margin:34px 0;max-width:60ch}
.note p{font-size:var(--t-nota);line-height:1.8;margin-bottom:14px}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ambar);font-weight:400}

.aviso{border-left:1px solid var(--borde);padding:16px 0 16px 20px;margin:34px 0;max-width:60ch}
.aviso p{font-size:var(--t-nota);line-height:1.8;margin-bottom:0}

/* ---------- llamada ----------
   Sin ámbar. MARCA.md: «El ámbar solo aparece donde hay un hallazgo. Nunca en
   botones. Nunca en enlaces.» Un botón ámbar cuesta la ventaja entera: el
   lector deja de poder asumir que donde hay ámbar hay algo que mirar. */
.cta{display:inline-flex;align-items:center;border:1px solid var(--tinta);text-decoration:none;margin-top:12px}
.cta span{padding:15px 24px;font-size:var(--t-detalle);letter-spacing:2.2px;color:var(--tinta);transition:.3s}
.cta i{width:42px;align-self:stretch;border-left:1px solid var(--tinta);display:flex;align-items:center;
       justify-content:center;color:var(--tinta);font-style:normal;font-size:var(--t-interfaz);transition:.3s}
.cta:hover span,.cta:hover i{background:var(--tinta);color:var(--fondo)}
.cta:focus-visible{outline:2px solid var(--tinta-2);outline-offset:3px}

.enlace{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--borde)}
.enlace:hover{border-bottom-color:var(--tinta-2)}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--linea);padding:34px 30px 60px;margin-top:70px}
footer .in{max-width:820px;margin:0 auto;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
footer a{font-size:var(--t-rotulo);letter-spacing:1.5px;color:var(--tinta-3);text-decoration:none;display:block;margin-bottom:9px}
footer a:hover{color:var(--tinta-2)}
footer .fine{font-size:var(--t-rotulo);letter-spacing:1.3px;color:var(--tinta-3);line-height:2;max-width:40ch}
@media(max-width:640px){footer{padding:28px 22px 50px}}

/* ---------- FIGURA CON PROCEDENCIA ----------------------------------
   Regla dura de MARCA.md: ninguna imagen se publica sin su etiqueta de
   procedencia. Ni una. Este componente lo hace obligatorio por diseño:
   el pie es parte de la figura, no un adorno que se pueda omitir.

   La etiqueta usa la misma codificación que el expediente — relleno
   sólido si lo observó la máquina, contorno si lo aporta un humano,
   discontinuo si es deducción — para que quien vea la web aprenda el
   sistema antes de leer un expediente.

   Uso:
     <figure class="fig">
       <img src="..." alt="...">
       <figcaption>
         <span class="etq e-hum">DECLARED</span>
         <span class="fig-t">Imagen generada con IA · Higgsfield · 4 ago 2026</span>
         <span class="fig-h">sha256 1a2b3c4d</span>
       </figcaption>
     </figure>
------------------------------------------------------------------- */
.fig{margin:34px 0;max-width:100%}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--linea)}
.fig figcaption{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:11px 0 0 0;border-top:1px solid var(--linea);margin-top:9px;
}
.fig-t{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--t-detalle);letter-spacing:.9px;color:var(--tinta-2);line-height:1.7;flex:1;min-width:180px;
}
.fig-h{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--t-rotulo);letter-spacing:.7px;color:var(--tinta-3);white-space:nowrap;
}
@media(max-width:560px){.fig figcaption{gap:7px}.fig-h{width:100%}}

/* Resalte que sigue al tema, para no fijar colores en el HTML. */
.destacado{color:var(--tinta);font-weight:400}
.tenue{color:var(--tinta-3)}