/* ============================================================
   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 {
  --bg:     #FAF8F3;
  --ink:    #0B0905;
  /* El maestro define #757063. Medido sobre el campo real, ese valor da
     4.65 sobre papel pero cae a 3.76 sobre el polo de Saiph y 3.75 en el
     filo de la viñeta: por debajo de AA. El texto secundario dejaba de
     leerse justo donde la luz aprieta. #635E52 mantiene >=4.9 contra
     CUALQUIER fondo del sistema. La luz de color obliga a esto. */
  --ink-2:  #635E52;
  --line:   #C7C2B7;
  /* v6 unifica el azul: Betel, el punto del wordmark y las palabras
     acentuadas son EL MISMO color. Un solo azul en todo el sistema. */
  --signal: #006AB8;
  --halo:   #006AB8;

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

  /* Desenfoque bajo: sin snap, el visitante puede quedarse a mitad de
     tránsito, y un titular muy borroso ahí se ve roto, no "lejos".
     1.2px insinúa distancia sin volver ilegible lo que quede en reposo. */
  --blur-max: 0.7px;
  --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. */
  --eos-cold: 226 234 244;
  --eos-warm: 247 240 226;
}

@media (max-width: 780px) { :root { --blur-max: 0.8px; --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;
  /* Viñeta muy leve, y solo en el filo. Teñir el papel entero no crea
     espacio: ensucia el papel. La profundidad la ponen los cuerpos, las
     atmósferas y las rayas; el fondo solo tiene que dejar de ser plano. */
  background:
    radial-gradient(135% 110% at 50% 44%,
      rgba(250,248,243,0) 62%,
      rgba(238,232,219,0.32) 86%,
      rgba(231,224,208,0.5) 100%);
}

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

/* Dos temperaturas en tensión, ahora de verdad. Antes eran tan tenues
   que el ojo no las separaba y el campo se leía plano: había volumen
   sobre el papel, pero no espacio. Siguen siendo grises de temperatura,
   no tonos: nada compite con el azul de Betel (Regla 8). */
/* Dos temperaturas en tensión, pero sobre papel blanco cálido: el fondo
   sigue siendo #FAF8F3 y se le nota. Lo suficiente para que el ojo lea
   volumen; no tanto como para teñir la página de beige. */
/* Tope de intensidad 0.6: medido, por encima de eso el azul de acento
   (#006AB8) cae por debajo de AA sobre el polo de Saiph. El color de la
   luz no puede costar la legibilidad del texto que ilumina.
   Los polos toman su color de la estrella en la que estás. JS interpola
   --eos-cold / --eos-warm entre sistemas, así que el campo CAMBIA DE LUZ
   al viajar: cada estrella ilumina su espacio de otra manera. El blanco
   cálido del papel sigue siendo la base; esto es la luz encima. */
.eos-cold {
  width: 3400px; height: 3400px; margin: -1700px 0 0 -1700px;
  background: radial-gradient(circle closest-side,
    rgb(var(--eos-cold) / 0.6) 0%,
    rgb(var(--eos-cold) / 0.42) 34%,
    rgb(var(--eos-cold) / 0.2) 64%,
    rgb(var(--eos-cold) / 0) 84%);
}

.eos-warm {
  width: 2900px; height: 2900px; margin: -1450px 0 0 -1450px;
  background: radial-gradient(circle closest-side,
    rgb(var(--eos-warm) / 0.6) 0%,
    rgb(var(--eos-warm) / 0.42) 36%,
    rgb(var(--eos-warm) / 0.2) 66%,
    rgb(var(--eos-warm) / 0) 86%);
}

/* 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.
   Nace invisible. Betel lo deja puesto al partir: tinta profunda,
   permanente. La trayectoria queda escrita. */
.point {
  display: inline-block;
  width: 0.18em; height: 0.18em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0;
  vertical-align: baseline;
}

/* El punto AÚN NO alcanzado no es invisible: es un destino. Se insinúa
   para que se vea a dónde va Betel. Al partir queda puesto en tinta
   plena, y esa diferencia entre fantasma y tinta ES la trayectoria. */
.point { opacity: 0.22; }
.point.placed { opacity: 1; }

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

.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); }

