/* Paylucent v2 — blocks.css
 *
 * Los componentes de la home y el armazón que comparten las seis páginas (cabecera, botón,
 * anillo de foco, pie). `prose.css` (THE-83) se apoya en este archivo y no repite nada de él.
 *
 * **Cero hexes**: todo color sale de tokens.css, que es copia del archivo autoritativo del
 * director creativo (`design/paylucent-v2/tokens.css`, THE-85). Las @font-face también viven
 * allí, con las dos familias autoalojadas.
 *   grep -cE '#[0-9A-Fa-f]{3,8}' blocks.css  → 0
 *
 * Mundo visual (DESIGN.md §§1-7): editorial sobre blanco real, Newsreader de display contra
 * Instrument Sans de texto, filetes de 1 px, UNA tinta de acento y los números como
 * tipografía, siempre tabulares. Un solo radio grande en la página: el panel del hero.
 *
 * Dos dibujos por figura: `.pl-*-wide` manda por encima de 900 px, `.pl-*-tall` por debajo.
 * Los conmuta una @media, nunca JS.
 */

/* ---------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-000);
  color: var(--ink-900);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--signal-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.pl-sr, .pl-skip {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pl-skip:focus {
  position: static;
  width: auto; height: auto;
  clip-path: none;
  display: inline-block;
  margin: var(--space-2) var(--gutter);
  padding: var(--space-2) var(--space-4);
  background: var(--paper-000);
  border: var(--border-hair) solid var(--ink-900);
  border-radius: var(--radius-2);
}

/* -------------------------------------------------------------------------------- header */
.pl-head { border-bottom: var(--border-hair) solid var(--rule-200); }
.pl-head-in {
  max-width: var(--width-wide);
  margin: 0 auto;
  height: 72px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.pl-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: var(--tr-h3);
  color: var(--ink-900);
  text-decoration: none;
}
.pl-nav { display: flex; align-items: center; gap: var(--space-6); font-size: var(--step-caption); }
.pl-nav a { color: var(--ink-600); text-decoration: none; }
.pl-nav a:hover { color: var(--ink-900); text-decoration: underline; }
/* La acción de la cabecera NO es una píldora rellena. La píldora azul arriba a la derecha es
 * literalmente el primer tell que el juez de QA usó para decir que las cinco webs de la casa
 * son la misma (THE-82, C1). Aquí es una celda reglada: un filete la separa del resto de la
 * navegación y el subrayado de acento la marca como la acción. El relleno azul se reserva
 * para el ÚNICO botón de la página, el del pliegue. */
.pl-nav .pl-navcta {
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--signal-700);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  border-left: var(--border-hair) solid var(--rule-200);
  padding-left: var(--space-5);
}

/* --------------------------------------------------------------------------------- botón */
.pl-btn {
  display: inline-block;
  background: var(--signal-700);
  color: var(--paper-000);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: var(--border-hair) solid var(--signal-700);
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}
.pl-btn:hover { background: var(--signal-600); border-color: var(--signal-600); }
.pl-btn[disabled] { opacity: 0.6; cursor: default; }
.pl-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--step-caption); }

/* ----------------------------------------------------------------------------- la rejilla
 * UNA rejilla para toda la página: doce columnas sobre --width-wide, el mismo medianil en
 * todas las bandas y el mismo filete vertical entre el margen y la lámina. Es el armazón
 * que sustituye al «cabecera → titular → tarjeta → secciones apiladas → formulario» que QA
 * encontró idéntico en las cinco webs (THE-82, C1).
 */
