/* site.css — base compartilhada das páginas institucionais (home /inicio, artigos).
   A landing (index.html) mantém o próprio <style> inline; nada aqui a afeta.
   As fontes vêm de fonts.css, extraído do mesmo woff2 embutido da landing. */

:root{
  --ink:#0E0F13; --paper:#FBFBF9; --cobalt:#2F6BFF; --aqua:#19D3C5;
  --ink-72:rgba(14,15,19,.72); --ink-52:rgba(14,15,19,.52); --ink-36:rgba(14,15,19,.34);
  --ink-line:rgba(14,15,19,.12); --ink-line-2:rgba(14,15,19,.26);
  --paper-72:rgba(251,251,249,.72); --paper-52:rgba(251,251,249,.5); --paper-line:rgba(251,251,249,.14);
  --cobalt-wash:rgba(47,107,255,.06); --cobalt-line:rgba(47,107,255,.22); --cobalt-ink:#2557E0;
  --aqua-ink:#0A7A70; --aqua-wash:rgba(25,211,197,.14);
  --soft:#F2EFE6;
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1160px; --gutter:clamp(1.25rem,5vw,3.5rem); --radius:7px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--display);background:var(--paper);color:var(--ink);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:var(--cobalt-ink);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
::selection{background:var(--cobalt);color:var(--paper)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:0 0 var(--radius) 0;z-index:100}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:860px}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt-ink);display:inline-block}
.eyebrow.muted{color:var(--ink-52)}
.sec-no{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;color:var(--ink-36);margin-bottom:.5rem}

/* fatos rápidos em uma linha — hero de produto e, agora, hero da home.
   Base que faltava aqui (só existia no <style> da landing): sem isso .facts
   renderiza sem grid/gap nas páginas de produto. */
.facts{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;margin-top:1.5rem;font-family:var(--mono);font-size:.75rem;color:var(--ink-52)}
.facts span{display:flex;align-items:center;gap:.45rem}
.facts b{color:var(--ink);font-weight:500}
@media (max-width:520px){.facts{gap:.35rem;flex-direction:column}}

/* ícone de linha usado nos cards abaixo — mesmo traço dos checks da landing */
.ic{flex:none;width:26px;height:26px;color:var(--cobalt-ink)}
.publico .ic,.ajuda .ic,.continuar a .ic{display:block;margin-bottom:.65rem}

/* entrada ao rolar — igual ao produto.css; só ativa com JS confirmado rodando,
   senão o conteúdo ficaria invisível para quem navega sem JS. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none}}

/* botões — mesmo desenho da landing */
.btn{font-family:var(--display);font-size:.92rem;font-weight:500;padding:.7rem 1.25rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;transition:transform .18s ease,box-shadow .2s ease,background .2s;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--cobalt-ink);color:var(--paper);box-shadow:0 1px 0 rgba(47,107,255,.4)}
.btn-primary:hover{background:#1E4ED1}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink-line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--cobalt-wash)}
.btn-sm{font-size:.85rem;padding:.5rem .85rem}
.on-ink .btn-ghost{color:var(--paper);border-color:var(--paper-line)}
.on-ink .btn-ghost:hover{border-color:var(--paper);background:rgba(251,251,249,.08)}

/* cabeçalho */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(10px);background:color-mix(in srgb,var(--paper) 82%,transparent);border-bottom:1px solid var(--ink-line)}
/* três blocos: marca | links | ações. Grid com as laterais de larguras iguais, senão
   o bloco de ações (mais largo que a marca) empurraria os links para fora do centro. */
