/* ══════════════════════════════════════════════════════════════════
   FLOWENT v2 — RESET, BASE, PRIMITIVAS
══════════════════════════════════════════════════════════════════ */

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

/* Lenis controla el scroll: `smooth` nativo pelearía con él.
   El fallback sin JS se activa vía .no-js más abajo.            */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-2);
  background: var(--bg);
  overflow-x: clip;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  line-height: var(--lh-heading);
  text-wrap: balance;
  color: var(--text-1);
}
p { text-wrap: pretty; }

::selection { background: rgba(232, 163, 61, 0.32); color: var(--white); }

/* ─── Foco: invisible con ratón, evidente con teclado ─────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ─── Barra de scroll ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: var(--r-full);
  border: 3px solid var(--ink-950);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
* { scrollbar-width: thin; scrollbar-color: var(--ink-600) var(--ink-950); }

/* ─── Salto al contenido (accesibilidad) ──────────────────────── */
.skip-link {
  position: fixed; top: var(--sp-4); left: var(--sp-4);
  z-index: var(--z-overlay);
  padding: var(--sp-3) var(--sp-5);
  background: var(--white); color: var(--ink-950);
  font-size: var(--fs-small); font-weight: 600;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

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


/* ══════════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════════ */
.shell {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.shell--wide { max-width: var(--w-max); }
.shell--narrow { max-width: var(--w-narrow); }

.section { position: relative; padding-block: var(--sp-section); }
.section--flush { padding-block: 0; }
.section--deep { background: var(--bg-deep); }

/* Filo superior/inferior degradado — separa secciones sin una línea dura */
.section--edged::before,
.section--edged::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.section--edged::before { top: 0; }
.section--edged::after  { bottom: 0; }


/* ══════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
══════════════════════════════════════════════════════════════════ */
/* Los cinco niveles de titular usan la display. `wdth` baja según sube el
   cuerpo: un titular enorme a anchura normal desperdicia línea y se parte;
   condensado entra entero y gana densidad. Es exactamente para lo que sirve
   tener un eje variable, y es también lo que hace que se note que alguien
   ajustó la tipografía en vez de soltarla tal cual.                       */
.t-mega {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 88, 'opsz' 96;
  font-size: var(--fs-mega); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-mega);
  color: var(--text-1);
}
.t-display {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 92, 'opsz' 96;
  font-size: var(--fs-display); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  color: var(--text-1);
}
.t-h1 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 94, 'opsz' 72;
  font-size: var(--fs-h1); font-weight: 700;
  line-height: var(--lh-snug); letter-spacing: var(--ls-h1);
}
.t-h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 96, 'opsz' 48;
  font-size: var(--fs-h2); font-weight: 700;
  line-height: var(--lh-snug); letter-spacing: var(--ls-h2);
}
.t-h3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 100, 'opsz' 24;
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-h3);
}
.t-h4 { font-size: var(--fs-h4); font-weight: 600; }

.t-lead {
  font-size: var(--fs-lead); line-height: var(--lh-relaxed);
  color: var(--text-2); max-width: var(--w-text);
}
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.t-small { font-size: var(--fs-small); line-height: 1.6; color: var(--text-3); }

/* Etiqueta en versalitas — el patrón de eyebrow de toda la página */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-3);
}

.t-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Acento sólido en lugar del texto degradado que había antes.
   Un color plano se lee mejor, no necesita `background-clip` —que se rompe
   al saltar de línea y obliga a compensar los descendentes a mano— y sobre
   todo no es el recurso que aparece en todas las webs generadas.        */
.t-accent { color: var(--accent); }

.t-dim { color: var(--text-3); }
.t-bright { color: var(--text-1); }


/* ══════════════════════════════════════════════════════════════════
   CABECERA DE SECCIÓN
══════════════════════════════════════════════════════════════════ */
.head { max-width: var(--w-text); margin-bottom: var(--sp-block); }
.head--center { margin-inline: auto; text-align: center; }
.head__label {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.head__label::before {
  content: ''; width: 28px; height: 1px;
  background: var(--accent);
}
.head--center .head__label::after {
  content: ''; width: 28px; height: 1px;
  background: var(--accent);
}
.head__title { margin-bottom: var(--sp-5); }
.head__sub { color: var(--text-3); }
.head--center .head__sub { margin-inline: auto; }


/* ══════════════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════════════ */
.btn {
  --btn-pad-y: 0.875rem;
  --btn-pad-x: 1.75rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap;
  border-radius: var(--r-full);
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.975); }

