/* =========================================================================
   NOEMA · Sobre Noema  (D17)
   Va después de noema.css. No redeclara ni un color ni un tamaño de texto:
   todo sale de las fichas del sistema. Lo único que hay aquí son las
   disposiciones que esta página necesita y que ninguna otra usa.

   ORDEN DEL ARCHIVO
   01 · Estado de página actual en la barra
   02 · Titulares y cabecera
   03 · Qué es y qué no es
   04 · La investigación · portada oscura, riel y apartados
   05 · Por qué no bastaba con lo que ya existía
   06 · Cómo se hace este contenido
   07 · Declaración de uso de IA
   08 · Quién está detrás
   09 · Leer el proyecto completo
   10 · Puntos de corte
   ========================================================================= */


/* 01 · ESTADO DE PÁGINA ACTUAL EN LA BARRA ================================
   MOVIDO A `noema.css` EL 18-08-2026, junto al resto de estados del enlace.
   Vivía aquí, y por eso un estado declarado como del sistema solo funcionaba
   en esta página: las otras doce no cargan esta hoja. Allá acepta además
   `aria-current="true"`, que es el valor correcto cuando el enlace apunta a
   la sección y estás en una página hija. No volver a declararlo aquí. */


/* 02 · TITULARES Y CABECERA ============================================== */
/* Los titulares de sección van en Gambetta y en mayúsculas, como el
   display-xxl del sistema. El tracking se abre un poco: en caja alta, el
   ajuste negativo que sirve para minúsculas junta demasiado las letras. */
main .display-xl,
main .display-l {
  text-transform: uppercase;
  letter-spacing: .005em;
}

/* El héroe de esta página no explica la página: dice qué busca lograr el
   proyecto. Una frase centrada y nada más. El aire de arriba y de abajo es
   la mitad del recurso: con el titular pegado a la sección siguiente, la
   frase se lee como un encabezado y no como una declaración. */
.hero-sobre {
  padding-block: calc(var(--alto-nav) + var(--e9)) var(--e10);
  text-align: center;
}
/* El corte de las tres líneas lo fijan los <br> del HTML, no un ancho
   máximo: con los dos a la vez, la primera línea se partía en cuatro.
   En móvil el <br> sigue mandando y la línea larga envuelve sola. */
.hero-sobre h1 { margin-inline: auto; }

/* Las tres calcomanías. Van ladeadas y con tamaños distintos porque son
   objetos pegados sobre el papel, no una barra de íconos de aplicación:
   alineadas y del mismo tamaño se leen como una interfaz. */
.calcomanias {
  display: flex; justify-content: center; align-items: center;
  gap: var(--e5);
  margin-bottom: var(--e7);
}
.calco {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--tinta);
  color: var(--sobre-tinta);
}
.calco .ms { font-size: 26px; }
.calco:nth-child(1) { transform: rotate(-7deg); }
.calco:nth-child(2) { transform: rotate(4deg) translateY(-6px); width: 54px; height: 54px; border-radius: 16px; }
.calco:nth-child(2) .ms { font-size: 30px; }
.calco:nth-child(3) { transform: rotate(-3deg); }


/* 03 · QUÉ ES Y QUÉ NO ES ================================================= */
/* El bloque de «qué no es» va sobre papel liso y sin tarjeta: es una
   declaración, no una ficha de producto. La regla de arriba lo separa del
   par de motores sin meter otro rectángulo en la página. */
.no-es {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--e8);
  margin-top: var(--e10);
  border-top: 1px solid var(--regla);
  padding-top: var(--e8);
}
.no-es-rotulo { position: sticky; top: calc(var(--alto-nav) + var(--e6)); align-self: start; }

.lista-no li + li {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-sutil);
}
/* El combinador de hijo directo no es un adorno: sin él, el selector alcanza
   también al <span class="ms"> de la marca y le cambia la tipografía, con lo
   que el ícono sale escrito como palabra. */
.lista-no > li > span:last-child {
  font-family: var(--grot);
  font-size: 17px; line-height: 1.6;
  color: var(--texto-secundario);
}
.lista-no b { color: var(--texto-principal); font-weight: 600; }


/* 04 · LA INVESTIGACIÓN ==================================================
   Reescrito el 17-08-2026 (PZ-78) al pasar el bloque de resumen a versión
   larga. Se borraron cuatro reglas que quedaron sin uso: `.datos-regla`,
   `.conclusiones`, `.bocadillo-claro` y `.bloque-advertencia`. Servían a
   las versiones cortas del fenómeno, los datos, las conclusiones y el
   límite, que fueron reemplazadas por sus versiones largas. Dejarlas era
   dejar CSS muerto en un archivo que se lee para entender la página.

   El bloque va en dos piezas: la portada oscura (04.a) y el cuerpo con
   riel sobre papel (04.b). */

/* --- 04.a · La portada oscura ------------------------------------------ */
/* Lo que la franja oscura necesita y noema.css solo resuelve para .parrafo.
   Sin esto, la letra menuda y las palomas salen en color de papel sobre
   grafito y se pierden. */
.origen-largo .micro { color: var(--texto-inverso-suave); }
.origen-largo .marca-si { color: var(--verde-claro); }

/* El ancla vieja. No pinta nada: solo existe para que los enlaces que
   apuntaban a `#de-donde-viene` sigan cayendo donde caían. El margen de
   desplazamiento evita que la barra tape el arranque del bloque. */
.ancla-heredada { display: block; height: 0; scroll-margin-top: var(--alto-nav); }

/* Bloque dentro de la franja oscura. No es una .superficie: sobre grafito,
   una tarjeta blanca corta la franja en dos y se pierde el silencio. */
.bloque-oscuro {
  background: rgba(252, 250, 245, .06);
  border-radius: var(--r-l);
  padding: var(--e7);
}
.rotulo-oscuro {
  display: block;
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--azul-claro);
  margin-bottom: var(--e5);
}
/* Dentro del bloque verde el rótulo va en verde claro, no en azul: el azul
   es la paleta de la estructura y aquí el tema es la investigación. */
.origen-largo .rotulo-oscuro,
.investigacion-cuerpo .rotulo-oscuro { color: var(--verde-claro); }

/* --- LA PISTA HORIZONTAL ------------------------------------------------
   Estructura copiada de la referencia de Until Labs. La sección se queda
   fija mientras el desplazamiento vertical mueve el carro hacia la
   izquierda. Al terminar el tercer panel, la página sigue en vertical.

   EL ALTO DE LA SECCIÓN ES EL RECORRIDO. Tres paneles necesitan dos
   pantallas de desplazamiento para recorrerse (del panel 1 al 3), más una
   para que el primero se lea quieto. De ahí las 300vh: no es un número
   suelto, es paneles × alto de ventana.

   CON `prefers-reduced-motion` NO SE FIJA NI SE MUEVE. Los tres paneles se
   apilan y se leen en vertical. El pie de este sitio declara que no usa
   recursos que le quiten el control a quien lee, así que el movimiento
   tiene que poder apagarse. Está al final de este bloque. */