.nav-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1.5rem;height:64px}
.nav-in .brand{justify-self:start}
.nav-acoes{display:flex;align-items:center;gap:.5rem;justify-self:end}
.brand{font-weight:700;font-size:1.28rem;letter-spacing:-.02em;color:var(--ink);display:inline-flex;align-items:baseline}
.brand:hover{text-decoration:none}
.brand .ff{color:var(--cobalt);transform:translateY(.05em);font-size:.85em}
.brand .tag{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;color:var(--ink-52);margin-left:.35rem;align-self:center;border:1px solid var(--ink-line);padding:.15rem .35rem;border-radius:4px}
.nav-links{display:flex;align-items:center;gap:.2rem;justify-content:center}
.nav-links a.link{font-size:.9rem;color:var(--ink-72);padding:.4rem .5rem;transition:color .2s}
.nav-links a.link:hover{color:var(--ink);text-decoration:none}
.language-switcher{position:relative;display:inline-flex;align-items:center}
.language-switcher select{appearance:none;-webkit-appearance:none;-moz-appearance:none;font:700 .75rem/1 var(--mono);letter-spacing:.04em;padding:.38rem 1.65rem .38rem .5rem;border:1px solid var(--ink-line);border-radius:.4rem;color:var(--ink-72);background:transparent;cursor:pointer}
.language-switcher select:hover{border-color:var(--ink);color:var(--ink)}
.language-switcher select:focus-visible{border-color:var(--cobalt);outline:none}
.language-switcher::after{content:"";position:absolute;right:.62rem;top:50%;width:6px;height:6px;border:1.5px solid var(--ink-52);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
footer .language-switcher select{color:var(--paper-72);border-color:var(--paper-line)}
footer .language-switcher select:hover{color:var(--paper);border-color:var(--paper)}
footer .language-switcher::after{border-color:var(--paper-52)}
.nav-dd{position:relative}
/* mesmo peso dos demais links: sem caixa de fundo */
.nav-dd-btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border-color:transparent;color:var(--ink-72);font-size:.9rem;font-weight:400;padding:.4rem .5rem}
.nav-dd-btn:hover{background:transparent;border-color:transparent;color:var(--ink);transform:none}
.nav-dd.open .nav-dd-btn{color:var(--ink)}
.nav-dd.open .car{transform:translateY(1px) rotate(-135deg)}
.nav-dd-btn .car{width:6px;height:6px;border:1.5px solid var(--ink-52);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.nav-dd-menu{position:absolute;top:calc(100% + .5rem);right:0;min-width:220px;background:var(--paper);border:1px solid var(--ink-line);border-radius:var(--radius);box-shadow:0 16px 40px -12px rgba(0,0,0,.18);padding:.35rem;display:none;flex-direction:column;gap:.1rem}
.nav-dd.open .nav-dd-menu{display:flex}
.nav-dd-menu a{padding:.55rem .7rem;border-radius:calc(var(--radius) - 2px);font-size:.88rem;color:var(--ink-72);white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-dd-menu a:hover{background:var(--cobalt-wash);color:var(--ink);text-decoration:none}

/* "Entrar" mora no header; no celular estreito ele vai para o menu, e o header fica só com "Testar grátis" */
.nav-links a.link-entrar{display:none}
@media (max-width:560px){
  .nav-entrar{display:none}
  .nav-links a.link-entrar{display:block}
}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:34px;height:34px;flex:none;background:transparent;border:0;padding:0;cursor:pointer;border-radius:6px}
.nav-burger:hover{background:var(--cobalt-wash)}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  /* o header fica curto (marca + entrar + burger) e continua fixo no topo;
     o menu completo — inclusive Sobre e Central de Ajuda, que antes sumiam
     aqui — só ocupa espaço quando o burger abre, como um painel solto. */
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;flex-wrap:nowrap;gap:.6rem}
  .nav-acoes{justify-self:auto;gap:.4rem}
  .nav-burger{display:inline-flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:.1rem;background:var(--paper);border-bottom:1px solid var(--ink-line);padding:.5rem var(--gutter) 1rem;box-shadow:0 16px 32px -18px rgba(14,15,19,.28);max-height:calc(100vh - 64px);overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links a.link{padding:.6rem .2rem}
  .nav-dd{width:100%}
  .nav-dd-btn{width:100%;justify-content:space-between;padding:.6rem .2rem}
  .nav-dd-menu{position:static;box-shadow:none;border:0;padding:0 0 .3rem .6rem;min-width:0;display:none}
  .nav-dd.open .nav-dd-menu{display:flex}
}

/* faixas */
.band{padding:clamp(3.2rem,7vw,5.2rem) 0;border-top:1px solid var(--ink-line)}
/* mesma faixa azul clara que a landing usa no módulo gratuito */
.band-soft{background:var(--cobalt-wash)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink h2,.band-ink h3{color:var(--paper)}
.band-ink .eyebrow{color:var(--aqua)}
.band-ink .eyebrow.muted{color:var(--paper-52)}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:.7rem}
.sec-body{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--ink-72);margin-top:.9rem;max-width:58ch}
.band-ink .sec-body{color:var(--paper-72)}

