/* ionluz — SEO estático. Identidade 2.0 (canônica, a mesma do app): Papel #FAF9F5,
   Tinta #1A1916, verde-floresta #22713F (acento; texto sobre claro em #1A5531),
   soft #EAF1EB, sinal #C0392B. Sobre fundo escuro o acento legível é #8FD3AE
   (o verde #22713F não passa de 3:1 no breu — nunca usar como texto no escuro).
   Archivo (títulos, stretch 112%) + Inter (corpo, tabular-nums) — tipografia
   própria do site (perf). Zero JS. Aliases legados (--volt, --breu, --tinta…)
   mantêm o NOME e mudam o valor — não renomear. */
/* reusa as fontes já servidas pela landing em /fonts (zero duplicação) */
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin.woff2)format('woff2');font-weight:600 800;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin.woff2)format('woff2');font-weight:400 600;font-display:swap}
/* Fallbacks com MÉTRICAS CASADAS (size-adjust/ascent/descent medidos nas fontes reais
   contra Arial). Sem isso o `swap` reflowa a página inteira quando a webfont chega:
   medido em 2026-07-21, a folha /energia-solar dava CLS 0,18 no mobile (reprova Core
   Web Vitals em 735 páginas de aquisição). Com o fallback casado, a troca é invisível.
   Não "arredondar" esses números — foram medidos, não escolhidos. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto');size-adjust:104.55%;ascent-override:92.78%;descent-override:22.96%;line-gap-override:0%}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto');size-adjust:102.17%;ascent-override:86.13%;descent-override:20.55%;line-gap-override:0%}
:root{--papel:#FAF9F5;--breu:#1A1916;--tinta:#1A1916;--volt:#22713F;--volt-tinta:#1A5531;--mut:#6B6860;--rule:rgba(26,25,22,.12);--card:#fff;--sinal:#C0392B;--soft:#EAF1EB;--soft-line:#CADBCC;--wash:#F1F2EE}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 16px/1.6 Inter,'Inter Fallback',system-ui,sans-serif;font-variant-numeric:tabular-nums}
main{max-width:820px;margin:0 auto;padding:0 20px 40px}
h1,h2,h3{font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;color:var(--breu);line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(1.55rem,4.5vw,2.3rem);font-weight:800;margin:.6rem 0 .3rem}
h2{font-size:clamp(1.2rem,3vw,1.5rem);font-weight:700;margin:2rem 0 .6rem}
h3{font-size:1rem;font-weight:700;margin:0 0 .4rem}
a{color:var(--volt-tinta);text-decoration:none}
a:hover{text-decoration:underline}
/* WCAG 1.4.1: link DENTRO de prosa não pode se distinguir só pela cor — quem não
   percebe a diferença de matiz não enxerga que é link. Sublinhado discreto só no
   texto corrido; navegação, chips, botões e cards seguem sem sublinhado. */
p a,li a,aside.disclosure a,.lead a,.micro a,.disc a,.integrador a,figcaption a,td a,.hp-honest a,.hp-sub a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
p a:hover,li a:hover,aside.disclosure a:hover,.lead a:hover,.micro a:hover,.disc a:hover,td a:hover{
  text-decoration-color:currentColor}
