/* ==========================================================================
   TOZUK AGENCY
   Paleta derivada del monograma TZ: T en degradado #a9c8ee -> #5f8fc9,
   Z en #eef3fa, sobre azul-negro profundo.
   Dirección: Dark Mode (OLED) + Aurora UI en el hero + Motion-Driven.
   ========================================================================== */

:root{
  color-scheme: dark;

  --ground:      #060911;
  --ground-2:    #080d18;
  --surface:     #0d1424;
  --surface-2:   #121b2e;
  --surface-3:   #18233a;

  /* marca, tomada del logo */
  --ice-bright:  #a9c8ee;
  --ice:         #7ea6d8;
  --ice-deep:    #5f8fc9;
  --ice-dark:    #3f6497;

  /* texto — ratios medidos sobre --ground */
  --white:       #eef3fa;   /* 17.0:1 */
  --text:        #c5cfde;   /* 11.2:1 */
  --muted:       #8c98ac;   /*  5.9:1 */
  --dim:         #78839a;   /*  5.0:1 — etiquetas pequeñas; supera AA */

  --border:        rgba(126,166,216,.13);
  --border-strong: rgba(126,166,216,.30);
  --glow:          rgba(126,166,216,.28);

  --warm: #d9a066;  /* acento cálido, uso mínimo */

  --display: 'Sora', system-ui, -apple-system, sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem;
  --maxw: 1180px;
  --pad: clamp(1.15rem, 4vw, 2rem);
  --sect: clamp(4.5rem, 9vw, 8rem);
  --radius: 16px;
  --radius-sm: 10px;

  --e-out:  cubic-bezier(.22,.68,.32,1);
  --e-soft: cubic-bezier(.4,.14,.3,1);
  --t-fast: .18s;
  --t-med:  .32s;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Sin overflow-x:hidden — la aurora y la marquesina las recortan sus propios
     contenedores, y recortar en body cortaría capas posicionadas como el menú. */
}

img,svg{ max-width:100%; display:block }
a{ color:inherit }

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--white);
  line-height:1.1;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.45rem,1.6rem + 4.1vw,4.5rem); font-weight:800; letter-spacing:-.035em }
h2{ font-size:clamp(1.85rem,1.3rem + 2.4vw,3rem); font-weight:700 }
h3{ font-size:clamp(1.1rem,1rem + .45vw,1.32rem); font-weight:600; letter-spacing:-.015em }
p{ margin:0 }

/* ---------- utilidades ---------- */

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

section{ padding-block:var(--sect) }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono);
  font-size:.76rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ice);
  margin-bottom:var(--s2);
}
.eyebrow::before{
  content:''; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--ice));
}

.lede{
  color:var(--muted);
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);
  max-width:62ch;
  text-wrap:pretty;
}

.head{ max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem) }
.head h2 + .lede{ margin-top:var(--s3) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ice); color:#04070e;
  padding:.8rem 1.2rem; border-radius:0 0 var(--radius-sm) 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0 }

:focus-visible{
  outline:2px solid var(--ice-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- botones ---------- */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px;
  padding:.9rem 1.7rem;
  border:1px solid transparent;
  border-radius:100px;
  font-family:var(--body);
  font-size:.97rem; font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--t-med) var(--e-out),
             box-shadow var(--t-med) var(--e-out),
             background var(--t-med) var(--e-out),
             border-color var(--t-med) var(--e-out);
  overflow:hidden;
  isolation:isolate;
}
.btn svg{ width:17px; height:17px; flex:none; transition:transform var(--t-med) var(--e-out) }

.btn-primary{
  background:linear-gradient(135deg,var(--ice-bright),var(--ice-deep));
  color:#04070e;
  /* Elevación neutra, no halo de color */
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 5px 14px -8px rgba(0,0,0,.85);
}
.btn-primary::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--e-out);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 9px 18px -10px rgba(0,0,0,.9);
}
.btn-primary:hover::after{ transform:translateX(120%) }
.btn-primary:hover svg{ transform:translateX(3px) }
.btn-primary:active{ transform:translateY(0) }

.btn-ghost{
  background:rgba(126,166,216,.05);
  border-color:var(--border-strong);
  color:var(--white);
}
.btn-ghost:hover{
  background:rgba(126,166,216,.12);
  border-color:var(--ice);
  transform:translateY(-2px);
}
.btn-ghost:active{ transform:translateY(0) }

.btn-lg{ min-height:58px; padding:1.05rem 2.1rem; font-size:1.02rem }

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--t-med) var(--e-out),
             border-color var(--t-med) var(--e-out);
}
.nav.stuck{
  background:rgba(6,9,17,.94);
  border-bottom-color:var(--border);
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3);
  height:76px;
}

/* padding-block lleva el enlace a 44px de alto sin agrandar el logo */
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; flex:none;
  border-radius:8px;
  padding-block:.32rem;
}
.brand .mark{ width:34px; height:34px; flex:none }
.brand .word{
  font-family:var(--mono); font-weight:500;
  font-size:.92rem; letter-spacing:.34em;
  color:var(--white); padding-left:.1em;
}
.brand .word b{ color:var(--ice); font-weight:700 }

