/* ============================================================
   franbencosme.com — main.css
   Reescrito entero el 28 ago 2026.

   POR QUÉ SE REESCRIBIÓ, Y NO SE PARCHEÓ
   El archivo anterior eran diez capas fechadas (v6 … v13) apiladas: 89
   de 328 selectores declarados más de una vez, `#about .plate-portrait`
   once veces, `--transit` tres veces. Para saber cómo se veía una
   sección había que leer once bloques y resolver la cascada de cabeza.
   Añadir una capa v14 era repetir el error que ya mató este proyecto.

   LA REGLA DE ESTE ARCHIVO
   Una sola declaración por selector fuera de una @media. Cada sección
   lleva sus propias media queries DENTRO de su bloque: no hay
   cementerio de @media al final. `check.js` §12 lo vigila y falla si
   alguien vuelve a apilar.

   ORDEN — el mismo que el DOM, a propósito:
     1 fuentes · 2 tokens · 3 base · 4 campo · 5 nav y mapa
     6 andamiaje de estrellas · 7 tipografía · 8 hero · 9 tránsito
     10 prueba · 11 trabajo · 12 tesis · 13 quién y cómo · 14 preguntas
     15 contacto y pie · 16 luna (casos y ensayos) · 17 utilidades
   ============================================================ */

/* ---------- 1. FUENTES ---------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- 2. TOKENS ----------
   LA PALETA BETELGEUSE (orden de Fran, 27 ago 2026):
     Cosmic Black #090606 · Ember #D83A2E · Solar Orange #F5822A
     Radiant Gold #FFC53D · Star White #FFF2BF
   El azul señal no existe. `check.js` lo vigila.
   `--accent-text` lo reescribe `blendLight()` estrella a estrella; el
   valor de aquí es la sujeción antes del primer frame. */

:root {
  --bg:        #090606;
  --ink:       #F4F6FA;
  --ink-2:     #99A0AF;
  --ink-3:     #6C7382;
  --line:      #23282F;
  --line-2:    #333A42;
  --signal:    #D83A2E;
  --signal-hi: #F5822A;
  --halo:      #FFC53D;
  --accent-text: #FFC53D;

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  /* El tránsito entre estrellas. UNA declaración; la variante estrecha
     vive en su media query ocho líneas más abajo, y no en la línea 1668
     como en el archivo anterior. */
  --transit: 7vh;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --col: min(74rem, 100%);

  /* D1 y D2 — el techo de una portada.
     El material fuente tope del repositorio es 1920x1080 y las portadas se
     exportan a 1400 de ancho (`tools/covers.js`). A 29rem = 464 px CSS eso
     da 3,0x: muy por encima del mínimo de 2x que exige D2 y muy por debajo
     del techo de 960 px de D1. Es también la respuesta medida a «el
     contenedor sobredimensionado no me da ganas de scrolear». */
  --cover: 26rem;

  --nav-h:  clamp(3.5rem, 8vh, 5rem);
  --foot-h: clamp(2.5rem, 6vh, 3.75rem);

  --eos-cold: 61 17 12;
  --eos-warm: 22 17 14;
}

@media (max-width: 780px) {
  :root { --transit: 5vh; }
}

/* ---------- 3. BASE ---------- */

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

html { overflow-x: hidden; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; }

::selection { background: rgb(216 58 46 / 0.32); color: #fff; }

:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; }

/* ---------- 4. EOS: EL CAMPO ----------
   La profundidad no se pinta: se construye con escala y con dos
   temperaturas en tensión. Los polos desbordan la pantalla a propósito:
   un degradado que cabe entero se lee como mancha; uno que desborda se
   lee como distancia. */

.eos {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw;
  pointer-events: none; overflow: hidden;
  background: radial-gradient(130% 115% at 50% 44%,
    rgb(0 0 0 / 0) 52%, rgb(0 0 0 / 0.45) 82%, rgb(0 0 0 / 0.85) 100%);
}

.eos-pole { position: absolute; top: 0; left: 0; border-radius: 50%; }

.eos-cold {
  width: 1700px; height: 1700px; margin: -850px 0 0 -850px;
  background: radial-gradient(circle closest-side,
    rgb(var(--eos-cold) / 0.45) 0%, rgb(var(--eos-cold) / 0.29) 34%,
    rgb(var(--eos-cold) / 0.13) 64%, rgb(var(--eos-cold) / 0) 84%);
}

