/* ═══════════════════════════════════════════════════════════════════════════════════════
 * Golden PR — EXP-DOCS. El expediente, aplicado a los DOCUMENTOS del sitio:
 * /CaseStudiesPage (con su gemela /es), los dos legales y el 404.
 *
 * LA TESIS es la de expediente.css: la web es un dossier que se deja leer a medias, y el oro
 * es FUNCIONAL — numeración de expedientes, filos, cantos de 1 px. El muro de case studies es
 * la casa natural de ese vocabulario; los legales y el 404 son los anexos del mismo dossier.
 *
 * ÁMBITO: todo va bajo `body.gp-exp-doc`, que ponen SOLO las cuatro plantillas de arriba
 * (views/case-studies.php —la mitad española la incluye—, views/privacy-policy.php,
 * views/terms.php y 404.php). `gp-exp` lo llevan la portada y el resto de rutas interiores:
 * esta hoja no lo usa ni lo pisa.
 *
 * CONVIVE CON `.gp-cin`, y no es el caso que front-page.php prohíbe. Aquella nota veta
 * combinar `gp-cin` + `gp-exp` porque las DOS hojas definen las mismas piezas y quién pinta
 * pasaría a depender del orden. Aquí el reparto es de capas, no de empate: cinetica.css da
 * el CHASIS (retícula, formularios, registro, documentos, focus, box-sizing) y esta hoja
 * lo RE-VISTE — y cada anulación gana por ESPECIFICIDAD (prefijo `body.gp-exp-doc`, un
 * escalón por encima del selector que anula), no por orden. Los únicos empates reales
 * (1-1-1 contra `body:not(.gp-cin) #gp-header` en el 404, que no lleva `gp-cin`) los
 * decide la dependencia de encolado declarada en las vistas: exp-docs depende de
 * `gp-expediente`, que depende de `gp-cinetica`. Es el mismo contrato que expediente.css
 * §7 documenta para la portada.
 *
 * SIN `@font-face`: las dos caras estáticas (Anybody Exp wdth 85 y Fragment Mono) y sus
 * respaldos con métricas ajustadas viven en expediente.css, que functions.php encola en
 * TODAS las rutas. Declararlas otra vez sería tener dos fuentes de verdad para una métrica.
 *
 * PROHIBICIONES heredadas de la dirección (expediente.css, cabecera): ni deformación
 * tipográfica (la anchura vive en el fichero de la fuente; `font-stretch` heredado del
 * chasis es un no-op sin eje), ni `--gp-w`, ni movimiento atado al scroll. Las cuatro
 * páginas son DOCUMENTOS: nacen quietas y completas, sin más movimiento que los cambios de
 * color al pasar el puntero.
 *
 * CONTRASTES CALCULADOS (fórmula WCAG 2.x sobre color compuesto; guion con calibración de
 * 4 ratios conocidos y control negativo —filo/sala 1,58 suspende—, 13-ago):
 *   hueso  #F7F1E6 sobre sala  #1B0404 ... 17,53:1
 *   tenue  #C4B39D sobre sala  #1B0404 ...  9,65:1   (también borde de campo: 1.4.11 pide 3:1)
 *   oro    #D4AF37 sobre sala  #1B0404 ...  9,37:1
 *   alarma #FF9E9E sobre sala  #1B0404 ...  9,98:1
 *   hueso  #F7F1E6 sobre panel #220606 .. 17,03:1
 *   tenue  #C4B39D sobre panel #220606 ..  9,38:1
 *   oro    #D4AF37 sobre panel #220606 ..  9,11:1
 *   alarma #FF9E9E sobre panel #220606 ..  9,70:1
 *   granate #370606 sobre oro  #D4AF37 ..  8,38:1   (texto de los CTA de oro, sin cambios)
 * Tres tintas sólidas y ninguna con `opacity`: el color escrito ES el compuesto.
 * ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · Tokens ═══════════════════════════════════════════════════════════════════════
 * En `body.gp-exp-doc` y no en `:root`: los descendientes heredan del body y las demás
 * rutas no ven ni un token. `--gp-display` se RE-APUNTA a la instancia fija: todo lo que
 * el chasis compone con `var(--gp-display)` —títulos de documento, estados, la lista del
 * 404, el panel del menú, el claim del pie— pasa a la Anybody estática sin tocar una regla,
 * y sus `font-stretch` heredados quedan en no-op (la cara no tiene eje).
 *
 * La escala es PROPIA y más contenida que la de portada: esto son documentos, no cubiertas.
 * La cuenta del 404: «404» son 3 glifos a ~0,63 em/glifo en wdth 85 (avance medido en el
 * fichero, expediente.css §1) ≈ 1,9 em por línea. A 390 px de viewport el clamp da 142 px
 * → ~270 px de tinta en 350 de marco; el tope de 24 rem da ~730 px en los 1.312 del marco
 * a 1440. Dentro a los dos extremos. */