.pl-herogrid, .pl-readin {
  max-width: var(--width-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Medianil propio, más estrecho que el margen de la página: una rejilla editorial se lee
   * por sus filetes, y con el medianil a 48 px las columnas se separaban tanto que la
   * rejilla dejaba de verse como rejilla. */
  column-gap: var(--space-6);
}

/* ----------------------------------------------------------------------------------- hero
 * Izquierda (1-7): el enunciado. Derecha (9-12), tras un filete: lo que el visitante se
 * lleva de los veinte minutos — el eslabón que faltaba en el test de 5 s (C4) y, a la vez,
 * lo que ocupa la mitad derecha que estaba vacía (C2). Abajo, a las doce columnas y cortado
 * por el pliegue: el explorador. No es «copy a la izquierda, tarjeta a la derecha»
 * (REFERENCES.md §2 lo prohíbe): el producto va a ancho completo, y lo de la derecha es un
 * índice tipográfico sin caja, sin sombra y sin fondo.
 */
.pl-hero { padding-top: var(--space-8); }
.pl-say { grid-column: 1 / 9; display: flex; flex-direction: column; }
/* El pie de fuente del pliegue. Cierra por abajo la columna del enunciado —que si no deja
 * un hueco de ~140 px bajo la subcopia— y, más importante, pone la fuente primaria a la
 * vista en la primera pantalla en vez de solo en el pie. `margin-top:auto` lo alinea con el
 * rótulo honesto de la columna de la derecha: las dos columnas cierran en la misma línea. */
.pl-sourceline {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-hair) solid var(--rule-200);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--step-micro);
  line-height: var(--lh-caption);
  color: var(--ink-600);
}
.pl-sourceline > :first-child { letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); }
.pl-sourceline a { color: var(--ink-600); }
.pl-say > .pl-sourceline { margin-top: auto; }
.pl-take {
  grid-column: 10 / -1;
  align-self: end;
  border-left: var(--border-hair) solid var(--rule-200);
  padding-left: var(--space-5);
}
.pl-takehead {
  margin: 0 0 var(--space-4);
  font-size: var(--step-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.pl-takelist { margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.pl-takelist li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: var(--border-hair) solid var(--rule-200);
  font-size: var(--step-body);
  line-height: var(--lh-caption);
  color: var(--ink-900);
}
.pl-takelist li:last-child { border-bottom: var(--border-hair) solid var(--rule-200); }
/* El numeral es estructura, no decoración: es lo que convierte una lista en un índice. */
.pl-num {
  font-family: var(--font-display);
  font-weight: var(--wt-h3);
  color: var(--ink-400);
  font-variant-numeric: var(--numeric-tabular);
}
.pl-explorer { grid-column: 1 / -1; margin-top: var(--space-8); }

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-size: var(--step-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.pl-lead {
  margin: var(--space-4) 0 0;
  max-width: 46ch;
  font-size: var(--step-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  color: var(--ink-600);
}
/* el rótulo honesto: junto al CTA, nunca una franja encima de la página */
.pl-disclose {
  margin: var(--space-3) 0 0;
  max-width: 44ch;
  font-size: var(--step-micro);
  line-height: var(--lh-caption);
  color: var(--ink-600);
}

/* -------------------------------------------------------------------------- el explorador */
.pl-panel {
  background: var(--paper-000);
  border: var(--border-hair) solid var(--rule-200);
  border-radius: var(--radius-3); /* el único radio grande de la página */
  box-shadow: var(--shadow-panel);
  padding: var(--space-6);
}
.pl-paneltitle {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--wt-h3);
  font-size: var(--step-h3);
  line-height: var(--lh-h3);
  color: var(--ink-900);
}
.pl-panelgrid { display: grid; grid-template-columns: 280px 1fr; column-gap: var(--space-7); }
/* el filete vertical entre las dos columnas, a toda la altura del panel */
.pl-rolelist {
  display: flex;
  flex-direction: column;
  border-right: var(--border-hair) solid var(--rule-200);
  padding-right: var(--space-5);
}
.pl-role {
  height: 56px;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0 var(--space-4);
  font: inherit;
  color: var(--ink-900);
  background: var(--paper-000);
  border: 0;
  border-bottom: var(--border-hair) solid var(--rule-200);
  border-left: 2px solid transparent; /* el canto existe siempre: al seleccionar no salta */
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}
.pl-role:last-child { border-bottom: 0; }
.pl-role:hover { background: var(--signal-050); }
.pl-role:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
/* Seleccionado: tinte + barra de acento en el canto. La etiqueta NO se tiñe de acento:
 * DESIGN.md §12 lo marca como una de las dos trampas de cascada que le costaron a Lotstep
 * un fallo de contraste. */
.pl-role[aria-checked='true'] {
  background: var(--signal-050);
  border-left-color: var(--signal-700);
  font-weight: 600;
}

.pl-chartwrap { position: relative; }
.pl-fig svg { display: block; width: 100%; height: auto; }

/* la capa de hover que `dataviz` pide por defecto en cualquier gráfico */
.pl-tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--paper-000);
  border: var(--border-hair) solid var(--rule-200);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-panel);
  padding: var(--space-3);
  font-size: var(--step-micro);
  line-height: var(--lh-caption);
  color: var(--ink-600);
  white-space: nowrap;
}
.pl-tip b { display: block; font-weight: 600; color: var(--ink-900); }
.pl-tip span { font-variant-numeric: var(--numeric-tabular); }

