/* ============================================================
   REMESAFÁCIL DESIGN SYSTEM — treat as code, nothing off-scale
   (same token system as the rippex reference build, teal accent)
   Spacing 4 8 12 16 24 32 48 64 96 · Type 14 17 20 27 44 (+lead 21)
   LH bound to size · Weight 400/500/600 · Radius 8/12 · Measure ≤66ch
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --fs-cap:14px; --fs-body:17px; --fs-lead:21px; --fs-h3:20px; --fs-h2:27px; --fs-h1:44px;
  --r-1:8px; --r-2:12px; --measure:66ch; --maxw:1040px; --maxw-read:720px;
  --bg:#ffffff; --bg-soft:#f5f8f7; --ink:#11201c; --muted:#566460; --faint:#8b9a95;
  --line:#e7edea; --accent:#0d9488; --good:#16a34a;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:var(--fs-body);line-height:1.6;font-weight:400;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}
a{color:inherit;text-decoration:none}
p{color:var(--muted);max-width:var(--measure)}

header{border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--sp-8)}
.word{font-size:var(--fs-body);font-weight:600;letter-spacing:-.02em}
.nav nav{display:flex;align-items:center;gap:var(--sp-6)}
.nav nav a{font-size:var(--fs-cap);color:var(--muted)}
.nav nav a:hover,.nav nav a.on{color:var(--ink)}
.nav .go{color:var(--accent);font-weight:500}
@media (max-width:760px){ .nav nav a.hide{display:none} }

.primary{display:inline-block;background:var(--ink);color:#fff;font-size:var(--fs-cap);font-weight:500;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-1)}
.primary:hover{background:#000}
.textlink{color:var(--accent);font-size:var(--fs-cap);font-weight:500}

.hero{padding:var(--sp-9) 0}
.hero h1{font-size:var(--fs-h1);line-height:1.08;font-weight:600;letter-spacing:-.035em;margin:0 0 var(--sp-5);max-width:16ch}
.hero p{font-size:var(--fs-lead);line-height:1.5;margin:0 0 var(--sp-6)}
.actions{display:flex;align-items:center;gap:var(--sp-5)}
.context{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--line);color:var(--faint);font-size:var(--fs-cap);max-width:var(--measure)}

section{padding:var(--sp-6) 0}
.lbl{font-size:var(--fs-cap);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.02em;margin:0 0 var(--sp-5)}

.prose{max-width:var(--maxw-read);padding:var(--sp-8) 0 var(--sp-6)}
.prose .byline{color:var(--faint);font-size:var(--fs-cap);margin:0 0 var(--sp-5)}
.prose h1{font-size:var(--fs-h1);line-height:1.1;font-weight:600;letter-spacing:-.035em;margin:0 0 var(--sp-4);max-width:20ch}
.prose .lede{font-size:var(--fs-lead);line-height:1.5;color:var(--muted);margin:0 0 var(--sp-6)}
.prose h2{font-size:var(--fs-h2);line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:var(--sp-8) 0 var(--sp-3)}
.prose h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600;margin:var(--sp-6) 0 var(--sp-2)}
.prose p{margin:0 0 var(--sp-4)}
.prose ul,.prose ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5);color:var(--muted);max-width:var(--measure)}
.prose li{margin:var(--sp-2) 0}
.prose a:not(.primary):not(.textlink):not(.buy){color:var(--accent)}
.prose strong,.prose b{color:var(--ink);font-weight:600}

.disc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-1);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-cap);color:var(--faint);margin:var(--sp-5) 0;max-width:none}
.note{border-left:2px solid var(--accent);background:var(--bg-soft);border-radius:0 var(--r-1) var(--r-1) 0;padding:var(--sp-4);margin:var(--sp-5) 0;font-size:var(--fs-body)}
.warn{border-left:2px solid #d23f3f;background:#fdf5f5;border-radius:0 var(--r-1) var(--r-1) 0;padding:var(--sp-4);margin:var(--sp-5) 0;font-size:var(--fs-cap);color:#7a2f2f;max-width:none}
.tldr{border:1px solid var(--line);background:var(--bg-soft);border-radius:var(--r-2);padding:var(--sp-5);margin:var(--sp-5) 0}
.tldr p{margin:0}

.steps{counter-reset:s;margin:var(--sp-5) 0;border-top:1px solid var(--line)}
.step{border-bottom:1px solid var(--line);padding:var(--sp-5) 0;display:flex;gap:var(--sp-4)}
.step:before{counter-increment:s;content:counter(s);flex:none;width:var(--sp-6);height:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-1);display:flex;align-items:center;justify-content:center;font-size:var(--fs-cap);font-weight:600;color:var(--accent)}
.step h3{margin:var(--sp-1) 0 var(--sp-2);font-size:var(--fs-h3);font-weight:600}
.step p{margin:0}

.lead-row{display:block;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-6)}
.lead-row:hover{border-color:#d3ddd9}
.lead-row h2{font-size:var(--fs-h2);line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0 0 var(--sp-3)}
.lead-row p{margin:0}
.lead-row .more{display:inline-block;margin-top:var(--sp-4);color:var(--accent);font-size:var(--fs-cap);font-weight:500}

.list{margin-top:var(--sp-2);border-top:1px solid var(--line)}
.row{display:flex;align-items:baseline;gap:var(--sp-5);padding:var(--sp-5) var(--sp-1);border-bottom:1px solid var(--line)}
.row:hover{background:#fafcfb}
.row .h{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;min-width:240px}
.row .d{font-size:var(--fs-cap);color:var(--muted);flex:1}
.row .a{font-size:var(--fs-cap);color:var(--accent);font-weight:500;white-space:nowrap}
@media (max-width:760px){ .row{flex-direction:column;gap:var(--sp-1)} .row .h{min-width:0} }

.cmp{width:100%;border-collapse:collapse;margin:var(--sp-5) 0;font-size:var(--fs-cap)}
.cmp th,.cmp td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{color:var(--faint);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.02em}
.cmp td:first-child{font-weight:600;color:var(--ink)}
.cmp .yes{color:var(--good);font-weight:600}

.pick{border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-5);margin:var(--sp-4) 0}
.pick-head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.pick-logo{flex:none;height:var(--sp-7);min-width:var(--sp-9);padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-1);background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-body);letter-spacing:-.02em}
.pick-title{font-size:var(--fs-h3);font-weight:600;margin:0}
.pick-rank{font-size:13px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.pick-price{margin-left:auto;font-size:var(--fs-cap);color:var(--muted);font-weight:500;white-space:nowrap}
.pick-best{color:var(--accent);font-size:var(--fs-cap);font-weight:500;margin:0 0 var(--sp-3)}
.pick p{margin:0 0 var(--sp-3)}
.pc{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin:var(--sp-3) 0}
.pc ul{margin:0;padding-left:var(--sp-5);font-size:var(--fs-cap);flex:1;min-width:220px}
.pc .pro li{color:var(--muted)} .pc .con li{color:var(--faint)}
.buy{display:inline-block;margin-top:var(--sp-2);background:var(--accent);color:#fff;font-size:var(--fs-cap);font-weight:500;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-1)}
.buy:hover{background:#0b7d73}
.buy.alt{background:#fff;color:var(--ink);border:1px solid var(--line)}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7);padding:var(--sp-7) 0 var(--sp-2)}
@media (max-width:760px){ .trust{grid-template-columns:1fr;gap:var(--sp-5)} }
.trust h3{font-size:var(--fs-h3);font-weight:600;margin:0 0 var(--sp-2)}
.trust p{font-size:var(--fs-cap)}

.faq{margin:var(--sp-4) 0;border-top:1px solid var(--line)}
.faq dt{font-size:var(--fs-h3);font-weight:600;margin:0;padding:var(--sp-5) 0 var(--sp-2)}
.faq dd{margin:0 0 var(--sp-5);color:var(--muted);max-width:var(--measure)}

.related{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin:var(--sp-5) 0}
.related a{flex:1;min-width:240px;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-4);font-weight:600}
.related a:hover{border-color:#d3ddd9}
.related a span{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-cap);margin-top:var(--sp-1)}

footer{border-top:1px solid var(--line);margin-top:var(--sp-8);padding:var(--sp-6) 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);color:var(--faint);font-size:var(--fs-cap)}
footer a{color:var(--faint)} footer a:hover{color:var(--ink)}