/* ══════════════════════════════════════════════════════════════════════════
   Ezzetilo · folha de estilo das páginas de conteúdo
   ══════════════════════════════════════════════════════════════════════════
   Vale para tudo que o gerador (`site/gerar-paginas.mjs`) produz: recursos,
   soluções, preços, ferramentas e blog. A landing NÃO usa este arquivo, ela
   tem o CSS dela embutido.

   Arquivo separado e não embutido em cada página de propósito: são dezenas de
   páginas, e assim o navegador baixa o estilo uma vez só e reaproveita na
   navegação inteira. O `?v=` no endereço é o que fura o cache de 7 dias do
   nginx quando este arquivo muda — o gerador calcula esse número sozinho a
   partir do conteúdo, então basta rodar o gerador.

   As cores são as mesmas variáveis da landing. Se a marca mudar de verde,
   muda aqui, no `404.html`, no `icone.svg` e no `gerar-og.mjs`.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#050A10; --bg-2:#080F17; --card:#0C141D; --card-2:#111C27;
  --line:#18232F; --line-2:#23323F; --line-3:#2E4052;
  --tx:#E6EDF3; --tx-2:#8494A5; --tx-3:#5B6B7C;
  --g:#1D9E75; --g-hi:#2FD196; --g-dim:rgba(29,158,117,.13); --g-glow:rgba(47,209,150,.28);
  --amber:#E5B15C; --red:#E2564F;
  --disp:'Archivo', system-ui, sans-serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --rx:14px; --max:1200px; --texto:70ch;
  --e:cubic-bezier(.16,1,.3,1);
}
[data-tema="claro"]{
  --bg:#F5F8FA; --bg-2:#FFFFFF; --card:#FFFFFF; --card-2:#F0F4F7;
  --line:#E1E8ED; --line-2:#CBD6DF; --line-3:#B3C2CE;
  --tx:#0F1B24; --tx-2:#4A5B6B; --tx-3:#6B7C8C;
  --g-dim:rgba(29,158,117,.10); --g-glow:rgba(29,158,117,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--tx); font-family:var(--sans);
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}
a{color:inherit}
img,svg,video{display:block; max-width:100%}
.env{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:24px}
@media (max-width:640px){ body{font-size:16px} .env{padding-inline:18px} }

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
#topo{
  position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(5,10,16,.82); border-bottom:1px solid var(--line);
}
[data-tema="claro"] #topo{background:rgba(245,248,250,.88)}
#topo .env{display:flex; align-items:center; gap:26px; height:64px}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.01em; text-decoration:none; flex:none}
.logo i{
  display:grid; place-items:center; width:29px; height:29px; border-radius:9px;
  background:linear-gradient(140deg,var(--g-hi),var(--g));
  color:#03130C; font-style:normal; font-weight:900; font-size:15px;
}
#topo nav{display:flex; gap:20px; font-size:14.5px; font-weight:500; margin-right:auto}
#topo nav a{color:var(--tx-2); text-decoration:none; transition:color .18s}
#topo nav a:hover, #topo nav a[aria-current]{color:var(--tx)}
.acoes{display:flex; align-items:center; gap:10px; flex:none}
@media (max-width:900px){ #topo nav{display:none} }
@media (max-width:520px){ .acoes .b.fantasma{display:none} }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:11px; font-size:14.5px; font-weight:650;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--e), border-color .18s, background .18s;
  font-family:inherit;
}
.b.principal{background:linear-gradient(140deg,var(--g-hi),var(--g)); color:#03130C; font-weight:700}
.b.fantasma{border-color:var(--line-2); color:var(--tx); background:transparent}
.b:hover{transform:translateY(-1px)}
.b.fantasma:hover{border-color:var(--g)}
.b.grande{padding:14px 26px; font-size:15.5px}

/* ── Trilha ─────────────────────────────────────────────────────────────── */
.trilha{padding:22px 0 0; font-size:13.5px; color:var(--tx-3)}
.trilha ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.trilha li:not(:last-child)::after{content:'/'; margin-left:8px; color:var(--line-3)}
.trilha a{color:var(--tx-3); text-decoration:none}
.trilha a:hover{color:var(--g-hi)}
.trilha [aria-current]{color:var(--tx-2)}

