/* styles extraídos de index2.html */
:root{
  --bg:#0b1020;--bg2:#0f172a;--txt:#e6ebf5;--muted:#9fb0ce;
  --brand:#22d3ee;--brand2:#60a5fa;--brand3:#a78bfa;
  --ok:#34d399;--warn:#fbbf24;--danger:#f87171;
  --card:rgba(255,255,255,.06);--card-b:rgba(255,255,255,.12);
  --r:18px;--shadow:0 10px 30px rgba(0,0,0,.35);--w:min(1200px,92vw)
}
*,*:before,*:after{box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--txt);
  font:500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #0b3b6d33, transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, #6b21a833, transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
.container{width:var(--w);margin-inline:auto}
.btn{display:inline-flex;gap:.6rem;align-items:center;justify-content:center;
  padding:.9rem 1.1rem;border:0;border-radius:12px;font-weight:800;text-decoration:none;
  color:#fff;background:linear-gradient(90deg,#0891b2 40%,#2563eb 100%);
  box-shadow:0 10px 24px #22d3ee33,inset 0 1px 0 #fff3;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px #22d3ee3d}
.btn.secondary{color:var(--txt);background:#ffffff10;border:1px solid #ffffff1a;box-shadow:none}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;
  font-size:.8rem;color:#c7f9ff;background:#0ea5e925;border:1px solid #22d3ee55;backdrop-filter:blur(6px)}
.section{padding:80px 0}
.grid{display:grid;gap:1.2rem}
.blur{background:linear-gradient(180deg,#ffffff10,#ffffff06);border:1px solid var(--card-b);
  border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(10px)}

.precios-cards {
  display: flex;
  gap: 1.2rem;
  align-items: stretch;
}
.precios-cards article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: 340px;
  min-height: 480px;
  height: 100%;
  box-sizing: border-box;
}
.precios-cards .btn, .precios-cards .btn.secondary {
  margin-top: auto;
}
.title{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.1;letter-spacing:-.02em}
.subtitle{color:var(--muted);font-size:clamp(1rem,1.8vw,1.1rem)}

header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(10,12,24,.6),rgba(10,12,24,.25));border-bottom:1px solid #ffffff14}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--txt);text-decoration:none;font-weight:900}
.brand svg{width:28px;height:28px}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:700;padding:.6rem .8rem;border-radius:8px}
.nav-links a:hover{background:#ffffff10;color:var(--txt)}
.mobile-toggle{display:none;background:none;border:0;color:var(--txt)}

.hero{padding:80px 0 40px;position:relative;overflow:clip}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-card{padding:22px;border-radius:16px;background:
  conic-gradient(from 210deg at 80% -10%, #22d3ee11, transparent 20%),
  conic-gradient(from 90deg at -10% 110%, #a78bfa14, transparent 30%),
  #0b1020aa;border:1px solid #ffffff12;box-shadow:var(--shadow)}
.hero h1 strong{background:linear-gradient(90deg,var(--brand),var(--brand3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-visual{aspect-ratio:16/11;border-radius:var(--r);position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 70% 20%, #22d3ee1a, transparent 60%),
  linear-gradient(180deg,#06142f,#0b1020);border:1px solid #ffffff12;box-shadow:var(--shadow)}
.mock{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;color:#e5f6ff;font-size:14px}
.mock .topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #ffffff1a;background:#0b172a99}
.mock .list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.mock .card{background:#0e1a33;border:1px solid #ffffff1a;border-radius:12px;padding:10px}
.tag{font-size:12px;color:#a5f3fc}

.features{grid-template-columns:repeat(3,1fr)}
.feature{padding:22px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-b)}
.feature h3{margin:8px 0 6px;font-size:1.2rem}
.feature p{color:var(--muted);margin:0}

.pillars{grid-template-columns:repeat(3,1fr)}
.pillar{padding:22px;border-radius:var(--r);background:#ffffff08;border:1px solid #ffffff12}
.pillar h3{margin:.4rem 0}
.icon{width:26px;height:26px;display:inline-grid;place-items:center;border-radius:8px;border:1px solid #22d3ee55;background:#22d3ee20}

.steps{grid-template-columns:repeat(4,1fr)}
.step{padding:22px;border-radius:var(--r);background:#ffffff08;border:1px solid #ffffff12}
.num{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:#22d3ee26;border:1px solid #22d3ee55;color:#a5f3fc;font-weight:800}

.cta{padding:24px;display:grid;grid-template-columns:1.2fr .8fr;gap:1.4rem;align-items:center}
.cta .panel{padding:20px;border-radius:var(--r);background:#ffffff08;border:1px solid #ffffff14}

.trust{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;opacity:.9}
.trust .chip{padding:.45rem .7rem;border-radius:999px;border:1px dashed #3b82f680;background:#3b82f61a;font-weight:700;font-size:.85rem;color:#93c5fd}

footer{padding:50px 0;color:var(--muted);border-top:1px solid #ffffff1a;margin-top:60px}
.foot{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}

/* Responsive */
@media (max-width:980px){
  .hero .inner{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .cta{grid-template-columns:1fr}
  .nav-links{display:none}.mobile-toggle{display:inline-grid;place-items:center}
}
@media (max-width:640px){
  .features{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .title{font-size:clamp(2rem,7vw,3rem)}
  .btn{padding:.85rem 1rem}
}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:translateY(0)}