@import url("../fonts/fonts.css");

/* =========================================================================
   ISHEA INSTITUTE — sistema visual
   Dos salas: la sala oscura (por defecto) y el cubo blanco.
   La paleta no es decorativa: el violeta procede de la fluorescencia del NAD(P)H
   (~460 nm) y el ámbar de la del FAD (~525 nm), las dos señales con las que se
   lee el estado energético de una célula viva. Es el tema del archivo.
   ========================================================================= */

:root {
  color-scheme: dark;

  --ink: #06080b;
  --ink-2: #0b0f14;
  --ink-3: #10151c;
  --line: #1b222c;
  --line-soft: #141a22;
  --ice: #e9eef3;
  --ice-2: #b6c1cd;
  --ice-dim: #7b8795;
  --nadh: #7c93ff;
  --fad: #f2b33d;
  --field: rgba(124, 147, 255, 0.5);

  --surface: var(--ink-2);
  --hairline: var(--line);

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: clamp(1rem, 0.35vw + 0.94rem, 1.115rem);
  --step-1: clamp(1.15rem, 0.6vw + 1.03rem, 1.4rem);
  --step-2: clamp(1.45rem, 1.4vw + 1.15rem, 2.05rem);
  --step-3: clamp(1.85rem, 2.8vw + 1.25rem, 3.1rem);
  --step-4: clamp(2.3rem, 5vw + 1.2rem, 4.6rem);
  --step-5: clamp(2.9rem, 8vw + 1rem, 7.2rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --shell: 1380px;
  --measure: 68ch;
  --section: clamp(4.5rem, 11vh, 9rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 0.9s;
}

:root[data-room="white"] {
  color-scheme: light;

  --ink: #f2f3f5;
  --ink-2: #fbfbfc;
  --ink-3: #ffffff;
  --line: #d8dce1;
  --line-soft: #e6e9ec;
  --ice: #0a0d12;
  --ice-2: #38414d;
  /* 4.53:1 sobre #f2f3f5 — el tono anterior (#6b7684) se quedaba en 4.16:1. */
  --ice-dim: #66707d;
  --nadh: #3a4fd8;
  --fad: #9a6a04;
  --field: rgba(58, 79, 216, 0.4);
}

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

/* Regla de autor: sin ella, cualquier `display` que declaremos gana al
   `[hidden] { display: none }` de la hoja del navegador y el atributo deja de
   ocultar nada. Es lo que usan los filtros de la galería. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--ice);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--nadh);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--nadh);
  color: var(--ink);
}

/* ---------- utilidades ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--nadh);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.skip:focus {
  top: 0.75rem;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin: 0 0 1.4rem;
}

.eyebrow--accent {
  color: var(--nadh);
}

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

/* ---------- cabecera ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 68px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.05;
  margin-right: auto;
}

.wordmark__text {
  display: flex;
  flex-direction: column;
}

.wordmark__mark {
  width: auto;
  height: 40px;
  flex: none;
}

/* Cada sala enseña su versión del logotipo. */
.wordmark__mark--light,
:root[data-room="white"] .wordmark__mark--dark {
  display: none;
}

:root[data-room="white"] .wordmark__mark--light {
  display: block;
}

.colophon__logo {
  width: 220px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.1rem;
}

.gateway__logo {
  width: min(340px, 78vw);
  height: auto;
  margin: 0 auto 1.8rem;
}

.wordmark__name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.wordmark__owner {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ice-dim);
  letter-spacing: 0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
}

.nav a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-2);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ice);
  border-bottom-color: var(--nadh);
}

.tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.langs {
  display: flex;
  gap: 0.15rem;
  border: 1px solid var(--line);
  padding: 0.15rem;
}

.langs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  color: var(--ice-dim);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.langs a:hover {
  color: var(--ice);
}

.langs a[aria-current="true"] {
  background: var(--ice);
  color: var(--ink);
}

.room-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice-dim);
  border: 1px solid var(--line);
  padding: 0.42rem 0.75rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.room-toggle:hover {
  color: var(--ice);
  border-color: var(--ice-dim);
}

.nav-toggle {
  display: none;
}

/* ---------- entrada / hero ---------- */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 14vh, 8rem);
  width: 100%;
}