.recorrido {
  position: relative;
  height: 300vh;
  background: var(--fondo-pagina);
}
.recorrido-fijo {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
}
.recorrido-carro {
  display: flex;
  height: 100%;
  will-change: transform;
}

/* Cada panel ocupa la ventana entera. El aire de arriba deja pasar la
   barra, que sigue estando durante todo el recorrido. */
.panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
  padding: calc(var(--alto-nav) + var(--e8)) var(--margen) var(--e8);
}

/* El hilo. Un filete de un píxel que serpentea por los tres paneles, con
   terminales en T junto a cada bloque y un nodo en rombo donde cambia de
   dirección. El sistema de paletas ya lo tenía decidido: el vínculo entre
   piezas dejó de ser color y pasó a ser forma, «la línea en grafito». Esta
   es la primera pantalla que lo usa.

   El SVG va con `preserveAspectRatio: none` a propósito: así las
   coordenadas del viewBox se corresponden con porcentajes del panel y los
   terminales caen exactamente donde empieza cada texto, sea cual sea el
   alto de la ventana. La curva se estira, y en un filete de un píxel eso
   no se nota. */
.hilo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hilo-linea, .hilo-terminal {
  fill: none;
  stroke: var(--borde-fuerte);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hilo-nodo { fill: var(--grafito); }

/* El titular, partido en dos líneas y desplazado del margen. Va en caja
   alta y apilado con interlineado corto, que es lo que el sistema pide
   para un titular de portada. La referencia lo hace en caja baja con una
   grotesca pesada; aquí la tipografía es la nuestra y la disposición es
   la suya. */
.panel-titulo {
  position: absolute;
  left: 5%; top: 17%;
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(44px, 6.6vw, 100px);
  line-height: .9; letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--texto-principal);
}
.panel-titulo-der { left: 42%; }

.panel-antetitulo {
  position: absolute;
  left: 5%; top: 12%;
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--verde-profundo);
}

/* Los bloques cuelgan del hilo, cada uno junto a su terminal. Las
   posiciones no son decorativas: coinciden con las coordenadas del SVG. */
.panel-texto {
  position: absolute;
  top: 47%;
  width: 25%;
  margin: 0;
  font-family: var(--grot);
  font-size: 17px; line-height: 1.65;
  color: var(--texto-secundario);
}
.panel-texto-a { left: 23.5%; }
.panel-texto-b { left: 59.5%; }

.panel-columnas {
  position: absolute;
  left: 42%; top: 44%;
  width: 53%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--e8);
}
.panel-columnas p {
  margin: 0;
  font-family: var(--grot);
  font-size: 17px; line-height: 1.65;
  color: var(--texto-secundario);
}
.panel-columnas strong { font-weight: 600; color: var(--texto-principal); }

/* La referencia en superíndice, pegada a la afirmación y no al pie. En la
   referencia enlaza a su bibliografía; aquí apunta al apartado de fuentes
   de esta misma página, que está más abajo. */
.ref {
  font-family: var(--grot);
  font-size: 10px; font-weight: 600;
  color: var(--verde-profundo);
  vertical-align: super;
  margin-left: 1px;
}

/* El avance. Dice cuántas partes hay y en cuál vas. Es un índice, no una
   cuenta atrás: el mismo criterio que el riel de más abajo. */
.recorrido-avance {
  position: absolute; left: var(--margen); bottom: var(--e7);
  z-index: 2;
  display: flex; align-items: center; gap: var(--e4);
}
.recorrido-avance-riel {
  display: block; width: 132px; height: 2px;
  background: var(--borde-sutil);
}
.recorrido-avance-barra {
  display: block; height: 100%; width: 33%;
  background: var(--verde-pleno);
  transition: width .12s linear;
}
.recorrido-avance-texto {
  font-family: var(--grot);
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--texto-secundario);
}

/* --- EL GRÁFICO DEL TERCER PANEL ----------------------------------------
   Calcado del «Organ Viability Window» de la referencia: la etiqueta va
   DENTRO de la pastilla cuando cabe y fuera cuando no, el dato en gris a
   la derecha, el eje con marcas debajo, y una última fila que se sale de
   la escala y se desvanece.

   Allá la fila que se sale es CRYOPRESERVED, que convierte horas en tiempo
   indefinido. Aquí es lo que la incubación necesita. Es el mismo gesto: la
   fila que rompe la escala es la que carga el argumento. */
.panel-grafico { display: flex; align-items: center; }
.grafico {
  position: relative;
  margin: 0 0 0 20%;
  width: 74%;
}
.grafico-cabeza {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--e7);
}
.grafico-titulo {
  font-family: var(--grot); font-size: 17px; font-weight: 600;
  color: var(--texto-principal);
}
.grafico-glosa {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--texto-secundario);
}

.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.barra { display: flex; align-items: center; gap: var(--e4); }

.barra-pastilla {
  flex: 0 0 auto;
  width: var(--ancho, 25%);
  height: 34px;
  border-radius: var(--r-boton);
  background: var(--superficie-marcada);
  display: flex; align-items: center;
  padding: 0 var(--e5);
  overflow: hidden;
}
.barra-pastilla span {
  font-family: var(--grot);
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-principal);
  white-space: nowrap;
}
/* Cuando la barra es demasiado corta para contener su etiqueta, la
   etiqueta sale fuera. Es lo que hace la referencia con HEART y LUNG, y es
   lo que permite que una barra diminuta siga siendo legible. */
.barra-corta .barra-pastilla { padding: 0; }
.barra-fuera {
  font-family: var(--grot);
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-principal);
  white-space: nowrap;
}
.barra-dato {
  font-family: var(--grot);
  font-size: 13px;
  color: var(--texto-secundario);
  white-space: nowrap;
}

/* La fila que se sale. Se desvanece hacia la derecha en vez de terminar en
   un borde: un borde diría que ahí se acaba, y lo que dice es lo contrario. */
.barra-desbordada .barra-pastilla {
  background: linear-gradient(to right, var(--verde-claro) 55%, rgba(193, 229, 78, 0));
}
.barra-desbordada .barra-pastilla span { color: var(--grafito); }

.eje { position: relative; margin-top: var(--e5); }
.eje .eje-linea { display: block; height: 1px; background: var(--borde-fuerte); }
.eje-marcas, .eje-rotulos {
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.eje-marcas i { display: block; width: 1px; height: 7px; background: var(--borde-fuerte); }
.eje-marca-viva { background: var(--verde-pleno) !important; height: 11px !important; }
.eje-marca-fin { background: var(--borde-fuerte); }
.eje-rotulos { margin-top: var(--e2); }
.eje-rotulos span {
  font-family: var(--grot);
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--texto-secundario);
  white-space: nowrap;
}
.eje-rotulo-vivo { color: var(--verde-profundo) !important; }
.eje-rotulo-fin { font-size: 16px !important; }