.eos-warm {
  width: 1600px; height: 1600px; margin: -800px 0 0 -800px;
  background: radial-gradient(circle closest-side,
    rgb(var(--eos-warm) / 0.5) 0%, rgb(var(--eos-warm) / 0.32) 36%,
    rgb(var(--eos-warm) / 0.14) 66%, rgb(var(--eos-warm) / 0) 86%);
}

.field { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100%; pointer-events: none; }
.guide { position: fixed; inset: 0; z-index: 6; width: 100vw; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .eos-cold { transform: translate3d(50vw, 44vh, 0) scale(1); }
  .eos-warm { transform: translate3d(72vw, 78vh, 0) scale(1); }
}

/* ---------- 5. NAV Y MAPA ----------
   REFERENCIAS.md §2.6: el escáner de treinta segundos no debe tener que
   descifrar un glifo de constelación para encontrar «Contacto». El cielo
   sigue siendo el mapa, pero Trabajo y Contacto son PALABRAS visibles. */

.sky-nav {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.8rem, 2.2vw, 1.5rem) var(--pad);
}

.wordmark {
  font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}

.signal { color: var(--signal); font-size: 1.45em; line-height: 0; }

.sky-nav-right { display: flex; align-items: center; gap: clamp(0.7rem, 1.7vw, 1.4rem); }

.nav-link {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: color 160ms linear;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); }

.nav-link-cta {
  color: var(--signal-hi);
  padding: 0.3rem 0.75rem;
  border: 1px solid rgb(216 58 46 / 0.5);
  border-radius: 2px;
}
.nav-link-cta:hover, .nav-link-cta:focus-visible { border-color: var(--signal); }

.lang-trigger {
  display: inline-flex; align-items: center;
  color: var(--ink-2); text-decoration: none;
  font-family: var(--body); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-left: clamp(0.55rem, 1.3vw, 1rem);
  border-left: 1px solid var(--line-2);
  transition: color 160ms linear;
}
.lang-trigger:hover, .lang-trigger:focus-visible { color: var(--ink); }

.map-trigger {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: 0; padding: 0.25rem;
  cursor: pointer; color: var(--ink-2);
  font-family: var(--body); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 160ms linear;
}
.map-trigger:hover, .map-trigger:focus-visible { color: var(--ink); }
.map-trigger svg { width: 13px; height: 18px; fill: currentColor; }

.sky-map {
  position: fixed; inset: 0; z-index: 20;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1.25rem, 3.4vh, 2.5rem);
  padding: var(--nav-h) var(--pad);
  background: rgb(9 6 6 / 0.94);
  backdrop-filter: blur(14px);
}
.sky-map[hidden] { display: none; }