/* --------------------------------------------------------------------------- el pliego
 * Cuatro bandas regladas, no cuatro secciones apiladas con tintes alternos. El titular y su
 * numeral viven en la columna de margen (1-3) con el filete vertical que la separa de la
 * lámina; la figura —o el formulario— ocupa las nueve restantes, que es lo que cierra el
 * canal muerto de la derecha (C2). UN solo ritmo vertical en las cuatro (C3).
 */
/* El acolchado vertical va en los elementos de la rejilla, no en la banda. Puesto en la banda,
 * el filete del margen solo llegaba hasta donde llegaba la figura y la página se leía como
 * cuatro bloques sueltos; puesto aquí, la línea recorre la banda entera y las cuatro se
 * encadenan en un mismo documento reglado. */
.pl-read { border-top: var(--border-hair) solid var(--rule-200); }
.pl-readmark {
  grid-column: 1 / 4;
  padding-block: var(--space-section);
  border-right: var(--border-hair) solid var(--rule-200);
  padding-right: var(--space-5);
}
.pl-read .pl-fig, .pl-read .pl-form { grid-column: 4 / -1; padding-block: var(--space-section); }
.pl-num--big {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tr-display);
}
/* En el margen el titular es marginalia: el numeral lleva la escala y el titular la lectura.
 * A tamaño de display en una columna de 3/12 se partía en cinco renglones. */
.pl-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--wt-h2);
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  color: var(--ink-900);
  text-wrap: balance;
}

/* La lámina: la única capa oscura de la página. No es un tinte alterno —no se repite— sino
 * el cambio de material que marca el documento que el visitante acabaría recibiendo. Los
 * valores son los del esquema oscuro ya medido en tokens.css, así que no hay ninguna pareja
 * de color nueva que validar. */
.pl-read--ink {
  --paper-000: var(--d-paper-000);
  --paper-050: var(--d-paper-050);
  --paper-100: var(--d-paper-100);
  --rule-200: var(--d-rule-200);
  --rule-100: var(--d-rule-100);
  --ink-900: var(--d-ink-900);
  --ink-600: var(--d-ink-600);
  --ink-400: var(--d-ink-400);
  --signal-700: var(--d-signal-700);
  --signal-600: var(--d-signal-600);
  --signal-100: var(--d-signal-100);
  --signal-050: var(--d-signal-050);
  --flag-700: var(--d-flag-700);
  --flag-600: var(--d-flag-600);
  --flag-050: var(--d-flag-050);
  background: var(--paper-000);
  color: var(--ink-900);
  border-top-color: var(--d-rule-200);
}
@media (prefers-color-scheme: dark) {
  /* A oscuras la lámina no puede ser el mismo negro que la página o deja de ser una lámina. */
  .pl-read--ink { --paper-000: var(--d-paper-100); --paper-050: var(--d-paper-050); }
}