.grafico-pie {
  margin: var(--e7) 0 0;
  font-family: var(--grot); font-size: 13px; line-height: 1.6;
  color: var(--texto-secundario);
  max-width: 70ch;
}
.grafico-pie strong { color: var(--texto-principal); font-weight: 600; }


/* --- SIN MOVIMIENTO -----------------------------------------------------
   Con `prefers-reduced-motion` la pista deja de ser pista: no se fija, no
   se mueve y los tres paneles se apilan. Todo el contenido posicionado en
   absoluto vuelve al flujo. Es la salida que el principio 4 del proyecto
   exige, y sin ella esta sección contradiría el pie de la propia página. */
@media (prefers-reduced-motion: reduce) {
  .recorrido { height: auto; }
  .recorrido-fijo { position: static; height: auto; overflow: visible; }
  .recorrido-carro { display: block; transform: none !important; }
  .panel { flex: none; width: auto; height: auto; padding-block: var(--e9); }
  .panel-titulo, .panel-antetitulo, .panel-texto, .panel-columnas {
    position: static; left: auto; top: auto; width: auto;
  }
  .panel-titulo { margin-bottom: var(--e6); }
  .panel-antetitulo { display: block; margin-bottom: var(--e4); }
  .panel-texto { max-width: 62ch; margin-top: var(--e5); }
  .panel-columnas { margin-top: var(--e6); }
  .grafico { margin-left: 0; width: auto; }
  .hilo, .recorrido-avance { display: none; }
}


/* --- LO QUE ERA EL DIAGRAMA EN FILA ------------------------------------
   Se conserva la hoja del diagrama anterior por si vuelve, pero HOY NO LO
   USA NINGUNA PANTALLA: el bloque 02.a pasó a ser la pista horizontal el
   18-08-2026 y su gráfico es `.barras`. Si en un mes sigue sin usarse, se
   borra.
   -------------------------------------------------------------------- */
/* --- EL DIAGRAMA DE LAS CUATRO FASES ------------------------------------
   Reescrito el 18-08-2026. Antes eran cuatro columnas de texto; ahora es
   el argumento dibujado.

   LA FORMA SALE DE LA REFERENCIA DE UNTIL LABS que eligió Dana, y se copia
   en cuatro cosas concretas: la fila de etiqueta, barra y dato; dos
   condiciones comparadas dentro de la misma pista; la marca vertical que
   cruza el gráfico; y que la fila importante sea la que rompe el patrón.
   No se copia su monoespaciada: el sistema tiene dos tipografías y las
   cifras se alinean con `tabular-nums`, no con una tercera fuente.

   POR QUÉ DOS BARRAS Y NO UNA. Una sola barra sería un dato. Dos son una
   comparación, y la comparación ES el argumento: lo que el modelo describe
   contra lo que queda. La incubación es la única fila donde la diferencia
   se ve de lejos, y eso es exactamente lo que hay que leer.

   NO ESTÁ A ESCALA, y su pie lo dice. Las proporciones son esquemáticas
   porque el estudio no midió minutos por fase. La única cifra real es la
   marca de los treinta minutos. */
.diagrama-fases { margin: var(--e9) 0 0; }

.diagrama-cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borde-inverso);
}
.diagrama-titulo {
  font-family: var(--grot); font-size: 15px; font-weight: 600;
  color: var(--texto-inverso);
}
.diagrama-clave { display: flex; gap: var(--e5); flex-wrap: wrap; }
.clave-item {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--grot); font-size: 12px;
  color: var(--texto-inverso-suave);
}
.clave-item i { width: 22px; height: 10px; border-radius: var(--r-boton); }
.muestra-declarado { border: 1px solid rgba(252, 250, 245, .34); }
.muestra-hoy { background: rgba(252, 250, 245, .5); }

.fases { list-style: none; margin: var(--e6) 0 0; padding: 0; }

.fase {
  display: grid;
  grid-template-columns: 30px 132px minmax(0, 1fr) 178px;
  gap: var(--e4);
  align-items: center;
  padding: var(--e4) 0;
}
.fase + .fase { border-top: 1px solid rgba(252, 250, 245, .10); }

.fase-num {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: var(--texto-inverso-suave);
}
.fase-nombre {
  font-family: var(--grot); font-size: 17px; font-weight: 600;
  color: var(--texto-inverso);
}

/* La pista ocupa el ancho entero de su columna. Dentro van las dos barras,
   las dos arrancando a la izquierda: así se lee cuánto de lo descrito
   sobrevive, en vez de dos barras sueltas que hay que comparar de memoria. */
.fase-pista { position: relative; height: 18px; }
.fase-pista::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--declarado, 50%);
  border: 1px solid rgba(252, 250, 245, .34);
  border-radius: var(--r-boton);
}
.fase-hoy {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--hoy, 25%);
  background: rgba(252, 250, 245, .5);
  border-radius: var(--r-boton);
}

/* La marca vertical de los treinta minutos cruza las cuatro filas. Se dibuja
   en cada pista y no como un elemento suelto por encima: así no hay que
   calcular posiciones absolutas contra una rejilla que cambia de ancho. */
.fase-pista::after {
  content: "";
  position: absolute; left: 34%; top: -14px; bottom: -14px;
  border-left: 1px dashed rgba(252, 250, 245, .28);
}

/* La fila marcada. Es la única que se enciende, y su barra de «hoy» es la
   que se ve vacía al lado de lo que el modelo describe. */
.fase-marcada .fase-nombre,
.fase-marcada .fase-num { color: var(--verde-claro); }
.fase-marcada .fase-pista::before { border-color: rgba(193, 229, 78, .45); }
.fase-marcada .fase-hoy { background: var(--verde-claro); }
.fase-marcada .fase-estado { color: var(--verde-claro); font-weight: 600; }

.fase-estado {
  font-family: var(--grot); font-size: 13px; line-height: 1.4;
  color: var(--texto-inverso-suave);
  text-align: right;
}

/* El eje. Una sola marca, y es la única cifra real del diagrama. */
.fases-eje {
  position: relative;
  margin-left: calc(30px + 132px + var(--e4) * 2);
  padding-top: var(--e3);
}
/* OJO: esta regla declaraba `.eje-linea`, que el gráfico nuevo del recorrido
   también usa, con un color pensado para franja oscura. Dos clases con el
   mismo nombre y dos sentidos distintos es exactamente el fallo que dejó la
   sección en blanco el 18-08 (`.pista` chocaba con el globo de los stickers
   en `noema.css`). Se le pone prefijo para que no pueda alcanzar a nada. */
