/* ============================================================
   VANTOX SECURE ESCROW — v2 design system
   Plain CSS, no build step. One file, ordered top-down:
   tokens → base → nav → buttons → sections → components → pages
   → footer → animations → responsive.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:        #04070d;
  --bg-2:      #060b14;
  --surface:   rgba(255,255,255,0.028);
  --surface-2: #0a111e;
  --border:    rgba(255,255,255,0.075);
  --border-hi: rgba(255,255,255,0.16);

  --text:   #eef2f8;
  --text-2: #a9b4c6;
  --text-3: #6b7789;

  --teal:      #2fd6a6;
  --teal-hi:   #56e8bf;
  --teal-dim:  rgba(47,214,166,0.11);
  --blue:      #4a8dff;
  --blue-dim:  rgba(74,141,255,0.12);
  --amber:     #f2b04c;
  --amber-dim: rgba(242,176,76,0.10);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --container: 1140px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --shadow-card: 0 20px 50px rgba(0,0,0,0.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;letter-spacing:-0.015em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
::selection{background:rgba(47,214,166,0.28)}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-mono)}

/* page backdrop: faint grid + radial glows, fixed so it never causes overflow */
.backdrop{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(74,141,255,0.09), transparent 60%),
    radial-gradient(800px 500px at 12% 4%, rgba(47,214,166,0.07), transparent 60%),
    var(--bg);
}
.backdrop::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(4,7,13,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{border-bottom-color:var(--border);background:rgba(4,7,13,0.88)}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  height:68px;display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img.mark{height:34px;width:auto}
.brand img.word{height:22px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--text-2)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:14px}
.lang{
  display:flex;border:1px solid var(--border-hi);border-radius:100px;overflow:hidden;
  font-family:var(--font-mono);font-size:11.5px;
}
.lang a{padding:5px 11px;color:var(--text-3);transition:color .2s,background .2s}
.lang a:hover{color:var(--text)}
.lang a.on{background:var(--teal-dim);color:var(--teal)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.burger svg{width:22px;height:22px;stroke:var(--text);stroke-width:2;fill:none}
.burger .x{display:none}
.nav-open .burger .bars{display:none}
.nav-open .burger .x{display:block}
.mobile-menu{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:100px;font-size:14.5px;font-weight:600;
  border:1px solid transparent;transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, border-color .18s;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{
  background:linear-gradient(135deg, #2fd6a6 0%, #1fb98c 100%);color:#03130c;
  box-shadow:0 8px 24px rgba(47,214,166,0.22);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(47,214,166,0.32)}
.btn-ghost{border-color:var(--border-hi);color:var(--text);background:rgba(255,255,255,0.02)}
.btn-ghost:hover{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05)}
.btn-sm{padding:9px 16px;font-size:13.5px}

/* ---------- section scaffolding ---------- */
.section{padding:104px 0}
.section-tight{padding:56px 0}
.band{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--teal);opacity:.6}
.eyebrow.blue{color:var(--blue)}
.eyebrow.blue::before{background:var(--blue)}
.section-head{max-width:640px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-title{font-size:clamp(26px,3.4vw,38px)}
.section-sub{color:var(--text-2);font-size:16.5px;margin-top:14px;line-height:1.65}

/* ---------- hero ---------- */
.hero{padding:84px 0 96px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(34px,4.8vw,56px);letter-spacing:-0.025em}
.hero h1 .grad{
  background:linear-gradient(100deg, var(--teal-hi) 10%, var(--blue) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:var(--text-2);font-size:17.5px;line-height:1.7;margin-top:22px;max-width:520px}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}
.fact{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-2);
  border:1px solid var(--border);border-radius:100px;padding:7px 13px;
  background:rgba(255,255,255,0.02);
}
.fact svg{width:13px;height:13px;color:var(--teal);flex-shrink:0}
.hero-visual{position:relative}
.hero-visual::before{
  content:'';position:absolute;inset:-10% -14%;z-index:-1;
  background:
    radial-gradient(closest-side, rgba(47,214,166,0.18), transparent 70%),
    radial-gradient(60% 50% at 70% 30%, rgba(74,141,255,0.10), transparent 75%);
}
.hero-visual img{
  width:100%;max-width:480px;margin:0 auto;border-radius:var(--r-lg);
  border:1px solid var(--border-hi);
  box-shadow:0 30px 70px rgba(0,0,0,0.55), 0 0 90px rgba(47,214,166,0.10);
}
.hero-note{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin-top:16px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
}
.hero-note svg{width:13px;height:13px;color:var(--blue)}

/* ---------- escrow flow timeline ---------- */
.timeline{position:relative;max-width:760px;margin:0 auto}
.timeline::before{
  content:'';position:absolute;left:27px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg, var(--teal) 0%, var(--blue) 100%);opacity:.35;
}
.tl-step{position:relative;padding:0 0 44px 84px}
.tl-step:last-child{padding-bottom:0}
.tl-num{
  position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border-hi);
  display:flex;align-items:center;justify-content:center;
}
.tl-num svg{width:22px;height:22px;color:var(--teal)}
.tl-num::after{
  content:attr(data-n);position:absolute;top:-5px;right:-5px;
  width:20px;height:20px;border-radius:50%;background:var(--teal);color:#03130c;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.tl-step h3{font-size:17px;margin-bottom:6px}
.tl-step p{color:var(--text-2);font-size:14.5px;max-width:520px}
.tl-step .tag{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-dim);border-radius:100px;padding:3px 9px;
}