.pl-fig { margin: 0; }
.pl-fig figcaption {
  margin-top: var(--space-4);
  font-size: var(--step-caption);
  line-height: var(--lh-caption);
  color: var(--ink-600);
}

/* Un dibujo por viewport. El selector lleva `svg` delante a propósito: `.pl-fig svg` de
 * arriba tiene más especificidad que una clase sola, y sin él salían los dos a la vez
 * (medido: el doble de filas alcanzables en el gráfico). */
svg.pl-chart-tall, svg.pl-reach-tall, svg.pl-time-tall, svg.pl-gap-tall { display: none; }
@media (max-width: 900px) {
  svg.pl-chart-wide, svg.pl-reach-wide, svg.pl-time-wide, svg.pl-gap-wide { display: none; }
  svg.pl-chart-tall, svg.pl-reach-tall, svg.pl-time-tall, svg.pl-gap-tall { display: block; }
  /* compuesto para 390 px: por encima no se amplía, se queda a su tamaño y se alinea */
  .pl-fig svg { max-width: 460px; }
  /* El gráfico va PRIMERO en el teléfono, y es una desviación consciente de HERO.md §5,
   * que apila la lista encima. Motivo, medido en el render: con la lista arriba, el pliegue
   * de un teléfono de 390×844 termina dentro de la lista y no se ve ni una banda ni el
   * punto fuera de ella — exactamente lo que HERO.md §0 pide que se entienda sin leer, y lo
   * que mide el test de 5 segundos. Con el gráfico arriba, el pliegue lo enseña. El orden
   * del DOM no cambia (la lista sigue siendo lo primero que recorre el teclado y el lector
   * de pantalla); lo que cambia es la caja visual. */
  .pl-panelgrid { grid-template-columns: 1fr; row-gap: var(--space-5); }
  .pl-chartwrap { order: -1; }
  .pl-rolelist {
    border-right: 0;
    padding-right: 0;
    border-top: var(--border-hair) solid var(--rule-200);
    padding-top: var(--space-2);
  }
  .pl-hero { padding-top: var(--space-6); }
  .pl-role { height: 48px; }
  .pl-panel { padding: var(--space-4); }

  /* La rejilla de doce columnas se apila. Los filetes verticales que la ordenan en
   * escritorio pasan a horizontales: la línea sigue estando, cambia de eje.
   *
   * Y en el pliegue se invierte el orden visual: enunciado → explorador → lo que te llevas.
   * Medido: con el índice encima del gráfico, el pliegue de un 390×844 terminaba dentro del
   * índice y no se veía ni una banda (hero.top = 692 de 844). Con el gráfico delante vuelve
   * a verse entero, que es lo que mide el test de 5 s. El ORDEN DEL DOM no cambia: el rótulo
   * honesto sigue después del h1 y el teclado recorre lo mismo. */
  .pl-herogrid { display: flex; flex-direction: column; }
  .pl-readin { display: block; }

  /* Apilado, el pliegue tiene que seguir contestando las TRES preguntas del test de 5 s, y
   * la tercera —qué te llevas— vive en la columna de la derecha, que aquí no existe. Así que
   * la columna se deshace (`display:contents`) y sus cuatro piezas se reparten: el índice de
   * lo que te llevas sube por encima del explorador, compacto; el botón y el rótulo honesto
   * bajan por debajo. Medido en 390×844: enunciado 354, índice 150, y el explorador entra
   * con la fila marcada «Outside band» dentro del pliegue. El ORDEN DEL DOM no cambia. */
  .pl-take { display: contents; }
  .pl-say { order: 1; }
  .pl-takehead { order: 2; margin-top: var(--space-6); }
  .pl-takelist { order: 3; margin-bottom: 0; }
  .pl-takelist li { padding: var(--space-2) 0; font-size: var(--step-caption); }
  .pl-explorer { order: 4; margin-top: var(--space-6); }
  .pl-take > .pl-btn { order: 5; align-self: start; margin-top: var(--space-7); }
  .pl-disclose { order: 6; }
  /* Apilado, el acolchado vuelve a la banda: con él en los dos hijos, el hueco entre el
   * titular y su figura se sumaba dos veces. */
  .pl-read { padding-block: var(--space-section); }
  .pl-read .pl-fig, .pl-read .pl-form { padding-block: 0; }
  .pl-readmark {
    padding-block: 0;
    border-right: 0;
    padding-right: 0;
    margin-bottom: var(--space-6);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: var(--space-4);
    border-bottom: var(--border-hair) solid var(--rule-200);
    padding-bottom: var(--space-4);
  }
  .pl-num--big { margin: 0; font-size: 2rem; }
}

