/* ============================================================
   BETELGEUX — Cielo Invertido
   La página existe sin JavaScript. El movimiento se añade encima.
   ============================================================ */

/* Variable 300-700. Hace falta el rango entero porque la jerarquía la
   da el TAMAÑO, no el peso: en vanschneider TODO pesa 400 y la escala
   130/36/28/23/18/12 hace el trabajo sola. El peso 700 grita; la escala
   estructura. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ============================================================
     EL CIELO REAL (exploración modo oscuro). El maestro §7 archiva
     este sistema como "el cielo original": la marca NACIÓ oscura y se
     invirtió a papel a propósito. Aquí se recupera el fondo negro para
     ver qué pasa si el sitio se siente como el espacio.
     Tesis: Betel es la única luz. El fondo es casi negro; se LEE donde
     la guía ilumina. El contraste se recalibró desde cero contra el
     fondo PEOR (el más CLARO que el campo puede alcanzar bajo el texto:
     polo frío de Eos + glow de Betel + una nube), no contra negro puro.
     ============================================================ */
  /* ============================================================
     LA PALETA BETELGEUSE (orden de Fran, 27 ago 2026 — definitiva):
       Cosmic Black    #090606  el fondo
       Ember           #D83A2E  el primario: puntos, bordes, Betel
       Solar Orange    #F5822A  texto interactivo pequeño (AA en negro)
       Radiant Gold    #FFC53D  el halo
       Star White      #FFF2BF  el brillo máximo
     El azul no existe en este cielo. --accent-text es el highlight por
     estrella que .stress lee, escrito por blendLight(). ============ */
  --bg:     #090606;
  /* CORRECCION (Fran): la crema muria. Base NEUTRA (los valores medidos
     del cielo real); con el motor vivo, blendLight ADAPTA la tinta al
     color de cada estrella (casi-blanco levantado del neb dominante,
     con guardia de luminancia AA en la secundaria). Sin JS: esto. */
  --ink:    #F4F6FA;
  --ink-2:  #99A0AF;
  /* Railroad Task AG: era #3A2E23, cálido (28.7° de matiz, luminancia
     0.02975) -- por eso cada divisor del cielo oscuro se leía marrón,
     aunque leyera el token "neutral" correcto. #333A42, frío (212.0°),
     luminancia 0.04123 -- similar, ligeramente más clara. Un solo
     valor cambia; los ~36 sitios que leen var(--line) se mueven juntos
     sin tocar ninguno. */
  --line:   #333A42;
  /* EL PRIMARIO ES ROJO. La paleta Betelgeuse manda (orden de Fran,
     27 ago 2026): Cosmic Black #090606, Ember #D83A2E, Solar Orange
     #F5822A, Radiant Gold #FFC53D, Star White #FFF2BF. El Ember es el
     color de identidad: puntos, bordes, Betel. Para TEXTO pequeño
     interactivo (hovers bajo ~18px) se usa --signal-hi, que sí pasa AA
     sobre negro; el Ember puro queda para piezas grandes y no-texto. */
  --signal: #D83A2E;
  --signal-hi: #F5822A;
  --halo:   #FFC53D;
  /* El highlight por estrella (Role law, STAR-SHEET.md §2). Solo lo lee
     .stress. Valor inicial de sujeción antes del primer frame; blendLight()
     lo sobreescribe por estrella (Railroad Task 2b). */
  --accent-text: #FFC53D;

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

  --transit: 55vh;
  --pad: clamp(1.25rem, 5vw, 5rem);

  /* La nav y las coordenadas son fixed: flotan POR ENCIMA de las
     secciones. Si no se les reserva sitio, el contenido centrado se les
     mete debajo. En pantallas altas no se nota; en un portátil, cuatro
     de seis secciones chocaban. El espacio se reserva, no se supone. */
  --nav-h:  clamp(3.75rem, 10vh, 6rem);
  --foot-h: clamp(3rem, 8vh, 4.75rem);

  /* Luz de partida. JS la reemplaza estrella a estrella (blendLight).
     En oscuro los polos ADEN luz sobre negro en vez de restarla: el frío
     es un amanecer azul acerado que sigue a Betel; el cálido, un negro
     cálido profundo en el punto opuesto (lo lejano, casi negro). Si el
     motor no arranca, el fondo ya es negro por --bg y el texto es claro:
     Regla Cero cumplida sin pintar nada. */
  --eos-cold: 61 17 12;
  --eos-warm: 22 17 14;
}

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

*, *::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;
}

/* ---------------- EOS: el campo ---------------- */

/* EOS. La profundidad no se pinta: se construye con escala y con dos
   temperaturas en tensión. Los polos son deliberadamente enormes (más
   grandes que la pantalla) porque un degradado que cabe entero se lee
   como una mancha; uno que desborda se lee como distancia.
   La viñeta cálida cierra los bordes y hunde el centro: sin ella el
   fondo es una hoja, no un espacio. */
.eos {
  position: fixed; inset: 0; z-index: 0;
  /* 100vw, no 100%: 100% se detiene en clientWidth y deja el canal de la
     barra de scroll sin campo. En una página cuyo fondo ES la pieza, esa
     franja se ve como una costura vertical dura en el borde derecho. */
  width: 100vw;
  pointer-events: none; overflow: hidden;
  /* LA VIÑETA, AHORA TEMA. §0: los bordes se disuelven en negro puro, no
     hay marco, la escena se pierde en lo oscuro. El centro deja pasar el
     fondo (y la luz que Betel trae encima); el filo hunde a negro absoluto
     (#000), más oscuro que el propio --bg (#05070C), para que el espacio
     no tenga borde. El "vacío como condición" (maestro Regla 6) deja de
     ser regla y pasa a ser el tema. */
  background:
    radial-gradient(130% 115% at 50% 44%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,0.45) 82%,
      rgba(0,0,0,0.85) 100%);
}

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

/* CIELO REAL: dos temperaturas en tensión sobre negro. El polo frío es el
   amanecer que sigue a Betel; el cálido es lo lejano, casi negro. JS
   interpola --eos-cold / --eos-warm entre sistemas (blendLight), así que el
   campo CAMBIA DE LUZ al viajar: cada estrella ilumina su espacio de otra
   manera. Se mueve la temperatura, nunca el tono del azul de Betel (Regla 8).
   La opacidad del frío se mide contra el contraste del texto que ilumina:
   ver §2 de NOTAS-cielo-real.md (AA con margen contra el fondo peor). */
/* EL AMANECER, sobre negro. En claro los polos eran near-white al 22%: la
   preocupación era no teñir el papel. En oscuro el problema se invierte:
   el polo frío es la ÚNICA fuente de lectura, así que sube su opacidad
   para que el amanecer azul de Betel de verdad saque la escena del negro.
   Medido: el polo frío bajo el texto lleva el fondo de #05070C a ~#101C30
   en su pico, y el texto claro conserva contraste de sobra ahí. */
/* CORRECCION (Fran): el fondo de cada estrella es NEGRO. El amanecer se
   encoge a un resplandor local alrededor de la guia: la luz viene de las
   estrellas y las galaxias, no de un lavado que llena el viewport. */
.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%);
}

/* El polo cálido es LO LEJANO: casi negro. Su color ya es un negro cálido,
   así que aunque cubra el viewport apenas levanta el fondo. Es la mitad
   oscura de la tensión que el ojo lee como volumen. */
.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%);
}

/* Movimiento reducido: un amanecer CENTRADO y quieto, todo iluminado, sin
   linterna que viaje (§0 salvaguarda). Los polos se posan a media pantalla
   en vez de quedar en la esquina (0,0) por defecto. */
@media (prefers-reduced-motion: reduce) {
  .eos-cold { transform: translate3d(50vw, 44vh, 0) scale(1); }
  .eos-warm { transform: translate3d(72vw, 78vh, 0) scale(1); }
}

/* Los dos lienzos se dimensionan igual y se dibujan en el mismo espacio.
   El campo va detrás del contenido; la guía, delante. */
/* width/height explícitos: un canvas es un elemento reemplazado, así que
   con inset:0 y width auto se queda en su tamaño intrínseco (el atributo)
   en vez de estirarse. Sin esto, el lienzo mide menos que la pantalla y
   lo que se dibuja fuera de él simplemente no existe. */
.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;
}

/* ---------------- Una sola navegación ----------------
   Misma estructura, mismos tamaños, mismo eje en todo ancho.
   Regla 1: tres anclas, siempre alineadas.                */

/* .nav: alias temporal para /es/, aun en copy v5. */
.nav,
.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(1.1rem, 3vw, 2.25rem) 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; }

/* El cinturón y el idioma comparten fila, pero no son lo mismo:
   una línea los separa para que las anclas sigan siendo TRES. */
.nav-right,
.sky-nav-right { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.75rem); }

.belt { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); }

.lang {
  font-size: 13px; letter-spacing: 0.14em;
  color: var(--line); text-decoration: none; white-space: nowrap;
  padding-left: clamp(0.9rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line);
  transition: color 160ms linear;
}
.lang:hover, .lang:focus-visible { color: var(--ink); }

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

/* Estrecho: la nav se aprieta, pero NO cambia de estructura.
   Tres anclas y el idioma, en el mismo eje, en cualquier ancho. */
