/* ============================================================
   VELA · STELLAR LAYER  —  "Navegación celeste"
   Capa de diseño distintiva sobre theme.css (no la sustituye).
   Display serif (Fraunces) + Space Grotesk/Inter de marca.
   Paleta nebulosa M1 sobre el cosmic-dark existente.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&display=swap');

:root{
  --nebula:#a774ff;  --nebula-deep:#6d3bd1;
  --ember:#ff8a4d;   --rose:#ff5c8a;
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  --maxw:1180px;
}

/* Canvas de constelación detrás de todo el contenido */
#sky{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
/* Atenúa las estrellas estáticas de theme.css para no competir con el canvas */
body::after{ opacity:.22 !important; }

/* Nebulosa animada (mallas de gradiente) — atmósfera */
.neb{
  position:fixed; inset:-20%; z-index:0; pointer-events:none; filter:blur(20px);
  background:
    radial-gradient(38% 50% at 18% 22%, rgba(63,227,218,.16), transparent 70%),
    radial-gradient(40% 52% at 82% 30%, rgba(167,116,255,.16), transparent 72%),
    radial-gradient(46% 48% at 60% 88%, rgba(255,138,77,.10), transparent 70%),
    radial-gradient(40% 40% at 30% 80%, rgba(93,184,255,.12), transparent 72%);
  animation:nebdrift 26s var(--ease) infinite alternate;
}
@keyframes nebdrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-3%,2%,0) scale(1.08); }
}

/* Barra de progreso "cometa" arriba */
.comet{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--blue));
  box-shadow:0 0 14px var(--cyan); transition:width .1s linear; }

/* ───────── Tipografía editorial ───────── */
.display{ font-family:var(--font-serif); font-weight:600; line-height:.98;
  letter-spacing:-.02em; color:var(--white); font-optical-sizing:auto;
  font-size:clamp(2.7rem, 7vw, 5.6rem); }
.display em{ font-style:italic; font-weight:500; }
.grad{ background:linear-gradient(102deg,var(--cyan),var(--blue) 45%,var(--nebula));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-warm{ background:linear-gradient(100deg,var(--cyan),var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.serif{ font-family:var(--font-serif); }
.kicker{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  border:1px solid var(--border-strong); border-radius:100px; padding:.4rem .9rem;
  background:rgba(63,227,218,.05); }
.kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.lead{ color:var(--muted); font-size:1.1rem; line-height:1.7; max-width:34em; }

/* ───────── Hero ───────── */
.st-hero{ position:relative; z-index:1; padding:clamp(3.5rem,8vw,7rem) 0 4rem; }
.st-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3.2rem; align-items:center; }
@media(max-width:980px){ .st-hero-grid{ grid-template-columns:1fr; gap:2.6rem; } }
.st-hero .pills{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.7rem; }
.pill{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--text);
  border:1px solid var(--border); border-radius:100px; padding:.45rem .85rem;
  background:rgba(255,255,255,.02); }
.pill::before{ content:"✦"; color:var(--cyan); }

/* ───────── Stats orbitales ───────── */
.orbit-stats{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2.4rem;
  padding-top:2rem; border-top:1px solid var(--border); }
.orbit-stats .n{ font-family:var(--font-serif); font-weight:600; color:var(--white);
  font-size:2.3rem; line-height:1; letter-spacing:-.02em; }
.orbit-stats .l{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted); margin-top:.5rem; }

