/* ══════════════════════════════════════════════════════════
   NOVA · rediseño 2026 — escala de grises pura, alto contraste.
   Todo scopeado bajo .nx para ganarle por especificidad al CSS
   viejo de marketing sin tocar styles.css (que sigue vistiendo
   los modales de login/pago/panel). Punch por tipografía +
   contraste + inversión negro/blanco, NO por color.
   ══════════════════════════════════════════════════════════ */
:root{
  --nx-black:#060607;
  --nx-panel:#0c0c0e;
  --nx-white:#ffffff;
  --nx-text:#c7c7cc;
  --nx-muted:#7a7a80;
  --nx-faint:#4a4a4f;
  --nx-line:rgba(255,255,255,.12);
  --nx-line-soft:rgba(255,255,255,.07);
  --nx-disp:'Archivo','Segoe UI',sans-serif;
  --nx-mono:'JetBrains Mono',monospace;
}
body{ background:var(--nx-black); color:var(--nx-text); }

.nx{ position:relative; }
/* El glifo se instancia con <use href="#bars">: el fill se hereda al contenido
   referenciado, así que va en el <svg> y no en el rect (que vive en shadow).
   flex:none es obligatorio — el <svg> no tiene ancho intrínseco, así que como
   ítem flex (nav, listas) su min-width resuelve a 0 y se encoge hasta desaparecer. */
.nx .bars{ display:inline-block; vertical-align:middle; fill:currentColor; flex:none; }
.nx .bars rect{ fill:currentColor; }

/* reveal (el JS agrega .in) */
.nx .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.nx .reveal.in{ opacity:1; transform:none; }

