/* ============================================================
   Tokens
   ============================================================ */
:root{
  --bg:        #04070a;
  --bg-soft:   #0a1015;
  --surface:   rgba(12,18,22,.66);
  --text:      #eaf3f5;
  --muted:     #8ba1a8;
  --accent:    #18bdd9;
  --accent-dk: #03181d;
  --line:      rgba(139,161,168,.18);
  --line-soft: rgba(139,161,168,.10);

  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-head:    "Archivo", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, sans-serif;
  --f-serif:   "Instrument Serif", Georgia, serif;

  --wrap: 1240px;
  --pad:  clamp(20px, 5vw, 56px);
  --sec-y: clamp(80px, 11vw, 150px);
  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Códigos de color del plano de boxes (igual que en la app) */
  --sx-s:      #e0524f;   /* semental */
  --sx-h:      #ef8ab3;   /* yegua */
  --sx-c:      #e6c14a;   /* castrado */
  --sx-free:   rgba(139,161,168,.28);
  --sp-paja:   #f0a23a;
  --sp-viruta: #9b7be0;

  /* Geometría del grafo */
  --spin: 48s;
}

html[data-theme="light"]{
  --bg:        #f6f8f9;
  --bg-soft:   #ffffff;
  --surface:   rgba(255,255,255,.72);
  --text:      #0a1216;
  --muted:     #5b6f77;
  --accent:    #0f8fa8;
  --accent-dk: #e4f6fa;
  --line:      rgba(10,18,22,.14);
  --line-soft: rgba(10,18,22,.07);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s var(--ease), color .35s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }

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

h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  line-height:.99; letter-spacing:-.03em;
}
h1 em{ font-style:normal; color:var(--accent); }

h2{
  font-family:var(--f-head); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.1rem, 5.4vw, 4.3rem);
  line-height:.98; letter-spacing:-.035em;
}
h2 em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.01em; color:var(--accent);
}

/* ============================================================
   Botones
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:999px; border:1px solid transparent;
  font-size:.875rem; font-weight:500; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--accent); color:var(--accent-dk); font-weight:600; }
.btn-solid:hover{ background:var(--text); color:var(--bg); }
.btn-line{ border-color:var(--line); color:var(--text); background:transparent; }
.btn-line:hover{ border-color:var(--accent); color:var(--accent); }
.btn-lg{ padding:15px 30px; font-size:.95rem; }

.icon-btn{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--text);
  cursor:pointer; transition:border-color .25s var(--ease), color .25s var(--ease), transform .4s var(--ease);
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(45deg); }

/* ============================================================
   Ticker + marquesinas
   ============================================================ */
.ticker{
  border-bottom:1px solid var(--line); background:var(--bg);
  overflow:hidden; position:relative; z-index:60;
}
.ticker-track, .dmq-track{ display:flex; width:max-content; }
.ticker-track{ animation:slide 38s linear infinite; }
.ticker span, .dmq span{
  display:inline-block; padding-block:9px; padding-right:2.2rem;
  font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.ticker i, .dmq i{ font-style:normal; color:var(--accent); margin-inline:1.6rem; }

.dmq{ border-block:1px solid var(--line); overflow:hidden; }
.dmq-row{ overflow:hidden; }
.dmq-row + .dmq-row{ border-top:1px solid var(--line-soft); }
.dmq span{
  font-family:var(--f-head); font-size:clamp(1.4rem,3.4vw,2.6rem); font-weight:800;
  letter-spacing:-.02em; padding-block:clamp(14px,2vw,22px); padding-right:3rem;
  color:var(--text); opacity:.9; text-transform:uppercase;
}
.dmq-row .dmq-track{ animation:slide 30s linear infinite; }
.dmq-row.reverse .dmq-track{ animation:slide 34s linear infinite reverse; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   Navegación
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:73px; }

.logo{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--f-head); font-weight:800; font-size:1.02rem; letter-spacing:.02em;
}
.logo-mark{ display:grid; gap:3.5px; }
.logo-mark i{ display:block; height:2.5px; border-radius:2px; background:var(--accent); }
.logo-mark i:nth-child(1){ width:19px; }
.logo-mark i:nth-child(2){ width:13px; }
.logo-mark i:nth-child(3){ width:16px; }

