/* ============================================================
   SMSRouter — home page
   Design system: "Terminal Night"
   ------------------------------------------------------------
   ink      #0B0D14  deep navy-black   (base canvas)
   slate    #12151F  raised surface
   line     #232838  hairlines / grid
   signal   #35F0A0  phosphor green    -> primary action, "delivered"
   wire     #4CC9F0  cyan              -> data / links / secondary
   pulse    #FF4D9D  magenta           -> pixel accents, highlights
   watt     #FFC53D  amber             -> warnings, pending, price
   ============================================================ */

:root {
  --ink:      #0B0D14;
  --ink-2:    #0F121B;
  --slate:    #12151F;
  --slate-2:  #171B28;
  --line:     #232838;
  --line-2:   #2E3549;

  --signal:   #35F0A0;
  --signal-d: #16B673;
  --wire:     #4CC9F0;
  --pulse:    #FF4D9D;
  --watt:     #FFC53D;

  --fg:       #E9EDF7;
  --fg-2:     #A7B0C6;
  --fg-3:     #838DA8;

  --px: "Press Start 2P", "Courier New", monospace;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 4px;               /* everything is chunky, never round */
  --wrap: 1160px;
  --gut: clamp(18px, 4vw, 40px);
  --sect-y: clamp(64px, 9vw, 130px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* faint pixel grid over the whole page */
  background-image:
    linear-gradient(var(--ink-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-2) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}

img, canvas, svg { display: block; max-width: 100%; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--wire); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--signal); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--signal); color: var(--ink); padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 820px; }

/* ---------- type ---------- */
.h1 {
  font-family: var(--px);
  font-size: clamp(26px, 5.4vw, 54px);
  line-height: 1.28;
  letter-spacing: -.5px;
  margin: 0 0 22px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.55);
}
.h2 {
  font-family: var(--px);
  font-size: clamp(17px, 2.7vw, 27px);
  line-height: 1.45;
  margin: 0 0 14px;
}
.grad {
  background: linear-gradient(96deg, var(--signal) 0%, var(--wire) 55%, var(--pulse) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 12px;
}
.lede { font-size: clamp(15px, 1.6vw, 18.5px); color: var(--fg-2); max-width: 56ch; margin: 0 0 30px; }
.lede strong { color: var(--fg); }
.sub { color: var(--fg-2); max-width: 62ch; margin: 0; }
.lbl {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 10px;
}
.lbl__hint { color: var(--signal); text-transform: none; letter-spacing: .05em; }

/* ---------- buttons ---------- */
.btn {
  --sh: var(--signal-d);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono); font-weight: 700; font-size: 13.5px; letter-spacing: .04em;
  padding: 14px 22px; border: 2px solid transparent; border-radius: var(--r);
  cursor: pointer; text-decoration: none !important;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .18s;
  position: relative;
}
.btn--primary { background: var(--signal); color: var(--on-signal, #04150C); box-shadow: 0 4px 0 var(--signal-d); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--signal-d); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--signal-d); }
.btn--ghost {
  background: transparent; color: var(--fg); border-color: var(--line-2);
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.btn--ghost:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn--sm { padding: 9px 15px; font-size: 12px; }
.btn--block { width: 100%; margin-top: 6px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 90;
  /* Sobre el fondo de la marca (una paleta clara tiene el fondo claro), con
     el navy de la plataforma solo como respaldo sin color-mix. */
  background: var(--ink);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.nav.is-stuck { border-bottom-color: var(--line); background: var(--ink); background: color-mix(in srgb, var(--ink) 94%, transparent); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand__px { width: 32px; height: 32px; }
.brand__txt { font-family: var(--px); font-size: 14px; letter-spacing: -.5px; }
.brand__txt em { font-style: normal; color: var(--signal); }
/* Una marca ajena (whitelabel, brand.js): su nombre a un color, o su logo. */
.brand__txt.is-plain { color: var(--fg); }
.brand__img { display: block; height: 22px; width: auto; max-width: 160px; }

.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links > a {
  font-family: var(--mono); font-size: 13px; color: var(--fg-2); position: relative; padding: 4px 0;
}
.nav__links > a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--signal);
  transition: width .18s var(--ease);
}
.nav__links > a:hover { color: var(--fg); text-decoration: none; }
.nav__links > a:hover::after { width: 100%; }
.nav__cta { display: flex; gap: 10px; margin-left: 8px; }

.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--fg); margin: 4px 0; transition: .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 7vw, 84px) 0 0; overflow: hidden; }
.hero__glow {
  position: absolute; inset: -30% 0 auto -10%; height: 620px; pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 40%, rgba(53,240,160,.16), transparent 70%),
    radial-gradient(34% 40% at 78% 30%, rgba(76,201,240,.14), transparent 70%),
    radial-gradient(26% 34% at 60% 70%, rgba(255,77,157,.10), transparent 70%);
  filter: blur(6px);
}
.hero__in {
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 60px);
  align-items: center; padding-bottom: clamp(40px, 6vw, 76px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; color: var(--fg-2);
  border: 1px solid var(--line); background: var(--slate); padding: 7px 13px; border-radius: 999px;
  margin: 0 0 22px;
}
.dot { width: 7px; height: 7px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 0 3px rgba(53,240,160,.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(53,240,160,0); } }