/* 01 hero — coluna única centralizada, com o vídeo abaixo do texto */
.hero{padding:clamp(2.2rem,5vw,3.4rem) 0 clamp(2.6rem,6vw,4rem);position:relative;overflow:hidden}
/* malha da landing; aqui a máscara nasce no centro, porque o hero é centralizado */
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 12%,transparent 70%);mask-image:radial-gradient(120% 80% at 50% 0%,#000 12%,transparent 70%);opacity:.5}
/* dobradiças: pequenos nós exatamente nos cruzamentos da malha, cada um
   pulsando (brilho + leve escala) no seu próprio ritmo — posição e tempo
   sorteados no PHP a cada carregamento. */
.hero-grid .no{position:absolute;left:calc(var(--gx) * 52px - 3px);top:calc(var(--gy) * 52px - 3px);width:6px;height:6px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 12px 3px var(--cobalt);opacity:0;animation-name:no-pulso;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes no-pulso{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.65;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.hero-grid .no{animation:none;opacity:.2;transform:none}}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(1.6rem,3vw,2.2rem)}
.hero-texto{max-width:44rem;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(2rem,4.8vw,3.3rem);line-height:1.06;margin-top:1rem}
.hero h1 .hl{color:var(--cobalt)}
.hero .lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-72);margin-top:1.2rem;max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;justify-content:center}
.hero .facts{justify-content:center}

/* vídeos das páginas de produto (a home não tem vídeo) */
.hero-video{margin:0;position:relative}
.hero-video video{width:100%;height:auto;aspect-ratio:16/9;display:block;object-fit:cover;border-radius:var(--radius);background:var(--soft);border:1px solid var(--ink-line)}
.hero-video figcaption{margin-top:.65rem;font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--ink-52)}
.hero-full{position:absolute;top:.6rem;right:.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink);background:color-mix(in srgb,var(--paper) 86%,transparent);border:1px solid var(--ink-line);border-radius:5px;padding:.3rem .55rem;cursor:pointer;opacity:0;transition:opacity .2s}
.hero-video:hover .hero-full,.hero-full:focus-visible{opacity:1}
@media (hover:none){.hero-full{opacity:1}}

.schematic{width:100%;height:auto}
.pipe{fill:none;stroke:var(--ink-line);stroke-width:6;stroke-linecap:round}
.pipe-core{fill:none;stroke:var(--cobalt-line);stroke-width:2;stroke-linecap:round}
.flux{fill:none;stroke:var(--cobalt);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 220;animation:flui 5s linear infinite}
.node{fill:var(--paper);stroke:var(--cobalt);stroke-width:2}
.node-aqua{fill:var(--aqua)}
.schem-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;fill:var(--ink-52)}
@keyframes flui{to{stroke-dashoffset:-234}}
@media (prefers-reduced-motion:reduce){.flux{animation:none;stroke-dasharray:none;opacity:.55}}
@media (max-width:900px){.hero{padding-top:clamp(2rem,6vw,3rem)}}

/* 02 o que é */
.oque{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.oque p+p{margin-top:.9rem}
.oque .lista{display:flex;flex-direction:column;gap:.1rem}
.oque .lista div{display:flex;gap:.7rem;align-items:baseline;padding:.6rem 0;border-top:1px solid var(--ink-line);font-size:.92rem;color:var(--ink-72)}
.oque .lista div:first-child{border-top:none}
.oque .lista b{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt-ink);flex:none;width:5.2rem}
@media (max-width:820px){.oque{grid-template-columns:1fr}}

/* 03 produtos */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:2.2rem;background:var(--ink-line);border:1px solid var(--ink-line);border-radius:var(--radius);overflow:hidden}
.prod{background:var(--paper);padding:1.4rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;color:inherit;position:relative;transition:transform .2s ease,box-shadow .2s ease,background .2s}
.prod .ic{display:block}
.prod:hover{background:var(--cobalt-wash);text-decoration:none;transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(14,15,19,.32);z-index:1}
.prod h3{font-size:1.05rem}
.prod p{font-size:.88rem;color:var(--ink-72);line-height:1.5}
.prod .mais{margin-top:auto;padding-top:.7rem;font-size:.82rem;color:var(--cobalt-ink);font-weight:500}
.selo{font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;padding:.18rem .5rem;border-radius:100px;align-self:flex-start}
.selo-free{background:var(--aqua-wash);color:var(--aqua-ink)}
.selo-pago{background:var(--cobalt-wash);color:var(--cobalt-ink)}
.selo-beta{border:1px dashed var(--ink-line-2);color:var(--ink-52)}
.saida{margin-top:1.4rem;font-size:.95rem;font-weight:500}
@media (max-width:980px){.prods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.prods{grid-template-columns:1fr}}