.nav-links{ display:flex; gap:20px; }
.nav-links a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.875rem; color:var(--muted); position:relative;
  transition:color .25s var(--ease);
}
.nav-links .dot{
  width:5px; height:5px; border-radius:50%; background:var(--line);
  border:1px solid var(--muted); transition:background .25s var(--ease), border-color .25s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover .dot{ background:var(--accent); border-color:var(--accent); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.burger{ display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:9px;
  background:transparent; cursor:pointer; padding:0; place-items:center; gap:5px; }
.burger span{ display:block; width:16px; height:1.5px; background:var(--text); }
.nav-links .m-only{ display:none; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,86px) clamp(60px,8vw,100px); }
#grid-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.45; }
.hero-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(110% 70% at 10% 26%, var(--bg) 10%, transparent 60%),
    linear-gradient(to bottom, transparent 60%, var(--bg) 99%);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(30px,4vw,60px); align-items:center;
}

.eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:24px;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow .rule{ width:40px; height:1px; background:var(--accent); opacity:.6; }

.hero-sub{ max-width:42ch; margin-top:26px; color:var(--muted); font-size:1.02rem; line-height:1.65; }
.hero-sub b{ color:var(--text); font-weight:600; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ============================================================
   Grafo de nodos
   ============================================================ */
.stage-col{ display:flex; flex-direction:column; align-items:center; gap:20px; }

.stage{
  position:relative; width:min(560px, 92%); aspect-ratio:1;
}

/* Anillos guía */
.ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid var(--line-soft); pointer-events:none;
}
.ring-1{ width:72%; height:72%; }
.ring-2{ width:96%; height:96%; border-style:dashed; opacity:.5;
  animation:spin calc(var(--spin) * 3) linear infinite reverse; }

/* Órbita giratoria */
.orbit{ position:absolute; inset:0; animation:spin var(--spin) linear infinite; }
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* Enlaces núcleo → nodo */
.links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.link-base line{ stroke:var(--line); stroke-width:.4; }
.link-flow line{
  stroke:var(--accent); stroke-width:.6; stroke-linecap:round;
  stroke-dasharray:1.5 5; opacity:.9;
  animation:flow 1.6s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-13; } }

/* Nodos satélite */
.node{
  position:absolute; width:20%; aspect-ratio:1;
  display:grid; place-items:center;
  animation:counter var(--spin) linear infinite;   /* mantiene el texto recto */
}
@keyframes counter{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(-360deg); }
}
.n1{ left:50%; top:14%; }
.n2{ left:50%; top:86%; }

.node-inner{
  width:100%; height:100%; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease), background .35s var(--ease);
}
.node-idx{
  font-family:var(--f-head); font-size:.58rem; font-weight:700;
  letter-spacing:.16em; color:var(--accent);
}
.node-name{
  font-family:var(--f-head); font-weight:800; text-transform:uppercase;
  font-size:clamp(.6rem, 1.5vw, .84rem); letter-spacing:-.01em; line-height:1;
  text-align:center; padding-inline:6px;
}
.node:hover .node-inner,
.node:focus-visible .node-inner{
  transform:scale(1.1);
  border-color:var(--accent);
  background:var(--bg);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent),
             0 0 34px color-mix(in srgb, var(--accent) 30%, transparent);
}
.node:focus-visible{ outline:none; }

/* Atenuar los demás nodos al enfocar uno */
.orbit:has(.node:hover) .node:not(:hover) .node-inner{ opacity:.4; }

/* Pausar la órbita al interactuar */
.stage:hover .orbit,
.stage:hover .node,
.stage:focus-within .orbit,
.stage:focus-within .node{ animation-play-state:paused; }

