:root{
  /* --- paleta base (estilo minimalista tipo Manim) --- */
  --bg:#0b0e14;
  --bg2:#0e1116;
  --card:#161b22;
  --line:#21262d;
  --fg:#e6edf3;
  --mut:#9aa4b2;
  --acc:#58a6ff;

  --teal:#8ecae6;
  --cyan:#17b3c6;
  --yellow:#ffd166;
  --green:#06d6a0;
  --pink:#ef476f;

  --radius:14px;
  --hair:1px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.55 system-ui,"DejaVu Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============ glow leve sobre líneas ============ */
.glow-teal{filter:drop-shadow(0 0 6px rgba(142,202,233,.55))}

/* ============ cajas de bordes redondeados ============ */
.box{
  border:1.2px solid var(--line);border-radius:var(--radius);
  background:transparent;padding:18px 20px;
}
.box--glow{
  border-color:rgba(88,166,255,.45);
  box-shadow:0 0 12px rgba(88,166,255,.22), inset 0 0 0 1px rgba(88,166,255,.06);
}
.box--pad{padding:26px 28px}
.box__t{margin:0 0 6px;font-size:15px;letter-spacing:.04em;color:var(--acc)}
.box__s{margin:14px 0 0;color:var(--mut);font-size:14.5px}

/* ============ maquetación aprobada ============ */
.wrap{max-width:1180px;margin:auto;padding:34px 34px 0}
.lead{margin:0;color:var(--mut);max-width:62ch}
.lead b{color:var(--fg);font-weight:650}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.chips li{
  background:#1c2333;border:var(--hair) solid var(--line);color:#bcd3ff;
  border-radius:999px;padding:5px 12px;font-size:13px;
}

.grid{
  display:grid;gap:22px;padding:26px 34px 40px;max-width:1180px;margin:auto;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.card{
  background:var(--card);border:var(--hair) solid var(--line);
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px);
  animation:enter .8s var(--ease) forwards;
}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.15s}
.card:nth-child(3){animation-delay:.25s}
.card:nth-child(4){animation-delay:.35s}
.card:nth-child(5){animation-delay:.45s}
.card:nth-child(6){animation-delay:.55s}
@keyframes enter{to{opacity:1;transform:none}}