.hero__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-5);
  font-weight: 350;
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 16ch;
  text-wrap: balance;
}

.hero__lede {
  max-width: 46ch;
  color: var(--ice-2);
  font-size: var(--step-1);
  line-height: 1.55;
  margin: 0 0 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--ice);
  color: var(--ice);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn:hover {
  background: var(--ice);
  color: var(--ink);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--ice-2);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--ice);
  color: var(--ice);
}

.btn__arrow {
  transition: transform 0.3s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* ---------- escalas ---------- */

.scales {
  border-bottom: 1px solid var(--line-soft);
}

.scales__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.scale {
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  padding-right: clamp(1rem, 3vw, 3rem);
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  position: relative;
}

.scales__grid > .scale:first-child {
  border-left: 0;
  padding-left: 0;
}

.scale__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

.scale__index {
  position: absolute;
  top: clamp(2rem, 4vw, 3.25rem);
  right: clamp(1rem, 3vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--nadh);
  letter-spacing: 0.14em;
}

.scale p {
  margin: 0;
  color: var(--ice-dim);
  font-size: 0.95rem;
  max-width: 34ch;
}

/* ---------- secciones ---------- */

.section {
  padding-block: var(--section);
  border-bottom: 1px solid var(--line-soft);
}

.section--flush {
  padding-bottom: 0;
  border-bottom: 0;
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 350;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.section__lede {
  max-width: 42ch;
  color: var(--ice-dim);
  margin: 0;
  font-size: 1rem;
}

/* ---------- cartela: la etiqueta de museo ---------- */

.cartela {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ice-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 0.85rem;
  margin: 0;
}

/* La etiqueta se distingue por caja y espaciado, no por transparencia: bajar la
   opacidad la sacaba del contraste mínimo. */
.cartela dt {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.cartela dd {
  margin: 0;
  color: var(--ice-2);
}

.cartela--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  border-top: 0;
  padding-top: 0;
}

.cartela--inline span::after {
  content: "·";
  margin-left: 1.1rem;
  opacity: 0.4;
}

.cartela--inline span:last-child::after {
  content: "";
}

/* ---------- pieza destacada ---------- */

.featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* El título estira su enlace por toda la pieza; los enlaces reales que hay
   dentro de la cartela (el DOI) se levantan por encima para seguir siendo
   pulsables. */
.featured__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.featured .cartela a {
  position: relative;
  z-index: 1;
}

.featured__frame {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--ink-3);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.featured__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.featured:hover .featured__frame img {
  transform: scale(1.03);
}

.featured__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.featured__excerpt {
  color: var(--ice-2);
  margin: 0 0 1.8rem;
  max-width: 46ch;
}

/* ---------- salas / colecciones ---------- */

.rooms {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.room {
  background: var(--ink);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 260px;
  transition: background 0.4s var(--ease);
}

.room:hover {
  background: var(--ink-2);
}

.room__code {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--nadh);
}

.room__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

.room__tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ice-2);
  margin: -0.5rem 0 0;
}

.room__blurb {
  color: var(--ice-dim);
  font-size: 0.94rem;
  margin: 0;
}

.room__count {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice-dim);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.room__count::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* ---------- retícula de piezas ---------- */

.pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.piece {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  gap: 1rem;
  position: relative;
  transition: background 0.45s var(--ease);
}

.piece:hover {
  background: var(--ink-2);
}

.piece__frame {
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  position: relative;
}

/* En la retícula la figura funciona como imagen: se encuadra llena. Entera,
   con sus ejes y leyendas legibles, se ve en la ficha de la obra. */
.piece__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--ink-3);
  transition: transform 1s var(--ease), opacity 0.6s var(--ease);
}

.piece:hover .piece__frame img {
  transform: scale(1.04);
}

/* Piezas sin imagen: se dibuja un "espectro" a partir de su sala. */
.piece__spectrum {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--nadh) 22%, transparent) 0 1px,
      transparent 1px 7px
    ),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  opacity: 0.55;
  transition: opacity 0.6s var(--ease);
}

.piece:hover .piece__spectrum {
  opacity: 0.85;
}

.piece__code {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--ice-dim);
}

.piece__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

