/* ForjaClip · páginas de conteúdo (ferramentas, comparações, guias). Segue brand/DESIGN-SYSTEM.md v1. */
:root{--bg:#0F0E0D;--s1:#181615;--in:#211E1C;--bd:#332E2B;--tx:#F4F2EF;--mut:#A6A09B;--ac:#FF6A24;--amber:#FFB547;--ok:#4ADE80;--er:#FF8A80;--focus:#FF6A24;--ink:#1A0A02;
 --grad:linear-gradient(135deg,#FF6A24,#FFB547);--glow:rgba(255,106,36,.14);--ring:rgba(255,106,36,.38);--hl:linear-gradient(100deg,#fff 0%,#ffb27a 45%,#ff6a1f 100%);
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
 --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
 --sh1:0 1px 0 rgba(0,0,0,.35);--sh2:0 12px 32px -14px rgba(0,0,0,.6);--sh3:0 24px 64px -20px rgba(0,0,0,.7);
 --ease:cubic-bezier(.2,.7,.2,1);--dur-1:140ms;--dur-2:250ms;--dur-3:700ms;
 --font-display:"Space Grotesk",Geist,system-ui,sans-serif;--font-ui:Geist,"Helvetica Neue",system-ui,sans-serif;--font-mono:"Geist Mono",ui-monospace,monospace;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#FBF6F1;--s1:#FFFCF9;--in:#FFFFFF;--bd:#EADCCF;--tx:#1D1410;--mut:#6F5E52;--ac:#C2410C;--amber:#B45309;--ok:#15803D;--er:#B3261E;--focus:#C2410C;--glow:rgba(194,65,12,.08);--ring:rgba(194,65,12,.3);--hl:linear-gradient(100deg,#b83a09,#e5322d);--sh2:0 12px 32px -18px rgba(60,30,10,.25);color-scheme:light}}
:root[data-theme="light"]{--bg:#FBF6F1;--s1:#FFFCF9;--in:#FFFFFF;--bd:#EADCCF;--tx:#1D1410;--mut:#6F5E52;--ac:#C2410C;--amber:#B45309;--ok:#15803D;--er:#B3261E;--focus:#C2410C;--glow:rgba(194,65,12,.08);--ring:rgba(194,65,12,.3);--hl:linear-gradient(100deg,#b83a09,#e5322d);--sh2:0 12px 32px -18px rgba(60,30,10,.25);color-scheme:light}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ac);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:9;padding:10px 16px;border-radius:var(--r-md);background:var(--in);color:var(--tx)}.skip:focus{left:16px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:760px){.wrap{padding:0 40px}}
.narrow{max-width:760px}

/* navegação */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font:600 19px/1 var(--font-display);letter-spacing:-.02em;color:var(--tx);text-decoration:none;min-height:44px}
.logo img{width:28px;height:28px}
.nav-l{display:flex;align-items:center;gap:var(--sp-2)}
.nav-l a.t{display:none;color:var(--mut);text-decoration:none;font-size:14px;font-weight:500;padding:10px 12px;border-radius:var(--r-md);min-height:44px;align-items:center}
.nav-l a.t:hover{color:var(--tx)}
@media(min-width:760px){.nav-l a.t{display:inline-flex}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);font:600 15px/1 var(--font-ui);text-decoration:none;border:1px solid var(--bd);background:var(--in);color:var(--tx);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-1)}
.btn:hover{border-color:var(--mut);transform:translateY(-1px)}.btn:active{transform:translateY(1px)}
.btn-p{background:var(--grad);color:var(--ink);border-color:rgba(255,255,255,.35);box-shadow:0 10px 30px -12px var(--ac)}
.btn-p:hover{border-color:rgba(255,255,255,.5);box-shadow:0 14px 40px -10px var(--ac)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-lg{min-height:56px;padding:0 30px;font-size:16px}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-p{color:#fff;background:linear-gradient(180deg,#e2561a,#b83a09)}}
:root[data-theme="light"] .btn-p{color:#fff;background:linear-gradient(180deg,#e2561a,#b83a09)}

/* hero */
.hero{position:relative;padding:var(--sp-10) 0 var(--sp-12);isolation:isolate}
.hero::after{content:"";position:absolute;left:50%;bottom:-40px;width:min(900px,100%);height:180px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent);z-index:-1;pointer-events:none}
.crumb{font-size:13px;color:var(--mut);margin:0 0 var(--sp-4)}
.crumb a{color:var(--mut)}
.badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--sp-5);padding:6px 12px;border:1px solid var(--bd);border-radius:var(--r-pill);background:var(--s1);font:500 12px/1.2 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
h1{font:600 clamp(34px,5vw,56px)/1.05 var(--font-display);letter-spacing:-.03em;margin:0 0 var(--sp-5);text-wrap:balance;max-width:16ch}
.hero.wide h1{max-width:20ch}
h1 .hl{background:var(--hl);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(17px,1.6vw,19px);color:var(--mut);max-width:60ch;margin:0 0 var(--sp-8)}
.cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.cta-n{font-size:13px;color:var(--mut);margin:var(--sp-3) 0 0}
.facts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-8) 0 0;padding:0;list-style:none}
.facts li{padding:8px 14px;border:1px solid var(--bd);border-radius:var(--r-pill);background:var(--s1);font-size:13px;color:var(--tx)}
.facts li b{color:var(--ac);font-weight:600}

