/* ============================================================
   Saly MTF — estilos compartidos por las 3 propuestas de web
   Mantiene los tokens de diseno de la web actual.
   ============================================================ */

:root{
  --blue:#1c95ec; --blue-dark:#1580d0; --violet:#7c6ee0;
  --ink:#0F1729; --muted:#5A6577; --line:rgba(15,23,41,.08);
  --up:#12b76a; --gold:#c79a2e;
  --bg:#fff; --card:#fff; --soft:#f7f9fc;
  --maxw:1160px; --r:18px;
  --shadow:0 1px 2px rgba(15,23,41,.04), 0 12px 32px rgba(15,23,41,.06);
  --shadow-lg:0 2px 6px rgba(15,23,41,.06), 0 24px 60px rgba(15,23,41,.12);
}
body[data-v="dark"]{
  --ink:#F3F4F8; --muted:#A0A8B8; --line:rgba(255,255,255,.10);
  --bg:#0B0D12; --card:#12161f; --soft:#0f1319;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ---------- barra de propuestas (solo para la revision) ---------- */
.vbar{
  position:sticky; top:0; z-index:120;
  background:#0F1729; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.vbar-in{
  max-width:var(--maxw); margin:0 auto; padding:9px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:12.5px;
}
.vbar-tag{
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  font-size:10.5px; opacity:.55; white-space:nowrap;
}
.vbar-group{display:flex; gap:5px; align-items:center}
.vbar a, .vbar button{
  font:inherit; color:#fff; text-decoration:none; cursor:pointer;
  background:rgba(255,255,255,.09); border:1px solid transparent;
  padding:5px 11px; border-radius:99px; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.vbar a:hover, .vbar button:hover{background:rgba(255,255,255,.18)}
.vbar a.on{background:var(--blue); font-weight:600}
.vbar button.on{background:#fff; color:#0F1729; font-weight:600}
.vbar-sep{width:1px; height:20px; background:rgba(255,255,255,.16)}
.vbar-note{opacity:.5; font-size:11.5px; margin-left:auto}
@media(max-width:860px){ .vbar-note{display:none} }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.vbar + .nav{top:41px}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:18px}
.logo{display:flex; align-items:baseline; gap:8px; text-decoration:none; font-weight:800; font-size:19px; letter-spacing:-.02em}
.logo .chip{
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
  background:var(--blue); color:#fff; padding:3px 7px; border-radius:6px;
  transform:translateY(-2px);
}
.logo .sub{display:block; font-size:9.5px; font-weight:600; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; margin-top:2px}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav-links a{text-decoration:none; color:var(--muted); font-size:14px; font-weight:500;
  transition:color .15s ease}
.nav-links a:hover{color:var(--ink)}
@media(max-width:820px){ .nav-links a:not(.btn){display:none} }
.icon-btn{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer;
  display:grid; place-items:center; font-size:15px;
}
.icon-btn:hover{color:var(--ink)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:12px; text-decoration:none;
  font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .15s ease;
  font-family:inherit;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 20px rgba(28,149,236,.3)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-green{background:var(--up); color:#fff; box-shadow:0 6px 20px rgba(18,183,106,.3)}
.btn-violet{background:var(--violet); color:#fff; box-shadow:0 6px 20px rgba(124,110,224,.32)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{padding:9px 17px; font-size:14px}
.btn-block{width:100%}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{margin:0; letter-spacing:-.025em; line-height:1.1}
h1{font-size:clamp(34px,5.4vw,60px); font-weight:800}
h2{font-size:clamp(27px,3.7vw,42px); font-weight:800}
h3{font-size:20px; font-weight:700}
p{margin:0; line-height:1.65}
.lead{font-size:clamp(16px,2vw,19px); color:var(--muted); line-height:1.62}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:6px 13px; border-radius:99px;
  background:rgba(28,149,236,.1); color:var(--blue); margin-bottom:20px;
}
.eyebrow.green{background:rgba(18,183,106,.1); color:var(--up)}
.eyebrow.violet{background:rgba(124,110,224,.12); color:var(--violet)}
.eyebrow.gold{background:rgba(199,154,46,.13); color:var(--gold)}
.muted{color:var(--muted)}
.center{text-align:center}
section{padding:clamp(56px,8vw,104px) 0}
.sec-head{max-width:720px; margin:0 auto clamp(38px,5vw,60px); text-align:center}
.sec-head p{margin-top:16px}

/* ---------- tarjetas ---------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:30px; box-shadow:var(--shadow);
}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .g3,.g4{grid-template-columns:1fr} .g2{grid-template-columns:1fr} }

/* ---------- tarjetas de precio ---------- */
.plans{display:grid; gap:22px; grid-template-columns:repeat(3,1fr); align-items:start}
@media(max-width:960px){ .plans{grid-template-columns:1fr; max-width:460px; margin:0 auto} }
.plan{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.plan:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.plan.featured{border-color:var(--blue); box-shadow:var(--shadow-lg)}
.plan.featured::before{
  content:attr(data-badge); position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff; font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:99px; white-space:nowrap; letter-spacing:.02em;
}
.plan.pro{border-color:var(--violet)}
.plan.pro::before{content:attr(data-badge); position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--violet); color:#fff; font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:99px; white-space:nowrap}
.plan-name{font-size:17px; font-weight:700; margin-bottom:6px}
.plan-desc{font-size:13.5px; color:var(--muted); line-height:1.55; min-height:42px}
.price{display:flex; align-items:baseline; gap:3px; margin:20px 0 4px}
.price .cur{font-size:22px; font-weight:700}
.price .num{font-size:46px; font-weight:800; letter-spacing:-.035em; line-height:1}
.price .per{font-size:14px; color:var(--muted); font-weight:500; margin-left:4px}
.price-note{font-size:12.5px; color:var(--muted); min-height:18px}
.plan .btn{margin:22px 0 20px}
.feats{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.feats li{display:flex; gap:10px; font-size:14px; line-height:1.5; align-items:flex-start}
.feats svg{flex:0 0 16px; margin-top:3px; color:var(--up)}
.feats .no{color:var(--muted)}
.feats .no svg{color:var(--muted); opacity:.55}
.feat-head{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin:20px 0 12px; padding-top:18px; border-top:1px solid var(--line);
}

/* ---------- toggle publico ---------- */
.switch{
  display:inline-flex; padding:5px; gap:4px; border-radius:99px;
  background:var(--soft); border:1px solid var(--line);
}
.switch button{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  padding:10px 22px; border-radius:99px; border:none; background:transparent;
  color:var(--muted); transition:all .18s ease;
}
.switch button.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
body[data-v="dark"] .switch button.on{background:#1c222e}

/* ---------- pasos ---------- */
.steps{display:grid; gap:20px; grid-template-columns:repeat(4,1fr); counter-reset:s}
@media(max-width:900px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-top:8px}
.step .n{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:rgba(28,149,236,.1); color:var(--blue); font-weight:800; font-size:15px;
  margin-bottom:16px;
}
.step h3{font-size:17px; margin-bottom:9px}
.step p{font-size:14.5px; color:var(--muted)}

/* ---------- niveles (v3) ---------- */
.level{
  display:grid; grid-template-columns:76px 1fr auto; gap:26px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:30px; box-shadow:var(--shadow); margin-bottom:18px;
}
@media(max-width:840px){ .level{grid-template-columns:1fr; gap:18px} }
.level-n{
  width:70px; height:70px; border-radius:20px; display:grid; place-items:center;
  font-size:26px; font-weight:800; color:#fff;
}
.level-1 .level-n{background:linear-gradient(135deg,#12b76a,#0e9257)}
.level-2 .level-n{background:linear-gradient(135deg,#1c95ec,#1272bb)}
.level-3 .level-n{background:linear-gradient(135deg,#7c6ee0,#5d4fc4)}
.level-price{text-align:right; min-width:170px}
@media(max-width:840px){ .level-price{text-align:left} }

/* ---------- comparativa ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th,.tbl td{padding:15px 16px; text-align:left; border-bottom:1px solid var(--line)}
.tbl th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.tbl td.c,.tbl th.c{text-align:center}
.tbl tr:last-child td{border-bottom:none}
.tbl .yes{color:var(--up); font-weight:700}
.tbl .nope{color:var(--muted); opacity:.5}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}

/* ---------- aviso / callout ---------- */
.callout{
  display:flex; gap:16px; padding:22px 24px; border-radius:14px;
  background:rgba(28,149,236,.06); border:1px solid rgba(28,149,236,.18);
  font-size:14.5px; line-height:1.6;
}
.callout.violet{background:rgba(124,110,224,.07); border-color:rgba(124,110,224,.2)}
.callout.green{background:rgba(18,183,106,.06); border-color:rgba(18,183,106,.2)}
.callout .ic{flex:0 0 auto; font-size:19px; line-height:1.3}

/* ---------- faq ---------- */
.faq{max-width:800px; margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%; background:none; border:none; font:inherit; cursor:pointer; color:var(--ink);
  padding:22px 40px 22px 0; text-align:left; font-size:16.5px; font-weight:600;
  position:relative; line-height:1.4;
}
.q button::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:23px; font-weight:400; color:var(--muted); transition:transform .22s ease;
}
.q.open button::after{transform:translateY(-50%) rotate(45deg)}
.q .a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.q .a p{padding:0 30px 24px 0; color:var(--muted); font-size:15px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:52px 0 34px; background:var(--soft)}
.foot-in{display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.disclaimer{
  margin-top:34px; padding-top:24px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); line-height:1.6; max-width:780px;
}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* el atributo hidden debe ganar a display:grid/flex */
[hidden]{display:none !important}