/* Núcleo fijo */
.core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26%; aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--accent); color:var(--accent-dk);
  box-shadow:0 0 50px color-mix(in srgb, var(--accent) 42%, transparent);
  z-index:3;
}
.core-pulse{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--accent); animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{
  0%  { transform:scale(1);    opacity:.7; }
  70% { transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}
.core-label{
  font-family:var(--f-head); font-weight:800; text-transform:uppercase;
  font-size:clamp(.72rem, 1.9vw, 1.15rem); letter-spacing:-.02em; line-height:1;
}
.core-sub{
  font-size:clamp(.5rem,1.1vw,.63rem); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; opacity:.62;
}

.stage-caption{
  font-size:.83rem; color:var(--muted); text-align:center; min-height:1.5em;
  max-width:36ch; transition:color .25s var(--ease);
}
.stage-caption.on{ color:var(--text); }

/* ============================================================
   Secciones genéricas
   ============================================================ */
.sec{ padding-block:var(--sec-y); }
.sec-alt{ background:var(--bg-soft); border-block:1px solid var(--line); }
.sec-head{ max-width:760px; margin-bottom:clamp(40px,6vw,70px); }
.sec-head p{ margin-top:20px; color:var(--muted); max-width:52ch; }

.node-badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  padding:6px 15px 6px 11px; border:1px solid var(--line); border-radius:999px;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.bdot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Servicios (Graphics) */
.svc-list{ border-top:1px solid var(--line); }
.svc{
  display:grid; grid-template-columns:64px minmax(0,1.1fr) minmax(0,1.4fr) 40px;
  align-items:center; gap:24px;
  padding-block:clamp(24px,3vw,34px); border-bottom:1px solid var(--line);
  position:relative; transition:padding-inline .35s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0; background:var(--bg-soft);
  opacity:0; transition:opacity .35s var(--ease); z-index:-1;
}
.svc:hover{ padding-inline:20px; }
.svc:hover::before{ opacity:1; }
.svc-num{ font-family:var(--f-head); font-size:.8rem; font-weight:700; color:var(--accent); letter-spacing:.1em; }
.svc-name{ font-family:var(--f-head); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.02em; }
.svc-desc{ color:var(--muted); font-size:.93rem; }
.svc-go{ color:var(--muted); font-size:1.2rem; justify-self:end; transition:transform .35s var(--ease), color .35s var(--ease); }
.svc:hover .svc-go{ transform:translateX(6px); color:var(--accent); }

/* Stables */
.stable-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stable{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:12px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.stable:hover{ border-color:var(--accent); transform:translateY(-4px); }
.stable-ico{ font-size:1.5rem; color:var(--accent); line-height:1; }
.stable h3{ font-family:var(--f-head); font-weight:700; font-size:1.08rem; letter-spacing:-.02em; }
.stable p{ color:var(--muted); font-size:.9rem; }

/* ============================================================
   Results — scroll horizontal anclado
   ============================================================ */
.hwork{ position:relative; height:340vh; background:var(--bg-soft); }
.hwork-pin{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(28px,4vw,48px); overflow:hidden;
}
.hwork-viewport{ overflow:hidden; }
.hwork-track{ display:flex; gap:24px; padding-inline:var(--pad); width:max-content; will-change:transform; }
.wcard{
  width:clamp(280px,32vw,400px); flex:0 0 auto;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:14px;
  min-height:clamp(300px,42vh,400px);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.wcard:hover{ border-color:var(--accent); transform:translateY(-4px); }
.wcard-top{ display:flex; justify-content:space-between; align-items:center; }
.tag{
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
.yr{ font-size:.75rem; color:var(--muted); }
.tag-live{
  color:var(--accent-dk); background:var(--accent); border-color:var(--accent);
  animation:live 1.8s var(--ease) infinite;
}
@keyframes live{ 50%{ opacity:.55; } }
.wcard h3{ font-family:var(--f-head); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; margin-top:auto; }
.wcard-metric{ font-family:var(--f-display); font-size:1.05rem; color:var(--muted); }
.wcard-metric b{ color:var(--accent); font-size:1.7rem; font-weight:700; letter-spacing:-.02em; }
.wcard-desc{ color:var(--muted); font-size:.9rem; }
.wcard-cta{ background:var(--accent); border-color:var(--accent); justify-content:center; align-items:flex-start; gap:24px; }
.wcard-cta h3{ color:var(--accent-dk); font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.05; margin:0; }
.wcard-cta .btn-solid{ background:var(--accent-dk); color:var(--accent); }

/* ============================================================
   Métricas
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--bg); padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; gap:10px; }
.stat b{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1; color:var(--accent);
}
.stat span{ color:var(--muted); font-size:.87rem; }

/* ============================================================
   Cita
   ============================================================ */
.sec-quote{ border-block:1px solid var(--line); }
.quote{ margin:0; text-align:center; max-width:900px; }
.quote blockquote{
  margin:0; font-family:var(--f-serif); font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.28; letter-spacing:-.015em;
}
.quote figcaption{ margin-top:32px; display:flex; flex-direction:column; gap:4px; }
.quote figcaption b{ font-size:.9rem; font-weight:600; }
.quote figcaption span{ font-size:.82rem; color:var(--muted); }

/* ============================================================
   CTA final
   ============================================================ */
.cta{ text-align:center; }
.cta p{ margin:24px auto 34px; color:var(--muted); max-width:46ch; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding-top:clamp(50px,7vw,80px); overflow:hidden; }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
.foot-col{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.foot-col h4{ font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.foot-col a:not(.logo){ font-size:.9rem; color:var(--muted); transition:color .25s var(--ease); }
.foot-col a:not(.logo):hover{ color:var(--accent); }
.foot-note{ color:var(--muted); font-size:.9rem; max-width:34ch; }

.foot-word{ margin-top:clamp(40px,6vw,70px); line-height:.78; overflow:hidden; }
.foot-word span{
  display:block; text-align:center; font-family:var(--f-head); font-weight:800;
  font-size:clamp(3rem,15vw,13rem); letter-spacing:-.045em;
  color:transparent; -webkit-text-stroke:1px var(--line); user-select:none;
}
.foot-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  border-top:1px solid var(--line); margin-top:30px; padding-block:22px;
  font-size:.78rem; color:var(--muted);
}
.foot-legal a:hover{ color:var(--accent); }


/* ============================================================
   Botón secundario de la nav (Acceder → app)
   ============================================================ */
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text); }

/* ============================================================
   Dos columnas: lista de ventajas + ilustración
   ============================================================ */
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.split-rev{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }

.feat-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.feat-list li{
  position:relative; padding:18px 0 18px 30px; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:.95rem;
}
.feat-list li::before{
  content:""; position:absolute; left:4px; top:25px; width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--accent);
}
.feat-list b{ color:var(--text); font-weight:600; }

/* ============================================================
   Plano de boxes ilustrativo
   ============================================================ */
.boxmap{
  margin:0; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,2.2vw,26px);
}
.boxmap-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
  font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em;
}
.boxmap-free{ font-family:var(--f-body); font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); font-size:.8rem; }
.boxmap-free b{ color:var(--accent); font-weight:700; }
.boxmap-row{ display:grid; grid-template-columns:repeat(8,1fr); gap:5px; }
.boxmap-aisle{
  margin:8px 0; padding:5px 0; text-align:center; border-block:1px dashed var(--line);
  font-size:.6rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}

