/* ═══════════════════════════════════════════════════════════
   ONDA.STUDY
   El acento (--c1/--c2) y el cielo los cambia onda.js según la
   etapa del método en la que esté el visitante.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg1:#080D18; --bg2:#05070E; --bg3:#03050A;
  --c1:#38BDF8;
  --c2:#FFB27A;
  --ink:#EAF0FF;
  --dim:#9AA8C6;
  --muted:#6E7C9C;
  --line:rgba(154,168,198,.16);
  --panel:rgba(255,255,255,.026);
  --display:"Bricolage Grotesque","Bricolage fallback",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"Space Mono","Mono fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(22px,5vw,74px);
  --band:clamp(80px,11vh,150px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--display);
  background:var(--bg2);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--c1);outline-offset:4px;border-radius:3px}
::selection{background:var(--c1);color:#05070E}

.skip{
  position:absolute;left:-9999px;top:12px;z-index:60;
  background:var(--c1);color:#05070E;padding:10px 18px;border-radius:8px;
  font-family:var(--mono);font-size:.72rem;
}
.skip:focus{left:12px}

/* ── capas de ambiente ──────────────────────────────────── */
/* Sobredimensionado: el parallax lo desplaza y no debe dejar borde. */
#sky{
  position:fixed;inset:-14%;z-index:0;pointer-events:none;
  --glow1:rgba(56,189,248,.15);
  --glow2:rgba(255,142,84,.09);
  background:
    radial-gradient(120% 70% at 50% 108%,var(--glow1),transparent 60%),
    radial-gradient(100% 60% at 50% -8%,var(--glow2),transparent 62%),
    linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 52%,var(--bg3) 100%);
  transition:background 1.1s ease;
}
/* width/height explícitos: un canvas es elemento reemplazado y con
   width:auto toma su tamaño intrínseco (el del búfer), no el del inset. */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* Grano de película.
   Antes era un elemento de 300%x300% que se trasladaba. Como lleva
   mix-blend-mode, Chrome no puede componerlo en su propia capa y
   contaba cada paso de la animación como desplazamiento de diseño:
   eso solo valía 0.45 de CLS. Ahora el elemento no se mueve y lo que
   se anima es la posición del fondo, que es pintado y no maquetación. */
.grain{
  position:fixed;inset:0;
  z-index:9;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:grain 1s steps(8) infinite;
}
@keyframes grain{
  0%{background-position:0 0}         12.5%{background-position:-14px -21px}
  25%{background-position:-28px 14px} 37.5%{background-position:14px -28px}
  50%{background-position:-21px 21px} 62.5%{background-position:21px 7px}
  75%{background-position:-7px -14px} 87.5%{background-position:28px -7px}
  100%{background-position:0 0}
}
.vig{
  position:fixed;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(128% 96% at 50% 46%,transparent 40%,rgba(2,4,10,.42) 82%,rgba(2,4,10,.76) 100%);
}

/* ── barra superior ─────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--pad);
  background:rgba(5,7,14,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transform:translateY(-102%);
}
.nav.show{transform:none;border-bottom-color:var(--line)}
.nav-brand{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.18em}
.nav-brand span{color:var(--c1)}
.nav-links{display:flex;gap:clamp(14px,2.2vw,30px)}
.nav-links a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  color:var(--dim);transition:color .3s ease;
}
.nav-links a:hover{color:var(--c1)}
@media (max-width:620px){ .nav-links{display:none} }

/* ── portada ────────────────────────────────────────────── */
/* Teléfono: la portada es sólo el logotipo y la onda. El texto va abajo.
   Escritorio: los dos bloques entran juntos en la primera pantalla. */
