/* Archivo — SOLO para el wordmark de la entrada, que tiene que ser idéntico
   al de freemindiyt.com. El resto del sitio sigue en Inter, que es su voz. */
@font-face {
  font-family: 'Archivo Entrada';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url('../fonts/archivo-variable-latin.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════════════════════
   FreeMind Research Lab — main.css

   Dos colores de marca: BLANCO y el AZUL DE ORIGIN (#1646dc), sobre
   NEGRO. El negro manda —igual que en el sitio del grupo—: el azul entra
   como halo, acento y señal, nunca como campo plano ni como tinte del
   fondo. El fondo es negro con constelaciones y estrellas contadas; el
   vidrio (glass) es lo único que separa el contenido de él.

   Esta hoja lleva el SISTEMA BASE (tokens, reset, tipografía, layout,
   botones, aparición al hacer scroll) y la PÁGINA DE INICIO. Algunas
   utilidades —.h2, .lead, .eyebrow, .reveal, .sec, los botones— todavía
   no aparecen en index.html: son del sistema y las estrenan las páginas
   siguientes, cuyo marcado espera en _borradores/ y cuyos estilos
   propios están en secciones.css, sin enlazar.

   Orden: tokens · reset · tipografía · layout · fondo · telón ·
   cabecera · botones · home · pie · responsive · motion.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Fuentes autohospedadas (sin Google Fonts) ─────────────────────── */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/martian-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ══ TOKENS ════════════════════════════════════════════════════════
   DOS TEMAS, UNOS MISMOS NOMBRES. Ningún componente sabe de qué color es
   el sitio: todos piden `--white`, `--line`, `--velo-rgb`… y el tema
   decide qué hay detrás. Por eso invertir el sitio entero cabe en este
   bloque y no hay que tocar ni una regla más abajo.

   Tres tokens existen SOLO para eso, y conviene entender qué son:
     --tinta-rgb   el color de la tinta sobre el papel. En oscuro la tinta
                   es blanca; en claro es azul muy oscuro. Todos los
                   filetes, veladuras y reflejos salen de aquí.
     --velo-rgb    el color del papel. Los degradados que tapan (el de la
                   cabecera, el de las portadas) salen de aquí.
     --sombra-rgb  la base de las sombras. Negro puro sobre blanco ensucia;
                   una sombra azulada se apoya en el resto de la paleta.

   OJO CON `--white`: se llama así por historia, pero lo que significa es
   «el color del texto fuerte». En el tema claro NO es blanco: es el azul
   de Origin. Si algún día hay que renombrarlo, es un solo `replace`. */
:root {
  /* ── TEMA CLARO ── papel blanco, títulos en el azul de Origin. */
  --space-0: #ffffff;
  --space-1: #ffffff;
  --space-2: #f2f5fd;

  /* El «texto fuerte». Se probó ponerlo en el azul de Origin y era demasiado:
     TODOS los titulares azules convierten la página en un cartel. Aquí va un
     azul-negro —negro puro sobre blanco es duro— y el azul de Origin se
     reserva para lo que debe destacar: la marca, los enlaces, los acentos. */
  --white: #0d1a3d;
  --ink: #1b2a5c;
  --muted: #4d5a80;
  --muted-2: #626c88;   /* subido de #7b86a4: sobre blanco daba 3,6:1 y esto
                           lleva las etiquetas mono de 9 px, que necesitan 4,5 */

  --blue-deep: #0a1878;
  --blue: #1646dc;          /* azul de Origin */
  --blue-lit: #2f5cff;
  --cyan: #0f6fd6;          /* bajado de #288cff: sobre blanco no contrastaba */
  --blue-rgb: 22, 70, 220;
  --lit-rgb: 47, 92, 255;

  --tinta-rgb: 10, 22, 66;
  --neural-rgb: 10, 22, 66;   /* la red del fondo — la lee neural.js */
  --velo-rgb: 255, 255, 255;
  --sombra-rgb: 22, 40, 105;
  /* Superficie HUNDIDA (el recuadro del prompt, el pie del sitio). Ojo: no
     es el velo. El velo tapa con el color del papel; el hueco se mete hacia
     dentro, así que en los dos temas es MÁS OSCURO que la página, no más
     claro. Con velo, en claro salía blanco sobre blanco: invisible. */
  --hueco: rgba(var(--tinta-rgb), 0.045);
  /* La sombra grande de los paneles. En negro, 90% de negro es correcto;
     sobre blanco, ese mismo 90% es un cerco sucio. */
  --sombra: rgba(var(--sombra-rgb), 0.16);

  --glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.5) 46%, rgba(var(--blue-rgb), 0.06));
  --glass-line: rgba(var(--tinta-rgb), 0.12);
  --glass-line-hi: rgba(var(--lit-rgb), 0.45);
  --glass-blur: blur(18px) saturate(150%);
  --line: rgba(var(--tinta-rgb), 0.14);

  color-scheme: light;

  /* ── Ritmo (igual en los dos temas) ── */
  --gut: clamp(20px, 4.4vw, 60px);
  --measure: 1180px;
  --sec: clamp(88px, 13vh, 168px);
  --hdr-h: 66px;
  --r: 20px;
  --r-lg: 28px;

  /* ── Curvas ── */
  --e: cubic-bezier(0.22, 0.68, 0.24, 1);
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Suave (ease-in-out): el trazado y el relleno de la entrada. */
  --soft: cubic-bezier(0.4, 0, 0.2, 1);

  --sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ── TEMA OSCURO ── el original: el espacio negro del grupo, sin teñir de
   azul, y el texto fuerte en blanco. Lo pone el generador en <html> cuando
   datos/tema.mjs dice 'oscuro'. */
:root[data-tema='oscuro'] {
  --space-0: #000000;
  --space-1: #020206;
  --space-2: #04040a;

  --white: #ffffff;
  --ink: #e9efff;
  /* Subidos un punto: con el titular en 800, el gris de antes
     (#93a0c2 / #616e8d) se quedaba desmayado al lado. */
  --muted: #a6b0c6;
  --muted-2: #7c869e;

  --cyan: #288cff;

  --tinta-rgb: 255, 255, 255;
  --neural-rgb: 255, 255, 255;
  --velo-rgb: 2, 3, 10;
  --sombra-rgb: 0, 0, 0;
  --hueco: rgba(var(--velo-rgb), 0.5);
  --sombra: rgba(var(--sombra-rgb), 0.9);

  --glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018) 46%, rgba(var(--blue-rgb), 0.05));
  --glass-line: rgba(var(--tinta-rgb), 0.1);
  --line: rgba(var(--tinta-rgb), 0.12);

  color-scheme: dark;
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--space-1);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 350;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: rgba(var(--lit-rgb), 0.32); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* ══ TIPOGRAFÍA ════════════════════════════════════════════════════ */
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--white);
}