.fases-eje .eje-linea { display: block; height: 1px; background: rgba(252, 250, 245, .28); }
.fases-eje .eje-marca {
  position: absolute; left: 34%; top: var(--e4);
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--verde-claro);
  white-space: nowrap;
}
.fases-eje .eje-marca i { width: 1px; height: 8px; background: var(--verde-claro); }

.diagrama-pie {
  margin: var(--e9) 0 0;
  font-family: var(--grot); font-size: 13px; line-height: 1.6;
  color: var(--texto-inverso-suave);
  max-width: 74ch;
}
.diagrama-pie strong { color: var(--texto-inverso); font-weight: 600; }

/* --- 04.b · El cuerpo, con riel ----------------------------------------
   Dos columnas: el índice a la izquierda y los apartados a la derecha.
   Estructura tomada de la plantilla de fundamentos, que a su vez la tomó
   de la referencia de Mistral. No se reinventa aquí.

   Sin `align-items: start`. Con start, la columna del riel se encoge al
   alto de su propio contenido y el sticky se queda sin recorrido: el
   índice no acompaña la lectura. */
.con-riel {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--e9);
}
.riel-pegado {
  position: sticky;
  top: calc(var(--tope-riel, 72px) + var(--e5));
}
.riel-rotulo {
  margin: 0 0 var(--e4);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--texto-secundario);
}

/* La caja con divisores entre ítems, igual que en fundamentos. Lo único
   que cambia es el color del activo: allá es azul porque la sección es
   Fundamentos, aquí es verde porque el bloque es la investigación. */
.indice-bloque {
  list-style: none; margin: 0; padding: 0;
  counter-reset: apartado;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--fondo-superficie);
}
.indice-bloque li { counter-increment: apartado; }
.indice-bloque li + li { border-top: 1px solid var(--borde-sutil); }
/* El aire de cada entrada se subió de e4 a e5 el 17-08-2026: Dana lo vio
   apretado. Con los rótulos cortos que da `data-indice`, casi todas las
   entradas caben en un renglón, y ahí el padding de e4 dejaba las filas
   pegadas unas a otras. El índice se escanea de un vistazo o no sirve. */
.indice-bloque a {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e5) var(--e4);
  text-decoration: none;
  font-family: var(--grot); font-size: 14px; line-height: 1.35;
  color: var(--texto-secundario);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.indice-bloque a::before {
  content: counter(apartado) ".";
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.indice-bloque a:hover { color: var(--texto-principal); background: var(--papel); }
.indice-bloque .flecha {
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
  color: var(--verde-profundo);
}
/* El activo se enmarca con una CAJA COMPLETA, no con un filete lateral.
   Un filete de 3 px a la izquierda compite con la retícula del papel y se
   lee como un subrayado suelto. */
.indice-bloque [aria-current="true"] {
  background: var(--fondo-superficie);
  color: var(--texto-principal);
  font-weight: 600;
  border: 1.5px solid var(--verde-pleno);
  border-radius: var(--r-s);
  /* Compensa el borde para que la fila activa no empuje a las de al lado */
  margin: -1.5px;
  padding: calc(var(--e5) - 1.5px) calc(var(--e4) - 1.5px);
}
.indice-bloque [aria-current="true"] .flecha { opacity: 1; }
.indice-bloque [aria-current="true"]::before { color: var(--verde-profundo); }

/* La columna de los apartados. NO lleva medida de lectura en el contenedor:
   dentro hay rejillas de tres tarjetas que necesitan el ancho entero. La
   medida se le pone al párrafo, que es lo que de verdad se lee en renglón
   largo. */
.cuerpo-inv > .parrafo { max-width: 68ch; }
.cuerpo-inv > h2 {
  margin-top: var(--e10);
  padding-top: var(--e6);
  border-top: 1px solid var(--regla);
  scroll-margin-top: calc(var(--tope-riel, 72px) + var(--e6));
}
.cuerpo-inv > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cuerpo-inv > .parrafo + .superficie,
.cuerpo-inv > .superficie + .superficie,
.cuerpo-inv > .parrafo + .bocadillo,
.cuerpo-inv > .superficie + .parrafo,
.cuerpo-inv > .parrafo + .limite,
.cuerpo-inv > .parrafo + .conclusiones-largas,
.cuerpo-inv > .nota-pendiente + .bocadillo { margin-top: var(--e7); }
.cuerpo-inv > .superficie + .nota-pendiente { margin-top: var(--e6); }

/* El bloque en grafito dentro de la columna de papel. Es el heredero de la
   franja oscura: donde el argumento necesita silencio, la tarjeta se
   invierte en vez de partir la página con una banda a sangre. */
.bloque-consecuencia { padding: var(--e7); margin-top: var(--e6); }

/* `.bloque-hallazgos` y `.lista-hallazgos` se borraron el 18-08-2026 junto
   con el apartado «Los hallazgos», que pasó al recorrido horizontal. Se
   borran en vez de dejarlas por si acaso: una hoja llena de clases que no
   usa nadie es exactamente donde nacen las colisiones de nombres, y esta
   página ya perdió una sesión entera por una de esas. */

/* LO QUE NO ESTÁ ESCRITO NO SE ESCONDE. Es el mismo componente conceptual
   que la cola editorial de la plantilla de fundamentos: en vez de una
   página vacía o un «próximamente», se dice en qué punto está la cosa.
   Va en papel con borde punteado, para que se lea como estado y no como
   contenido terminado. */
.nota-pendiente {
  border: 1.5px dashed var(--borde-fuerte, var(--borde-sutil));
  border-radius: var(--r-m);
  padding: var(--e6);
  max-width: 74ch;
}

/* Las cinco conclusiones en versión larga. Cada una es un apartado con su
   título y dos párrafos, qué se vio y qué se hizo. La numeración va
   posicionada y no en columna de rejilla: en rejilla cada hijo cae en su
   celda y el bloque se parte. */
.conclusiones-largas {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: conclusion;
}
.conclusiones-largas > li {
  counter-increment: conclusion;
  position: relative;
  padding-left: 56px;
  max-width: 74ch;
}
.conclusiones-largas > li + li {
  margin-top: var(--e7);
  padding-top: var(--e7);
  border-top: 1px solid var(--borde-sutil);
}
.conclusiones-largas > li::before {
  content: counter(conclusion, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--grot);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--verde-pleno);
  font-variant-numeric: tabular-nums;
}
.conclusiones-largas > li + li::before { top: calc(var(--e7) + 2px); }
.conclusiones-largas .parrafo { margin-top: var(--e4); }
.conclusiones-largas .parrafo b {
  font-weight: 600;
  color: var(--verde-profundo);
}

/* Qué mide y qué queda fuera cada instrumento. Lista de definición y no
   tabla: en móvil una tabla de tres columnas se vuelve ilegible, y aquí lo
   que importa es el par de líneas, no comparar celda con celda. */