body.gp-exp-doc {
  --gp-sala:  #1B0404;
  --gp-panel: #220606;

  --gp-exp-display: 'Anybody Exp', 'Anybody Exp respaldo', Arial, Helvetica, sans-serif;
  --gp-exp-mono:    'Fragment Mono', 'Fragment respaldo', 'Courier New', monospace;
  --gp-display:     'Anybody Exp', 'Anybody Exp respaldo', Arial, Helvetica, sans-serif;

  --gp-xd-t-h1:  clamp(2.8rem, 1.3rem + 7.5vw, 7.5rem);   /* tapa del dossier   */
  --gp-xd-t-doc: clamp(2.2rem, 1.1rem + 4.6vw, 5rem);     /* H1 de los legales  */
  --gp-xd-t-h2:  clamp(2rem, 1rem + 4.4vw, 4.4rem);       /* misma que portada  */
  --gp-xd-t-h3:  clamp(1.35rem, 1rem + 1.8vw, 2.3rem);    /* cuerpo de ficha    */
  --gp-xd-t-404: clamp(5.5rem, 3.5rem + 22vw, 24rem);
}

/* ═══ 2 · Chasis ═══════════════════════════════════════════════════════════════════════
 * La sala. `body.gp-cin.gp-exp-doc` (0-2-1) le gana al granate de `body.gp-cin` (0-1-1)
 * por especificidad, venga la hoja donde venga; la forma simple cubre el 404, que no lleva
 * `gp-cin` y donde el rival es `body:has(.gp-404)` (0-1-1 contra 0-1-1: ahí decide el
 * orden, que la dependencia de encolado garantiza — y §9 añade el cinturón :has()). */
body.gp-exp-doc,
body.gp-cin.gp-exp-doc {
  margin: 0;
  background: var(--gp-sala);
  color: var(--gp-hueso);
  font-family: var(--gp-texto);
  font-size: var(--gp-t-cuerpo);
  line-height: 1.55;
  overflow-x: clip;
  /* Controles nativos en su versión oscura: la casilla del NDA sin marcar era un cuadrado
   * blanco sobre la sala. */
  color-scheme: dark;
}

/* Para el 404, que no hereda el chasis de `.gp-cin`: caja, imágenes y foco. En las otras
 * tres rutas estas reglas son redundantes con las de cinetica.css §3 — mismo valor, cero
 * conflicto. */
.gp-exp-doc *, .gp-exp-doc *::before, .gp-exp-doc *::after { box-sizing: border-box; }
.gp-exp-doc img { max-inline-size: 100%; block-size: auto; }
.gp-exp-doc :focus-visible {
  outline: 3px solid var(--gp-oro);
  outline-offset: 3px;
  border-radius: 2px;
}
/* En un CTA de oro o en el enlace de salto (también de oro), el anillo de oro es oro sobre oro:
 * el elemento enfocado solo parecía 6 px más grande. Aquí el anillo vuelve a ser el de dos tonos
 * de theme.css (granate pegado, oro por fuera), el mismo que ven las rutas del Expediente. 0-3-0:
 * gana a `.gp-cin :focus-visible` y a la regla de arriba (0-2-0) venga la hoja donde venga. */
:is(.gp-cin, .gp-exp-doc) :is(.gp-cta--oro, .gp-saltar):focus-visible {
  outline-color: var(--gp-granate);
  outline-offset: 2px;
}

/* EL GRANO — el mismo tile estático de `feTurbulence` al 3 % de expediente.css §3: la
 * película de materia que separa «render de granate» del terciopelo de la sala. A 3 % no
 * altera ningún contraste medible (el par más justo, oro/sala 9,37:1, sigue > 9:1). No se
 * anima jamás. */
body.gp-exp-doc::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 80;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.03;
}

/* ═══ 3 · Cabecera y pie: el re-vestido de la sala ═════════════════════════════════════
 * Calco de expediente.css §7 bajo el ámbito nuevo: el marcado no se toca, se toca la luz.
 * Canto dorado de 1 px — el filo del dossier encuadernado. `body.gp-exp-doc .gp-sitio` da
 * (1,2,1) contra el (1,1,0)/(1,1,1) del chasis: gana por especificidad, sin contrato de
 * orden. */