.map-close {
  position: absolute; top: var(--pad); right: var(--pad);
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font-family: var(--body);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.map-close:hover { color: var(--ink); }

.map-title { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.map-foot  { margin: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-3); }

.map-stars { display: grid; gap: clamp(0.35rem, 1.2vh, 0.8rem); justify-items: center; }
.map-stars a { display: grid; justify-items: center; gap: 0.2rem; text-decoration: none; padding: 0.3rem 1rem; }
.map-stars span {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  letter-spacing: -0.032em; line-height: 1; color: var(--ink);
  transition: color 160ms linear;
}
.map-stars em { font-style: normal; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.map-stars a:hover span, .map-stars a:focus-visible span { color: var(--signal-hi); }

@media (max-width: 620px) {
  .sky-nav-right { gap: 0.5rem; }
  .nav-link { font-size: 11px; letter-spacing: 0.05em; }
  .nav-link-cta { padding: 0.28rem 0.5rem; }
  .lang-trigger { font-size: 11px; letter-spacing: 0.05em; padding-left: 0.5rem; }
  .map-trigger-label { display: none; }
  .wordmark { font-size: 11px; }
}

/* ---------- 6. ANDAMIAJE DE ESTRELLAS ----------
   El NÚCLEO es lo que llega, se transforma y recibe a Betel. El DETALLE
   lleva el contenido denso y NO se transforma nunca: el texto que hay que
   leer no se mueve. Ese contrato es del motor y se queda tal cual. */

.trayecto { position: relative; z-index: 4; }

.star { position: relative; }

.star-core {
  position: relative;
  display: grid;
  align-content: start;
  width: var(--col);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 1.5vh) var(--pad) clamp(1rem, 2.4vh, 1.75rem);
}

.star-detail {
  width: var(--col);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.helios .star-core { will-change: transform, opacity; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .star-core, .kicker, .magnitude-1, .body { transform: none !important; }
}

/* ---------- 7. TIPOGRAFÍA ---------- */

.kicker {
  margin: 0 0 clamp(0.6rem, 1.4vw, 1rem);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}

.magnitude-1 {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  font-size: min(clamp(2rem, 1rem + 5vw, 5rem), 12.5svh);
  letter-spacing: -0.032em; line-height: 0.94;
}

.nb { white-space: nowrap; }

.body {
  margin: clamp(0.7rem, 1.4vw, 1rem) 0 0;
  font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 58ch;
}
.body p { margin: 0 0 0.65em; }
.body p:last-child { margin-bottom: 0; }
.body a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.body a:hover { border-color: var(--ink); }
.body-narrow { max-width: 48ch; }

/* La palabra acentuada. Una por párrafo. El peso lleva el énfasis y el
   color lleva la identidad de la estrella (`--accent-text`, que escribe
   el motor). A tamaño de texto el Ember queda bajo 4,5:1: por eso el
   naranja y no el rojo. */
.stress { font-weight: 600; color: var(--accent-text); }

/* EL PUNTO. No cierra: apunta. Es LA MISMA COSA que Betel, no su
   destino: un elemento del DOM no puede desalinearse consigo mismo. */
.point {
  display: inline-block;
  width: 0.18em; height: 0.18em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.22;
  vertical-align: baseline;
  transform: scale(1);
  transition: opacity 200ms linear,
              background-color 260ms cubic-bezier(.2,.7,.3,1),
              transform 240ms cubic-bezier(.34,1.42,.5,1),
              box-shadow 240ms cubic-bezier(.34,1.42,.5,1);
}
.point.active {
  opacity: 1;
  background: radial-gradient(circle,
    #FFF2BF 0%, #F5822A 30%, #D83A2E 62%, #6E1A12 88%, #090606 100%);
  transform: scale(1.06);
  box-shadow: 0 0 0 min(0.06em, 2px) rgb(216 58 46 / 0.16),
              0 0 0 min(0.09em, 3.5px) rgb(216 58 46 / 0.32);
}
.point.placed {
  opacity: 1;
  background: #7E2218;
  transform: scale(1);
  box-shadow: 0 0 0 0 rgb(216 58 46 / 0);
  transition: opacity 200ms linear, background-color 420ms linear,
              transform 380ms cubic-bezier(.2,.7,.3,1),
              box-shadow 380ms cubic-bezier(.2,.7,.3,1);
}
html:not(.helios) .point { opacity: 1; }

/* Los botones. Se escriben enteros, sin regla base compartida: la regla
   de este archivo es UNA declaración por selector, y un bloque
   `.cta-main, .cta-alt` más un `.cta-main` aparte ya son dos. Esa grieta
   es por donde entraron las diez capas del archivo anterior. */
.cta-main {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.4rem;
  font-family: var(--body); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px; background: none;
  color: var(--ink); border: 1px solid var(--signal);
  transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}
.cta-main:hover, .cta-main:focus-visible { background: var(--signal); color: #fff; }

.cta-alt {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.4rem;
  font-family: var(--body); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px; background: none;
  color: var(--ink-2); border: 1px solid var(--line-2);
  transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}
.cta-alt:hover, .cta-alt:focus-visible { color: var(--ink); border-color: var(--ink-2); }

/* El enlace de texto con subrayado propio: el CTA menor del sitio. */
.work-cta { margin: clamp(0.8rem, 1.6vw, 1.1rem) 0 0; }
.work-cta a {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal-hi); text-decoration: none;
  border-bottom: 1px solid rgb(245 130 42 / 0.4);
  padding-bottom: 0.2rem;
  transition: border-color 160ms linear;
}
.work-cta a:hover, .work-cta a:focus-visible { border-color: var(--signal-hi); }

@media (prefers-reduced-motion: reduce) {
  .point { transition: none; transform: none; }
}

/* ---------- 8. HERO (Betelgeuse) ----------
   El monumento, y DEBAJO, sin scroll, la frase llana con la prueba
   dentro y dos salidas. GUION.md §1. Es la única estrella que se queda
   con la pantalla entera: es el test de los cinco segundos. */

#hero .star-core {
  min-height: 100lvh;
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(0.9rem, 2vw, 1.75rem);
}

.kicker-vertical {
  grid-column: 1; grid-row: 1 / span 5;
  writing-mode: vertical-rl; transform: rotate(180deg);
  margin: 0; justify-self: start; align-self: center; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}

.overflow-mass { grid-column: 2; }

.qualifier {
  display: block;
  font-size: 0.29em; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.2; color: var(--ink-2);
  margin-bottom: 0.5em;
}

.hero-subline {
  grid-column: 2;
  margin-top: clamp(1rem, 2.2vh, 1.7rem);
  max-width: 48ch; font-size: 18px; color: var(--ink);
}

.hero-ctas {
  grid-column: 2;
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: clamp(1.2rem, 2.6vh, 1.9rem);
}

.drop {
  grid-column: 2;
  margin-top: clamp(1rem, 2.4vh, 1.6rem);
  font-size: 20px; color: var(--ink-3); text-decoration: none; width: 1em;
  transition: color 160ms linear, transform 260ms cubic-bezier(.2,.7,.3,1);
}
.drop:hover { color: var(--signal-hi); transform: translateY(3px); }

.hero-foot {
  grid-column: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.7rem 2rem;
  margin-top: clamp(1.4rem, 4vh, 3rem);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.hero-foot p { margin: 0; }
.hero-foot b { color: var(--ink-2); font-weight: 600; }

.disciplines-line { letter-spacing: 0.1em; text-transform: uppercase; }
.disciplines-line i { font-style: normal; color: var(--line-2); margin: 0 0.3rem; }

@media (max-width: 620px) {
  .hero-subline { font-size: 17px; }
  .hero-foot { flex-direction: column; gap: 0.35rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
}

/* ---------- 9. LA RANURA DE TRÁNSITO ----------
   D12: la metáfora del viaje ocupa cada ranura repetida. Entre estrella y
   estrella había vacío; ahora hay de dónde vienes, adónde vas y para qué
   sirve el tramo. Cierra hueco (D7) y adelanta contenido (D9) a la vez. */

.transit {
  width: var(--col);
  margin: var(--transit) auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.transit-leg { color: var(--line-2); }
.transit-from { color: var(--ink-3); }
.transit-rule { height: 1px; background: linear-gradient(90deg, var(--line), var(--line-2)); }
.transit-to { color: var(--ink-2); }
.transit-line { letter-spacing: 0.02em; text-transform: none; font-size: 13px; color: var(--ink-2); }

@media (max-width: 860px) {
  .transit { grid-template-columns: auto 1fr auto; row-gap: 0.4rem; }
  .transit-leg { display: none; }
  .transit-line { grid-column: 1 / -1; }
}

/* ---------- 10. LA PRUEBA ----------
   La pregunta 2 de cualquier desconocido. Marcas MONOCROMAS en la tinta
   del sitio, sobre el negro del sitio (linear.app, jason.energy,
   vanschneider.com). Nunca planchas claras: eso era el defecto §5.2. */

.proof {
  position: relative; z-index: 4;
  width: var(--col); margin: 0 auto;
  padding: clamp(1.6rem, 4vh, 2.6rem) var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-inner { display: grid; gap: clamp(1rem, 2.4vh, 1.6rem); }

.proof-line {
  margin: 0; max-width: 56ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.45rem);
  letter-spacing: -0.025em; line-height: 1.3; color: var(--ink);
}

/* Cuatro columnas, no ocho: cuatro de estas marcas son lockups
   institucionales con microtipografía y a 145 px de celda eran una mancha
   gris. Medido mirándolas al tamaño real. */
.client-wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
  align-items: center;
}
.client-wall li { margin: 0; }
/* El 0,6 de antes estaba calibrado contra la marca MÁS RUIDOSA: con la
   cámara maciza de DGCINE pesando 3,2x lo que pesaba MOPC, bajar el muro
   entero era la única forma de que la losa no gritara. Igualada la masa
   en `tools/marks.js`, ese freno ya no hace falta y el muro puede
   recuperar presencia sin que ninguna marca se adelante. */
.client-wall img {
  display: block; width: 100%; height: auto;
  max-width: calc(var(--nat, 100vw) / 2);
  opacity: 0.72;
  transition: opacity 200ms linear;
}
.client-wall li:hover img { opacity: 1; }

.proof-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 2.2vw, 1.75rem);
  margin: 0; padding-top: clamp(0.9rem, 2.2vh, 1.4rem);
  border-top: 1px solid var(--line);
}
.proof-facts dt {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem);
  letter-spacing: -0.035em; line-height: 1; color: var(--ink);
}
.proof-facts dd { margin: 0.4rem 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.proof-facts a { color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.35); }

.proof-quote {
  margin: 0; padding-top: clamp(0.9rem, 2.2vh, 1.4rem);
  border-top: 1px solid var(--line);
  display: grid; gap: 0.5rem;
}
.proof-quote blockquote { margin: 0; }
.proof-quote p {
  margin: 0; max-width: 66ch;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem);
  line-height: 1.45; color: var(--ink);
}
.proof-quote figcaption { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.proof-quote figcaption span { color: var(--line-2); }

.proof-cta { margin: 0; }
.proof-cta a {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal-hi); text-decoration: none;
  border-bottom: 1px solid rgb(245 130 42 / 0.4); padding-bottom: 0.2rem;
}
.proof-cta a:hover { border-color: var(--signal-hi); }