@media (max-width: 600px) {
  .nav-right, .sky-nav-right { gap: 0.55rem; }
  .belt { gap: 0.8rem; }
  .belt a, .lang { font-size: 11px; letter-spacing: 0.05em; }
  .lang { padding-left: 0.55rem; }
  .wordmark { font-size: 11px; }
}

/* ---------------- El trayecto ---------------- */

/* Sin cola muerta al final. Rigel es la última estrella: después de ella
   no hay más viaje, así que no hay más scroll. Antes quedaba media
   pantalla de vacío que no llevaba a ninguna parte. */
.trayecto { position: relative; z-index: 4; }

/* La sección crece con su contenido. Su NÚCLEO mide una pantalla. */
.star { position: relative; }

.star + .star { margin-top: var(--transit); }

/* El momento estrella: lo que llega, se transforma y recibe a Betel. */
.star-core {
  position: relative;
  /* lvh, no svh, y no dvh.
     svh es el viewport CON barra; clientHeight crece hasta lvh cuando la
     barra se esconde. Con svh la sección mide ~90px menos que la pantalla
     contra la que Helios la centra: el hero nunca está centrado del todo,
     el motor cree que el viaje ya empezó, Betel se despega de su punto y
     los puntos se marcan antes de tiempo. dvh coincidiría, pero cambia
     durante el scroll y eso re-maqueta la página (el temblor).
     lvh coincide con clientHeight con la barra recogida (que es el estado
     mientras se hace scroll) y NO cambia. En escritorio los tres valores
     son idénticos: por eso este fallo es invisible aquí. */
  min-height: 100lvh;
  display: grid;
  align-content: center;
  /* Zona segura arriba y abajo: la nav y las coordenadas viven ahí. */
  padding: var(--nav-h) var(--pad) var(--foot-h);
  opacity: 1; transform: none; filter: none;
}

.star + .star { margin-top: var(--transit); }

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

.magnitude-1 {
  margin: 0;
  font-family: var(--display);
  /* 500, no 700. La magnitud viene del cuerpo, no del grosor. */
  font-weight: 500;
  /* El ancho manda, pero el alto pone el techo: en una pantalla baja un
     titular de dos líneas a 8rem se come la sección entera. */
  font-size: min(clamp(2.25rem, 1rem + 6.4vw, 7rem), 14svh);
  /* -0.032em: la proporción medida en la referencia. A tamaño display
     el tracking normal deja los titulares flojos. */
  letter-spacing: -0.032em;
  line-height: 0.92;
}

/* EL PUNTO. No cierra: apunta.
   Y es LA MISMA COSA que Betel, no su destino (maestro §6: "el punto
   tipográfico y el guía son el mismo objeto"). Al posarse, Betel se apaga
   en el lienzo y el punto se enciende aquí. Un elemento del DOM no puede
   desalinearse consigo mismo, y ahí muere toda la familia de fallos de
   "Betel no aterriza en su sitio". */
.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);
  /* La llegada es un gesto SECO (Regla 4): 200ms, con un punto de rebote
     al asentarse. La salida es más lenta y sin rebote: se va, no aterriza. */
  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);
}

/* ACTIVO: Betel está aquí. STAGE 3.2 (veredicto de Fran): CORONA AZUL
   con núcleo blanco incandescente — el ascua se camuflaba en el fondo
   cálido y nadie la miraba; en un cielo ember lo inconfundible es lo
   azul. El lienzo pinta las mismas capas para que el relevo sea
   invisible. El anillo va en azul, contenido con los mismos techos de
   la fase 4: abraza al punto, no lo lampara. */
.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);
}

/* PUESTO (Railroad §2, survivor 4): Betel se fue y el punto se enfria
   a azul profundo — la misma identidad de la corona (§3.2), no la
   brasa Ember: /orion no tiene dos lenguajes de color para el mismo
   cuerpo. Sin rebote y más lento: partir no es aterrizar. */
.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);
}

/* Sin JS, los puntos existen igual: la frase está completa. */
html:not(.helios) .point { opacity: 1; }

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

.body { margin: clamp(1.1rem, 2.2vw, 1.75rem) 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.body p { margin: 0 0 0.7em; }
.body a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.body a:hover { border-color: var(--ink); }

/* ============================================================
   COMPOSICIONES ESTELARES
   Cada estrella impone su propia estructura (Regla 7).
   ============================================================ */

/* --- BETELGEUSE: el gigante. Masa que desborda,
       el qualifier orbitando en vertical. --- */
#hero {
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
}

/* El qualifier ocupa su propia columna: orbita sin pisar la masa
   y sin salirse del viewport. */
.kicker-vertical {
  grid-column: 1;
  grid-row: 1 / span 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  justify-self: start;
  align-self: center;
  white-space: nowrap;
}

.overflow-mass {
  grid-column: 2;
  font-size: min(clamp(2.75rem, 0.5rem + 11vw, 11rem), 26svh);
  /* El único sitio donde el peso sí manda: es la marca, no un titular. */
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 0.84;
}

/* Railroad Task S: dos elementos nuevos en la misma columna 2 que ya
   usan overflow-mass y disciplines-line -- sin esto el auto-placement
   de la grilla los manda a la columna 1, junto al nametag vertical. */
#hero .hero-kicker, #hero .hero-subline, #hero .disciplines-line { grid-column: 2; }

/* "Digital Experiences" alargo la linea 106px y por debajo de 428px de
   columna se parte en dos. Sin ayuda rompia 349/75 en un telefono de 390:
   "Branding" solo, huerfano. Cada disciplina es indivisible y el corte solo
   ocurre en un separador; balance reparte las dos filas (180/244).
   Railroad Task S: promovida de tira de etiquetas a declaracion -- de
   18px/400/--ink-2 (heredado de .body) a 20px/500/--ink. */
.disciplines-line {
  max-width: none; text-wrap: balance;
  font-size: 20px; font-weight: 500; color: var(--ink);
}
.disciplines-line span { white-space: nowrap; }

/* --- BELLATRIX: la guerrera. El peso empujado a un lado.
       El retrato va AL LADO, no debajo: apilado dejaba la sección al 99%
       de su alto disponible, a una línea de romperse. La guerrera empuja
       en horizontal, que es justamente lo que pide la composición. --- */
#about {
  text-align: left;
  /* Railroad Task AJ -- MEASURED (getBoundingClientRect, 1432px and
     1024px, real browser): grid-template-columns and column-gap
     declared here never applied. #about is display:block; the actual
     grid container is the child .star-core, and grid-template-columns/
     column-gap do not inherit from an ancestor. The column width WAS
     already governed by a separate, later rule (#about .star-core,
     clamp(13rem,30vw,24rem)) -- but no rule anywhere set a column-gap
     on the real grid container, so it computed to "normal" (0px).
     Measured gap between .body and .plate-portrait: exactly 0px at
     both 1432px and 1024px -- touching, not overlapping (never
     negative), but zero breathing room. justify-items (above) and
     align-items (below) are equally inert on this element for the
     same reason -- left as historical, not removed, since fixing the
     crowd only needed the gap restored at the real grid container. */
  align-items: center;
}

#about .kicker,
#about .magnitude-1,
#about .body { grid-column: 2; }

#about .plate-portrait {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: start;
  margin: 0;
  width: 100%;
}

#about .body { max-width: 38ch; }
#about .magnitude-1 { max-width: 14ch; }

/* --- ALNITAK: el cinturón. La línea cruza en diagonal, el 18 la pisa. --- */
#work { overflow: hidden; }

#work .kicker, #work .magnitude-1, #work .body { position: relative; }

/* --- Las láminas ---
   Imágenes con tratamiento de alto contraste, integradas al fondo cálido.
   No son ventanas: son materia que también recibe la luz de Eos. */

.plate {
  margin: clamp(1.25rem, 3vw, 2.5rem) 0 0;
  overflow: hidden;
  background: var(--line);
}

.plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En claro las láminas se FUNDÍAN con el papel por multiply. Sobre negro
     multiply las hunde a negro puro (desaparecen), así que se pasa a blend
     normal y se bajan de brillo: materia que sale de lo oscuro, no un
     rectángulo que grita. */
  filter: saturate(0.94) contrast(1.02) brightness(0.9);
  mix-blend-mode: normal;   /* se funde con el papel, no se pega encima */
}

/* Dos láminas SIEMPRE en dos columnas. Apiladas en vertical se comían la
   sección entera y el contenido se salía por abajo. */
.plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 2vw, 1.5rem);
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
}
/* Las láminas nunca pueden empujar una sección fuera de su viewport.
   El tope está en svh: una imagen es apoyo, no es la sección. */
.plates .plate { margin: 0; aspect-ratio: 3 / 2; max-height: 34svh; }

.plate-portrait { width: min(15rem, 38%); aspect-ratio: 3 / 4; max-height: 34svh; }
.plate-wide { aspect-ratio: 21 / 9; max-height: 26svh; }

#about .plate-portrait { justify-self: start; }

/* --- RIGEL: el pie. El titular apoyado en el borde inferior. --- */
/* Rigel apoya el titular abajo, pero dentro de la zona segura: antes se
   sumaba un padding extra y empujaba el contenido fuera de pantalla. */