h3 {
  font-size: 1.06rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--white);
}

.lead {
  margin-top: 1.1rem;
  max-width: 52ch;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 320;
  line-height: 1.62;
  color: var(--muted);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--lit-rgb), 0.9);
}

.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.dim { color: var(--muted-2); }

em, i { font-style: normal; }
strong { font-weight: 560; color: var(--white); }

/* ══ LAYOUT ════════════════════════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec {
  position: relative;
  z-index: 1;
  padding-block: var(--sec);
}

.skip-link {
  position: fixed;
  left: var(--gut);
  top: -120%;
  z-index: 300;
  padding: 10px 18px;
  background: var(--white);
  color: var(--space-1);
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 8px;
}
.skip-link:focus { top: 14px; }

/* ══ FONDO ════════════════════════════════════════════════════════
   Negro plano. Lo único que se ve encima es la red neuronal que dibuja
   el canvas: pocos nodos y líneas tenues. Igual de discreto que las
   constelaciones del sitio del grupo, pero con la figura de este
   laboratorio.
   ══════════════════════════════════════════════════════════════════ */
.fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--space-0);
}

/* La malla se retira del centro. Antes ocupaba la pantalla entera y pasaba
   justo por detrás del titular y de los botones: se leía como ruido encima
   del contenido, no como fondo. La máscara la vacía en el medio —donde vive
   todo lo que hay que leer— y la deja viva en los bordes y las esquinas, que
   es donde no estorba. Y baja de opacidad: es un fondo, no un dibujo. */