/* seções */
section{padding:var(--sp-12) 0}
@media(min-width:760px){section{padding:var(--sp-16) 0}}
.eyebrow{font:500 12px/1.2 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin:0 0 var(--sp-3)}
h2{font:600 clamp(26px,3.4vw,38px)/1.12 var(--font-display);letter-spacing:-.025em;margin:0 0 var(--sp-4);text-wrap:balance}
h3{font:600 20px/1.25 var(--font-display);letter-spacing:-.015em;margin:0 0 var(--sp-2)}
.lead{color:var(--mut);max-width:62ch;margin:0 0 var(--sp-8)}
.prose p,.prose li{max-width:68ch}
.prose h2{margin-top:var(--sp-10)}
.prose ul,.prose ol{padding-left:22px}.prose li{margin:.35em 0}
.mut{color:var(--mut)}

/* passos e cartões */
.steps{display:grid;gap:var(--sp-4);grid-template-columns:1fr;counter-reset:s;margin:0;padding:0;list-style:none}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;padding:var(--sp-6);border:1px solid var(--bd);border-radius:var(--r-lg);background:var(--s1)}
.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font:500 13px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ac);margin-bottom:var(--sp-4)}
.steps li p{margin:0;color:var(--mut)}
.grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid.g3{grid-template-columns:repeat(3,1fr)}}
.card{padding:var(--sp-6);border:1px solid var(--bd);border-radius:var(--r-lg);background:var(--s1)}
.card p{margin:0;color:var(--mut)}
.card.hot{border-color:color-mix(in srgb,var(--ac) 55%,var(--bd));box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--ac) 70%,transparent)}
a.card{display:block;text-decoration:none;color:var(--tx);transition:border-color var(--dur-1),transform var(--dur-1) var(--ease),box-shadow var(--dur-2)}
a.card:hover{border-color:var(--mut);transform:translateY(-2px);box-shadow:var(--sh2)}
a.card span.go{display:inline-block;margin-top:var(--sp-3);font-size:14px;font-weight:500;color:var(--ac)}

/* tabela de comparação */
.tbl{width:100%;border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;background:var(--s1)}
.tbl table{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bd)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font:500 12px/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);background:var(--in)}
.tbl thead th.us{color:var(--ac)}
.tbl tbody th{font-weight:500;color:var(--tx);width:34%}
.tbl td.us{color:var(--tx)}
.tbl td{color:var(--mut)}
@media(max-width:620px){.tbl table,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto}.tbl thead{display:none}.tbl tr{padding:12px 16px;border-bottom:1px solid var(--bd)}.tbl tr:last-child{border-bottom:0}.tbl th,.tbl td{padding:4px 0;border:0}.tbl tbody th{width:auto;margin-bottom:4px}.tbl td::before{content:attr(data-l) ": ";font-weight:600;color:var(--tx)}.tbl td.us::before{color:var(--ac)}}
.note{font-size:13px;color:var(--mut);margin:var(--sp-3) 0 0}