/* -------------------------------------------------------- tipografía dentro de las figuras
 * `--fig-k` es el multiplicador del texto dibujado. Vale 1 en los dos viewports para los que
 * están compuestos los dibujos (1440 y 390), donde una unidad de viewBox ≈ un píxel CSS.
 * Por debajo de 360 px el dibujo se encoge —el viewBox sigue siendo 390— y el texto bajaba
 * de 11 px CSS, que es el suelo medido en Lotstep v2: a 8-10 px la figura deja de comunicar
 * y el listón v2 pide justo que comunique sin leer. Ahí `--fig-k` sube y el tamaño en
 * pantalla vuelve por encima del suelo. Lo comprueba `node measure.mjs` a 390 y a 320.
 */
.pl-fig { --fig-k: 1; }
.pl-fig text { font-family: var(--font-text); }
/* UNA regla de titulares para toda la página: lo que titula va en Newsreader, esté en el
 * DOM o dibujado dentro de un SVG. `.pl-fig text` tiene más especificidad que una clase
 * sola, así que `.pl-sheettitle { font-family: … }` NO ganaba y «Gender pay gap report»
 * salía en grotesca mientras «Pay band explorer» salía en serif: exactamente la fuga de
 * coherencia que marcó QA (C3). Los dos selectores de abajo la cierran, y de paso devuelven
 * las fechas de la línea de tiempo a la familia de display. */
.pl-fig text.pl-sheettitle,
.pl-fig text.pl-date { font-family: var(--font-display); }

.pl-tick { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-400); font-variant-numeric: var(--numeric-tabular); }
.pl-read { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); font-variant-numeric: var(--numeric-tabular); }
.pl-read-role { fill: var(--ink-900); font-weight: 600; }
.pl-end { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-400); font-variant-numeric: var(--numeric-tabular); }
.pl-nodetext { font-size: calc(var(--step-body) * var(--fig-k)); fill: var(--ink-900); }
.pl-nodesub { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); }
.pl-edgelabel { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); }
.pl-note { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); }
.pl-date { font-family: var(--font-display); font-size: calc(1.5rem * var(--fig-k)); fill: var(--ink-900); font-variant-numeric: var(--numeric-tabular); }
.pl-passed { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); }
.pl-source { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); }
.pl-sheettitle { font-size: calc(var(--step-h3) * var(--fig-k)); fill: var(--ink-900); }
/* La anotación del umbral del art. 10. A --step-micro caía a 10,7 px CSS en una pantalla de
 * 320 px, por debajo del suelo de 11 px medido en Lotstep v2; a --step-caption vuelve a 11,6
 * y sigue cabiendo dentro de la hoja (328 de 378 unidades con --fig-k a 1,15). */
.pl-trigger { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); }
.pl-indlabel { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-900); }
.pl-indval { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); font-variant-numeric: var(--numeric-tabular); }
.pl-ind.is-over .pl-indval { fill: var(--flag-700); font-weight: 600; }
.pl-chiptext { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--paper-000); font-weight: 600; }
/* la etiqueta de puesto dentro del gráfico de teléfono (V3): sin ella las cinco barras
 * eran anónimas. No se atenúa con la fila, se apaga de color, que es lo que mantiene el
 * contraste AA de un texto de 14 px. */