.fondo__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  /* SEGUNDO INTENTO. El primero (115% 88%, opaco al 92%) se pasó de
     prudente: el degradado no llegaba a cerrar dentro de la pantalla, así
     que la malla quedaba medio borrada EN TODAS PARTES y no se veía ni en
     las esquinas. Ahora el óvalo transparente es más pequeño y cierra al
     72%: el centro sigue limpio y los bordes y las esquinas se ven de
     verdad, que es lo que se pedía. */
  -webkit-mask-image: radial-gradient(72% 58% at 50% 44%, transparent 0%, transparent 30%, #000 72%);
  mask-image: radial-gradient(72% 58% at 50% 44%, transparent 0%, transparent 30%, #000 72%);
}

/* ══ TELÓN ═════════════════════════════════════════════════════════
   La misma coreografía del sitio del grupo, sobre campo azul de Origin:
   los vértices aparecen, se traza el contorno del logo, se rellena la
   misma forma, entra el wordmark y el telón se levanta.

   Autoterminante: la desaparición es parte de los keyframes, así que si
   el JS fallara la página igual queda usable. La compuerta `entrance-on`
   la pone un script inline del <head>; sin ella esto no existe.
   ══════════════════════════════════════════════════════════════════ */
.entrance {
  display: none;
  /* La curva de salida del sitio es cubic-bezier(0.22, 0.68, 0.24, 1); la del
     grupo es (0.2, 0.7, 0.3, 1). Se pisa SOLO aquí dentro para que la entrada
     sea idéntica sin tocar el movimiento del resto del laboratorio. */
  --e: cubic-bezier(0.2, 0.7, 0.3, 1);
}

html.entrance-on .entrance {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* NEGRO, sin más. El telón es el único momento del sitio en el que no
     hay azul: es el mismo campo del grupo, y de él sale la marca.

     Antes llevaba un radial azul que ocupaba media pantalla. Dos motivos
     para quitarlo: se leía como un manchón y no como un halo, y al
     levantarse el telón el azul del hero —mucho más contenido— cambiaba
     de tamaño de golpe, que es justo el salto que esta animación existe
     para evitar. El azul del laboratorio entra después, ya en el sitio. */
  background: var(--space-0);
  animation: overlayOut 0.9s ease 3600ms forwards;
}

.entrance__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* Tamaño del logo — se mide por ALTURA, no por ancho.
   El icono del grupo dibuja 165.7 × 194.8 px en escritorio y 118.4 × 139.1
   en móvil (viewBox 370×434 con `width: clamp(120px,16vw,168px)`). Como
   nuestro hexágono tiene otra proporción, igualar el ancho lo dejaba un
   18 % más bajo. Fijando la altura, los dos se ven del mismo tamaño.
   Este clamp y el de .entrada__mark tienen que ir siempre a la par. */
/* El SVG de dentro va con currentColor, así que el color del logo del
   telón lo decide esta regla y, con ella, el tema. */
.entrance__logo {
  color: var(--white);
  position: relative;
  width: clamp(120px, 16vw, 168px);
}

.entrance__mark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* Los puntos de los vértices pueden sobresalir del viewBox. */
  overflow: visible;
}

/* Contorno: se traza y se apaga cuando el relleno ya está puesto. */
.ring {
  stroke-width: 2.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation:
    ringDraw 1.4s var(--soft) 1000ms forwards,
    ringOut 0.65s linear 2400ms forwards;
}
@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes ringOut { to { opacity: 0; } }

