:root{
  --bg:#F4F6EE; --raised:#FFFFFF; --ink:#15200B; --ink-soft:#4E5942;
  --accent:#74D40C; --line:#E0E4D2; --on-accent:#0E2207;
  --maxw:1140px;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --disp:'Bricolage Grotesque',var(--sans);
  --shadow:0 30px 70px -44px rgba(22,21,15,.5);
  --anim-dur:500ms; --anim-ease:cubic-bezier(0.16,1,0.3,1); --anim-ease-soft:cubic-bezier(0.22,0.61,0.36,1); --anim-rise:20px; --anim-stagger:70ms;
}
[data-mode="dark"]{
  --bg:#0F1408; --raised:#162010; --ink:#F0F6E2; --ink-soft:#A6B294;
  --accent:#9CF03A; --line:#243A1B; --on-accent:#0E2207;
  --shadow:0 30px 70px -38px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
::selection{background:var(--accent); color:var(--on-accent)}
body{font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .4s, color .4s}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
h1,h2,h3,.disp{font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.04}
p{color:var(--ink-soft)}
a{color:inherit; text-decoration:none}
.accent{color:var(--accent)}
.kicker{display:inline-flex; align-items:center; gap:.6rem; font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.kicker .sq{width:8px; height:8px; background:var(--accent); display:inline-block}
/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:.96rem; padding:.85rem 1.5rem; border-radius:2px; border:1.5px solid transparent; cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, box-shadow .25s}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:0 12px 26px -16px var(--accent)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 38px -18px var(--accent)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--bg); transform:translateY(-3px)}
/* header */
header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow 250ms var(--anim-ease), background-color 250ms var(--anim-ease)}
header.is-scrolled{background:color-mix(in srgb, var(--bg) 94%, transparent); box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--ink) 22%, transparent)}
.nav{display:flex; align-items:center; gap:24px; height:72px}
.brand{font-family:var(--disp); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; display:flex; align-items:center; gap:.55rem}
.brand-dot{width:12px; height:12px; background:var(--accent); border-radius:3px}
.brand-logo{height:26px; width:auto; display:block}
.foot-logo{height:32px}
.nav-links{display:flex; gap:1.8rem; margin-left:auto; font-size:.92rem; font-weight:500}
.nav-links a{color:var(--ink-soft); transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:.6rem 1.1rem; font-size:.88rem}
.burger{display:none; flex-direction:column; gap:5px; margin-left:auto; background:none; border:0; cursor:pointer; padding:6px}
.burger span{width:24px; height:2px; background:var(--ink); transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none; flex-direction:column; padding:0 28px; max-height:0; overflow:hidden; transition:max-height .35s ease; border-top:1px solid var(--line)}
.mobile-menu.open{max-height:420px}
.mobile-menu a{padding:15px 0; font-weight:500; border-bottom:1px solid var(--line)}
.mobile-menu a.btn{margin:16px 0; border:0; justify-content:center}
@media(max-width:900px){.nav-links,.nav-cta{display:none} .burger{display:flex} .mobile-menu{display:flex}}
/* reveal */
.reveal{opacity:0; transform:translateY(var(--anim-rise)); transition:opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); transition-delay:calc(var(--i,0) * var(--anim-stagger)); will-change:opacity, transform}
.reveal.in{opacity:1; transform:none}
/* hero */
.hero{padding:92px 0 70px}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem); font-weight:800; margin:1.4rem 0; max-width:16ch}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; margin-top:24px; padding-top:40px; border-top:1px solid var(--line)}
.hero-lede p{font-size:1.2rem; color:var(--ink); max-width:42ch; margin-bottom:1.8rem}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap}
@keyframes ficha-rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes ficha-fade{from{opacity:0} to{opacity:1}}
@keyframes estrellas-fill{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes ficha-rise-soft{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.gcard{animation:ficha-rise-soft 900ms var(--anim-ease-soft) both}
.gcard .gc-rating .gc-stars{display:inline-block; animation:estrellas-fill 950ms var(--anim-ease-soft) 800ms both}
.gcard .gc-review{animation:ficha-fade 850ms ease 1200ms both}
.gcard .gc-reply{animation:ficha-rise-soft 850ms var(--anim-ease-soft) 1650ms both}
.hero-show{display:flex; justify-content:flex-end}
.gcard{position:relative; width:100%; max-width:430px; background:var(--raised); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow)}
.gc-top{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.gc-logo{width:54px;height:54px;border-radius:13px; background:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--disp); font-weight:700; font-size:1.7rem; color:#fff; overflow:hidden; border:1px solid var(--line)}
.gc-logo img{width:70%; height:70%; object-fit:contain; display:block}
.gc-name{font-family:var(--disp); font-weight:700; font-size:1.3rem; line-height:1.1}
.gc-cat{font-size:.85rem; color:var(--ink-soft)}
.gc-rating{display:flex; align-items:center; gap:.5rem; margin-bottom:14px}
.gc-rating b{font-family:var(--disp); font-weight:800; font-size:1.5rem}
.gc-stars{color:#E8A317; letter-spacing:1px}
.gc-stars.sm{font-size:.8rem}
.gc-count{font-size:.85rem; color:var(--ink-soft)}
.gc-photos{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:16px}
.gc-photos div{aspect-ratio:1; border-radius:8px; background:linear-gradient(135deg,#ecd9bd,#cdbb93); overflow:hidden; position:relative}
.gc-photos div:nth-child(2){background:linear-gradient(135deg,#cdd8c2,#93a583)}
.gc-photos div:nth-child(3){background:linear-gradient(135deg,#ecd2c2,#cfa78f)}
.gc-photos div:nth-child(4){background:linear-gradient(135deg,#dfe2ea,#aeb6c6)}
.gc-photos img{width:100%; height:100%; object-fit:cover; display:block}
.gc-review{border-top:1px solid var(--line); padding-top:16px}
.gc-rev-head{display:flex; gap:10px; align-items:center; margin-bottom:8px}
.gc-ava{width:34px;height:34px;border-radius:50%; background:#c7b59e; color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.9rem; flex:none}
.gc-rev-name{font-weight:600; font-size:.92rem}
.gc-rev-text{font-size:.92rem; color:var(--ink); margin-bottom:12px}
.gc-reply{background:var(--bg); border-radius:10px; padding:12px 14px; border:1px solid var(--line)}
.gc-reply span{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent)}
.gc-reply p{font-size:.88rem; color:var(--ink-soft); margin-top:4px}
@media(max-width:900px){.hero-show{justify-content:flex-start} .gcard{max-width:100%}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr; gap:40px}}
/* strip */
.strip{overflow:hidden; border-block:1px solid var(--line); padding:16px 0}
.strip-track{display:flex; width:max-content; animation:scroll 38s linear infinite; align-items:center}
.strip-track span{font-size:.86rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:0 16px; white-space:nowrap}
.strip-track .sep{color:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}
/* sections */
.sec{padding:96px 0}
.tint{background:var(--raised); border-block:1px solid var(--line)}
.sec-head{max-width:680px; margin-bottom:54px}
.sec-head h2{font-size:clamp(2.1rem,4.2vw,3.3rem); margin:1rem 0 1rem}
.sec-lede{font-size:1.1rem; max-width:58ch}
/* rows (problema) */
.rows{display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px}
@media(max-width:760px){.rows{grid-template-columns:1fr}}
.row{display:grid; grid-template-columns:auto 1fr; gap:8px 22px; align-items:baseline; padding:30px 0; border-top:1px solid var(--line)}
.row-n{font-family:var(--disp); font-weight:700; font-size:1rem; color:var(--accent)}
.row h3{grid-column:2; font-size:1.35rem; margin-bottom:.4rem}
.row p{grid-column:2; font-size:1rem; max-width:46ch}
/* method */
.method{display:grid; grid-template-columns:repeat(4,1fr); gap:34px}
@media(max-width:900px){.method{grid-template-columns:repeat(2,1fr); gap:34px 28px}}
@media(max-width:520px){.method{grid-template-columns:1fr}}
.met-n{font-family:var(--disp); font-weight:800; font-size:2.2rem; color:var(--accent); display:block}
.met h3{font-size:1.3rem; margin:1rem 0 .5rem}
.met p{font-size:.96rem}
.met{padding-top:20px; border-top:2px solid var(--ink)}
/* before/after */
@property --pos{syntax:'<percentage>'; inherits:true; initial-value:40%}
@keyframes ba-hint{0%{--pos:40%} 28%{--pos:18%} 62%{--pos:54%} 100%{--pos:40%}}
.ba.in{animation:ba-hint 1.4s var(--anim-ease-soft) 450ms 1}
.ba{position:relative; --pos:40%; width:100%; max-width:760px; margin:0 auto; border:1px solid var(--ink); border-radius:6px; overflow:hidden; user-select:none; touch-action:pan-y; box-shadow:var(--shadow); aspect-ratio:16/10}
.ba-panel{position:absolute; inset:0; padding:30px; background:var(--raised); display:flex; flex-direction:column; gap:16px}
.ba-before{background:#efece4; clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
[data-mode="dark"] .ba-before{background:#262019}
.ba-tag{align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .7rem; border-radius:2px}
.tag-after{background:var(--accent); color:var(--on-accent)}
.tag-before{background:var(--ink); color:var(--bg)}
.p-top{display:flex; gap:14px; align-items:center}
.p-logo{width:52px;height:52px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-family:var(--disp); font-weight:700; font-size:1.6rem; color:#fff}
.p-logo.good{background:linear-gradient(135deg,var(--accent),#5da308)}
.p-logo.dull{background:#b6b0a2}
.p-name{font-weight:700; font-size:1.15rem}
.p-cat{font-size:.86rem; color:var(--ink-soft)}
.dim{color:#9b9486 !important}
.p-rating{display:flex; align-items:center; gap:.6rem}
.p-rating b{font-family:var(--disp); font-weight:800; font-size:2rem}
.stars{letter-spacing:2px; font-size:1.1rem}
.stars.good{color:#E8A317}
.stars.dull{color:#b9b2a3}
.p-count{font-size:.9rem; color:var(--ink-soft)}
.p-photos{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.p-photos div{aspect-ratio:1; border-radius:6px; background:linear-gradient(135deg,#ecd9bd,#cdbb93); overflow:hidden; position:relative}
.p-photos div img{width:100%; height:100%; object-fit:cover; display:block}
.p-photos div:nth-child(2){background:linear-gradient(135deg,#cdd8c2,#93a583)}
.p-photos div:nth-child(3){background:linear-gradient(135deg,#ecd2c2,#cfa78f)}
.p-photos div:nth-child(4){background:linear-gradient(135deg,#ded8c7,#b3ac94)}
.p-photos.dull{filter:grayscale(.55) contrast(.9) brightness(.92)}
.p-photos.dull div{background:#d8d3c6 !important}
.p-flags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto}
.flag{font-size:.78rem; font-weight:600; padding:.34rem .6rem; border-radius:3px}
.flag.ok{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent)}
.flag.bad{background:#e4ddd0; color:#8a8275}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--accent); transform:translateX(-1px); pointer-events:none}
.ba-line{position:absolute; inset:0}
.ba-grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:1rem; letter-spacing:1px; box-shadow:0 6px 18px -6px rgba(0,0,0,.4)}
.ba input[type=range]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
@media(max-width:720px){
  .ba{max-width:560px; aspect-ratio:4/3}
  .ba-panel{padding:24px; gap:14px}
  .p-logo{width:46px; height:46px; border-radius:9px; font-size:1.35rem}
  .p-name{font-size:1.05rem}
  .p-cat{font-size:.8rem; line-height:1.35}
  .p-rating{gap:.45rem; flex-wrap:wrap}
  .p-rating b{font-size:1.65rem}
  .stars{font-size:.98rem; letter-spacing:1px}
  .p-count{font-size:.82rem}
  .flag{font-size:.72rem; padding:.3rem .5rem}
  .ba-grip{width:38px; height:38px; font-size:.9rem}
}
@media(max-width:560px){
  .ba{aspect-ratio:auto; min-height:620px; max-width:420px}
  .ba-panel{padding:22px; gap:14px}
  .p-top{gap:12px; align-items:flex-start}
  .p-photos{grid-template-columns:repeat(2,1fr); gap:8px}
  .p-flags{margin-top:0}
}
@media(max-width:390px){
  .ba{min-height:590px}
  .ba-panel{padding:18px; gap:12px}
  .ba-tag{font-size:.64rem; padding:.28rem .58rem}
  .p-logo{width:42px; height:42px; font-size:1.25rem}
  .p-name{font-size:1rem}
  .p-cat{font-size:.76rem}
  .p-rating b{font-size:1.5rem}
  .stars{font-size:.88rem}
  .p-count{font-size:.76rem}
  .flag{font-size:.68rem}
  .ba-grip{width:36px; height:36px}
}
/* checklist */
.checklist{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:980px}
@media(max-width:880px){.checklist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.checklist{grid-template-columns:1fr}}
.ck{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; background:var(--raised); border:1px solid var(--line); border-radius:10px; font-weight:500; font-size:.96rem; line-height:1.35; color:var(--ink); transition:transform .2s var(--anim-ease), box-shadow .2s var(--anim-ease), border-color .2s var(--anim-ease)}
.ck:hover{transform:translateY(-3px); box-shadow:0 10px 24px -14px color-mix(in srgb, var(--ink) 40%, transparent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.ck .tick{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-weight:700; font-size:.76rem; flex:none; margin-top:1px}
.qr-aside{display:flex; gap:26px; align-items:center; margin-top:28px; padding:28px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius:14px; background:color-mix(in srgb, var(--accent) 7%, var(--raised)); max-width:980px}
.qr-img{flex:none; width:132px; height:132px; border-radius:10px; border:1px solid var(--line); background:#fff; padding:10px}
.qr-aside h3{font-size:1.3rem; margin-bottom:.35rem}
.qr-aside p{font-size:.97rem; max-width:60ch}
@media(max-width:560px){.qr-aside{flex-direction:column; align-items:flex-start; text-align:left}}
/* timeline */
.timeline{position:relative; max-width:760px; padding-left:44px}
.timeline::before{content:""; position:absolute; left:13px; top:6px; bottom:6px; width:2px; background:var(--line)}
.step{position:relative; padding-bottom:36px}
.step:last-child{padding-bottom:0}
.step .knob{position:absolute; left:-44px; top:-2px; width:28px;height:28px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex;align-items:center;justify-content:center; font-family:var(--disp); font-weight:700; font-size:.9rem}
.step h3{font-size:1.25rem; margin-bottom:.3rem}
.step p{font-size:.98rem; max-width:54ch}
/* pricing */
.price{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; max-width:1140px}
@media(max-width:920px){.price{grid-template-columns:1fr; max-width:460px; margin-inline:auto}}
.plan{position:relative; background:var(--raised); border:1px solid var(--line); border-radius:6px; padding:36px; display:flex; flex-direction:column; transition:transform 200ms var(--anim-ease), box-shadow 200ms var(--anim-ease)}
.plan:hover{transform:translateY(-3px); box-shadow:0 12px 28px -8px color-mix(in srgb, var(--ink) 16%, transparent)}
.plan.feat:hover{transform:translateY(-5px); box-shadow:0 18px 40px -10px color-mix(in srgb, var(--accent) 32%, transparent)}
.plan.feat{background:color-mix(in srgb, var(--accent) 10%, var(--raised)); color:var(--ink); border:2px solid var(--accent); padding-top:46px}
.plan-k{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.7rem}
.plan.feat .plan-k{color:var(--accent)}
.plan h3{font-size:1.5rem; margin-bottom:.5rem}
.plan>p{font-size:.96rem; margin-bottom:.5rem}
.plan-tag{position:absolute; top:-12px; left:36px; background:var(--accent); color:var(--on-accent); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.36rem .8rem; border-radius:2px}
.plan .amount{font-family:var(--disp); font-weight:800; font-size:2.7rem; color:var(--accent); margin:.4rem 0 1.2rem; line-height:1}
.plan .amount small{font-size:.9rem; font-weight:500; color:var(--ink-soft); font-family:var(--sans)}
.plan ul{list-style:none; margin-bottom:1.6rem; display:flex; flex-direction:column; gap:.7rem}
.plan li{font-size:.95rem; padding-left:24px; position:relative}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700}
.plan .btn{margin-top:auto; justify-content:center}
.bridge{max-width:780px; margin:-26px 0 32px; font-size:1.06rem; color:var(--ink)}
.specs{list-style:none; margin-bottom:1.6rem; display:flex; flex-direction:column; gap:0}
.specs li{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.specs li::before{content:none !important}
.specs li span{color:var(--ink-soft)}
.specs li b{font-weight:600; text-align:right}
.specs li b.na{color:#b3ac9e; font-weight:500}
.price-note{margin-top:24px; font-size:.92rem; color:var(--ink-soft)}
/* creed */
.creed{background:color-mix(in srgb, var(--ink) 78%, var(--accent)); color:var(--bg)}
.creed .kicker{color:color-mix(in srgb, var(--bg) 70%, transparent)}
.creed-h{font-size:clamp(2rem,4.6vw,3.4rem); color:var(--bg); max-width:20ch; margin:1.2rem 0 1.2rem}
.creed .sec-lede{color:color-mix(in srgb, var(--bg) 80%, transparent); margin-bottom:36px}
.creed-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; max-width:900px}
@media(max-width:600px){.creed-list{grid-template-columns:1fr}}
.creed-list div{display:flex; gap:14px; align-items:center; font-weight:500; padding:16px 0; border-bottom:1px solid color-mix(in srgb, var(--bg) 18%, transparent)}
.creed-list .x{flex:none; color:var(--accent); font-weight:700}
/* form */
.form-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:54px; align-items:start}
@media(max-width:880px){.form-grid{grid-template-columns:1fr; gap:38px}}
.form-title{font-size:clamp(2rem,3.8vw,3rem); margin:1rem 0 1rem}
.form-intro{font-size:1.05rem}
.about{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; padding:24px; margin-top:30px; background:var(--raised); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px}
@media(max-width:600px){.about{grid-template-columns:1fr; text-align:center}}
.about h3{font-size:1.3rem; margin-bottom:.3rem}
.about p{font-size:.95rem}
.avatar{width:96px;height:96px;border-radius:50%; background:linear-gradient(135deg,var(--accent),#b83c18); display:flex;align-items:center;justify-content:center; font-family:var(--disp); font-weight:700; font-size:2.5rem; color:#fff; margin:0 auto; position:relative; overflow:hidden}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
form{background:var(--raised); border:1px solid var(--line); border-radius:6px; padding:32px}
.field{margin-bottom:18px}
.field label{display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.5rem; color:var(--ink-soft)}
.field input,.field textarea{width:100%; font-family:inherit; font-size:.96rem; padding:.7rem .2rem; border:0; border-bottom:1.5px solid var(--line); background:transparent; color:var(--ink); transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:#aaa39400}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--accent)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:480px){.row2{grid-template-columns:1fr}}
form .btn{width:100%; justify-content:center; margin-top:8px}
form .btn:disabled{opacity:.68; cursor:wait; transform:none; box-shadow:none}
.form-status{min-height:1.3em; text-align:center; font-size:.9rem; font-weight:600; margin:14px 0 0}
.form-status.ok{color:var(--accent)}
.form-status.error{color:#b83c18}
.form-micro{text-align:center; font-size:.84rem; color:var(--ink-soft); margin-top:12px}
/* faq */
.faq{max-width:none}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; background:none; border:0; cursor:pointer; text-align:left; padding:22px 0; font-family:var(--disp); font-weight:600; font-size:1.3rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq-toggle{flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; transition:background 300ms var(--anim-ease), color 300ms var(--anim-ease)}
.faq-toggle svg{display:block; transition:transform 300ms var(--anim-ease); transform-origin:center}
.faq-toggle svg line{stroke:currentColor; stroke-width:2}
.faq-q[aria-expanded="true"] .faq-toggle{background:var(--accent); color:var(--on-accent)}
.faq-q[aria-expanded="true"] .faq-toggle svg{transform:rotate(45deg)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows 300ms var(--anim-ease)}
.faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 0 22px; font-size:1rem; max-width:64ch; color:var(--ink-soft)}
/* final */
.final-wrap{padding:40px 0 80px}
.final{text-align:center; background:var(--accent); color:var(--on-accent); border-radius:8px; padding:80px 30px}
.final h2{color:var(--on-accent); font-size:clamp(2rem,4.4vw,3.3rem); max-width:20ch; margin:0 auto 1.2rem}
.final p{color:color-mix(in srgb, var(--on-accent) 86%, transparent); max-width:50ch; margin:0 auto 2rem}
.final .btn-primary{background:var(--ink); color:var(--bg); box-shadow:none}
/* footer */
footer{padding:48px 0 100px; border-top:1px solid var(--line)}
.colophon{display:flex; flex-wrap:wrap; gap:16px 30px; align-items:baseline; justify-content:space-between; padding-top:30px}
.colo-brand{font-family:var(--disp); font-weight:700; font-size:1.2rem; display:flex; align-items:center; gap:.5rem}
.colo-meta{font-size:.86rem; color:var(--ink-soft)}
.links{display:flex; gap:22px; font-size:.86rem; font-weight:500}
.links a:hover{color:var(--accent)}
/* theme switcher */
.themer[hidden]{display:none}
.theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:transparent; color:var(--ink); border:1.5px solid var(--line); cursor:pointer; margin-left:6px; transition:background .2s, color .2s, border-color .2s, transform .2s}
.theme-toggle:hover{background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.theme-toggle .i-sun,.theme-toggle .i-moon{transition:opacity .25s var(--anim-ease), transform .25s var(--anim-ease)}
[data-mode="dark"] .theme-toggle .i-sun{display:none}
[data-mode="dark"] .theme-toggle .i-moon{display:inline}
.theme-toggle .i-moon{display:none}
.theme-toggle .i-sun{display:inline}
/* hero trust teaser */
.hero-trust{display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.hero-trust span{font-size:.85rem; font-weight:600; color:var(--accent); letter-spacing:.01em}

/* pricing steps (2-step sequential layout) */
.pricing-steps{max-width:600px; margin:0 auto}
.ps-step{background:var(--raised); border:1.5px solid var(--line); border-radius:8px; padding:36px; display:flex; flex-direction:column; gap:1.4rem}
.ps-step.step-2{border-color:var(--accent); border-width:2px; background:color-mix(in srgb, var(--accent) 7%, var(--raised))}
.ps-step-top{display:flex; flex-direction:column; gap:.5rem}
.ps-num-tag{display:inline-block; align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding:.28rem .65rem; border:1px solid var(--line); border-radius:2px}
.ps-step.step-2 .ps-num-tag{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.ps-title{font-family:var(--disp); font-size:1.55rem; font-weight:700; line-height:1.1}
.ps-price{font-family:var(--disp); font-weight:800; font-size:2.6rem; color:var(--ink); line-height:1; margin-top:.2rem}
.ps-step.step-2 .ps-price{color:var(--accent)}
.ps-sub{font-size:.88rem; font-weight:500; color:var(--ink-soft); font-family:var(--sans)}
.ps-desc{font-size:.97rem; color:var(--ink-soft); max-width:52ch}
.ps-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem}
.ps-list li{font-size:.97rem; padding-left:24px; position:relative; color:var(--ink-soft)}
.ps-list li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700}
.ps-connector{display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 0 14px}
.ps-arrow{font-size:1.35rem; color:var(--accent); line-height:1}
.ps-connector-label{font-size:.73rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
@media(min-width:901px){
  .pricing-steps{max-width:var(--maxw); display:flex; align-items:stretch}
  .ps-step{flex:1 1 0; min-width:0}
  .ps-step .btn{margin-top:auto}
  .ps-connector{flex:0 0 56px; align-self:stretch; justify-content:center; padding:0}
  .ps-arrow{font-size:0}
  .ps-arrow::before{content:"→"; font-size:1.35rem}
  .ps-connector-label{display:none}
}

/* whatsapp (deshabilitado por ahora) */
.wa{display:none !important}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important}
  .strip-track{animation:none}
}