@media (max-width: 900px) {
  .proof-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .client-wall { grid-template-columns: repeat(2, 1fr); }
  .proof-facts { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* ---------- 11. EL TRABAJO (Saiph) ----------
   D6 — la jerarquía se expresa en NÚMERO DE PIEZAS y en profundidad,
   nunca en cajas de distinto tamaño: TODAS las portadas y TODAS las
   láminas miden exactamente `--cover`. Lo que cambia entre niveles es
   cuántas hay, y cuánta profundidad tiene su página. La barra de guiones
   cuenta las piezas a la vista (vanschneider.com, REFERENCIAS §5.1). */

.work-history { margin: 0.8rem 0 0; font-size: 13px; color: var(--ink-3); }
.work-history a { color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.35); }

.works { list-style: none; margin: clamp(1.2rem, 3vh, 2rem) 0 0; padding: 0; display: grid; gap: clamp(1.75rem, 4vh, 3rem); }

.work { display: grid; gap: 0.6rem; padding-top: clamp(1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--line); }

.work-idx {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem;
  margin: 0;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-hi);
}

.work-sector { color: var(--ink-3); padding-left: 0.8rem; border-left: 1px solid var(--line-2); }

.work-pieces { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--ink-3); }
.work-pieces i { display: block; width: 11px; height: 2px; background: var(--line-2); }
.work-pieces b { font-weight: 400; margin-left: 0.4rem; letter-spacing: 0.14em; }