.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero__btns--center { justify-content: center; margin-bottom: 0; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 26px; list-style: none; padding: 0; margin: 0; }
.hero__trust li { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); }
.hero__trust b { font-family: var(--px); font-size: 15px; color: var(--fg); margin-right: 6px; }

.hero__art {
  margin: 0; padding: 16px; background: var(--slate);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.02);
  display: grid; justify-items: center;
}
#heroCanvas { width: 100%; height: auto; background: #070910; border: 1px solid var(--line); }
.hero__cap {
  font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 10px;
  display: flex; align-items: center; gap: 6px;
}
.blink { color: var(--signal); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- ticker ---------- */
.ticker {
  border-block: 1px solid var(--line); background: var(--ink-2); overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; gap: 44px; padding: 11px 0; width: max-content; animation: slide 42s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span { font-family: var(--mono); font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.ticker span b { color: var(--signal); font-weight: 500; }
.ticker span i { color: var(--wire); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.sect { padding: var(--sect-y) 0; position: relative; }
.sect--alt { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--slate) 65%, transparent) 12%, color-mix(in srgb, var(--slate) 65%, transparent) 88%, transparent); }
.sect__head { margin-bottom: clamp(28px, 4vw, 46px); max-width: 720px; }

.card {
  background: var(--slate); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 44px -32px rgba(0,0,0,.9);
}

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- router demo ---------- */
.demo { overflow: hidden; }
.demo__bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: var(--ink-2); border-bottom: 1px solid var(--line);
}
.led { width: 9px; height: 9px; border-radius: 50%; }
.led--r { background: #FF5F57; } .led--y { background: var(--watt); } .led--g { background: var(--signal); }
.demo__title { font-family: var(--mono); font-size: 12px; color: var(--fg-3); margin-left: 8px; }
.demo__mode { font-family: var(--mono); font-size: 11px; color: var(--signal); margin-left: auto; letter-spacing: .1em; }

.demo__body { display: grid; grid-template-columns: 300px 1fr; }
.demo__left { padding: 22px; border-right: 1px solid var(--line); }
.demo__right { padding: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip {
  font-family: var(--mono); font-size: 12px; color: var(--fg-2);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 11px; cursor: pointer; transition: .15s var(--ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.chip i { width: 8px; height: 8px; background: currentColor; display: block; }
.chip:hover { border-color: var(--line-2); color: var(--fg); transform: translateY(-1px); }
.chip.on { background: rgba(53,240,160,.10); border-color: var(--signal); color: var(--signal); }

.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 24px; }
.seg button {
  flex: 1; background: var(--ink-2); border: 0; border-right: 1px solid var(--line);
  color: var(--fg-3); font-family: var(--mono); font-size: 11.5px; padding: 10px 4px; cursor: pointer;
  transition: .15s;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: rgba(76,201,240,.12); color: var(--wire); }

.demo__note { font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin: 12px 0 0; }

.bids { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.bid {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px;
  transition: border-color .2s, opacity .3s, transform .2s var(--ease);
}
.bid__px { width: 32px; height: 32px; }
.bid__name { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.bid__meta { font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); display: block; }
.bid__price { font-family: var(--px); font-size: 12px; color: var(--fg-2); }
.bid__track { grid-column: 1 / -1; height: 3px; background: var(--line); overflow: hidden; }
.bid__fill { display: block; height: 100%; width: 0; background: var(--wire); transition: width .5s var(--ease); }
.bid.is-polling .bid__fill { background: var(--watt); }
.bid.is-out { opacity: .35; }
.bid.is-out .bid__price { color: var(--fg-3); text-decoration: line-through; }
.bid.is-win { border-color: var(--signal); background: rgba(53,240,160,.07); transform: translateX(3px); }
.bid.is-win .bid__price { color: var(--signal); }
.bid.is-win .bid__fill { background: var(--signal); }
.bid__tag {
  font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 2px;
  background: var(--signal); color: var(--ink); margin-left: 8px;
}

.result { border-top: 1px dashed var(--line-2); padding-top: 18px; animation: rise .35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.result__num {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 16px;
}
.result__flag { font-family: var(--px); font-size: 10px; color: var(--wire); border: 1px solid var(--line-2); padding: 4px 5px; }
.result__digits { font-family: var(--px); font-size: clamp(13px, 2.2vw, 18px); color: var(--fg); letter-spacing: 1px; }
.copy {
  font-family: var(--mono); font-size: 11px; color: var(--fg-3); background: transparent;
  border: 1px solid var(--line-2); border-radius: 3px; padding: 5px 9px; cursor: pointer; margin-left: auto;
  transition: .15s;
}
.copy:hover { color: var(--signal); border-color: var(--signal); }
.copy--solid { background: var(--signal); color: var(--ink); border-color: var(--signal); font-weight: 700; }
.copy--solid:hover { color: var(--ink); filter: brightness(1.1); }
.copy--float { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--slate-2); }

.sms { margin-top: 12px; min-height: 92px; }
.sms__wait { font-family: var(--mono); font-size: 12px; color: var(--fg-3); padding: 18px 0; }
.sms__msg {
  background: var(--slate-2); border: 1px solid var(--line); border-left: 3px solid var(--wire);
  border-radius: var(--r); padding: 13px 15px; animation: rise .3s var(--ease);
}
.sms__from { font-family: var(--mono); font-size: 11px; color: var(--wire); margin: 0 0 5px; letter-spacing: .1em; }
.sms__body { font-size: 14px; color: var(--fg-2); margin: 0 0 11px; }
.sms__code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sms__code code {
  font-family: var(--px); font-size: clamp(15px, 3vw, 22px); color: var(--signal);
  letter-spacing: 4px; text-shadow: 0 0 18px rgba(53,240,160,.45);
}
.sms__code .copy { margin-left: 0; }
.result__meta { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); margin: 14px 0 0; }
.result__meta b { color: var(--fg-2); font-weight: 500; }

/* ---------- providers ---------- */
.prov { padding: 20px; position: relative; overflow: hidden; transition: transform .2s var(--ease), border-color .2s; }
.prov::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent, var(--signal)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.prov:hover { transform: translateY(-4px); border-color: var(--line-2); }
.prov:hover::after { transform: scaleX(1); }
.prov__px { width: 32px; height: 32px; margin-bottom: 14px; image-rendering: pixelated; }
/* La imagen propia de una marca en el hueco del sprite (whitelabel): ni se
   pixela ni se esconde en estilo classic — no es pixel-art nuestro. */
img.prov__px, img.bid__px { image-rendering: auto; object-fit: contain; border-radius: 6px; }
.prov__name { font-family: var(--px); font-size: 12px; margin: 0 0 4px; }
.prov__tag { font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin: 0 0 14px; }
.prov__rows { display: grid; gap: 8px; }
.prov__row { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); }
.prov__bar { height: 6px; background: var(--ink); border: 1px solid var(--line); position: relative; }
.prov__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent, var(--signal)); transition: width .8s var(--ease); }
.prov__val { text-align: right; color: var(--fg-2); }

