/* Nexus · /prueba — hoja de estilos compartida (portada + páginas legales).
   Fuente única de tokens: cambiar un color aquí lo cambia en todas las páginas. */
@import url("fuentes.css");

/* ---------- Tokens fijos ---------- */
:root{
  --black:#000;--carbon:#111;--obsidian:#1d1d1f;--graphite:#333336;--smoke:#424245;
  --frost:#f5f5f7;--paper:#fff;--platinum:#86868b;--mist:#d2d2d7;
  --blue:#0071e3;--orange:#f56900;--iris:#8668ff;--teal:#00a1b3;
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter Tight",system-ui,sans-serif;
  --text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter Tight",system-ui,sans-serif;
  --r-card:28px;--r-btn:36px;--r-pill:980px;--r-link:10px;
  --max:1440px;--gut:clamp(16px,4vw,48px);--gap:clamp(88px,10vw,120px);
}

/* ---------- Tokens por tema: OSCURO ---------- */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg-stage:#000;      /* hero y escenarios */
  --bg-alt:#1d1d1f;     /* sección alterna */
  --bg-band:#111;       /* bandas de detalle */
  --bg-card:#1d1d1f;    /* tarjetas sobre escenario */
  --bg-card-alt:#000;   /* tarjetas sobre sección alterna */
  --bg-tile:#1d1d1f;    /* recuadros de las bandas */
  --bg-row:#000;        /* filas dentro de recuadros */
  --fg:#f5f5f7;--fg-2:#a1a1a6;--fg-3:#86868b;
  --line:#333336;--line-2:#424245;
  --link:#2997ff;--ok:#a3e635;
  --nav-bg:rgba(0,0,0,.72);--nav-hover:#1d1d1f;
  --promo-bg:#1d1d1f;--foot-bg:#111;
  --glow:rgba(41,151,255,.20);
}
/* ---------- CLARO ---------- */
[data-theme="light"]{
  color-scheme:light;
  --bg-stage:#fff;--bg-alt:#f5f5f7;--bg-band:#fff;
  --bg-card:#f5f5f7;--bg-card-alt:#fff;--bg-tile:#f5f5f7;--bg-row:#fff;
  --fg:#1d1d1f;--fg-2:#6e6e73;--fg-3:#86868b;
  --line:#d2d2d7;--line-2:#c7c7cc;
  --link:#0066cc;--ok:#3d7a00;
  --nav-bg:rgba(255,255,255,.76);--nav-hover:#f5f5f7;
  --promo-bg:#f5f5f7;--foot-bg:#f5f5f7;
  --glow:rgba(0,113,227,.14);
}
/* Sin elección guardada: seguir al sistema */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme:light;
    --bg-stage:#fff;--bg-alt:#f5f5f7;--bg-band:#fff;
    --bg-card:#f5f5f7;--bg-card-alt:#fff;--bg-tile:#f5f5f7;--bg-row:#fff;
    --fg:#1d1d1f;--fg-2:#6e6e73;--fg-3:#86868b;
    --line:#d2d2d7;--line-2:#c7c7cc;
    --link:#0066cc;--ok:#3d7a00;
    --nav-bg:rgba(255,255,255,.76);--nav-hover:#f5f5f7;
    --promo-bg:#f5f5f7;--foot-bg:#f5f5f7;
    --glow:rgba(0,113,227,.14);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-stage);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s,color .35s}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:var(--r-link)}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg-stage);padding:8px 16px;border-radius:var(--r-pill);z-index:99}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Promo + navegación ---------- */