body.gp-exp-doc .gp-sitio #gp-header {
  /* AIRE (§19 de expediente.css): el mismo vidrio de sala que las rutas `gp-exp`. Este bloque
   * gana por (1,2,1) al de expediente.css, así que el vidrio hay que declararlo AQUÍ — dejarlo
   * solo en §19 deja estas cinco rutas con la barra opaca (medido en el barrido del 14-ago:
   * «header sin vidrio» en muro, legales y 404). */
  background: color-mix(in srgb, var(--gp-sala) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-block-end: 1px solid var(--gp-oro);
  /* El mismo nombre que en §19: si falta en CUALQUIERA de las dos páginas de una navegación,
   * la cabecera viaja dentro del snapshot de root y el cruce exp ↔ doc pierde la persistencia. */
  view-transition-name: gp-cabecera;
}
@supports not (backdrop-filter: blur(1px)) {
  body.gp-exp-doc .gp-sitio #gp-header { background: var(--gp-sala); }
}

/* La navegación, en la voz mono de los metadatos: la cabecera es la etiqueta del dossier. */
body.gp-exp-doc .gp-nav a,
body.gp-exp-doc .gp-cab__ham {
  font-family: var(--gp-exp-mono);
  /* La mono solo tiene 400: sin esto, el 600 del chasis fabricaba una negrita sintética. */
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

body.gp-exp-doc #gp-mobile-menu { background: var(--gp-sala); }

body.gp-exp-doc .gp-sitio .gp-pie {
  background: var(--gp-sala);
  border-block-start: 1px solid var(--gp-oro);
}
body.gp-exp-doc .gp-dato {
  font-family: var(--gp-exp-mono); font-weight: 400; font-synthesis: none; letter-spacing: 0.08em;
  font-size: max(0.75rem, var(--gp-t-ojo));
}

/* ═══ 4 · Tipografía ═══════════════════════════════════════════════════════════════════
 * El display fijo. `font-stretch` no aparece en esta hoja fuera de este comentario: la
 * anchura vive en el fichero. Los `line-height` son los de expediente.css (0,94/0,96/1,04):
 * sin deformación las líneas parten, y a 0,86 dos líneas de caja alta se tocan. */

.gp-exp-doc .gp-x-h1 { margin: 0; }
.gp-exp-doc .gp-x-h1__l {
  display: block;
  font-family: var(--gp-exp-display);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--gp-xd-t-h1);
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--gp-hueso);
}
.gp-exp-doc .gp-x-h1__l--oro { color: var(--gp-oro); }
.gp-exp-doc .gp-x-h1__l--doc { font-size: var(--gp-xd-t-doc); }

.gp-exp-doc .gp-x-h2 {
  font-family: var(--gp-exp-display);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--gp-xd-t-h2);
  line-height: 0.96;
  letter-spacing: -0.005em;
  color: var(--gp-hueso);
  text-wrap: balance;
  max-inline-size: 24ch;
  margin: 0;
}
.gp-exp-doc .gp-x-h3 {
  font-family: var(--gp-exp-display);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--gp-xd-t-h3);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--gp-hueso);
  text-wrap: balance;
  margin: 0;
}

/* El metadato: la voz mono del dossier, en el ojo. (0-2-1) contra el `.gp-ojo` global (0-1-0).
 * El tracking corto es de expediente.css §4: una mono ya espacia sola. */