.hero{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.hero-stage{
  min-height:100svh;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8vh var(--pad);
}
.hero-claim{
  display:flex;flex-direction:column;align-items:center;
  padding:0 var(--pad) var(--band);
}
@media (min-width:760px){
  .hero{min-height:100svh;justify-content:center;padding:10vh 0 6vh}
  .hero-stage{min-height:auto;padding:0 var(--pad)}
  .hero-claim{padding-bottom:0}
}
/* ── entrada de la portada, en CSS ────────────────────────
   Antes la hacía GSAP después de que cargaran las fuentes, así
   que la primera pantalla quedaba en negro hasta el final de la
   cadena. En CSS arranca con el primer pintado; GSAP se suma
   después para la onda, la profundidad y el scroll. */
.depth{perspective:1500px;perspective-origin:50% 46%;width:100%;display:flex;justify-content:center}
.enter{animation:llega 2.4s cubic-bezier(.3,.55,.16,1) both}
@keyframes llega{
  from{opacity:0;transform:translateZ(-1600px) rotateX(18deg)}
  to  {opacity:1;transform:none}
}
/* La máscara recorta solo durante la entrada. Después hay que
   abrirla: si no, la onda mueve las letras y quedan cortadas. */
.msk{display:inline-block;overflow:hidden;vertical-align:top}
.abierto .msk{overflow:visible}
.chr{
  display:inline-block;
  transform:translateY(118%);
  animation:sube 1.5s cubic-bezier(.11,.86,.18,1) both;
  animation-delay:calc(.32s + var(--i) * .085s);
}
@keyframes sube{ to{transform:translateY(0)} }
/* .flt lo escribe GSAP cada cuadro con la altura de la onda:
   por eso va en su propio elemento y no comparte transform. */
.flt{display:inline-block;will-change:transform}
/* Los ecos los clona el JS ya con la entrada hecha. */
.echo .chr{animation:none;transform:none}
.tilt,.enter,.stack{transform-style:preserve-3d}
/* Ancho fijo a propósito: fitStudy() recalcula el interletrado de
   STUDY cuando carga la fuente, y si la pila se dimensionara según
   su hijo más ancho, ese recálculo movería todo el bloque. Con la
   pila al 100% el cambio de ancho de un hijo no desplaza nada. */
.stack{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.wordmark{
  font-size:clamp(3.2rem,min(23vw,27vh),19rem);
  font-weight:800;font-variation-settings:"opsz" 96;
  letter-spacing:-.055em;line-height:.86;white-space:nowrap;
  color:var(--ink);
  width:fit-content;      /* que offsetWidth siga siendo el ancho del texto */
}
/* Los ecos: contorno trazado, sin desenfoque. Bordes definidos. */
.echo{
  position:absolute;top:0;left:0;width:100%;
  text-align:center;pointer-events:none;will-change:transform;
}
/* El STUDY entra igual que las letras, un poco después. */
.studymark{animation:aparece 1s cubic-bezier(.11,.86,.18,1) .95s both}
@keyframes aparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Hueco por donde pasa el trazo, entre ONDA y STUDY. */
.gap{height:clamp(64px,10vh,132px)}
.studymark{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(.9rem,min(4.9vw,5.8vh),3.4rem);
  line-height:1;white-space:nowrap;color:var(--ink);
  width:fit-content;
}
.hero-line{
  margin-top:clamp(30px,5vh,58px);
  font-size:clamp(1.15rem,2.7vw,1.85rem);font-weight:600;letter-spacing:-.01em;
}
.hero-sub{
  margin-top:14px;max-width:46ch;
  color:var(--dim);font-size:clamp(.95rem,1.7vw,1.08rem);
}
.hero-cue{
  margin-top:clamp(34px,6vh,68px);
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;text-transform:lowercase;
  color:var(--muted);transition:color .4s ease;
}
.hero-cue:hover{color:var(--c1)}
.hero-cue i{
  width:1px;height:38px;background:linear-gradient(var(--c1),transparent);
  animation:cue 2.4s ease-in-out infinite;
}
/* Sin texto de más en el teléfono: el propio parallax invita a bajar. */
@media (max-width:759px){ .hero-cue{display:none} }
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ── bandas ─────────────────────────────────────────────── */
.band{
  position:relative;z-index:3;
  max-width:1180px;margin:0 auto;
  padding:var(--band) var(--pad);
  /* Barra fija (56px) + el desplazamiento que el parallax le da al título. */
  scroll-margin-top:124px;
}
.eyebrow{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--c1);margin-bottom:20px;
}
/* El acento cambia con la etapa: que el cambio se deslice, no salte. */
.eyebrow,.card-n,.sol h3,.live-host,.mail,.nav-brand span,.hero-cue i{
  transition:color .9s ease,background .9s ease;
}
.h2{
  font-size:clamp(1.75rem,4.4vw,3.15rem);
  font-weight:800;line-height:1.08;letter-spacing:-.035em;
}
.h2.big{font-size:clamp(2rem,6vw,4.2rem)}
.lead{
  margin-top:22px;max-width:62ch;
  color:var(--dim);font-size:clamp(1rem,1.8vw,1.14rem);
}

/* ── qué hacemos: el H1 del sitio ───────────────────────── */
.claim-band{padding-top:clamp(60px,9vh,120px);padding-bottom:clamp(60px,9vh,120px)}
.claim{
  font-size:clamp(1.7rem,4.8vw,3.4rem);
  font-weight:800;letter-spacing:-.038em;line-height:1.08;
  max-width:24ch;
}
.claim-sub{
  margin-top:20px;max-width:46ch;
  color:var(--dim);font-size:clamp(1rem,2vw,1.2rem);
}

/* ── manifiesto ─────────────────────────────────────────── */
.creed{list-style:none;margin-top:clamp(38px,6vh,72px);display:grid;gap:2px}
.creed li{
  padding:clamp(24px,3.4vw,38px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
}
.creed h3{font-size:clamp(1.05rem,2.2vw,1.4rem);font-weight:800;letter-spacing:-.02em}
.creed p{margin-top:10px;color:var(--dim);max-width:74ch;font-size:.98rem}
@media (min-width:860px){ .creed{grid-template-columns:1fr 1fr;gap:14px} }

/* ── rejillas ───────────────────────────────────────────── */
.grid{display:grid;gap:14px;margin-top:clamp(38px,6vh,72px)}
.caps{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.sols{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.live{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.card{
  padding:clamp(24px,3vw,34px);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  transition:border-color .45s ease,background .45s ease,transform .45s ease;
}
.card:hover{border-color:var(--c1);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.card-n{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--c1);
  display:block;margin-bottom:16px;
}
.card h3{font-size:1.08rem;font-weight:800;letter-spacing:-.02em}
.card p{margin-top:10px;color:var(--dim);font-size:.94rem}

.sol{
  padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--line);border-radius:14px;
  transition:border-color .45s ease,transform .45s ease;
}
.sol:hover{border-color:var(--c1);transform:translateY(-3px)}
.sol h3{
  font-family:var(--mono);font-size:.8rem;font-weight:700;
  letter-spacing:.02em;color:var(--c1);
}
.sol p{margin-top:10px;color:var(--dim);font-size:.92rem}

/* ── identidad ──────────────────────────────────────────── */
/* La letanía: una línea por punto de contacto. Cada una entra sola. */
.chant{
  list-style:none;
  margin:clamp(26px,4vh,44px) 0 clamp(26px,4vh,44px);
  display:grid;gap:2px;
}
.chant li{
  font-size:clamp(1.35rem,3.6vw,2.5rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.16;
  color:var(--muted);
  transition:color .5s ease;
}
.chant li:nth-child(-n+3){color:var(--dim)}
.chant li:first-child{color:var(--ink)}

.thesis{
  margin-top:clamp(44px,7vh,88px);
  padding:clamp(28px,4vw,46px);
  border:1px solid var(--line);border-left:2px solid var(--c1);
  border-radius:14px;background:var(--panel);
  font-size:clamp(1.1rem,2.5vw,1.65rem);
  font-weight:600;line-height:1.4;letter-spacing:-.02em;
  color:var(--dim);max-width:52ch;
  transition:border-color .9s ease;
}
.thesis b{color:var(--ink);font-weight:800}

/* ── método ─────────────────────────────────────────────── */
.stages{list-style:none;margin-top:clamp(38px,6vh,72px);display:grid;gap:0}
.stage{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);
  padding:clamp(26px,3.6vw,42px) 0;
  border-top:1px solid var(--line);
}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage-n{
  font-family:var(--mono);font-size:clamp(1.5rem,4vw,2.6rem);
  font-weight:700;color:var(--muted);line-height:1;
  transition:color .6s ease;
}
.stage.live-now .stage-n{color:var(--c1)}
.stage h3{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.stage p{margin-top:12px;color:var(--dim);max-width:62ch}

/* ── en el aire ─────────────────────────────────────────── */
.live-card{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(24px,3vw,34px);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  transition:border-color .45s ease,background .45s ease,transform .45s ease;
}
.live-card:hover{border-color:var(--c1);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.live-host{font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--c1)}
.live-what{color:var(--dim);font-size:.94rem}
.live-go{
  margin-top:8px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;color:var(--muted);
}

/* ── contacto ───────────────────────────────────────────── */
.contact{text-align:center}
.contact .lead{margin-left:auto;margin-right:auto}
.mail{
  display:inline-block;margin-top:clamp(30px,5vh,54px);
  font-family:var(--mono);font-size:clamp(.95rem,3vw,1.5rem);
  letter-spacing:.02em;color:var(--c1);
  padding-bottom:8px;border-bottom:1px solid var(--line);
  transition:border-color .4s ease;
  overflow-wrap:anywhere;
}
.mail:hover{border-bottom-color:var(--c1)}
/* Dos vías de contacto, con el mismo peso. */
.vias{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:14px;margin-top:clamp(30px,5vh,54px);
}
.via{
  display:flex;flex-direction:column;gap:6px;align-items:center;
  min-width:min(280px,100%);
  padding:20px 30px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);
  transition:border-color .4s ease,background .4s ease,transform .4s ease;
}
.via:hover{border-color:var(--c1);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.via-k{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.via-v{
  font-family:var(--mono);font-size:clamp(.9rem,2.4vw,1.2rem);
  color:var(--c1);overflow-wrap:anywhere;
}

.place{
  margin-top:24px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}

/* ── pie ────────────────────────────────────────────────── */
.foot{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:30px var(--pad);border-top:1px solid var(--line);
}
.tele{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transition:color .4s ease;
}
a.tele:hover{color:var(--c1)}
@media (max-width:620px){ .foot{justify-content:center;text-align:center} }

/* ── entradas ───────────────────────────────────────────── */
.pre .veil{opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pre .veil,.pre .depth{opacity:1}
  .grain,.hero-cue i{animation:none}
  .nav{transform:none}
  *{transition-duration:.01ms!important}
}

/* Puente de la home hacia las páginas de soluciones. */
.mas{
  margin-top:clamp(26px,4vh,42px);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);
}
.mas a{color:var(--c1);border-bottom:1px solid rgba(56,189,248,.35);transition:border-color .3s ease}
.mas a:hover{border-bottom-color:var(--c1)}

@media (prefers-reduced-motion:reduce){
  .enter,.chr,.studymark{animation:none!important;transform:none!important;opacity:1!important}
}