/* ===== Bitplify landing — tokens & theming ===== */
:root{
  /* marca */
  --green:#00d412; --green-2:#00a30e; --green-deep:#044a0a;
  --orange:#f7931a; --blue:#3b82f6;
  /* superficies (DARK por defecto) */
  --bg:#0a0e0b; --bg-2:#0c120d;
  --panel:#121a13; --inset:#0b110c; --chip:#19231a;
  --line:#1d2c1e;
  --text:#e8f3ea; --muted:#92ac99;
  --accent-ink:#27e23a;           /* verde para texto (buen contraste en dark) */
  --nav-bg:rgba(10,14,11,.82);
  --hero-glow:#11301644;
  --shadow:0 24px 60px -24px #000;
  /* estados roadmap */
  --st-active:#00d412; --st-progress:#8bf06a; --st-soon:#e0b341; --st-planned:#6f8a76;
  /* tokens */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --r:16px; --maxw:1120px;
}
html[data-theme="light"]{
  --bg:#f3f8f3; --bg-2:#e9f1ea;
  --panel:#ffffff; --inset:#eef4ee; --chip:#ffffff;
  --line:#dbe6dc;
  --text:#0d1a10; --muted:#51705a;
  --accent-ink:#018a0d;
  --nav-bg:rgba(243,248,243,.82);
  --hero-glow:#00d4121f;
  --shadow:0 20px 50px -28px rgba(2,40,10,.35);
  --st-progress:#2faa2f; --st-soon:#b8860b; --st-planned:#7f988a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:var(--sans); line-height:1.5;
  background:
    radial-gradient(900px 480px at 50% -8%, var(--hero-glow) 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{display:block}
.spr,.brand-coin,.coin-img,.field-coin,.icon-spr,.trust-spr,.trust-mini,.nav-ic,.hb-ic,.seller-ic,.install-ic,.install-points img,.coin-chip img,.foot img{image-rendering:pixelated; image-rendering:crisp-edges}
.icon-spr{width:48px; height:48px}
.trust-spr{width:24px; height:24px; flex:0 0 auto}
.trust-mini{width:18px; height:18px; vertical-align:-4px; margin-right:3px}
.app-mini{width:18px; height:18px; border-radius:4px; background:#fff; image-rendering:auto;
  vertical-align:-4px; flex:0 0 auto}
a{color:inherit; text-decoration:none}
/* accesibilidad: anillo de foco visible para teclado */
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--green); outline-offset:2px}
h1,h2,h3,h4{margin:0; letter-spacing:.01em}
.green,.hl{color:var(--accent-ink)}

/* ===== buttons ===== */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans);
  font-weight:600; border-radius:12px; padding:.7em 1.1em; cursor:pointer;
  border:1px solid transparent; transition:transform .08s ease, filter .15s ease, border-color .15s, color .15s;
  font-size:15px; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--green); color:#04230a; box-shadow:0 0 0 1px #04230a inset, 0 8px 24px -10px var(--green)}
.btn.solid:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--green); color:var(--accent-ink)}
.btn.big{font-size:18px; padding:.9em 1.6em}

/* ===== nav ===== */
.nav{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto;
  background:var(--nav-bg); backdrop-filter:blur(8px)}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:19px; flex:0 0 auto}
.brand-logo{height:25px; width:auto; display:block}
.foot-logo .brand-logo{height:30px}
/* swap por tema: blanco en oscuro, negro en claro */
.logo-light{display:none}
html[data-theme="light"] .logo-dark{display:none}
html[data-theme="light"] .logo-light{display:block}
.nav-links{display:flex; gap:3px; align-items:center; flex:0 1 auto}
.nav-links a{display:flex; align-items:center; gap:6px; padding:8px 9px; border-radius:10px;
  font-size:14px; font-weight:500; color:var(--muted); border:1px solid transparent;
  white-space:nowrap; transition:background .15s, color .15s, border-color .15s}
.nav-ic{width:18px; height:18px; filter:grayscale(1) opacity(.62); transition:filter .15s}
.nav-links a:hover{color:var(--accent-ink);
  background:color-mix(in srgb, var(--green) 12%, transparent);
  border-color:color-mix(in srgb, var(--green) 24%, transparent)}