/* ---------- deal type cards (Sale / Swap) ---------- */
.deal-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.deal-card{
  position:relative;border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  padding:34px 32px;overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.deal-card:hover{transform:translateY(-3px)}
.deal-card.sale:hover{border-color:rgba(47,214,166,0.4)}
.deal-card.swap:hover{border-color:rgba(74,141,255,0.4)}
.deal-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
}
.deal-card.sale::before{background:linear-gradient(90deg, var(--teal), transparent 70%)}
.deal-card.swap::before{background:linear-gradient(90deg, var(--blue), transparent 70%)}
.deal-ic{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.deal-card.sale .deal-ic{background:var(--teal-dim);color:var(--teal)}
.deal-card.swap .deal-ic{background:var(--blue-dim);color:var(--blue)}
.deal-ic svg{width:22px;height:22px}
.deal-card h3{font-size:21px;margin-bottom:10px}
.deal-card>p{color:var(--text-2);font-size:14.5px;margin-bottom:22px}
.deal-fee{
  font-family:var(--font-mono);font-size:12.5px;border-top:1px dashed var(--border-hi);
  padding-top:18px;display:flex;flex-direction:column;gap:8px;color:var(--text-2);
}
.deal-fee b{font-weight:600}
.deal-card.sale .deal-fee b{color:var(--teal)}
.deal-card.swap .deal-fee b{color:var(--blue)}

/* ---------- generic feature grid / cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:26px 24px;transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.card:hover{border-color:var(--border-hi);background:rgba(255,255,255,0.045);transform:translateY(-2px)}
.card .ic{
  width:40px;height:40px;border-radius:var(--r-sm);background:var(--teal-dim);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.card .ic.blue{background:var(--blue-dim);color:var(--blue)}
.card .ic svg{width:19px;height:19px}
.card h3{font-size:16px;margin-bottom:8px}
.card p{color:var(--text-2);font-size:14px;line-height:1.6}

/* ---------- mockup gallery ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.shot img{width:100%;aspect-ratio:474/633;object-fit:cover;transition:transform .6s var(--ease)}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  background:linear-gradient(180deg, transparent, rgba(3,6,11,0.88) 55%);
  font-size:13.5px;color:var(--text);
}
.shot figcaption span{display:block;color:var(--text-2);font-size:12px;margin-top:2px}

/* ---------- fees table ---------- */
.fee-panel{
  max-width:680px;margin:0 auto;border:1px solid var(--border-hi);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface-2);
}
.fee-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 28px;
}
.fee-row + .fee-row{border-top:1px solid var(--border)}
.fee-row .lbl{font-size:14.5px;color:var(--text-2)}
.fee-row .lbl b{color:var(--text);font-weight:600}
.fee-row .val{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--teal);white-space:nowrap}
.fee-row.swap .val{color:var(--blue)}
.fee-foot{
  border-top:1px solid var(--border);padding:16px 28px;
  font-size:13px;color:var(--text-3);background:rgba(255,255,255,0.015);
  display:flex;gap:9px;align-items:flex-start;
}
.fee-foot svg{width:15px;height:15px;color:var(--teal);flex-shrink:0;margin-top:2px}

/* ---------- coins strip ---------- */
.coins{display:flex;justify-content:center;align-items:stretch;gap:20px;flex-wrap:wrap}
.coin{
  display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);padding:18px 26px;min-width:230px;
}
.coin img{width:42px;height:42px}
.coin b{display:block;font-family:var(--font-display);font-size:16px}
.coin span{font-size:12.5px;color:var(--text-3);font-family:var(--font-mono)}