.piece__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.piece__excerpt {
  color: var(--ice-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.room--all {
  justify-content: flex-end;
}

.room--all .room__name {
  font-size: var(--step-3);
}

.piece__foot {
  margin-top: auto;
  padding-top: 0.9rem;
}

.piece--tall .piece__frame {
  aspect-ratio: 3 / 4;
}

/* ---------- filtros de la galería ---------- */

.filters {
  display: grid;
  gap: 1.4rem;
  margin-bottom: 2.5rem;
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}

.filters__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-dim);
  min-width: 5.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-dim);
  border: 1px solid var(--line);
  padding: 0.38rem 0.8rem;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

/* El recuento va en un tono propio, no en opacidad: mezclarlo con el fondo lo
   dejaba por debajo del contraste legible en las dos salas. */
.chip__count {
  color: var(--ice-dim);
  font-variant-numeric: tabular-nums;
}

.chip[aria-pressed="true"] .chip__count {
  color: var(--ink-3);
}

.chip:hover {
  color: var(--ice);
  border-color: var(--ice-dim);
}

.chip[aria-pressed="true"] {
  background: var(--ice);
  border-color: var(--ice);
  color: var(--ink);
}

.search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
  max-width: 30rem;
}

.search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--ice);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.35rem 0;
}

/* El botón que abre la lámina a pantalla completa no debe parecer un botón:
   hereda la caja de la figura y sólo aporta el foco y el teclado. */
.plate__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.search input::placeholder {
  color: var(--ice-dim);
}

.search input:focus {
  outline: none;
}

.search:focus-within {
  border-bottom-color: var(--nadh);
}

.results-count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-dim);
}

.empty {
  padding: 4rem 0;
  color: var(--ice-dim);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

/* ---------- página de pieza ---------- */

.work {
  padding-block: clamp(2.5rem, 6vh, 5rem) var(--section);
}

.work__head {
  max-width: 62rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.work__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 350;
  line-height: 1.03;
  letter-spacing: -0.028em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.work__standfirst {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--ice-2);
  max-width: 40ch;
  margin: 0 0 2rem;
}

.work__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Sin `min-width: 0` un hijo de rejilla no baja de su ancho mínimo de
   contenido, y una fórmula larga o un DOI empujan la página fuera del
   viewport en móvil. */
.work__layout > *,
.work__aside > * {
  min-width: 0;
}

.work__aside {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 2rem;
}

.prose {
  max-width: var(--measure);
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--ice-2);
  /* Los cuerpos traen DOIs, URLs y fórmulas sin espacios: sin esto se salen. */
  overflow-wrap: break-word;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display);
  color: var(--ice);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  text-wrap: balance;
}

.prose h1 {
  font-size: var(--step-3);
}
.prose h2 {
  font-size: var(--step-2);
}
.prose h3 {
  font-size: var(--step-1);
}
.prose h4 {
  font-size: var(--step-0);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice-dim);
}

.prose a {
  color: var(--ice);
  border-bottom: 1px solid var(--nadh);
  transition: background 0.25s var(--ease);
}

.prose a:hover {
  background: color-mix(in srgb, var(--nadh) 18%, transparent);
}

.prose strong {
  color: var(--ice);
  font-weight: 600;
}

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.5rem;
  border-left: 1px solid var(--nadh);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ice);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-3);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

.prose pre {
  background: var(--ink-3);
  border: 1px solid var(--hairline);
  padding: 1.1rem;
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose img {
  width: 100%;
  border: 1px solid var(--hairline);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin-block: 2.5em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  display: block;
  overflow-x: auto;
}

.prose th,
.prose td {
  border: 1px solid var(--hairline);
  padding: 0.55rem 0.75rem;
  text-align: left;
}

.prose th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice-dim);
}

/* ---------- materiales y galería de imágenes ---------- */