.limite { margin: 0; display: grid; gap: var(--e6); max-width: 74ch; }
.limite > div { padding-top: var(--e5); border-top: 1px solid var(--borde-sutil); }
.limite dt {
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin-bottom: var(--e3);
}
.limite dd {
  margin: 0;
  font-family: var(--grot);
  font-size: 16px; line-height: 1.6;
  color: var(--texto-secundario);
}
.limite dd + dd { margin-top: var(--e2); }
.limite dd b { font-weight: 600; color: var(--texto-principal); }

/* Las seis fuentes. La referencia va al pie de cada tarjeta y separada por
   una regla: es el dato citable, y tiene que poder copiarse de un vistazo
   sin leer la glosa. */
.fuentes { margin-top: var(--e6); }
.fuentes .ref {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-sutil);
  color: var(--texto-secundario);
}


/* 05 · POR QUÉ NO BASTABA CON LO QUE YA EXISTÍA ==========================
   Tres tarjetas, y cada una lleva las dos caras: qué resuelve y qué deja
   abierto. Las dos con el mismo tamaño de letra. Encoger la primera sería
   armar un espantapájaros, y la comparación dejaría de ser honesta. */
.comparacion .superficie { display: flex; flex-direction: column; }
.comp-fila { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--borde-sutil); }
.comp-rotulo {
  display: block;
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
}
.comp-si { color: var(--verde-profundo); }
.comp-no { color: var(--carmin-profundo); }


/* 06 · CÓMO SE HACE ESTE CONTENIDO ======================================= */
/* Las tres capas en versión larga. En el inicio son tres tarjetas lado a
   lado, porque ahí se resumen; aquí se apilan, porque son una secuencia y
   el orden importa: ninguna capa se salta. */
.capas-largas { list-style: none; margin: var(--e8) 0 0; padding: 0; }
.capa-larga {
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  border-left: 5px solid var(--tono);
  padding: var(--e7);
}
.capa-larga + .capa-larga { margin-top: var(--medianil); }

.capa-cabeza {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
  margin-bottom: var(--e5);
}
.num-capa {
  font-family: var(--grot);
  font-size: 40px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--tono);
  font-variant-numeric: tabular-nums;
}
.capa-larga .sello {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--tono-texto);
  margin-bottom: var(--e3);
}
.capa-larga .sello i { width: 14px; height: 14px; border-radius: 50%; background: var(--tono); }
.capa-larga > .parrafo { max-width: 74ch; }

/* La ficha de cada capa contesta lo que una página de transparencia tiene
   que contestar y casi ninguna contesta: quién, cada cuánto, qué sale. */
.ficha-capa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5);
  margin: var(--e6) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-sutil);
}
.ficha-capa dt {
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}
.ficha-capa dd {
  margin: 0;
  font-family: var(--grot);
  font-size: 15px; font-weight: 500;
  color: var(--texto-principal);
}

/* La franja negra del compromiso. El titular llena la caja: con un ancho
   máximo por dentro quedaba un hueco a la derecha del último renglón y la
   barra se leía a medio terminar. */
.barra-declaracion { padding: var(--e7); }
.barra-declaracion .titular-m { max-width: none; }

.en-cada-pieza { margin-top: var(--e10); }


/* 07 · DECLARACIÓN DE USO DE IA ==========================================
   Desde el 17-08-2026 la sección tiene DOS partes: en la investigación y
   en la plataforma. Se evaluó darle página propia a la investigación y se
   descartó justamente por esto: separadas, las dos declaraciones perdían
   la mitad de su fuerza, y juntas son la sección que responde por
   adelantado la conclusión 4 de la tesis. */

/* El rótulo de cada mitad. No es un antetítulo: los antetítulos numeran
   secciones de la página y estas dos son partes de una sola. Va con
   filete inferior para que se lea como divisor y no como titular nuevo. */
.parte-decl {
  font-family: var(--grot);
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purpura-profundo);
  margin: var(--e8) 0 var(--e5);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borde-sutil);
}
.parte-decl:first-of-type { margin-top: 0; }

/* La mitad de la investigación. Mismo filete superior que la caja de «dónde
   sí entra» de la plataforma, para que las dos mitades se lean como una
   sola declaración y no como dos secciones sueltas. */
/* EL FILETE DE 5 PX EN EL CANTO SUPERIOR SE QUITÓ EL 24-08-2026, por
   decisión de Dana: «que solo se vea en la parte de arriba queda un poco
   extraño». Tenía razón, y el motivo es que no marcaba nada nuevo. Las dos
   cajas de abajo ya llevan su punto de color dentro del sello, así que el
   filete repetía el mismo dato en otro sitio y en otra forma; y una banda
   de color que toca un solo canto de una tarjeta se lee como el borde de
   algo que se quedó a medio pintar.

   El color sigue en la sección, en el recurso que el sistema ya usa en
   todas partes: el punto junto al rótulo (barra de navegación, sellos de
   las capas, y ahora las mallas). */
.decl-investigacion { padding-top: var(--e6); }
.decl-investigacion > .titular-s { max-width: 46ch; }

.lista-decl-invest { margin-top: var(--e7); }
.lista-decl-invest li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}
.lista-decl-invest li + li {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-sutil);
}
.lista-decl-invest .marca-si { color: var(--purpura-profundo); }
.lista-decl-invest b {
  display: block;
  font-family: var(--grot);
  font-size: 17px; font-weight: 600;
  color: var(--texto-principal);
}
/* Hijo directo, o el selector alcanza al span del ícono y lo escribe como
   palabra. Es la misma trampa que ya documentan `.lista-no` y `.lista-datos`. */
.lista-decl-invest > li > div > span {
  display: block;
  font-family: var(--grot);
  font-size: 15px; line-height: 1.6;
  color: var(--texto-secundario);
  margin-top: var(--e2);
}

/* Sin filete superior, misma razón que arriba. El punto del sello es el que
   distingue la caja del sí de la del no, y basta con él. */
.declaracion .superficie { padding-top: var(--e6); }

.sello-decl {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: var(--e5);
}
.sello-decl i { width: 14px; height: 14px; border-radius: 50%; }

.nota-declaracion {
  margin-top: var(--medianil);
  border-left: 4px solid var(--purpura-pleno);
  padding: var(--e2) 0 var(--e2) var(--e6);
  max-width: var(--lectura);
}


/* 08 · QUIÉN ESTÁ DETRÁS ================================================= */
.disposicion-quien {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: var(--medianil);
  align-items: start;
}