/* 02b para quem é — perfis de uso */
.publico{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:2.2rem;background:var(--ink-line);border:1px solid var(--ink-line);border-radius:var(--radius);overflow:hidden}
.publico article{background:var(--paper);padding:1.5rem 1.4rem}
.publico h3{font-size:1.05rem}
.publico p{font-size:.92rem;color:var(--ink-72);margin-top:.5rem;line-height:1.6}
@media (max-width:760px){.publico{grid-template-columns:1fr}}

/* 04 no que ajuda */
.ajuda{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem;margin-top:2.2rem}
.ajuda article{border-top:2px solid var(--ink);padding-top:1rem}
.ajuda .ic{margin-top:.15rem}
.ajuda h3{font-size:1.05rem}
.ajuda p{font-size:.93rem;color:var(--ink-72);margin-top:.45rem;line-height:1.6}
@media (max-width:760px){.ajuda{grid-template-columns:1fr;gap:1.3rem}}

/* 05 equipe */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.8rem 0;padding-top:1.5rem;border-top:1px solid var(--ink-line)}
.stats b{display:block;font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:600;letter-spacing:-.02em}
.stats span{display:block;font-size:.82rem;color:var(--ink-72);margin-top:.3rem;line-height:1.4}
@media (max-width:480px){.stats{grid-template-columns:1fr;gap:.9rem}}
.quem{display:grid;grid-template-columns:1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.rostos{display:flex;gap:1.1rem;flex-wrap:wrap}
.rosto{text-align:center;width:104px}
.rosto img{width:104px;height:104px;border-radius:50%;object-fit:cover;background:var(--soft)}
.rosto .nm{font-size:.85rem;font-weight:600;margin-top:.6rem}
.rosto .fn{font-family:var(--mono);font-size:.75rem;color:var(--ink-52);margin-top:.15rem;line-height:1.35}
@media (max-width:820px){.quem{grid-template-columns:1fr}}

/* 05b equipe completa — réplica do #equipe de index.html, usada em /sobre */
.equipe{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}
.pessoa{background:var(--paper);border:1px solid var(--ink-line);border-radius:var(--radius);overflow:hidden}
.pessoa .ph{aspect-ratio:1;background:var(--soft);position:relative;overflow:hidden}
.pessoa .ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:filter .3s}
.pessoa:hover .ph img{filter:grayscale(.85) contrast(1.06)}
.pessoa .in{padding:1rem}
.pessoa h4{margin:0 0 .2rem;font-size:1rem}
.pessoa .fn{font-family:var(--mono);font-size:.72rem;color:var(--cobalt-ink)}
.pessoa .cr{font-size:.82rem;color:var(--ink-52);margin-top:.5rem;line-height:1.45}
@media (prefers-reduced-motion:reduce){.pessoa .ph img{transition:none}}
@media (max-width:880px){.equipe{grid-template-columns:1fr}}

/* 06 artigos */
.artigos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.artigo{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.2rem;border:1px solid var(--ink-line);border-radius:var(--radius);background:var(--paper);color:inherit;transition:border-color .2s}
.artigo:hover{border-color:var(--ink-line-2);text-decoration:none}
.artigo time{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-36)}
.artigo h3{font-size:1rem;line-height:1.35}
.artigo p{font-size:.87rem;color:var(--ink-72);line-height:1.55}
.artigo .ler{margin-top:auto;padding-top:.8rem;font-size:.82rem;color:var(--cobalt-ink);font-weight:500}
@media (max-width:860px){.artigos{grid-template-columns:1fr}}