/* Centrado, no al pie: con el pie de página nuevo debajo, apoyar el
   contenido abajo dejaba el titular bajo la nav al final del scroll. */
#contact { align-content: center; }
.reach { list-style: none; margin: clamp(1.1rem, 2.2vw, 1.75rem) 0 0; padding: 0; display: grid; gap: 0.45rem; }

/* ============================================================
   HELIOS. Solo cuando JS confirma que midió bien.
   ============================================================ */

.helios .star-core { will-change: transform, opacity, filter; transform-origin: 50% 50%; }
.helios .kicker, .helios .magnitude-1, .helios .body { will-change: transform; }

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

/* Estrecho: las composiciones ceden, la navegación no cambia. */
@media (max-width: 620px) {
  /* El gigante deja de orbitar: en vertical no hay sitio para dos
     columnas sin estrangular la masa. Una sola columna, todo apilado. */
  #hero { grid-template-columns: minmax(0, 1fr); }

  .kicker-vertical {
    grid-column: 1; grid-row: auto;
    writing-mode: horizontal-tb; transform: none;
    justify-self: start; align-self: auto;
    white-space: normal;
    margin: 0 0 clamp(0.9rem, 2vw, 1.5rem);
  }

  .overflow-mass, #hero .hero-kicker, #hero .hero-subline, #hero .disciplines-line { grid-column: 1; }
  /* En vertical no hay dos columnas: la guerrera se apila. */
  #about {
    justify-items: start; text-align: left;
    grid-template-columns: minmax(0, 1fr);
  }
  #about .kicker, #about .magnitude-1, #about .body,
  #about .plate-portrait { grid-column: 1; }
  #about .plate-portrait {
    grid-row: auto;
    width: min(11rem, 45%);
    max-height: 24svh;
    margin-top: clamp(1rem, 3vw, 2rem);
  }
  .plates .plate { max-height: 22svh; }
  .plate-wide { max-height: 20svh; }
}

/* ============================================================
   v6 — EL SISTEMA DEL CIELO
   ============================================================ */

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

/* --- EL MAPA. No hay barra horizontal: una barra vuelve a aplanar el
       cielo en una pagina. Un glifo abre la constelacion y desde ahi se
       vuela. El mapa es ademas la leyenda: ensena el sistema solo. --- */

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

/* EL IDIOMA. Magnitud 3, fuera del eje de las tres anclas (Regla 1).
   Mismo peso visual que el Mapa: son dos utilidades, no dos destinos. */
.lang-trigger {
  display: inline-flex; align-items: center;
  color: var(--ink-2); text-decoration: none;
  font-family: var(--body); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 160ms linear;
}
.lang-trigger:hover, .lang-trigger:focus-visible { color: var(--ink); }

.sky-map {
  position: fixed; inset: 0; z-index: 20;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: var(--nav-h) var(--pad);
  background: rgb(5 7 12 / 0.92);
  backdrop-filter: blur(14px);
}
.sky-map[hidden] { display: none; }

.map-title, .map-foot {
  margin: 0; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}
/* Railroad Task P: el literal #6E6152 (32° de matiz, cálido) retirado.
   La regla base .map-title, .map-foot ya pone var(--ink-2); aquí solo
   hacía falta quitar el mayúsculas, no el color. */
.map-foot { text-transform: none; }

.map-stars { display: grid; gap: clamp(0.5rem, 1.6vh, 1rem); justify-items: center; }

.map-stars a {
  display: grid; justify-items: center; gap: 0.2rem;
  text-decoration: none; padding: 0.35rem 1rem;
}
.map-stars span {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  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(--line);
}
.map-stars a:hover span, .map-stars a:focus-visible span { color: var(--signal); }

/* --- LA PALABRA ACENTUADA. Una por parrafo. No es un enlace: es la
       palabra que subirias de voz al leerlo. --- */
/* A tamaño de texto el acento es el naranja: el Ember a 18px sobre negro
   queda bajo AA (medido). El Ember primario manda en piezas grandes. */
/* Railroad Task AF: el peso lleva el enfasis, el color lleva la
   identidad de la estrella. Antes font-weight:inherit (~400, heredado
   de .body/Instrument Sans). Task AD probo que el color solo no puede
   resolver Rigel sin chocar con el primario -- esto deja de pedirselo
   al color en solitario.
   Railroad Task AI: 700 (el maximo cargado) bajado a 600 -- /orion
   unicamente. El cielo blanco no se toca: .stress ahi sigue en
   font-weight: inherit (site/assets/css/main.css). */
.stress { color: var(--accent-text); font-weight: 600; }

/* --- LA FLECHA del hero. --- */
.drop {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  font-size: 20px; color: var(--ink-2); text-decoration: none;
  transition: color 160ms linear;
}
.drop:hover, .drop:focus-visible { color: var(--ink); }

/* --- PIES DE FOTO. Todo lo que no es galeria lleva pie, en primera
       persona. Es lo que hace que la pagina parezca reunida por alguien
       y no ensamblada por un generador de portafolios. --- */
figcaption {
  margin-top: 0.65rem;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}

/* --- WORK: el ritmo de seis pasos, identico en los tres proyectos.
       Galeria primero, despues el titulo, las etiquetas, el parrafo, el
       enlace y dos detalles con pie. La alineacion alterna. --- */
.works { list-style: none; margin: 0; padding: 0; }

.work {
  padding: clamp(3rem, 9vh, 7rem) 0;
  border-top: 1px solid var(--line);
}

.work-idx {
  margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  /* Railroad Task P: STRUCTURAL LABEL, mismo tratamiento que .kicker
     (var(--ink-2)), no var(--line) -- consistencia con el resto de
     etiquetas de sección. */
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}

.work-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}
/* 16/9: las capturas reales de proyecto son 16:9; a 3/2 se comían los
   bordes de las piezas. */
.work-gallery figure { margin: 0; overflow: hidden; background: var(--line); aspect-ratio: 16 / 9; }
/* La foto vertical: el encuadre 16:9 respeta la cara, no el centro. */
.work-gallery img.crop-top { object-position: center 18%; }
.work-gallery img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* En claro las láminas se FUNDÍAN con el papel por multiply. Sobre negro
     multiply las hunde a negro puro (desaparecen), así que se pasa a blend
     normal y se bajan de brillo: materia que sale de lo oscuro, no un
     rectángulo que grita. */
  filter: saturate(0.94) contrast(1.02) brightness(0.9);
  mix-blend-mode: normal;
}

/* La alineacion alterna proyecto a proyecto, como en la referencia. */
.work-flip .work-gallery { direction: rtl; }
.work-flip .work-gallery figure { direction: ltr; }

.work-title {
  margin: 0 0 0.6rem; max-width: 26ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 0.9rem + 1.6vw, 2.35rem);
  letter-spacing: -0.03em; line-height: 1.12; color: var(--ink);
}
.work-title b { font-weight: 500; }

.work-tags {
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}

.work-lede {
  margin: 0 0 clamp(1.25rem, 3vh, 2rem); max-width: 52ch;
  font-size: 17px; line-height: 1.6; color: var(--ink-2);
}

.lang-hint {
  font-size: 0.8em; letter-spacing: 0.08em; color: var(--ink-2);
  text-transform: none;
}

.work-cta { margin: 0; }
.work-cta a {
  display: inline-block;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--signal);
  transition: color 160ms linear;
}
.work-cta a:hover, .work-cta a:focus-visible { color: var(--signal-hi); }