.nav-links{ display:flex; align-items:center; gap:.35rem }
.nav-links a{
  position:relative;
  padding:.6rem .9rem;
  font-size:.93rem; font-weight:500;
  color:var(--muted);
  text-decoration:none;
  border-radius:8px;
  transition:color var(--t-fast) var(--e-out);
}
.nav-links a::after{
  content:''; position:absolute;
  left:.9rem; right:.9rem; bottom:.32rem; height:1px;
  background:var(--ice);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-med) var(--e-out);
}
.nav-links a:hover{ color:var(--white) }
.nav-links a:hover::after{ transform:scaleX(1) }
.nav-links a[aria-current="true"]{ color:var(--white) }
.nav-links a[aria-current="true"]::after{ transform:scaleX(1) }

.nav-cta{ display:flex; align-items:center; gap:.7rem; flex:none }
.nav-cta .btn{ min-height:44px; padding:.65rem 1.25rem; font-size:.9rem }

.burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-strong);
  border-radius:10px; color:var(--white); cursor:pointer;
  transition:background var(--t-fast);
}
.burger:hover{ background:rgba(126,166,216,.1) }
.burger span{
  display:block; width:17px; height:1.5px; background:currentColor;
  border-radius:2px; position:relative;
  transition:transform var(--t-med) var(--e-out);
}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:17px; height:1.5px;
  background:currentColor; border-radius:2px;
  transition:transform var(--t-med) var(--e-out), opacity var(--t-fast);
}
.burger span::before{ top:-5.5px }
.burger span::after{ top:5.5px }
.burger[aria-expanded="true"] span{ transform:rotate(45deg) }
.burger[aria-expanded="true"] span::before{ transform:translateY(5.5px) rotate(-90deg) }
.burger[aria-expanded="true"] span::after{ opacity:0 }

@media (max-width:920px){
  .nav-links{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(8,13,24,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:var(--s2) var(--pad) var(--s4);
    opacity:0; visibility:hidden;
    transform:translateY(-12px);
    transition:opacity var(--t-med) var(--e-out),
               transform var(--t-med) var(--e-out),
               visibility var(--t-med);
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:translateY(0) }
  .nav-links a{ padding:1rem .25rem; font-size:1.05rem; border-bottom:1px solid var(--border) }
  .nav-links a::after{ display:none }
  .nav-cta .btn-ghost{ display:none }
  .burger{ display:inline-flex }
}
@media (max-width:420px){
  .nav-cta .btn-primary{ display:none }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(76px + var(--s5)) var(--s6);
  overflow:hidden;
}

.aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.aurora i{
  position:absolute; display:block;
  border-radius:50%;
  opacity:.82;
  will-change:transform, opacity;
}
.aurora i:nth-child(1){
  width:60vw; height:60vw; max-width:820px; max-height:820px;
  top:-20%; right:-14%;
  background:radial-gradient(circle,rgba(126,166,216,.92),transparent 66%);
  animation:drift1 22s var(--e-soft) infinite alternate,
            respira 9s var(--e-soft) infinite alternate;
}
.aurora i:nth-child(2){
  width:46vw; height:46vw; max-width:640px; max-height:640px;
  bottom:-24%; left:-12%;
  background:radial-gradient(circle,rgba(169,200,238,.60),transparent 66%);
  animation:drift2 26s var(--e-soft) infinite alternate,
            respira 11s -4s var(--e-soft) infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(-8%,10%,0) scale(1.14) } }
@keyframes drift2{ to{ transform:translate3d(12%,-9%,0) scale(1.2) } }
@keyframes drift3{ to{ transform:translate3d(-14%,-12%,0) scale(.86) } }
/* la aurora late: solo opacidad, que el compositor resuelve sin repintar */
@keyframes respira{ from{ opacity:.62 } to{ opacity:.95 } }

.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:2;
  background:linear-gradient(transparent,var(--ground));
  pointer-events:none;
}

.hero-in{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
  width:100%;
}

/* Línea de estado, no una píldora sobre el titular: el chip con mayúsculas
   espaciadas encima de un h1 enorme es la cabecera SaaS genérica. */
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono);
  font-size:.82rem; font-weight:500;
  letter-spacing:.02em;
  color:var(--ice);
  margin-bottom:var(--s3);
}
.pulse{ position:relative; width:7px; height:7px; flex:none; border-radius:50%; background:var(--ice-bright) }
.pulse::after{
  content:''; position:absolute; inset:0;
  border-radius:50%; background:inherit;
  animation:pulse 2.4s var(--e-out) infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.8 }
  70%,100%{ transform:scale(3.4); opacity:0 }
}

.hero h1{ margin-bottom:var(--s3) }
/* Color sólido, no degradado: el texto en degradado pierde legibilidad y es
   un recurso decorativo. El vínculo con el logo se mantiene por el tono. */
