/* ============================================================================
   HKR · CATÁLOGO DE SECCIONES PARALLAX  —  capa compartida
   ----------------------------------------------------------------------------
   Archivo ADITIVO. Solo lo cargan las páginas `plx-*.html`. No modifica ni una
   regla de tokens.css / bloques.css / hkr-parallax.css / hkr-escenas.css, y
   ninguna página del sitio lo carga. Si se borra, el sitio ni se entera.

   QUÉ CARGA UNA PÁGINA DEL CATÁLOGO, Y POR QUÉ ESE JUEGO Y NO OTRO
     tokens.css        · los --hkr6-* y la conmutación por mundo
     bloques.css       · tipografía, botones, chips (coherencia con el sitio real)
     hkr-parallax.css  · la ley de movimiento 2:1 amortiguada
     hkr-escenas.css   · el deck: una escena = una pantalla, con snap
     ESTE archivo      · el material del catálogo + los mundos de foto
     <style> propio    · las recetas de las 5 secciones de esa página

   LO QUE NO SE CARGA: `ng.css`. Y no es un olvido.
     1. Todas sus reglas están detrás de `body[data-ng]` y muchas llevan
        `!important`. Sin `data-ng` no disparan, y no hay guerra de pesos.
     2. Su interruptor de mundo claro (`section[data-ng-tono="papel"]`) fuerza
        un fondo OPACO con `!important` y `position:relative` en los hijos de la
        sección. Sobre una escena con foto eso taparía la foto y rompería el
        parallax — está medido en `_parallax-100\_bitacora.md`, hallazgo 6.
     El material se reconstruye acá desde los primitivos de tokens.css, que es
     la fuente de verdad: mismos pares de sombra, mismo blur, mismos radios.

   EL ATRIBUTO DE MUNDO ES `data-hkr6-world`, NO `data-world`.
     Hay dos copias de los tokens y NO usan el mismo selector: el archivo
     externo `assets/css/tokens.css` conmuta con `[data-hkr6-world]`; la copia
     inline de `index-parallax.html` usa `[data-world]`. Como acá se carga el
     archivo externo, el atributo canónico es `data-hkr6-world`. Escrito porque
     es exactamente el tipo de detalle que se pierde y cuesta media hora.

   LA LEY DE LUZ, UNA SOLA: 315°.
     Luz desde arriba-izquierda. Todo lo que SOBRESALE lleva su sombra abajo-
     derecha y su filo de luz arriba-izquierda. Todo lo que se HUNDE, al revés.
     Una sola sombra invertida y el material deja de leerse como material.
   ========================================================================== */

/* ------------------------------------------------------- 0 · SIN BARRA DE NAV
   Las páginas del catálogo no llevan el header del sitio. `--esc-nav` de
   hkr-escenas.css reserva 88px para la cápsula flotante (18 de despegue + 64 de
   alto + 6 de sombra) y acá esos 88px son alto útil para juzgar la composición.
   Se reclaman re-apuntando los tokens de los que cuelga —no tocando `--esc-nav`,
   que es de la otra hoja—. Quedan 26px: lo justo para que el rótulo respire.
   `hkr-escenas.js` ya tolera la ausencia del header (`if (nav && …)`), así que
   no hay que tocar ni una línea de JS del sistema. */
:root {
  --hkr6-nav-top: 0px;
  --hkr6-nav-h:   26px;
}

/* --------------------------------------------------------------- 1 · RÓTULO
   Chiquito, arriba a la derecha, en todas las escenas. No pisa el riel de
   escenas: el riel es `position:fixed; top:50%` (centrado vertical) y esto vive
   en los primeros 30px. Se apaga con la tecla R para poder mirar el ritmo
   visual sin la carpintería encima. */
.plx-rot {
  position: absolute;
  top: clamp(10px, 1.4vh, 16px);
  right: clamp(12px, 1.6vw, 22px);
  z-index: var(--hkr6-z-affordance);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--hkr6-r-pill, 999px);
  font-family: var(--hkr6-font);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--hkr6-t) var(--hkr6-ease);
}
.plx-rot__id  { font-weight: 600; }
.plx-rot__sep { opacity: .45; }
.plx-rot__w   { opacity: .62; }

