/* 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 ════════════════════════════════════════════════════════ */
:root {
  /* Espacio: negro, como el del grupo. El azul no tiñe el fondo. */
  --space-0: #000000;
  --space-1: #020206;
  --space-2: #04040a;

  /* Marca */
  --white: #ffffff;
  --ink: #e9efff;
  --muted: #93a0c2;
  --muted-2: #616e8d;

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

  /* Vidrio */
  --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(255, 255, 255, 0.1);
  --glass-line-hi: rgba(var(--lit-rgb), 0.45);
  --glass-blur: blur(18px) saturate(150%);
  --line: rgba(255, 255, 255, 0.12);

  /* Ritmo */
  --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;

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

.fondo__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ══ 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. */
.entrance__logo {
  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(255, 255, 255, 0.6);
  animation: fadeUp 0.7s var(--soft) 3000ms forwards;
}
.entrance__scrollline { width: 1px; height: 34px; background: rgba(255, 255, 255, 0.5); }

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

/* ══ CABECERA ══════════════════════════════════════════════════════ */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  height: var(--hdr-h);
  transition: background 0.4s var(--e), border-color 0.4s var(--e), backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
/* En el home el logo grande está en el centro: el de la cabecera sobra
   (y además desahoga el nav en anchos medios). Aparece al hacer scroll. */
.hdr .logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--e);
}
.hdr.is-stuck .logo { opacity: 1; pointer-events: auto; }

.hdr.is-stuck {
  background: rgba(4, 6, 15, 0.62);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}

.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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.3);
}

.btn--ghost,
.hdr .btn--sm {
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, 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(255, 255, 255, 0.55);
}

.entrada__line {
  position: relative;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 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: rgba(2, 3, 10, 0.5);
  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); }
}