/* =========================================================================
   Comandas — la landing de venta.
   Hereda los tokens de style.css (paleta, tipografía, botones) y encima pone
   solo lo suyo: una página que se lee de arriba a abajo, no una app.
   ========================================================================= */
body.landing{overflow-x:hidden}
.ld-env{max-width:1080px;margin:0 auto;padding:0 22px}

/* La barra: fija, de vidrio, con el logo respirando */
.ld-barra{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,12,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--borde);
}
.ld-barra-in{display:flex;align-items:center;justify-content:space-between;min-height:66px}
.ld-logo{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.punto-vivo{
  width:11px;height:11px;border-radius:50%;background:var(--acento);flex:none;
  box-shadow:0 0 12px var(--acento);
}
.ld-nav{display:flex;align-items:center;gap:6px}
.ld-nav a:not(.btn){padding:9px 13px;color:var(--tenue);font-weight:600;font-size:var(--t-ui);border-radius:var(--r-chico)}
@media (hover:hover){ .ld-nav a:not(.btn):hover{color:var(--texto)} }
.ld-nav .btn{min-height:40px}
@media (max-width:560px){ .ld-nav a:not(.btn){display:none} }

/* ── La promesa ── */
.ld-hero{position:relative;padding:84px 0 72px;text-align:center}
.ld-hero::before{ /* el mismo lenguaje del producto: un halo del acento */
  content:"";position:absolute;inset:-40% -20% auto;height:130%;pointer-events:none;
  background:
    radial-gradient(46% 60% at 50% 0%, rgba(255,122,69,.16), transparent 70%),
    radial-gradient(30% 42% at 82% 10%, rgba(59,130,246,.08), transparent 70%);
}
.ld-hero .ld-env{position:relative}
.ld-alta{
  display:inline-block;font-size:var(--t-mini);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acento);margin-bottom:18px;
  padding:7px 14px;border-radius:999px;border:1px solid rgba(255,122,69,.35);
  background:rgba(255,122,69,.08);
}
.ld-hero h1{
  font-size:clamp(34px,6.4vw,62px);font-weight:800;line-height:1.06;
  letter-spacing:-.035em;text-wrap:balance;
}
.ld-hero h1 em{font-style:normal;color:var(--acento)}
.ld-sub{
  max-width:56ch;margin:22px auto 0;color:var(--tenue);
  font-size:clamp(16px,2.2vw,19px);line-height:1.6;
}
.ld-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.ld-nota{color:var(--tenue2);font-size:var(--t-chico);margin-top:16px;line-height:1.5}

/* ── Secciones ── */
main h2{
  font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em;
  text-align:center;text-wrap:balance;margin-bottom:14px;
}
.ld-sub2{text-align:center;color:var(--tenue);font-size:var(--t-base);margin-bottom:36px}

.ld-como{padding:64px 0}
.ld-pasos{display:grid;gap:16px;margin-top:36px}
@media (min-width:820px){ .ld-pasos{grid-template-columns:repeat(3,1fr)} }
.ld-paso{
  position:relative;background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);padding:26px 22px 24px;
}
.ld-num{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--acento);color:#1A0B04;font-size:var(--t-titulo);font-weight:800;
  margin-bottom:16px;box-shadow:0 8px 20px -8px var(--acento);
}
.ld-paso h3{font-size:var(--t-medio);letter-spacing:-.015em;margin-bottom:8px}
.ld-paso p{color:var(--tenue);font-size:var(--t-ui);line-height:1.6}

.ld-porque{padding:64px 0;background:var(--sup);border-block:1px solid var(--borde)}
.ld-grid{display:grid;gap:14px;margin-top:36px}
@media (min-width:640px){ .ld-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .ld-grid{grid-template-columns:repeat(3,1fr)} }
.ld-item{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r-tarjeta);padding:22px}
.ld-item h3{font-size:var(--t-base);margin-bottom:7px;letter-spacing:-.01em}
.ld-item p{color:var(--tenue);font-size:var(--t-chico);line-height:1.6}

/* ── Precios ── */
.ld-precios{padding:72px 0}
.ld-planes{display:grid;gap:16px;align-items:stretch}
@media (min-width:820px){ .ld-planes{grid-template-columns:repeat(3,1fr)} }
.ld-plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);padding:28px 24px 24px;
}
.ld-plan.destacado{
  border-color:var(--acento);
  box-shadow:0 0 0 1px var(--acento), 0 24px 56px -24px rgba(255,122,69,.4);
}
.ld-mejor{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--acento);color:#1A0B04;font-size:var(--t-micro);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:999px;
  white-space:nowrap;
}
.ld-plan h3{font-size:var(--t-titulo);letter-spacing:-.02em}
.ld-gancho{color:var(--tenue);font-size:var(--t-chico);line-height:1.55;margin:6px 0 18px;flex:1}
.ld-precio{
  font-size:clamp(28px,3.4vw,36px);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-bottom:18px;
}
.ld-precio span{font-size:var(--t-ui);font-weight:600;color:var(--tenue2);letter-spacing:0}

/* ── Cierre y pie ── */
.ld-cierre{padding:80px 0;text-align:center;position:relative}
.ld-cierre::before{
  content:"";position:absolute;inset:auto -20% 0;height:120%;pointer-events:none;
  background:radial-gradient(50% 70% at 50% 100%, rgba(255,122,69,.13), transparent 70%);
}
.ld-cierre .ld-env{position:relative}
.ld-cierre p{color:var(--tenue);max-width:46ch;margin:12px auto 28px;font-size:var(--t-base);line-height:1.6}
.ld-pie{border-top:1px solid var(--borde);padding:26px 0}
.ld-pie .ld-env{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ld-pie span:first-child{display:inline-flex;align-items:center;gap:9px;font-weight:800}
.ld-pie-txt{color:var(--tenue2);font-size:var(--t-chico)}

/* Entrada suave del hero — pasa una vez, al llegar */
@keyframes ld-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ld-hero .ld-alta{animation:ld-entra .5s var(--ease-salida) backwards}
.ld-hero h1{animation:ld-entra .5s var(--ease-salida) .08s backwards}
.ld-hero .ld-sub{animation:ld-entra .5s var(--ease-salida) .16s backwards}
.ld-hero .ld-cta,.ld-hero .ld-nota{animation:ld-entra .5s var(--ease-salida) .24s backwards}
@media (prefers-reduced-motion:reduce){
  .ld-hero .ld-alta,.ld-hero h1,.ld-hero .ld-sub,.ld-hero .ld-cta,.ld-hero .ld-nota{animation:none}
}