/* barra de progreso, fina y blanca */
.nx .progress{ position:fixed; top:0; left:0; height:2px; width:0; background:#fff; z-index:60; box-shadow:none; }

/* ── Nav: isla flotante ─────────────────────────────────── */
.nx .nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:clamp(12px,1.8vw,26px);
  padding:9px 10px 9px 18px;
  background:rgba(12,12,14,.72);
  border:1px solid var(--nx-line);
  border-radius:999px;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  max-width:calc(100vw - 22px);
}
.nx .nav-brand{ display:flex; align-items:center; gap:9px; color:#fff; }
.nx .nav-brand .bars{ width:18px; height:18px; }
.nx .nav-brand b{ font-family:var(--nx-disp); font-weight:800; font-size:15px; letter-spacing:.2em; }
.nx .tb-links{ position:relative; display:flex; gap:20px; align-items:center; }
.nx .tb-links a{ font-size:13px; color:var(--nx-muted); font-weight:500; padding:2px 1px; transition:color .2s; }
.nx .tb-links a:hover, .nx .tb-links a.spy-on{ color:#fff; }
.nx .tb-ink{ position:absolute; left:0; bottom:-4px; height:2px; width:0; background:#fff; border-radius:2px; opacity:0; transform:translateX(var(--ink-x,0)); transition:transform .5s cubic-bezier(.16,1,.3,1), width .5s cubic-bezier(.16,1,.3,1), opacity .35s ease; pointer-events:none; }
.nx .tb-ink.on{ opacity:1; }
.nx .tb-clock{ font-family:var(--nx-mono); font-size:11px; letter-spacing:.06em; color:var(--nx-faint); }
.nx .tb-cuenta{
  display:flex; align-items:center; gap:7px; padding:7px 13px;
  font-family:var(--nx-mono); font-size:12px; font-weight:500; letter-spacing:.03em;
  color:var(--nx-muted); background:rgba(255,255,255,.05);
  border:1px solid var(--nx-line); border-radius:999px; cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.nx .tb-cuenta:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
.nx .tb-cuenta.on{ color:#fff; border-color:rgba(255,255,255,.3); }
.nx .tbc-punto{ width:6px; height:6px; border-radius:50%; background:var(--nx-muted); }
.nx .tb-cuenta.on .tbc-punto{ background:#fff; }
.nx .tbc-txt{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx .tb-buy{
  font-family:var(--nx-mono); font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:#000; background:#fff; padding:9px 16px; border-radius:999px; white-space:nowrap;
  transition:transform .2s,opacity .2s;
}
.nx .tb-buy:hover{ transform:translateY(-1px); opacity:.9; }
@media(max-width:820px){ .nx .tb-links, .nx .tb-clock{ display:none; } }

/* ── Hero ───────────────────────────────────────────────── */
.nx .hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:150px var(--pad,clamp(20px,6vw,90px)) 90px; gap:32px; position:relative;
}
.nx .eyebrow{ font-family:var(--nx-mono); font-size:12px; letter-spacing:.32em; color:var(--nx-muted); display:flex; align-items:center; gap:12px; }
.nx .eyebrow .pulse{ width:7px; height:7px; border-radius:50%; background:#fff; animation:nxblink 1.5s ease-in-out infinite; }
@keyframes nxblink{ 0%,100%{opacity:1} 50%{opacity:.2} }
/* Ojo con el tamaño: la landing carga Archivo EXPANDED (wdth@125), bastante más
   ancha que la Archivo normal del mockup. Con 12vw «VOS HABLÁS.» se parte en dos
   renglones y el título se come el hero entero; 9.6vw lo deja en las dos líneas
   que marca el <br> desde el celular hasta el escritorio. */
.nx .hero h1{ font-family:var(--nx-disp); font-weight:900; font-size:clamp(38px,9.6vw,132px); line-height:.88; letter-spacing:-.035em; color:#fff; text-wrap:balance; margin:0; }
.nx .hero h1 .dim{ color:var(--nx-faint); }
.nx .hero-sub{ max-width:44ch; font-size:clamp(16px,1.6vw,19px); color:var(--nx-text); margin:0; }
.nx .hero-sub b{ color:#fff; font-weight:600; }

/* isla dinámica del hero */
.nx .isla{
  display:inline-flex; align-items:center; gap:15px; padding:14px 24px;
  background:var(--nx-panel); border:1px solid var(--nx-line); border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.nx .isla .eq{ display:inline-flex; align-items:center; gap:5px; height:22px; flex:none; }
.nx .isla .eq i{ width:4.5px; height:100%; border-radius:2px; background:#fff; transform-origin:center; animation:nxeq 1.05s ease-in-out infinite; }
.nx .isla .eq i:nth-child(1){ animation-duration:1.05s; animation-delay:-.2s; }
.nx .isla .eq i:nth-child(2){ animation-duration:.68s; animation-delay:-.55s; }
.nx .isla .eq i:nth-child(3){ animation-duration:.9s; animation-delay:-.05s; }
@keyframes nxeq{ 0%,100%{transform:scaleY(.26)} 50%{transform:scaleY(1)} }
/* comando tipeado (usa el mismo truco de fantasma del JS para no tironear) */
.nx .hero-cmd{ position:relative; display:inline-block; font-family:var(--nx-mono); font-size:14.5px; color:#eaeaec; }
.nx .hero-cmd.con-fantasma .hc-linea{ position:absolute; left:0; top:0; }
.nx .hc-fantasma{ visibility:hidden; }
.nx .hc-linea{ white-space:nowrap; }
.nx .hero-cmd .q{ color:var(--nx-muted); }
.nx .caret{ display:inline-block; width:8px; height:1.05em; background:#fff; vertical-align:-2px; margin-left:2px; animation:nxcaret 1s steps(1) infinite; }
@keyframes nxcaret{ 0%,100%{opacity:1} 50%{opacity:0} }

.nx .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.nx .btn{
  display:inline-flex; align-items:center; gap:10px; font-family:'Inter',sans-serif;
  font-weight:600; font-size:16px; padding:16px 28px; border-radius:12px;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:transform .2s,background .2s,border-color .2s,color .2s;
}
.nx .btn-primary{ background:#fff; color:#000; }
.nx .btn-primary:hover{ transform:translateY(-2px); }
.nx .btn-ghost{ border-color:var(--nx-line); color:#fff; background:transparent; }
.nx .btn-ghost:hover{ border-color:#fff; }
.nx .btn-wide{ width:100%; justify-content:center; }
.nx .btn .tag{ font-family:var(--nx-mono); font-size:12px; font-weight:700; padding:3px 8px; border-radius:5px; background:rgba(0,0,0,.14); }
.nx .btn-ghost .tag{ background:rgba(255,255,255,.08); }
.nx .hero-meta{ font-family:var(--nx-mono); font-size:11px; letter-spacing:.24em; color:var(--nx-faint); margin:0; }

/* ── Divisor con barras ─────────────────────────────────── */
.nx .rule{ display:flex; align-items:center; gap:18px; max-width:1300px; margin:0 auto; padding:0 var(--pad,clamp(20px,6vw,90px)); }
.nx .rule::before, .nx .rule::after{ content:""; height:1px; background:var(--nx-line-soft); flex:1; }
.nx .rule .bars{ width:15px; height:15px; color:var(--nx-faint); }

/* ── Bloque genérico ────────────────────────────────────── */
.nx .block{ max-width:1300px; margin:0 auto; padding:clamp(84px,12vw,170px) var(--pad,clamp(20px,6vw,90px)); }
.nx .kicker{ font-family:var(--nx-mono); font-size:12.5px; letter-spacing:.22em; color:var(--nx-muted); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.nx .kicker .bars{ width:14px; height:14px; color:#fff; flex:none; }
.nx .h2{ font-family:var(--nx-disp); font-weight:800; font-size:clamp(34px,6vw,80px); line-height:.98; letter-spacing:-.02em; color:#fff; text-wrap:balance; margin:0; }

/* Problema: mil clics */
.nx .clicks{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,80px); align-items:center; margin-top:52px; }
.nx .clicks-list{ list-style:none; display:grid; gap:1px; background:var(--nx-line-soft); border:1px solid var(--nx-line-soft); border-radius:14px; overflow:hidden; margin:0; }
.nx .clicks-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:17px 22px; background:var(--nx-black); font-size:15px; }
.nx .clicks-list .t{ color:#fff; }
.nx .clicks-list .c{ font-family:var(--nx-mono); font-size:12px; color:var(--nx-muted); white-space:nowrap; }
.nx .clicks-punch{ font-family:var(--nx-disp); font-weight:900; font-size:clamp(46px,8vw,104px); line-height:.9; color:#fff; letter-spacing:-.03em; margin:0; }
.nx .clicks-punch small{ display:block; font-family:var(--nx-mono); font-weight:500; font-size:12px; letter-spacing:.26em; color:var(--nx-muted); margin-bottom:14px; }
.nx .clicks-note{ color:var(--nx-text); margin-top:20px; max-width:34ch; }

/* ── Sección INVERTIDA (blanco) — rompe el "fundido" ─────── */
.nx .invert{ background:var(--nx-white); color:#0a0a0b; }
.nx .invert .kicker{ color:#5b5b60; }
.nx .invert .kicker .bars{ color:#000; }
.nx .invert .h2{ color:#000; }
.nx .cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(0,0,0,.1); border:1px solid rgba(0,0,0,.1); border-radius:16px; overflow:hidden; margin-top:52px; }
.nx .cap{ background:#fff; padding:clamp(24px,3vw,40px); transition:background .25s; }
.nx .cap:hover{ background:#f4f4f5; }
.nx .cap .bars{ width:20px; height:20px; color:#000; margin-bottom:20px; }
.nx .cap-tag{ font-family:var(--nx-mono); font-size:10px; letter-spacing:.2em; color:#8a8a90; margin-bottom:12px; }
.nx .cap h3{ font-family:var(--nx-disp); font-weight:800; font-size:21px; color:#0a0a0b; margin-bottom:10px; }
.nx .cap p{ font-size:14.5px; color:#55555b; line-height:1.55; }

/* ── Feature: la isla operando ──────────────────────────── */
.nx .feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,90px); align-items:center; margin-top:20px; }
.nx .feature-tag{ font-family:var(--nx-mono); font-size:11px; letter-spacing:.2em; color:var(--nx-muted); }
.nx .feature h2{ font-family:var(--nx-disp); font-weight:800; font-size:clamp(30px,4.4vw,56px); line-height:1.02; letter-spacing:-.02em; color:#fff; margin:14px 0 20px; }
.nx .feature p{ color:var(--nx-text); font-size:16px; max-width:46ch; margin-bottom:22px; }
.nx .feature ul{ list-style:none; display:grid; gap:11px; font-family:var(--nx-mono); font-size:12.5px; color:var(--nx-muted); margin:0; }
.nx .feature li{ display:flex; gap:11px; align-items:center; }
.nx .feature li .bars{ width:12px; height:12px; color:#fff; flex:none; }
.nx .mock{ border:1px solid var(--nx-line); border-radius:20px; background:linear-gradient(180deg,#0e0e10,#090909); padding:clamp(24px,3vw,40px); display:grid; place-items:center; min-height:360px; }

/* Chat demo (#chatBox / #chatStream, .msg los crea el JS) */
.nx .chatwrap{ width:min(340px,100%); border:1px solid var(--nx-line); border-radius:18px; background:#0b0b0d; overflow:hidden; }
.nx .chat-head{ display:flex; align-items:center; gap:9px; padding:13px 18px; border-bottom:1px solid var(--nx-line); font-family:var(--nx-mono); font-size:10px; letter-spacing:.2em; color:var(--nx-muted); }
.nx .chat-head .eq{ display:inline-flex; align-items:center; gap:3px; height:12px; }
.nx .chat-head .eq i{ width:3px; height:100%; border-radius:2px; background:#fff; transform-origin:center; animation:nxeq 1s ease-in-out infinite; }
.nx .chat-head .eq i:nth-child(2){ animation-delay:-.4s; }
.nx .chat-head .eq i:nth-child(3){ animation-delay:-.7s; }
.nx .chat-stream{ padding:22px 18px; height:320px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; scrollbar-color:var(--nx-line) transparent; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px); mask-image:linear-gradient(to bottom,transparent 0,#000 24px); }
.nx .chat-stream::-webkit-scrollbar{ width:5px; }
.nx .chat-stream::-webkit-scrollbar-thumb{ background:var(--nx-line); border-radius:3px; }
.nx .msg{ flex:none; max-width:86%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.5; animation:nxmsg .35s ease both; }
@keyframes nxmsg{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.nx .msg.user{ align-self:flex-end; background:#fff; color:#000; font-family:var(--nx-mono); font-size:12.5px; }
.nx .msg.nova{ align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--nx-line); color:#eaeaec; }
.nx .msg.nova .who{ display:block; font-family:var(--nx-mono); font-size:9px; letter-spacing:.24em; color:var(--nx-muted); margin-bottom:5px; }
.nx .msg.typing .tdots::after{ content:''; animation:nxdots 1.2s steps(4) infinite; }
@keyframes nxdots{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* ── Precio ─────────────────────────────────────────────── */
.nx .plans{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:52px auto 0; align-items:stretch; }
.nx .plan{ border:1px solid var(--nx-line); border-radius:20px; padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; background:var(--nx-panel); }
.nx .plan.pro{ background:#fff; color:#0a0a0b; border-color:#fff; }
.nx .plan-tag{ font-family:var(--nx-mono); font-size:11px; letter-spacing:.24em; color:var(--nx-muted); margin-bottom:16px; }
.nx .plan.pro .plan-tag{ color:#6a6a70; }
.nx .plan-price{ font-family:var(--nx-disp); font-weight:900; font-size:clamp(40px,5vw,58px); line-height:1; color:#fff; display:flex; align-items:baseline; gap:3px; margin-bottom:6px; }
.nx .plan.pro .plan-price{ color:#000; }
.nx .plan-price .cur{ font-size:.42em; color:var(--nx-muted); }
.nx .plan-price .cyc{ font-family:var(--nx-mono); font-size:.26em; letter-spacing:.04em; color:var(--nx-muted); align-self:flex-end; margin-bottom:.6em; }
.nx .plan.pro .plan-price .cur, .nx .plan.pro .plan-price .cyc{ color:#7a7a80; }
.nx .plan-per{ font-family:var(--nx-mono); font-size:10px; letter-spacing:.14em; color:var(--nx-faint); margin-bottom:22px; }
.nx .plan.pro .plan-per{ color:#8a8a90; }
.nx .plan-list{ list-style:none; display:grid; gap:11px; flex:1; margin:0 0 26px; }
.nx .plan-list li{ font-size:14.5px; color:#e6e6e8; padding-left:26px; position:relative; line-height:1.4; }
.nx .plan.pro .plan-list li{ color:#26262b; }
.nx .plan-list li .bars{ position:absolute; left:0; top:3px; width:13px; height:13px; color:#fff; }
.nx .plan.pro .plan-list li .bars{ color:#000; }
.nx .plan-list li.off{ color:var(--nx-faint); }
.nx .plan-list li.off::before{ content:"✕"; position:absolute; left:2px; top:0; font-family:var(--nx-mono); font-size:11px; }
.nx .plan-list li.off .bars{ display:none; }
.nx .plan .btn{ width:100%; justify-content:center; }
.nx .plan.pro .btn-primary{ background:#000; color:#fff; }
.nx .plan-fine{ font-family:var(--nx-mono); text-align:center; font-size:10px; letter-spacing:.16em; color:var(--nx-faint); margin-top:14px; }
.nx .plan.pro .plan-fine{ color:#8a8a90; }

/* ── CTA final (invertido) ──────────────────────────────── */
.nx .final{ background:#fff; color:#000; text-align:center; padding:clamp(110px,15vw,200px) var(--pad,clamp(20px,6vw,90px)); }
.nx .final .bars{ width:52px; height:52px; color:#000; margin:0 auto 30px; }
.nx .final h2{ font-family:var(--nx-disp); font-weight:900; font-size:clamp(38px,7vw,92px); line-height:.92; letter-spacing:-.03em; color:#000; margin-bottom:36px; text-wrap:balance; }
.nx .final .btn-primary{ background:#000; color:#fff; }

/* ── Footer ─────────────────────────────────────────────── */
.nx .foot{ border-top:1px solid var(--nx-line-soft); padding:44px var(--pad,clamp(20px,6vw,90px)) 60px; text-align:center; color:var(--nx-muted); }
.nx .foot .bars{ width:16px; height:16px; color:#fff; margin:0 auto 14px; }
.nx .foot p{ font-size:13px; margin:6px 0; }
.nx .foot a{ color:var(--nx-muted); border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.nx .foot a:hover{ color:#fff; border-color:var(--nx-line); }
.nx .foot-arr a{ display:inline-block; border:1px solid var(--nx-line); border-radius:999px; padding:6px 15px; }
.nx .foot-arr a:hover{ border-color:#fff; }

/* ── Precio: tercera columna («Próximamente») y acciones ─── */
.nx .plans.tres{ grid-template-columns:repeat(3,1fr); max-width:1180px; }
.nx .plan.soon{ border-style:dashed; }
.nx .plan-price.soon-num{ font-size:clamp(24px,2.6vw,32px); color:var(--nx-muted); }
.nx .plan-list li.soon-li{ color:var(--nx-muted); }
.nx .plan-list li.soon-li::before{ content:"◆"; position:absolute; left:2px; top:0; font-size:9px; color:var(--nx-faint); }
/* Las acciones van una sola vez, debajo de las tres columnas. */
.nx .plans-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* ── Cómo empezar: tres pasos ───────────────────────────── */
.nx .steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--nx-line-soft); border:1px solid var(--nx-line-soft);
  border-radius:14px; overflow:hidden; margin:52px 0 0; padding:0; }
.nx .steps li{ background:var(--nx-black); padding:clamp(24px,3vw,36px); }
.nx .step-n{ font-size:10px; letter-spacing:.24em; color:var(--nx-muted); }
.nx .steps h3{ font-family:var(--nx-disp); font-weight:800; font-size:20px; color:#fff; margin:14px 0 8px; }
.nx .steps p{ font-size:14.5px; color:var(--nx-muted); line-height:1.55; }

/* ── FAQ ────────────────────────────────────────────────── */
.nx .faq{ margin-top:52px; border-top:1px solid var(--nx-line-soft); }
.nx .faq details{ border-bottom:1px solid var(--nx-line-soft); }
.nx .faq summary{ cursor:pointer; padding:22px 0; list-style:none;
  font-family:var(--nx-disp); font-weight:600; font-size:clamp(17px,2vw,21px); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nx .faq summary::-webkit-details-marker{ display:none; }
.nx .faq summary::after{ content:"+"; flex:none; font-family:var(--nx-mono); font-size:20px;
  color:var(--nx-muted); transition:transform .25s; }
.nx .faq details[open] summary::after{ transform:rotate(45deg); }
.nx .faq p{ padding:0 0 24px; max-width:70ch; font-size:15px; color:var(--nx-text); }

/* ── Footer: legales, arrepentimiento y Data Fiscal ─────── */
.nx .foot-legal{ margin-top:12px; }
.nx .foot-arr{ margin-top:16px; }
.nx .foot-cmd{ margin-top:18px; font-family:var(--nx-mono); font-size:11px;
  letter-spacing:.05em; color:var(--nx-faint); }
.nx .foot-fiscal{ margin-top:22px; }
.nx .foot-fiscal img{ width:78px; height:auto; margin:0 auto; opacity:.8; transition:opacity .2s; }
.nx .foot-fiscal a:hover img{ opacity:1; }
.nx .foot-fiscal a{ border:0; }

@media(max-width:1040px){
  .nx .plans.tres{ grid-template-columns:1fr 1fr; }
  .nx .steps{ grid-template-columns:1fr; }
}
@media(max-width:860px){
  .nx .clicks, .nx .feature, .nx .cap-grid, .nx .plans, .nx .plans.tres{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .nx *{ animation:none !important; }
  .nx .reveal{ opacity:1; transform:none; }
}