.work-details {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.work-details .plate { margin: 0; }
.work-details .plate img { aspect-ratio: 3 / 2; }

/* --- HOW I THINK: tres tarjetas de solo texto, tarjeta entera clicable. --- */
.stances { list-style: none; margin: 0; padding: 0; }
.stances li { border-top: 1px solid var(--line); }
.stances a {
  display: block; padding: clamp(1.75rem, 5vh, 3.25rem) 0;
  text-decoration: none;
}
.stances h3 {
  margin: 0 0 0.5rem; max-width: 22ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  letter-spacing: -0.032em; line-height: 1.06; color: var(--ink);
  transition: color 160ms linear;
}
.stances p { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.stances a:hover h3, .stances a:focus-visible h3 { color: var(--signal); }

/* --- PROCESS / CONTACT --- */
.body-narrow { max-width: 44ch; }
.plate-process { margin-top: clamp(1.5rem, 4vh, 2.5rem); aspect-ratio: 16 / 7; max-height: 30svh; }
.farewell p { margin: 0 0 1.1em; }
.reach-links a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.reach-links a:hover, .reach-links a:focus-visible { border-color: var(--signal); color: var(--signal-hi); }

/* EL PIE. Un cierre digno: marca, navegación llana y contacto, para
   quien llegó abajo sin entender el mapa. Legible sin motor, sin JS. */
.sky-foot {
  position: relative; z-index: 4;
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--pad) clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--line);
  margin: 0 var(--pad);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.foot-wordmark {
  margin: 0 0 0.75rem;
  font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.02em; color: var(--ink);
}
.foot-line { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.foot-label {
  margin: 0 0 0.9rem;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.foot-col a {
  display: block;
  margin: 0 0 0.55rem;
  font-size: 14px; color: var(--ink); text-decoration: none;
  transition: color 160ms linear;
}
.foot-col a:hover, .foot-col a:focus-visible { color: var(--signal-hi); }
.foot-meta {
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
@media (max-width: 700px) {
  .foot-grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vh, 2rem); }
}

@media (max-width: 620px) {
  .work-gallery { grid-template-columns: 1fr; }
  .work-details { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .map-trigger-label { display: none; }
}

/* ============================================================
   REPARACIONES v6.1
   ============================================================ */

/* --- EL DETALLE. Se quedó SIN NINGUNA REGLA al borrar el bloque .case
       que lo contenía. Sin padding ni medida máxima, las galerías salían
       a sangre, las fotos se despegaban del layout y "18 years" se rompía.
       Era la causa de casi todo lo que se veía mal. --- */
.star-detail {
  position: relative;
  padding: clamp(2rem, 6vh, 4rem) var(--pad) 0;
  max-width: 96rem;
  margin: 0 auto;
}

/* --- LA NAV SOBRE FOTO. El wordmark y el Map quedaban ilegibles al
       pasar sobre una imagen oscura. Una cápsula de papel detrás los
       despega del fondo sin meter una barra sólida. --- */
/* La cápsula va en CADA pieza, no en el contenedor: el idioma y el mapa
   ahora comparten una fila, y si la cápsula fuese del grupo se vería una
   sola pastilla larga en vez de dos elementos separados. */
.wordmark,
.lang-trigger,
.map-trigger {
  background: rgb(5 7 12 / 0.66);
  backdrop-filter: blur(10px);
  padding: 0.5rem 0.85rem;
  border-radius: 2px;
}

/* --- HERO. El qualifier es subordinado: no puede medir lo mismo que
       la afirmación. --- */
.overflow-mass .qualifier {
  display: block;
  font-size: 0.34em;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  margin-bottom: 0.35em;
}

/* --- ABOUT. El retrato manda: es la única cara del sitio. --- */
#about .star-core {
  grid-template-columns: clamp(13rem, 30vw, 24rem) minmax(0, 1fr);
  /* Railroad Task AJ: column-gap restaurado en el contenedor de grilla
     REAL (medido: sin esto, .body y .plate-portrait quedaban a 0px de
     separación, tocándose). Mismo valor que el #about original
     pretendía, ahora en el elemento que de verdad lo lee. */
  column-gap: clamp(1.25rem, 4vw, 3.5rem);
}
#about .plate-portrait {
  width: 100%;
  max-height: none;
  aspect-ratio: 4 / 5;
}

/* --- HOW I THINK. Repensada: no son tarjetas, son declaraciones.
       Índice romano al margen, tipo grande, una línea que se llena al
       pasar por encima. Se lee como una lista de posturas, no como un
       bloque de blog. --- */
.stances li { position: relative; }

.stances a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.75rem, 5vh, 3.25rem) 0;
}

.stances .idx {
  font-family: var(--display);
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--line);
  padding-top: 0.55em;
}

.stances li::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--signal);
  transition: width 260ms cubic-bezier(.2,.7,.3,1);
}
.stances a:hover ~ ::after { width: 100%; }
.stances li:hover::after, .stances li:focus-within::after { width: 100%; }

.stances .go {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.stances a:hover .go { color: var(--signal-hi); }

/* --- EL MAPA. Faltaba salida visible: al abrirlo tapaba la página
       entera con papel casi opaco y parecía que el sitio se había
       bloqueado. Ahora cierra con botón, con clic fuera y con Escape. --- */
.map-close {
  position: absolute;
  top: clamp(1.1rem, 3vw, 2.25rem);
  right: clamp(1.25rem, 5vw, 5rem);
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.map-close:hover, .map-close:focus-visible { color: var(--ink); }

@media (max-width: 700px) {
  /* El colapso de columnas y el de los hijos van en el MISMO corte:
     separados (700 vs 620) dejaban una ventana 621-700px donde el
     retrato medía 22px (medido en Chromium). */
  #about .star-core { grid-template-columns: minmax(0, 1fr); }
  #about .kicker, #about .magnitude-1, #about .body,
  #about .about-facts, #about .plate-portrait { grid-column: 1; }
  #about .plate-portrait { grid-row: auto; width: min(18rem, 70%); margin-top: clamp(1rem, 3vw, 2rem); }
}

/* ============================================================
   v6.2 — bloques rehechos
   ============================================================ */

/* EL NOMBRE DEL PROYECTO/CLIENTE (la misma palabra hace las dos cosas
   aquí: "Banco BHD", "Redviver", "OPTIC"), EN EL HIGHLIGHT DE LA
   ESTRELLA. Es el ancla que se escanea: en una lista de casos, lo
   primero que busca cualquiera es DÓNDE. Le da a Trabajo un punto de
   entrada por proyecto sin añadir una tipografía más.
   Railroad Task J: emphasis ESTATICO, no interactivo -- lee el
   highlight por estrella (--accent-text), no el primario.
   Railroad Task K: peso al máximo cargado de Space Grotesk (700; la
   fuente variable carga 300-700, ver @font-face arriba). Era 500. */
.work-title b { font-weight: 700; color: var(--accent-text); }

/* LOS GLIFOS.
   No son iconos de interfaz: están hechos con el vocabulario que el sitio
   ya usa (círculos, puntos, líneas), que es el mismo del que sale todo lo
   demás. Trazo fino, sin relleno salvo el punto.
   El punto sólido va en TINTA, no en azul: con tres convicciones y cinco
   pasos a la vista serían ocho azules en pantalla y la Regla 3 se rompe.
   El azul sigue siendo de Betel, las palabras acentuadas y el nombre del
   cliente. */
.glyph {
  display: block;
  width: 34px; height: 34px;
  margin: 0 0 clamp(0.9rem, 2vh, 1.25rem);
  overflow: visible;
}
.glyph-sm { width: 30px; height: 30px; margin-bottom: 0.75rem; }
.glyph circle, .glyph path {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glyph .solid { fill: var(--ink); stroke: none; }

/* SE ENCIENDE AL ACERCARSE, Y SOLO EL QUE SE TOCA.
   El punto en reposo va en TINTA, no en azul. Esto es lo que NOTAS §5p ya
   decidió para Proceso y que aquí se había quedado en `--betel`: con las
   convicciones en fila, cada punto azul suma, y medido en el navegador eran
   OCHO azules en un viewport (4 puntos + 4 palabras acentuadas) contra el
   uno que permite la Regla 3. Al llegar el puntero o el foco, el glifo
   entero toma el azul: encendido hay uno solo, que es el que estás mirando. */
.beliefs .glyph .solid { fill: var(--ink); transition: fill 220ms linear; }
.beliefs li:hover .glyph .solid,
.beliefs li:focus-within .glyph .solid { fill: var(--signal); }
.beliefs .glyph circle,
.beliefs .glyph path { transition: stroke 220ms linear; }
.beliefs li:hover .glyph circle,
.beliefs li:hover .glyph path,
.beliefs li:focus-within .glyph circle,
.beliefs li:focus-within .glyph path { stroke: var(--signal); }

/* How I work: convicciones claras, numeradas, con enlace.
   auto-fit y no repeat(3): al añadir la cuarta (la IA), un 3 fijo dejaba
   una sola huérfana en la segunda fila. Ahora el numero de columnas sale
   del numero de convicciones y del ancho disponible, sin huecos. */
.beliefs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* LAS CONVICCIONES, VIVAS.
   Eran tres bloques quietos. Ahora la regla superior se DIBUJA al llegar
   el puntero o el foco, el glifo gira su anillo exterior, y se abre una
   línea más: la consecuencia de creer eso. Todo con transiciones secas
   (Regla 4), sin fades lentos ni nada que flote.
   Accesible por teclado: `:focus-within` hace lo mismo que `:hover`. */
.beliefs li {
  position: relative;
  border-top: 2px solid var(--line);
  padding-top: clamp(1rem,2.5vh,1.75rem);
  transition: border-color 200ms linear;
}
.beliefs li::before {
  content: "";
  position: absolute; top: -2px; left: 0;
  width: 0; height: 2px; background: var(--ink);
  transition: width 320ms cubic-bezier(.2,.7,.3,1);
}
.beliefs li:hover::before,
.beliefs li:focus-within::before { width: 100%; }

/* El glifo responde: el anillo exterior gira, el punto crece. */
.beliefs .glyph { transition: transform 260ms cubic-bezier(.2,.7,.3,1); }
.beliefs .glyph circle:first-child { transition: transform 600ms cubic-bezier(.2,.7,.3,1); transform-origin: 50% 50%; }
.beliefs li:hover .glyph circle:first-child,
.beliefs li:focus-within .glyph circle:first-child { transform: rotate(90deg) scale(1.06); }
.beliefs .glyph .solid { transition: transform 260ms cubic-bezier(.34,1.4,.5,1); transform-origin: 50% 50%; }
.beliefs li:hover .glyph .solid,
.beliefs li:focus-within .glyph .solid { transform: scale(1.6); }

/* LA CONSECUENCIA: una línea más que aparece al acercarse. grid-rows de
   0fr a 1fr anima el alto sin números mágicos ni max-height inventado. */
.belief-more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(.2,.7,.3,1),
              opacity 220ms linear;
  opacity: 0;
}
.belief-more > span { overflow: hidden; }
.beliefs li:hover .belief-more,
.beliefs li:focus-within .belief-more { grid-template-rows: 1fr; opacity: 1; }
/* La respuesta que se abre va en NEGRITA: es la consecuencia, el remate.
   Es la única negrita del sitio y por eso funciona: aparece sola, una vez,
   y solo cuando te acercas. */
.belief-more em {
  display: block; font-style: normal;
  padding-top: 0.85rem;
  font-size: 15px; line-height: 1.5; color: var(--ink);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .beliefs li::before, .beliefs .glyph circle:first-child,
  .beliefs .glyph .solid, .belief-more { transition: none; }
  .belief-more { grid-template-rows: 1fr; opacity: 1; }
}
.belief-n {
  margin: 0 0 clamp(0.75rem,2vh,1.25rem);
  font-family: var(--display); font-size: 13px; letter-spacing: 0.14em;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.beliefs h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 0.9rem + 1.2vw, 1.9rem);
  letter-spacing: -0.028em; line-height: 1.08; color: var(--ink);
}
.beliefs p { margin: 0 0 1rem; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.belief-link {
  font-size: 13px; letter-spacing: 0.06em; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--signal);
  padding-bottom: 0.2rem; transition: color 160ms linear;
}
.belief-link:hover, .belief-link:focus-visible { color: var(--signal-hi); }
@media (max-width: 820px) {
  .beliefs { grid-template-columns: 1fr; gap: clamp(1.75rem,5vh,3rem); }
}

/* ============================================================
   v6.3 — márgenes, cores con contenido, intersecciones
   ============================================================ */

/* Las secciones CON contenido denso (about, work, thinking) no centran su
   titular a pantalla completa: eso abría un hueco enorme entre el titular
   y el contenido. El core se vuelve un bloque compacto arriba, con aire
   suficiente para no chocar con la nav, y el detalle fluye justo debajo. */
.star:has(.star-detail) .star-core {
  min-height: auto;
  align-content: start;
  padding-top: calc(var(--nav-h) + 3vh);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* Un poco más de aire bajo la nav para todos: el titular no debe tocar el
   wordmark. Respeta el margen entre elemento y borde. */
.star-core { padding-top: calc(var(--nav-h) + 2vh); }

/* ============================================================
   PREGUNTAS FRECUENTES
   Van visibles, no plegadas: lo colapsado se indexa peor y se lee peor,
   y el objetivo aquí es justamente que se lea, tanto por una persona como
   por un buscador. Dos columnas para que no alarguen la sección.
   ============================================================ */
.faq {
  margin-top: clamp(3rem, 9vh, 6rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}
.faq-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--body); font-weight: 400;
  color: var(--ink-2);
}
.faq-item h3 {
  margin: 0 0 0.6rem; max-width: 32ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  letter-spacing: -0.026em; line-height: 1.2; color: var(--ink);
}
.faq-item p {
  margin: 0; max-width: 52ch;
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; }
}