/* Halo del laboratorio: se enciende con el relleno y se queda tenue.
   Ceñido a la caja del logo —no al viewport—, así que acompaña la marca
   en vez de teñir la pantalla. Es el mismo halo que el hero tiene debajo,
   con lo cual el traspaso no lo mueve ni lo cambia de tamaño. */
/* El original no lleva halo: el telón del grupo es negro puro y de ahí sale
   la marca. Se quitó el radial azul para que las dos entradas sean la misma. */


/* Relleno: la marca oficial exacta encima del contorno. */
.entrance__real {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: fillIn 0.95s var(--soft) 2250ms forwards;
}
@keyframes fillIn { to { opacity: 1; } }

/* Puntos de los vértices. */
.dot {
  --d: 0ms;
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  animation:
    dotIn 0.55s var(--soft) var(--d) both,
    dotOut 0.5s var(--e) 1550ms forwards;
}
@keyframes dotIn {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dotOut { to { opacity: 0; } }

/* Wordmark. */
.entrance__word {
  opacity: 0;
  transform: translateY(8px);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-family: 'Archivo Entrada', var(--sans);
  font-weight: 640;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  color: #fff;
  animation: fadeUp 0.7s var(--soft) 2700ms forwards;
}
.entrance__tail { font-weight: 260; margin-left: 0.3em; }

/* Indicio de scroll: mide igual que el del hero, para que el traspaso
   no mueva el logo ni el wordmark. */
.entrance__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.6rem;
  opacity: 0;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--tinta-rgb), 0.6);
  animation: fadeUp 0.7s var(--soft) 3000ms forwards;
}
.entrance__scrollline { width: 1px; height: 34px; background: rgba(var(--tinta-rgb), 0.5); }

@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes overlayOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ══ CABECERA ══════════════════════════════════════════════════════
   INTEGRADA, NO UNA BARRA. Antes esto era una franja: fondo sólido,
   filete abajo y un borde que cortaba el hero por la mitad. Se quitó
   entero. Lo que queda es un velo degradado que se enciende al hacer
   scroll y se apaga arriba del todo — sostiene la legibilidad del menú
   sobre el contenido sin dibujar ningún canto. Un degradado que muere en
   transparente no tiene borde, y sin borde no hay barra.

   Está SIEMPRE presente salvo durante el telón: ver aparecer el logo
   pequeño en la esquina mientras la marca grande todavía se está
   dibujando en el centro rompía el relevo. */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  height: var(--hdr-h);
  border-bottom: 0;
  background: none;
}
.hdr::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--hdr-h) + 42px);
  /* OPACO en la banda del menú, y solo entonces se desvanece. Iba en
     degradado desde arriba (0,9 → 0,66) y sobre fondo negro tapaba de
     sobra; sobre blanco no: el texto de las tarjetas se leía por detrás
     del menú como un fantasma. La banda mide 66 px de los 108 del velo,
     o sea el 61%: hasta ahí va cerrado, y el resto es la caída.

     Sigue sin ser una barra, que era la condición: no hay filete, no hay
     canto, y el degradado muere en transparente. Lo que se ve es el papel
     de la página, no una franja pegada encima. */
  background: linear-gradient(180deg, rgba(var(--velo-rgb), 1) 0%, rgba(var(--velo-rgb), 1) 61%, rgba(var(--velo-rgb), 0.72) 78%, transparent 100%);
  opacity: 0;
  transition: opacity 0.45s var(--e);
  pointer-events: none;
}
.hdr.is-stuck::before { opacity: 1; }


/* Durante el telón la cabecera no existe. Entra sola a los 3,5 s, justo
   cuando el telón empieza a levantarse: no hace falta JS y si el script
   fallara la cabecera aparecería igual. */
html.entrance-on .hdr {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  animation: hdrEntra 0.9s var(--e-out) 3500ms forwards;
}
@keyframes hdrEntra { to { opacity: 1; transform: none; pointer-events: auto; } }

/* En la barra ya no hay nada más que el menú, así que centrarlo es centrar
   el único hijo. Antes hubo que montar una rejilla de tres columnas para
   compensar la marca de la izquierda; al desaparecer la marca, la rejilla
   sobra y esto es lo que queda. */