.hero h1 .accent{ color:var(--ice-bright) }
.hero-lede{ max-width:52ch; margin-bottom:clamp(2rem,4vw,2.6rem); color:var(--text) }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:clamp(2.5rem,5vw,3.4rem) }

.stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,3vw,2rem);
  padding-top:var(--s3);
  border-top:1px solid var(--border);
}
.stat .n{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.25rem);
  line-height:1;
  color:var(--white);
  letter-spacing:-.03em;
  margin-bottom:.45rem;
  font-variant-numeric:tabular-nums;
}
.stat .n i{ font-style:normal; color:var(--ice) }
.stat .n .u{ font-size:.52em; font-weight:600; color:var(--muted); letter-spacing:0 }
.stat .l{ font-size:.82rem; line-height:1.4; color:var(--muted) }

/* ---------- órbita del hero ---------- */

.orbit{
  position:relative;
  aspect-ratio:1;
  width:100%; max-width:470px;
  margin-inline:auto;
  display:grid; place-items:center;
}
/* Los carriles van hundidos (inset 15% / 30%) para que los nodos, que sobresalen
   por encima del carril, queden siempre dentro de la caja y no se recorten. */
.orbit-ring{ position:absolute; inset:12%; border:1px solid var(--border); border-radius:50% }
.orbit-ring.r2{ inset:26%; border-color:rgba(126,166,216,.10) }
.orbit-ring.r3{ inset:40%; border-color:rgba(126,166,216,.07) }
.orbit-dash{
  position:absolute; inset:6%;
  border-radius:50%;
  border:1px dashed rgba(126,166,216,.20);
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.orbit-core{
  position:relative; z-index:4;
  width:26%; aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:24px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-strong);
  /* La luz del núcleo la aporta el halo radial de ::before, no una sombra de color */
  box-shadow:0 6px 12px -8px rgba(0,0,0,.85);
}
.orbit-core::before{
  content:''; position:absolute; inset:-30%;
  border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 62%);
  opacity:.55; z-index:-1;
  animation:breathe 5.5s var(--e-soft) infinite alternate;
}
@keyframes breathe{ to{ opacity:.9; transform:scale(1.1) } }
.orbit-core svg{ width:56%; height:56% }

.node-lane{
  position:absolute; inset:12%;
  animation:spin var(--dur,34s) linear infinite;
  animation-delay:var(--delay,0s);
}
.node-lane.rev{ animation-direction:reverse }
.node{
  position:absolute; z-index:5; top:-18px; left:50%;
  display:flex; align-items:center; gap:.4rem;
  padding:.42rem .78rem;
  background:rgba(13,20,36,.92);
  border:1px solid var(--border-strong);
  border-radius:100px;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  color:var(--text);
  white-space:nowrap;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.85);
  transform:translateX(-50%);
  animation:counterspin var(--dur,34s) linear infinite;
  animation-delay:var(--delay,0s);
}
.node-lane.rev .node{ animation-direction:reverse }
@keyframes counterspin{
  from{ transform:translateX(-50%) rotate(0) }
  to{ transform:translateX(-50%) rotate(-360deg) }
}
.node b{ width:5px; height:5px; border-radius:50%; background:var(--ice); flex:none }

@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr }
  .orbit{ max-width:370px; order:-1 }
  .hero{ min-height:auto; padding-block:calc(76px + var(--s4)) var(--s5) }
}
@media (max-width:560px){
  .orbit{ max-width:280px }
  .node{ font-size:.75rem; padding:.3rem .6rem }
  .stats{ grid-template-columns:1fr; gap:var(--s2) }
  .stat{ display:flex; align-items:baseline; gap:.7rem }
  .stat .n{ margin-bottom:0; font-size:1.5rem }
}

/* ==========================================================================
   MARQUESINA DE HERRAMIENTAS
   ========================================================================== */

.tools{
  padding-block:var(--s4);
  padding-inline:var(--pad);
  border-block:1px solid var(--border);
  background:var(--ground-2);
  overflow:hidden;
}
.tools-label{
  text-align:center;
  font-family:var(--mono); font-size:.76rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim);
  margin-bottom:var(--s3);
}
.marquee{
  position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:clamp(2rem,5vw,3.6rem);
  width:max-content;
  animation:slide 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.marquee-track span{
  font-family:var(--display); font-weight:600;
  font-size:clamp(.95rem,.9rem + .35vw,1.15rem);
  letter-spacing:-.01em;
  color:var(--dim);
  white-space:nowrap;
  transition:color var(--t-med) var(--e-out);
}
.marquee-track span:hover{ color:var(--ice-bright) }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */

.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
  gap:clamp(1rem,2vw,1.35rem);
}

.card{
  position:relative;
  padding:clamp(1.6rem,3vw,2.1rem);
  background:linear-gradient(165deg,var(--surface),var(--ground-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform var(--t-med) var(--e-out),
             border-color var(--t-med) var(--e-out),
             box-shadow var(--t-med) var(--e-out);
}
/* foco de luz que sigue al cursor (coordenadas puestas por JS) */
.card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
                             rgba(126,166,216,.13),transparent 62%);
  opacity:0;
  transition:opacity var(--t-med) var(--e-out);
  pointer-events:none;
}
.card:hover{
  border-color:var(--border-strong);
  box-shadow:0 10px 22px -14px rgba(0,0,0,.85);
}
.card:hover::before{ opacity:1 }

