/* ===== VendeNFC · web pública =====
   Dirección: plano de calles nocturno en la portada (lo que ve el vendedor antes de salir),
   el resto de la página en claro con "fichas" de la app como prueba visual. */
:root{
  --night:#070B16; --night-2:#0E1528; --night-line:#1E2945; --night-ink:#E9EDF7; --night-muted:#8C97B2;
  --street:#121A31; --block:#0C1324; --glow:#5B7CFF;
}

/* barra superior */
.announce{background:var(--accent);color:var(--accent-ink);font-size:.86rem;text-align:center;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.announce a{font-weight:700;text-underline-offset:3px}

/* cabecera sobre la portada oscura */
header.top.dark{background:var(--night);border-bottom-color:var(--night-line);color:var(--night-ink)}
header.top.dark .top-links a.lnk:hover{background:var(--night-2)}
header.top .nav-nfc{display:inline-flex;gap:6px;align-items:center;border:1.5px solid color-mix(in srgb,var(--hot) 70%,transparent);color:var(--hot)!important;border-radius:999px;padding:6px 12px!important;font-weight:600}
header.top .nav-nfc:hover{background:color-mix(in srgb,var(--hot) 12%,transparent)!important}
.menu-btn{display:none;margin-left:auto;background:transparent;border:1.5px solid var(--night-line);color:inherit;border-radius:10px;padding:7px 10px;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  header.top .top-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--night);border-bottom:1px solid var(--night-line);padding:10px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));gap:4px}
  header.top .top-links.open{display:flex}
  header.top .top-links .hide-m{display:block}
  header.top .top-links .btn{justify-content:center}
}

/* ---------- portada ---------- */
.hero-band{background:var(--night);color:var(--night-ink);position:relative;overflow:hidden}
.hero-band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 40%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%);pointer-events:none}
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;padding-block:64px 72px;position:relative}
.hero>*{min-width:0}
.hero .eyebrow{color:var(--night-muted)}
.hero h1{font-size:clamp(2.6rem,6.2vw,5rem);letter-spacing:-.035em;line-height:.98}
.hero h1 .strike{color:var(--night-muted);text-decoration:line-through;text-decoration-color:var(--hot);text-decoration-thickness:.09em}
.hero h1 em{font-style:normal;color:#8FA6FF}
.hero .lead{font-size:1.16rem;color:var(--night-muted);margin-block:20px 28px;max-width:31em}
.hero .lead b{color:var(--night-ink);font-weight:600}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn.ghost-dark{background:transparent;border:1.5px solid var(--night-line);color:var(--night-ink)}
.btn.ghost-dark:hover{border-color:var(--night-muted)}
.hero .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--night-muted);font-size:.9rem}
.hero .trust span{display:inline-flex;gap:6px;align-items:center}
.hero .trust svg{width:16px;height:16px;color:#4ADE80}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:40px}}

/* plano animado */
.mapcard{position:relative;border-radius:24px;border:1px solid var(--night-line);background:var(--block);box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 6px color-mix(in srgb,var(--night-2) 70%,transparent);aspect-ratio:1/1;max-width:560px;width:100%;margin-inline:auto}
.mapcard svg{display:block;width:100%;height:100%;border-radius:24px}
.mapcard .route{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s .6s cubic-bezier(.6,.1,.3,1) forwards}
.mapcard .stop{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) forwards}
.mapcard .zone{transform-box:fill-box;transform-origin:center;animation:breathe 4s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes breathe{50%{opacity:.55}}
.floater{position:absolute;background:var(--surface);color:var(--ink);border-radius:16px;box-shadow:0 24px 50px -18px rgba(0,0,0,.55);padding:12px 14px;font-size:.84rem;opacity:0;animation:rise .6s cubic-bezier(.2,.9,.3,1) forwards}
.floater b{font-weight:700}
.floater .muted{font-size:.76rem}
.f-ficha{left:-18px;bottom:16%;width:220px;animation-delay:2.4s}
.f-go{right:-10px;top:10%;background:var(--hot);color:#fff;font-weight:700;border-radius:999px;padding:8px 14px;font-size:.88rem;animation-delay:3s;transform:rotate(-3deg)}
.f-stats{right:6%;bottom:-18px;display:flex;gap:16px;animation-delay:3.4s}
.f-stats div{display:grid}
.f-stats b{font-family:var(--f-d);font-size:1.3rem;letter-spacing:-.02em}
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media (max-width:540px){.f-ficha{left:8px;width:190px}.f-go{right:8px}.f-stats{right:8px}}
@media (prefers-reduced-motion:reduce){.mapcard .route{animation:none;stroke-dashoffset:0}.mapcard .stop,.floater{animation:none;opacity:1}.mapcard .zone{animation:none}}

/* franja de público */
.forwho{border-bottom:1px solid var(--line);background:var(--surface)}
.forwho .wrap{display:flex;gap:10px 28px;align-items:center;flex-wrap:wrap;padding-block:18px;color:var(--muted);font-size:.92rem}
.forwho b{color:var(--ink);font-weight:600}
.forwho .dot{width:5px;height:5px;border-radius:50%;background:var(--line)}

/* secciones */
.sec{padding-block:88px}
.sec-h{max-width:720px}
.sec-h p{color:var(--muted);font-size:1.1rem;margin-top:14px}
.kicker{font-family:var(--f-m);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}

/* antes / después */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.versus>div{border-radius:20px;padding:28px;display:grid;gap:14px;align-content:start}
.versus .before{background:var(--raise);border:1px dashed var(--line)}
.versus .after{background:var(--ink);color:var(--bg)}
.versus h3{font-size:1.3rem}
.versus ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.versus li{display:grid;grid-template-columns:22px 1fr;gap:10px;line-height:1.45}
.versus .before li::before{content:"✕";color:var(--bad);font-weight:700}
.versus .after li::before{content:"✓";color:#4ADE80;font-weight:700}
.versus .after .muted{color:color-mix(in srgb,var(--bg) 65%,transparent)}
@media (max-width:760px){.versus{grid-template-columns:1fr}}

/* pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;counter-reset:s}
.step{border-radius:20px;background:var(--surface);border:1px solid var(--line);padding:26px;display:grid;gap:10px;align-content:start;position:relative}
.step .n{font-family:var(--f-d);font-weight:800;font-size:3rem;line-height:1;color:color-mix(in srgb,var(--accent) 22%,var(--surface));letter-spacing:-.04em}
.step p{color:var(--muted)}
.step .mini{margin-top:6px;border-radius:12px;background:var(--raise);border:1px solid var(--line);padding:12px;font-size:.84rem;display:grid;gap:8px}
.chips-mini{display:flex;gap:6px;flex-wrap:wrap}
.chips-mini span{border:1.5px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:600}
.chips-mini span.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* funciones con maqueta */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:44px}
.feature>*{min-width:0}
.feature.flip .copy{order:2}
.feature h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em}
.feature .copy p{color:var(--muted);margin-top:14px;font-size:1.05rem}
.feature ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.feature li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.feature li i{width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);display:grid;place-items:center;font-style:normal;font-size:.8rem;font-weight:700}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px}.feature.flip .copy{order:0}}

