/* ══════════════════════════════════════
   TOKENS
   ══════════════════════════════════════ */
:root{
  /* marca */
  --verde:        #22f5b0;
  --verde-vivo:   oklch(78% 0.19 163);
  --verde-forte:  #009561;                    /* verde da marca escurecido para virar texto legível */
  --amarelo:      #ffc000;
  --azul:         oklch(80% 0.10 220);

  /* tinta e superfícies */
  --ink:          oklch(17% 0.018 168);
  --ink-2:        oklch(41% 0.015 168);
  --ink-3:        oklch(49% 0.014 168);
  --bg:           oklch(99% 0.003 168);
  --bg-2:         oklch(96.5% 0.006 168);
  --surface:      #fff;
  --linha:        oklch(91% 0.008 168);

  /* escuro */
  --dark:         oklch(14.5% 0.018 170);
  --dark-2:       oklch(19% 0.022 170);
  --dark-3:       oklch(24% 0.022 170);
  --sobre-escuro: oklch(74% 0.015 168);
  --linha-escura: oklch(28% 0.018 170);

  --r-sm: 10px; --r: 14px; --r-lg: 16px;
  --container: 1200px;
  --z-barra:40; --z-nav:50; --z-menu:60; --z-flutua:45;
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-suave: cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* NÃO usar scroll-behavior:smooth no html. Dentro de um iframe (o visualizador de
   artifact, um embed), cada evento da roda reinicia a animação rumo a um alvo cada vez
   mais distante: a página parece travada enquanto se gira e depois salta de uma vez.
   A suavidade das âncoras é aplicada só no clique, por JS. */
html{-webkit-text-size-adjust:100%}
/* o cabeçalho é fixo: afasta o alvo da âncora para ele não ficar por baixo */
:target,section[id],[id^="t-"]{scroll-margin-top:96px}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--ink-2);
  font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{color:var(--ink);line-height:1.05}
::selection{background:var(--verde);color:var(--ink)}
:focus-visible{outline:3px solid var(--verde-forte);outline-offset:3px;border-radius:4px}

.display{font-weight:800;letter-spacing:-0.022em}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.centro{text-align:center;margin-inline:auto}

/* linhas mascaradas para reveal */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln > i{display:block;font-style:normal}

/* ══════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════ */
.btn{
  --sombra:var(--verde-forte);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:700;font-size:1rem;text-decoration:none;white-space:nowrap;
  padding:1rem 1.75rem;border-radius:999px;border:0;cursor:pointer;
  min-height:48px;isolation:isolate;
  transition:transform .3s var(--e-out), box-shadow .3s var(--e-out), color .25s;
}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:var(--bg-btn);transition:filter .25s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--sombra)}
.btn:active{transform:translateY(-1px);box-shadow:0 3px 0 var(--sombra)}
.btn-verde{--bg-btn:var(--verde);--sombra:oklch(64% 0.15 163);color:var(--ink)}
.btn-preto{--bg-btn:var(--ink);--sombra:var(--verde);color:#fff}
.btn-branco{--bg-btn:#fff;--sombra:var(--verde);color:var(--ink)}
.btn-vazado{
  --bg-btn:transparent;--sombra:transparent;
  color:var(--ink);box-shadow:inset 0 0 0 2px var(--linha);
}
.btn-vazado:hover{box-shadow:inset 0 0 0 2px var(--ink);transform:translateY(-3px)}
.escuro .btn-vazado{color:#fff;box-shadow:inset 0 0 0 2px var(--linha-escura)}
.escuro .btn-vazado:hover{box-shadow:inset 0 0 0 2px var(--verde)}
.btn svg{flex:none}


/* ══════════════════════════════════════
   BLOG — cabeçalho, listagem e artigo
   ══════════════════════════════════════ */
.b-topo{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linha);
}
.b-nav{display:flex;align-items:center;gap:1.2rem;height:70px}
.b-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink)}
.b-logo img{height:28px;width:auto}
.b-logo strong{font-size:1.25rem;font-weight:800;letter-spacing:-0.01em}
.b-logo sup{font-size:.52rem;font-weight:600;vertical-align:super}
.b-nav .selo{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--verde-forte);
  border:1.5px solid var(--linha);border-radius:999px;padding:.24rem .65rem;
}
.b-nav .btn{margin-left:auto;padding:.6rem 1.15rem;font-size:.9rem;min-height:42px}