/* Process: los cinco pasos en horizontal (cinturón de Mintaka). */
/* PROCESO ES UN RECORRIDO, NO UNAS FICHAS.
   Con los iconos puestos, Proceso y Cómo trabajo eran el mismo bloque dos
   veces: número, regla arriba, icono, título, párrafo. Pero no son lo
   mismo: Cómo trabajo son tres posturas independientes, y Proceso es UNA
   secuencia. Mintaka además vive sobre el ecuador celeste y se reparte en
   HORIZONTAL (Regla 9).
   Así que aquí hay una vía: una línea continua que atraviesa los cinco
   pasos, con cada icono como un nodo posado encima. Sin reglas superiores
   y sin cajas: es un trayecto, y se lee de izquierda a derecha. */
.steps {
  /* UN SOLO NÚMERO manda el tamaño del nodo y la altura de la vía. Estaban
     escritos por separado y al crecer el nodo la línea se quedó 8px por
     encima de los centros: la vía no pasaba por las estaciones. */
  --node: 46px;
  list-style: none; margin: clamp(2rem,5vh,3.5rem) 0 0; padding: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
/* La vía, exactamente a la altura del centro de los nodos. */
.steps::before {
  content: "";
  position: absolute; left: 0; right: 0;
  top: calc(var(--node) / 2);
  height: 1px; background: var(--line);
}
.steps li { border-top: 0; padding-top: 0; position: relative; }
/* EL NODO ES UNA ESTACIÓN, NO UN RECORTE.
   Con solo un fondo de papel y padding a la derecha, cada icono quedaba
   dentro de un rectángulo blanco que cortaba la línea: parecía un fallo
   de maquetación, no una parada. Ahora es un disco con su aro, posado
   sobre la vía. Un cuerpo en una órbita, que es el idioma de la casa. */
.steps .glyph {
  position: relative;
  width: var(--node); height: var(--node);
  padding: 9px;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  margin-bottom: clamp(1rem, 2.2vh, 1.5rem);
  transition: border-color 200ms linear;
}
.steps li:hover .glyph { border-color: var(--ink-2); }
.steps b {
  font-family: var(--display); font-weight: 400; font-size: 12px;
  letter-spacing: 0.14em; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.steps h3 {
  margin: 0.6rem 0 0.5rem;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 0.9rem + 1vw, 1.8rem);
  letter-spacing: -0.03em; color: var(--ink);
}
.steps p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* En estrecho la vía se rompe: una línea que salta de fila en fila no es
   un recorrido, es un error. Sin ella, cada paso se sostiene solo. */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vh,2.25rem) clamp(1rem,3vw,2rem); }
  .steps::before { display: none; }
  .steps .glyph { background: none; padding-right: 0; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   v7 — LAS LUNAS
   Cuerpos que orbitan una estrella. Un caso, un ensayo.

   Una luna NO viaja: se llega a ella. Por eso no lleva motor, no lleva
   Betel viajando y no lleva Mapa. Cero JavaScript: papel, tipografía y
   la luz de su estrella, quieta. Nada que se pueda romper.

   El punto del titular nace YA puesto (.placed): Betel llegó aquí, la
   idea está completa. Es la diferencia entre el cielo y el suelo.
   ============================================================ */

/* Eos sin motor. Los polos los coloca JS en el trayecto; aquí se posan
   por CSS y no se mueven, porque en una luna no hay tránsito que narrar.
   Cada luna hereda la LUZ de su estrella madre (Regla 9): las de Trabajo
   respiran el ultravioleta de Saiph, las de ensayo el lila de Bellatrix. */
.eos-static .eos-cold { transform: translate3d(28vw, 22vh, 0) scale(0.92); }
.eos-static .eos-warm { transform: translate3d(78vw, 82vh, 0) scale(1.04); }

/* Cada luna hereda la luz oscura de su estrella madre (mismos polos que la
   tabla LIGHT de orion.js, en su versión de cielo real). */
.luna-saiph    { --eos-cold: 44 32 82;  --eos-warm: 26 18 12; }
.luna-bellatrix{ --eos-cold: 34 40 86;  --eos-warm: 24 18 12; }

/* --- La nav de una luna: el wordmark y la vuelta al cielo. Sin Mapa:
       el overlay necesita JS y aquí no hay ninguno. Un enlace normal
       funciona siempre, que es exactamente la Regla Cero. --- */
.back {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: color 160ms linear;
}
.back:hover, .back:focus-visible { color: var(--ink); }

/* --- El cuerpo de la luna. Una sola columna medida, centrada. --- */
.luna {
  position: relative; z-index: 4;
  max-width: 74rem; margin: 0 auto;
  padding: calc(var(--nav-h) + 6vh) var(--pad) 0;
}

/* La cabecera: kicker, titular, entradilla. El titular llega a Magnitud 1
   pero una talla por debajo del hero: una luna no compite con su estrella. */

/* La medida va en el TITULAR, no en su contenedor. `ch` se resuelve
   contra la fuente del propio elemento: puesto en .luna-head, 30ch eran
   30 caracteres de Instrument Sans a 16px, o sea 320px, y el titular de
   75px caía a cuatro líneas de una palabra. Medido antes de verlo. */
.luna-head { max-width: none; }

/* El glifo de su convicción, sobre el kicker: el ensayo y la creencia de
   la que nace son la misma cosa, y el icono lo dice sin explicarlo. Su
   pieza viva va en el azul de Betel, igual que en Cómo trabajo.
   Railroad Task J: sin :hover/:focus-within -- pintado siempre, no un
   estado interactivo. Se trata igual que el glifo de creencias por
   instrucción explícita (va al PRIMARIO), no por regla derivada. */
.glyph-essay {
  width: 40px; height: 40px;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
}
.glyph-essay .solid { fill: var(--signal); }

.luna-title {
  margin: 0; max-width: 15ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 1rem + 4.6vw, 4.75rem);
  letter-spacing: -0.032em; line-height: 0.96;
}
.luna-title .point { opacity: 1; }   /* Betel ya llegó */

.luna-lede {
  margin: clamp(1.25rem, 3vh, 2rem) 0 0; max-width: 54ch;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.5; color: var(--ink-2);
}

/* La ficha. Cuatro datos en una regla: rol, año, alcance, equipo.
   Se lee de un vistazo y ancla el caso en lo concreto. */