.adapter { margin-top: 26px; padding: 24px; }
.adapter__t { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin: 0 0 14px; }
.adapter__code {
  margin: 0 0 14px; overflow-x: auto; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px;
}
.adapter__code code { font-family: var(--mono); font-size: 12.5px; color: var(--wire); line-height: 1.9; white-space: pre; }
.adapter__n { color: var(--fg-2); margin: 0; font-size: 14.5px; }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.step { padding: 24px; position: relative; counter-increment: s; }
.step::before {
  content: "0" counter(s); position: absolute; top: 18px; right: 20px;
  font-family: var(--px); font-size: 20px; color: var(--line-2);
}
.step__px { width: 48px; height: 48px; margin-bottom: 16px; }
.step h3 { font-family: var(--px); font-size: 12px; margin: 0 0 12px; line-height: 1.6; }
.step p { color: var(--fg-2); font-size: 14.5px; margin: 0; }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: 340px 1fr; gap: 0; overflow: hidden; }
.calc__ctl { padding: 26px; border-right: 1px solid var(--line); }
.calc__viz { padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.calc__out { font-family: var(--px); font-size: 24px; color: var(--signal); display: block; margin-bottom: 14px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; background: var(--signal);
  border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--signal); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--signal); border: 2px solid var(--ink); border-radius: 0; cursor: grab;
}
.calc__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); margin: 8px 0 24px; }
.select {
  width: 100%; background: var(--ink-2); color: var(--fg); border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px 12px; font-family: var(--mono); font-size: 12.5px; cursor: pointer;
}