.nav-links a:hover .nav-ic{filter:none}
.nav-badge{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.04em;
  background:var(--green); color:#04230a; padding:2px 5px; border-radius:6px; line-height:1; margin-left:2px}
.nav-cta{display:flex; gap:10px; align-items:center; flex:0 0 auto}
.theme-toggle{width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--inset); color:var(--text); cursor:pointer; display:grid; place-items:center}
.theme-toggle:hover{border-color:var(--green); color:var(--accent-ink)}
.theme-toggle svg{width:18px; height:18px}
/* dark → sol (cambiar a claro) · claro → luna (cambiar a oscuro), igual que el app */
.ic-moon{display:none}
html[data-theme="light"] .ic-sun{display:none}
html[data-theme="light"] .ic-moon{display:block}
.nav-login{color:var(--muted); font-size:14px; font-weight:500; padding:6px 4px; white-space:nowrap}
.nav-login:hover{color:var(--accent-ink)}
.btn-appicon{width:18px; height:18px; border-radius:5px; background:#fff; image-rendering:auto}
.nav-burger{display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--inset); color:var(--text); cursor:pointer; font-size:18px; line-height:1; place-items:center}
.nav-burger:hover{border-color:var(--green)}
/* menú mobile (dropdown bajo el nav) — fondo SÓLIDO opaco:
   no dependemos de backdrop-filter (Brave/Android lo bloquean y el hero se transparentaba) */