.coords {
  position: fixed; z-index: 10;
  right: var(--pad); bottom: clamp(1.1rem, 4vw, 3rem);
  margin: 0; font-size: 13px; letter-spacing: 0.14em;
  /* Susurro, no invisibilidad: a --line quedaba en 1.67 y no se leía. */
  color: #ADA795; user-select: none;
}

/* ============================================================
   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;
}

#hero .disciplines-line { grid-column: 2; }

.disciplines-line { max-width: none; color: var(--ink-2); }

/* --- 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 {
  justify-items: end;
  text-align: right;
  /* Pista fija para el retrato. Con `auto` el titular se comía el reparto
     y empujaba la columna 1 fuera del viewport por la izquierda. */
  grid-template-columns: clamp(8rem, 18vw, 15rem) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 4vw, 3.5rem);
  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; }

.belt-diagonal {
  position: absolute;
  left: -10%; right: -10%; top: 50%;
  height: 1px;
  background: var(--line);
  transform: rotate(-19deg);      /* el ángulo del cinturón real */
  transform-origin: 50% 50%;
}

.numeral {
  position: absolute;
  right: var(--pad);
  top: 50%;
  margin: 0;
  transform: translateY(-58%);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(5rem, 2rem + 16vw, 16rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.07;                  /* pisa la línea sin gritar */
  pointer-events: none;
}

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

/* --- MINTAKA: el cinturón sigue. Cuatro puntos en un mismo eje. --- */
.belt-list {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.25rem, 3vw, 2rem);
}
.belt-list li { display: grid; gap: 0.35rem; }
.belt-list span { font-size: 15px; font-weight: 700; color: var(--ink); }
.belt-list em { font-style: normal; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* --- SAIPH: la espada. Corte vertical central, los pasos alternan. --- */
.blade {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.blade::before {                   /* el corte */
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.blade li {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5rem;
  align-items: baseline;
  width: 50%;
}
.blade li:nth-child(odd)  { justify-self: start; justify-content: end;  text-align: right; padding-right: clamp(0.9rem, 2vw, 2rem); }
.blade li:nth-child(even) { justify-self: end;   justify-content: start; text-align: left;  padding-left:  clamp(0.9rem, 2vw, 2rem); grid-template-columns: auto auto; }
.blade b { font-family: var(--display); font-size: 12px; color: var(--line); font-weight: 700; }
.blade span { font-size: 16px; font-weight: 700; color: var(--ink); }
.blade em { font-style: normal; font-size: 14px; color: var(--ink-2); grid-column: 1 / -1; }

/* --- 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;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  mix-blend-mode: multiply;   /* 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: end; }

/* --- 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. */
#contact { align-content: end; }
.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 .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);
  }
  .blade li,
  .blade li:nth-child(odd),
  .blade li:nth-child(even) {
    width: 100%; justify-self: start; justify-content: start;
    text-align: left; padding: 0 0 0 1.25rem;
    grid-template-columns: 1.75rem 1fr;   /* el número manda su columna */
    column-gap: 0.35rem;
  }
  .blade::before { left: 0; }

  /* El 18 se salía por la derecha. Aquí se ancla al borde y se mide
     contra el alto, que es lo escaso en vertical. */
  .numeral {
    right: 0;
    font-size: min(34vw, 22svh);
    opacity: 0.06;
  }

  /* La diagonal de Alnitak necesita más recorrido en una pantalla
     estrecha, si no solo se ven dos muñones en los bordes. */
  .belt-diagonal { left: -40%; right: -40%; transform: rotate(-32deg); }

  .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; }