.promo{background:var(--promo-bg);font-size:12px;text-align:center;padding:8px 16px;letter-spacing:-.01em;color:var(--fg)}
.promo a{color:var(--link)}
.nav{position:sticky;top:10px;z-index:50;margin:10px auto 0;max-width:min(980px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 8px 8px 20px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand svg{width:28px;height:28px}
.nav ul{display:flex;gap:4px;list-style:none;font-size:12px}
.nav ul a{display:block;padding:6px 10px;border-radius:var(--r-pill);opacity:.82;transition:opacity .2s,background .2s}
.nav ul a:hover{opacity:1;background:var(--nav-hover)}
.nav .act{display:flex;gap:4px;align-items:center}
@media(max-width:760px){.nav ul{display:none}}

/* Botón de tema */
.theme{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;transition:background .2s,transform .3s}
.theme:hover{background:var(--nav-hover)}
.theme:active{transform:rotate(-30deg) scale(.92)}
.theme svg{width:16px;height:16px}
.theme .sun{display:none}
[data-theme="light"] .theme .sun{display:block}
[data-theme="light"] .theme .moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .theme .sun{display:block}
  :root:not([data-theme]) .theme .moon{display:none}
}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--text);letter-spacing:-.016em;padding:10px 20px;border-radius:var(--r-btn);transition:background .2s,transform .2s;white-space:nowrap}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#0077ed}
.btn-blue:active{transform:scale(.97)}
.btn-ghost{color:var(--fg);font-weight:400}
a.btn-ghost:hover{text-decoration:underline}
.btn-sm{font-size:12px;padding:7px 14px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100svh - 40px);display:grid;align-items:end;padding:40px 0 72px;overflow:hidden}
.hero .wrap{width:100%;display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:24px}
.eyebrow-hero{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;margin-bottom:10px}
.eyebrow-hero svg{width:24px;height:24px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(48px,7.4vw,80px);line-height:1.05;letter-spacing:-.015em;max-width:11ch}
.lede{color:var(--fg-3);font-size:clamp(17px,1.6vw,21px);max-width:34ch;margin:18px 0 28px}
.cta-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.note{font-size:12px;color:var(--fg-3);margin-top:14px}