/* El rótulo se tiñe por el mundo que tiene debajo, no por una regla global:
   una pastilla oscura sobre una escena de papel se lee como una mancha. */
.plx-rot {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #E7ECF5;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
}
/* SE TIÑE POR EL MUNDO, NO POR UN ATRIBUTO SUELTO. La variante clara colgaba de
   `data-ng-tono="papel"`, que es un atributo de otra capa y que no todas las
   escenas claras declaran: en PLX-59 y PLX-60 el rótulo salía blanco sobre fondo
   claro y desaparecía. El mundo ya está declarado en cada sección y es el dato
   correcto — el selector de `papel` se conserva porque hay escenas que lo traen. */
.esc[data-ng-tono="papel"] .plx-rot,
.esc[data-hkr6-world="claro"] .plx-rot,
.esc[data-hkr6-world="claro2"] .plx-rot,
.esc[data-hkr6-world="foto-claro"] .plx-rot {
  background: rgba(255, 255, 255, .60);
  border-color: rgba(32, 44, 68, .14);
  color: #2A374F;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plx-rot { background: rgba(14, 23, 37, .70); }
  .esc[data-ng-tono="papel"] .plx-rot,
  .esc[data-hkr6-world="claro"] .plx-rot,
  .esc[data-hkr6-world="claro2"] .plx-rot,
  .esc[data-hkr6-world="foto-claro"] .plx-rot { background: rgba(255, 255, 255, .86); }
}
html.plx-sin-rotulo .plx-rot { opacity: 0; }

/* Pista del atajo de teclado. Vive acá y no en el `<style>` de una página
   porque la usan las seis: en el L2 salió como texto pelado abajo a la
   izquierda, sin pastilla, porque estaba declarada solo en el L1. */
.plx-pista {
  position: absolute; left: 50%; bottom: clamp(12px, 2.2vh, 22px);
  transform: translateX(-50%);
  z-index: var(--hkr6-z-affordance);
  margin: 0;
  font-family: var(--hkr6-font);
  font-size: 11px; letter-spacing: .04em; line-height: 1;
  color: #E7ECF5;
  background: rgba(10, 17, 32, .52);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  pointer-events: none;
}
.plx-pista kbd {
  font: inherit; font-weight: 600;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, .16);
}
/* Es un atajo de TECLADO: en un móvil no tiene ni destinatario ni lugar, y ahí
   se montaba sobre el CTA de la primera escena. */
@media (max-width: 767.98px) { .plx-pista { display: none; } }

/* ------------------------------------------------- 2 · LOS DOS MUNDOS DE FOTO
   tokens.css trae un solo mundo de foto (`foto`), pensado para fotos oscuras:
   anula el neumorfismo (par de sombras a `transparent`) y pone tinta clara.
   El catálogo necesita también el caso contrario —foto de día, tinta oscura—
   porque la mitad de las escenas son claras y la foto es parte del reparto.
   Los dos re-apuntan exactamente los mismos tokens que los mundos de §3 de
   tokens.css: no se inventa un token nuevo, se le da otro valor a los que hay. */

[data-hkr6-world="foto-oscuro"] {
  --hkr6-bg:          var(--hkr6-foto-base);
  --hkr6-ink:         var(--hkr6-ink-d);
  --hkr6-ink-soft:    var(--hkr6-ink-d-soft);
  --hkr6-red-on:      var(--hkr6-red-on-dark);
  --hkr6-sh-d:        transparent;  /* sobre fotografía no hay neumorfismo: hay láminas */
  --hkr6-sh-l:        transparent;
  --hkr6-focus-guard: rgba(0, 0, 0, .55);
  --hkr6-lh-body:     1.7;
}

[data-hkr6-world="foto-claro"] {
  --hkr6-bg:          #C9D3E2;      /* color de carga bajo una foto de día */
  --hkr6-ink:         #202C44;
  --hkr6-ink-soft:    #54617A;
  --hkr6-red-on:      #CA1118;
  --hkr6-sh-d:        transparent;
  --hkr6-sh-l:        transparent;
  --hkr6-focus-guard: rgba(32, 44, 68, .60);
  --hkr6-lh-body:     1.65;
}