.materials {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.material {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-width: 0;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-2);
  overflow-wrap: anywhere;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.material:hover {
  color: var(--ice);
  padding-left: 0.4rem;
}

.material__ext {
  color: var(--nadh);
  text-transform: uppercase;
  min-width: 3.2rem;
}

.material__size {
  margin-left: auto;
  color: var(--ice-dim);
}

.plates {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  margin-top: 2.5rem;
}

.plate {
  border: 1px solid var(--hairline);
  background: var(--ink-3);
  overflow: hidden;
}

.plate img {
  width: 100%;
  height: auto;
  background: #fff;
  transition: transform 0.8s var(--ease);
}

.plate:hover img {
  transform: scale(1.02);
}

/* ---------- retrato del investigador ---------- */

.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.bio__portrait {
  position: sticky;
  top: 96px;
  border: 1px solid var(--hairline);
  background: var(--ink-2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.4rem;
}

.bio__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

.bio__role {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--nadh);
  letter-spacing: 0.06em;
  margin: 0;
}

.linklist {
  display: grid;
  gap: 0;
}

.linklist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-2);
  transition: color 0.25s var(--ease);
}

.linklist a:hover {
  color: var(--nadh);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ice-dim);
  border: 1px solid var(--line);
  padding: 0.25rem 0.55rem;
}

/* ---------- notas / diario ---------- */

.notes {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.note {
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  transition: background 0.4s var(--ease);
}

.note:hover {
  background: var(--ink-2);
}

.note__media {
  border: 1px solid var(--line-soft);
  background: var(--ink-3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.note__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note__body p {
  color: var(--ice-2);
  margin: 0 0 1rem;
  white-space: pre-line;
}

/* ---------- proyección ---------- */

.screen {
  border: 1px solid var(--hairline);
  background: var(--ink-3);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- paginación entre piezas ---------- */

.pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  margin-top: var(--section);
}

.pager a {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: 0.5rem;
  transition: background 0.4s var(--ease);
}

.pager a:hover {
  background: var(--ink-2);
}

.pager__dir {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-dim);
}

.pager__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--ice);
}

.pager a:last-child {
  text-align: right;
}

/* ---------- pie ---------- */

.colophon {
  padding-block: clamp(3rem, 7vh, 5rem);
  color: var(--ice-dim);
}

.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.colophon h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin: 0 0 1rem;
  font-weight: 500;
}

.colophon__note {
  font-size: 0.85rem;
  max-width: 52ch;
  margin: 0 0 0.5rem;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line-soft);
}

.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--ice);
  display: block;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-dim);
}

/* ---------- selector de idioma de entrada ---------- */

.gateway {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--gutter);
}

.gateway__langs {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.gateway__langs a {
  background: var(--ink);
  padding: 1.6rem 2.2rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  transition: background 0.3s var(--ease);
}

.gateway__langs a:hover {
  background: var(--ink-2);
  color: var(--nadh);
}

/* ---------- índice de coherencia ---------- */

.formula {
  border: 1px solid var(--hairline);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1rem;
}

.formula__eq {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0;
}

.formula__eq > span:first-child {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  color: var(--nadh);
}

.formula__num,
.formula__den {
  display: block;
}

.formula__bar {
  flex: 0 0 auto;
  width: 100%;
  max-width: 22rem;
  height: 1px;
  background: var(--ice-dim);
  order: 0;
}

.formula__note {
  margin: 0;
  color: var(--ice-dim);
  font-size: 0.95rem;
  max-width: 60ch;
}

.tracks {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.track {
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: 0.6rem;
  text-align: left;
  align-content: start;
  min-height: 190px;
  transition: background 0.35s var(--ease);
}

.track:hover {
  background: var(--ink-2);
}

.track[aria-pressed="true"] {
  background: var(--ink-3);
  box-shadow: inset 3px 0 0 var(--nadh);
}

.track__scale {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--nadh);
}

.track__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.12;
}

.track__tagline {
  color: var(--ice-dim);
  font-size: 0.94rem;
}

.quiz {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.quiz__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.quiz__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 350;
  margin: 0;
}

.quiz__lema {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ice-2);
  margin: 0.2rem 0 0;
}

.quiz__progress {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-dim);
  margin: 0;
}

.quiz__legend-note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-dim);
  margin: 1.5rem 0 0;
}

.quiz__item {
  border-top: 1px solid var(--line-soft);
  margin: 0;
  padding: 1.6rem 0;
  display: grid;
  gap: 1.1rem;
}

.quiz__ask {
  font-size: var(--step-1);
  line-height: 1.4;
  margin: 0;
  padding: 0;
  max-width: 62ch;
  text-indent: -2.6rem;
  padding-left: 2.6rem;
}

.quiz__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--nadh);
  margin-right: 0.6rem;
}