/* Producto: el teléfono (siempre oscuro, es un objeto) */
.stage{position:relative;display:grid;place-items:center;height:min(76svh,720px)}
.stage::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(10px);animation:breathe 6s ease-in-out infinite}
.phone{position:relative;height:min(68svh,640px);width:auto;aspect-ratio:9/19.3;border-radius:54px;padding:12px;
  background:linear-gradient(145deg,#8a8a8f 0%,#3a3a3d 18%,#1b1b1d 50%,#4a4a4e 82%,#9a9a9f 100%);
  transform:rotate(-8deg) translateY(30px);opacity:0;animation:rise 1.4s cubic-bezier(.2,.8,.2,1) .15s forwards}
.phone::after{content:"";position:absolute;inset:3px;border-radius:51px;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.screen{position:relative;height:100%;border-radius:43px;background:#000;color:#f5f5f7;overflow:hidden;padding:54px 22px 22px;display:flex;flex-direction:column;gap:14px}
.island{position:absolute;top:14px;left:50%;translate:-50% 0;width:34%;height:28px;border-radius:var(--r-pill);background:#000;box-shadow:0 0 0 1px #111}
.sb{display:flex;justify-content:space-between;font:600 13px/1 var(--text);position:absolute;top:22px;left:30px;right:30px}
.scr-h{font:600 12px/1.2 var(--text);color:#86868b;text-transform:uppercase;letter-spacing:.04em}
.scr-t{font:700 26px/1.1 var(--display);letter-spacing:-.02em}
.ring{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;margin:4px 0}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .trk{stroke:#1d1d1f}
.ring .val{stroke:#a3e635;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:fill 2.2s cubic-bezier(.3,.7,.2,1) 1.2s forwards}
.ring .in{text-align:center}
.ring .big{font:700 44px/1 var(--display);color:#a3e635;letter-spacing:-.02em}
.ring .lbl{font-size:13px;margin-top:6px}
.chips{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.chip{display:flex;justify-content:space-between;align-items:center;background:#111;border-radius:14px;padding:10px 12px;font-size:12px}
.chip b{font-weight:600}
.chip span{color:#86868b}
.dot{width:8px;height:8px;border-radius:50%;background:#a3e635;display:inline-block;margin-right:6px;animation:blink 1.6s ease-in-out infinite}
@keyframes rise{to{opacity:1;transform:rotate(-8deg) translateY(0)}}
@keyframes fill{to{stroke-dashoffset:85}}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
@keyframes blink{50%{opacity:.35}}
@media(max-width:900px){
  .hero{min-height:auto;padding-top:24px}
  .hero .wrap{grid-template-columns:1fr}
  .stage{order:-1;height:auto;padding:24px 0 8px}
  .phone{height:auto;width:min(270px,64vw)}
}

/* ---------- Secciones ---------- */
.sec{padding:var(--gap) 0;transition:background .35s}
.s-stage{background:var(--bg-stage)}
.s-alt{background:var(--bg-alt)}
.s-band{background:var(--bg-band)}
.h-display{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.2vw,56px);line-height:1.07;letter-spacing:-.015em;max-width:18ch}
.h-mid{font-size:clamp(32px,4.4vw,48px)}
.h-lg{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,32px);line-height:1.13;letter-spacing:-.01em}
.eyebrow{font-weight:600;font-size:17px;letter-spacing:-.011em;margin-bottom:10px;display:block}
.e-orange{color:var(--orange)}.e-iris{color:var(--iris)}.e-teal{color:var(--teal)}
.muted{color:var(--fg-3)}
.body-l{font-size:17px;max-width:46ch;color:var(--fg-2);margin-top:16px}

/* Tarjetas grandes (una por fila) */
.stack{display:flex;flex-direction:column;gap:24px;margin-top:56px}
.card{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--bg-card);min-height:clamp(420px,52vw,640px);display:grid;transition:background .35s}
.s-alt .card{background:var(--bg-card-alt)}
.card .ov{position:relative;padding:28px;max-width:440px;align-self:start}
.card .ov p{color:var(--fg-2);font-size:17px;margin-top:10px}
/* Tarjeta con foto: siempre texto claro sobre imagen oscurecida */
.card-photo{background:#111;color:#f5f5f7}
.card-photo .media{position:absolute;inset:0}
.card-photo .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.card-photo.in .media img{transform:scale(1)}
.card-photo .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,0) 65%)}
.card-photo .ov p{color:#f5f5f7}
.card-split{grid-template-columns:1fr 1fr;align-items:center}
.card-split .ov{align-self:center;padding:clamp(28px,4vw,56px)}
@media(max-width:820px){.card-split{grid-template-columns:1fr}}

/* Resguardo con QR (es papel: siempre blanco) */
.qr-demo{display:grid;place-items:center;padding:28px}
.ticket{width:min(300px,80%);background:#fff;color:#1d1d1f;border-radius:18px;padding:22px;transform:rotate(3deg);box-shadow:0 0 0 1px var(--line)}
.ticket .tt{font:600 12px/1 var(--text);color:#86868b;text-transform:uppercase;letter-spacing:.05em}
.ticket .tn{font:700 24px/1.1 var(--display);margin:6px 0 14px}
.qr{width:100%;aspect-ratio:1;display:block}
.ticket .ts{display:flex;justify-content:space-between;font-size:12px;margin-top:14px}
.ticket .ok{color:#0066cc}

/* Ganancia */
.money{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px}
.row span{color:var(--fg-2)}
.row b{font:600 24px/1 var(--display)}
.row.total{border:0}
.row.total b{font-size:clamp(44px,6vw,56px);color:var(--ok);letter-spacing:-.02em}

/* Estados */
.states{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;counter-reset:s}
.states li{counter-increment:s;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px 10px 10px;font-size:14px;font-weight:600;opacity:.35;transition:opacity .5s,border-color .5s,background .5s}
.states li::before{content:counter(s);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--line);font-size:12px}
.states li.on{opacity:1;border-color:var(--line-2)}
.states li.now{background:var(--bg-card-alt);border-color:var(--ok)}
.states li.now::before{background:var(--ok);color:var(--bg-stage)}

/* Bandas imagen + texto */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.duo + .duo{margin-top:var(--gap)}
.duo.rev .txt{order:2}
.vis{border-radius:var(--r-card);overflow:hidden;background:var(--bg-tile);aspect-ratio:4/3;display:grid;place-items:center;padding:28px;transition:background .35s}
@media(max-width:820px){.duo{grid-template-columns:1fr}.duo.rev .txt{order:0}}
.feat{display:flex;gap:12px;align-items:center;margin-top:24px;font-weight:600}
.feat i{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.feat i svg{width:14px;height:14px}

/* Mini interfaces */
.inv,.roles{width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px}
.inv-r{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;background:var(--bg-row);border-radius:14px;padding:14px 16px;font-size:14px}
.inv-r small{color:var(--fg-3);font-size:12px;display:block}
.bar{width:64px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--fg)}
.bar.low i{background:var(--orange)}
.low-t{font-size:12px;color:var(--orange);font-weight:600}
.role{display:flex;justify-content:space-between;align-items:center;background:var(--bg-row);border-radius:14px;padding:14px 16px;font-size:14px}
.role b{font-weight:600}
.perm{display:flex;gap:6px}
.perm span{font-size:12px;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--fg-3)}
.perm span.y{background:var(--fg);border-color:var(--fg);color:var(--bg-stage)}
.ticket .inv-r{background:none;padding:10px 0}

/* Precio */
.price{text-align:center}
.price .h-display{margin:0 auto}
.amount{font:700 clamp(80px,13vw,160px)/1 var(--display);letter-spacing:-.03em;margin:28px 0 6px}
.amount small{font-size:.22em;font-weight:600;color:var(--fg-3);letter-spacing:-.01em}
.incl{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin:28px auto 36px;color:var(--fg-2);font-size:14px;max-width:720px}
.incl li::before{content:"✓ ";color:var(--ok)}

/* Próximamente */
.soon{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.glyph{width:clamp(96px,14vw,160px);aspect-ratio:1;border-radius:var(--r-card);background:var(--bg-card-alt);display:grid;place-items:center;border:1px solid var(--line)}
.glyph svg{width:44%;height:44%}
.tag{display:inline-block;font-size:12px;font-weight:600;color:var(--iris);border:1px solid var(--iris);border-radius:var(--r-pill);padding:4px 12px;margin-bottom:16px}
@media(max-width:640px){.soon{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
footer{background:var(--foot-bg);color:var(--fg-3);font-size:12px;padding:28px 0 40px;transition:background .35s}
footer .top{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px;line-height:1.6}
footer .bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
footer a{color:var(--fg)}
footer a:hover{text-decoration:underline}
footer nav{display:flex;gap:6px 18px;flex-wrap:wrap}
footer .legal-links{display:flex;gap:6px 18px;flex-wrap:wrap;margin-bottom:12px}

/* ---------- Páginas legales ---------- */
.doc{padding:72px 0 var(--gap)}
.doc .wrap{max-width:820px}
.doc .crumb{font-size:12px;color:var(--fg-3);margin-bottom:18px}
.doc .crumb a{color:var(--link)}
.doc h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,56px);line-height:1.07;letter-spacing:-.015em}
.doc .meta{color:var(--fg-3);font-size:14px;margin:12px 0 40px}
.doc .toc{background:var(--bg-alt);border-radius:var(--r-card);padding:24px 28px;margin-bottom:48px;font-size:14px}
.doc .toc b{display:block;margin-bottom:8px}
.doc .toc ol{list-style:none;padding:0;columns:2;column-gap:32px}
.doc .toc li{margin:3px 0;break-inside:avoid}
.doc .toc a{color:var(--link)}
@media(max-width:640px){.doc .toc ol{columns:1}}
.doc .content h4{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.17;margin:48px 0 12px;scroll-margin-top:96px}
.doc .content h5{font-size:17px;font-weight:600;margin:24px 0 8px}
.doc .content p,.doc .content li{color:var(--fg-2);font-size:17px}
.doc .content p{margin:10px 0}
.doc .content ul,.doc .content ol{padding-left:1.3em;margin:10px 0}
.doc .content li{margin:4px 0}
.doc .content strong{color:var(--fg);font-weight:600}
.doc .content a{color:var(--link)}
.doc .content em{font-style:normal;color:var(--orange)}
.doc .content .tbl{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:14px}
.doc .content table{border-collapse:collapse;width:100%;font-size:14px}
.doc .content th,.doc .content td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg-2)}
.doc .content th{color:var(--fg);font-weight:600;background:var(--bg-alt)}
.doc .content tr:last-child td{border-bottom:0}
.doc .others{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}
.doc .others a{border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;font-size:14px}
.doc .others a:hover{background:var(--bg-alt)}
.doc .others a[aria-current]{background:var(--fg);color:var(--bg-stage);border-color:var(--fg)}

/* ---------- Revelado por scroll ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}
.no-js .rv{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .phone{opacity:1;transform:rotate(-8deg)}
  .ring .val{stroke-dashoffset:85}
  .rv{opacity:1;transform:none}
  .card-photo .media img{transform:none}
}

/* 2026-10-21 · Botón de Google Play y sección de la app */
.btn-play{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid #444;border-radius:12px;padding:8px 16px;line-height:1.1;text-align:left}
.btn-play span{display:flex;flex-direction:column;font-weight:600;font-size:16px}
.btn-play small{font-size:10px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.btn-play:hover{background:#1a1a1a;text-decoration:none}
.app-dl{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.app-qr img{width:100%;max-width:260px;height:auto;display:block;margin:0 auto;border-radius:24px}
@media (max-width:760px){.app-dl{grid-template-columns:1fr;text-align:center}.app-dl .cta-row{justify-content:center}}