.bar__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bar__top span { font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.bar__top b { font-family: var(--px); font-size: 14px; color: var(--fg); }
.bar__track { height: 24px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; }
.bar__fill {
  display: block; height: 100%; width: 0; background: var(--signal);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 4px, transparent 4px 8px);
  transition: width .45s var(--ease);
}
.bar__fill--dim { background-color: var(--line-2); }
.calc__save { font-family: var(--mono); font-size: 14px; color: var(--fg-2); margin: 0; }
.calc__save strong { font-family: var(--px); font-size: 17px; color: var(--signal); }
.calc__save span { color: var(--fg-3); }
.calc__note { font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--fg-3); margin: 10px 0 0; }

.fees { margin-top: 16px; }
.fee { padding: 22px; }
.fee__k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 10px; }
.fee__v { font-family: var(--px); font-size: 20px; color: var(--watt); margin: 0 0 10px; }
.fee__d { font-size: 14px; color: var(--fg-2); margin: 0; }

/* ---------- api ---------- */
.api__in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.ticks { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 26px; color: var(--fg-2); font-size: 14.5px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px;
  background: var(--signal);
  clip-path: polygon(0 40%, 20% 40%, 20% 60%, 40% 60%, 40% 80%, 80% 80%, 80% 60%, 100% 60%, 100% 20%, 80% 20%, 80% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 40%, 20% 40%, 20% 20%, 0 20%);
}
.code { overflow: hidden; }
.code__tabs { display: flex; background: var(--ink-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.code__tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fg-3);
  font-family: var(--mono); font-size: 12px; padding: 13px 18px; cursor: pointer; white-space: nowrap; transition: .15s;
}
.code__tabs button:hover { color: var(--fg); }
.code__tabs button.on { color: var(--signal); border-bottom-color: var(--signal); background: rgba(53,240,160,.05); }
.code__body { position: relative; }
.code__body pre { margin: 0; padding: 20px; overflow-x: auto; min-height: 300px; }
.code__body code { font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: var(--fg-2); white-space: pre; }
.tk-k { color: var(--pulse); }
.tk-s { color: var(--signal); }
.tk-n { color: var(--watt); }
.tk-c { color: var(--fg-3); font-style: italic; }
.tk-f { color: var(--wire); }