.pl-rowlabel { font-size: calc(var(--step-caption) * var(--fig-k)); fill: var(--ink-600); }
.pl-row.is-sel .pl-rowlabel { fill: var(--ink-900); font-weight: 600; }

/* --------------------------------------------------------------- marcas y líneas del dibujo */
.pl-grid, .pl-indtrack { stroke: var(--rule-100); stroke-width: 1; }
.pl-rule, .pl-axisline { stroke: var(--rule-200); stroke-width: 1; }
.pl-refrule { stroke: var(--ink-400); stroke-width: 1; stroke-dasharray: 3 3; }
.pl-edge { stroke: var(--rule-200); stroke-width: 1; fill: none; }
/* Las cajas del diagrama llevan fondo, no solo contorno: a contorno puro el dibujo quedaba
 * flotando en el blanco de la página y el juez leyó la composición como «plana y sin
 * material». Un tinte de papel las convierte en objetos apoyados sobre la hoja. */
.pl-node { fill: var(--paper-050); stroke: var(--rule-200); stroke-width: 1; }
.pl-node.is-cond { fill: var(--signal-050); stroke: var(--signal-700); }
.pl-marker { fill: var(--signal-700); stroke: var(--paper-050); stroke-width: 2; }
.pl-marker.is-past { fill: var(--paper-050); stroke: var(--rule-200); stroke-width: 2; }
.pl-sheet { fill: var(--paper-050); stroke: var(--rule-200); stroke-width: 1; }
.pl-bar { fill: var(--signal-100); rx: var(--radius-bar); }
.pl-med { stroke: var(--signal-600); stroke-width: 2; }
.pl-hit { fill: var(--paper-000); fill-opacity: 0; }

/* UN solo rojo en pantalla (C3). tokens.css tiene dos tintas rojas por una razón de
 * contraste —`--flag-600` no llega a AA como texto sobre papel y `--flag-700` sí—, pero el
 * juez las vio juntas en el informe de brecha (barra ladrillo + cifra granate) y las leyó
 * como dos rojos distintos. Regla a partir de aquí: **todo lo rojo que se ve usa
 * `--flag-700`**, marca y texto; `--flag-600` se queda en tokens.css como el par del
 * esquema oscuro y no se pinta. El blanco sobre --flag-700 sigue muy por encima de AA. */
.pl-indbar { fill: var(--signal-600); rx: var(--radius-bar); }
.pl-ind.is-over .pl-indbar { fill: var(--flag-700); }
.pl-dot { fill: var(--flag-700); stroke: var(--paper-000); stroke-width: 2; }
.pl-chip { fill: var(--flag-700); rx: var(--radius-1); }
.pl-chipicon { fill: var(--paper-000); }
.pl-warn { fill: var(--flag-700); }

/* ---------------------------------------------------------- la selección dentro del gráfico
 * Se atenúan las MARCAS, no la fila entera: la etiqueta de puesto del gráfico de teléfono
 * vive dentro del mismo <g> y a 0,55 de opacidad un texto de 14 px baja de 4,5:1. */
.pl-row .pl-bar, .pl-row .pl-med { transition: opacity var(--dur-state) var(--ease-inout); }
.pl-row:not(.is-sel) .pl-bar, .pl-row:not(.is-sel) .pl-med { opacity: 0.5; }
.pl-row .pl-selonly { display: none; }
.pl-row.is-sel .pl-selonly { display: block; }
.pl-readout { display: none; }
.pl-readout.is-sel { display: block; }

/* ----------------------------------------------------------------- la entrada, una sola vez
 * HERO.md §6. El panel, los filetes, la rejilla, los rótulos y la lista YA están en el primer
 * fotograma; lo único que se construye son las cinco bandas, creciendo desde su mediana —la
 * banda abriéndose, no una barra de progreso llenándose—. `backwards` es lo que permite que
 * el estado de reposo del CSS sea el final: antes de que empiece su retardo, la barra toma el
 * fotograma 0 sin que haya que escribirlo aparte, así que no hay destello del final.
 * Sin `js-motion` (sin JS, o con movimiento reducido) no hay animación y se ve el final.
 */