/* Icono en línea con el título, sin recuadro propio: evita el bloque
   icono-sobre-título que repiten todas las tarjetas generadas. */
.card-head{
  display:flex; align-items:center; gap:.8rem;
  margin-bottom:.85rem;
}
.svc-ico{
  flex:none;
  color:var(--ice-bright);
  transition:transform var(--t-med) var(--e-out);
}
.svc-ico svg{ width:26px; height:26px }

.card-head h3{ margin:0 }
.card p{ color:var(--muted); font-size:.96rem }

/* Dos líneas: lo que se paga una vez y lo que se paga cada mes. */
/* Lo que incluye cada servicio. Reemplaza a las antiguas filas de precio:
   el precio sale en el diagnóstico, no en la página.
   Es lista vertical y no píldoras porque cada texto ocupa casi todo el ancho
   de la tarjeta: en píldoras caía una por fila y parecían botones sueltos. */
.incluye{
  display:grid; gap:.55rem;
  margin:var(--s3) 0 0; padding:var(--s3) 0 0;
  border-top:1px solid var(--border);
  list-style:none;
}
.incluye li{
  position:relative;
  padding-left:1.4rem;
  font-size:.85rem; line-height:1.45;
  color:var(--muted);
}
/* marca de verificación dibujada con bordes: sin SVG, sin otra petición */
.incluye li::before{
  content:''; position:absolute;
  left:.15rem; top:.42em;
  width:.38rem; height:.68rem;
  border:solid var(--ice-deep);
  border-width:0 1.6px 1.6px 0;
  transform:rotate(43deg);
}


/* ==========================================================================
   PROCESO
   ========================================================================== */

.proc{ position:relative; display:grid; gap:0 }
.proc-rail{
  position:absolute; left:23px; top:14px; bottom:14px; width:2px;
  background:var(--border);
  border-radius:2px;
  overflow:hidden;
}
/* Se escala en vez de animar la altura: transform no fuerza relayout. */
.proc-rail i{
  position:absolute; inset:0;
  background:linear-gradient(var(--ice-bright),var(--ice-deep));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .12s linear;
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:clamp(1rem,3vw,2rem);
  padding-block:clamp(1.3rem,3vw,2rem);
}
.step-dot{
  position:relative; z-index:2;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--ground);
  border:1px solid var(--border-strong);
  font-family:var(--mono); font-size:.85rem; font-weight:700;
  color:var(--dim);
  transition:color var(--t-med) var(--e-out),
             border-color var(--t-med) var(--e-out),
             transform var(--t-med) var(--e-out),
             background var(--t-med) var(--e-out);
}
/* El paso activo se marca con relleno y escala, no con un halo */
.step.on .step-dot{
  color:#04070e;
  background:linear-gradient(140deg,var(--ice-bright),var(--ice-deep));
  border-color:transparent;
  transform:scale(1.08);
}
.step-body{ padding-top:.35rem }
.step-body h3{ margin-bottom:.5rem }
.step-body p{ color:var(--muted); max-width:60ch }
.step-when{
  display:inline-block;
  margin-top:.9rem;
  font-family:var(--mono); font-size:.78rem;
  color:var(--ice);
  padding:.32rem .7rem;
  border:1px solid var(--border);
  border-radius:100px;
  background:rgba(126,166,216,.05);
}

@media (max-width:560px){
  .proc-rail{ left:18px }
  .step{ grid-template-columns:38px minmax(0,1fr); gap:1rem }
  .step-dot{ width:38px; height:38px; font-size:.75rem }
}

.plans-note a{ color:var(--ice); text-decoration:underline; text-underline-offset:3px }
.plans-note a:hover{ color:var(--ice-bright) }
.plans-note{
  margin-top:var(--s4);
  text-align:center;
  font-size:.88rem;
  color:var(--dim);
}

/* ==========================================================================
   NOSOTROS
   ========================================================================== */