.luna-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: clamp(2rem, 6vh, 3.5rem) 0 0;
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--line);
}
.luna-meta > div { padding-right: clamp(0.75rem, 2vw, 1.5rem); }
.luna-meta dt {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.luna-meta dd {
  margin: 0.5rem 0 0; font-size: 15px; line-height: 1.4; color: var(--ink);
}
@media (max-width: 720px) {
  .luna-meta { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,3vh,1.75rem) 0; }
}

/* La lámina de apertura: ancha, respira, y lleva pie como todo lo demás. */
.luna-plate { margin: clamp(2rem, 6vh, 4rem) 0 0; }
.luna-plate img {
  /* height:auto: sin ella, el atributo height del HTML fija la caja y
     el aspect-ratio se ignora — recorte brutal en teléfono (medido). */
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  /* En claro las láminas se FUNDÍAN con el papel por multiply. Sobre negro
     multiply las hunde a negro puro (desaparecen), así que se pasa a blend
     normal y se bajan de brillo: materia que sale de lo oscuro, no un
     rectángulo que grita. */
  filter: saturate(0.94) contrast(1.02) brightness(0.9);
  mix-blend-mode: normal;
}
.luna-plate figcaption { max-width: 46ch; }

/* --- Los capítulos. El ritmo interno del caso: número al margen,
       título y prosa medida. Repetición con variación: el esqueleto da
       el ritmo, el material da la variedad. --- */
.chapter {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 10vh, 6rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--line);
}
.chapter-n {
  margin: 0;
  font-family: var(--display); font-size: 13px; font-weight: 400;
  letter-spacing: 0.14em; color: var(--line);
  font-variant-numeric: tabular-nums;
}
.chapter h2 {
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem); max-width: 24ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  letter-spacing: -0.03em; line-height: 1.08;
}
.chapter p { margin: 0 0 1.1em; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
/* Nombres de proyecto dentro de un parrafo: se destacan por TINTA, no por
   peso. El sitio entero va en 400 (NOTAS §2.1) y la unica negrita es la
   respuesta de Como trabajo (§5r); cuatro <b> a 700 aqui la anulaban.
   Es el mismo recurso que ya usa .moves span em. */
.chapter p b:not(.stress) { font-weight: 400; color: var(--ink); }
.chapter p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}

/* La lista de decisiones dentro de un capítulo. Cada una es una elección
   con su porqué: es lo que separa un caso de una galería. */
.moves { list-style: none; margin: clamp(1.5rem,4vh,2.5rem) 0 0; padding: 0; display: grid; gap: 0; }
.moves li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2.5vh, 1.5rem) 0;
  border-top: 1px solid var(--line);
}
.moves li:first-child { border-top: 0; padding-top: 0; }
.moves b {
  font-family: var(--display); font-weight: 500; font-size: 15px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.moves span { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.moves span em { font-style: normal; color: var(--ink); }
/* Un parrafo despues de la lista necesita aire: pegado, y sin numero ni
   regla, se leia como un item mas al que se le habia olvidado el suyo. */
.chapter .moves + p { margin-top: clamp(1.75rem, 4.5vh, 3rem); }

/* Enlaces dentro de un capitulo. En TINTA subrayada, nunca en azul: el azul
   de la seccion ya se lo lleva la palabra .stress y la Regla 3 solo permite
   uno por pantalla. Un enlace no compite con la idea; se deja encontrar. */
.chapter a, .moves a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 160ms ease;
}
.chapter a:hover, .chapter a:focus-visible,
.moves a:hover, .moves a:focus-visible { text-decoration-color: var(--ink); }

/* La galería del caso. Mismo tratamiento que en el índice. */
.luna-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.6vw, 1.25rem);
  margin: clamp(2rem, 6vh, 3.5rem) 0 0;
}
.luna-gallery figure { margin: 0; }
.luna-gallery img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--line);
  /* En claro las láminas se FUNDÍAN con el papel por multiply. Sobre negro
     multiply las hunde a negro puro (desaparecen), así que se pasa a blend
     normal y se bajan de brillo: materia que sale de lo oscuro, no un
     rectángulo que grita. */
  filter: saturate(0.94) contrast(1.02) brightness(0.9);
  mix-blend-mode: normal;
}
@media (max-width: 620px) { .luna-gallery { grid-template-columns: 1fr; } }

/* El resultado. Los números grandes, con la misma ficha que About: es la
   prueba, y tiene que pesar más que la prosa que la rodea. */
/* El numero de columnas lo decide el numero de cifras VERIFICADAS, no la
   maqueta: con tres da tres (identico a antes), con dos da dos anchas en vez
   de dejar el hueco de la cifra que se retiro. auto-flow column en vez de
   repeat(auto-fit,minmax(0,1fr)), que generaba cientos de pistas fantasma. */
.outcome {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  border-top: 1px solid var(--line);
}
.outcome > div { padding: clamp(1.1rem,3vh,2rem) clamp(0.75rem,2vw,1.5rem) 0 0; }
.outcome dt {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  letter-spacing: -0.04em; line-height: 0.9; color: var(--ink);
}
.outcome dd { margin: 0.6rem 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
/* En estrecho vuelve a filas. Hay que devolver auto-flow a row: si no, la
   regla de arriba manda y las cifras siguen en una sola fila apretada. */
@media (max-width: 720px) {
  .outcome { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}

/* La cita. Un momento donde baja el ruido y habla una persona. */
.aside-note {
  margin: clamp(3rem, 9vh, 5rem) 0 0;
  padding: clamp(1.5rem, 4vh, 2.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.aside-note p {
  margin: 0; max-width: 34ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.1rem);
  letter-spacing: -0.028em; line-height: 1.22; color: var(--ink);
}

/* --- El ensayo. Prosa larga, una sola columna, nada más. --- */
.essay-body { max-width: 62ch; margin: clamp(2.5rem, 8vh, 4.5rem) 0 0; }
.essay-body p { margin: 0 0 1.3em; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.essay-body h2 {
  margin: clamp(2.5rem,7vh,4rem) 0 1rem; max-width: 26ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  letter-spacing: -0.03em; line-height: 1.1; color: var(--ink);
}
.essay-body blockquote {
  margin: clamp(2rem,6vh,3rem) 0; padding: 0 0 0 clamp(1rem,3vw,2rem);
  border-left: 2px solid var(--signal);
}
.essay-body blockquote p {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.75rem);
  letter-spacing: -0.028em; line-height: 1.28; color: var(--ink);
}

/* --- El pie de una luna. Nunca un callejón sin salida: se vuelve al
       cielo o se sigue al cuerpo siguiente. --- */
.luna-next {
  margin-top: clamp(4rem, 12vh, 7rem);
  padding: clamp(2rem, 6vh, 3.5rem) 0 clamp(3rem, 8vh, 5rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline; justify-content: space-between;
}
.luna-next-label {
  margin: 0 0 0.6rem;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.luna-next a {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink); text-decoration: none;
  transition: color 160ms linear;
}
.luna-next a:hover, .luna-next a:focus-visible { color: var(--signal); }




/* ============================================================
   v8 — EL CIERRE (27 ago 2026). Reglas nuevas, presente en mano:
   el rojo es la casa, las intersecciones no existen, las fotos son
   reales y el pie es un pie. Todo lo de abajo se verifica mirando
   la página renderizada, no leyendo este archivo.
   ============================================================ */

/* El pie del hero: la línea de proceso y las disciplinas, ancladas
   abajo como en el mockup. En pantallas bajas vuelven al flujo. */
.hero-foot {
  position: absolute;
  left: var(--pad); right: var(--pad);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; flex-wrap: wrap;
}
.hero-foot p { margin: 0; font-size: 14px; color: var(--ink-2); }
.hero-foot b { font-weight: 600; color: var(--ink); }
.hero-foot .disciplines-line {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 400; max-width: none;
}
.hero-foot .disciplines-line span { white-space: nowrap; }
@media (max-height: 600px), (max-width: 620px) {
  .hero-foot {
    position: static;
    /* Sin esto se auto-coloca en la columna 1 (la del marginalia
       vertical), la infla y deja la columna del monumento en 0px:
       el hero entero se salía de la pantalla. Medido en teléfono. */
    grid-column: 1 / -1;
    margin-top: clamp(1.5rem, 5vh, 2.5rem);
    flex-direction: column; gap: 0.6rem; align-items: flex-start;
  }
}

/* La subline del hero: la frase que le dice a cualquiera, del área o
   no, qué es esto. Más presente que un body normal. */
.hero-subline { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); color: var(--ink); }

/* La ficha de About: tres hechos, sin años. */
.about-facts {
  grid-column: 2;
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: start; gap: clamp(1.25rem, 4vw, 3rem);
  margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0;
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--line);
}
.about-facts dt {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.about-facts dd { margin: 0.35rem 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 620px) {
  .about-facts { grid-column: 1; grid-template-columns: 1fr; gap: 0.9rem; }
}

/* El pie de foto del retrato. */
.cap-sub {
  display: inline-block; margin-top: 0.15rem;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* La última palabra y su punto viajan juntos: un punto huérfano en su
   propia línea se lee como un error de composición. */
.nb { white-space: nowrap; }

/* Los dos caminos de contacto, imposibles de no ver. */
.reach-ctas {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin: clamp(1.25rem, 3vh, 2rem) 0 clamp(1.1rem, 2.5vh, 1.5rem);
}
.cta-main, .cta-alt {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 180ms linear, color 180ms linear, border-color 180ms linear;
}
.cta-main { color: var(--ink); border: 1px solid var(--signal); }
.cta-main:hover, .cta-main:focus-visible { background: var(--signal); color: #FFF2BF; }
.cta-alt { color: var(--ink-2); border: 1px solid var(--line); }
.cta-alt:hover, .cta-alt:focus-visible { color: var(--ink); border-color: var(--ink-2); }


/* ============================================================
   v9 — ABOUT SEGÚN EL MOCKUP DE FRAN + PROYECTOS + PIE CON CONTACTO
   (27 ago 2026). El About es tres columnas como su diseño: título
   grande y ficha a la izquierda, retrato al centro, "Short sentences,
   long story." y la bio a la derecha. En móvil deja de imitar al
   escritorio: título, foto grande, historia, ficha — en ese orden.
   ============================================================ */

#about .star-core {
  grid-template-columns: minmax(0, 0.95fr) minmax(14rem, 21rem) minmax(0, 1.15fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
#about { text-align: left; }
#about .magnitude-1 {
  grid-column: 1; grid-row: 1;
  align-self: end;
  max-width: 7ch;
  font-weight: 700;
}
#about .about-facts {
  grid-column: 1; grid-row: 2;
  align-self: start;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.25rem, 3vh, 2rem);
}
#about .plate-portrait {
  grid-column: 2; grid-row: 1 / span 2;
  justify-self: center;
  width: 100%;
  margin: 0;
}
.about-right { grid-column: 3; grid-row: 1 / span 2; }
.about-head {
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem);
  letter-spacing: -0.032em; line-height: 1.05; color: var(--ink);
}
.about-right .body { margin-top: 0; }

@media (max-width: 860px) {
  #about .star-core { grid-template-columns: minmax(0, 1fr); }
  #about .magnitude-1 { grid-column: 1; grid-row: auto; max-width: none; align-self: auto; }
  #about .plate-portrait {
    grid-column: 1; grid-row: auto;
    width: min(24rem, 88%); justify-self: start;
    margin: clamp(1.25rem, 3.5vh, 2rem) 0 0;
  }
  .about-right { grid-column: 1; grid-row: auto; margin-top: clamp(1.25rem, 3.5vh, 2rem); }
  #about .about-facts {
    grid-column: 1; grid-row: auto;
    grid-template-columns: repeat(3, auto);
    justify-content: start; gap: clamp(1.25rem, 5vw, 2.5rem);
  }
}
@media (max-width: 560px) {
  #about .about-facts { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* Una tarjeta de proyecto puede llevar UNA lámina protagonista. */
.work-gallery.single { grid-template-columns: 1fr; }

/* El historial laboral no vive aquí: vive en LinkedIn, y se dice. */
.work-history {
  margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  font-size: 14px; color: var(--ink-2);
}
.work-history a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--signal);
  transition: color 160ms linear;
}
.work-history a:hover, .work-history a:focus-visible { color: var(--signal-hi); }