@keyframes pl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pl-appear { from { opacity: 0; } to { opacity: 1; } }

.is-entering .pl-bar { transform: scaleX(0); }
.is-entering .pl-flagmark { opacity: 0; }
.js-motion .pl-bar { animation: pl-draw var(--dur-enter) var(--ease-out) forwards; }
.js-motion .pl-row:nth-child(1) .pl-bar { animation-delay: 0ms; }
.js-motion .pl-row:nth-child(2) .pl-bar { animation-delay: 60ms; }
.js-motion .pl-row:nth-child(3) .pl-bar { animation-delay: 120ms; }
.js-motion .pl-row:nth-child(4) .pl-bar { animation-delay: 180ms; }
.js-motion .pl-row:nth-child(5) .pl-bar { animation-delay: 240ms; }
.js-motion .pl-flagmark { animation: pl-appear 220ms var(--ease-out) 480ms forwards; }

/* Por qué `is-entering` y no `animation-fill-mode: backwards`, que sería más corto: el
 * documento lleva las DOS variantes del dibujo y la que no toca está en `display:none`.
 * Chromium no corre animaciones dentro de un subárbol oculto, así que con `backwards` esa
 * variante se quedaba congelada en su fotograma 0 —barra a escala 0, chip invisible— y al
 * cambiar de viewport aparecía vacía. Medido con shoot.mjs §3, no supuesto. La clase la pone
 * boot.js antes del primer pintado y la quita hero.js a los 800 ms, cuando la última
 * animación (chip, 560+220) ya ha terminado. */

/* -------------------------------------------------------------------------------- formulario
 * Dos columnas de campos dentro de las nueve de la lámina. Antes era una tira estrecha y
 * larguísima frente a media página vacía (C2); así cabe de una vez y la banda cierra con la
 * misma proporción que las tres lecturas.
 *
 * Y los campos dejan de ser cajas redondeadas de plantilla: un filete bajo el renglón, el
 * rótulo pequeño encima, nada más. Es la misma línea de 1 px que ordena el resto de la
 * página; un formulario editorial se raya, no se enmarca.
 */