.about{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.founder{
  position:relative;
  padding:clamp(1.8rem,3vw,2.4rem);
  background:linear-gradient(160deg,var(--surface-2),var(--ground-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.founder::before{
  content:''; position:absolute; top:-40%; right:-30%;
  width:75%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 66%);
  opacity:.5; pointer-events:none;
}
.founder-top{ position:relative; display:flex; align-items:center; gap:1rem; margin-bottom:var(--s3) }
.avatar{
  width:56px; height:56px; flex:none;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,var(--surface-3),var(--surface));
  border:1px solid var(--border-strong);
}
.avatar svg{ width:60%; height:60% }
.founder-top b{ display:block; color:var(--white); font-family:var(--display); font-weight:600; font-size:1.05rem }
.founder-top span{ font-family:var(--mono); font-size:.78rem; color:var(--ice); letter-spacing:.03em }
.founder blockquote{
  position:relative; margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.02rem,.98rem + .32vw,1.18rem);
  line-height:1.5; color:var(--white);
  letter-spacing:-.012em;
  text-wrap:pretty;
}
.about-body h2{ margin-bottom:var(--s3) }
.about-body p + p{ margin-top:var(--s3) }
.about-body .btn{ margin-top:var(--s4) }

@media (max-width:860px){
  .about{ grid-template-columns:1fr }
}

/* ==========================================================================
   PREGUNTAS
   ========================================================================== */

.faq{ max-width:820px; margin-inline:auto; display:grid; gap:.7rem }
.q{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:border-color var(--t-med) var(--e-out), background var(--t-med) var(--e-out);
}
.q:hover{ border-color:var(--border-strong) }
.q.open{ border-color:var(--border-strong); background:var(--surface-2) }
.q-btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:60px;
  padding:1.1rem clamp(1.1rem,2.5vw,1.6rem);
  background:transparent; border:0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(.98rem,.95rem + .2vw,1.08rem);
  color:var(--white);
  text-align:left;
  cursor:pointer;
  letter-spacing:-.012em;
}
.q-plus{
  position:relative; width:18px; height:18px; flex:none;
  transition:transform var(--t-med) var(--e-out);
}
.q-plus::before,.q-plus::after{
  content:''; position:absolute; top:50%; left:50%;
  background:var(--ice); border-radius:2px;
  transform:translate(-50%,-50%);
}
.q-plus::before{ width:14px; height:1.6px }
.q-plus::after{ width:1.6px; height:14px; transition:opacity var(--t-fast) var(--e-out) }
.q.open .q-plus{ transform:rotate(90deg) }
.q.open .q-plus::after{ opacity:0 }

/* Altura controlada por JS. El truco grid-template-rows 0fr→1fr es más limpio,
   pero colapsa la pista a 0 cuando el hijo lleva overflow:hidden en algunos
   motores, y entonces la respuesta no se abre nunca. Esto funciona siempre. */
/* El estado abierto/cerrado lo decide el CSS (height auto / 0); el deslizamiento
   lo hace JS con la Web Animations API. Así, si la animación no llega a correr,
   la respuesta igual queda visible — nunca una pregunta que no se abre. */
.q-panel{ height:0; overflow:hidden }
.q.open .q-panel{ height:auto }
html:not(.js) .q-panel{ height:auto }
.q-panel p{
  padding:0 clamp(1.1rem,2.5vw,1.6rem) 1.3rem;
  color:var(--muted); font-size:.96rem;
  max-width:70ch;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */

.cta{ position:relative; overflow:hidden }
.cta-box{
  position:relative;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);
  background:linear-gradient(150deg,var(--surface-2),var(--ground-2) 70%);
  border:1px solid var(--border-strong);
  border-radius:clamp(var(--radius),3vw,28px);
  text-align:center;
  overflow:hidden;
}
.cta-box::before{
  content:''; position:absolute; top:-55%; left:50%; transform:translateX(-50%);
  width:min(120%,900px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 62%);
  opacity:.55; pointer-events:none;
  animation:breathe 7s var(--e-soft) infinite alternate;
}
.cta-box > *{ position:relative }
.cta-box h2{ margin-bottom:var(--s3); max-width:18ch; margin-inline:auto }
.cta-box .lede{ margin-inline:auto; margin-bottom:clamp(2rem,4vw,2.6rem); text-align:center }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center }
.cta-fine{
  margin-top:var(--s4);
  font-family:var(--mono); font-size:.79rem;
  color:var(--dim); letter-spacing:.04em;
}

/* ==========================================================================
   PIE
   ========================================================================== */

footer{
  border-top:1px solid var(--border);
  background:var(--ground-2);
  padding-block:var(--s6) var(--s4);
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--border);
}
.foot-about p{ color:var(--muted); font-size:.93rem; max-width:34ch; margin-top:var(--s2) }
.foot-col h3{
  font-family:var(--mono); font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
  margin-bottom:var(--s2);
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.foot-col a{
  color:var(--muted); text-decoration:none; font-size:.93rem;
  transition:color var(--t-fast) var(--e-out);
  display:inline-block; padding-block:.15rem;
}
.foot-col a:hover{ color:var(--ice-bright) }
.foot-bot{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  align-items:center; justify-content:space-between;
  padding-top:calc(var(--s4) - .85rem);
  font-family:var(--mono); font-size:.78rem;
  color:var(--dim); letter-spacing:.03em;
}
/* el padding lleva el enlace a 44px de alto sin cambiar el tamaño del texto */
.foot-bot a{
  display:inline-block;
  padding-block:.85rem;
  color:var(--ice);
  text-decoration:none;
  transition:color var(--t-fast) var(--e-out);
}
.foot-bot a:hover{ color:var(--ice-bright) }
.foot-bot > span{ display:inline-flex; align-items:center }
.foot-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem }
@media (max-width:780px){
  .foot-top{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foot-about{ grid-column:1/-1 }
}

/* ==========================================================================
   ANIMACIONES DESTACADAS
   Todas se apoyan en transform/opacity: no provocan relayout y, si el motor
   no las ejecuta, nunca dejan contenido inaccesible.
   ========================================================================== */

/* --- barra de progreso de lectura, en el borde inferior de la cabecera --- */
.scroll-bar{
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,var(--ice-deep),var(--ice-bright));
  transform:scaleX(0); transform-origin:left;
  will-change:transform;
}