.work-gallery { margin: 0.3rem 0 0; display: grid; gap: 0.45rem; justify-items: start; }
.work-gallery img { display: block; width: 100%; max-width: min(var(--cover), calc(var(--nat, 100vw) / 2)); height: auto; border-radius: 2px; }
.work-gallery figcaption { font-size: 12px; line-height: 1.4; color: var(--ink-3); max-width: var(--cover); }

/* Las piezas de proceso del nivel 1. Mismo ancho que la portada: la
   jerarquía está en que existan, no en que sean más grandes. */
.work-more { display: grid; gap: clamp(0.75rem, 2vh, 1.1rem); margin: 0.3rem 0 0; }
.work-more figure { margin: 0; display: grid; gap: 0.45rem; justify-items: start; }
/* LA ÚNICA REGLA DE IMAGEN QUE NO RESERVABA SU SITIO, y costaba 1.083 px
   de salto. Era `width: auto` + `max-width` + `max-height`: bonito sobre
   el papel —el navegador encoge dentro de las dos restricciones
   conservando la proporción— pero antes de que la imagen cargue NO HAY
   ancho intrínseco, así que el ancho resuelve a 0, y con ancho 0 la
   proporción declarada (`width`/`height` en el HTML) no puede reservar
   ninguna altura. Las cinco imágenes de `.work-more` medían 0 px de alto
   hasta que cargaban, `#work` crecía 1.083 px de golpe, y el navegador
   anclaba el scroll moviendo al visitante 376 px. CLS 0,55. Es la segunda
   causa del «salta el fondo» que reportó Fran, y no tenía nada que ver
   con el motor: pasaba igual con `prefers-reduced-motion`.

   El arreglo NO cambia un solo píxel de la composición. El tope de alto se
   expresa como tope de ANCHO usando la proporción, que el generador ahora
   emite en `--ar` porque mide el fichero de verdad. Las tres restricciones
   quedan en un `min()` sobre el ancho, que es definido desde el primer
   fotograma, así que la altura se reserva antes de cargar nada.
   Verificado: mismos anchos y altos que antes, y el salto se va.

   `max-height` se queda de cinturón: si algún día una imagen llega sin
   `--ar`, el tercer término no ata (99) y el comportamiento vuelve a ser
   el de antes en vez de romperse en silencio. `tools/salto.js` lo vigila. */
.work-more img { display: block; width: min(var(--cover), calc(var(--nat, 100vw) / 2), calc(17rem * var(--ar, 99))); height: auto; max-height: 17rem; border-radius: 2px; }
.work-more figcaption { font-size: 12px; line-height: 1.4; color: var(--ink-3); max-width: var(--cover); }