.ficha-estado { margin: 0; display: grid; gap: var(--e5); }
.ficha-estado > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: baseline;
}
.ficha-estado > div + div { padding-top: var(--e5); border-top: 1px solid var(--borde-sutil); }
.ficha-estado dt {
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.ficha-estado dd {
  margin: 0; text-align: right;
  font-family: var(--grot);
  font-size: 15px; font-weight: 500;
  color: var(--texto-principal);
}

/* La lista verificable. Dos columnas y sin tarjetas: es una declaración
   que se lee de corrido, no seis piezas que comparar. */
.patrones {
  margin-top: var(--e10);
  border-top: 1px solid var(--regla);
  padding-top: var(--e8);
}
.lista-patrones {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6) var(--e8);
}
.lista-patrones li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--e3); }
.lista-patrones > li > div > b {
  display: block;
  font-family: var(--grot);
  font-size: 17px; font-weight: 600;
  color: var(--texto-principal);
}
/* Igual que en .lista-no: hijo directo, o el selector se come el ícono. */
.lista-patrones > li > div > span {
  display: block;
  font-family: var(--grot);
  font-size: 15px; line-height: 1.55;
  color: var(--texto-secundario);
  margin-top: 2px;
}


/* 09 · LEER EL PROYECTO COMPLETO =========================================
   La ficha del documento. Tres zonas: el ícono, los datos y el estado.
   NO LLEVA ENLACE todavía, y por eso el estado ocupa el lugar donde iría
   el botón: el hueco tiene que verse declarado y no vacío. */
.descarga {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 260px);
  gap: var(--e7);
  align-items: start;
}
.descarga-icono {
  font-size: 44px;
  color: var(--verde-pleno);
  line-height: 1;
}
.descarga-cuerpo .titular-s { max-width: 46ch; }
.descarga-estado {
  padding-left: var(--e7);
  border-left: 1px solid var(--borde-sutil);
}
.sello-estado {
  display: inline-block;
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grafito);
  background: var(--ambar-claro);
  border-radius: var(--r-s);
  padding: 6px var(--e4);
  margin-bottom: var(--e4);
}


/* 09.b · LA MALLA ========================================================
   Calcada de teak.io (referencia que trajo Dana el 24-08-2026).

   Lo que se copia de la referencia no es «tarjetas»: es que las celdas
   NO flotan. Comparten filete, se tocan, y forman un bloque único con una
   sola esquina redondeada por fuera. Ahí está la diferencia de sensación
   entre esa página y la nuestra: nosotros veníamos apilando cajas sueltas
   con hueco entre ellas y cada caja pedía su propio marco, su propio
   fondo y su propia sombra. Tres cajas sueltas pesan más que seis celdas
   pegadas, aunque digan lo mismo.

   Y una sola celda va rellena de color. UNA. En la referencia el rosa
   aparece en una celda por retícula y el resto queda en crema: el color
   señala, no decora. En cuanto se rellenan dos, deja de señalar nada.

   CÓMO SE HACE EL FILETE. Con `gap: 1px` y el fondo del contenedor
   asomando por el hueco, no con `border` en cada celda. Con bordes se
   duplican en el medio (2px donde se tocan dos celdas) y se solapan con
   el del contenedor en el canto. Con el hueco siempre es 1px exacto,
   en todas las uniones y con cualquier número de columnas. */

.malla {
  display: grid;
  gap: 1px;                          /* el filete: es el fondo asomando */
  background: var(--borde-sutil);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-l);
  overflow: hidden;                  /* recorta las celdas a la esquina */
  margin-top: var(--e7);
}

.malla-2 { grid-template-columns: 1fr 1fr; }
.malla-3 { grid-template-columns: repeat(3, 1fr); }

/* `.malla-rotulada` (rótulos en columna a la izquierda) se quitó el
   24-08-2026: la usaba el bloque de las tres categorías y ese bloque pasó a
   la tabla traspuesta. Una columna entera de etiquetas ocupa ancho sin
   llevar contenido, y por eso no vuelve como variante disponible. */

/* LA TABLA DE COMPARACIÓN. La usan los dos bloques que comparan cosas: las
   tres categorías que ya existen y las cinco conclusiones. Es el mismo
   objeto, así que es la misma clase; tenerlas iguales es parte de que la
   página se lea como una sola cosa.

   Primera columna para el sujeto (la categoría, o el enunciado de la
   conclusión), y las dos de la derecha del mismo ancho porque llevan el
   mismo tipo de texto. Iguales se comparan; desiguales, una parecería más
   importante que la otra sin que nadie lo haya decidido. */
.malla-tabla {
  grid-template-columns: minmax(200px, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr);
}
.malla-tabla .celda { gap: var(--e4); }

/* Las tres capas del modelo editorial. Columnas desiguales a propósito:
   la del medio lleva el texto corrido y necesita ancho de lectura, las de
   los lados llevan etiquetas cortas y no lo necesitan. */
.malla-capas {
  grid-template-columns: minmax(148px, .65fr) minmax(0, 1.7fr) minmax(150px, .85fr);
}

.celda {
  background: var(--fondo-superficie);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  /* Centrado vertical, pedido por Dana el 24-08-2026. Con el texto pegado
     arriba, en una fila donde una celda es mucho más alta que las otras
     (pasa siempre: los textos no miden lo mismo) las cortas dejaban un
     vacío abajo y la fila se leía descuadrada. Centradas, el vacío se
     reparte y las tres se leen como una sola línea de lectura. */
  justify-content: center;
  gap: var(--e3);
  min-width: 0;                      /* que el texto largo no ensanche */
}

.celda-ancha { grid-column: 1 / -1; }

/* La celda rellena. El color entra por variable para que cada sección
   ponga el suyo sin necesitar una clase por paleta.
   Va con doble clase a propósito: `.celda-eje` de más abajo también pinta
   fondo, y una celda puede ser las dos cosas (el eje de la fila que importa,
   marcado en color). Con una sola clase ganaría la que va después en el
   archivo y el color no aparecería. */
.celda.celda-tinta { background: var(--tinta, var(--verde-claro)); }

/* TODO EL TEXTO SOBRE UNA CELDA EN COLOR VA EN GRAFITO. Dana reportó que la
   primera celda verde costaba leerse, y medido en el navegador el fallo
   estaba en un sitio muy concreto: el rótulo de 11 px iba en gris medio y
   daba 3,34:1 sobre el verde claro, cuando el mínimo es 4,5. El cuerpo sí
   pasaba (5,55:1). Es decir, el texto más pequeño de la celda era el peor
   contrastado, que es exactamente al revés de como tiene que ser.

   Es la misma trampa que el sistema de paletas ya tiene documentada, dicha
   de otra forma: los grises intermedios están calculados contra papel y
   contra blanco, no contra un escalón Claro. Sobre un Claro solo se
   sostienen el grafito y el Profundo de esa misma paleta. En grafito el
   rótulo pasa de 3,34:1 a 10,51:1.

   Va como regla del componente y no como arreglo de una celda: la malla
   admite las cinco paletas, y este error se repetiría en cada una. */
.celda-tinta .malla-rotulo,
.celda-tinta .parrafo,
.celda-tinta .parrafo-m,
.celda-tinta .parrafo-s { color: var(--grafito); }