body.gp-exp-doc .gp-ojo {
  font-family: var(--gp-exp-mono);
  font-weight: 400;
  font-synthesis: none;
  font-size: max(0.75rem, var(--gp-t-ojo));   /* la mono, nunca por debajo de 12 px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}
body.gp-exp-doc .gp-ojo { color: var(--gp-oro); margin: 0; }
body.gp-exp-doc .gp-ojo--tenue { color: var(--gp-tenue); }

/* La marca de importe retirado, en la voz mono: es un metadato del expediente, no prosa.
 * (0-2-1) contra `.gp-cin .gp-omitido` (0-2-0). Oro sobre sala 9,37:1. */
body.gp-exp-doc .gp-omitido { font-family: var(--gp-exp-mono); font-weight: 400; font-synthesis: none; font-size: 0.85em; }

/* ═══ 6 · El dossier abierto ═══════════════════════════════════════════════════════════
 * Con sesión válida. La banda de la llave pasa al panel (#220606): es la única pieza de la
 * página que está DENTRO del expediente abierto, y el cambio de plano lo dice. Tenue 9,38:1
 * y oro 9,11:1 sobre el panel. */
body.gp-exp-doc .gp-llave-banda { background: var(--gp-panel); }

/* Las etiquetas de sección del caso ya salen en mono por §4 (`.gp-ojo`); el título del
 * caso, en display fijo por `.gp-x-h3`; las cifras (`.gp-caso__n`) heredan la pila
 * re-apuntada de §1 y componen en la instancia fija sin regla propia. */

/* La marca de importe retirado cuando es LA CIFRA entera de una celda del grid de métricas.
 * El chasis le pone `white-space: nowrap` (cinetica.css §12), pensado para la marca en medio
 * de la prosa; aquí la celda mide 226 px a 768 y la marca en nowrap mide 343 px — medido:
 * a 768 se salía del grid y guillotinaba el documento (scrollWidth 856 > 768) y a 1024
 * invadía la celda vecina pisando la cifra «1,100%». Dentro de la celda la marca parte
 * línea como el metadato que es; en prosa la regla del chasis sigue intacta. (0-3-1 gana a
 * 0-2-0 por especificidad, no por orden.) */
body.gp-exp-doc .gp-caso__n .gp-omitido { white-space: normal; line-height: 1.2; }

/* ═══ 7 · Formulario ═══════════════════════════════════════════════════════════════════
 * El chasis entero (campos, consentimiento, honeypot, feedback, acciones) es de
 * cinetica.css §12.13 y funciona sobre la sala tal cual: borde tenue 9,65:1 (1.4.11 pide
 * 3:1), alarma 9,98:1, foco oro 9,37:1. */

/* El enlace a la política dentro de la ayuda del formulario del muro («Privacy Policy →»). Sin
 * esta regla heredaba el tenue de la frase y ningún subrayado: no se distinguía del texto (WCAG
 * 1.4.1) y medía 17-20 px de alto. Oro y subrayado, como el enlace del consentimiento, y en bloque
 * en línea con relleno: el objetivo táctil pasa a 29-33 px. Sobre el pasillo de `#gp-acceso` el
 * peor píxel bajo el enlace da 8:1 o más, de 360 a 1440; el foco es el anillo de oro común
 * (`.gp-exp-doc :focus-visible`). */
body.gp-exp-doc .gp-ayuda a {
  display: inline-block;
  padding-block: 0.15rem;
  color: var(--gp-oro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
body.gp-exp-doc .gp-ayuda a:hover { color: var(--gp-hueso); }

/* ═══ 8 · Los legales: el documento del dossier ════════════════════════════════════════
 * El chasis de `.gp-doc` (retícula, índice pegajoso, medida de 68ch — dentro de los 60-75
 * de documento largo) es de cinetica.css §12.14 y no se toca. El re-vestido: el índice y
 * el aviso del art. 10 hablan en mono —son el registro del documento—, con la numeración
 * en oro que ya traía. Los H2 componen en display fijo por la pila de §1. */
body.gp-exp-doc .gp-doc__indice a {
  font-family: var(--gp-exp-mono);
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}
body.gp-exp-doc .gp-doc__aviso dt {
  font-family: var(--gp-exp-mono);
  font-weight: 400;
  font-synthesis: none;
  font-size: max(0.75rem, var(--gp-t-ojo));
  letter-spacing: 0.08em;
}
/* La fecha de revisión y el ojo de marca ya van en mono por §4. El filo de las secciones
 * (`--gp-filo` sobre la sala) es separación, no texto: 1.4.11 no le aplica y a 1 px sobre
 * #1B0404 se lee como el hilo que es. */

/* ═══ 9 · El 404: el expediente que no existe ══════════════════════════════════════════
 * El número es la pieza, como en la versión cinética — pero IMPRESO, no deformado: display
 * fijo, oro funcional, quieto desde el primer fotograma. La lista de destinos ya es un
 * registro (filos de 1 px) y sus rótulos componen en la instancia fija por la pila de §1.
 *
 * `body.gp-exp-doc .gp-404` (0-2-1) le gana al granate propio de `.gp-404` (0-1-0), y el
 * cinturón `:has()` (0-2-1) cubre el empate 0-1-1 contra `body:has(.gp-404)` sin depender
 * del orden; si un motor no soporta `:has()`, la forma simple de §2 ya pintó la sala. */
body.gp-exp-doc:has(.gp-404) { background: var(--gp-sala); }
body.gp-exp-doc .gp-404 { background: var(--gp-sala); }
body.gp-exp-doc .gp-404__n {
  font-family: var(--gp-exp-display);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--gp-xd-t-404);
  line-height: 0.85;
  letter-spacing: -0.005em;
  color: var(--gp-oro);
  margin: 0;
}