.quiz__scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 44rem;
}

.quiz__opt {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.3rem;
  border: 1px solid var(--line);
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.quiz__opt:hover {
  border-color: var(--ice-dim);
}

.quiz__opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.quiz__dot {
  width: 12px;
  height: 12px;
  border: 1px solid var(--ice-dim);
  border-radius: 50%;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.quiz__opt input:checked ~ .quiz__dot {
  background: var(--nadh);
  border-color: var(--nadh);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nadh) 25%, transparent);
}

.quiz__opt input:focus-visible ~ .quiz__dot {
  outline: 2px solid var(--nadh);
  outline-offset: 3px;
}

.quiz__opt:has(input:checked) {
  border-color: var(--nadh);
  background: color-mix(in srgb, var(--nadh) 8%, transparent);
}

.quiz__legend {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--ice-dim);
  text-align: center;
}

.quiz__form {
  border-top: 1px solid var(--hairline);
  margin-top: 2rem;
  padding-top: 2rem;
  display: grid;
  /* La columna se fija al ancho disponible: sin esto, el ancho mínimo de los
     tres campos empujaba el formulario fuera de la pantalla en móvil. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  justify-items: start;
}

.quiz__form h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  margin: 0;
}

.quiz__fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  width: 100%;
  min-width: 0;
  max-width: 52rem;
}

.quiz__fields label {
  display: grid;
  gap: 0.4rem;
}

.quiz__fields span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice-dim);
}

.quiz__fields input {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ice);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0;
  min-height: 44px;
}

.quiz__fields input:focus {
  outline: none;
  border-bottom-color: var(--nadh);
}

.quiz__missing {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fad);
  margin: 0;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- el informe ---------- */

.report {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--hairline);
}

.report__flash {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 0.7rem;
  border-left: 4px solid var(--ice-dim);
}

.report__flash--verde { border-left-color: #4ba97a; }
.report__flash--ambar { border-left-color: var(--fad); }
.report__flash--rojo  { border-left-color: #d4614e; }

.report__state {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ice);
}

.report__index {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 0.9;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.report__index small {
  font-size: var(--step-1);
  color: var(--ice-dim);
}

.report__note {
  margin: 0;
  color: var(--ice-2);
  font-size: var(--step-1);
  max-width: 60ch;
}

.report__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-soft);
}

.report__body > section {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.report__body h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin: 0;
  font-weight: 500;
}

.metric {
  display: grid;
  gap: 0.35rem;
}

.metric__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-2);
}

.metric__val {
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}

.metric__track {
  height: 3px;
  background: var(--line);
}

.metric__track span {
  display: block;
  height: 100%;
  background: var(--nadh);
}

.metric:last-of-type .metric__track span {
  background: var(--fad);
}

.report__leak {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--ice);
  margin: 0;
}

.report__hint {
  color: var(--ice-dim);
  font-size: 0.875rem;
  margin: 0;
  max-width: 56ch;
}

.report__disclaimer {
  margin-top: 1rem;
  font-size: 0.8125rem;
}

.report__plan {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ice-2);
  display: grid;
  gap: 0.6rem;
}

.report__foot {
  border-top: 1px solid var(--hairline);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  align-items: start;
}

.report__foot > * {
  min-width: 0;
}

.report__qr {
  width: clamp(120px, 22vw, 170px);
  background: #fff;
  padding: 8px;
  border: 1px solid var(--hairline);
}

.report__qr svg {
  width: 100%;
  height: auto;
  display: block;
}

.report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.1rem;
}

@media (max-width: 640px) {
  .quiz__scale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .quiz__legend {
    font-size: 0.5625rem;
  }

  .report__foot {
    grid-template-columns: 1fr;
  }
}

/* ---------- firma de coherencia ---------- */

.signature {
  border: 1px solid var(--hairline);
  background: var(--ink-3);
  overflow: hidden;
}

.signature img {
  width: 100%;
  height: clamp(180px, 26vw, 300px);
  object-fit: cover;
  object-position: center;
}

/* Una imagen prestada del archivo se muestra más contenida que una figura
   propia: acompaña a la obra, no la ilustra. */
.signature--borrowed img {
  height: clamp(150px, 20vw, 240px);
}