/* ───────── Chat que se escribe solo ───────── */
.st-chat{ position:relative; background:linear-gradient(180deg,#0c241f,#08171a);
  border:1px solid var(--border-strong); border-radius:24px; padding:1.1rem 1.1rem 1.3rem;
  max-width:390px; margin-inline:auto;
  box-shadow:0 40px 110px rgba(0,0,0,.6), 0 0 70px rgba(63,227,218,.14); }
.st-chat::before{ /* halo nebulosa */ content:""; position:absolute; inset:-2px; border-radius:26px;
  background:linear-gradient(140deg,rgba(63,227,218,.5),transparent 40%,rgba(167,116,255,.4));
  z-index:-1; filter:blur(10px); opacity:.6; }
.st-chat .hd{ display:flex; align-items:center; gap:.7rem; padding-bottom:.9rem; margin-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.08); }
.st-chat .av{ width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(from 200deg,var(--cyan),var(--blue),var(--nebula),var(--cyan));
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700;
  color:#02121a; font-size:.8rem; }
.st-chat .nm{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:.9rem; }
.st-chat .pr{ font-size:.66rem; color:#3fe3da; display:flex; align-items:center; gap:.35rem; }
.st-chat .pr::before{ content:""; width:7px; height:7px; border-radius:50%; background:#25d366;
  box-shadow:0 0 8px #25d366; }
.st-feed{ min-height:300px; display:flex; flex-direction:column; gap:.45rem; }
.bub{ max-width:82%; padding:.55rem .82rem; border-radius:15px; font-size:.84rem; line-height:1.45;
  color:#fff; opacity:0; transform:translateY(8px) scale(.98); transition:.32s var(--ease); }
.bub.show{ opacity:1; transform:none; }
.bub.them{ background:#22333c; border-bottom-left-radius:5px; align-self:flex-start; }
.bub.me{ background:#0a6b56; border-bottom-right-radius:5px; align-self:flex-end; }
.bub b{ color:#aef7ec; font-weight:600; }
.typing{ align-self:flex-start; display:none; gap:4px; padding:.65rem .8rem; background:#22333c;
  border-radius:15px; border-bottom-left-radius:5px; }
.typing.show{ display:flex; }
.typing i{ width:7px; height:7px; border-radius:50%; background:#9fb2bd; animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* ───────── Ticker / marquee ───────── */
.ticker{ overflow:hidden; border-block:1px solid var(--border); padding:1.1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker-row{ display:flex; gap:3rem; width:max-content; animation:scrollx 32s linear infinite; }
.ticker:hover .ticker-row{ animation-play-state:paused; }
.ticker-row span{ font-family:var(--font-serif); font-style:italic; font-size:1.5rem;
  color:var(--dim); white-space:nowrap; display:flex; align-items:center; gap:3rem; }
.ticker-row span::after{ content:"✦"; color:var(--cyan); font-style:normal; font-size:.7rem; }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ───────── Steps: ruta de navegación ───────── */
.route{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; position:relative; }
@media(max-width:880px){ .route{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .route{ grid-template-columns:1fr; } }
.star-step{ position:relative; padding:1.6rem; border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); transition:.3s var(--ease); }
.star-step:hover{ border-color:var(--border-strong); transform:translateY(-4px);
  box-shadow:0 20px 50px -24px rgba(167,116,255,.4); }
.star-step .num{ font-family:var(--font-mono); font-size:.7rem; color:var(--nebula); letter-spacing:.16em; }
.star-step h3{ font-family:var(--font-serif); font-weight:600; font-size:1.18rem; margin:.5rem 0 .5rem; }

/* ───────── Calculadora "consola" ───────── */
.console{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.4rem; align-items:center;
  border:1px solid var(--border-strong); border-radius:24px; padding:2.2rem;
  background:linear-gradient(140deg,rgba(167,116,255,.06),rgba(63,227,218,.04)),var(--bg-card);
  position:relative; overflow:hidden; }
@media(max-width:760px){ .console{ grid-template-columns:1fr; gap:1.6rem; } }
.fieldc{ margin-bottom:1.1rem; }
.fieldc label{ display:block; font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.13em; color:var(--muted); margin-bottom:.45rem; }
.fieldc input{ width:100%; padding:.85rem 1rem; background:rgba(255,255,255,.03);
  border:1px solid var(--border-strong); border-radius:14px; color:#fff;
  font-family:var(--font-serif); font-size:1.15rem; }
.fieldc input:focus{ outline:none; border-color:var(--cyan); background:rgba(63,227,218,.05); }
.readout{ text-align:center; }
.readout .big{ font-family:var(--font-serif); font-weight:700; color:#fff; line-height:1;
  font-size:clamp(2.8rem,8vw,4.2rem); letter-spacing:-.02em; }
.readout .big .cur{ font-size:.42em; color:var(--ember); vertical-align:super; margin-right:.05em; }
.readout .sub{ color:var(--muted); font-size:.85rem; margin-top:.6rem; }

/* ───────── Pricing: naves ───────── */
.bill-toggle{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem;
  border:1px solid var(--border-strong); border-radius:100px; background:rgba(255,255,255,.02);
  font-family:var(--font-mono); font-size:.74rem; }
.bill-toggle button{ border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:.5rem 1rem; border-radius:100px; transition:.25s; letter-spacing:.04em; }
.bill-toggle button.on{ background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#02121a; font-weight:700; }
.bill-save{ color:var(--green); font-family:var(--font-mono); font-size:.72rem; margin-left:.5rem; }

.ships{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch; }
@media(max-width:900px){ .ships{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.ship{ position:relative; display:flex; flex-direction:column; padding:2rem 1.8rem;
  border:1px solid var(--border); border-radius:22px; background:rgba(255,255,255,.02);
  transition:.3s var(--ease); overflow:hidden; }
.ship:hover{ transform:translateY(-5px); border-color:var(--border-strong); }
.ship.featured{ border-color:transparent; background:
   linear-gradient(180deg,rgba(167,116,255,.10),rgba(63,227,218,.03)),var(--bg-card);
   box-shadow:0 30px 80px -30px rgba(167,116,255,.5); }
.ship.featured::before{ content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
  background:linear-gradient(160deg,var(--cyan),var(--nebula)); -webkit-mask:
  linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.ship .sail{ width:30px; height:30px; color:var(--cyan); margin-bottom:.9rem; }
.ship .name{ font-family:var(--font-serif); font-weight:600; font-size:1.4rem; color:#fff; }
.ship .for{ color:var(--muted); font-size:.82rem; margin:.2rem 0 1.2rem; min-height:2.2em; }
.ship .amt{ font-family:var(--font-serif); font-weight:700; color:#fff; font-size:2.9rem; line-height:1; letter-spacing:-.02em; }
.ship .amt .cur{ font-size:.4em; color:var(--cyan); vertical-align:super; }
.ship .amt .per{ font-size:.28em; color:var(--muted); font-family:var(--font-mono); font-weight:400; }
.ship .noset{ font-family:var(--font-mono); font-size:.68rem; color:var(--green); margin-top:.45rem; letter-spacing:.04em; }
.ship ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; margin:1.4rem 0; flex-grow:1; }
.ship li{ font-size:.86rem; color:var(--text); display:flex; gap:.6rem; align-items:flex-start; }
.ship li::before{ content:"➤"; color:var(--cyan); font-size:.7rem; margin-top:.25rem; flex-shrink:0; }
.ship .ribbon{ position:absolute; top:1.1rem; right:1.1rem; font-family:var(--font-mono);
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#02121a; font-weight:700;
  background:linear-gradient(135deg,var(--cyan),var(--nebula)); padding:.3rem .7rem; border-radius:100px; }

/* ───────── Add-ons / módulos ───────── */
.modules{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:820px){ .modules{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .modules{ grid-template-columns:1fr; } }
.module{ border:1px dashed var(--border-strong); border-radius:16px; padding:1.2rem;
  background:rgba(255,255,255,.015); transition:.25s var(--ease); }
.module:hover{ border-style:solid; border-color:var(--nebula); transform:translateY(-3px); }
.module .code{ font-family:var(--font-mono); font-size:.62rem; color:var(--nebula); letter-spacing:.12em; }
.module h4{ font-family:var(--font-display); font-size:1rem; color:#fff; margin:.35rem 0; }
.module .px{ font-family:var(--font-mono); font-size:.8rem; color:var(--cyan); margin-top:.5rem; }
.module .soon{ color:var(--gold); }

/* ───────── Divisor constelación ───────── */
.constellation-div{ height:1px; max-width:780px; margin:4.5rem auto; position:relative;
  background:linear-gradient(90deg,transparent,var(--border-strong) 25%,var(--border-strong) 75%,transparent); }
.constellation-div::before,.constellation-div::after{ content:"✦"; position:absolute; top:50%;
  transform:translateY(-50%); color:var(--cyan); font-size:.8rem; background:var(--bg); padding:0 .8rem; }
.constellation-div::before{ left:38%; opacity:.5 } .constellation-div::after{ left:50%; }

/* Botón con halo (mejora del btn-primary para CTAs estelares) */
.btn-star{ display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.5rem; border-radius:100px;
  font-family:var(--font-display); font-weight:700; font-size:.92rem; cursor:pointer; border:0;
  color:#02121a; background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 10px 30px -10px rgba(63,227,218,.7); transition:.25s var(--ease); }
.btn-star:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--cyan),0 12px 36px -8px rgba(167,116,255,.6); }

/* ───────── Rejillas y utilidades compartidas ───────── */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
@media(max-width:880px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }
.card-emoji{ font-size:1.7rem; display:block; margin-bottom:.7rem; line-height:1; }
.card .card-title{ font-family:var(--font-serif); font-weight:600; font-size:1.18rem; }

/* ───────── FAQ ───────── */
.faq{ max-width:780px; margin:0 auto; }
.faq-item{ border:1px solid var(--border); border-radius:14px; margin-bottom:.8rem;
  background:rgba(255,255,255,.02); overflow:hidden; transition:border-color .25s; }
.faq-item.open{ border-color:var(--border-strong); }
.faq-q{ padding:1.15rem 1.4rem; cursor:pointer; user-select:none; display:flex;
  justify-content:space-between; gap:1rem; align-items:center; font-family:var(--font-display);
  font-weight:600; color:var(--white); font-size:.98rem; transition:color .2s; }
.faq-q:hover{ color:var(--cyan); }
.faq-q .pl{ font-size:1.35rem; color:var(--cyan); transition:transform .25s var(--ease); flex-shrink:0; }
.faq-item.open .faq-q .pl{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease), padding .35s var(--ease);
  color:var(--muted); line-height:1.65; font-size:.9rem; padding:0 1.4rem; }
.faq-item.open .faq-a{ max-height:460px; padding:0 1.4rem 1.2rem; }

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .neb,.kicker .dot,.ticker-row,.typing i{ animation:none !important; }
  .bub{ opacity:1 !important; transform:none !important; }
}