@font-face{font-family:"CP Display";font-weight:500;font-style:normal;font-display:swap;src:url(/inter-display-500.woff2) format("woff2")}
@font-face{font-family:"CP Text";font-weight:400;font-style:normal;font-display:swap;src:url(/inter-400.woff2) format("woff2")}
@font-face{font-family:"CP Text";font-weight:500;font-style:normal;font-display:swap;src:url(/inter-500.woff2) format("woff2")}

:root{
  --bg:#0c1322;
  --bg-glow:#13203a;
  --ink:#f3f6fb;
  --ink-2:#aab7cb;
  --ink-3:#7c8ca6;
  --cyan:#5cd3f2;
  --cyan-soft:rgba(92,211,242,.42);
  --line:rgba(150,190,228,.26);
  --line-soft:rgba(150,190,228,.13);
  --font-display:"CP Display","Inter Display",Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-text:"CP Text",Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:var(--bg);color:var(--ink);
  font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.stage{
  position:relative;isolation:isolate;
  min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto 1fr;
  padding:clamp(20px,3vh,36px) 16px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  padding-bottom:max(clamp(20px,3vh,36px),env(safe-area-inset-bottom));
  overflow:hidden;
}
/* capas de fondo */
.glow{position:absolute;inset:0;z-index:-4;background:radial-gradient(ellipse 70% 60% at 50% 50%,var(--bg-glow) 0%,var(--bg) 70%)}
.grid{position:absolute;inset:0;z-index:-3;
  background-image:radial-gradient(rgba(214,230,255,.085) 1px,transparent 1.4px);
  background-size:28px 28px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 20%,transparent 80%)}
.net{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block}
.net-portrait{display:none}
@media (orientation:portrait){.net-landscape{display:none}.net-portrait{display:block}}
.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 48% 36% at 50% 50%,rgba(12,19,34,.98) 0%,rgba(12,19,34,.9) 38%,rgba(12,19,34,.55) 68%,rgba(12,19,34,0) 100%)}

/* marcas de encuadre en las esquinas */
.corner{position:absolute;width:18px;height:18px;border:1px solid rgba(170,200,235,.28);z-index:0}
.corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.corner.br{bottom:14px;right:14px;border-left:0;border-top:0}