/* ── Corpo do artigo ────────────────────────────────────────────────────── */
main{padding-bottom:80px}
.capa{position:relative; padding:34px 0 12px}
.capa::before{
  content:''; position:absolute; inset:-120px 0 auto; height:420px; pointer-events:none; z-index:-1;
  background:radial-gradient(58% 60% at 22% 0%, var(--g-dim), transparent 72%);
}
h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.032em; line-height:1.1;
  font-size:clamp(30px,5.1vw,50px); margin:0 0 18px; max-width:22ch;
}
.resumo{font-size:clamp(17.5px,2.1vw,20px); color:var(--tx-2); max-width:60ch; margin:0 0 8px}

article{max-width:var(--texto); margin-top:14px}
article h2{
  font-family:var(--disp); font-weight:750; letter-spacing:-.022em; line-height:1.2;
  font-size:clamp(23px,3.2vw,31px); margin:54px 0 16px; scroll-margin-top:84px;
}
article h3{
  font-weight:700; letter-spacing:-.012em; font-size:19.5px; margin:32px 0 10px;
  scroll-margin-top:84px;
}
article p{margin:0 0 18px}
article a{color:var(--g-hi); text-decoration:none; border-bottom:1px solid rgba(47,209,150,.32)}
article a:hover{border-bottom-color:var(--g-hi)}
article strong{color:var(--tx); font-weight:650}

article ul{list-style:none; margin:0 0 22px; padding:0}
article ul li{position:relative; padding-left:27px; margin-bottom:11px}
article ul li::before{
  content:''; position:absolute; left:4px; top:.62em; width:7px; height:7px;
  border-radius:2px; background:var(--g); transform:rotate(45deg);
}

/* Passos numerados */
.passos{counter-reset:passo; margin:0 0 26px; padding:0; list-style:none}
.passos li{counter-increment:passo; position:relative; padding-left:52px; margin-bottom:22px}
.passos li::before{
  content:counter(passo); position:absolute; left:0; top:-1px;
  width:33px; height:33px; border-radius:10px; display:grid; place-items:center;
  background:var(--g-dim); border:1px solid var(--line-2);
  color:var(--g-hi); font-family:var(--mono); font-size:14px; font-weight:600;
}
.passos b{display:block; margin-bottom:3px; font-weight:650; color:var(--tx)}
.passos span{color:var(--tx-2); font-size:16px}

/* Destaque */
.destaque{
  margin:0 0 26px; padding:20px 22px; border-radius:var(--rx);
  background:var(--card); border:1px solid var(--line-2);
  border-left:3px solid var(--g);
}
.destaque b{display:block; margin-bottom:6px; font-size:15px; letter-spacing:-.01em}
.destaque p{margin:0; color:var(--tx-2); font-size:16px}

/* Citação */
blockquote{
  margin:0 0 26px; padding:6px 0 6px 22px; border-left:2px solid var(--g);
  font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.45;
}
blockquote cite{display:block; margin-top:10px; font-family:var(--sans); font-size:14px; font-weight:400; font-style:normal; color:var(--tx-3)}