/* ---------- honesty / policy callout ---------- */
.callout{
  border:1px solid rgba(242,176,76,0.35);background:var(--amber-dim);
  border-radius:var(--r);padding:24px 26px;display:flex;gap:16px;align-items:flex-start;
}
.callout svg{width:20px;height:20px;color:var(--amber);flex-shrink:0;margin-top:3px}
.callout h3{font-size:15.5px;margin-bottom:6px;color:#f7cd8a}
.callout p{font-size:14px;color:var(--text-2);line-height:1.65}
.callout.blue{border-color:rgba(74,141,255,0.35);background:var(--blue-dim)}
.callout.blue svg{color:var(--blue)}
.callout.blue h3{color:#9cbfff}

/* ---------- split feature (text + visual) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split-visual img{
  width:100%;max-width:420px;margin:0 auto;border-radius:var(--r-lg);
  border:1px solid var(--border-hi);box-shadow:var(--shadow-card);
}
.checklist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.checklist li b{color:var(--text);font-weight:600}
.checklist svg{width:18px;height:18px;color:var(--teal);flex-shrink:0;margin-top:3px}

/* ---------- FAQ ---------- */
.faq-group{max-width:760px;margin:0 auto 46px}
.faq-group:last-child{margin-bottom:0}
.faq-group h2{font-size:15px;font-family:var(--font-mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.faq-item{
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  margin-bottom:10px;overflow:hidden;transition:border-color .25s;
}
.faq-item:hover{border-color:var(--border-hi)}
.faq-item[open]{border-color:var(--border-hi);background:rgba(255,255,255,0.04)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;gap:18px;align-items:center;
  font-weight:600;font-size:15px;font-family:var(--font-display);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-family:var(--font-mono);font-size:18px;color:var(--teal);
  transition:transform .25s var(--ease);flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 22px 20px;color:var(--text-2);font-size:14.5px;line-height:1.7}
.faq-item .faq-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* ---------- contact page ---------- */
.channel{
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:30px 28px;display:flex;flex-direction:column;gap:0;
  transition:border-color .25s, transform .25s var(--ease);
}
.channel:hover{border-color:var(--border-hi);transform:translateY(-2px)}
.channel .ic{
  width:44px;height:44px;border-radius:12px;background:var(--teal-dim);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.channel .ic.blue{background:var(--blue-dim);color:var(--blue)}
.channel .ic svg{width:21px;height:21px}
.channel h3{font-size:17px;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.channel p{color:var(--text-2);font-size:14px;line-height:1.65;margin-bottom:18px}
.channel .go{margin-top:auto;font-family:var(--font-mono);font-size:13px;color:var(--teal);display:inline-flex;align-items:center;gap:7px}
.channel .go svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.channel:hover .go svg{transform:translateX(3px)}
.pill{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;border-radius:100px;padding:3px 10px;
}
.pill.live{color:var(--teal);background:var(--teal-dim)}
.pill.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite}
.pill.soon{color:var(--amber);background:var(--amber-dim)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.email-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.email-item{
  border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;background:var(--surface);
  transition:border-color .2s;
}
.email-item:hover{border-color:var(--border-hi)}
.email-item .for{font-size:12.5px;color:var(--text-3);margin-bottom:4px}
.email-item a{font-family:var(--font-mono);font-size:13.5px;color:var(--teal)}

/* ---------- status page ---------- */
.status-banner{
  display:flex;align-items:center;gap:14px;border:1px solid rgba(47,214,166,0.35);
  background:var(--teal-dim);border-radius:var(--r);padding:20px 24px;margin-bottom:36px;
}
.status-banner .dot{width:11px;height:11px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;flex-shrink:0}
.status-banner b{font-family:var(--font-display);font-size:16px}
.status-banner span{color:var(--text-2);font-size:13.5px}
.status-list{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:19px 24px}
.status-row + .status-row{border-top:1px solid var(--border)}
.status-row .name{font-size:14.5px;font-weight:500}
.status-row .name span{display:block;font-weight:400;font-size:12.5px;color:var(--text-3);margin-top:2px}
.status-ok,.status-soon{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.status-ok{color:var(--teal)}
.status-soon{color:var(--amber)}
.status-ok::before,.status-soon::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.status-note{margin-top:22px;font-size:13px;color:var(--text-3);display:flex;gap:9px;align-items:flex-start}
.status-note svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--blue)}

/* ---------- security stage (home: flagship section treatment) ---------- */
.security-stage{
  position:relative;overflow:hidden;
  border:1px solid var(--border-hi);border-radius:var(--r-lg);
  padding:72px 56px 64px;
  background:
    radial-gradient(760px 340px at 50% -5%, rgba(47,214,166,0.12), transparent 70%),
    radial-gradient(500px 300px at 90% 100%, rgba(74,141,255,0.07), transparent 70%),
    var(--surface-2);
}
.security-stage::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg, transparent, var(--teal), var(--blue), transparent);
  opacity:.7;
}
.security-stage .section-title{font-size:clamp(30px,4vw,44px)}
.security-stage .card{background:rgba(255,255,255,0.04)}

/* ---------- video accents (muted loops, no controls) ---------- */
.split-visual video{
  width:100%;max-width:420px;margin:0 auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--border-hi);box-shadow:var(--shadow-card);
}
.cta-band video{
  width:100%;max-width:300px;margin:0 auto 30px;display:block;
  border-radius:var(--r);border:1px solid var(--border-hi);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
/* wide screens: copy sits beside the vertical video instead of stacking.
   Flex + justify-content:center (not grid 1fr/auto) so the copy block sizes
   to its actual content instead of a wide track with dead space inside it;
   ".cta-band.cta-media" (compound selector) also outranks .cta-band's own
   padding rule regardless of source order, so this padding always wins. */
.cta-band.cta-media{
  display:flex;align-items:center;justify-content:center;gap:56px;
  text-align:left;padding:56px 64px;
}
.cta-media .cta-copy h2{margin-bottom:14px}
.cta-media .cta-copy p{margin:0 0 30px;max-width:440px}
.cta-media video{margin:0;max-width:270px}
@media (max-width:860px){
  .cta-band.cta-media{display:block;text-align:center;padding:52px 22px}
  .cta-media .cta-copy p{margin:0 auto 30px}
  .cta-media video{margin:30px auto 0;max-width:250px}
}

/* ---------- live protocol metrics (status page, BETA — oculto hasta activación) ---------- */
#protocol-metrics[hidden]{display:none !important}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}
.pm-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 16px;text-align:center;display:flex;flex-direction:column;gap:6px;
  transition:border-color .3s var(--ease);
}
.pm-card .pm-value{
  font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--teal);
  line-height:1.2;
}
.pm-card .pm-label{font-size:12px;color:var(--text-3);letter-spacing:.02em}
/* la animación SOLO se aplica al actualizarse un valor (clase añadida por JS), nunca al primer render */
.pm-value.pm-bump{animation:pmBump .6s var(--ease)}
@keyframes pmBump{0%{transform:scale(1)}35%{transform:scale(1.08);color:var(--teal-hi)}100%{transform:scale(1)}}
.pm-feed-title{font-size:15px;font-family:var(--font-mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0 0 12px}
.pm-feed{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.pm-feed .pm-ev{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 18px;font-size:13.5px;color:var(--text-2);
}
.pm-feed .pm-ev + .pm-ev{border-top:1px solid var(--border)}
.pm-feed .pm-ev time{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);white-space:nowrap}
/* Grid de 2 columnas (≤860px): si el nº de tarjetas es impar, la última se
   queda sola pegada a la izquierda, descuadrada frente a la columna vecina
   (pasa con el panel de 9 métricas de Estado y con las 3 de Home). El
   selector solo activa cuando el ÚLTIMO hijo cae en posición impar — con un
   nº par de tarjetas no coincide y no hace nada. */
@media (max-width:860px){
  .pm-grid{grid-template-columns:repeat(2,1fr)}
  .pm-grid > *:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){.pm-grid{grid-template-columns:1fr 1fr;gap:10px}.pm-card .pm-value{font-size:19px}}

/* ---------- protocol activity (Home, versión compacta del mismo componente) ---------- */
/* Grupos expandibles del feed: eventos del mismo trato colapsados en un ítem */
.pm-feed .pm-ev-group{cursor:pointer;user-select:none}
.pm-feed .pm-ev-group:hover{background:var(--surface-2)}
.pm-feed .pm-ev-group:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.pm-ev-count{
  font-family:var(--font-mono);font-size:10.5px;color:var(--teal);
  border:1px solid var(--border);border-radius:100px;padding:1px 8px;margin-left:8px;
  white-space:nowrap;vertical-align:1px;
}
.pm-feed .pm-ev-group[aria-expanded="true"] .pm-ev-count{color:var(--text-1);border-color:var(--teal)}
.pm-feed .pm-ev-subrow{padding-left:34px;background:var(--surface-2);font-size:12.5px;color:var(--text-3)}
/* BUG REAL (2026-07-21): .pm-feed .pm-ev{display:flex} tiene más especificidad que la
   regla [hidden]{display:none} del user-agent stylesheet, así que el atributo `hidden`
   que pone paintFeed() en las sub-filas quedaba puesto en el DOM pero sin efecto visual
   — las sub-filas se veían igual de "colapsadas" que expandidas. Confirmado con
   getComputedStyle().display:"flex" pese a hasAttribute('hidden')===true. */
.pm-feed .pm-ev[hidden]{display:none!important}
/* Ajustes compactos de la sección en Home */
.pm-compact .pm-grid{margin-bottom:26px}
.pm-compact .pm-card{padding:16px 14px}
.pm-more-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:13.5px;font-weight:600;color:var(--teal);text-decoration:none;
}
.pm-more-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- big CTA band ---------- */
.cta-band{
  border:1px solid var(--border-hi);border-radius:var(--r-lg);text-align:center;
  padding:72px 32px;position:relative;overflow:hidden;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(47,214,166,0.13), transparent 70%),
    var(--surface-2);
}
.cta-band h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.cta-band p{color:var(--text-2);max-width:480px;margin:0 auto 30px;font-size:15.5px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border);padding:64px 0 36px;margin-top:40px;background:rgba(255,255,255,0.012)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
.footer-brand img{height:30px;width:auto;margin-bottom:16px}
.footer-brand p{font-size:13.5px;color:var(--text-3);max-width:280px;line-height:1.65}
.footer-tagline{
  margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--text-3);max-width:none !important;
}
.footer-tagline b{color:var(--text-2);font-weight:400}
.footer h4{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:16px;font-weight:600;
}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14px;color:var(--text-2);transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-3);
}
.footer-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-legal a{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);transition:color .2s}
.footer-legal a:hover{color:var(--text)}
.socials{display:flex;gap:8px}
.socials a{
  width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text-2);
  transition:color .2s,border-color .2s;
}
.socials a:hover{color:var(--text);border-color:var(--border-hi)}
.socials svg{width:16px;height:16px}