.phone{width:min(340px,100%);margin-inline:auto;border-radius:38px;background:var(--ink);padding:10px;box-shadow:0 40px 80px -36px rgba(13,20,36,.55)}
.phone .screen{border-radius:30px;background:var(--bg);overflow:hidden;min-height:520px;display:flex;flex-direction:column}
.phone .notch{width:90px;height:22px;border-radius:0 0 14px 14px;background:var(--ink);margin:0 auto 6px}
.phone .ph{padding:6px 16px 10px}
.phone .ph h4{margin:0;font-family:var(--f-d);font-size:1.15rem;letter-spacing:-.02em}
.phone .ph small{color:var(--muted)}
.prow{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font-size:.84rem;background:var(--surface)}
.prow b{font-weight:600;display:block}
.prow small{color:var(--muted);font-size:.72rem}
.prow.top{box-shadow:inset 3px 0 0 var(--hot);background:color-mix(in srgb,var(--hot) 7%,var(--surface))}
.num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff;font-family:var(--f-m)}
.pbar{display:block;height:5px;border-radius:9px;background:var(--soft);overflow:hidden;margin-top:5px}
.pbar i{display:block;height:100%;border-radius:9px}
.gof{display:inline-block;background:var(--hot);color:#fff;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:999px;margin-left:5px}
.pbtn{margin:12px 16px;border-radius:12px;padding:11px;text-align:center;font-weight:600;font-size:.86rem}
.ficha{padding:12px 16px;display:grid;gap:10px}
.ficha .box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.ficha .ringrow{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:center}
.ficha .link{background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:12px;font-size:.84rem}
.ficha .link small{opacity:.85;display:block}
.redtag{display:inline-block;font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);margin-right:4px}
.stbt{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px}
.stbt span{border-radius:10px;padding:9px 4px;text-align:center;font-size:.74rem;font-weight:600;background:var(--soft)}
.stbt .ok{background:var(--ok);color:#fff}
.kp{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px}
.kp div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px}
.kp b{font-family:var(--f-d);font-size:1.4rem;display:block;letter-spacing:-.02em}
.kp span{font-size:.72rem;color:var(--muted)}
.bars{display:flex;gap:6px;align-items:flex-end;height:110px;padding:0 16px 8px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:var(--soft);position:relative}
.bars i b{position:absolute;left:0;right:0;bottom:0;border-radius:6px 6px 2px 2px;background:var(--ok)}
.blabels{display:flex;gap:6px;padding:0 16px 14px;font-family:var(--f-m);font-size:.66rem;color:var(--muted)}
.blabels span{flex:1;text-align:center}