/* Tabela — rola sozinha no celular, e a PÁGINA nunca rola de lado */
.tabela{overflow-x:auto; margin:0 0 26px; border:1px solid var(--line); border-radius:var(--rx)}
table{border-collapse:collapse; width:100%; font-size:15.5px; min-width:460px}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
th{background:var(--card-2); font-weight:650; font-size:13.5px; letter-spacing:.02em; color:var(--tx-2)}
tr:last-child td{border-bottom:0}
td strong{color:var(--g-hi)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{margin-top:56px}
.faq .q{border-top:1px solid var(--line); padding:22px 0}
.faq .q h3{margin:0 0 8px; font-size:17.5px}
.faq .q p{margin:0; color:var(--tx-2); font-size:16px}

/* ── Chamada final ──────────────────────────────────────────────────────── */
.cta{
  margin:64px auto 0; max-width:var(--texto); padding:34px;
  border-radius:20px; border:1px solid var(--line-2);
  background:
    radial-gradient(80% 130% at 12% 0%, var(--g-dim), transparent 70%),
    var(--card);
}
.cta h2{margin:0 0 10px; font-size:clamp(21px,3vw,27px)}
.cta p{color:var(--tx-2); margin:0 0 22px; max-width:52ch}

/* ── Páginas relacionadas ───────────────────────────────────────────────── */
.relacionadas{max-width:var(--max); margin:70px auto 0}
.relacionadas h2{font-family:var(--disp); font-size:20px; margin:0 0 18px; letter-spacing:-.02em}
.grade{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cartao{
  display:block; padding:20px; border-radius:var(--rx); text-decoration:none;
  background:var(--card); border:1px solid var(--line);
  transition:border-color .2s, transform .2s var(--e);
}
.cartao:hover{border-color:var(--g); transform:translateY(-2px)}
.cartao b{display:block; margin-bottom:6px; font-size:16px; letter-spacing:-.01em}
.cartao span{color:var(--tx-2); font-size:14.5px; line-height:1.55}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:44px 0 40px; margin-top:80px; font-size:14.5px}
.f-grade{display:grid; gap:32px; grid-template-columns:1.4fr repeat(3,1fr)}
@media (max-width:760px){ .f-grade{grid-template-columns:1fr 1fr} }
.f-col b{display:block; margin-bottom:12px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--tx-3)}
.f-col a{display:block; margin-bottom:9px; color:var(--tx-2); text-decoration:none}
.f-col a:hover{color:var(--g-hi)}
.f-sobre{color:var(--tx-3); font-size:13.5px; line-height:1.6; max-width:34ch; margin-top:12px}
.f-fim{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--tx-3); font-size:13px;
}

/* ── Botão de tema ──────────────────────────────────────────────────────── */
.tema-b{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-2); color:var(--tx-2);
  cursor:pointer; flex:none;
}
.tema-b:hover{color:var(--tx); border-color:var(--line-3)}
.tema-b svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tema-sol{display:none}
[data-tema="claro"] .tema-lua{display:none}
[data-tema="claro"] .tema-sol{display:block}

/* ── Calculadora (só a página da ferramenta usa) ────────────────────────── */
.calc{
  margin:30px 0 34px; padding:26px; border-radius:20px;
  background:var(--card); border:1px solid var(--line-2);
}
.calc .campo{margin-bottom:18px}
.calc label{display:block; font-size:13.5px; font-weight:600; color:var(--tx-2); margin-bottom:7px}
.calc input{
  width:100%; padding:13px 15px; border-radius:11px; font-size:17px; font-family:var(--mono);
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--tx);
}
.calc input:focus{outline:2px solid var(--g); outline-offset:1px; border-color:transparent}
.calc .dupla{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:520px){ .calc .dupla{grid-template-columns:1fr} }
.calc .aviso{font-size:13px; color:var(--tx-3); margin-top:-8px; margin-bottom:16px}
#calc-saida{margin-top:6px}
#calc-saida .linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:15.5px;
}
#calc-saida .linha:last-child{border-bottom:0}
#calc-saida .linha b{font-family:var(--mono); font-weight:600; white-space:nowrap}
#calc-saida .linha .n{color:var(--tx-2); font-size:14px}
#calc-saida .vista{color:var(--g-hi)}
#calc-saida .cab{
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3);
  border-bottom:0; padding:20px 0 4px;
}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

/* Campo de taxa dentro da linha do resultado. Estreito de propósito: ele
   convive com o texto "10x ... %" e não pode empurrar o valor para fora. */
#calc-saida .taxa{
  width:66px; margin:0 3px; padding:4px 7px; border-radius:7px;
  font-family:var(--mono); font-size:13.5px; text-align:right;
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--tx-2);
}
#calc-saida .taxa:focus{outline:2px solid var(--g); outline-offset:1px; color:var(--tx)}
#calc-saida .linha[data-n] span:first-child{display:flex; align-items:center; gap:2px; color:var(--tx-2); font-size:14.5px}