.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(250 248 243 / 0.94);
  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);
}
.map-foot { color: #ADA795; 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); }
.map-stars a[aria-current="true"] span { color: var(--signal); }

/* --- LA PALABRA ACENTUADA. Una por parrafo. No es un enlace: es la
       palabra que subirias de voz al leerlo. --- */
.stress { color: var(--signal); font-weight: inherit; }

/* --- 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 { 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);
}

/* --- METEOROS. Viven en el transito, entre estrellas. Nunca enlazan,
       nunca son un CTA: son textura entre cuerpos de trabajo. --- */
.meteoro {
  position: relative; z-index: 4;
  display: grid; justify-items: center;
  padding: clamp(3rem, 14vh, 9rem) var(--pad);
  text-align: center;
}
.meteoro-text p {
  margin: 0; max-width: 26ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.1rem);
  letter-spacing: -0.028em; line-height: 1.25; color: var(--ink);
}
.meteoro-object .plate { margin: 0; width: min(26rem, 70%); aspect-ratio: 3 / 2; }
.meteoro-object figcaption { text-align: center; }
.meteoro-micro p {
  margin: 0; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --- ABOUT: el numero gigante y la fila de hechos. --- */
.giant-number {
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  font-family: var(--body); font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 0.75rem;
}
.giant-number span {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3.5rem, 2rem + 6vw, 8rem);
  letter-spacing: -0.04em; line-height: 0.85; color: var(--ink);
}
.facts {
  list-style: none; margin: 0; padding: clamp(1rem, 3vh, 1.75rem) 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  font-size: 15px; 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;
  color: var(--line); font-variant-numeric: tabular-nums;
}

.work-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}
.work-gallery figure { margin: 0; overflow: hidden; background: var(--line); aspect-ratio: 3 / 2; }
.work-gallery img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  mix-blend-mode: multiply;
}

/* 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);
}

.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); }

.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 { border-color: var(--signal); color: var(--signal); }

.sky-foot {
  position: relative; z-index: 4;
  padding: clamp(2rem, 6vh, 4rem) var(--pad) clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--line);
  margin: 0 var(--pad);
}
.sky-foot p { margin: 0; font-size: 13px; color: var(--ink-2); }

@media (max-width: 860px) {
  .work-gallery { grid-template-columns: repeat(2, 1fr); }
  .work-details { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .map-trigger-label { display: none; }
  .meteoro-object .plate { width: 100%; }
}

/* ============================================================
   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. --- */
.sky-nav > * {
  background: rgb(250 248 243 / 0.86);
  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);
}
#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); }

/* --- 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 { color: var(--ink); }

@media (max-width: 700px) {
  #about .star-core { grid-template-columns: minmax(0, 1fr); }
  #about .plate-portrait { width: min(18rem, 70%); }
}

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

/* Fila de datos de About: alineada, con reglas, se lee como ficha. */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: clamp(1.5rem,4vh,3rem) 0 0;
  border-top: 1px solid var(--line);
}
.stat-row > div {
  padding: clamp(1.1rem,3vh,2rem) clamp(0.75rem,2vw,1.5rem) 0 0;
}
.stat-row dt {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.25rem,1.2rem+3vw,4rem);
  letter-spacing: -0.04em; line-height: 0.9; color: var(--ink);
}
.stat-row dd {
  margin: 0.5rem 0 0; font-size: 13px; line-height: 1.4;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,3vh,2rem) 0; }
}

/* How I work: tres convicciones claras, numeradas, con enlace. */
.beliefs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.beliefs li { border-top: 2px solid var(--ink); padding-top: clamp(1rem,2.5vh,1.75rem); }
.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); }
@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); }

/* ---- INTERSECCIONES entre CADA par de secciones ----
   Un momento en el vacío: una marca, una línea corta, mucho espacio. No
   son texto suelto: son un respiro con glamour. La raya y el punto azul
   las anclan a la identidad. */
.meteoro {
  padding: clamp(4rem, 16vh, 11rem) var(--pad);
}
.meteoro-text::before,
.meteoro-micro::before {
  content: "";
  display: block;
  width: 1px; height: clamp(2rem, 6vh, 4rem);
  margin: 0 auto clamp(1.5rem, 4vh, 2.5rem);
  background: linear-gradient(var(--line), transparent);
}
.meteoro-text p {
  position: relative;
}
.meteoro-text p::after {
  content: "";
  display: block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal);
  margin: clamp(1.25rem, 3vh, 2rem) auto 0;
}

/* Process: los cinco pasos en horizontal (cinturón de Mintaka). */
.steps {
  list-style: none; margin: clamp(1.5rem,4vh,3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.steps li { border-top: 2px solid var(--ink); padding-top: clamp(0.9rem,2vh,1.4rem); }
.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); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,4vh,2rem) clamp(1rem,3vw,2rem); }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}