/* El gris tenue va OPACO. `--superficie-tenue` es un negro al 4 % de alfa,
   pensado para posarse sobre un fondo liso; sobre el papel reticulado de
   las secciones con retícula dejaba ver la cuadrícula por debajo y la
   columna parecía un fallo de dibujo. Superponerlo sobre el blanco de la
   celda da exactamente el mismo tono, ya sin transparencia. */
.celda.celda-tenue,
.celda-eje {
  background:
    linear-gradient(var(--superficie-tenue), var(--superficie-tenue)),
    var(--fondo-superficie);
}

/* La celda de rótulo de fila: no es contenido, es el eje de lectura.
   Va tenue y con el texto arriba, alineado con la primera línea de las
   celdas de al lado. */
.celda-eje { justify-content: flex-start; }

.malla-rotulo {
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grafito-medio);
}

/* El punto de color junto al rótulo. Es el mismo recurso que ya usan la
   barra de navegación y los sellos de las capas, y sustituye al filete
   de color en el canto superior de las tarjetas, que se leía como un
   resto de algo en vez de como una marca. */
.punto-color {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tinta, var(--verde-pleno));
  margin-right: 7px;
  vertical-align: baseline;
  flex: none;
}

.malla-rotulo .punto-color { vertical-align: -1px; }

/* La cifra grande dentro de una celda. Más chica que la de las tarjetas
   que sustituye: dentro de una malla ya no tiene que competir con nada,
   la celda la aísla sola. */
.cifra-celda {
  font-family: var(--serif);
  font-size: 30px; line-height: 1;
  color: var(--grafito);
}

/* La ficha de tres datos, dentro de una celda estrecha. Fuera de la malla
   va en tres columnas; aquí no cabe, así que se apila. Es la misma lista,
   no una lista distinta: solo cambia el eje. */
.celda .ficha-capa {
  display: grid;
  /* Las columnas HAY QUE declararlas. La regla de fuera pone
     `repeat(3, 1fr)`, y con solo cambiar `display` y `gap` seguía ganando:
     los tres datos salían en tres columnas de 60 px dentro de una celda
     estrecha, con «CADA CUÁNTO» partido en dos renglones. */
  grid-template-columns: 1fr;
  gap: var(--e4);
  margin: 0;
  /* Y sin el filete de arriba: ahí fuera separaba la ficha del párrafo de
     su misma tarjeta, pero aquí la ficha ya vive en su propia celda y la
     línea quedaba suelta debajo del borde de la malla. */
  padding-top: 0;
  border-top: 0;
}
.celda .ficha-capa > div { display: grid; gap: 3px; }
.celda .ficha-capa dt {
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--grafito-medio);
}
.celda .ficha-capa dd {
  margin: 0;
  font-family: var(--grot);
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--grafito);
}

/* El pie de la malla: una franja al fondo, dentro del mismo bloque.
   Es donde va lo que antes era una banda negra aparte y suelta. */
.malla-pie {
  grid-column: 1 / -1;
  background: var(--fondo-inverso);
  color: var(--papel);
  padding: var(--e5) var(--e6);
  display: flex;
  align-items: baseline;
  gap: var(--e4);
  flex-wrap: wrap;
}
.malla-pie .malla-rotulo { color: var(--verde-claro); }
.malla-pie p { color: rgba(252, 250, 245, .82); margin: 0; }


/* 10 · PUNTOS DE CORTE =================================================== */

/* Portátil · 1200
   Por debajo de este ancho el riel deja la columna de apartados en unos
   46 caracteres por línea, que es donde el renglón se pierde. El índice
   pasa arriba, en horizontal y sin pegarse. Es el mismo corte y el mismo
   tratamiento que usa la plantilla de fundamentos. */
@media (max-width: 1119px) {
  .con-riel { grid-template-columns: 1fr; gap: var(--e7); }
  .riel-pegado { position: static; }
  .indice-bloque { display: flex; flex-wrap: wrap; border-radius: var(--r-m); }
  .indice-bloque li { flex: 1 1 200px; }
  .indice-bloque li + li { border-top: 0; border-left: 1px solid var(--borde-sutil); }
  .indice-bloque .flecha { display: none; }
  .indice-bloque [aria-current="true"] { box-shadow: inset 0 2px 0 var(--verde-pleno); }
}

/* Tableta · 834 */
@media (max-width: 1023px) {
  .hero-sobre { padding-block: calc(var(--alto-nav) + var(--e8)) var(--e9); }

  .no-es { grid-template-columns: 1fr; gap: var(--e7); margin-top: var(--e9); }
  .no-es-rotulo { position: static; }

  /* LA MALLA EN TABLETA. Tres columnas en 834 dejan cada celda en unos 22
     caracteres por línea, que ya no es una columna de texto. La rotulada
     se rompe: el rótulo de fila pasa a ser una banda de ancho completo y
     las tres categorías caen debajo, en una sola columna. Se pierde la
     lectura en cruz, pero en este ancho la lectura en cruz ya no cabía. */
  .malla-3 { grid-template-columns: 1fr; }

  /* La trazabilidad pierde la lectura en cruz y pasa a dos columnas: el
     enunciado arriba, a lo ancho, y debajo lo que se vio y lo que se hizo,
     que es el par que hay que poder comparar de un vistazo. La fila de
     rótulos se esconde porque ya no encabeza nada: cada celda recupera su
     propia etiqueta con `data-rotulo`. */
  .malla-tabla { grid-template-columns: 1fr 1fr; }
  .malla-tabla .fila-rotulos { display: none; }
  .malla-tabla .celda-enunciado { grid-column: 1 / -1; }
  .malla-tabla .celda[data-rotulo]::before {
    content: attr(data-rotulo);
    font-family: var(--grot);
    font-size: 11px; font-weight: 600; letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--grafito-medio);
  }
  /* En tableta la cabecera de cada capa (número y nombre) pasa a ser una
     banda de ancho completo y debajo quedan el texto y la ficha. El
     `nth-child(3n+1)` coge las tres cabeceras y solo esas: el pie de la
     malla no lleva clase `.celda`, así que queda fuera. */
  .malla-capas { grid-template-columns: minmax(0, 1fr) minmax(140px, .7fr); }
  .malla-capas .celda:nth-child(3n + 1) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: var(--e4);
  }
  .celda { padding: var(--e5); }

  /* El diagrama de fases estrecha las dos columnas de texto y deja la pista
     con todo lo que sobra: la barra es lo que hay que poder comparar, y es
     lo primero que se pierde al encoger. */
  .fase { grid-template-columns: 26px 104px minmax(0, 1fr) 132px; gap: var(--e3); }
  .fase-nombre { font-size: 15px; }
  .fase-estado { font-size: 12px; }
  .fases-eje { margin-left: calc(26px + 104px + var(--e3) * 2); }

  .descarga { grid-template-columns: 44px minmax(0, 1fr); }
  .descarga-estado {
    grid-column: 1 / -1;
    padding-left: 0; padding-top: var(--e5);
    border-left: 0; border-top: 1px solid var(--borde-sutil);
  }

  .disposicion-quien { grid-template-columns: 1fr; }
  .lista-patrones { grid-template-columns: 1fr; gap: var(--e5); }
  .ficha-capa { grid-template-columns: 1fr; gap: var(--e4); }
  .ficha-capa > div + div { padding-top: var(--e4); border-top: 1px solid var(--borde-sutil); }
}