/* --- titular que sube por líneas desde detrás de una máscara --- */
.hero h1 .line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.hero h1 .line > span{
  display:block;
  transform:translateY(106%);
  animation:lineUp .95s var(--e-out) forwards;
  animation-delay:var(--d,0s);
}
@keyframes lineUp{ to{ transform:none } }
html:not(.js) .hero h1 .line > span{ animation:none; transform:none }

/* --- la regla del antetítulo se dibuja al entrar la sección --- */
.eyebrow::before{ transform:scaleX(0); transform-origin:left }
.rv.in .eyebrow::before,
.hero .eyebrow::before{
  transform:scaleX(1);
  transition:transform .7s .15s var(--e-out);
}

/* --- inclinación de las tarjetas (JS pone --rx / --ry) ---
   Sin preserve-3d ni translateZ: la tarjeta lleva overflow:hidden, que fuerza
   transform-style a flat y además hacía crecer el ancho del documento. */
.card{ --rx:0deg; --ry:0deg; --ty:0px }
.card:hover{ --ty:-4px }


/* --- el icono del servicio se inclina al pasar el cursor --- */
.card:hover .svc-ico{ transform:translateY(-2px) rotate(-6deg) scale(1.08) }

/* --- la órbita responde al cursor (--px/--py) y al scroll (--sy) --- */
.orbit{
  transform:translate3d(var(--px,0px), calc(var(--py,0px) + var(--sy,0px)), 0);
  transition:transform .7s var(--e-soft);
}


/* --- la aurora se desplaza más lento que la página --- */
.aurora{ transform:translate3d(0,var(--ay,0px),0) }

/* --- la marquesina se inclina según la velocidad del scroll --- */
.marquee{
  transform:skewX(var(--sk,0deg));
  transition:transform .45s var(--e-out);
}

/* --- los iconos se dibujan solos al entrar la tarjeta --- */
@keyframes draw{ from{ stroke-dashoffset:64 } to{ stroke-dashoffset:0 } }
.card.in .svc-ico svg > *{
  stroke-dasharray:64;
  animation:draw 1.1s var(--e-out) both;
  animation-delay:calc(var(--rvd,0ms) + 180ms);
}

/* --- cometa que recorre los anillos de la órbita ---
   Gira el ángulo del degradado, no la caja, para no alterar su rectángulo. --- */
.comet{
  position:absolute; border-radius:50%;
  background:conic-gradient(from 0deg,
             transparent 0 80%,
             rgba(126,166,216,.35) 92%,
             var(--ice-bright) 99%, transparent 100%);
  -webkit-mask:radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%);
  mask:radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%);
  animation:spin var(--cd,5s) linear infinite;
  will-change:transform;
}
.comet.c1{ inset:12% }
.comet.c2{ inset:26%; --cd:3.6s }

/* --- titulares de sección que suben palabra a palabra --- */
.head h2 .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.head h2 .w > span{
  display:inline-block;
  transform:translateY(108%);
  transition:transform .75s var(--e-out);
  transition-delay:var(--wd,0ms);
}
.head.in h2 .w > span{ transform:none }

/* --- las cifras del hero suben desde detrás de una máscara --- */
.stat .n{ overflow:hidden }
.stat .n > .roll{
  display:inline-block;
  animation:lineUp .85s var(--e-out) backwards;
  animation-delay:calc(var(--sd,0s) + .1s);
}

/* --- onda al pulsar un botón --- */
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:translate(-50%,-50%) scale(0);
  animation:ripple .62s var(--e-out) forwards;
  pointer-events:none;
}
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }

/* --- telón de entrada ---
   Lo inserta el JS y lo retira un temporizador pase lo que pase con la
   animación, para que nunca pueda quedarse tapando la página. --- */
.curtain{
  position:fixed; inset:0; z-index:200;
  background:var(--ground);
  display:grid; place-items:center;
  animation:curtainUp .9s .5s var(--e-out) forwards;
}
.curtain svg{
  width:74px; height:74px;
  animation:curtainMark .8s var(--e-out) both;
}
@keyframes curtainMark{
  from{ opacity:0; transform:scale(.82) }
  to{ opacity:1; transform:none }
}
@keyframes curtainUp{ to{ transform:translateY(-101%) } }