/* ---------- wallet ---------- */
.wallet__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.wallet__coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.coin {
  aspect-ratio: 1; display: grid; place-items: center; gap: 8px;
  background: var(--slate); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .18s var(--ease), border-color .18s; cursor: default;
}
.coin:hover { transform: translateY(-5px) rotate(-2deg); border-color: var(--coin, var(--watt)); }
.coin canvas { width: 48px; height: 48px; }
.coin span { font-family: var(--px); font-size: 9px; color: var(--fg-3); }
.coin:hover span { color: var(--coin, var(--watt)); }
.wallet__stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; }
.wallet__stats div { display: flex; flex-direction: column; }
.wallet__stats b { font-family: var(--px); font-size: clamp(17px, 3vw, 24px); color: var(--signal); }
.wallet__stats span { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); margin-top: 6px; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; }
.qa { background: var(--slate); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qa__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 20px; color: var(--fg); font-family: var(--mono); font-size: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.qa__q:hover { color: var(--signal); }
.qa__i { color: var(--signal); font-family: var(--px); font-size: 12px; flex: none; transition: transform .2s; }
.qa.open .qa__i { transform: rotate(45deg); }
.qa__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.qa__a p { padding: 0 20px 20px; margin: 0; color: var(--fg-2); font-size: 14.5px; }

/* ---------- cta ---------- */
.cta { padding: var(--sect-y) 0; border-top: 1px solid var(--line); background:
  radial-gradient(60% 120% at 50% 0%, rgba(53,240,160,.10), transparent 70%); }
.cta__in { text-align: center; display: grid; justify-items: center; gap: 18px; }
.cta__in .sub { margin-inline: auto; }
#ctaPx { width: 192px; height: 64px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--ink-2); padding: clamp(36px, 5vw, 60px) 0 24px; }
.foot__in { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; }
.foot__brand p { color: var(--fg-3); font-size: 13.5px; max-width: 38ch; margin: 14px 0 18px; }
.crt-toggle {
  font-family: var(--mono); font-size: 11px; color: var(--fg-3); background: var(--slate);
  border: 1px solid var(--line); border-radius: 3px; padding: 7px 12px; cursor: pointer; transition: .15s;
}
.crt-toggle:hover { color: var(--pulse); border-color: var(--pulse); }
.crt-toggle[aria-pressed="true"] { color: var(--ink); background: var(--pulse); border-color: var(--pulse); }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot__cols p { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); margin: 0 0 14px; }
.foot__cols a { display: block; color: var(--fg-3); font-size: 13.5px; padding: 5px 0; }
.foot__cols a:hover { color: var(--signal); text-decoration: none; }
.foot__bot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px;
}
.foot__bot p { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); margin: 0; }
#heart { color: var(--pulse); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--signal); color: var(--ink); font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  padding: 11px 18px; border-radius: var(--r); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease); z-index: 150; box-shadow: 0 6px 0 var(--signal-d);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- CRT easter-egg mode ---------- */
.crt-overlay { position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: 0; transition: opacity .3s; }
body.crt .crt-overlay {
  opacity: 1;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
body.crt { animation: flick 6s infinite; }
@keyframes flick { 0%,97%,100% { filter: none; } 98% { filter: brightness(1.18) saturate(1.3); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  .hero__in, .api__in, .wallet__in, .foot__in { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .demo__body, .calc { grid-template-columns: 1fr; }
  .demo__left, .calc__ctl { border-right: 0; border-bottom: 1px solid var(--line); }
  .steps, .grid--3 { grid-template-columns: 1fr; }
  .wallet__coins { grid-template-columns: repeat(5, 1fr); }
  .coin { aspect-ratio: auto; padding: 14px 6px; }

  .burger { display: block; }
  .nav__links {
    position: fixed; inset: 68px 0 auto 0; background: var(--ink-2); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gut) 22px;
    transform: translateY(-120%); transition: transform .28s var(--ease); z-index: 80;
  }
  .nav__links.open { transform: none; }
  .nav__links > a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav__cta { margin: 18px 0 0; }
  .nav__cta .btn { flex: 1; padding: 13px; font-size: 13px; }
}

@media (max-width: 560px) {
  body { background-size: 24px 24px, 24px 24px; }
  .grid--4, .wallet__coins { grid-template-columns: repeat(2, 1fr); }
  .hero__trust { gap: 16px; }
  .demo__left, .demo__right, .calc__ctl, .calc__viz { padding: 18px; }
  .bid { grid-template-columns: 32px 1fr; }
  .bid__price { grid-column: 2; justify-self: end; margin-top: -22px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__bot { flex-direction: column; gap: 6px; }
  #ctaPx { width: 144px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   CLASSIC — el estilo convencional de una marca (whitelabel)
   ------------------------------------------------------------
   Una marca puede quitarse el pixel-art (`brand.style: 'classic'`).
   assets/js/brand.js pone `data-brand-style="classic"` en <html> —en
   síncrono, desde la copia cacheada— y TODO lo demás pasa aquí, sin
   tocar ningún JS de página. Casi todo son los TOKENS: la tipografía
   pixel y la mono se convierten en la de sistema y el radio de 4px en
   uno redondo, y como cada regla de las hojas ya lee `var(--px)`,
   `var(--mono)` y `var(--r)`, cambian solas. Lo que no cabe en un token
   se sobrescribe a mano: la rejilla del fondo, la sombra dura de los
   botones, la sombra de los titulares y los canvases de pixel-art
   (iconos, mascota, escena del hero), que no se pintan. Los códigos y
   los números siguen en monoespaciada: eso no es estilo, es lectura.
   La plataforma (root) nunca lleva el atributo.
   ============================================================ */
html[data-brand-style="classic"] {
  /* `--head` es la fuente de titulares de la pareja tipográfica de la marca
     (tenancy/landing.js, puesta por brand.js); sin pareja, la del cuerpo. */
  --px: var(--head, var(--sans));
  --mono: var(--sans);
  --r: 10px;
}
html[data-brand-style="classic"] body { background-image: none; }
html[data-brand-style="classic"] code,
html[data-brand-style="classic"] pre,
html[data-brand-style="classic"] kbd,
html[data-brand-style="classic"] .result__digits,
html[data-brand-style="classic"] .sms__code,
html[data-brand-style="classic"] .adapter__code code { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
html[data-brand-style="classic"] .h1,
html[data-brand-style="classic"] .h2 { text-shadow: none; font-weight: 800; letter-spacing: -.02em; }
html[data-brand-style="classic"] .h1 { line-height: 1.12; }
html[data-brand-style="classic"] .h2 { line-height: 1.25; }
html[data-brand-style="classic"] .brand__txt { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
html[data-brand-style="classic"] .kicker,
html[data-brand-style="classic"] .lbl { letter-spacing: .08em; }
html[data-brand-style="classic"] .btn { font-weight: 600; letter-spacing: 0; border-radius: 999px; }
html[data-brand-style="classic"] .btn--primary { box-shadow: 0 8px 18px -10px var(--signal-d); }
html[data-brand-style="classic"] .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px var(--signal-d); }
html[data-brand-style="classic"] .btn--primary:active { transform: none; box-shadow: none; }
html[data-brand-style="classic"] .btn--ghost,
html[data-brand-style="classic"] .btn--ghost:active { box-shadow: none; transform: none; }
html[data-brand-style="classic"] canvas { image-rendering: auto; }
/* Pixel-art dibujado en canvas: iconos de la barra lateral y de las
   tarjetas de proveedor, la mascota de los diálogos y la escena del hero.
   En clásico no se pintan; el texto que acompañan se queda. */
html[data-brand-style="classic"] canvas[data-sprite],
html[data-brand-style="classic"] .brand__px,
html[data-brand-style="classic"] .step__px,
html[data-brand-style="classic"] canvas.prov__px,
html[data-brand-style="classic"] canvas.bid__px,
html[data-brand-style="classic"] #ctaPx,
html[data-brand-style="classic"] #heroCanvas,
html[data-brand-style="classic"] #omBotCv,
html[data-brand-style="classic"] #mascotCv,
html[data-brand-style="classic"] #donePx,
html[data-brand-style="classic"] #statePx,
html[data-brand-style="classic"] #noTokenPx,
html[data-brand-style="classic"] .psel canvas,
html[data-brand-style="classic"] .pstat__r canvas,
html[data-brand-style="classic"] .provlist canvas,
html[data-brand-style="classic"] .more__hd canvas,
html[data-brand-style="classic"] .side canvas,
html[data-brand-style="classic"] .side__out canvas { display: none; }
/* La fila de "Provider status" ya no necesita nada aquí: es flex, así que
   un icono que no se pinta simplemente no ocupa (app.css). */
html[data-brand-style="classic"] .bar__fill { background-image: none; }
html[data-brand-style="classic"] .crt-overlay { display: none; }

/* ============================================================
   LA PORTADA DE UNA MARCA — plantillas (whitelabel, tenancy/landing.js)
   ------------------------------------------------------------
   Dos marcas con otros colores seguían siendo la MISMA página, y
   revender una copia no tiene sentido. La portada de una marca se
   elige entre cuatro plantillas: cambian el HERO (la escena pixel,
   una tarjeta de pedido en vivo, la lista de precios reales o el
   ejemplo de la API) y el orden y el número de secciones. brand.js
   pone `data-brand-layout` y `data-brand-hero` en <html> en
   síncrono, desde la copia cacheada, para que el primer pintado ya
   sea el de la plantilla; app.js recoloca las secciones y escribe
   los textos del hero. La plataforma no lleva atributo: sin él, la
   escena de siempre y nada más cambia.

   Los cuatro heros están escritos en index.html y SOLO UNO se
   pinta: `[data-hero-visual]` va oculto y cada plantilla destapa el
   suyo. En estilo classic la escena pixel no se pinta (arriba), así
   que la plantilla Router enseña la tarjeta de pedido en su lugar
   —antes quedaba un marco vacío con su pie de foto.
   ============================================================ */
[data-hero-visual] { display: none; }
html:not([data-brand-hero]) [data-hero-visual="scene"],
html[data-brand-hero="scene"]:not([data-brand-style="classic"]) [data-hero-visual="scene"] { display: grid; }
html[data-brand-style="classic"] [data-hero-visual="scene"] { display: none; }
html[data-brand-hero="scene"][data-brand-style="classic"] [data-hero-visual="card"],
html[data-brand-hero="card"] [data-hero-visual="card"],
html[data-brand-hero="catalog"] [data-hero-visual="catalog"],
html[data-brand-hero="code"] [data-hero-visual="code"] { display: block; }

/* Secciones apagadas por la marca (app.js pone `hidden`). */
main > section[hidden] { display: none !important; }

/* La cinta de "routed X via Y" es del hero de la plataforma: en las
   demás plantillas sobra. */
html[data-brand-layout]:not([data-brand-layout="router"]) .ticker { display: none; }

/* ---------- spotlight: titular centrado y la tarjeta debajo ---------- */
html[data-brand-layout="spotlight"] .hero__in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(28px, 4vw, 44px); }
html[data-brand-layout="spotlight"] .hero__copy { max-width: 780px; display: grid; justify-items: center; }
html[data-brand-layout="spotlight"] .h1 { font-size: clamp(30px, 6.4vw, 66px); }
html[data-brand-layout="spotlight"] .lede { margin-inline: auto; }
html[data-brand-layout="spotlight"] .hero__btns,
html[data-brand-layout="spotlight"] .hero__trust { justify-content: center; }
html[data-brand-layout="spotlight"] .hcard { width: min(100%, 560px); }
html[data-brand-layout="spotlight"] .hero__glow { inset: -30% 0 auto 0; background:
  radial-gradient(40% 50% at 50% 30%, color-mix(in srgb, var(--signal) 18%, transparent), transparent 70%); }

/* ---------- storefront: la lista de precios a la derecha ---------- */
html[data-brand-layout="catalog"] .hero__in { grid-template-columns: .95fr 1.05fr; }

/* ---------- developer: el ejemplo de la API en el hero ---------- */
html[data-brand-layout="developer"] .hero__in { grid-template-columns: .9fr 1.1fr; }

/* ---------- la tarjeta de pedido ---------- */
.hcard { overflow: hidden; width: 100%; }
.hcard__body { padding: 22px; }
.hcard__svc { font-family: var(--px); font-size: 14px; margin: 0 0 16px; color: var(--fg); }
.hcard__sms { margin-top: 12px; min-height: 96px; }
.hcard .result__meta { margin-top: 10px; }

/* ---------- la lista de precios ---------- */
.hcat { overflow: hidden; width: 100%; }
.hcat__list { list-style: none; margin: 0; padding: 4px 0; }
.hcat__row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px;
}
.hcat__row:last-child { border-bottom: 0; }
.hcat__row--empty { grid-template-columns: 1fr; color: var(--fg-3); padding: 18px; }
.hcat__name { color: var(--fg); }
.hcat__name small { display: block; font-size: 10.5px; color: var(--fg-3); margin-top: 2px; }
.hcat__price { font-family: var(--px); font-size: 12px; color: var(--watt); white-space: nowrap; }
.hcat__go {
  font-family: var(--mono); font-size: 11.5px; padding: 6px 10px; border: 1px solid var(--line-2);
  border-radius: var(--r); color: var(--fg-2); white-space: nowrap;
}
.hcat__go:hover { border-color: var(--signal); color: var(--signal); text-decoration: none; }
.hcat__all {
  display: block; text-align: center; padding: 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; background: var(--ink-2);
}

/* ---------- el ejemplo de la API ---------- */
.hcode { overflow: hidden; width: 100%; }
.hcode__pre { margin: 0; padding: 18px 20px; overflow-x: auto; }
.hcode__pre code { font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: var(--fg-2); white-space: pre; }

@media (max-width: 940px) {
  html[data-brand-layout="catalog"] .hero__in,
  html[data-brand-layout="developer"] .hero__in { grid-template-columns: 1fr; }
  .hcard, .hcat, .hcode { order: 1; }
}