/* 07 roadmap resumido */
.rmap{display:flex;flex-direction:column;margin-top:2rem;max-width:52rem}
.rmap .it{display:grid;grid-template-columns:10.5rem 1fr;gap:1.2rem;padding:1rem 0;border-top:1px solid var(--paper-line)}
.rmap .it:first-child{border-top:1px solid rgba(251,251,249,.3)}
.rmap .when{font-family:var(--mono);font-size:.74rem;color:var(--paper-52);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.rmap h3{font-size:1rem}
.rmap p{font-size:.88rem;color:var(--paper-72);margin-top:.3rem}
.status{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .45rem;border-radius:100px}
.status-feito{background:rgba(25,211,197,.18);color:var(--aqua)}
.status-dev{background:rgba(47,107,255,.22);color:#9DBBFF}
.versao-linha{margin-top:1.8rem;font-family:var(--mono);font-size:.78rem;color:var(--paper-52)}
@media (max-width:640px){.rmap .it{grid-template-columns:1fr;gap:.35rem}}

/* 08 cta final */
.cta-final{max-width:44rem;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}

/* /artigos — listagem */
.lista-artigos{display:flex;flex-direction:column;margin-top:2.2rem;max-width:56rem}
.lista-artigos a{display:grid;grid-template-columns:11rem 1fr;gap:1.6rem;padding:1.4rem 0;border-top:1px solid var(--ink-line);color:inherit}
.lista-artigos a:first-child{border-top:1px solid var(--ink-line-2)}
.lista-artigos a:hover{text-decoration:none}
.lista-artigos a:hover h2{color:var(--cobalt-ink)}
.lista-artigos time{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-36);padding-top:.2rem}
.lista-artigos h2{font-size:1.15rem}
.lista-artigos p{font-size:.92rem;color:var(--ink-72);margin-top:.4rem;max-width:56ch}
@media (max-width:720px){.lista-artigos a{grid-template-columns:1fr;gap:.4rem}}

/* /artigos/<slug> — leitura */
.post{max-width:40rem;margin:0 auto;padding:clamp(2.4rem,6vw,4rem) 0}
.post-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-36)}
.post h1{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12;margin-top:.8rem}
.post .resumo{font-size:1.08rem;color:var(--ink-72);margin-top:1rem}
.post-corpo{margin-top:2.2rem;font-size:1.02rem;line-height:1.72}
.post-corpo p{margin-top:1.1rem}
.post-corpo h2{font-size:1.2rem;margin-top:2.2rem}
.post-corpo ul{margin:1.1rem 0 0;padding-left:1.2rem;color:var(--ink-72)}
.post-corpo li{margin-bottom:.5rem}
.post-corpo b{font-weight:600;color:var(--ink)}
.post-fim{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--ink-line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem}