/* El contacto del pie: inconfundible, con su propia llamada. */
.foot-cta {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--signal);
  color: var(--ink) !important;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
}
.foot-cta:hover, .foot-cta:focus-visible {
  background: var(--signal); color: #FFF2BF !important;
}

/* MÓVIL RESPIRA. El home no es el escritorio apretado: más aire entre
   estrellas, entre proyectos y en el detalle. */
@media (max-width: 700px) {
  :root { --transit: 46vh; }
  .star-detail { padding-top: clamp(1.5rem, 5vh, 2.5rem); }
  .work { padding: clamp(2.25rem, 8vh, 4rem) 0; }
  .work-gallery { grid-template-columns: 1fr; gap: 0.9rem; }
  .work-title { font-size: clamp(1.4rem, 1.1rem + 2.6vw, 2rem); }
  .faq { gap: clamp(1.75rem, 5vh, 2.5rem); }
  .beliefs { gap: clamp(2rem, 6vh, 3rem); }
  .hero-subline { font-size: clamp(1.1rem, 1rem + 1.2vw, 1.3rem); }
  .reach-ctas { flex-direction: column; align-items: stretch; }
  .cta-main, .cta-alt { text-align: center; }
}

/* Un enlace dentro de la entradilla de un proyecto: tinta subrayada en
   rojo, nunca el azul por defecto del navegador (visto en captura). */
.luna-lede a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px;
  text-decoration-color: var(--signal);
  transition: color 160ms linear;
}
.luna-lede a:hover, .luna-lede a:focus-visible { color: var(--signal-hi); }


/* ============================================================
   v10 — EL HERO ES EL MISMO EN TODAS PARTES + EL MUNDO EMBEBIDO
   (27 ago 2026). El hero móvil imitaba mal al de escritorio: el
   marginalia se volvía horizontal y el monumento perdía tamaño.
   Ahora la retícula del hero es REAL (vive en .star-core, no en la
   sección), el Artifex va vertical en todos los anchos, y en
   teléfono el monumento sube de cuerpo: el impacto es la sección.
   ============================================================ */
#hero .star-core {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 4vw, 4rem);
}
#hero .kicker-vertical { grid-column: 1; grid-row: 1 / span 4; }
#hero .overflow-mass, #hero .hero-subline, #hero .drop { grid-column: 2; }

@media (max-width: 620px) {
  /* El marginalia NO se aplana: es la misma composición que escritorio. */
  #hero .star-core { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; }
  .kicker-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    justify-self: start; align-self: center;
    margin: 0;
  }
  /* El monumento manda también en teléfono. */
  .overflow-mass { font-size: min(1.1rem + 15vw, 22svh); }
  .hero-subline { font-size: clamp(1.15rem, 1rem + 1.6vw, 1.4rem); }
}

/* El mundo vivo, embebido en su propia página. */
.luna-embed {
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
  border: 1px solid var(--line);
}
.luna-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) {
  .luna-embed { aspect-ratio: 3 / 4; }
}


/* v10.1 — criterio propio (27 ago 2026):
   1. Las láminas de proyecto muestran PANELES deliberados (marcas,
      roadmaps, bocetos) con proporciones propias: forzarlos a 16:9
      los recortaba (visto: el logo de Reportero decapitado). El ratio
      natural es el correcto; el ancho manda y el alto acompaña.
   2. En columnas estrechas, About sigue el orden del mockup:
      título → foto → historia → ficha. */
.luna-plate img { aspect-ratio: auto; object-fit: unset; }
.luna-gallery img { aspect-ratio: auto; object-fit: unset; }

@media (max-width: 860px) {
  #about .magnitude-1 { order: 1; }
  #about .plate-portrait { order: 2; }
  #about .about-right { order: 3; }
  #about .about-facts { order: 4; }
}


/* ============================================================
   v11 — LA PORTADA DE UN PROYECTO ES SU MEJOR ARGUMENTO
   (28 ago 2026). Una tarjeta de proyecto llevaba dos imágenes
   medianas; ahora lleva UNA portada grande, con un realce al pasar
   el puntero. Una portada que no se puede mirar no vende nada.
   ============================================================ */
.work-gallery.single figure { aspect-ratio: 16 / 9; }
.work-gallery img { transition: transform 520ms cubic-bezier(.2,.7,.3,1), filter 320ms linear; }
.work:hover .work-gallery img,
.work:focus-within .work-gallery img { transform: scale(1.02); filter: saturate(1) contrast(1.04) brightness(1); }

/* El índice del proyecto y su título comparten una línea de aire:
   la tarjeta se lee como una pieza, no como tres bloques sueltos. */
.work-idx { color: var(--signal-hi); }

/* La portada respira antes del título. */
.work-gallery { margin-bottom: clamp(1.25rem, 3.5vh, 2.25rem); }

/* En teléfono la portada manda: ancho completo, sin margen lateral
   propio, para que se vea como una lámina y no como una miniatura. */
@media (max-width: 620px) {
  .work-gallery.single figure { aspect-ratio: 4 / 3; }
}


/* ============================================================
   v12 — LA PÁGINA DE PROYECTO ERA UNA COLUMNA ABANDONADA
   (28 ago 2026). Vista entera y no por recortes, la página se leía
   como un fallo: una columna estrecha pegada a la izquierda, media
   pantalla vacía a la derecha, la portada flotando pequeña en medio
   y huecos verticales enormes. Se rehace como una editorial: una
   medida de lectura centrada, y las láminas ROMPIENDO esa medida
   hacia los lados. Sin 100vw: el ancho de la barra de scroll no
   puede recortar nada.
   ============================================================ */
.luna { max-width: 64rem; }
.luna-title { max-width: 17ch; }
.luna-lede { max-width: 58ch; }

/* Las láminas rompen la columna — pero SOLO donde sobra sitio. La
   columna mide 64rem; por debajo de 1100px no hay margen que romper y
   forzarlo sacaba la lámina fuera de la pantalla (medido: -15px en
   tablet). Debajo de ese ancho, la lámina llena su columna y ya. */