.nav-mobile{display:none; position:absolute; top:100%; left:0; right:0; z-index:19;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  padding:12px 18px 18px; flex-direction:column; gap:4px; box-shadow:0 24px 44px -22px #000}
.nav-mobile.open{display:flex}
.nav-mobile a:not(.btn){display:flex; align-items:center; gap:11px; padding:12px; border-radius:10px;
  color:var(--text); font-size:15.5px; font-weight:500}
.nav-mobile a:not(.btn):hover{background:color-mix(in srgb, var(--green) 12%, transparent); color:var(--accent-ink)}
.nav-mobile .nav-ic{width:20px; height:20px; filter:none}
.nav-mobile .btn{justify-content:center; font-size:15px}
.nav-mobile .ghost{margin-top:8px}
/* breakpoint mobile: ocultar links inline, mostrar hamburguesa */
@media (max-width:1040px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .hide-1040{display:none}
}

/* ===== hero ===== */
/* wrapper full-bleed: el fondo (estrellas/grilla/coins) ocupa todo el ancho;
   el contenido sigue centrado a 1120px. Mata los "paneles muertos" en desktop. */
.hero-wrap{position:relative; z-index:1; overflow:hidden}
.hero{position:relative; max-width:var(--maxw); margin:0 auto; padding:60px 24px 44px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero-copy,.hero .calc{position:relative; z-index:1}

/* ===== fondo pixel del hero (estrellas + grilla synthwave + coins) ===== */
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero-stars{position:absolute; inset:0; background:url(assets/sprites/stars.svg);
  background-size:170px 170px; image-rendering:pixelated; opacity:.5; animation:twinkle 4.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.3} 50%{opacity:.62}}
.hero-grid{position:absolute; left:-25%; right:-25%; bottom:0; height:48%; perspective:200px; opacity:.4;
  -webkit-mask-image:linear-gradient(transparent, #000 72%); mask-image:linear-gradient(transparent, #000 72%)}
.hero-grid::before{content:""; position:absolute; inset:-60% 0 -10% 0; transform-origin:bottom; transform:rotateX(75deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 43px, color-mix(in srgb,var(--green) 55%, transparent) 43px 45px),
    repeating-linear-gradient(90deg, transparent 0 43px, color-mix(in srgb,var(--green) 32%, transparent) 43px 45px);
  animation:gridmove 2.8s linear infinite}
@keyframes gridmove{from{background-position:0 0,0 0} to{background-position:0 45px,0 0}}
.hero-coin{position:absolute; image-rendering:pixelated; opacity:.32; filter:saturate(.85);
  animation:floaty 7s ease-in-out infinite}
.hc1{width:46px; height:46px; top:9%; left:33%; animation-delay:-1s}
.hc2{width:34px; height:34px; top:66%; left:9%; animation-delay:-3.5s; animation-duration:8.5s}
.hc3{width:28px; height:28px; top:21%; left:49%; animation-delay:-5s; animation-duration:9.5s}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)}}
/* orbes de glow ambiental (efecto "app viva", como login/register) */
.hero-orb{position:absolute; border-radius:50%; filter:blur(80px); opacity:.16; animation:heroOrb 20s ease-in-out infinite}
.ho1{width:340px; height:340px; background:radial-gradient(circle,#00d412,transparent 70%); top:-14%; left:-6%; animation-duration:18s}
.ho2{width:300px; height:300px; background:radial-gradient(circle,#22d3ee,transparent 70%); bottom:-2%; left:30%; animation-duration:22s; animation-delay:-6s}
.ho3{width:240px; height:240px; background:radial-gradient(circle,#d946ef,transparent 70%); top:38%; left:8%; animation-duration:25s; animation-delay:-12s}
/* sunset vaporwave: glow magenta→cian al pie del hero (detrás del contenido) */
.hero-bg::after{content:""; position:absolute; left:0; right:0; bottom:0; height:44%; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb,#d946ef 16%, transparent) 58%, color-mix(in srgb,#22d3ee 14%, transparent) 100%);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(transparent,#000 48%); mask-image:linear-gradient(transparent,#000 48%)}
html[data-theme="light"] .hero-bg::after{mix-blend-mode:multiply; opacity:.6}
@keyframes heroOrb{0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(28px,-18px) scale(1.05)} 50%{transform:translate(-18px,28px) scale(.95)} 75%{transform:translate(14px,14px) scale(1.02)}}
/* partículas que suben */
.hero-particles{position:absolute; inset:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent, #000 8%, #000 86%, transparent);
  mask-image:linear-gradient(transparent, #000 8%, #000 86%, transparent)}
.hero-particle{position:absolute; bottom:-8px; background:#4ade80; border-radius:50%;
  box-shadow:0 0 6px rgba(74,222,128,.5); animation:heroRise linear infinite}
@keyframes heroRise{0%{transform:translateY(0); opacity:0} 12%{opacity:var(--o,.6)} 86%{opacity:var(--o,.6)} 100%{transform:translateY(-80vh); opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hero-stars,.hero-grid::before,.hero-coin,.hero-orb{animation:none}
  .hero-particles{display:none}
}

/* ===== glow ambiental GLOBAL (toda la página viva) ===== */
.page-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.page-orb{position:absolute; border-radius:50%; filter:blur(95px); opacity:.13; animation:heroOrb 26s ease-in-out infinite}
.po1{width:420px; height:420px; background:radial-gradient(circle,#00d412,transparent 70%); top:14%; left:-8%; animation-duration:26s}
.po2{width:360px; height:360px; background:radial-gradient(circle,#22d3ee,transparent 70%); top:50%; right:-7%; animation-duration:31s; animation-delay:-8s}
.po3{width:300px; height:300px; background:radial-gradient(circle,#d946ef,transparent 70%); top:74%; left:24%; animation-duration:28s; animation-delay:-14s}
.po4{width:340px; height:340px; background:radial-gradient(circle,#00d412,transparent 70%); top:92%; right:22%; animation-duration:34s; animation-delay:-20s}
/* el contenido va por encima de la capa global; las secciones sólidas la tapan (ritmo) */
.nav,.hero,.section,.foot{position:relative; z-index:1}

/* ===== modo claro: que el efecto gamer se vea cool en blanco ===== */
html[data-theme="light"] .page-orb,
html[data-theme="light"] .hero-orb{mix-blend-mode:multiply; opacity:.2; filter:blur(72px)}
html[data-theme="light"] .hero-particle{background:#16a34a; box-shadow:0 0 5px rgba(22,163,74,.45)}
html[data-theme="light"] .hero-grid{opacity:.55}
html[data-theme="light"] .hero-stars{filter:brightness(.55) saturate(1.3); opacity:.7}
@media (prefers-reduced-motion:reduce){ .page-orb{animation:none} }
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.25em; color:var(--accent-ink); margin:0 0 14px}
.hero h1{font-size:clamp(38px,6vw,62px); line-height:1.02; font-weight:700}
.lead{font-size:18px; color:var(--muted); max-width:46ch; margin:18px 0 20px}
.lead b{color:var(--text)}
.trust{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-wrap:wrap; gap:18px;
  font-family:var(--mono); font-size:13px; color:var(--muted)}
.trust b{color:var(--text)}

/* ===== coin spin (CSS, sin GIF) ===== */
@keyframes coinflip{
  0%{transform:perspective(140px) rotateY(0deg)}
  100%{transform:perspective(140px) rotateY(360deg)}
}
.coin-img,.coin-chip img{transition:transform .2s ease}
.card:hover .coin-img,
.coin-chip:hover img,
.brand:hover .brand-coin{animation:coinflip 1.1s linear infinite}
@media (prefers-reduced-motion:reduce){
  .card:hover .coin-img,.coin-chip:hover img,.brand:hover .brand-coin,.foot-status .dot{animation:none}
}

/* coins strip */
.coins-strip{display:flex; flex-wrap:wrap; gap:10px}
.coin-chip{display:inline-flex; align-items:center; gap:9px; background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 8px; font-size:13px; color:var(--muted)}
.coin-chip img{width:26px; height:26px}
.coin-chip b{color:var(--text)}

/* badge "vendedores por invitación" en el hero */
.hero-badge{display:inline-flex; align-items:center; gap:8px; margin:2px 0 18px;
  font-family:var(--mono); font-size:12.5px; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 9px}
.hero-badge .hb-ic{width:18px; height:18px; flex:0 0 auto}

/* sección vendedor verificado */
.seller-card{max-width:680px; margin:0 auto; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:40px 32px; text-align:center; box-shadow:var(--shadow);
  position:relative; overflow:hidden}
.seller-card::before{content:""; position:absolute; inset:-1px -1px auto -1px; height:3px;
  background:linear-gradient(90deg, transparent, var(--green), transparent)}
.seller-ic{width:64px; height:64px; margin:0 auto 16px}
.seller-card h2{font-size:clamp(24px,3.5vw,32px); margin-bottom:14px}
.seller-lead{color:var(--muted); font-size:16px; max-width:52ch; margin:0 auto 12px; line-height:1.6}
.seller-lead b{color:var(--text)}
.seller-sub{color:var(--muted); font-size:15px; max-width:48ch; margin:0 auto 22px; line-height:1.55}
.seller-sub b{color:var(--accent-ink)}
.seller-num{display:block; margin-top:14px; font-family:var(--mono); font-size:13px; color:var(--muted)}

/* ===== calculadora ===== */
.calc{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow)}
.calc-tabs{display:flex; gap:6px; background:var(--inset); border:1px solid var(--line);
  border-radius:12px; padding:5px; margin-bottom:14px}
.tab{flex:1; border:0; background:transparent; color:var(--muted); font-family:var(--sans);
  font-weight:600; padding:.6em; border-radius:8px; cursor:pointer; font-size:14px}
.tab.active[data-mode="buy"]{background:var(--blue); color:#fff}
.tab.active[data-mode="sell"]{background:var(--green); color:#04230a}
.calc-field{margin-bottom:10px}
.calc-field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px 2px}
.field{display:flex; align-items:center; gap:8px; background:var(--inset);
  border:1px solid var(--line); border-radius:12px; padding:6px 8px}
.field:focus-within{border-color:var(--green)}
.field-coin{width:26px; height:26px; flex:0 0 auto}
#amount,.result{flex:1; background:transparent; border:0; color:var(--text);
  font-family:var(--mono); font-size:26px; font-weight:700; width:100%; outline:none;
  font-variant-numeric:tabular-nums}
.result{padding:4px 2px}
.asset{background:var(--chip); color:var(--text); border:1px solid var(--line); border-radius:9px;
  font-family:var(--mono); font-weight:600; padding:.5em .6em; font-size:14px; cursor:pointer}
.full{width:100%; background:var(--inset); color:var(--text); border:1px solid var(--line);
  border-radius:12px; padding:.75em; font-family:var(--sans); font-size:15px; cursor:pointer}
.swap{display:block; margin:-2px auto; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--inset); color:var(--accent-ink); font-size:16px;
  cursor:pointer; position:relative; z-index:2; transition:transform .35s ease, border-color .15s}
.swap:hover{border-color:var(--green)}
.swap.spun{transform:rotate(180deg)}
.cta{width:100%; justify-content:center; margin-top:14px; font-size:16px; font-weight:700;
  background:var(--green); color:#04230a; box-shadow:0 10px 30px -12px var(--green)}
.cta:hover{filter:brightness(1.08)}
.rate-note{font-family:var(--mono); font-size:11px; color:var(--muted); text-align:center; margin:10px 0 2px}

/* ===== secciones ===== */
.section{max-width:var(--maxw); margin:0 auto; padding:72px 24px; text-align:center}
.section.alt{background:var(--bg-2); max-width:none}
.section.alt > *{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.section h2{font-size:clamp(28px,4vw,40px)}
.section-sub{color:var(--muted); margin:10px 0 40px; font-size:17px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left}
.step{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.step .spr{margin-bottom:14px}
.step h3{font-size:18px; margin-bottom:8px}
.step p{color:var(--muted); margin:0; font-size:15px}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:left}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.card .emoji{font-size:26px}
.card h4{margin:12px 0 6px; font-size:16px}
.card p{color:var(--muted); margin:0; font-size:14px}

/* ===== roadmap ===== */
.roadmap{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:left; position:relative}
.phase{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px;
  display:flex; flex-direction:column; gap:10px}
.phase-badge{align-self:flex-start; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
  border:1px solid currentColor}
.phase.active   .phase-badge{color:var(--st-active)}
.phase.progress .phase-badge{color:var(--st-progress)}
.phase.soon     .phase-badge{color:var(--st-soon)}
.phase.planned  .phase-badge{color:var(--st-planned)}
.phase-kicker{font-family:var(--mono); font-size:12px; color:var(--muted)}
.phase h3{font-size:17px; line-height:1.2}
.phase-list{list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:7px}
.phase-list li{position:relative; padding-left:18px; font-size:13.5px; color:var(--muted); line-height:1.4}
.phase-list li::before{content:""; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-radius:2px; background:currentColor; color:var(--line)}
.phase.active   .phase-list li::before{color:var(--st-active)}
.phase.progress .phase-list li::before{color:var(--st-progress)}

/* ===== comparativa / seguridad ===== */
.compare-intro{max-width:660px; margin:10px auto 30px}
.compare-intro b{color:var(--text)}
.compare{overflow-x:auto}
.compare table{width:100%; border-collapse:collapse; text-align:left; min-width:560px}
.compare th,.compare td{padding:14px 18px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:middle}
.compare thead th{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.compare td:first-child{color:var(--text); font-weight:500}
.compare .col-bp{background:color-mix(in srgb, var(--green) 8%, transparent); color:var(--accent-ink)}
.compare td.col-bp b{color:var(--accent-ink)}
.compare thead .col-bp{color:var(--accent-ink); font-weight:700}
.cmp-yes{width:17px; height:17px; vertical-align:-3px; margin-right:5px; image-rendering:pixelated}
.cmp-no{color:var(--muted)}
.compare-vision{max-width:640px; margin:26px auto 0; text-align:center; font-size:14px; color:var(--muted); line-height:1.6}
.compare-vision b{color:var(--text)}
.compare-vision a{color:var(--accent-ink); white-space:nowrap}

/* ===== métodos de pago ===== */
.pay-strip{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin:0 auto}
.pay-chip{font-family:var(--mono); font-size:14px; color:var(--text); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; transition:border-color .15s}
.pay-chip:hover{border-color:color-mix(in srgb, var(--green) 35%, transparent)}
.pay-chip.pay-more{color:var(--accent-ink); background:color-mix(in srgb, var(--green) 8%, transparent);
  border-color:color-mix(in srgb, var(--green) 30%, transparent)}
.pay-chip.pay-star{color:#04230a; background:var(--green); border-color:var(--green); font-weight:700;
  box-shadow:0 6px 18px -8px var(--green)}

/* ===== instalar (PWA, sin tiendas) ===== */
.install-card{max-width:680px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center}
.install-ic{width:84px; height:84px; margin:0 auto 18px; border-radius:19px; background:#fff;
  image-rendering:auto;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,0,0,.04)}
.install-tag{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--accent-ink); margin-bottom:14px; padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--green) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 24%, transparent)}
.install-card h2{font-size:clamp(24px,3.5vw,32px); margin-bottom:12px}
.install-lead{color:var(--muted); font-size:16px; max-width:52ch; margin:0 auto 22px; line-height:1.6}
.install-lead b{color:var(--text)}
.install-points{list-style:none; padding:0; margin:0 auto 24px; display:flex; width:fit-content; max-width:100%;
  flex-direction:column; gap:10px; text-align:left}
.install-points li{display:flex; align-items:center; gap:9px; font-size:15px; color:var(--text)}
.install-points img{width:18px; height:18px; flex:0 0 auto}
.install-hint{display:block; margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--muted)}

/* ===== scroll reveal ===== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ===== gamificación / niveles ===== */
#niveles .xp-card{max-width:600px; margin:0 auto; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:28px 26px 24px; box-shadow:var(--shadow); text-align:left}
.xp-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
  font-family:var(--mono); font-size:13px; flex-wrap:wrap; gap:6px}
.xp-level{color:var(--accent-ink); font-weight:700}
.xp-amount{color:var(--muted)}
.xp-track{height:16px; background:var(--inset); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.xp-fill{height:100%; width:82%; border-radius:999px;
  background:linear-gradient(90deg, var(--green-2), var(--green));
  box-shadow:0 0 14px -2px var(--green); transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
.section.reveal .xp-fill{width:0}
.section.in .xp-fill{width:82%}
.xp-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; justify-content:center}
.xp-badge{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text);
  background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 8px}
.xp-badge img{width:22px; height:22px; image-rendering:pixelated; image-rendering:crisp-edges}
.xp-badge small{color:var(--muted); font-size:11px}
.xp-badge.locked{opacity:.5; filter:grayscale(.7)}

/* ===== faq ===== */
.faq{max-width:760px; margin:0 auto; text-align:left}
.faq details{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden}
.faq summary{cursor:pointer; padding:16px 18px; font-weight:600; font-size:16px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-ink); font-family:var(--mono); font-size:20px; transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--accent-ink)}
.faq details p{margin:0; padding:0 18px 18px; color:var(--muted); font-size:14.5px; line-height:1.6}
.faq details p a{color:var(--accent-ink)}

/* ===== CTA final ===== */
.finale{padding:90px 24px}
.finale .btn{margin-top:8px}

/* ===== FOOTER ===== */
.foot{position:relative; border-top:1px solid color-mix(in srgb, var(--green) 16%, var(--line));
  background:var(--bg-2); margin-top:8px; overflow:hidden}
.foot::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 60%, transparent) 50%, transparent)}
.foot-inner{position:relative; max-width:var(--maxw); margin:0 auto; padding:0 24px}

.foot-trust{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding:26px 0; border-bottom:1px solid var(--line)}
.foot-trust-item{display:flex; gap:10px; align-items:flex-start}
.foot-trust-ic{font-size:18px; line-height:1.2}
.foot-trust-item strong{display:block; font-size:14px; color:var(--text)}
.foot-trust-item span{font-size:12.5px; color:var(--muted)}

.foot-cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:28px; padding:40px 0}
.foot-brand .foot-logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:20px}
.foot-tagline{color:var(--muted); margin:12px 0 14px; font-size:14px; max-width:34ch}
.foot-status{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:12px; color:var(--muted)}
.foot-status .dot{width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent)}
.foot-socials{display:flex; gap:10px; margin-top:16px}
.foot-socials a{width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--line); color:var(--muted); transition:color .15s, border-color .15s, transform .12s, background .15s}
.foot-socials a:hover{border-color:var(--green); color:var(--accent-ink);
  background:color-mix(in srgb, var(--green) 10%, transparent); transform:translateY(-2px)}
.foot-socials svg{width:18px; height:18px; fill:currentColor}
.tag-joy{width:18px; height:18px; vertical-align:-4px; margin-left:1px}
.foot-status .dot{animation:dotpulse 2s ease-in-out infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 28%, transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent)}}

/* ciudad pixel nocturna: el footer vive DENTRO de la skyline */
.foot-skyline{position:relative; margin-top:16px; background-color:#070d0a;
  background-image:url(assets/sprites/city.png); background-position:center bottom;
  background-size:cover; background-repeat:no-repeat;
  image-rendering:pixelated; image-rendering:crisp-edges}
/* velo: arriba mezcla con el footer, abajo oscurece los edificios para que el texto lea */
.foot-skyline::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 15%, transparent) 24%,
    transparent 46%, rgba(4,10,7,.5) 78%, rgba(4,10,7,.82) 100%)}