.hdr__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* En estrecho no caben siete entradas. Antes que inventar un menú de
   hamburguesa, el menú ocupa todo el ancho y se desliza con el dedo. Se le
   quita la barra de desplazamiento porque a esa altura es un adorno feo. */
@media (max-width: 900px) {
  .hdr__in { justify-content: flex-start; }
  .hdr .nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hdr .nav::-webkit-scrollbar { display: none; }
  .hdr .nav a { white-space: nowrap; }
}

.logo { display: inline-flex; align-items: center; gap: 0.62em; line-height: 1; }
.logo__mark {
  width: auto; height: 1.6em; flex: none;
  filter: drop-shadow(0 0 10px rgba(var(--lit-rgb), 0.4));
  transition: transform 0.5s var(--e-out), filter 0.4s var(--e);
}
.logo:hover .logo__mark {
  transform: rotate(60deg) scale(1.06);
  filter: drop-shadow(0 0 18px rgba(var(--lit-rgb), 0.8));
}
.logo__word {
  font-size: 0.98rem; font-weight: 620;
  letter-spacing: -0.028em; white-space: nowrap; color: var(--white);
}
.logo__word em { font-weight: 220; color: var(--muted); margin-left: 0.4em; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 380;
  color: var(--muted);
  padding-block: 6px;
  transition: color 0.25s var(--e);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--blue-lit), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--e-out);
}
.nav a:hover, .nav a.is-active { color: var(--white); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.hdr__end { display: flex; align-items: center; gap: 12px; }

/* ══ BOTONES ═══════════════════════════════════════════════════════ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 480;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--e-out), box-shadow 0.35s var(--e), border-color 0.3s;
}
.btn span { transition: transform 0.35s var(--e-out); }
.btn:hover span { transform: translateX(4px); }

.btn--sm { padding: 9px 18px; font-size: 0.83rem; }

.btn--primary {
  background: linear-gradient(135deg, var(--blue-lit), var(--blue) 55%, var(--blue-deep));
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(var(--blue-rgb), 0.85), inset 0 1px 0 rgba(var(--tinta-rgb), 0.22);
}
/* Brillo que barre el botón al pasar el cursor. */
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(var(--tinta-rgb), 0.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--e-out);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(var(--blue-rgb), 0.95), inset 0 1px 0 rgba(var(--tinta-rgb), 0.3);
}

.btn--ghost,
.hdr .btn--sm {
  border: 1px solid var(--glass-line);
  background: rgba(var(--tinta-rgb), 0.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
}
.btn--ghost:hover,
.hdr .btn--sm:hover {
  border-color: var(--glass-line-hi);
  background: rgba(var(--lit-rgb), 0.12);
  color: var(--white);
  transform: translateY(-2px);
}

.link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid rgba(var(--lit-rgb), 0.55);
  padding-bottom: 4px;
  transition: gap 0.3s var(--e-out), border-color 0.3s;
}
.link:hover { gap: 0.9em; border-bottom-color: var(--cyan); }

/* ══ ENTRADA (home) ════════════════════════════════════════════════
   Estado estático que el telón descubre. El logo, su tamaño y su
   posición son los MISMOS que en el overlay: el traspaso no mueve nada.
   ══════════════════════════════════════════════════════════════════ */
.entrada {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.entrada__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* Mismo clamp que .entrance__logo. Si cambia uno, cambian los dos. */
/* Mismo clamp que .entrance__logo: si cambia uno, cambia el otro o el
   traspaso del telón da un salto. */
/* IDÉNTICO a .entrance__logo del telón: mismo archivo, mismo ancho, sin
   resplandor. Si aquí cambia algo, el traspaso se nota — el logo daría un
   salto justo cuando la animación termina. */
.entrada__mark {
  display: block;
  width: clamp(120px, 16vw, 168px);
  height: auto;
}

.entrada__word {
  font-family: 'Archivo Entrada', var(--sans);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 640;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  color: var(--white);
}
.entrada__tail { font-weight: 260; margin-left: 0.3em; }

.entrada__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.6rem;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--tinta-rgb), 0.55);
}

