/* =========================================================
   Promo landings — sistema de diseño compartido
   Landings públicas de promoción por pestaña de la app.
   Estética: cockpit de trading oscuro, acento teal.
   Cada página puede sobreescribir --accent para su color.
   ========================================================= */
:root{
  --bg:#0d1117; --elev:#161b22; --surface:#21262d; --surface-h:#30363d;
  --fg:#f0f6fc; --fg2:#b1bac4; --fg3:#8b949e;
  --accent:#2dd4bf; --accent-2:#5eead4; --green:#3fb950; --red:#f85149; --amber:#d29922;
  --border:rgba(56,63,71,.9); --radius:14px;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(700px 500px at 90% 10%, rgba(56,139,253,.08), transparent 60%);
}
/* NAV */
nav{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(10px);
  background:rgba(13,17,23,.72); border-bottom:1px solid var(--border);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:800; letter-spacing:.3px; font-size:18px; display:flex; gap:9px; align-items:center}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}
.nav-links{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-block; font-weight:700; border-radius:10px; padding:11px 20px;
  border:1px solid transparent; cursor:pointer; transition:.15s; font-size:15px;
}
.btn-primary{background:var(--accent); color:#062e2a}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--border)}
.btn-ghost:hover{background:var(--surface)}
.btn-lg{padding:15px 30px; font-size:17px}
/* HERO */
header{position:relative; z-index:1; padding:64px 0 24px; text-align:center}
.pill{
  display:inline-block; font-size:13px; font-weight:600; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
h1{font-size:clamp(30px,5.5vw,54px); line-height:1.08; margin:0 0 16px; font-weight:850; letter-spacing:-.5px}
h1 .hl{color:var(--accent)}
.sub{font-size:clamp(16px,2.2vw,21px); color:var(--fg2); max-width:720px; margin:0 auto 28px}
/* VIDEO */
.video-shell{position:relative; z-index:1; margin:14px auto 0; max-width:960px}
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); box-shadow:0 24px 80px rgba(0,0,0,.55);
  background:linear-gradient(145deg,#12161d,#0b0e13);
}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:20px;
}
.play{
  width:78px; height:78px; border-radius:50%; background:var(--accent); color:#062e2a;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px color-mix(in srgb, var(--accent) 50%, transparent);
}
.play svg{margin-left:5px}
.ph-note{color:var(--fg3); font-size:14px}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:30px 0 6px}
/* STRIP */
.strip{
  margin:44px 0; padding:18px; text-align:center; border-radius:var(--radius);
  background:var(--elev); border:1px solid var(--border); font-size:clamp(17px,2.4vw,22px); font-weight:700;
}
.strip .a{color:var(--accent)} .strip .b{color:var(--fg2); font-weight:600}
/* SECTIONS */
section{position:relative; z-index:1; padding:40px 0}
h2{font-size:clamp(24px,3.5vw,34px); margin:0 0 8px; font-weight:800; letter-spacing:-.3px}
.lead{color:var(--fg2); max-width:680px; margin:0 0 28px; font-size:17px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{
  background:var(--elev); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  transition:.15s;
}
.card:hover{border-color:color-mix(in srgb, var(--accent) 40%, transparent); transform:translateY(-2px)}
.card .ico{font-size:26px; margin-bottom:10px}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--fg2); font-size:15px}
/* DOS COLUMNAS (comparativas tipo V1/V2, modo A/B) */
.vv{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.vv .col{background:var(--elev); border:1px solid var(--border); border-radius:var(--radius); padding:26px}
.vv .col.a{border-top:3px solid var(--green)}
.vv .col.b{border-top:3px solid var(--accent)}
.vv h3{margin:0 0 4px; font-size:20px}
.vv .tag{font-size:13px; color:var(--fg3); margin-bottom:14px}
.vv ul{margin:0; padding-left:18px; color:var(--fg2)}
.vv li{margin:7px 0}
.same{
  text-align:center; margin-top:18px; color:var(--fg2); font-size:15px;
  background:var(--surface); border:1px dashed var(--border); border-radius:10px; padding:12px;
}
/* CYCLE / STEPS */
.cycle{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px}
.step{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:9px 16px; font-size:14px; color:var(--fg2)}
.step b{color:var(--fg)}
.arrow{color:var(--accent); align-self:center; font-weight:800}
/* MÉTRICAS (tarjetas de números para backtest, monitoreo…) */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.metric{background:var(--elev); border:1px solid var(--border); border-radius:12px; padding:18px; text-align:center}
.metric .v{font-size:26px; font-weight:800; color:var(--accent)}
.metric .v.pos{color:var(--green)} .metric .v.neg{color:var(--red)}
.metric .k{font-size:13px; color:var(--fg3); margin-top:4px}
/* FINAL CTA */
.final{text-align:center; background:linear-gradient(160deg,#12211f,#0d1117); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius:20px; padding:52px 24px; margin:20px 0}
.final h2{margin-bottom:12px}
.final p{color:var(--fg2); max-width:620px; margin:0 auto 26px; font-size:17px}
/* FOOTER */
footer{position:relative; z-index:1; border-top:1px solid var(--border); padding:30px 0; color:var(--fg3); font-size:14px}
.foot-note{background:var(--elev); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:22px; color:var(--fg2); font-size:14px}
@media (max-width:640px){
  .vv{grid-template-columns:1fr}
  header{padding:44px 0 12px}
}