.b-cabeca{padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(1.6rem,3vw,2.4rem)}
.b-cabeca h1{
  font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-0.022em;
  color:var(--ink);text-wrap:balance;margin-bottom:.8rem;
}
.b-cabeca p{font-size:1.1rem;max-width:60ch;color:var(--ink-2)}

.b-lista{display:grid;gap:1.1rem;padding-bottom:clamp(3rem,6vw,5rem)}
.b-post{
  display:grid;grid-template-columns:auto 1fr;gap:0 1.6rem;
  background:var(--surface);border-radius:var(--r-lg);padding:1.5rem 1.6rem;
  box-shadow:inset 0 0 0 1px var(--linha);text-decoration:none;
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.b-post:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--linha),0 14px 34px oklch(17% .02 168/.11)}
.b-post time{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.78rem;color:var(--ink-3);grid-row:span 3;padding-top:.3rem;white-space:nowrap;
}
.b-post .tema{font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--verde-forte);margin-bottom:.3rem}
.b-post h2{font-size:1.35rem;font-weight:800;color:var(--ink);margin-bottom:.4rem;letter-spacing:-0.015em}
.b-post p{font-size:.96rem;line-height:1.5;color:var(--ink-2);max-width:70ch}

/* artigo */
.artigo{padding-bottom:clamp(3rem,6vw,5rem)}
.artigo-meta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem;font-size:.85rem;color:var(--ink-3)}
.artigo-meta .tema{font-size:.7rem;font-weight:800;letter-spacing:.08em;
  /* verde escurecido: verde-forte sobre o verde claro dava só 4.09:1 */
  color:oklch(38% .11 163);background:oklch(93% .07 163);border-radius:999px;padding:.26rem .7rem}
.artigo-corpo{max-width:68ch}
.artigo-corpo > *{margin-bottom:1.15rem}
.artigo-corpo p{font-size:1.06rem;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.artigo-corpo h2{
  font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:800;color:var(--ink);letter-spacing:-0.018em;
  margin-top:2.4rem;margin-bottom:.7rem;text-wrap:balance;
}
.artigo-corpo h3{font-size:1.12rem;font-weight:700;color:var(--ink);margin-top:1.6rem;margin-bottom:.5rem}
.artigo-corpo ul,.artigo-corpo ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.artigo-corpo li{font-size:1.02rem;line-height:1.6;color:var(--ink-2)}
.artigo-corpo strong{color:var(--ink);font-weight:700}
.artigo-corpo a{color:var(--verde-forte);text-underline-offset:3px}
.destaque{
  background:var(--bg-2);border-radius:var(--r);padding:1.2rem 1.35rem;
  box-shadow:inset 0 0 0 1px var(--linha);
}
.destaque p{margin:0;font-size:1rem}
.destaque p + p{margin-top:.7rem}
.tabela-envolvente{overflow-x:auto;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--linha)}
.artigo-corpo table{border-collapse:collapse;width:100%;min-width:460px;background:var(--surface);font-size:.95rem}
.artigo-corpo th,.artigo-corpo td{padding:.75rem .95rem;text-align:left;border-bottom:1px solid var(--linha)}
.artigo-corpo th{font-size:.72rem;letter-spacing:.06em;font-weight:800;color:var(--ink-3);background:var(--bg-2)}
.artigo-corpo td{color:var(--ink-2)}
.artigo-corpo tr:last-child td{border-bottom:0}
.artigo-corpo td:first-child{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.86rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.cta-artigo{
  background:var(--dark);color:var(--sobre-escuro);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2rem);margin-top:2.6rem;
  display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
}
.cta-artigo h2{color:#fff;font-size:1.35rem;font-weight:800;margin:0 0 .4rem}
.cta-artigo p{margin:0;font-size:.98rem;max-width:52ch;color:var(--sobre-escuro)}
.cta-artigo .btn{margin-left:auto}
.fontes{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--linha);font-size:.88rem;color:var(--ink-3)}
.fontes ul{padding-left:1.2rem;margin-top:.5rem}
.fontes li{font-size:.88rem}

.b-rodape{background:var(--dark);color:var(--sobre-escuro);padding:2.4rem 0;margin-top:auto}
.b-rodape .wrap{display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:.9rem}
.b-rodape a{color:#fff;text-decoration:none;font-weight:600}
.b-rodape a:hover{color:var(--verde)}

@media (max-width:700px){
  .b-nav .selo{display:none}
  .b-post{grid-template-columns:1fr;gap:.5rem}
  .b-post time{grid-row:auto}
  .cta-artigo .btn{margin-left:0;width:100%}
}

/* legenda de tabela: lida por leitor de tela, invisível na página */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}