.foot-skyline .foot-inner{position:relative; z-index:2; padding:clamp(56px,9vw,92px) 24px 20px;
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
/* ---- ciudad viva de noche: estrellas que titilan + ventanas que parpadean ---- */
.city-sky{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.city-stars{position:absolute; top:0; left:0; right:0; height:62%;
  background:url(assets/sprites/stars.svg); background-size:150px 150px; image-rendering:pixelated;
  opacity:.4; animation:cityTwinkle 5.5s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(#000, transparent 94%); mask-image:linear-gradient(#000, transparent 94%)}
@keyframes cityTwinkle{0%,100%{opacity:.22} 50%{opacity:.55}}
.city-lights{position:absolute; inset:0}
.city-light{position:absolute; width:2px; height:2px; border-radius:1px;
  background:currentColor; box-shadow:0 0 5px 1px currentColor;
  animation:winFlicker var(--d,4s) ease-in-out var(--delay,0s) infinite}
@keyframes winFlicker{0%,100%{opacity:var(--lo,.18)} 50%{opacity:var(--o,.92)}}
@media (prefers-reduced-motion:reduce){
  .city-stars,.city-light{animation:none}
}
/* texto siempre claro (la ciudad es noche, en ambos temas) */
.foot-skyline .foot-disclaimer{color:#a6c0ad}
.foot-skyline .foot-copy{color:#c8dacc}
.foot-skyline .foot-bottom-links a{color:#b2c7b9}
.foot-skyline .foot-bottom-links a:hover{color:#3df04f}
.foot-skyline .secure-pill{color:#3df04f; text-shadow:none;
  background:color-mix(in srgb, #00d412 15%, transparent);
  border-color:color-mix(in srgb, #00d412 30%, transparent)}
.foot-skyline .region-chip{color:#e3f1e8; text-shadow:none;
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16)}
.foot-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:14px}
.foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{color:var(--muted); font-size:14px}
.foot-col a:hover{color:var(--accent-ink)}

.foot-disclaimer-row{border-top:1px solid var(--line); padding:18px 0 4px}
.foot-disclaimer{margin:0 auto; max-width:660px; text-align:center; font-size:12px;
  color:var(--muted); opacity:.9; line-height:1.65}
.foot-bottom{padding:16px 0 6px; display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between; color:var(--muted); font-size:13px}
.foot-bottom-left{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.secure-pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:12px; color:var(--accent-ink); border-radius:999px; padding:5px 11px 5px 8px;
  background:color-mix(in srgb, var(--green) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 22%, transparent)}
.secure-pill img{width:15px; height:15px}
.foot-copy{font-size:13px}
.foot-bottom-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.foot-bottom-links a{color:var(--muted)}
.foot-bottom-links a:hover{color:var(--accent-ink)}
.region-chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:12px; color:var(--text); background:var(--inset); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 8px}
.region-chip img{width:16px; height:16px}

/* ===== responsive ===== */
@media (max-width:920px){
  .foot-cols{grid-template-columns:1fr 1fr; gap:24px}
  .foot-trust{grid-template-columns:1fr 1fr}
  .roadmap{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:36px}
  .nav-links{display:none}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .roadmap{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .foot-trust{grid-template-columns:1fr}
  .nav-cta .ghost{display:none}
  /* nav compacto: que "Crear cuenta" + hamburguesa quepan sin cortarse */
  .nav{padding-left:16px; padding-right:16px; gap:8px}
  .nav-cta{gap:8px}
  .nav-cta .btn.solid{padding:.6em .85em; font-size:14px}
  .brand-logo{height:22px}
}