.media{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:#000}
.media svg{display:block;width:86%;height:86%}
.media--ico svg{width:74%}
.card__body{padding:16px 18px 18px}
.card__body h2{margin:0 0 6px;font-size:17.5px;font-weight:600}
.card__body h2 b{color:var(--acc);font-weight:650}
.card__body p{margin:0 0 10px;color:var(--mut);font-size:14.5px}

pre{
  margin:0;background:var(--bg);border:var(--hair) solid var(--line);
  border-radius:9px;padding:10px 12px;font-size:12.2px;line-height:1.45;
  color:#9ee7b8;overflow-x:auto;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
code{background:#21262d;padding:1px 5px;border-radius:5px;font-size:.92em}

.wide{grid-column:1/-1}
.btn{
  display:inline-block;background:var(--acc);color:#04101f;
  font-weight:700;text-decoration:none;padding:11px 18px;border-radius:10px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 16px rgba(88,166,255,.4)}
.btn--ghost{
  background:transparent;color:var(--fg);border:1.2px solid var(--line);
}
.btn--ghost:hover{border-color:rgba(142,202,233,.6);box-shadow:0 0 14px rgba(142,202,233,.2)}
.btn--sm{padding:8px 14px;font-size:14px}

.foot{color:var(--mut);font-size:13px;padding:8px 34px 46px;max-width:1180px;margin:auto}
.foot p{margin:6px 0}
.foot b{color:#c9d3e0}

/* ============ transiciones suaves (stagger) ============ */
.fade-slide{opacity:0;transform:translateY(10px);animation:enter .9s var(--ease) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(11,14,20,.86);backdrop-filter:blur(10px);
  border-bottom:var(--hair) solid var(--line);
}
.nav__in{
  max-width:1180px;margin:auto;padding:12px 34px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg);
  text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand__logo{
  width:38px;height:38px;border-radius:10px;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(142,202,233,.35);
  box-shadow:0 0 10px rgba(142,202,233,.25);
}
.brand__txt{font-size:17px}
.nav__links{display:flex;gap:20px;margin-left:auto}
.nav__links a{color:var(--mut);text-decoration:none;font-size:14.5px;transition:color .3s var(--ease)}
.nav__links a:hover{color:var(--teal)}

/* ============ hero ============ */
.hero{padding-top:8px}
.hero__grid{
  display:grid;gap:34px;align-items:center;
  grid-template-columns:1.05fr .95fr;padding-top:36px;padding-bottom:36px;
}
.et{
  color:var(--acc);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 12px;font-weight:650;
}
.titulo{
  margin:0 0 14px;font-size:clamp(40px,7vw,74px);line-height:1.02;
  letter-spacing:-.03em;font-weight:720;
}
.titulo .ch{display:inline-block;opacity:0;transform:translateY(.35em) rotate(-3deg);
  animation:letra .7s var(--ease) forwards;animation-delay:calc(var(--i)*.055s + .15s)}
.titulo .ch--sp{width:.32em}
@keyframes letra{to{opacity:1;transform:none}}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__dibujo{padding:18px;background:rgba(14,17,22,.6)}
.hero__dibujo svg{display:block;width:100%;height:auto}

.sec{padding-top:26px}
.sec[id],.foot[id]{scroll-margin-top:76px}
.sec--tight{padding-top:6px}
.sec__t{margin:0 0 8px;font-size:clamp(26px,3.6vw,36px);letter-spacing:-.02em;font-weight:700}
.sec__t b{color:var(--acc);font-weight:700}
.sec__s{margin:0;color:var(--mut);max-width:64ch}

/* ============ líneas SVG ============ */
.ln{
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ln.dim{stroke-width:1.4;opacity:.65}
.ln.dash,.ln.stitch,.ln.dash-slow{stroke-dasharray:9 8}
.ln.stitch{stroke-dasharray:16 12;animation:correr 2.4s linear infinite}
.ln.dash-slow{stroke-dasharray:10 9}
.teal{stroke:var(--teal)}.acc{stroke:var(--acc)}.grn,.green{stroke:var(--green)}
.pnk,.pink{stroke:var(--pink)}.yellow{stroke:var(--yellow)}
.svg-cap{
  fill:var(--mut);font:600 11px system-ui,sans-serif;letter-spacing:.22em;
  text-anchor:middle;opacity:0;animation:enter 1s var(--ease) 2.4s forwards;
}
@keyframes correr{to{stroke-dashoffset:-56}}

/* ——— Dibujado de trazos al entrar en pantalla ———
   Dos vías separadas por especificidad, sin que se pisen:
   · Sólidos  → el JS les añade .js-draw; se dibujan con dasharray+offset.
   · .dash    → conservan su guion y aparecen por opacidad; al llevar .dash
               su regla gana (más específica) y el JS no les pone .js-draw.
   Todo lo anterior va ANTES de la red de seguridad final, que solo pinta
   los nodos que no lleven ninguna marca (p. ej. si el JS no carga). */
.js [data-draw] [data-line]{
  transition:stroke-dashoffset 1.5s var(--ease), opacity 1.1s var(--ease);
  transition-delay:var(--d,0s);
}
.js [data-draw] [data-line].js-draw{
  stroke-dasharray:var(--len,0);stroke-dashoffset:var(--len,0);
}
.js [data-draw].in [data-line].js-draw{stroke-dashoffset:0}

/* trazo discontinuo: aparece por opacidad, nunca por dashoffset */
.js [data-draw] [data-line].dash{opacity:0;stroke-dashoffset:0}
.js [data-draw].in [data-line].dash{opacity:1}

/* red de seguridad (va la última y solo afecta a nodos sin marca): si el
   JS no cargó o no corrió, todo el mundo se ve entero */
[data-draw] [data-line]:not(.js-draw):not(.dash){opacity:1;stroke-dashoffset:0}

/* ============ costura divisoria ============ */
.costura{max-width:1180px;margin:6px auto;padding:0 34px}
.costura svg{display:block;width:100%;height:10px;opacity:.85;
  filter:drop-shadow(0 0 5px rgba(142,202,233,.35))}

/* ============ proceso ============ */
.pasos{
  position:relative;display:grid;gap:20px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.pasos__linea{
  position:absolute;left:0;right:0;top:-16px;width:100%;height:8px;
  opacity:.7;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.6s var(--ease) .35s;
}
.pasos.in .pasos__linea{clip-path:inset(0 0 0 0)}
.paso{background:var(--card);position:relative}
.paso__n{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1.2px solid rgba(88,166,255,.5);color:var(--acc);
  font:700 13px/1 ui-monospace,monospace;margin-bottom:12px;
  box-shadow:0 0 10px rgba(88,166,255,.18);
}
.paso h3{margin:0 0 6px;font-size:17px;font-weight:650}
.paso p{margin:0;color:var(--mut);font-size:14.3px}

/* ============ cita (typewriter) + números ============ */
.dos{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  padding-bottom:8px}
.typebox{
  margin:6px 0 0;font-size:clamp(20px,2.4vw,27px);line-height:1.35;
  font-weight:650;letter-spacing:-.01em;color:var(--fg);min-height:2.7em;
}
.typebox .cursor{
  display:inline-block;width:.55ch;height:1.05em;background:var(--teal);
  margin-left:.12em;vertical-align:-.16em;animation:parpadeo 1s steps(1) infinite;
}
.typebox.done .cursor{opacity:0}
@keyframes parpadeo{50%{opacity:0}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.stat{
  border:1.2px solid var(--line);border-radius:12px;padding:14px 12px;
  background:var(--bg2);text-align:center;
}
.stat__n{
  display:block;font-size:clamp(26px,3.4vw,38px);font-weight:720;color:var(--green);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(6,214,160,.35);
}
.stat__l{display:block;color:var(--mut);font-size:12.5px;letter-spacing:.04em;margin-top:4px}

/* ============ CTA ============ */
.cta{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:center;
  background:linear-gradient(0deg,var(--card),var(--card))}
.cta .card__body{padding:28px 30px}
.cta__t{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 10px}
.cta__t b{color:var(--green);font-weight:700}
.cta__p{color:var(--mut);margin:0 0 18px;max-width:56ch}
.cta__row{display:flex;flex-wrap:wrap;gap:12px}
.cta__datos{
  list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;
  color:var(--mut);font-size:14px;
}
.cta__datos b{display:inline-block;min-width:88px;color:#c9d3e0;font-weight:650}
.cta__datos a{color:var(--acc);text-decoration:none;transition:color .3s var(--ease)}
.cta__datos a:hover{color:var(--teal);text-decoration:underline}
.cta__datos--top{margin:0}
.cta__dibujo{padding:10px 22px 22px}
.cta__dibujo svg{display:block;width:100%;height:auto}

/* ============ responsive ============ */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta__dibujo{display:none}
  .nav__links{display:none}
}
@media (max-width:560px){
  .wrap,.grid,.foot,.costura,.nav__in{padding-left:20px;padding-right:20px}
  .stats{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}