/* botões/CTAs em parágrafo continuam sendo botão, não link de texto */
p a.btn,p a.top-cta,.cta a,.chips a,.ufgrid a{text-decoration:none}
p{margin:.6rem 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* header */
.top{max-width:820px;margin:0 auto;padding:16px 20px 0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.logo{font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;font-weight:800;color:var(--breu);font-size:1.15rem;display:inline-flex;align-items:center;gap:.4rem}
.logo:hover{text-decoration:none}
/* 735 páginas de aquisição só tinham logo + trilha no topo: quem chega da busca não
   tinha nenhum caminho acima da dobra. Barra fina, sem competir com o CTA do corpo. */
.top-cta{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--volt-tinta);
  border:1.5px solid var(--soft-line);border-radius:100px;padding:.45rem .9rem;white-space:nowrap}
.top-cta:hover{text-decoration:none;border-color:var(--volt);background:var(--soft)}
@media(max-width:420px){.top-cta{font-size:.8rem;padding:.4rem .75rem}}
/* .cel (nome legado) agora renderiza o mark canônico: sol de raios #22713F (mesma
   geometria de app/layout.tsx) — data URI inline, zero requisição externa */
.cel{width:18px;height:18px;display:inline-block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%2322713F'/%3E%3Cg stroke='%2322713F' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='12' y1='2.5' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='21.5'/%3E%3Cline x1='2.5' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='21.5' y2='12'/%3E%3Cline x1='5.4' y1='5.4' x2='7.1' y2='7.1'/%3E%3Cline x1='16.9' y1='16.9' x2='18.6' y2='18.6'/%3E%3Cline x1='18.6' y1='5.4' x2='16.9' y2='7.1'/%3E%3Cline x1='7.1' y1='16.9' x2='5.4' y2='18.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.bc{font-size:.82rem;color:var(--mut);flex:1 1 100%}
.bc .sep{margin:0 .35rem;color:rgba(26,25,22,.5)}
.bc [aria-current]{color:var(--tinta);font-weight:600}
/* disclosure */
.disclosure{background:var(--wash);border:1px solid var(--rule);border-left:3px solid var(--volt);border-radius:8px;padding:.9rem 1.1rem;font-size:.9rem;color:#44423C;margin:1rem 0}
.disclosure strong{color:var(--breu)}
.lead{font-size:1.08rem;color:#3E3C36}
.lead strong{color:var(--breu)}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1.2rem 0}
.tile{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:.9rem 1rem;display:flex;flex-direction:column}
.tv{font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;font-weight:800;font-size:1.5rem;color:var(--breu);line-height:1.1}
.tr{font-size:.8rem;color:var(--mut);margin-top:.2rem}
.ts{font-size:.72rem;color:var(--volt-tinta);font-weight:600}
/* CTA — o verde 2.0 é ESCURO: botão sólido pede texto branco (6:1) */
.cta{margin:1.3rem 0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.btn{background:var(--volt);color:#fff!important;font-weight:700;padding:.75rem 1.3rem;border-radius:8px;display:inline-block;font-size:.98rem}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--volt-tinta)!important;border:1.5px solid var(--volt)}
.micro{font-size:.8rem;color:var(--mut)}
/* tabelas */
table{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.9rem}
.anos{overflow-x:auto;display:block;outline-offset:2px}
@media(min-width:560px){.anos{display:table}}
.anos th,.anos td{padding:.5rem .6rem;border-bottom:1px solid var(--rule);text-align:left}
.anos thead th{font-size:.78rem;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
/* rótulo de coluna segue o alinhamento do valor: toda coluna numérica é .n à direita */
.anos thead th:not(:first-child){text-align:right}
.n{text-align:right!important;white-space:nowrap}
/* affordance do scroll horizontal — mesmo padrão da comparativa da home */
.anos-wrap{position:relative}
.anos-swipe{display:none;font-size:.78rem;color:var(--mut);margin:.4rem 0 0}
@media(max-width:559px){
  .anos-wrap::after{content:"";position:absolute;top:0;right:0;bottom:1.4rem;width:36px;
    background:linear-gradient(90deg,rgba(250,249,245,0),var(--papel));pointer-events:none}
  .anos-swipe{display:block}
}
.anos tr.neg td{color:var(--sinal)}
.mini th{text-align:left;color:var(--mut);font-weight:500;padding:.4rem .6rem;border-bottom:1px solid var(--rule)}
.mini td{padding:.4rem .6rem;border-bottom:1px solid var(--rule)}
.alerta{background:#FAEDEA;border:1px solid #EAC9C3;border-radius:8px;padding:.7rem 1rem;font-size:.86rem;color:#8A2A1D;margin:.6rem 0}
/* gráfico de payback — o SVG escala junto com o contêiner, então texto de 11 unidades
   virava ~7px reais num celular de 390. Largura mínima + rolagem mantém a legenda
   legível no telefone e o gráfico continua se ajustando sozinho no desktop. */
.graf{overflow-x:auto;margin:1rem 0;outline-offset:2px}
.graf svg{display:block;width:100%;min-width:520px;height:auto}
.graf-swipe{display:none;font-size:.78rem;color:var(--mut);margin:.35rem 0 0}
@media(max-width:600px){.graf-swipe{display:block}}
/* FAQ */
details{border-bottom:1px solid var(--rule);padding:.6rem 0}
/* marcador ▶ nativo do <details> é preto, tosco e sem transição — o resto do site é
   SVG/geometria. Chevron em borda, girando no aberto. */
summary{cursor:pointer;font-weight:600;color:var(--breu);list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:9px;height:9px;margin-right:.25rem;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details p{margin:.5rem 0 0;color:#44423C;font-size:.94rem}
/* premissas / links */
.premissas ul{padding-left:1.1rem;font-size:.9rem;color:#44423C}
.premissas li{margin:.35rem 0}
.links{margin:2rem 0 0;display:grid;gap:1rem}
.links h3{color:var(--mut);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
/* padding generoso: alvo de toque ≥40px de altura (eram ~29px) */
.chips a{background:#F0F1ED;border:1px solid var(--rule);border-radius:100px;padding:.55rem .95rem;font-size:.84rem;line-height:1.45}
.ufgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.4rem}
.ufgrid a{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:.6rem .9rem;display:flex;justify-content:space-between;align-items:center}
.ufgrid .c{background:#F0F1ED;color:var(--mut);border-radius:100px;padding:.1rem .5rem;font-size:.75rem}
/* footer */
.foot{max-width:820px;margin:2.5rem auto 0;padding:1.5rem 20px 2.5rem;border-top:1px solid var(--rule);text-align:center}
.cta-final{margin:0 0 1rem}
.integrador{font-size:.9rem;color:#44423C}
.disc{font-size:.78rem;color:var(--mut);max-width:600px;margin:1rem auto}
.brand{font-size:.78rem;color:var(--mut)}

/* ═══════════ home pública + /api (marca/aquisição) ═══════════ */
main.home{max-width:980px;padding-bottom:0}
.volt{color:var(--volt-tinta)}
.hp-top{max-width:980px;justify-content:space-between;padding-top:18px}
.hp-nav{display:flex;align-items:center;gap:1.1rem;flex:0 1 auto;font-size:.9rem}
.hp-nav a{color:var(--tinta)}
.hp-nav a[aria-current]{color:var(--volt-tinta);font-weight:600}
.btn.sm{padding:.45rem .9rem;font-size:.85rem}
.btn.lg{padding:.9rem 1.6rem;font-size:1.05rem}
@media(max-width:640px){.hp-nav a:not(.btn){display:none}}
/* menu mobile CSS-only (details/summary — zero JS) */
.hp-menu{display:none;position:relative;border-bottom:0;padding:0}
@media(max-width:640px){.hp-menu{display:block}}
.hp-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;padding:.4rem .45rem;border:1px solid var(--rule);border-radius:8px;color:var(--breu);line-height:0}
.hp-menu summary::-webkit-details-marker{display:none}
.hp-menu[open] summary{background:var(--soft)}
.hp-menu-p{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 32px rgba(26,25,22,.14);padding:.4rem;min-width:210px;z-index:20;display:flex;flex-direction:column}
.hp-nav .hp-menu-p a{display:block;padding:.55rem .8rem;border-radius:8px;color:var(--tinta);font-weight:500}
.hp-nav .hp-menu-p a:hover{background:var(--soft);text-decoration:none}
/* hero */
.hp-hero{text-align:center;max-width:740px;margin:1.5rem auto 0}
.hp-hero.sm{margin-top:1rem}
.hp-badge{display:inline-block;font-size:.78rem;font-weight:700;color:var(--volt-tinta);background:var(--soft);border:1px solid var(--soft-line);border-radius:100px;padding:.3rem .8rem}
.hp-hero h1{font-size:clamp(1.9rem,5.2vw,3rem);margin:.9rem 0 .5rem}
.hp-sub{font-size:clamp(1.02rem,2.2vw,1.2rem);color:#3E3C36;line-height:1.6;max-width:640px;margin:0 auto}
.hp-chips{display:flex;gap:.5rem 1.1rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem}
.hp-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#44423C}
.hp-hero .cta{justify-content:center;margin:1.3rem 0 0}
/* banda de prova real (números verificáveis do produto) */
.home .hp-proofband{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;max-width:900px;margin:2rem auto 0}
.hp-pb{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:.9rem 1rem;text-align:center}
.hp-pb b{display:block;font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;font-weight:800;font-size:1.45rem;color:var(--breu);line-height:1.1}
.hp-pb span{display:block;font-size:.78rem;color:var(--mut);line-height:1.35;margin-top:.25rem}
/* calculadora */
.hp-calc{display:grid;grid-template-columns:1fr 1.1fr;gap:1.3rem;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:clamp(1.2rem,3vw,2rem);margin:2rem auto 0;max-width:900px;box-shadow:0 12px 40px rgba(26,25,22,.07);scroll-margin-top:16px}
.hp-kick{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--volt-tinta)}
.hp-calc-in{display:flex;flex-direction:column;gap:.9rem}
.hp-calc-in h2{margin:.2rem 0 .3rem}
.hp-f{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;color:var(--mut)}
.hp-f>span b{color:var(--breu)}
.hp-range{width:100%;accent-color:var(--volt-tinta);height:6px}
.hp-num,.hp-uf{padding:.65rem .8rem;border:1px solid var(--rule);border-radius:8px;font-size:1rem;font-family:inherit;background:var(--papel);color:var(--tinta);width:100%}
.hp-num:focus,.hp-uf:focus{outline:none;border-color:var(--volt-tinta);box-shadow:0 0 0 3px var(--soft)}
.hp-calc-out{background:linear-gradient(160deg,var(--soft),#F7F9F5);border:1px solid var(--soft-line);border-radius:12px;padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;text-align:center;justify-content:center}
.hp-eco-l{display:block;font-size:.78rem;color:var(--volt-tinta);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.hp-eco-v{display:block;font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;font-weight:800;font-size:clamp(2.2rem,7vw,3rem);color:var(--breu);line-height:1;margin:.2rem 0}
.hp-eco-v.neg{color:var(--sinal)}
.hp-eco-s{font-size:.82rem;color:var(--mut)}
.hp-out3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;border-top:1px solid var(--soft-line);padding-top:.9rem}
.hp-out3 b{display:block;font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;font-weight:700;font-size:1.02rem;color:var(--breu)}
.hp-out3 span{font-size:.72rem;color:var(--mut)}
.hp-honest{font-size:.78rem;color:var(--mut);line-height:1.5;margin:.2rem 0 0}
/* seções genéricas */
.home section{margin:3rem auto 0}
.home section>h2{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.hp-lead{text-align:center;max-width:620px;margin:.5rem auto 1.2rem;color:#3E3C36;font-size:1.05rem}
/* prova/gallery */
.hp-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.2rem 0}
.hp-gallery figure{margin:0;text-align:center}
/* a capa é recortada em cima (object-position:top): o gradiente no pé diz que a
   página continua, em vez de parecer imagem cortada no meio de uma frase */
.hp-gallery a{display:block;position:relative;border-radius:10px;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease}
.hp-gallery a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg,rgba(250,249,245,0),var(--papel));pointer-events:none}
.hp-gallery a:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(26,25,22,.14)}
.hp-gallery img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--rule);box-shadow:0 8px 24px rgba(26,25,22,.10);aspect-ratio:520/735;object-fit:cover;object-position:top}
.hp-gallery figcaption{font-size:.82rem;color:var(--mut);margin-top:.4rem}
/* comparativo — coluna ionluz primeiro; no mobile, fade + microcopy de deslize.
   .hp-cmpouter (não rola) segura o fade fixo na borda; .hp-tblwrap segue sendo o scroller */
.hp-cmpouter{position:relative}
.hp-tblwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:12px}
.hp-cmp{margin:0;font-size:.92rem;min-width:560px}
.hp-cmp th,.hp-cmp td{padding:.7rem .9rem;border-bottom:1px solid var(--rule);text-align:center}
.hp-cmp thead th{font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;font-weight:700;color:var(--breu);font-size:.9rem}
.hp-cmp tbody td:first-child,.hp-cmp tbody th:first-child,.hp-cmp thead th:first-child,.hp-cmp thead td:first-child{text-align:left;color:var(--tinta);font-weight:500}
.hp-cmp .hi{background:var(--soft);color:var(--breu);font-weight:700}
.hp-cmp thead .hi{background:var(--volt);color:#fff}
/* ícones SVG (check/x/play) no lugar de glyphs ✓✗▶ — text-render igual em todo mobile */
.hp-ck,.hp-cx,.hp-play{width:.95em;height:.95em;display:inline-block;vertical-align:-.14em;margin-right:.18em}
.hp-cmp .hi .hp-ck{color:var(--volt)}
.hp-cx{color:var(--tinta);opacity:.5}
.hp-swipe{display:none;text-align:center;font-size:.78rem;color:var(--mut);margin:.4rem 0 0}
@media(max-width:640px){
.hp-cmpouter::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;background:linear-gradient(90deg,rgba(250,249,245,0),var(--papel));pointer-events:none;border-radius:0 12px 12px 0}
.hp-swipe{display:block}
}
.home .micro{display:block;text-align:center;margin-top:.7rem;color:var(--mut);font-size:.85rem}
/* features — ícones SVG inline stroke (herdam --volt-tinta via currentColor) */
.hp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.4rem}
.hp-fcard{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1.3rem}
.hp-fic{display:block;margin-bottom:.6rem;color:var(--volt-tinta);line-height:0}
.hp-fic svg{width:24px;height:24px}
.hp-fcard h3{font-size:1.05rem}
.hp-fcard p{color:#44423C;font-size:.92rem;margin:.3rem 0 0}
/* api dark — acento legível no escuro é #8FD3AE (o verde-marca não passa de 3:1) */
.hp-api{display:grid;grid-template-columns:1fr 1.1fr;gap:1.5rem;align-items:center;background:var(--breu);color:#ECEBE6;border-radius:16px;padding:clamp(1.4rem,3.5vw,2.4rem);margin-top:3rem}
.hp-api h2{color:#fff}
.hp-api p{color:#C6C4BC}.hp-api b{color:#fff}
.hp-api .hp-kick.volt-on-dark,.hp-api .volt{color:#8FD3AE}
.hp-api .btn{background:#8FD3AE;color:#12261B!important}
.hp-api .btn:hover{filter:brightness(1.04)}
.hp-api .btn.ghost{background:transparent;color:#8FD3AE!important;border-color:#8FD3AE}
.hp-api .micro{color:#A3A198;display:inline}
.hp-api code{color:#8FD3AE}
.hp-code{background:#131A15;border:1px solid #2A3A30;border-radius:10px;padding:1rem 1.1rem;overflow-x:auto;font:.8rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#D8E4DA;margin:0}
.hp-demo .hp-code{background:#0F140F}
.hp-code code{color:inherit;background:none;font:inherit}
/* planos */
.hp-plangrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0 0}
.hp-plan{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1.5rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.hp-plan.hi{border-color:var(--volt-tinta);box-shadow:0 8px 30px rgba(34,113,63,.14)}
.hp-plan-tag{position:absolute;top:-11px;left:1.3rem;background:var(--volt);color:#fff;font-size:.68rem;font-weight:700;padding:.2em .6em;border-radius:6px;text-transform:uppercase}
.hp-plan-n{font-weight:700;font-size:1.05rem}
.hp-plan-p{font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;font-weight:800;font-size:1.9rem;color:var(--breu)}
.hp-plan-s{font-size:.82rem;color:var(--mut)}
.hp-plan ul{list-style:none;padding:0;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1;font-size:.9rem}
.hp-plan li{padding-left:1.3rem;position:relative;color:#44423C}
.hp-plan li::before{content:"✓";position:absolute;left:0;color:var(--volt-tinta);font-weight:700}
/* faq/final */
.hp-faq{max-width:720px;margin-left:auto;margin-right:auto}
.hp-final{text-align:center;background:var(--soft);border:1px solid var(--soft-line);border-radius:16px;padding:clamp(2rem,4vw,3rem) 1.5rem;margin:3rem 0 2rem}
.hp-final p{max-width:520px;margin:.6rem auto 1.2rem;color:#44423C}
.hp-final .cta{justify-content:center}
/* footer rico */
.hp-foot{max-width:980px;text-align:left}
.hp-foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1.5rem;text-align:left;margin-bottom:1.5rem}
.hp-foot-cols b{display:block;font-family:Archivo,'Archivo Fallback',sans-serif;font-stretch:112%;color:var(--breu);margin-bottom:.5rem;font-size:.92rem}
.hp-foot-cols a{display:block;color:#44423C;font-size:.88rem;margin:.3rem 0}
.hp-foot-cols p{font-size:.85rem;color:var(--mut);margin:0}
/* bloco parceiro (CSolar) nas folhas /energia-solar — oferta discreta de proposta real */
.parceiro{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--card-2,#F1EFE8);border:1px solid var(--rule-2,rgba(26,25,22,.14));border-radius:12px;
  padding:.9rem 1.1rem;margin:1.2rem 0}
.parceiro strong{color:var(--tinta,#1A1916)}
.parceiro div{font-size:.92rem;color:var(--mut,#6B6860);max-width:34rem}
.parceiro .btn.ghost{white-space:nowrap;flex-shrink:0}

/* widget "API ao vivo" na página /api */
.hp-demo{margin-top:3rem}
.hp-demo-box{display:grid;grid-template-columns:1fr 1.2fr;gap:1.2rem;align-items:start;margin-top:1rem}
.hp-demo-in{display:flex;flex-direction:column;gap:.7rem}
.hp-demo-in label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--mut)}
.hp-demo-in input,.hp-demo-in select{padding:.55rem .7rem;border:1px solid var(--rule-2,rgba(26,25,22,.14));
  border-radius:8px;font:inherit;font-size:.95rem;background:var(--card,#fff);color:var(--tinta,#1A1916)}
.hp-demo-in .btn{margin-top:.3rem}
.hp-demo-out{min-height:11rem;white-space:pre-wrap}
/* O breakpoint antigo era 760px — 8px abaixo do tablet de 768, que caía numa versão
   desktop espremida (calculadora e banda da API em 2 colunas, código cortado no meio
   da URL, rodapé em 4 colunas). Sobe pra 900/820 e o tablet ganha layout próprio. */
@media(max-width:900px){.hp-calc,.hp-api,.hp-demo-box{grid-template-columns:1fr}.hp-foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.home .hp-proofband{grid-template-columns:1fr 1fr}}
/* código: abaixo de 640px quebra a linha em vez de cortar no gume (parecia render quebrado) */
@media(max-width:640px){.hp-code{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.74rem}}
/* alvo de toque do menu mobile (era ~33px) */
@media(max-width:900px){.hp-menu summary{padding:.62rem .68rem}}
/* âncoras de seção não colam o título na borda superior */
main.home section[id]{scroll-margin-top:24px}
/* títulos de seção da home precisam de mais presença que os das folhas (h2 herdado) */
main.home section>h2{font-size:clamp(1.5rem,3.2vw,2.05rem)}
/* viúvas: o H1 quebrava deixando "marca." sozinha na última linha */
.hp-hero h1,.hp-head h1{text-wrap:balance}
.hp-sub{text-wrap:pretty}
/* ── /guias/ — artigos (shell da home; tipografia base já cobre h1/h2/corpo) ── */
main.home .gu{max-width:740px;margin:1.5rem auto 0;text-align:left}
.gu-trilha{font-size:.8rem;color:var(--mut);margin:.8rem 0 0}
.gu-meta{font-size:.82rem;color:var(--mut);margin:.2rem 0 1.4rem}
.gu-lead{font-size:1.05rem;color:var(--mut);text-wrap:pretty}
.gu p,.gu li{line-height:1.7}
.gu ul{padding-left:1.2rem}
.gu-check{list-style:none;padding:0}
.gu-check li{padding:.45rem 0 .45rem 1.7rem;position:relative;border-bottom:1px solid var(--rule)}
.gu-check li::before{content:'';position:absolute;left:0;top:.72rem;width:1rem;height:1rem;border-radius:4px;background:var(--soft);border:1.5px solid var(--volt)}
.gu-cta{background:var(--soft);border:1px solid var(--soft-line);border-radius:12px;padding:1.2rem 1.4rem;margin:2.2rem 0 1rem}
.gu-cta h2{margin-top:0}
.gu-card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1.1rem 1.3rem;margin:1rem 0;color:inherit}
.gu-card:hover{text-decoration:none;border-color:var(--volt)}
.gu-card h2{margin:.1rem 0 .3rem;font-size:1.15rem;color:var(--volt-tinta)}
.gu-card p{margin:.2rem 0 .5rem;color:var(--tinta)}
.gu-card-meta{font-size:.78rem;color:var(--mut)}