/* 11 · IMPRESIÓN ==========================================================
   Puesta el 17-08-2026. Seis páginas del sitio ya tenían hoja de impresión
   y esta no, siendo la que más probablemente se imprima: es la que un
   miembro de la terna lee para comprobar de dónde salió cada decisión.

   El riel desaparece. En pantalla dice dónde vas; en papel, un índice de
   anclas que no se pueden tocar es ruido, y la columna de 248 px le roba
   un tercio del ancho al texto. */
@media print {
  @page { margin: 18mm 16mm; }
  .nav, .hoja-menu, .salto, .pie, .riel, .hero-acciones { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  body { background: none !important; font-size: 11pt; }

  /* Las franjas oscuras a sangre gastan un cartucho entero y dejan el texto
     en gris sobre gris en casi cualquier impresora. En papel se invierten:
     fondo blanco, texto negro y un filete que conserva la separación. */
  .inverso, .superficie.inverso, .bloque-oscuro {
    background: none !important;
    color: #000 !important;
    border: 1px solid #ccc;
  }
  .inverso .parrafo, .inverso .micro, .rotulo-oscuro,
  .fase-nombre, .fase-num, .fase-estado,
  .diagrama-titulo, .clave-item, .diagrama-pie { color: #000 !important; }

  /* La malla en papel. El filete de 1px hecho con `gap` sobre el fondo del
     contenedor no imprime: la mayoría de navegadores no manda fondos a la
     impresora. Se rehace con bordes reales, que sí salen, y las celdas de
     color se vacían para no dejar bloques grises encima del texto. */
  .malla { background: none !important; gap: 0; }
  .celda {
    background: none !important;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .malla-2 .celda:nth-child(2n), .malla-3 .celda:nth-child(3n),
  .celda-ancha, .malla-pie { border-right: 0; }
  .malla-pie {
    background: none !important;
    color: #000 !important;
    border-top: 1px solid #000; border-bottom: 0;
  }
  .malla-pie p, .malla-pie .malla-rotulo { color: #000 !important; }
  .punto-color { background: #000 !important; }

  /* El diagrama de fases en papel. Las dos barras están hechas de papel
     rebajado sobre grafito, así que al invertir la franja desaparecerían
     sobre blanco. En impresión se redibujan en negro: la de «hoy» rellena
     y la del modelo con contorno, que es la misma lectura sin depender del
     color de fondo. */
  .fase-pista::before { border-color: #999 !important; }
  .fase-hoy { background: #333 !important; }
  .fase-marcada .fase-hoy { background: #000 !important; }
  .fase-marcada .fase-pista::before { border-color: #000 !important; }
  .fase-pista::after { border-left-color: #999 !important; }
  .muestra-declarado { border-color: #999 !important; }
  .muestra-hoy { background: #333 !important; }
  .eje-linea { background: #999 !important; }
  .eje-marca, .eje-marca i { color: #000 !important; background: #000; }
  .eje-marca { background: none; }
  .diagrama-fases, .fase { break-inside: avoid; }

  .con-riel { display: block; }
  .contenido { max-width: none; padding-inline: 0; }
  .cuerpo-inv > .parrafo, .conclusiones-largas > li, .limite { max-width: none; }

  /* Nada de lo que se lee junto se parte entre dos hojas. */
  .cuerpo-inv > h2, .conclusiones-largas > li, .capa-larga,
  .nota-pendiente, .descarga, .limite > div, .comparacion .superficie { break-inside: avoid; }
  .cuerpo-inv > h2 { break-after: avoid; }

  /* La dirección de cada enlace, al lado de su texto: en papel un enlace
     sin destino es una palabra subrayada y nada más. */
  .contenido a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* Móvil · 390 */
@media (max-width: 767px) {
  .bloque-oscuro { padding: var(--e6) var(--e5); }

  /* LA MALLA EN MÓVIL. Todo a una columna y el aire baja a --e5. El
     filete compartido se mantiene: apilado sigue siendo un solo bloque,
     que es justo lo que lo diferencia de una pila de tarjetas. */
  .malla-2 { grid-template-columns: 1fr; }
  .malla-capas { grid-template-columns: 1fr; }
  .malla-tabla { grid-template-columns: 1fr; }
  .malla { border-radius: var(--r-m); }
  .celda { padding: var(--e5); }
  .malla-pie { padding: var(--e5); flex-direction: column; gap: var(--e2); }
  .cifra-celda { font-size: 26px; }

  .capa-larga { padding: var(--e6) var(--e5); }
  .capa-cabeza { grid-template-columns: 1fr; gap: var(--e3); }
  .num-capa { font-size: 30px; }

  /* A 390 px la fila de cuatro columnas no cabe. El número y el nombre se
     quedan arriba, la pista pasa a lo ancho y el estado va debajo de ella.
     La barra conserva el ancho entero, que es lo único que no se puede
     encoger sin que el diagrama deje de decir nada. */
  .fase {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--e2) var(--e3);
    padding: var(--e5) 0;
  }
  .fase-pista { grid-column: 1 / -1; margin-top: var(--e2); }
  .fase-estado { grid-column: 1 / -1; text-align: left; }
  /* La marca vertical se va en móvil: con la pista a todo el ancho y el
     texto debajo, la línea punteada cruza palabras y se lee como un error. */
  .fase-pista::after { display: none; }
  .fases-eje { margin-left: 0; }
  .eje-marca { position: static; transform: none; flex-direction: row; margin-top: var(--e3); }
  .eje-marca i { width: 8px; height: 1px; }
  .diagrama-cabeza { flex-direction: column; gap: var(--e3); }

  .bloque-consecuencia { padding: var(--e6) var(--e5); }
  .nota-pendiente { padding: var(--e5); }

  .conclusiones-largas > li { padding-left: 40px; }
  .conclusiones-largas > li::before { font-size: 18px; }

  .cuerpo-inv > h2 { margin-top: var(--e8); padding-top: var(--e5); }

  .descarga { grid-template-columns: 1fr; gap: var(--e5); }
  .descarga-icono { font-size: 36px; }

  .ficha-estado > div { grid-template-columns: 1fr; gap: 2px; }
  .ficha-estado dd { text-align: left; }

  .nota-declaracion { padding-left: var(--e5); }
  .parte-decl { margin-top: var(--e7); }
}