/* --- grano de película: textura fina sobre todo --- */
.grain{
  position:fixed; inset:0; z-index:95;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- índice lateral de secciones --- */
.dots{
  position:fixed; right:clamp(.8rem,2vw,1.6rem); top:50%;
  transform:translateY(-50%);
  z-index:96;
  display:grid; gap:.1rem;
}
.dots a{
  display:flex; align-items:center; justify-content:flex-end;
  gap:.6rem;
  min-height:32px; padding-inline:.35rem;
  text-decoration:none;
  color:var(--dim);
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.04em;
}
.dots a i{
  font-style:normal;
  opacity:0; transform:translateX(6px);
  transition:opacity var(--t-med) var(--e-out), transform var(--t-med) var(--e-out);
  white-space:nowrap;
}
.dots a b{
  display:block; width:7px; height:7px; flex:none;
  border-radius:50%;
  background:var(--border-strong);
  transition:background var(--t-med) var(--e-out), transform var(--t-med) var(--e-out);
}
.dots a:hover i{ opacity:1; transform:none }
.dots a:hover b{ background:var(--ice) }
.dots a.on b{ background:var(--ice-bright); transform:scale(1.5) }
.dots a.on i{ opacity:1; transform:none; color:var(--ice-bright) }
@media (max-width:1100px){ .dots{ display:none } }

/* --- pulso del paso activo del proceso --- */
.step.on .step-dot::after{
  content:''; position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--ice);
  animation:ping 2s var(--e-out) infinite;
}
@keyframes ping{
  0%{ transform:scale(1); opacity:.7 }
  70%,100%{ transform:scale(2); opacity:0 }
}

/* --- las cifras del hero entran escalonadas --- */
.stat{ animation:rise .8s var(--e-out) backwards; animation-delay:var(--sd,0s) }
html:not(.js) .stat{ animation:none }


/* --- barra fija de contacto en móvil ---
   El CTA de la cabecera se oculta bajo 420px por falta de espacio, y entre el
   hero y los planes el visitante se quedaba sin ninguna vía de contacto. --- */
.cta-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:97;
  display:none;
  padding:.7rem var(--pad);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(8,13,24,.97);
  border-top:1px solid var(--border-strong);
  transform:translateY(120%);
  transition:transform .4s var(--e-out);
}
.cta-movil.on{ transform:none }
.cta-movil .btn{ width:100%; min-height:50px }
@media (max-width:760px){
  .cta-movil{ display:block }
  footer{ padding-bottom:calc(var(--s4) + 74px) }
}
@media (prefers-reduced-motion:reduce){
  .cta-movil{ transition:none }
}

/* ==========================================================================
   REVELADO AL HACER SCROLL
   ========================================================================== */

/* El desplazamiento de entrada viaja en --rvy, no en un transform propio, para
   poder componerlo con la inclinación de las tarjetas y el alzado al pasar el
   cursor. Si .rv fijara transform, ganaría por orden y anularía los demás. */
.rv{
  --rvy:18px;
  opacity:0;
  transform:translateY(var(--rvy));
  transition:opacity .55s var(--e-out), transform .55s var(--e-out);
  transition-delay:var(--rvd,0ms);
}
.rv.in{ opacity:1; --rvy:0px }

/* Composición: entrada + inclinación + alzado, en un solo transform.
   Van después de .rv a propósito, para ganar por orden de origen. */
.card{
  transform:perspective(900px)
            rotateX(calc(var(--rx) + var(--rvx,0deg)))
            rotateY(var(--ry))
            translateY(calc(var(--ty) + var(--rvy,0px)));
}
.card.rv{ --rvx:-11deg }
.card.rv.in{ --rvx:0deg }
/* sin JS, todo visible */
html:not(.js) .rv{ opacity:1; transform:none }

/* entrada del hero: CSS puro, no depende del observador */
.hero-anim{
  opacity:0;
  transform:translateY(20px);
  animation:rise .75s var(--e-out) forwards;
  animation-delay:var(--d,0s);
}
@keyframes rise{ to{ opacity:1; transform:none } }
html:not(.js) .hero-anim{ animation:none; opacity:1; transform:none }

/* --- fuera de pantalla: nada se anima --- */
.fuera,
.fuera *,
.fuera *::before,
.fuera *::after{
  animation-play-state:paused !important;
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv{ opacity:1; transform:none }
  .hero-anim{ opacity:1; transform:none }
  /* animaciones de luz: se muestran ya en su estado final */
  .card.rv.in::after{ animation:none; opacity:0 }
  .btn-ghost:hover::after{ transform:translateX(-120%) }
  .incluye li::before{ opacity:1; transform:rotate(43deg) scale(1); transition:none }
  .btn:hover,.pacto:hover{ transform:none }
  /* el titular por líneas se muestra ya colocado */
  .hero h1 .line > span{ animation:none; transform:none }
  .stat{ animation:none }
  /* nada de perspectiva ni paralaje */
  .card,.orbit{ transform:none }
  .eyebrow::before{ transform:scaleX(1) }
  .scroll-bar{ display:none }
  .marquee{ transform:none }
  .card.in .svc-ico svg > *{ animation:none; stroke-dasharray:none }
  .step.on .step-dot::after{ display:none }
  .comet{ display:none }
  .head h2 .w > span{ transform:none }
  .stat .n > .roll{ animation:none }
  .ripple{ display:none }
  .curtain{ display:none }
  .grain{ display:none }
  .card.rv{ --rvx:0deg }
}