/* calculadora */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:0;margin-top:36px;overflow:hidden;border-radius:24px}
.calc>*{min-width:0}
.calc .in{padding:30px;display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-right:0;border-radius:24px 0 0 24px}
.calc .in label{font-weight:600;display:flex;justify-content:space-between;gap:10px}
.calc input[type=range]{width:100%;accent-color:var(--accent)}
.calc .out{padding:30px;background:var(--accent);color:var(--accent-ink);display:grid;gap:10px;align-content:center}
.calc .out .big{font-family:var(--f-d);font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);letter-spacing:-.04em;line-height:1}
.calc .out p{opacity:.9}
.calc .out small{opacity:.75}
@media (max-width:760px){.calc{grid-template-columns:1fr}.calc .in{border-right:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0}}

/* dónde comprar NFC (bloque) */
.buy{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;border-radius:24px;padding:28px;background:linear-gradient(0deg,color-mix(in srgb,var(--hot) 9%,var(--surface)),color-mix(in srgb,var(--hot) 9%,var(--surface)));border:1.5px solid color-mix(in srgb,var(--hot) 35%,var(--line))}
.buy>*{min-width:0}
.buy .ic{width:64px;height:64px;border-radius:18px;background:var(--hot);color:#fff;display:grid;place-items:center}
.buy .ic svg{width:34px;height:34px}
.buy p{color:var(--muted);margin-top:6px}
@media (max-width:760px){.buy{grid-template-columns:1fr}}

/* precios */
.plans-note{color:var(--muted);margin-top:10px}

/* faq */
.faq{display:grid;gap:10px;max-width:820px;margin-top:28px}
.faq details{padding:18px 22px}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--f-m);color:var(--accent);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted);margin-top:10px}

/* cierre */
.cta-final{background:var(--night);color:var(--night-ink);border-radius:28px;padding:56px 36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.cta-final::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;border:2px solid color-mix(in srgb,var(--glow) 50%,transparent);box-shadow:0 0 0 40px color-mix(in srgb,var(--glow) 8%,transparent),0 0 0 80px color-mix(in srgb,var(--glow) 5%,transparent)}
.cta-final p{color:var(--night-muted);margin-top:10px}
.cta-final>*{position:relative;z-index:1}
@media (max-width:760px){.cta-final{grid-template-columns:1fr;padding:40px 24px}}

footer.foot.big .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer.foot.big h5{margin:0 0 10px;font-size:.8rem;font-family:var(--f-m);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
footer.foot.big nav{display:grid;gap:8px}
footer.foot.big a{text-decoration:none}
footer.foot.big a:hover{color:var(--ink)}
@media (max-width:760px){footer.foot.big .wrap{grid-template-columns:1fr 1fr}}

/* página comprar NFC */
.page-hero{background:var(--night);color:var(--night-ink);padding-block:64px 56px}
.page-hero p{color:var(--night-muted);font-size:1.12rem;max-width:40em;margin-top:16px}
.page-hero .eyebrow{color:var(--night-muted)}
.provider{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);margin-top:-40px;background:var(--surface);box-shadow:0 40px 80px -50px rgba(13,20,36,.5)}
.provider>*{min-width:0}
.provider .l{padding:32px;display:grid;gap:14px;align-content:start}
.provider .r{padding:32px;background:var(--raise);border-left:1px solid var(--line);display:grid;gap:14px;align-content:start}
.provider ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.provider li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.provider li::before{content:"✓";color:var(--ok);font-weight:700}
.price-tag{font-family:var(--f-d);font-weight:800;font-size:2.4rem;letter-spacing:-.03em}
@media (max-width:820px){.provider{grid-template-columns:1fr}.provider .r{border-left:0;border-top:1px solid var(--line)}}
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.guide .card{padding:22px;display:grid;gap:8px;align-content:start}
.guide p{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.guide{grid-template-columns:1fr}}
.howto{counter-reset:h;display:grid;gap:12px;margin-top:24px;max-width:780px}
.howto li{list-style:none;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.howto li::before{counter-increment:h;content:counter(h);width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--f-m);font-weight:500}
.howto{padding:0}
.howto p{color:var(--muted)}
.disclaimer{font-size:.84rem;color:var(--muted);margin-top:14px}

/* login y páginas simples */
.auth{min-height:calc(100vh - 160px);display:grid;place-items:center;padding-block:40px}
.auth .card{width:100%;max-width:420px;padding:28px;display:grid;gap:14px}
.legal{max-width:760px;padding-block:48px}
.legal h1{font-size:2.4rem;margin-bottom:12px}
.legal h2{font-size:1.3rem;margin-top:28px;margin-bottom:8px}
.legal p,.legal li{color:var(--muted);margin-bottom:8px}
.legal .todo{background:color-mix(in srgb,var(--warm) 18%,transparent);padding:2px 6px;border-radius:5px;color:var(--ink)}