.btn__ico {
  width: 15px; height: 15px; flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.btn:hover .btn__ico { transform: translateX(4px); }

/* Primario: el degradado va en un pseudo-elemento para poder
   cruzar dos capas en hover sin repintar el fondo (más barato). */
.btn--primary {
  color: var(--white);
  background: var(--brand-600);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn--primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--grad-brand);
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out);
}
.btn--primary::after {
  content: ''; position: absolute; inset: -1px; z-index: -2;
  border-radius: inherit;
  background: var(--grad-brand);
  filter: blur(14px); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.btn--primary:hover::after { opacity: 0.55; }

.btn--ghost {
  color: var(--text-1);
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: var(--line-3);
  background: rgba(255,255,255,0.06);
}

.btn--bare { padding-inline: 0; color: var(--text-2); }
.btn--bare:hover { color: var(--text-1); }

.btn--lg { --btn-pad-y: 1.0625rem; --btn-pad-x: 2.125rem; font-size: var(--fs-body); }
.btn--sm { --btn-pad-y: 0.5rem;    --btn-pad-x: 1.125rem; font-size: var(--fs-tiny); }
.btn--block { width: 100%; }


/* ══════════════════════════════════════════════════════════════════
   SUPERFICIES
══════════════════════════════════════════════════════════════════ */
.panel {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Borde iluminado que sigue al cursor. Las coordenadas --mx/--my
   las escribe el JS; sin JS el efecto simplemente no aparece.    */
.panel--lit::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(232, 163, 61, 0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.panel--lit:hover::before { opacity: 1; }

/* Halo interior difuso, también ligado al cursor */
.panel--lit::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(37, 99, 235, 0.10), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.panel--lit:hover::after { opacity: 1; }

.panel > * { position: relative; z-index: 2; }

.chip {
  display: inline-flex; align-items: center;
  padding: 0.3125rem 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.06em; color: var(--text-3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--text-2); border-color: var(--line-2); }

.rule { height: 1px; background: var(--line-1); border: 0; }


/* ══════════════════════════════════════════════════════════════════
   ATMÓSFERA — grano y viñeta
   Ambos en una sola capa fija: cero coste de layout, una sola
   composición en GPU.
══════════════════════════════════════════════════════════════════ */
.atmos {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.atmos::before {
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.055;
  animation: grain 7s steps(6) infinite;
  will-change: transform;
}
.atmos::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 0%,
              transparent 55%, rgba(0, 0, 0, 0.42) 100%);
}
@keyframes grain {
  0%,100% { transform: translate(0, 0); }
  16%  { transform: translate(-4%, -3%); }
  33%  { transform: translate(3%, -5%); }
  50%  { transform: translate(-2%, 4%); }
  66%  { transform: translate(4%, 2%); }
  83%  { transform: translate(-3%, -2%); }
}


/* ══════════════════════════════════════════════════════════════════
   CURSOR PERSONALIZADO
   Solo en punteros finos. En táctil no se monta siquiera.
══════════════════════════════════════════════════════════════════ */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor * { cursor: none !important; }

  .cursor {
    display: block; position: fixed; top: 0; left: 0;
    z-index: var(--z-cursor); pointer-events: none;
    will-change: transform;
  }
  .cursor__dot {
    position: absolute; width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--cyan-400); border-radius: 50%;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .cursor__ring {
    position: absolute; width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    transition: width var(--dur-base) var(--ease-out-expo),
                height var(--dur-base) var(--ease-out-expo),
                margin var(--dur-base) var(--ease-out-expo),
                border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }
  /* Sobre un interactivo: el anillo crece y el punto se esconde   */
  .cursor.is-hot .cursor__ring {
    width: 58px; height: 58px; margin: -29px 0 0 -29px;
    border-color: rgba(6, 196, 214, 0.55);
    background: rgba(6, 196, 214, 0.08);
  }
  .cursor.is-hot .cursor__dot { transform: scale(0); }
  .cursor.is-down .cursor__ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .cursor.is-out { opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════════
   REVELADO DE TEXTO
   SplitType envuelve cada línea; la máscara recorta por overflow y
   la línea sube desde abajo. Sin JS, `.no-js` lo deja todo visible.
══════════════════════════════════════════════════════════════════ */
/* `display: block` NO es opcional aquí.
   `.line` es un <span>, y `overflow: hidden` se ignora sobre una caja en
   línea. Sin esto el <h1> calculaba su altura con el interlineado en línea en
   vez de con la de sus dos hijos en bloque: la segunda línea se salía de la
   caja del titular y caía encima del párrafo de debajo. Ese era el
   solapamiento del hero.

   La holgura inferior cubre el descendente completo de Inter (≈0,21em); con
   menos, la "p", la "j" y la "g" quedaban cortadas por el recorte. El margen
   negativo la devuelve para que no separe las líneas entre sí.             */
.reveal-lines .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.reveal-lines .line > * { display: block; will-change: transform; }

/* Estado de partida con JS activo: la línea espera fuera de su
   máscara. Sin esta regla el titular parpadea visible antes de que
   el motion tome el control.                                      */
/* La ocultación inicial dura solo hasta que la entrada del hero termina.
   `hero-ready` la levanta para siempre, y en ese momento el JS borra también
   el transform en línea. Es deliberado: GSAP convierte el 132% a PÍXELES
   ABSOLUTOS medidos en el instante del arranque, y ese valor no sobrevive a
   un cambio de tamaño de ventana — el titular se quedaba desplazado tres
   veces su altura y desaparecía. Sin transform que estropear, no hay nada
   que se pueda estropear.                                                  */
.js:not(.hero-ready) .reveal-lines .line > * { transform: translateY(132%); }

.rise { opacity: 0; transform: translateY(24px); }
.fade { opacity: 0; }

/* Sin JavaScript: nada oculto */
.no-js .rise, .no-js .fade { opacity: 1; transform: none; }
.no-js .intro { display: none; }
html.no-js { scroll-behavior: smooth; }


/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   Recorrido alternativo completo: se apaga todo lo que se mueve
   solo y se garantiza que nada quede invisible.
══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rise, .fade { opacity: 1 !important; transform: none !important; }
  .reveal-lines .line > *,
  .js:not(.hero-ready) .reveal-lines .line > * { transform: none !important; }
  .atmos::before { animation: none; }
  .cursor { display: none !important; }
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
}


/* ══════════════════════════════════════════════════════════════════
   EL HILO — el trazo continuo que recorre toda la página

   El orden de pintado es lo único delicado aquí. Dentro de un contexto de
   apilado, los elementos posicionados con z-index automático se pintan en
   orden de documento y DESPUÉS los de z-index positivo. Así que:

     · el hilo va en z-index 1  → se pinta por encima de los fondos de
       sección, que no tienen z-index propio. Sin esto, cada sección oscura
       lo tapaba por completo y solo se veía a trozos.
     · el contenido va en z-index 2 → se pinta por encima del hilo, que
       entonces pasa por detrás del texto sin cruzarlo nunca.

   Es la única forma de que un trazo de página completa conviva con
   secciones que tienen fondo propio, sin tocar ni uno solo de esos fondos.
══════════════════════════════════════════════════════════════════ */
body { position: relative; }

.thread {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.thread__path {
  fill: none;
  stroke: url(#thread-grad);
  stroke-width: 1.5;
  stroke-linecap: round;
}
/* Estela tenue por debajo: da cuerpo sin engordar el trazo */
.thread__glow {
  fill: none;
  stroke: var(--brand-600);
  stroke-width: 5;
  opacity: 0.10;
  filter: blur(3px);
  stroke-linecap: round;
}
/* El punto que marca hasta dónde ha llegado el dibujo */
.thread__head {
  fill: var(--accent);
  filter: drop-shadow(0 0 7px rgba(232,163,61,0.85));
}

/* El contenido, siempre por encima del hilo */
.shell { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  /* Sin scroll que lo dibuje, el trazo se muestra entero y quieto */
  .thread__head { display: none; }
}