@media (min-width: 1100px) {
  .luna-plate, .luna-gallery, .luna-embed {
    margin-left: calc(-1 * clamp(0rem, 7vw, 9rem));
    margin-right: calc(-1 * clamp(0rem, 7vw, 9rem));
  }
  /* El pie vuelve al borde de la columna de lectura. Con padding
     quedaba 100px de relleno dentro de una caja de 398: tres líneas
     cortas debajo de una lámina ancha, que se leía como un error. */
  .luna-plate figcaption,
  .luna-gallery figcaption {
    padding: 0;
    margin-left: clamp(0rem, 7vw, 9rem);
  }
}
.luna-plate img { max-height: 76svh; object-fit: cover; object-position: center; }

/* El capítulo: número al margen, y titular y prosa en la MISMA medida,
   para que la columna se lea intencional y no truncada. */
.chapter h2 { max-width: 20ch; }
.chapter p { max-width: 58ch; }

/* El remate. Antes: dos bloques con un vacío enorme encima, que en
   pantallas medias se apilaban en escalera. */
.luna-next {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: end;
  margin-top: clamp(2.5rem, 7vh, 4rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
}
.luna-next a { display: inline-block; }
@media (max-width: 700px) {
  .luna-next { grid-template-columns: 1fr; }
}

/* La cita respira, pero no abre un cráter. */
.aside-note { margin-top: clamp(2.5rem, 7vh, 4rem); }
.aside-note p { max-width: 30ch; font-size: clamp(1.35rem, 1rem + 1.8vw, 2.4rem); }

/* ============================================================
   v12.1 — SOBRE MÍ NO SE ESTRANGULA EN PANTALLAS MEDIAS.
   Medido: a 900px de ancho la biografía caía a 220px de columna
   (unos 25 caracteres). Las tres columnas necesitan ~1200px para
   respirar; por debajo, se apilan.
   ============================================================ */
#about .star-core {
  grid-template-columns: minmax(0, 0.85fr) minmax(12rem, 19rem) minmax(0, 1.3fr);
}
@media (max-width: 1200px) {
  #about .star-core { grid-template-columns: minmax(0, 1fr); }
  #about .magnitude-1 { grid-column: 1; grid-row: auto; max-width: none; align-self: auto; order: 1; }
  #about .plate-portrait {
    grid-column: 1; grid-row: auto; order: 2;
    width: min(24rem, 88%); justify-self: start;
    margin: clamp(1.25rem, 3.5vh, 2rem) 0 0;
  }
  .about-right { grid-column: 1; grid-row: auto; order: 3; margin-top: clamp(1.25rem, 3.5vh, 2rem); }
  #about .about-facts {
    grid-column: 1; grid-row: auto; order: 4;
    grid-template-columns: repeat(3, auto);
    justify-content: start; gap: clamp(1.25rem, 5vw, 2.5rem);
  }
}
@media (max-width: 560px) {
  #about .about-facts { grid-template-columns: 1fr; gap: 0.9rem; }
}


/* ============================================================
   v12.2 — EL MONUMENTO CABE EN SU PANTALLA
   (28 ago 2026). Medido: en teléfono la palabra española del hero
   ("CONSTRUYO." con su punto, en nowrap para que el punto no quede
   huérfano) medía 429px en un viewport de 390 y se cortaba. El
   inglés ("I BUILD.") cabe de sobra. La palabra más larga manda:
   el monumento español baja un punto de cuerpo en anchos estrechos.
   No es una excepción sucia: es lo que hace un tipógrafo cuando el
   idioma cambia la longitud de la palabra.
   ============================================================ */
@media (max-width: 620px) {
  html[lang="es"] .overflow-mass { font-size: min(0.7rem + 11.6vw, 19svh); }
}
@media (min-width: 621px) and (max-width: 900px) {
  html[lang="es"] .overflow-mass { font-size: min(0.5rem + 9.5vw, 24svh); }
}


/* v12.3 — la medida de la columna y su contenedor acuerdan. Antes el
   contenedor era 64rem y el texto se cortaba en 58ch: 200px muertos a
   la derecha en cada párrafo, que es lo que hacía ver la página como
   una columna abandonada. */
.luna { max-width: 60rem; }
.luna-plate figcaption, .luna-gallery figcaption { max-width: 54ch; }


/* v12.4 — una lámina VERTICAL no se recorta en banda. Medido: el
   boceto del portal (1000x1163) chocaba con el tope de 76svh y
   `object-fit: cover` lo cortaba a una tira. Las verticales van a su
   proporción natural, centradas y con el mismo techo de altura. */
.luna-plate.portrait img {
  width: auto; max-width: 100%;
  height: auto; max-height: 76svh;
  object-fit: unset;
  margin: 0 auto; display: block;
}


/* ============================================================
   v13 — LA PÁGINA DEJA DE ASUMIR QUE TE VAN A LEER ENTERA
   (28 ago 2026). Un desconocido pregunta, en este orden: qué es
   esto, puedo confiar, muéstrame, qué haces por mí, quién eres,
   cómo trabajas, cuánto cuesta, hablemos. La estructura ahora
   responde en ese orden y cada bloque termina en gancho.
   ============================================================ */

/* --- Los botones del hero. Antes la única salida era una flecha. --- */
.hero-ctas {
  grid-column: 2;
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: clamp(1.1rem, 3vh, 1.75rem);
}
@media (max-width: 620px) {
  .hero-ctas { grid-column: 2; gap: 0.6rem; }
  .hero-ctas .cta-main, .hero-ctas .cta-alt { padding: 0.7rem 1.1rem; font-size: 12px; }
}

/* --- LA PRUEBA. La pregunta 2 de cualquiera que llega. --- */
.proof {
  position: relative; z-index: 4;
  padding: clamp(3rem, 9vh, 6rem) var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: clamp(2rem, 6vh, 4rem) var(--pad) 0;
}
.proof-inner { max-width: 76rem; margin: 0 auto; }
.proof-line {
  margin: 0.4rem 0 clamp(1.5rem, 4vh, 2.5rem);
  max-width: 46ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.7rem);
  letter-spacing: -0.025em; line-height: 1.25; color: var(--ink);
}
/* Nueve marcas. auto-fit dejaba a Redviver solo en una segunda fila,
   que se lee como un error. Los cortes son explícitos: 9, 5, 3. */
.client-wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: clamp(0.4rem, 1vw, 0.75rem);
}
@media (max-width: 1100px) { .client-wall { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 620px)  { .client-wall { grid-template-columns: repeat(3, 1fr); } }
.client-wall li { margin: 0; }
.client-wall img {
  display: block; width: 100%; height: auto;
  border-radius: 3px;
  filter: saturate(0.9);
  opacity: 0.86;
  transition: opacity 200ms linear, filter 200ms linear;
}
.client-wall li:hover img { opacity: 1; filter: saturate(1); }
.proof-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: clamp(1.75rem, 4.5vh, 2.75rem) 0 0;
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--line);
}
.proof-facts dt {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  letter-spacing: -0.035em; line-height: 1; color: var(--ink);
}
.proof-facts dd { margin: 0.55rem 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 26ch; }
@media (max-width: 700px) {
  .proof-facts { grid-template-columns: 1fr; gap: 1.25rem; }
  .client-wall { grid-template-columns: repeat(3, 1fr); }
}

/* --- La tarjeta de proyecto remata con un resultado. --- */
.work-sector {
  margin-left: 0.9rem; padding-left: 0.9rem;
  border-left: 1px solid var(--line);
  color: var(--ink-2); letter-spacing: 0.12em;
}
.work-result {
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  padding-top: clamp(0.9rem, 2vh, 1.25rem);
  border-top: 1px solid var(--line);
  max-width: 52ch;
}
.work-result b {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  letter-spacing: -0.03em; color: var(--signal-hi);
}
.work-result span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* Un escáner que ya se convenció no debe viajar hasta el final. */
.work-closer {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  padding-top: clamp(1.5rem, 4vh, 2.25rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(0.75rem, 3vw, 2rem);
}
.work-closer p { margin: 0; }
.work-closer p:first-child {
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  letter-spacing: -0.028em; color: var(--ink);
}

/* --- QUÉ PUEDO HACER POR TI. En idioma de cliente, no de gremio. --- */
.offers-head { max-width: 46ch; margin-bottom: clamp(1.75rem, 5vh, 3rem); }
.offers-title {
  margin: 0 0 clamp(0.9rem, 2vh, 1.25rem);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
  letter-spacing: -0.032em; line-height: 1.05; color: var(--ink);
}
.offers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.offers li { border-top: 2px solid var(--line); padding-top: clamp(1rem, 2.5vh, 1.5rem); }
.offer-n {
  margin: 0 0 0.75rem;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.14em;
  color: var(--signal-hi); font-variant-numeric: tabular-nums;
}
.offers h3 {
  margin: 0 0 0.7rem;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem);
  letter-spacing: -0.028em; line-height: 1.1; color: var(--ink);
}
.offers p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.offers-cta { margin-top: clamp(1.75rem, 4.5vh, 2.75rem); }

/* La proporción del chip sigue a la del archivo (320x168): sin esto,
   el alto lo fijaba el atributo height y la marca quedaba minúscula. */
.client-wall img { aspect-ratio: 320 / 168; object-fit: contain; }