.entrada__line {
  position: relative;
  width: 1px;
  height: 34px;
  background: rgba(var(--tinta-rgb), 0.16);
  overflow: hidden;
}
/* Destello que baja por la línea: indica "desliza hacia abajo". */
.entrada__line::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 45%;
  background: linear-gradient(to bottom, transparent, var(--cyan));
  animation: desliza 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes desliza {
  0%   { transform: translateY(-100%); opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(230%); opacity: 0; }
}

/* ══ PIE ═══════════════════════════════════════════════════════════ */
.ftr {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding-block: clamp(34px, 5vw, 54px);
  background: var(--hueco);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ftr__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.ftr__nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 28px); }
.ftr__nav a { font-size: 0.86rem; color: var(--muted); transition: color 0.25s; }
.ftr__nav a:hover { color: var(--white); }
.ftr__legal { flex-basis: 100%; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }

/* ══ APARICIÓN AL HACER SCROLL ═════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s var(--e-out) var(--d, 0ms),
    transform 0.85s var(--e-out) var(--d, 0ms),
    filter 0.85s var(--e-out) var(--d, 0ms);
  filter: blur(6px);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

/* ══ RESPONSIVE ════════════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .origen__grid { grid-template-columns: 1fr; }
  .origen__mark { position: static; max-width: 220px; }
}

@media (max-width: 640px) {
  .cards--3 { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .creed__list li { grid-template-columns: 1fr; gap: 8px; }
  .mision__live { flex-direction: column; align-items: center; gap: 12px; }
  .chat__msg { max-width: 94%; }
  .btn { width: 100%; }
  .mision__cta, .cta__acts { width: min(100%, 340px); }
}

/* ══ MOVIMIENTO REDUCIDO — sin negociar ════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .entrance { display: none !important; }
  .path::before { transform: scaleY(1); }
}

/* ══ TRANSICIÓN ENTRE PÁGINAS ══════════════════════════════════════
   Siete páginas HTML de verdad, con navegación de verdad: nada de
   simularlo interceptando clics y montando el contenido con JS. Esto es
   la API de transiciones de vista entre documentos, que es CSS puro.

   Lo que se mueve es SOLO el contenido: el fondo neuronal y la cabecera
   llevan nombre propio, así que el navegador los trata como el mismo
   elemento a los dos lados de la navegación y se quedan quietos. Sin
   eso, el fondo parpadeaba en cada salto y la cabecera se desvanecía y
   volvía, que es justo lo contrario de «siempre presente».

   Donde no está soportado (Firefox, a día de hoy) no pasa nada: la
   navegación es la de siempre. Por eso se hace así y no con JS. */
@view-transition { navigation: auto; }

.fondo { view-transition-name: fondo; }
.hdr { view-transition-name: cabecera; }

/* Quietos del todo: sin esto el navegador les aplica un fundido cruzado
   por defecto y se notaba un pestañeo en la cabecera. */
::view-transition-group(fondo),
::view-transition-group(cabecera) { animation: none; }
::view-transition-old(fondo),
::view-transition-new(fondo),
::view-transition-old(cabecera),
::view-transition-new(cabecera) { animation: none; mix-blend-mode: normal; }

::view-transition-old(root) {
  animation: paginaSale 0.26s var(--e) both;
}
::view-transition-new(root) {
  animation: paginaEntra 0.42s var(--e-out) both;
}
@keyframes paginaSale { to { opacity: 0; transform: translateY(-10px); } }
@keyframes paginaEntra { from { opacity: 0; transform: translateY(16px); } }

/* Quien pide menos movimiento cruza sin desplazamiento: solo el fundido,
   que evita el corte seco sin mover nada de sitio. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: paginaFunde 0.2s linear reverse both; }
  ::view-transition-new(root) { animation: paginaFunde 0.2s linear both; }
  @keyframes paginaFunde { from { opacity: 0; } }
}