.pl-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-5);
  align-content: start;
}
.pl-formlede {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 54ch;
  font-size: var(--step-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  color: var(--ink-600);
}
.pl-field { display: grid; gap: var(--space-2); align-content: start; }
.pl-field--wide, .pl-check, .pl-submitrow, .pl-form > .pl-live { grid-column: 1 / -1; }
.pl-field label, .pl-check label { font-size: var(--step-caption); color: var(--ink-600); }
.pl-field input, .pl-field textarea {
  font: inherit;
  color: var(--ink-900);
  background: transparent;
  border: 0;
  border-bottom: var(--border-hair) solid var(--rule-200);
  border-radius: var(--radius-0);
  padding: var(--space-2) 0;
  width: 100%;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.pl-field input:hover, .pl-field textarea:hover { border-bottom-color: var(--ink-400); }
.pl-field input:focus-visible, .pl-field textarea:focus-visible { border-bottom-color: var(--signal-700); }
.pl-field textarea {
  resize: vertical;
  border: var(--border-hair) solid var(--rule-200);
  padding: var(--space-3);
}
.pl-hint { margin: 0; font-size: var(--step-micro); color: var(--ink-600); }
.pl-submitrow { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pl-submitrow .pl-hint { max-width: 42ch; }
.pl-field input[aria-invalid='true'], .pl-field textarea[aria-invalid='true'] {
  border-bottom-color: var(--flag-700);
  border-bottom-width: 2px;
}
.pl-check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.pl-check input { margin-top: 4px; accent-color: var(--signal-700); }
.pl-check .pl-err { grid-column: 1 / -1; }
/* el mensaje de campo lleva el icono del aviso, no solo el color */
.pl-err { margin: 0; font-size: var(--step-micro); color: var(--flag-700); }
.pl-err::before { content: '\25B2\00a0'; }
.pl-hp { position: absolute; left: -9999px; }

.pl-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}
.pl-form[data-state='done'] .pl-field,
.pl-form[data-state='done'] .pl-check,
.pl-form[data-state='done'] .pl-hint,
.pl-form[data-state='done'] .pl-formlede,
.pl-form[data-state='done'] [data-submit],
.pl-form[data-state='already'] .pl-field,
.pl-form[data-state='already'] .pl-check,
.pl-form[data-state='already'] .pl-hint,
.pl-form[data-state='already'] .pl-formlede,
.pl-form[data-state='already'] [data-submit] { display: none; }
.pl-form[data-state='done'] .pl-live,
.pl-form[data-state='already'] .pl-live {
  position: static;
  width: auto; height: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  font-size: var(--step-lead);
  color: var(--ink-900);
  border-left: 2px solid var(--signal-700);
  padding-left: var(--space-4);
}

/* ------------------------------------------------------------------------------------- pie
 * Este es el pie de la carpeta de build. Al montar, `build-seo/integrate.mjs` lo sustituye por
 * `foot()`, que es el único sitio donde vive la línea de `legal-pages` de las seis páginas.
 */
.pl-foot { border-top: var(--border-hair) solid var(--rule-200); background: var(--paper-050); }
.pl-foot p {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: var(--step-caption);
  color: var(--ink-600);
}
.pl-foot p:first-child { padding-top: var(--space-7); }
.pl-foot p:last-child { padding-bottom: var(--space-7); }
.pl-footnote { margin-top: var(--space-3) !important; font-size: var(--step-micro); max-width: 78ch; }

/* ----------------------------------------------------------------- movimiento accesible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* La anulación de la rejilla del formulario va al final del archivo a propósito: `.pl-form`
 * se declara más abajo que la @media de 900 px y, con la misma especificidad, gana la última
 * regla. Medido: con esta regla dentro de aquella @media, un teléfono de 390 px seguía
 * pintando «Full name» y «Work email» en dos columnas de 150 px. */
@media (max-width: 900px) {
  .pl-form { grid-template-columns: minmax(0, 1fr); }
}

/* La cabecera a lo ancho de un teléfono. Medido: con los tres enlaces y el botón en línea,
 * el ancho mínimo de la cabecera era 473 px, y un teléfono de 390 px resuelve eso alejando
 * el zoom de TODA la página (innerWidth pasaba a 473 y la tipografía se encogía con él).
 * Por debajo de 640 px se quedan la marca y la acción; los tres enlaces siguen a un toque
 * de distancia en el pie, que `foot()` emite con la lista completa de páginas.
 *
 * El `:not()` apunta a `.pl-navcta`, que es la clase que la acción lleva en las SEIS páginas.
 * Mientras la home usó `.pl-btn` aquí, las cinco páginas de texto se quedaban por debajo de
 * 640 px sin marca de acción ninguna: el selector no casaba con su enlace y lo escondía. */
@media (max-width: 640px) {
  .pl-head-in { gap: var(--space-4); }
  .pl-nav { gap: var(--space-4); }
  .pl-nav a:not(.pl-navcta) { display: none; }
  .pl-nav .pl-navcta { border-left: 0; padding-left: 0; }
}

/* Pantallas más estrechas que el viewport para el que está compuesto el dibujo de teléfono.
 * Medido a 320 px: el texto de las figuras caía a 8,8-10,1 px CSS. Con el multiplicador y
 * un panel menos acolchado vuelve por encima de 11. */
@media (max-width: 360px) {
  /* El hero no lo necesita: su dibujo ya está compuesto en 330 unidades y el panel cede su
   * acolchado lateral. Las otras tres figuras van en 390 y sí suben de tamaño. */
  .pl-fig { --fig-k: 1.15; }
  .pl-explorer { --fig-k: 1; }
  .pl-panel { padding: var(--space-3) var(--space-1); }
  .pl-paneltitle, .pl-rolelist { padding-inline: var(--space-2); }
}