.work-title { margin: 0.3rem 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink-2); }
.work-title b { font-weight: 500; color: var(--ink); }

.work-tags { margin: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.work-lede { margin: 0.2rem 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 68ch; }

.work-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; margin: 0.3rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.work-result b { font-family: var(--display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--signal-hi); }
.work-result span { font-size: 14px; color: var(--ink-2); }

/* La tira de «también entregados»: alcance sin darle a un encargo de tres
   meses el peso de uno de siete. D6 — el nivel 4 no lleva portada. */
.also { margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0; padding-top: clamp(1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--line); }
.also-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem clamp(1.25rem, 3vw, 2.25rem); }
.also-list li { display: grid; gap: 0.1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
.also-list b { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; color: var(--ink); }
.also-list span { font-size: 13px; line-height: 1.4; color: var(--ink-3); }

.work-closer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem; margin: clamp(1.2rem, 3vh, 2rem) 0 0; }
.work-closer p { margin: 0; font-family: var(--display); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); letter-spacing: -0.02em; color: var(--ink); }
.work-closer .work-cta { margin: 0; }

@media (max-width: 980px) {
  .also-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .also-list { grid-template-columns: 1fr; }
  .work-pieces { margin-left: 0; width: 100%; }
}

/* ---------- 12. LA TESIS (Meissa) ----------
   Cada convicción lleva DEBAJO una decisión real, nombrada. Una
   convicción sin caso debajo es una frase bonita (anti-patrón 10). */

.beliefs { list-style: none; margin: clamp(1.2rem, 3vh, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vh, 2.25rem) clamp(1.5rem, 3.5vw, 3rem); }
.beliefs li { display: grid; align-content: start; gap: 0.45rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.belief-n { margin: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--line-2); }
.beliefs .glyph { width: 24px; height: 24px; fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.beliefs .glyph .solid { fill: var(--signal); stroke: none; }
.beliefs h3 { margin: 0.1rem 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); }
.beliefs p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.belief-proof { padding-top: 0.6rem; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink-3); }
.belief-proof b { color: var(--ink-2); font-weight: 600; }
.belief-proof a { color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.35); }
.belief-proof-label { display: block; margin-bottom: 0.25rem; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-2); }
.belief-link { justify-self: start; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.35); padding-bottom: 0.15rem; }
.belief-link:hover { border-color: var(--signal-hi); }

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

/* ---------- 13. QUIÉN Y CÓMO (Alnitak) ----------
   Llega tarde a propósito: el desconocido quiere creer antes de conocer. */

#who .star-core { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }

.about-facts { grid-column: 1; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.15rem clamp(1.1rem, 2.6vw, 2.25rem); margin: clamp(0.9rem, 2.2vh, 1.5rem) 0 0; }
.about-facts dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-2); }
.about-facts dd { margin: 0.15rem 0 0; font-size: 14px; color: var(--ink); }

.plate-portrait { grid-column: 1; margin: clamp(0.9rem, 2.2vh, 1.5rem) 0 0; display: grid; gap: 0.45rem; justify-items: start; }
.plate-portrait img { display: block; width: 100%; max-width: min(17rem, calc(var(--nat, 100vw) / 2)); height: auto; border-radius: 2px; }
.plate-portrait figcaption { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cap-sub { color: var(--line-2); }

.about-right { grid-column: 2; grid-row: 1 / span 3; padding-top: 0.3rem; }
.about-head { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }

/* LAS OFERTAS. Fran retiró el «quítalas» (GUION §11.1): es lo único de la
   página que le dice a un desconocido para qué contratarle. Cada una
   nombra un caso de esta misma página, para que se pueda comprobar. */
.offers-head { margin: clamp(1.4rem, 3.2vh, 2.25rem) 0 0; padding-top: clamp(1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--line); }
.offers-title { margin: 0.15rem 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.offers { list-style: none; margin: clamp(1rem, 2.4vh, 1.6rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.9rem); }
.offers li { display: grid; align-content: start; gap: 0.35rem; padding-top: 0.8rem; border-top: 1px solid var(--line-2); }
.offer-n { margin: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--line-2); }
.offers h4 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.offers p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.offer-ev { color: var(--ink-3); font-size: 13px; }
.offer-ev span { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-2); margin-bottom: 0.15rem; }

/* El método, en una línea. Cinco pasos que son los de cualquiera: no
   merecen una estrella propia, merecen una tira. */