/* perguntas */
.faq details{border:1px solid var(--bd);border-radius:var(--r-md);background:var(--s1);margin:0 0 var(--sp-3)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:56px;padding:12px 20px;cursor:pointer;font-weight:500;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--font-mono);color:var(--ac);transition:transform var(--dur-2) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 20px 18px;color:var(--mut)}

/* chamada final */
.endcta{text-align:center;padding:var(--sp-12) var(--sp-6);border:1px solid var(--bd);border-radius:var(--r-xl);background:var(--s1);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--ac) 60%,transparent)}
.endcta h2{margin-bottom:var(--sp-3)}.endcta p{color:var(--mut);margin:0 auto var(--sp-6);max-width:52ch}
.endcta .cta{justify-content:center}

/* rodapé */
footer{border-top:1px solid var(--bd);padding:var(--sp-10) 0 var(--sp-12);margin-top:var(--sp-12);font-size:14px;color:var(--mut)}
.fgrid{display:grid;gap:var(--sp-6);grid-template-columns:1fr 1fr}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.fgrid b{display:block;color:var(--tx);font-weight:600;margin-bottom:var(--sp-2)}
.fgrid ul{list-style:none;margin:0;padding:0}.fgrid li a{display:inline-flex;align-items:center;min-height:36px;color:var(--mut);text-decoration:none}.fgrid li a:hover{color:var(--tx)}
.fgrid .about{grid-column:1/-1}@media(min-width:760px){.fgrid .about{grid-column:auto}}

/* entrada */
@media (prefers-reduced-motion:no-preference){
 .rv{opacity:0;transform:translateY(18px);animation:rv var(--dur-3) var(--ease) forwards}
 .rv.d1{animation-delay:80ms}.rv.d2{animation-delay:160ms}.rv.d3{animation-delay:240ms}
}
@keyframes rv{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* guias (marcação simples: header, h1, .m, h2, listas, .cta, .card, footer) */
.guide{padding-top:var(--sp-6);padding-bottom:var(--sp-12)}
.guide>header{display:flex;align-items:center;gap:var(--sp-3);min-height:56px;margin-bottom:var(--sp-8);font-size:14px}
.guide>header a.b{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 19px/1 var(--font-display);letter-spacing:-.02em;color:var(--tx);text-decoration:none}
.guide>header a.b::before{content:"";width:26px;height:26px;background:url(/favicon.svg) center/contain no-repeat}
.guide>header a.b span{color:inherit}
.guide>header a.m{display:inline-flex;align-items:center;min-height:44px}
.guide h1{max-width:20ch}
.guide h2{font-size:clamp(22px,2.6vw,28px);margin:var(--sp-10) 0 var(--sp-3)}
.guide p,.guide li{color:var(--tx)}
.guide .m{color:var(--mut);font-size:14px}
.guide a.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin:var(--sp-6) 0;padding:0 28px;border-radius:var(--r-pill);background:var(--grad);color:var(--ink);font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.35);box-shadow:0 10px 30px -12px var(--ac);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2)}
.guide a.cta:hover{transform:translateY(-1px);box-shadow:0 14px 40px -10px var(--ac)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .guide a.cta{color:#fff;background:linear-gradient(180deg,#e2561a,#b83a09)}}
:root[data-theme="light"] .guide a.cta{color:#fff;background:linear-gradient(180deg,#e2561a,#b83a09)}
.guide a.card{margin:0 0 var(--sp-3)}
.guide a.card b{display:block;font:600 20px/1.25 var(--font-display);margin-bottom:var(--sp-1)}
.guide a.card span{color:var(--mut)}
.guide>footer{margin-top:var(--sp-12);padding:var(--sp-6) 0 0;border-top:1px solid var(--bd)}
.guide>footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--mut)}