/* ---------- reveal-on-scroll (JS adds .js to <html>; without JS nothing hides) ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html.js .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .section{padding:76px 0}
  .hero{padding:56px 0 72px}
  .hero-grid{grid-template-columns:1fr;gap:48px;text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-facts{justify-content:center}
  .split{grid-template-columns:1fr;gap:44px}
  .split-visual{order:-1}
  .grid-3{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr 1fr}
  .email-list{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}

  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .mobile-menu{
    display:none;flex-direction:column;gap:4px;padding:12px 24px 22px;
    border-top:1px solid var(--border);background:rgba(4,7,13,0.97);
  }
  .nav-open .mobile-menu{display:flex}
  .mobile-menu a{padding:13px 4px;font-size:16px;color:var(--text-2);border-bottom:1px solid var(--border)}
  .mobile-menu a:last-of-type{border-bottom:none}
  .mobile-menu a[aria-current="page"]{color:var(--teal)}
  .mobile-menu .btn{margin-top:14px;justify-content:center}
  .mobile-menu .btn-primary{color:#03130c}
}

@media (max-width:640px){
  .section{padding:60px 0}
  .grid-3,.grid-2,.deal-grid,.shots{grid-template-columns:1fr}
  .email-list{grid-template-columns:1fr}
  /* Footer en móvil (v2 — el intento de fusionar Compañía+Comunidad en una sola
     columna quedó descompensado: Producto acababa pronto y dejaba un hueco
     grande frente a la columna combinada, mucho más larga. En su lugar: las
     3 categorías como 3 columnas estrechas en la misma fila, igual que en
     escritorio — cada una con SU propio contenido, sin fusionar nada, así que
     ninguna arrastra el peso de otra. order:-1 en la marca es más simple que
     numerar cada columna: siempre va primera, sin tocar el resto. */
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:26px 10px}
  .footer-brand{grid-column:1 / -1;order:-1}
  /* Enlaces más compactos para que quepan en columnas de ~1/3 del ancho —
     "Support bot (24/7)" / "Bot de soporte (24/7)" se parten en 2 líneas sin
     desbordar (verificado en navegador, ver PROGRESS.md). */
  .footer-col{gap:9px}
  .footer-col a{font-size:12px;line-height:1.35}
  .footer h4{font-size:10px;letter-spacing:.08em;margin-bottom:12px}
  .fee-row{padding:18px 20px}
  .fee-row .val{font-size:17px}
  .timeline::before{left:23px}
  .tl-num{width:48px;height:48px}
  .tl-num svg{width:19px;height:19px}
  .tl-step{padding-left:70px;padding-bottom:38px}
  .cta-band{padding:52px 22px}
  .security-stage{padding:48px 22px 44px}
  .coin{min-width:0;flex:1 1 100%}
  .shot img{aspect-ratio:474/560}
}