.steps-kicker { margin: clamp(1.4rem, 3.2vh, 2.25rem) 0 0.8rem; padding-top: clamp(1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.7rem, 1.8vw, 1.4rem); }
.steps li { display: grid; align-content: start; gap: 0.2rem; padding-left: 0.8rem; border-left: 1px solid var(--line-2); }
.steps b { font-weight: 400; font-size: 11px; letter-spacing: 0.14em; color: var(--line-2); }
.steps h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 0.95rem; letter-spacing: -0.02em; color: var(--ink); }
.steps p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.steps-cta { margin-top: clamp(1rem, 2.4vh, 1.6rem); }

@media (max-width: 900px) {
  #who .star-core { grid-template-columns: minmax(0, 1fr); }
  .about-right { grid-column: 1; grid-row: auto; margin-top: 1.1rem; }
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
}
@media (max-width: 560px) {
  .offers { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}

/* ---------- 14. PREGUNTAS ----------
   Banda, no estrella: es utilidad pura. Visibles, no plegadas: lo
   colapsado se indexa peor y se lee peor. */

.faq { position: relative; z-index: 4; width: var(--col); margin: 0 auto; padding: clamp(1.6rem, 4vh, 2.6rem) var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-inner { display: grid; gap: clamp(1rem, 2.4vh, 1.6rem); }
.faq-title { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vh, 1.6rem) clamp(1.5rem, 3.5vw, 2.75rem); }
.faq-item { display: grid; align-content: start; gap: 0.35rem; }
.faq-item h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 0.98rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.faq-item p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 980px) {
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- 15. CONTACTO (Rigel) Y PIE ----------
   El contacto NO se lleva una pantalla entera: media pantalla de relleno
   antes del cierre eran 1.194 px de vacío en la medición de la Fase 0. */

.farewell { max-width: 48ch; }
.farewell p { font-size: 18px; color: var(--ink); }
.reach-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: clamp(1.1rem, 2.6vh, 1.7rem) 0 0; }
.reach-links { margin: clamp(0.9rem, 2.2vh, 1.3rem) 0 0; font-size: 13px; color: var(--ink-3); }
.reach-links a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.reach-links a:hover { color: var(--ink); }
.reach-links span { margin: 0 0.45rem; color: var(--line-2); }

/* HOLGURA PARA LA LLEGADA. Las estrellas con llegada hacia ABAJO se
   desplazan al acercarse: `below` baja 0,15 de pantalla (147 px a 983) y
   `belowdeep` 0,13 (128 px). Sin holgura debajo, el nucleo se mete encima
   de lo que sigue mientras llega — el contacto entraba pisando el pie de
   pagina. En reposo no se ve; en movimiento si, que es cuando se mira.
   La holgura es un poco mayor que el desplazamiento, a proposito.

   Va POR LLEGADA, no por seccion (5 sep 2026). Estaban escritas a mano
   `#contact` y `#thesis`, asi que al pasar «Sobre mi» a una llegada desde
   arriba —la gramatica del punto 2 de la revision de Fran— el nucleo se
   quedo con 47 px de holgura contra 127 de desplazamiento y la guarda lo
   cazo en tres viewports. Una regla por seccion no es una regla: es una
   lista que hay que acordarse de ampliar. Ahora la reserva la pide la
   propia llegada, y cualquier seccion futura la hereda. */
.star[data-arrival="below"] .star-core { padding-bottom: clamp(2.5rem, 17vh, 11rem); }
.star[data-arrival="belowdeep"] .star-core { padding-bottom: clamp(2.5rem, 15vh, 9rem); }

.sky-foot { position: relative; z-index: 4; width: var(--col); margin: 0 auto; padding: clamp(1.6rem, 4vh, 2.6rem) var(--pad) clamp(1.2rem, 3vh, 2rem); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 2.75rem); }
.foot-wordmark { margin: 0; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: var(--ink); }
.foot-line { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.foot-col { display: grid; align-content: start; gap: 0.4rem; }
.foot-label { margin: 0 0 0.25rem; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-2); }
.foot-col a { font-size: 13px; color: var(--ink-2); text-decoration: none; transition: color 160ms linear; }
.foot-col a:hover { color: var(--ink); }
.foot-cta { margin-top: 0.4rem; color: var(--signal-hi); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }
.foot-meta { margin: clamp(1.2rem, 3vh, 2rem) 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 12px; color: var(--line-2); }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .reach-ctas { flex-direction: column; align-items: stretch; }
}

/* ---------- 16. LUNA: páginas de caso y ensayos ----------
   Columna de lectura centrada. Aquí vive la PROFUNDIDAD que D6 pide del
   nivel 1: más capítulos y más láminas, no cajas más grandes. */