/* Velos claros. Los tres velos de hkr-escenas.css están construidos sobre
   `--hkr6-foto-base`, que es navy profundo: sobre una foto de día oscurecen
   justo donde el texto es oscuro y el contraste EMPEORA. Estos son sus
   hermanos en blanco, con la misma geometría. */
.esc__velo--claro-izq {
  background:
    linear-gradient(90deg,
      rgba(233, 237, 244, .90) 0%,
      rgba(233, 237, 244, .66) 38%,
      rgba(233, 237, 244, .14) 72%,
      transparent 100%),
    linear-gradient(180deg, rgba(233, 237, 244, .55) 0%, transparent 22%);
}
.esc__velo--claro-abajo {
  background:
    linear-gradient(180deg,
      rgba(233, 237, 244, .58) 0%,
      rgba(233, 237, 244, .16) 22%,
      rgba(233, 237, 244, .10) 44%,
      rgba(233, 237, 244, .72) 78%,
      rgba(233, 237, 244, .92) 100%);
}
@media (max-width: 900px) {
  .esc__velo--claro-izq {
    background:
      linear-gradient(180deg,
        rgba(233, 237, 244, .74) 0%,
        rgba(233, 237, 244, .86) 55%,
        rgba(233, 237, 244, .95) 100%);
  }
}

/* --------------------------------------------------- 3 · EL LIENZO, CORREGIDO
   `.esc__cont` es ítem de grilla, y el mínimo automático de un ítem de grilla
   es el de su contenido: medía más que la escena que lo contenía y el
   `height:100%` del sistema no ataba nada — el guardián de encaje salía a
   escalar la pieza. Con `min-height:0` manda el alto de la escena.
   Está medido en `_parallax-100\_bitacora.md`, hallazgo 5, donde además dice
   que vale para todo el deck y no solo para la escena donde apareció. */
.esc__cont { min-height: 0; }

/* Variantes de anclaje del bloque de mensaje dentro del lienzo. El sistema
   centra por defecto; algunas composiciones necesitan anclar al pie o al techo,
   y eso es una decisión de composición, no un margen suelto. */
.esc--pie   .esc__cont { align-content: end; }
.esc--techo .esc__cont { align-content: start; }

/* ------------------------------------------------------------ 4 · MATERIAL
   Tres piezas y nada más. Todo el catálogo se construye con estas tres, para
   que 30 secciones distintas sigan siendo el mismo material.

     .plx-placa  sobresale   · sombra abajo-derecha + filo de luz arriba-izquierda
     .plx-pozo   se hunde    · DOS sombras inset (una oscura, una clara)
     .plx-lam    lámina glass· solo donde hay algo detrás que valga la pena ver

   Los valores salen de los pares primitivos de tokens.css, así que cada pieza
   cambia sola de física al cambiar el mundo de su sección. */

.plx-placa {
  position: relative;
  background: var(--hkr6-bg);
  border-radius: var(--hkr6-r-card, 20px);
  box-shadow:
     7px  7px 16px var(--hkr6-sh-d),
    -7px -7px 16px var(--hkr6-sh-l);
}

.plx-pozo {
  position: relative;
  border-radius: var(--hkr6-r-cell, 14px);
  box-shadow:
    inset  5px  5px 11px var(--hkr6-sh-d),
    inset -5px -5px 11px var(--hkr6-sh-l);
}

/* Sobre foto el par de sombras es `transparent` (así lo define el mundo), y una
   placa sin sombras deja de existir. Ahí el material es la LÁMINA: tinta + blur
   + filo de luz en el borde superior, que es lo que hace leer una superficie
   como cristal y no como plástico. */
