:root {
  --bg:#09090f; --bg2:#0f0f1a; --bg3:#141421; --sf:#1a1a2e; --sf2:#22223a;
  --b:var(--n-filo,rgba(255,255,255,.075)); --b2:rgba(255,255,255,.11); --b3:rgba(255,255,255,.18);
  --red:#ff3355; --red2:#ff6680; --red3:rgba(255,51,85,.1);
  --gold:var(--n-oro,#f5c842); --gold-hi:var(--n-oro-claro,#ffe9a8); --gold-lo:var(--n-oro-hondo,#c9870f);
  --coin:var(--n-oro,#f5c842); --coin2:#ffe3a0; --coin3:rgba(245,200,66,.12);
  --live:#00e896; --live3:rgba(0,232,150,.08);
  --purple:var(--n-viol,#9d6bff); --purple-hi:var(--n-viol-claro,#c9acff); --purple-lo:#6a34c8;
  --acc:var(--n-viol,#9d6bff); --acc3:rgba(157,107,255,.12);
  --tx:var(--n-tinta,#f2f2f8); --tx2:var(--n-tinta-med,#b6b6d0); --tx3:var(--n-tinta-baja,#8484a1);
  --fd:var(--font-display,'Geist','Plus Jakarta Sans','Inter',system-ui,sans-serif); --fb:var(--font-ui,'Geist','Inter',system-ui,sans-serif);
  --r:12px; --rs:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);font-weight:400;letter-spacing:-.006em;overflow-x:hidden;padding-top:36px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Jerarquía tipográfica Fase 74: Geist unifica títulos y cuerpo con distintos
   pesos. Reduce el salto visual entre superficies y conserva alta legibilidad. */
h1,h2,h3,h4,h5,h6{font-family:var(--fd);letter-spacing:-.02em;line-height:1.15}
h1{font-weight:800}h2{font-weight:800}h3{font-weight:700}h4,h5,h6{font-weight:700}
strong,b{font-weight:700}
button,input,textarea,select{font-family:var(--fb)}/* TICKER */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ===== Ticker Destacado · dorado con presencia ===== */
.feat-badge{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 72%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 8px rgba(245,200,66,.35))}
.feat-row{display:inline-flex;align-items:center;gap:7px;padding:0 22px;
  border-right:1px solid rgba(245,200,66,.14);font-size:11px;letter-spacing:.4px;white-space:nowrap}
.feat-row .ic{filter:drop-shadow(0 0 6px rgba(245,200,66,.45))}
.feat-txt{font-weight:500;
  background:linear-gradient(100deg,#cf9a1c 0%,var(--gold) 30%,#fff3c4 47%,var(--gold) 64%,#cf9a1c 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:featShine 5.5s linear infinite}
.feat-idle{font-size:11px;padding:0 24px;letter-spacing:.5px;font-weight:400;color:rgba(245,200,66,.5)}
@keyframes featShine{from{background-position:200% center}to{background-position:-200% center}}
.ti{display:inline-flex;align-items:center;gap:7px;padding:0 18px;border-right:1px solid var(--b)}

/* VIEWS */
.view{display:none}
.view.on{display:block}

/* ===== LANDING ===== */
/* Navegación legacy retirada: no aplicar estilos globales a <nav>.
   Cada superficie (cabecera, categorías, pie, menú) define su propio contrato. */
.logo{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-size:20px;font-weight:900;cursor:pointer}
.logo em{color:var(--red);font-style:normal}

/* HERO */
.hero{max-width:1160px;margin:0 auto;padding:80px 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero-title .hl{color:var(--red)}
.trust{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx3)}

/* SECTION */
.section{max-width:1160px;margin:0 auto;padding:0 40px 80px}
.sec-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:8px}
.sec-title{font-family:var(--fd);font-size:clamp(26px,3.5vw,40px);font-weight:900;letter-spacing:-.5px;line-height:1.1;margin-bottom:8px}

/* HOW IT WORKS */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.how-side-title.r{color:var(--red)}.how-side-title.g{color:var(--live)}
.how-num.r{background:var(--red3);border:1px solid rgba(255,51,85,.2);color:var(--red)}
.how-num.g{background:var(--live3);border:1px solid rgba(0,232,150,.2);color:var(--live)}

/* FAQ */
.faq-wrap{max-width:860px;margin:0 auto;text-align:center}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin-top:32px}

/* CTA */
.cta-sec{background:var(--bg2);border-top:1px solid var(--b);padding:64px 40px;text-align:center}

/* FOOTER */
/* Pie legacy retirado: no aplicar layout global a <footer>. */
.cd-footer{display:block;padding:0;border-top:1px solid var(--b);background:var(--bg2);margin-top:30px}
.cdf-inner{max-width:1080px;margin:0 auto;padding:30px 24px 16px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.cdf-brand{max-width:340px}
.cdf-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px}
.cdf-mark{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,var(--coin),var(--coin2));display:flex;align-items:center;justify-content:center;color:#3a2606;font-weight:800}
.cdf-gold{color:var(--coin2)}
.cdf-tag{color:var(--tx3);font-size:12.5px;margin:9px 0 13px;line-height:1.5}
.cdf-social{display:flex;gap:9px}
.cdf-soc{width:34px;height:34px;border-radius:10px;border:1px solid var(--b2);background:var(--sf);display:flex;align-items:center;justify-content:center;color:var(--tx3);cursor:default;transition:.15s;position:relative}
.cdf-soc svg{width:17px;height:17px}
.cdf-soc:hover{color:var(--coin2);border-color:var(--coin3);transform:translateY(-2px)}
.cdf-soc::after{content:'Pr\00f3ximamente';position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#000;color:var(--coin2);font-size:10px;padding:3px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;border:1px solid var(--coin3)}
.cdf-soc:hover::after{opacity:1}
.cdf-links{display:flex;flex-direction:column;gap:7px}
.cdf-links-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--coin2);font-weight:700;margin-bottom:2px}
.cdf-links a{color:var(--tx2);text-decoration:none;font-size:13.5px;transition:.13s}
.cdf-links a:hover{color:var(--coin2)}
.cdf-bottom{max-width:1080px;margin:0 auto;padding:13px 24px 22px;border-top:1px solid var(--b);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:11.5px;color:var(--tx3)}
@media(max-width:680px){.cdf-inner{flex-direction:column;gap:20px}}

/* ===== APP ===== */
.app-wrap{display:flex;height:calc(100vh - 36px);height:calc(100dvh - 36px)}
/* CABECERA GLOBAL + BARRA DESTACADOS: ambas son fijas y deben reservar su hueco real. */
body.cd-has-head .app-wrap{height:calc(100vh - 96px);height:calc(100dvh - 96px)}

/* UNA SOLA BARRA EN LA APP (fix 2026-07-27) ────────────────────────────────
   En escritorio salían DOS barras pegadas en el borde derecho: la de la
   ventana y la de .main-area. La del documento no debería existir nunca —
   el alto está calculado para que cuadre clavado: 36px de #featured-bar
   (fijo) + calc(100vh - 36px) de .app-wrap = 100vh exacto. El problema es que
   ese "exacto" no lo es: con zoom del navegador o escalado de Windows
   distinto de 100%, 100vh cae en un valor fraccionario y el redondeo deja
   1px de sobra → la ventana cree que hay que desplazar y dibuja su barra
   entera al lado de la de .main-area.
   Se bloquea el desplazamiento del documento: el único contenedor que
   scrollea es .main-area, que es el que tiene el contenido. Sólo a partir de
   821px, porque en móvil cd-mobile.css hace .app-wrap{height:auto} a
   propósito y ahí sí debe scrollear el documento. */
@media (min-width:821px){
  html,body{height:100%;overflow-y:hidden}
}

/* PÁGINAS-IFRAME: UNA SOLA BARRA (fix 2026-07-27) ───────────────────────────
   Sonidos y Avatar 2D no son páginas normales: son un <iframe> a otro
   documento. Con el .page llevando su padding de 24/28 px y el <iframe> con
   alto fijo, salían DOS barras haciendo lo mismo — la del iframe (pegada al
   borde del panel) y la de .main-area (pegada al borde de la ventana). Dos
   ruedas para el mismo contenido.
   Aquí la página-iframe pasa a llenar EXACTAMENTE el hueco que queda bajo la
   barra superior: .main-area se vuelve una columna flex, la página es el
   elemento elástico y el iframe la llena entera. Así solo scrollea el iframe,
   y su barra queda pegada al borde derecho de la ventana — la que se quiso
   conservar. El pie se oculta en estas dos páginas: no había forma de llegar
   a él sin devolver la segunda barra.
   Se limita a ≥821px porque en móvil cd-mobile.css hace .app-wrap{height:auto}
   a propósito y allí el documento sí debe scrollear. */
@media (min-width:821px){
  .main-area:has(> .page.pg-full.on){display:flex;flex-direction:column;overflow:hidden}
  .main-area:has(> .page.pg-full.on) .cd-footer{display:none}
  .page.pg-full.on{flex:1 1 auto;min-height:0;padding:0;display:flex}
  /* El <iframe> trae height y min-height EN LÍNEA (calc(100vh-74px) y 560px).
     Un estilo en línea gana a la hoja, así que ambos necesitan !important:
     sin tocar min-height, en pantallas cortas los 560px forzaban desborde
     y devolvían la segunda barra. */
  .page.pg-full.on > iframe{flex:1 1 auto;width:100%;height:auto !important;min-height:0 !important}
}

/* SIDEBAR */
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--b);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}/* MAIN */
.main-area{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.page{display:none;padding:24px 28px;min-height:100%}
.page.on{display:block}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.topbar-l h1{font-family:var(--fd);font-size:21px;font-weight:900;letter-spacing:-.3px}
.topbar-l p{font-size:12px;color:var(--tx3);margin-top:2px}
.topbar-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.live-badge{display:flex;align-items:center;gap:5px;background:var(--live3);border:1px solid rgba(0,232,150,.2);border-radius:var(--r-lg,20px);padding:5px 11px;font-size:11px;font-weight:600;color:var(--live)}
.live-dot{width:5px;height:5px;background:var(--live);border-radius:50%;animation:blink 1.4s infinite}
.up{color:var(--live);font-weight:600}

/* CARDS */
.card{background:radial-gradient(130% 100% at 0% 0%,rgba(124,92,255,.055),transparent 52%),radial-gradient(120% 90% at 100% 0%,rgba(245,200,66,.04),transparent 46%),linear-gradient(165deg,#15141f 0%,#0e0d16 100%);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.28);transition:border-color .22s ease,box-shadow .22s ease}
.card:hover{border-color:rgba(245,200,66,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 36px rgba(124,92,255,.12),0 6px 18px rgba(0,0,0,.3)}
.card-h{padding:13px 17px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.card-title{font-family:var(--fd);font-size:13px;font-weight:700}
.card-b{padding:15px 17px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g2 .card{margin-bottom:0}

/* LIVE ROWS */
.lr{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--b)}
.lr:last-child{border-bottom:none}
.lr-plat.tt{background:#000;color:var(--tx-hi)}.lr-plat.ki{background:#53ff53;color:#000}
.bs-g{background:var(--sf2);color:var(--tx2);border:1px solid var(--b2)}

/* PILLS */
.pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--r-lg,20px);font-size:10px;font-weight:500}

/* INPUTS */
.inp-g{margin-bottom:13px}
.inp-lbl{font-size:10px;color:var(--tx3);display:block;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.inp{width:100%;background:var(--sf);border:1px solid var(--b2);border-radius:var(--rs);padding:9px 12px;color:var(--tx);font-family:var(--fb);font-size:13px;outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--n-oro,#f5c842);box-shadow:0 0 0 3px rgba(245,200,66,.10)}
.inp::placeholder{color:var(--tx3)}
select.inp option{background:var(--sf)}


/* RANGE INPUTS — usados por controles vigentes */
.slider-wrap{margin-bottom:16px}
input[type=range]{width:100%;-webkit-appearance:none;height:4px;border-radius:4px;outline:none;cursor:pointer;background:var(--sf2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--red);cursor:pointer;border:2px solid var(--bg3,var(--bg3));box-shadow:0 0 0 2px rgba(255,51,85,.3)}

/* Modal Lives: animaciones */
@keyframes modalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}
.modal-lives-panel{animation:modalIn .22s ease}
.modal-lives-panel.closing{animation:modalOut .18s ease forwards}
/* TOAST — panel flotante */
#cd-toast-wrap{position:fixed;bottom:20px;right:16px;z-index:99999;display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-end;pointer-events:none;max-width:88vw}
html.is-beta #cd-toast-wrap{bottom:76px}
.cd-toast{display:flex;align-items:center;gap:11px;min-width:214px;max-width:300px;padding:11px 16px 13px 17px;border-radius:var(--r);background:linear-gradient(180deg,rgba(24,23,34,.97),rgba(14,13,22,.97));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--b2);box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);pointer-events:auto;position:relative;overflow:hidden;animation:cdToastIn .42s cubic-bezier(.2,.8,.2,1)}
/* Rediseño 11-jul: SIN iconos. El tipo lo dicen el borde de acento (con brillo del
   color), el KICKER y la barra de vida. --tc = color del tipo, una sola fuente de verdad. */
.cd-toast{--tc:var(--acc)}
.cd-toast.ok{--tc:#3ddc97}
.cd-toast.warn{--tc:#ffb020}
.cd-toast.err{--tc:var(--red)}
.cd-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc);box-shadow:0 0 14px var(--tc)}
.cd-toast-k{font-family:var(--fd);font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--tc);margin-bottom:2px}
.cd-toast-life{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--tc);opacity:.55;transform-origin:left;animation:cdToastLife 3.4s linear forwards}
@keyframes cdToastLife{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.cd-toast-life{animation:none;opacity:.25}}
/* .cd-toast-ic retirado (11-jul): los toasts ya no llevan caja de icono */
.cd-toast-bd{min-width:0;flex:1}
.cd-toast-t{font-family:var(--fd);font-size:13.5px;font-weight:800;color:var(--tx);line-height:1.18;word-break:break-word}
.cd-toast-m{font-size:11.5px;color:var(--tx2);line-height:1.3;margin-top:2px;word-break:break-word}
.cd-toast.out{animation:cdToastOut .32s ease forwards}
@keyframes cdToastIn{from{transform:translateX(44px) scale(.95);opacity:0}to{transform:none;opacity:1}}
@keyframes cdToastOut{to{transform:translateX(44px) scale(.95);opacity:0}}
/* Spinner circular (aro cargando) */
.cd-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.22);border-top-color:currentColor;border-radius:50%;animation:cdSpin .7s linear infinite;vertical-align:-2px}
@keyframes cdSpin{to{transform:rotate(360deg)}}
.cd-loading-ring{background:transparent!important;border-color:transparent!important;box-shadow:none!important;min-width:0!important;padding:0 6px!important}

/* SETUP MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--b2);border-radius:16px;padding:26px;max-width:400px;width:100%}
.modal h2{font-family:var(--fd);font-size:19px;font-weight:800;margin-bottom:4px}
.modal p{font-size:12px;color:var(--tx3);margin-bottom:18px}

/* RESPONSIVE */
@media(max-width:900px){
  .g2{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;padding:48px 20px;gap:32px}
  .how-grid{grid-template-columns:1fr}
      .faq-grid{grid-template-columns:1fr}
  .sidebar{width:58px}}
@media(max-width:600px){
  .section,.hero{padding-left:18px;padding-right:18px}
  .page{padding:14px}
  }

/* ═══ FASE BETA — insignia "Próximamente" (cd-beta.js) ═══ */
.beta-badge{position:absolute;top:8px;right:8px;z-index:5;font-size:9px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;color:#1a1206;
  background:linear-gradient(135deg,#ffe9b0,var(--n-oro,#f5c842));padding:3px 9px;border-radius:var(--r-lg,20px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap}
.beta-locked{position:relative}
.beta-locked.card-soft{filter:saturate(.9)}

/* Banda global y .beta-aviso: fuente única en cd-superficies.css (auditoría ago 2026) */