.signature--borrowed figcaption em {
  color: var(--ice-2);
  font-family: var(--font-display);
}

.signature figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ice-dim);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line-soft);
}

/* ---------- lupa sobre las láminas ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: lightbox-in 0.35s var(--ease);
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--hairline);
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-plate] {
  cursor: zoom-in;
}

/* ---------- revelado al entrar en pantalla ---------- */

/* El estado oculto sólo existe cuando hay JS para deshacerlo: sin script, la
   página se lee entera. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .featured,
  .bio,
  .work__layout {
    grid-template-columns: 1fr;
  }

  .work__aside,
  .bio__portrait {
    position: static;
  }

  .note {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .masthead__inner {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding-block: 0.75rem;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    padding: 0.42rem 0.9rem;
    color: var(--ice-dim);
  }

  .nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    display: none;
    border-top: 1px solid var(--line-soft);
    padding-top: 0.5rem;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    width: 100%;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line-soft);
  }

  .scales__grid > .scale {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .scales__grid > .scale:first-child {
    border-top: 0;
  }

  .pager a:last-child {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .masthead,
  .hero__field,
  .pager,
  .filters {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ---------- registro del informe ---------- */

.quiz__check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 52rem;
  min-height: 44px;
  cursor: pointer;
  color: var(--ice-2);
  font-size: 0.94rem;
}

.quiz__check input {
  width: 18px;
  height: 18px;
  margin-top: 0.28rem;
  accent-color: var(--nadh);
  flex: 0 0 auto;
}

.quiz__status {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice-dim);
  border-left: 2px solid var(--nadh);
  padding-left: 0.9rem;
  margin: 1.5rem 0 0;
}

/* ---------- beta, arquitectura, descargo y cookies ---------- */

.beta {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fad);
  border: 1px solid var(--fad);
  padding: 0.22rem 0.5rem;
  margin-left: 0.6rem;
  transform: translateY(-0.35em);
}

.beta-note {
  border-left: 2px solid var(--fad);
  padding-left: 1rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  max-width: 62ch;
  color: var(--ice-2);
  font-size: 0.94rem;
}

.engine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.engine__core,
.engine__modules {
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.engine__name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--nadh);
  margin: 0;
}

.engine__role {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  margin: 0.4rem 0 1.6rem;
}

.engine__parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.engine__parts li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.92rem;
  color: var(--ice-dim);
}

.engine__parts span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ice);
  min-width: 7.5rem;
}

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-bottom: 1.8rem;
}

.module {
  background: var(--ink);
  padding: 1.1rem;
  display: grid;
  gap: 0.3rem;
  align-content: start;
}

.module__name {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--ice);
  margin: 0;
}

.module__role {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ice-dim);
}

.module--soon {
  opacity: 0.72;
}

.module__soon {
  margin: 0.3rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fad);
}

.lex {
  border-top: 1px solid var(--hairline);
  padding-top: 1.4rem;
}

.lex__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin: 0 0 0.5rem;
}

.lex__body {
  margin: 0;
  color: var(--ice-dim);
  font-size: 0.92rem;
  max-width: 58ch;
}

.disclaimer {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ice-dim);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.disclaimer__title,
.report__disclaimer-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin: 0 0 0.6rem;
}

.disclaimer__body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ice-dim);
  max-width: 88ch;
}

.report__disclaimer {
  margin-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1rem;
}

.report__disclaimer p:last-child {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ice-dim);
}

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--ink-2) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  animation: cookies-in 0.5s var(--ease);
}

.cookies__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding-block: 1.1rem;
}

.cookies__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin: 0 0 0.35rem;
}

.cookies__body {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ice-2);
  max-width: 76ch;
}

.cookies__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

@keyframes cookies-in {
  from {
    transform: translateY(100%);
  }
}

@media (max-width: 860px) {
  .engine {
    grid-template-columns: 1fr;
  }
}

/* ---------- consentimiento ---------- */

.consent {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--nadh);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: grid;
  gap: 0.7rem;
  max-width: 52rem;
  width: 100%;
}

.consent__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nadh);
  margin: 0;
}

.consent__detail {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ice-dim);
}

.consent__hint {
  color: var(--fad);
  border-top: 1px solid var(--line-soft);
  padding-top: 0.7rem;
}