.plx-lam {
  position: relative;
  background: var(--hkr6-gl-lam, rgba(255, 255, 255, .07));
  border: 1px solid var(--hkr6-gl-line, rgba(255, 255, 255, .16));
  border-radius: var(--hkr6-r-card, 20px);
  box-shadow: var(--hkr6-gl-hl, inset 0 1px 0 rgba(255, 255, 255, .16));
  -webkit-backdrop-filter: var(--hkr6-gl-blur);
  backdrop-filter: var(--hkr6-gl-blur);
}
.plx-lam--clara {
  background: rgba(255, 255, 255, .58);
  border-color: rgba(32, 44, 68, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
  color: var(--hkr6-ink);
}
/* Sin `backdrop-filter` el cristal pasa a tinte SÓLIDO, nunca a nada. Un vidrio
   sin blur y sin tinte es un rectángulo translúcido: se lee como un error. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plx-lam        { background: rgba(16, 26, 44, .78); }
  .plx-lam--clara { background: rgba(247, 249, 253, .93); }
}

/* ------------------------------------------------------------- 5 · UTILIDADES */

/* Medida de lectura. Ninguna columna de texto fuera de 46-62 caracteres. */
.plx-med   { max-width: 54ch; }
.plx-med-s { max-width: 46ch; }

/* Texto solo para lectores de pantalla. Se usa cuando el titular se dibuja por
   otro medio (un calado en SVG, por ejemplo) y el árbol de accesibilidad se
   quedaría sin encabezado. */
.plx-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Surco de 1px: el separador del catálogo. Hundido, nunca una línea pintada. */
.plx-surco-v {
  width: 2px;
  align-self: stretch;
  border-radius: 2px;
  box-shadow:
    inset 1px 0 0 var(--hkr6-sh-d),
    inset -1px 0 0 var(--hkr6-sh-l);
}

/* ------------------------------------------------- 6 · MOVIMIENTO REDUCIDO
   Con `prefers-reduced-motion` no queda ni un transform residual y NADA queda
   escondido: lo que se revelaba con el scroll aparece ya revelado. Un contenido
   que solo existe si hay animación es contenido perdido. */
@media (prefers-reduced-motion: reduce) {
  .plx-rot { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PISO DE 14px PARA EL TEXTO DEL SISTEMA
   --------------------------------------------------------------------------
   Medido a 360x640 en los once cuadernos: el kicker caía a 8,32px, `esc__micro`
   a 8,19 y el lead a 12,29. La causa no es el ancho —las media queries móviles
   ya lo atienden— sino el ALTO: `min(Xvw, Yvh)` en una pantalla de 640 deja
   ganar al término en `vh`, y ese término no tiene piso. En 390x844 no se ve;
   en 360x640 sí, y 360x640 es una de las seis medidas del banco.

   `max(14px, …)` no cambia nada donde el texto ya es grande: solo actúa donde
   iba a colapsar. Va en la capa del catálogo y NO en `hkr-escenas.css` a
   propósito — el mismo colapso existe aguas arriba, en la web real, y tocar el
   sistema por una lección aprendida acá es una decisión que no me corresponde.
   ========================================================================== */
/* EL PISO SUBE A 15px, Y NO ES UN CAPRICHO.
   `encajar()` de `hkr-escenas.js` rescata las escenas que no entran escribiendo
   `transform: scale()` en `.esc__cont`, y `getComputedStyle().fontSize` NO
   refleja las transformaciones de los ancestros: el verificador lee 14px
   mientras la pantalla muestra 12,6. Medido en el banco entero, 24 casos.
   Con el piso en 15px, cualquier escena rescatada hasta `scale 0.934` sigue
   pintando 14px reales. Por debajo de eso el problema no es el piso: es que la
   escena no entra, y se arregla sacándole contenido —que es lo que se hizo con
   PLX-17 y PLX-18—. */
@media (max-width: 760px) {
  .esc .hkr6-lead    { font-size: max(15px, min(3.9vw, 1.92vh)); }
  .esc .hkr6-body,
  .esc__cont p:not([class]) { font-size: max(15px, min(3.4vw, 1.7vh)); }
  .esc .hkr6-kicker  { font-size: max(15px, min(2.6vw, 1.3vh)); }
  .esc__micro        { font-size: max(15px, min(2.9vw, 1.28vh)); }
  .esc .hkr6-btn     { font-size: max(15px, min(3.7vw, 1.8vh)); }
  .esc-card__t       { font-size: max(15px, min(3.7vw, 1.78vh)); }
  .esc-card__d       { font-size: max(15px, min(3.1vw, 1.45vh)); }
  .esc-mapa a        { font-size: max(15px, min(3.4vw, 1.62vh)); }
}
@media (min-width: 760.02px) {
  .esc .hkr6-kicker  { font-size: max(15px, var(--hkr6-fs-micro)); }
  .esc__micro        { font-size: max(15px, min(1.05vw, 1.38vh)); }
  .esc .hkr6-btn     { font-size: max(15px, min(1.5vw, 1.95vh)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PANTALLA CORTA — LA ESCALA CEDE, EL PISO NO
   --------------------------------------------------------------------------
   `hkr-escenas.css` escalona la tipografía por ANCHO (`max-width: 760px`) y eso
   deja fuera el caso que más aprieta: el teléfono BAJO. En 360×640 el lienzo útil
   son 561px y el titular seguía midiendo 81px de alto con su lead de 50 — antes
   de que empiece el dispositivo de la escena. Cinco escenas se recortaban contra
   el borde.
   Acá cede la escala y el interlineado, nunca el piso de 14px: el lineamiento del
   sistema es que cuando el contenido no entra se reduce la ESCALA, y el cuerpo
   legible es el suelo de esa reducción, no parte de ella.
   ========================================================================== */
@media (max-height: 700px) {
  .esc { --u: clamp(4px, .85vh, 8px); }
  .esc__cont { gap: calc(var(--u) * 1.6); }
  .esc .hkr6-display { font-size: max(14px, min(9vw, 5.1vh)); line-height: 1; }
  .esc .hkr6-h2      { font-size: max(14px, min(7.2vw, 4.4vh)); line-height: 1.06; }
  .esc .hkr6-lead    { font-size: max(14px, min(3.4vw, 1.75vh)); line-height: 1.3; }
  .esc .hkr6-kicker  { letter-spacing: .1em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL ANILLO DE FOCO — LA TINTA LA DECIDE EL MUNDO
   --------------------------------------------------------------------------
   Los nueve cuadernos con dispositivo de `<input>`+`<label>` (PLX-13, 16, 17,
   18, 25, 27, 45, 72 y 84) NO cargan `hkr-plx-int.css`, que es la capa de las
   escenas PLX-I. Sus dos tokens de tinta se repiten acá con los mismos valores,
   para que el banco entero tenga una sola ley de foco.

   Lo que NO se repite es el selector: cada una de las nueve escenas dibuja su
   anillo con el suyo, porque cada dispositivo tiene otra etiqueta y otra forma
   —una lama, una ficha del abanico, una pastilla del regulador—. Lo común es la
   tinta; la forma es de cada escena.

   POR QUÉ EL MUNDO CAMBIA LA TINTA, CON EL NÚMERO MEDIDO. Hasta acá las nueve
   pintaban el anillo con `--hkr6-focus-ring` (#DB9737, ámbar). Contra el papel
   del mundo claro (#E9EDF4) ese ámbar mide 2,10:1, y a un indicador de foco
   WCAG 1.4.11 le pide 3:1: en PLX-17, PLX-25, PLX-27 y PLX-45 el anillo se
   dibujaba por debajo del piso. #A00D13 sobre ese mismo papel mide 7,03:1.
   Del lado oscuro #FFB9BD mide 10,9:1 sobre `deep` (#0E1725) y 7,94:1 sobre
   `navy` (#22314F); el ámbar daba 7,32:1 y 5,26:1 —correcto, pero de otra
   familia—. Con un token que conmuta, el mismo gesto se lee igual en las nueve.

   `--plx-foco` viene YA RESUELTO a propósito. Si cada escena tuviera que
   declarar su variante clara aparte, serían dieciocho reglas diciendo lo mismo;
   así cada una escribe `var(--plx-foco)` una sola vez y el mundo hace el resto.
   ========================================================================== */
.esc {
  --int-foco:   #FFB9BD;  /* anillo sobre mundos oscuros · idéntico a hkr-plx-int.css */
  --int-foco-c: #A00D13;  /* anillo sobre mundos claros  · idéntico a hkr-plx-int.css */
  --plx-foco:   var(--int-foco);
}
.esc[data-hkr6-world="claro"],
.esc[data-hkr6-world="claro2"],
.esc[data-hkr6-world="foto-claro"] { --plx-foco: var(--int-foco-c); }