.box{
  border-radius:5px; overflow:hidden; background:var(--bg); border:1px solid var(--line-soft);
  display:flex; flex-direction:column; min-width:0;
}
.box-top{ display:grid; grid-template-columns:1fr 1fr; height:6px; }
.box-body{ padding:5px 4px 6px; text-align:center; line-height:1.1; position:relative; }
.box-num{ display:block; font-family:var(--f-display); font-weight:700; font-size:.78rem; }
.box-name{
  display:block; font-size:.55rem; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.box-flag{ position:absolute; top:1px; right:3px; color:var(--sx-s); font-weight:800; font-size:.7rem; }
.box.is-free{ background:transparent; border-style:dashed; border-color:var(--line); }
.box.is-free .box-num{ color:var(--muted); font-weight:500; }
.box.is-new{ animation:box-in 3.2s var(--ease) infinite; }
@keyframes box-in{
  0%,100%{ box-shadow:0 0 0 0 transparent; border-color:var(--line-soft); }
  40%    { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); border-color:var(--accent); }
}

.boxmap-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; font-size:.72rem; color:var(--muted); }
.boxmap-legend span{ display:inline-flex; align-items:center; gap:6px; }
.boxmap-legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ============================================================
   Fases (tarjetas del scroll horizontal)
   ============================================================ */
.phase h3{ margin-top:auto; font-size:1.7rem; }
.phase .wcard-desc b{ color:var(--text); font-weight:600; }
.phase-ico{ color:var(--accent); font-size:1.3rem; line-height:1; }
.phase-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.phase-tags span{
  font-size:.68rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 10px;
}

/* ============================================================
   Pantalla de rotulación ilustrativa
   ============================================================ */
