:root{--bg:#0B0C0F; --panel:#121419; --panel-2:#181B21; --line:#262A33; --text:#F1F1F3; --muted:#9A9FAA; --red:#FE3B46; --red-ink:#FF6B74; --gold:#E8B33B; --silver:#C9CED6; --teal:#2BD4BD;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --head:"Outfit","Barlow",system-ui,sans-serif; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.55 var(--sans); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.wrapx{width:min(1160px, 100% - 40px); margin:0 auto}
.nav{position:sticky; top:0; z-index:20; background:rgba(11,12,15,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .wrapx{display:flex; align-items:center; gap:22px; height:64px}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font:700 23px/1 var(--head); letter-spacing:-.015em}
.logo img{width:30px; height:26px}
.logo b{color:var(--red); font-weight:700}
.nav .links{display:flex; gap:20px; margin-left:12px}
.nav .links a{text-decoration:none; color:var(--muted); font-weight:500}
.nav .links a:hover, .nav .links a[aria-current]{color:var(--text)}
.nav .right{margin-left:auto; display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); text-decoration:none; padding:10px 18px; border-radius:4px; font:700 15px/1 var(--sans); cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--text)}
.btn.big{padding:15px 24px; font-size:16px}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#141005}
.btn[disabled]{opacity:.55; cursor:not-allowed}
h1,h2,h3{font-family:var(--head); letter-spacing:-.02em; margin:0}
.eyebrow-free{color:var(--red-ink); font-weight:600}
footer{border-top:1px solid var(--line); margin-top:90px; padding:28px 0 40px; color:var(--muted); font-size:14px}
footer .wrapx{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer a{text-decoration:none} footer a:hover{color:var(--text)}
footer .sp{margin-left:auto}
/* forms */
.field{display:grid; gap:6px; margin-bottom:14px}
.field label{font-size:14px; color:var(--muted)}
.field input{background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:12px 13px; color:var(--text); font:16px var(--sans); outline:none}
.field input:focus{border-color:var(--red)}
.err{color:var(--red-ink); font-size:14px; min-height:1.3em; margin:2px 0 10px}
.ok{color:var(--teal); font-size:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:8px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 16px; border-radius:4px; font-weight:600; opacity:0; transition:opacity .2s; pointer-events:none; z-index:50}
.toast.on{opacity:1}
/* pricing cards (compartidas) */
.period{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:6px; max-width:780px; margin:0 auto}
.period button{background:none; border:none; color:var(--muted); padding:11px 8px; border-radius:4px; font:700 15px/1 var(--sans); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap}
.period button[aria-pressed="true"]{background:var(--panel-2); color:var(--text)}
.period .save{background:#3E44D8; color:#fff; font-size:11px; padding:3px 7px; border-radius:20px}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px}
.plan{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:34px 30px 30px; display:flex; flex-direction:column; text-align:center}
.plan.silver{border-color:#3a3e47}
.plan.gold{border-color:rgba(232,179,59,.6); box-shadow:0 0 0 1px rgba(232,179,59,.25), 0 20px 60px rgba(232,179,59,.07)}
.tier{align-self:center; border:1px solid var(--line); border-radius:5px; padding:4px 14px; font:600 17px/1.2 var(--head)}
.plan.silver .tier{border-color:var(--silver); color:var(--silver)}
.plan.gold .tier{border-color:var(--gold); color:var(--gold)}
.popular{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#141005; font:700 12px/1 var(--sans); padding:5px 10px; border-radius:20px; white-space:nowrap}
.price{font:600 40px/1.1 var(--head); margin-top:18px}
.price small{font-size:18px}
.per{color:var(--muted); font-size:14px; min-height:42px}
.plan hr{border:none; border-top:1px solid var(--line); margin:20px 0 22px; width:100%}
.feats{list-style:none; margin:0 0 26px; padding:0; text-align:left; display:grid; gap:13px; flex:1}
.feats li{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start}
.feats li::before{content:""; width:20px; height:20px; border-radius:50%; background:#2b2f37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; margin-top:2px}
.plan.silver .feats li::before{background-color:#3a3e47}
.plan.gold .feats li::before{background-color:rgba(232,179,59,.25); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B33B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
.feats li.no{color:var(--muted)}
.feats li.no::before{background:#22252b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .btn{width:100%}
@media (max-width: 900px){ .plans{grid-template-columns:1fr} .nav .links{display:none} }