/* rodapé */
footer{background:var(--ink);color:var(--paper);padding:clamp(2.6rem,5vw,3.6rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:2rem;padding-bottom:2.2rem;border-bottom:1px solid var(--paper-line)}
.foot-top .brand{color:var(--paper)}
.foot-top .brand .tag{color:var(--paper-52);border-color:var(--paper-line)}
.foot-sobre{font-size:.85rem;color:var(--paper-52);margin-top:.9rem;max-width:26ch;line-height:1.55}
.foot-col h4{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-52);font-weight:400}
.foot-col ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.foot-col a{font-size:.87rem;color:var(--paper-72)}
.foot-col a:hover{color:var(--paper)}
.foot-links{display:flex;align-items:center;gap:.8rem}
.foot-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;font-family:var(--mono);font-size:.75rem;color:var(--paper-52)}
@media (max-width:980px){.foot-top{grid-template-columns:repeat(2,1fr);gap:1.8rem}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

/* dialog de login — compartilhado pelas páginas institucionais (ver _auth-modal.php) */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(14,15,19,.55);backdrop-filter:blur(5px);display:none;justify-content:center;align-items:flex-start;overflow-y:auto;padding:24px}
.overlay.open{display:flex}
.modal{width:100%;max-width:410px;margin-block:auto;background:var(--paper);border:1px solid var(--ink-line);border-radius:calc(var(--radius) + 3px);padding:1.9rem;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.modal-head{display:flex;align-items:center;margin-bottom:.4rem}
.modal-head strong{font-size:1.15rem;font-weight:600}
.modal .close{margin:-.6rem -.6rem -.6rem auto;padding:.6rem;background:none;border:0;color:var(--ink-52);font-size:1.4rem;cursor:pointer;line-height:1}
.modal .desc{color:var(--ink-72);font-size:.9rem}
.field{margin-top:.9rem}
.field label{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-52);margin-bottom:.35rem}
.field input{width:100%;background:#fff;border:1px solid var(--ink-line);border-radius:var(--radius);padding:.72rem .85rem;color:var(--ink);font-family:var(--display);font-size:.95rem;outline:none;transition:.15s}
.field input:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.hint{font-size:.76rem;color:var(--ink-52);text-align:center;margin-top:.9rem;line-height:1.5}
.err{color:#C0392B;font-size:.82rem;margin-top:.7rem;min-height:1px}
.plan-switch{display:flex;gap:.5rem;margin-top:.9rem}
.plan-switch button{flex:1;padding:.65rem;border-radius:var(--radius);border:1px solid var(--ink-line);background:#fff;color:var(--ink-72);font-family:var(--mono);font-size:.72rem;cursor:pointer;transition:.15s}
.plan-switch button.active{border-color:var(--cobalt);background:var(--cobalt-wash);color:var(--cobalt);font-weight:500}
.auth-tabs{margin-bottom:1.1rem}
.tab-back{background:none;border:0;padding:0;color:var(--cobalt);font-size:.85rem;cursor:pointer;margin-bottom:.6rem;display:inline-block}
.auth-cadastro-opcoes{display:flex;flex-direction:column;gap:.65rem;margin-top:1rem}
.auth-cadastro-opcoes .btn{width:100%;justify-content:center;text-align:center;margin-top:0;white-space:normal;line-height:1.35;flex-direction:column;gap:.15rem}
.auth-cadastro-opcoes .btn span{opacity:.75;font-weight:400;font-size:.82em}

/* timeline "o que vem por aí" — réplica do #rm de index.html */
.badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .6rem;border-radius:99px;white-space:nowrap;margin-left:.5rem;vertical-align:middle}
.badge-incluso{background:var(--cobalt);color:#fff}
.borrado{filter:blur(7px);user-select:none;pointer-events:none;color:var(--ink);opacity:.55;letter-spacing:.02em;transition:filter .5s ease,opacity .5s ease}
.rm{position:relative;margin-top:2rem;padding-left:1.6rem}
.rm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--ink-line)}
.rm-trilho{position:absolute;left:0;top:0;width:1px;height:100%;transform-origin:top;transform:scaleY(var(--p,0));background:var(--cobalt);opacity:.85;transition:transform .12s linear}
.rm-item{position:relative;padding-bottom:2rem;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.rm-item.vis{opacity:1;transform:none}
.rm-item::before{content:"";position:absolute;left:calc(-1.6rem - 4.5px);top:.45rem;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--cobalt);box-sizing:border-box;transform:scale(0);transition:transform .4s cubic-bezier(.25,1,.5,1) .1s}
.rm-item.vis::before{transform:scale(1)}
.rm-item.feito::before{background:var(--cobalt)}
.rm-item.mist::before{background:transparent;border:1px dashed #A8ADB6}
.rm-item.feito .rm-when{color:var(--cobalt)}
.rm-item.feito .rm-when::after{content:" ✓";font-weight:700}
.rm-when{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
.rm-item.mist .rm-when{color:#8A8F9A}
.rm-item h4{margin:.35rem 0 .35rem;font-size:1.15rem}
.rm-item h4 .badge{vertical-align:middle;margin-left:.55rem;position:relative;top:-1px}
.rm-item p{font-size:.94rem;color:var(--ink-72);margin:0;max-width:62ch}
.rm-div{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#8A8F9A;border-top:1px dashed var(--ink-line);padding-top:1.2rem;margin-bottom:1.6rem}
.rm-item .rm-when,.rm-item h4,.rm-item p{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.rm-item.vis .rm-when{opacity:1;transform:none;transition-delay:.12s}
.rm-item.vis h4{opacity:1;transform:none;transition-delay:.2s}
.rm-item.vis p{opacity:1;transform:none;transition-delay:.28s}
.rm-item.proximo.vis::after{content:"";position:absolute;left:calc(-1.6rem - 8px);top:.2rem;width:17px;height:17px;border-radius:50%;border:1px solid var(--cobalt);opacity:0;animation:rm-pulso 2.6s ease-out infinite}
@keyframes rm-pulso{0%{transform:scale(.5);opacity:.55}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .rm-item,.rm-item::before,.rm-item .rm-when,.rm-item h4,.rm-item p{transition:none;transform:none;opacity:1}
  .rm-trilho{transition:none;transform:scaleY(1)}
  .rm-item.proximo.vis::after{animation:none;display:none}
  .borrado{transition:none}
}