.screen{
  margin:0; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #0f2a33 0%, #050a0d 70%);
  border:1px solid var(--line); color:#eaf3f5;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  font-size:clamp(.62rem, 1.05vw, .82rem);
}
.screen-bar{
  display:flex; justify-content:space-between; align-items:center; padding:.9em 1.3em;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.85em; color:#8ba1a8;
}
.screen-live{ color:#18bdd9; animation:live 1.8s var(--ease) infinite; }
.screen-main{
  margin:0 1.3em; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:.8em 1.4em;
  background:rgba(4,7,10,.72); border:1px solid rgba(139,161,168,.22); border-left:4px solid #18bdd9;
  border-radius:8px; padding:1em 1.3em;
}
.screen-who{ display:flex; align-items:center; gap:1em; }
.screen-pos{
  font-family:var(--f-display); font-weight:700; font-size:2.2em; color:#18bdd9; line-height:1;
}
.screen-who b{ display:block; font-family:var(--f-head); font-weight:800; font-size:1.5em; letter-spacing:-.01em; text-transform:uppercase; }
.screen-who span{ color:#8ba1a8; font-size:1em; }
.screen-judges{ grid-column:1 / -1; display:flex; gap:.5em; flex-wrap:wrap; }
.screen-judges span{
  font-family:var(--f-display); font-weight:500; font-size:1em;
  background:rgba(139,161,168,.1); border-radius:5px; padding:.3em .6em;
}
.screen-judges i{ font-style:normal; color:#18bdd9; font-weight:700; margin-right:.45em; }
.screen-total{ grid-row:1; grid-column:2; text-align:right; align-self:center; }
.screen-total span{ display:block; font-size:.8em; letter-spacing:.14em; text-transform:uppercase; color:#8ba1a8; }
.screen-total b{ font-family:var(--f-display); font-weight:700; font-size:2.3em; color:#18bdd9; line-height:1; letter-spacing:-.02em; }
.screen-ticker{
  background:#18bdd9; color:#03181d; overflow:hidden; white-space:nowrap;
  font-weight:600; padding:.55em 0; font-size:.9em;
}
.screen-ticker span{ display:inline-block; padding-left:100%; animation:crawl 14s linear infinite; }
@keyframes crawl{ to{ transform:translateX(-100%); } }

/* ============================================================
   Pantallas de ejemplo de Graphics
   ============================================================ */
.demo-screen{ display:flex; flex-direction:column; gap:14px; }
.demo-screen .screen{ width:100%; margin:0; }

/* Previo: dorsal + identidad + hierro */
.scr-previo{
  flex:1; margin:0 1.3em; display:flex; align-items:center; gap:1.2em;
  background:rgba(4,7,10,.72); border:1px solid rgba(139,161,168,.22); border-left:4px solid #18bdd9;
  border-radius:8px; padding:1em 1.3em;
}
.scr-dorsal{
  font-family:var(--f-display); font-weight:700; font-size:2.6em; line-height:1; color:#18bdd9;
  letter-spacing:-.03em;
}
.scr-id{ display:flex; flex-direction:column; gap:.15em; min-width:0; flex:1; }
.scr-id b{ font-family:var(--f-head); font-weight:800; font-size:1.5em; text-transform:uppercase; letter-spacing:-.01em; }
.scr-id span{ color:#8ba1a8; }
.scr-hierro{
  width:3.4em; height:3.4em; flex:0 0 auto; border-radius:4px; background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}

/* Nombres de los jueces bajo las notas */
.screen-judge-names{
  display:flex; flex-wrap:wrap; gap:.4em 1.4em; padding:.7em 1.9em 1em;
  font-size:.82em; color:#8ba1a8;
}

/* Clasificación */
.scr-rank{
  list-style:none; margin:0 1.3em; padding:0; flex:1;
  display:flex; flex-direction:column; justify-content:center; gap:.3em;
}
.scr-rank li{
  display:grid; grid-template-columns:2.2em 1fr auto auto; align-items:center; gap:.9em;
  background:rgba(4,7,10,.6); border-radius:6px; padding:.5em .9em;
}
.scr-rank .pos{ font-family:var(--f-display); font-weight:700; color:#18bdd9; font-size:1.2em; }
.scr-rank b{ font-family:var(--f-head); font-weight:700; text-transform:uppercase; font-size:1em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scr-rank .gan{ color:#8ba1a8; font-size:.86em; }
.scr-rank em{ font-style:normal; font-family:var(--f-display); font-weight:700; font-size:1.1em; min-width:3.6em; text-align:right; }
.scr-rank li.now{ border-left:3px solid #18bdd9; }
.scr-rank li.np{ opacity:.45; }
.scr-rank li.np em{ color:#8ba1a8; }

/* Por regiones */
.scr-regions{ margin:0 1.3em; flex:1; border-collapse:collapse; font-size:.92em; align-self:stretch; }
.scr-regions th{
  text-align:right; font-size:.76em; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#8ba1a8; padding:.35em .6em; border-bottom:1px solid rgba(139,161,168,.25);
}
.scr-regions th:first-child, .scr-regions td:first-child{ text-align:left; }
.scr-regions td{ padding:.35em .6em; text-align:right; border-bottom:1px solid rgba(139,161,168,.1); }
.scr-regions td:not(:first-child){ font-family:var(--f-display); font-weight:500; }
.scr-regions tr.pend td{ color:#4a5a61; }

/* Podio */
.scr-podium{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:.8em; padding:0 1.3em 1.1em; }
.plate{
  flex:1 1 0; max-width:11em; display:flex; flex-direction:column; align-items:center; gap:.25em;
  background:rgba(4,7,10,.72); border:1px solid rgba(139,161,168,.22); border-top:3px solid #18bdd9;
  border-radius:6px 6px 0 0; padding:.8em .6em;
}
.plate b{ font-family:var(--f-head); font-weight:700; font-size:.92em; text-transform:uppercase; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.plate em{ font-style:normal; font-family:var(--f-display); font-weight:700; color:#18bdd9; font-size:1.1em; }
.plate .medal{
  width:2em; height:2em; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; font-size:.95em; color:#03181d; background:#c0c6c9;
}
.p1{ padding-bottom:2.2em; } .p1 .medal{ background:#e8c547; }
.p2{ padding-bottom:1.4em; }
.p3{ padding-bottom:.9em; } .p3 .medal{ background:#c98f5a; }
.rosette{
  width:1.5em; height:1.5em; border-radius:50%; margin-top:-.15em;
  background:repeating-conic-gradient(#18bdd9 0 18deg, #0f8fa8 18deg 36deg);
  box-shadow:0 0 0 .18em rgba(24,189,217,.25);
}

/* ============================================================
   Salidas de Graphics
   ============================================================ */
.outputs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(40px,6vw,64px); }
.output{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:10px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.output:hover{ border-color:var(--accent); transform:translateY(-4px); }
.output-ico{ font-size:1.6rem; color:var(--accent); line-height:1; }
.output h3{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.output p{ color:var(--muted); font-size:.9rem; }

/* ============================================================
   Ejemplos de Stables (pestañas)
   ============================================================ */
.demo{ min-width:0; }
.demo-tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:14px; overflow-x:auto;
  border:1px solid var(--line); border-radius:999px; scrollbar-width:none;
}
.demo-tabs::-webkit-scrollbar{ display:none; }
.demo-tabs button{
  flex:1 0 auto; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:500 .8rem/1 var(--f-body); padding:9px 14px; border-radius:999px; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.demo-tabs button:hover{ color:var(--text); }
.demo-tabs button[aria-selected="true"]{ background:var(--accent); color:var(--accent-dk); font-weight:600; }
.demo-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.demo-panel{
  margin:0; min-height:340px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(16px,2.2vw,26px);
  animation:panel-in .45s var(--ease);
}
.demo-panel[hidden]{ display:none; }
@keyframes panel-in{ from{ opacity:0; transform:translateY(8px); } }
.demo-center{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.demo-note{ margin-top:14px; font-size:.8rem; color:var(--muted); text-align:center; }
.demo-center .demo-note{ margin-top:0; }
.demo-disclaimer{ margin-top:10px; font-size:.7rem; color:var(--muted); opacity:.7; text-align:right; }

/* Móvil */
.phone{
  width:min(300px,100%); background:var(--bg); border:1px solid var(--line); border-radius:22px;
  padding:14px; display:flex; flex-direction:column; gap:9px;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.7);
}
.phone-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.72rem; font-weight:600; }
.pill{ font-size:.6rem; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.pill-warn{ background:color-mix(in srgb, var(--sx-c) 22%, transparent); color:var(--sx-c); }
.phone-field{ border:1px solid var(--line); border-radius:10px; padding:7px 10px; display:flex; flex-direction:column; }
.phone-field small{ font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.phone-field b{ font-family:var(--f-display); font-size:.95rem; }
.caret::after{ content:"|"; margin-left:1px; color:var(--accent); animation:live 1s steps(1) infinite; }
.phone-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.phone-list li{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; background:var(--bg-soft); }
.phone-list li > span:first-child{ display:flex; flex-direction:column; min-width:0; }
.phone-list b{ font-size:.82rem; }
.phone-list small{ font-size:.64rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone-list li.rep{ outline:1px solid color-mix(in srgb, var(--sx-s) 55%, transparent); }
.box-chip{ font-family:var(--f-display); font-weight:700; font-size:.72rem; padding:4px 8px; border-radius:7px; white-space:nowrap;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.box-chip.warn{ background:color-mix(in srgb, var(--sp-paja) 18%, transparent); color:var(--sp-paja); }
.box-chip.bad{ background:color-mix(in srgb, var(--sx-s) 20%, transparent); color:var(--sx-s); }
.phone-btn{ text-align:center; background:var(--accent); color:var(--accent-dk); font-weight:600; font-size:.8rem; padding:10px; border-radius:11px; }
.gate-ok{
  background:color-mix(in srgb, #3fbf7f 16%, transparent); border:1px solid color-mix(in srgb, #3fbf7f 55%, transparent);
  border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:3px; text-align:center;
}
.gate-ok b{ color:#3fbf7f; font-family:var(--f-head); font-weight:800; font-size:1.35rem; letter-spacing:.02em; }
.gate-ok span{ font-size:.74rem; color:var(--muted); }

/* Etiqueta del sobre (papel) */
.label{
  width:min(360px,100%); background:#fbfaf7; color:#15191c; border-radius:6px; padding:16px;
  font-size:.74rem; box-shadow:0 24px 50px -30px rgba(0,0,0,.7);
}
.label-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #15191c; padding-bottom:8px; }
.label-head b{ font-family:var(--f-display); font-size:1.3rem; }
.label-guide{ color:#d0312d; font-family:var(--f-head); font-weight:800; font-size:1.4rem; }
.label-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin:10px 0; }
.label-grid span{ display:flex; flex-direction:column; font-weight:600; }
.label-grid small{ font-size:.58rem; font-weight:500; color:#6b7378; text-transform:uppercase; letter-spacing:.08em; }
.label-table{ width:100%; border-collapse:collapse; }
.label-table th{ text-align:left; font-size:.58rem; color:#6b7378; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid #d7d9da; padding:4px 0; }
.label-table td{ padding:5px 0; border-bottom:1px solid #eceded; }
.label-table td b{ font-family:var(--f-display); font-size:.95rem; }

/* Panel en vivo */
.dash{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dash-kpi{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.dash-kpi small{ font-size:.64rem; color:var(--muted); }
.dash-kpi b{ font-family:var(--f-display); font-size:1.5rem; color:var(--accent); line-height:1.1; }
.dash-kpi b span{ font-size:.8rem; color:var(--muted); font-weight:500; }
.dash-kpi.warn b{ color:var(--sx-s); }
.dash-bars{ grid-column:1 / -1; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.dash-bars > small{ font-size:.64rem; color:var(--muted); }
.bar{ display:grid; grid-template-columns:62px 1fr 36px; align-items:center; gap:10px; font-size:.72rem; }
.bar i{ display:block; height:7px; border-radius:4px; background:var(--line);
  background-image:linear-gradient(var(--accent),var(--accent)); background-size:var(--v) 100%; background-repeat:no-repeat; }
.bar em{ font-style:normal; color:var(--muted); text-align:right; }

/* Tarjeta «todo el concurso» */
.phase-all{ border-style:dashed; }

/* ============================================================
   Precios
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plan{
  position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; gap:18px;
}
.plan-main{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 30px 60px -40px color-mix(in srgb, var(--accent) 60%, transparent); }
.plan-flag{
  position:absolute; top:-11px; left:24px; background:var(--accent); color:var(--accent-dk);
  font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
}
.plan-top{ display:flex; flex-direction:column; gap:3px; }
.plan-name{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:1.25rem; letter-spacing:-.01em; }
.plan-for{ font-size:.85rem; color:var(--muted); }
.plan-price{ display:flex; flex-direction:column; gap:2px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.plan-price b{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,3.2vw,2.6rem); letter-spacing:-.03em; line-height:1; color:var(--accent); }
.plan-price span{ font-size:.82rem; color:var(--muted); }
.plan ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.plan li{ position:relative; padding-left:22px; font-size:.9rem; color:var(--muted); }
.plan li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.plan .btn{ align-self:flex-start; }

/* Módulos elegibles del ajustador */
.calc-mods{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.calc-mods legend{ width:100%; margin-bottom:10px; padding:0; font-size:.88rem; color:var(--muted); }
.mod{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  font-size:.85rem; color:var(--muted); transition:border-color .25s var(--ease), color .25s var(--ease);
}
.mod input{ accent-color:var(--accent); margin:0; }
.mod:has(input:checked){ border-color:var(--accent); color:var(--text); }
.mod:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.mod-soon{ cursor:default; border-style:dashed; opacity:.65; }
.calc-field.is-off{ opacity:.35; pointer-events:none; }

/* Calculadora */
.calc{
  margin-top:24px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(20px,3vw,40px);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.6vw,32px);
}
.calc-inputs{ display:flex; flex-direction:column; gap:20px; justify-content:center; }
.calc-field{ display:flex; flex-direction:column; gap:10px; }
.calc-field > span{ display:flex; justify-content:space-between; font-size:.88rem; color:var(--muted); }
.calc-field output{ font-family:var(--f-display); font-weight:700; color:var(--text); }
.calc-field input[type=range]{ width:100%; accent-color:var(--accent); }
.calc-out{ display:flex; flex-direction:column; gap:8px; border-left:1px solid var(--line); padding-left:clamp(20px,3vw,40px); justify-content:center; }
.calc-line, .calc-total{ display:flex; justify-content:space-between; align-items:baseline; font-size:.9rem; color:var(--muted); }
.calc-line b{ color:var(--text); font-family:var(--f-display); font-weight:500; }
.calc-total{ border-top:1px solid var(--line); padding-top:10px; margin-top:4px; color:var(--text); font-weight:600; }
.calc-total b{ font-family:var(--f-display); font-weight:700; font-size:1.8rem; color:var(--accent); letter-spacing:-.02em; }
.calc-hint{ font-size:.8rem; color:var(--accent); min-height:1.2em; }
.plans-foot{ margin-top:18px; font-size:.8rem; color:var(--muted); text-align:center; }

/* ============================================================
   Beta abierta
   ============================================================ */
.beta-badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  padding:6px 15px 6px 11px; border:1px solid var(--accent); border-radius:999px;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.beta{ border-block:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{
  position:relative; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; gap:12px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.step:hover{ border-color:var(--accent); transform:translateY(-4px); }
.step-num{
  font-family:var(--f-display); font-weight:700; font-size:1.5rem; color:var(--accent);
  line-height:1; letter-spacing:-.02em;
}
.step h3{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.step p{ color:var(--muted); font-size:.9rem; }

.beta-cta{
  margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px; padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--accent); border-radius:var(--r);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.beta-cta p{ color:var(--muted); max-width:52ch; }
.beta-cta b{ color:var(--text); font-weight:600; }

.step-cta{ margin-top:4px; }
.demo-small{ margin-top:14px; font-size:.8rem; color:var(--muted); text-align:center; }

/* Aviso de beta dentro de Precios */
.price-beta{
  margin-bottom:26px; padding:14px 18px; border-radius:var(--r);
  border:1px dashed var(--accent); color:var(--muted); font-size:.92rem;
}
.price-beta b{ color:var(--accent); font-weight:600; }

/* Tramos por tamaño de concurso */
.tiers{ border-block:1px solid var(--line); padding-block:14px !important; margin-block:4px !important; }
.tiers li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-left:0 !important; }
.tiers li::before{ content:none !important; }
.tiers span{ color:var(--muted); font-size:.88rem; }
.tiers b{ font-family:var(--f-display); font-weight:700; color:var(--text); font-size:.95rem; }

.calc-disc b{ color:var(--accent); }

/* ============================================================
   Reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .nav-links{ display:none; }
  .burger{ display:grid; }
  .nav-actions .btn-ghost{ display:none; }
  .nav-links .m-only{ display:inline-flex; color:var(--accent); }
}
@media (max-width:1000px){
  .nav-links{ display:none; }
  .burger{ display:grid; }
  .nav-actions .btn-ghost{ display:none; }
  .nav-links .m-only{ display:inline-flex; color:var(--accent); }
  .nav-inner{ gap:12px; }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-copy{ text-align:center; }
  .eyebrow{ justify-content:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-ctas{ justify-content:center; }
  .stage{ width:min(460px, 94%); }
  .svc{ grid-template-columns:48px 1fr 30px; }
  .svc-desc{ display:none; }
  .stable-grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .steps{ grid-template-columns:1fr; }
  .beta-cta{ flex-direction:column; align-items:flex-start; }
  .calc{ grid-template-columns:1fr; }
  .split, .split-rev{ grid-template-columns:1fr; }
  .split-rev > .screen{ order:0; }
  .outputs{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .hwork{ height:300vh; }
}
@media (max-width:620px){
  .stable-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-ctas .btn{ flex:1 1 100%; }
  .hwork{ height:280vh; }
  .node-name{ font-size:.58rem; }
  .box-name{ display:none; }
  .calc-out{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:18px; }
  .dash{ grid-template-columns:repeat(2,1fr); }
  .nav-actions .btn-solid{ padding:9px 15px; font-size:.8rem; }
  .nav-actions{ gap:8px; }
  .boxmap-row{ gap:4px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .orbit, .node, .ring-2, .box.is-new, .caret::after{ animation:none !important; }
  .node{ transform:translate(-50%,-50%); }
}