.eos-static .eos-cold { transform: translate3d(50vw, 30vh, 0); }
.eos-static .eos-warm { transform: translate3d(78vw, 86vh, 0); }

.back { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.back:hover { color: var(--ink); }

.luna { position: relative; z-index: 4; width: min(58rem, 100%); margin: 0 auto; padding: calc(var(--nav-h) + 3vh) var(--pad) clamp(2rem, 5vh, 3.5rem); }

.luna-head { display: grid; gap: 0.5rem; }
.luna-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 1rem + 3.6vw, 3.6rem); letter-spacing: -0.032em; line-height: 1; color: var(--ink); }
.luna-lede { margin: clamp(1.1rem, 2.6vh, 1.75rem) 0 0; font-size: 18px; line-height: 1.5; color: var(--ink); max-width: 56ch; }
.luna-lede a { color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.35); }

.luna-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 2.2vw, 1.75rem); margin: clamp(1.2rem, 3vh, 2rem) 0 0; padding-top: clamp(0.9rem, 2.2vh, 1.4rem); border-top: 1px solid var(--line); }
.luna-meta dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-2); }
.luna-meta dd { margin: 0.3rem 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

.luna-live { margin: clamp(1.1rem, 2.6vh, 1.75rem) 0 0; }
.luna-live a { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.4); padding-bottom: 0.2rem; }

.luna-plate { margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0; display: grid; gap: 0.5rem; justify-items: start; }
.luna-plate img { display: block; width: 100%; max-width: min(var(--cover), calc(var(--nat, 100vw) / 2)); height: auto; border-radius: 2px; }
.luna-plate figcaption { font-size: 12px; line-height: 1.45; color: var(--ink-3); max-width: 56ch; }
.luna-plate-wide img { max-width: min(100%, calc(var(--nat, 100vw) / 2)); }
.luna-plate-tall img { max-width: min(18rem, calc(var(--nat, 100vw) / 2)); }
.luna-cover img { max-width: min(var(--cover), calc(var(--nat, 100vw) / 2)); }

.chapter { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: clamp(0.7rem, 1.8vw, 1.4rem); margin: clamp(1.75rem, 4vh, 2.75rem) 0 0; }
.chapter-n { margin: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--line-2); padding-top: 0.3rem; }
.chapter h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.chapter p { margin: 0.8rem 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.chapter a { color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.35); }

.moves { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.moves li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.45rem; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.moves b { font-weight: 400; font-size: 11px; letter-spacing: 0.14em; color: var(--line-2); padding-top: 0.25rem; }
.moves em { font-style: italic; color: var(--ink-3); }

.aside-note { margin: clamp(1.75rem, 4vh, 2.75rem) 0 0; padding: clamp(1rem, 2.6vh, 1.75rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aside-note p { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); max-width: 50ch; }
.aside-quote { display: grid; gap: 0.6rem; }
.aside-quote blockquote { margin: 0; }
.aside-quote figcaption { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.aside-quote figcaption span { color: var(--line-2); }

.luna-embed { margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0; display: grid; gap: 0.5rem; }
.luna-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 2px; background: #000; }
.luna-embed-cap { margin: 0; font-size: 12px; color: var(--ink-3); }

.luna-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 2.6vw, 2.25rem); margin: clamp(2rem, 5vh, 3.25rem) 0 0; padding-top: clamp(1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--line); }
.luna-next-label { margin: 0 0 0.35rem; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-2); }
.luna-next a { font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); text-decoration: none; }
.luna-next a:hover { color: var(--signal-hi); }

/* El ensayo: prosa larga, una sola columna, nada más. */
.essay { display: grid; gap: 1rem; margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0; }
.essay p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.essay h2 { margin: 1rem 0 0; font-family: var(--display); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.025em; color: var(--ink); }
.essay a { color: var(--signal-hi); text-decoration: none; border-bottom: 1px solid rgb(245 130 42 / 0.35); }
.essay blockquote { margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--line-2); }
.essay ul, .essay ol { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.glyph-essay { width: 26px; height: 26px; fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.glyph-essay .solid { fill: var(--signal); stroke: none; }

.outcome { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.outcome dt { font-family: var(--display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.03em; color: var(--signal-hi); }
.outcome dd { margin: 0.35rem 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }

@media (max-width: 760px) {
  .luna-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .luna-next { grid-template-columns: 1fr; }
  .outcome { grid-template-columns: 1fr; }
}

/* ---------- 17. UTILIDADES ---------- */

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