/* ==========================================================================
   Utilidades que reemplazan a los antiguos atributos style="..."
   Existen para que la CSP pueda prohibir estilos en línea (sin 'unsafe-inline').
   ========================================================================== */
.abs{ position:absolute }
.jc-center{ justify-content:center }
.centrado{ text-align:center; margin-inline:auto }
.banda{ background:var(--ground-2); border-block:1px solid var(--border) }
.inset-26{ inset:26% }
.d-05{ --d:.05s } .d-16{ --d:.16s } .d-24{ --d:.24s }
.d-28{ --d:.28s } .d-30{ --d:.3s }  .d-34{ --d:.34s }
.sd-62{ --sd:.62s } .sd-72{ --sd:.72s } .sd-82{ --sd:.82s }
.dur-29{ --dur:29s } .dur-38{ --dur:38s }
.delay-145{ --delay:-14.5s } .delay-1267{ --delay:-12.67s } .delay-2533{ --delay:-25.33s }
.rvd-0{ --rvd:0ms } .rvd-60{ --rvd:60ms } .rvd-80{ --rvd:80ms } .rvd-120{ --rvd:120ms }


/* ==========================================================================
   COMPROMISO — dos columnas enfrentadas
   ========================================================================== */

.pactos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(1rem,2.5vw,1.5rem);
}
.pacto{
  /* --rx/--ry los escribe el JS al mover el cursor; --rvy viene del revelado.
     Se componen aqui porque una sola propiedad transform no puede acumularse. */
  --ty:0px; --rx:0deg; --ry:0deg;
  padding:clamp(1.5rem,3.5vw,2.2rem);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--ground-2);
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry))
            translateY(calc(var(--ty) + var(--rvy,0px)));
}
.pacto h3{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 var(--s3);
  font-size:1.05rem;
}
.pacto-ico{
  display:grid; place-items:center;
  width:26px; height:26px; flex:none;
  border-radius:50%;
  font-size:.8rem; line-height:1;
}
.pacto-no .pacto-ico{ background:rgba(140,152,172,.14); color:var(--muted) }
.pacto-si .pacto-ico{ background:rgba(126,166,216,.16); color:var(--ice-bright) }
.pacto-si{ border-color:var(--border-strong) }
.pacto ul{ margin:0; padding:0; list-style:none; display:grid; gap:.85rem }
.pacto li{
  position:relative;
  padding-left:1.1rem;
  font-size:.94rem; line-height:1.55;
  color:var(--text);
}
.pacto li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%;
}
.pacto-no li{ color:var(--muted) }
.pacto-no li::before{ background:var(--dim) }
.pacto-si li::before{ background:var(--ice) }


/* ==========================================================================
   ANIMACIONES DE LUZ
   Suben la luminosidad sobre la base oscura. Todas mueven sólo transform y
   opacity, que el compositor resuelve en GPU sin repintar, y todas se apagan
   con prefers-reduced-motion y al salir de pantalla (.fuera).
   ========================================================================== */

/* --- un barrido de luz cruza cada tarjeta al revelarse, una sola vez --- */
.card::after{
  content:''; position:absolute; top:0; bottom:0;
  left:-60%; width:45%;
  background:linear-gradient(100deg,
             transparent, rgba(169,200,238,.18), transparent);
  opacity:0;
  pointer-events:none;
  will-change:transform, opacity;
}
.card.rv.in::after{
  animation:barrido 1.15s var(--e-out) 1 both;
  animation-delay:calc(.28s + var(--rvd, 0ms));
}
@keyframes barrido{
  0%   { opacity:0; transform:translateX(0) }
  18%  { opacity:1 }
  100% { opacity:0; transform:translateX(370%) }
}

/* --- el botón secundario también recibe su destello al pasar el cursor --- */
.btn-ghost::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 32%,
             rgba(169,200,238,.22) 50%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .75s var(--e-out);
}
.btn-ghost:hover::after{ transform:translateX(120%) }

/* --- los nodos de la órbita laten con luz propia --- */
.node{ box-shadow:0 4px 12px -6px rgba(0,0,0,.85), 0 0 0 0 rgba(126,166,216,.28) }
.node b{ box-shadow:0 0 6px 1px rgba(169,200,238,.55) }

/* --- la marca de verificación se dibuja al revelarse la tarjeta --- */
.incluye li::before{
  opacity:0;
  transform:rotate(43deg) scale(.4);
  transition:opacity .45s var(--e-out), transform .45s var(--e-out);
}
.rv.in .incluye li::before{ opacity:1; transform:rotate(43deg) scale(1) }
.incluye li:nth-child(1)::before{ transition-delay:.42s }
.incluye li:nth-child(2)::before{ transition-delay:.50s }
.incluye li:nth-child(3)::before{ transition-delay:.58s }
.incluye li:nth-child(4)::before{ transition-delay:.66s }