/* red */
.ring{fill:none;stroke:rgba(150,190,228,.16);stroke-width:1}
.ring-dash{stroke-dasharray:2 9;stroke:rgba(150,190,228,.28);animation:march 2.8s linear infinite}
.ring-thin{stroke:rgba(150,190,228,.10)}
.ring-outer{stroke:rgba(150,190,228,.14)}
.ticks{transform-box:view-box;transform-origin:600px 600px;animation:spin 240s linear infinite reverse}
.tick{stroke:rgba(150,190,228,.22);stroke-width:1}
.tick-major{stroke:rgba(150,190,228,.42);stroke-width:1.4}
.ln{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s var(--ease) forwards}
.l-hub{stroke:var(--cyan-soft);stroke-width:1.3}
.l-ring{stroke:var(--line-soft);stroke-width:1}
.l-field{stroke:var(--line);stroke-width:1}
.l-mesh{stroke:var(--line-soft);stroke-width:1}
.node{opacity:0;animation:appear 1.2s var(--ease) forwards}
.node-inner .core{fill:#eaf6ff}
.node-outer .core{fill:var(--cyan);opacity:.9}
.halo{fill:var(--cyan);opacity:.10;transform-box:fill-box;transform-origin:center;animation:breathe 5.5s ease-in-out infinite}
.pulse-dot{fill:#c9f1ff}
.pulse-halo{fill:var(--cyan)}
.lines .ln:nth-child(1){animation-delay:0.15s}
.lines .ln:nth-child(2){animation-delay:0.23s}
.lines .ln:nth-child(3){animation-delay:0.31s}
.lines .ln:nth-child(4){animation-delay:0.39s}
.lines .ln:nth-child(5){animation-delay:0.47s}
.lines .ln:nth-child(6){animation-delay:0.70s}
.lines .ln:nth-child(7){animation-delay:0.77s}
.lines .ln:nth-child(8){animation-delay:0.84s}
.lines .ln:nth-child(9){animation-delay:0.91s}
.lines .ln:nth-child(10){animation-delay:0.98s}
.lines .ln:nth-child(11){animation-delay:0.55s}
.lines .ln:nth-child(12){animation-delay:0.61s}
.lines .ln:nth-child(13){animation-delay:0.67s}
.lines .ln:nth-child(14){animation-delay:0.73s}
.lines .ln:nth-child(15){animation-delay:0.79s}
.lines .ln:nth-child(16){animation-delay:0.85s}
.lines .ln:nth-child(17){animation-delay:0.91s}
.lines .ln:nth-child(18){animation-delay:0.97s}
.lines .ln:nth-child(19){animation-delay:1.03s}
.lines .ln:nth-child(20){animation-delay:1.09s}
.lines .ln:nth-child(21){animation-delay:1.00s}
.lines .ln:nth-child(22){animation-delay:1.08s}
.lines .ln:nth-child(23){animation-delay:1.16s}
.lines .ln:nth-child(24){animation-delay:1.24s}
.lines .ln:nth-child(25){animation-delay:1.32s}
.lines .ln:nth-child(26){animation-delay:1.40s}
.nodes .node:nth-child(1){animation-delay:0.90s}
.nodes .node:nth-child(2){animation-delay:1.00s}
.nodes .node:nth-child(3){animation-delay:1.10s}
.nodes .node:nth-child(4){animation-delay:1.20s}
.nodes .node:nth-child(5){animation-delay:1.30s}
.nodes .node:nth-child(6){animation-delay:1.10s}
.nodes .node:nth-child(7){animation-delay:1.17s}
.nodes .node:nth-child(8){animation-delay:1.24s}
.nodes .node:nth-child(9){animation-delay:1.31s}
.nodes .node:nth-child(10){animation-delay:1.38s}
.nodes .node:nth-child(11){animation-delay:1.45s}
.nodes .node:nth-child(12){animation-delay:1.52s}
.nodes .node:nth-child(13){animation-delay:1.59s}
.nodes .node:nth-child(14){animation-delay:1.66s}
.nodes .node:nth-child(15){animation-delay:1.73s}
.node-inner:nth-child(1) .halo{animation-delay:0.0s}
.node-inner:nth-child(2) .halo{animation-delay:0.9s}
.node-inner:nth-child(3) .halo{animation-delay:1.8s}
.node-inner:nth-child(4) .halo{animation-delay:2.7s}
.node-inner:nth-child(5) .halo{animation-delay:3.6s}

/* texto */
.hero{grid-row:2;text-align:center;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.wordmark{
  margin:0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.35rem,9.2vw,7.6rem);line-height:1;
  letter-spacing:.18em;padding-left:.18em; /* compensa el tracking final */
  color:var(--ink);
  text-shadow:0 0 60px rgba(92,211,242,.18);
}
.rule{position:relative;width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-soft) 20%,var(--cyan-soft) 80%,transparent);margin:clamp(22px,3.4vh,34px) 0}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--cyan);transform:translate(-50%,-50%);box-shadow:0 0 14px rgba(92,211,242,.65)}
.descriptor{
  margin:0;max-width:34ch;
  font-size:clamp(1rem,1.55vw,1.32rem);line-height:1.5;letter-spacing:.012em;
  color:var(--ink-2);font-weight:400;
  text-wrap:balance;
}
.closing{grid-row:3;align-self:end;justify-self:center;text-align:center;position:relative;z-index:1;margin-top:28px}
.closing::before{content:"";position:absolute;inset:-18px -70px;z-index:-1;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(12,19,34,.95) 0%,rgba(12,19,34,.6) 55%,rgba(12,19,34,0) 100%)}
.closing a{
  display:inline-block;padding:8px 6px;
  font-size:clamp(.72rem,.8vw,.8rem);letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--ink-3);text-decoration:none;
  transition:color .35s var(--ease);
}
.closing a strong{font-weight:500;color:var(--cyan);position:relative}
.closing a strong::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.closing a:hover,.closing a:focus-visible{color:var(--ink-2)}
.closing a:hover strong::after,.closing a:focus-visible strong::after{transform:scaleX(1)}
.closing a:focus-visible{outline:1px solid var(--cyan);outline-offset:4px;border-radius:2px}

/* página 404 */
.note{margin:clamp(18px,3vh,28px) 0 0;font-size:.95rem;color:var(--ink-3);letter-spacing:.02em}
.note a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(92,211,242,.4)}
.note a:hover,.note a:focus-visible{border-bottom-color:var(--cyan)}

/* entrada */
.reveal{opacity:0;transform:translateY(14px);animation:rise 1.1s var(--ease) forwards}
.wordmark{animation-delay:.25s}
.rule{animation-delay:.55s}
.descriptor{animation-delay:.7s}
.note{animation-delay:.85s}
.closing{animation-delay:1.1s}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes march{to{stroke-dashoffset:-11}}
@keyframes breathe{0%,100%{transform:scale(.7);opacity:.06}50%{transform:scale(1.25);opacity:.16}}

@media (max-width:640px){
  .wordmark{letter-spacing:.15em;padding-left:.15em}
  .descriptor{max-width:30ch}
  .closing a{font-size:.66rem;letter-spacing:.2em}
  .veil{background:radial-gradient(ellipse 82% 30% at 50% 50%,rgba(12,19,34,.98) 0%,rgba(12,19,34,.9) 38%,rgba(12,19,34,.55) 68%,rgba(12,19,34,0) 100%)}
}
@media (max-height:520px){
  .rule{margin:14px 0}
  .closing{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .ring-dash,.ticks,.halo,.ln,.node,.reveal{animation:none}
  .ln{stroke-dashoffset:0}
  .node,.reveal{opacity:1;transform:none}
  .pulses{display:none}
}