/* Paginas internas: vem depois do CSS proprio de cada pagina e de nova.css. */
body.pg{font-family:var(--sans);background:var(--bg);color:var(--ink)}
.pg .mono{font-family:var(--mono)}
.pg h1,.pg h2,.pg h3,.pg h4{font-family:var(--sans)}
.pg em{font-family:inherit}
.pg .prose em,.pg .art-sub em{font-style:italic}

/* esfera leve: rola junto com o topo da pagina */
.pg .orb-css{position:absolute;inset:0 0 auto;height:100vh;background:radial-gradient(circle at 92% 7%,#F7D9B4 0,#EC7A1E 11%,#8A3A0C 21%,rgba(138,58,12,0) 34%)}
.sem-webgl .pg .contato{background:radial-gradient(circle at 96% 96%,#EC7A1E 0,#8A3A0C 20%,rgba(138,58,12,0) 44%)}

/* hero das internas */
.pg-hero{position:relative;display:flex;align-items:flex-end;min-height:min(74dvh,820px);padding:112px 0 clamp(30px,6vh,64px)}
.pg-hero .caixa{position:relative}
.pg-hero .crumb,.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);padding:0;margin-bottom:clamp(14px,3vh,28px)}
.crumb a{transition:color .2s;display:inline-block;padding:6px 0}
.crumb a:hover{color:var(--acc)}
.crumb span{margin:0 8px;opacity:.6}
.art-head,.svc-head,.blog-head{border:0;padding:0;margin:0;max-width:none}
.pg-hero h1{letter-spacing:-.05em;font-weight:400;line-height:.98;text-wrap:balance}
.t-curto h1{font-size:clamp(58px,min(13.4vw,30vh),300px)}
.t-medio h1{font-size:clamp(42px,min(8.4vw,20vh),190px);max-width:17ch}
.t-longo h1{font-size:clamp(36px,min(6vw,15vh),130px);line-height:1.03;max-width:21ch}
.pg-hero .ln{padding-bottom:.14em;margin-bottom:-.14em}
.pg-hero p,.art-sub{color:var(--ink-2);font-size:clamp(17px,1.5vw,22px);line-height:1.42;max-width:52ch;margin-top:clamp(14px,2.4vh,24px)}
.art-cat{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--acc);background:none;border:0;padding:8px 0;margin-bottom:6px;letter-spacing:.04em}
.art-meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px}

/* leitura: alinhada a segunda linha da grade */
.pg .wrap-lg,.pg main>.wrap{width:100%;max-width:1720px;margin-inline:auto;padding-inline:var(--marg);position:relative}
.pg .wrap-lg>*,.pg .wrap-lg article>*{max-width:800px;margin-left:calc(25% + 12px)}
.pg .wrap-lg>article{max-width:none;margin-left:0}
.pg .capa{max-width:none;width:calc(75% - 12px);border-radius:10px;border:0;margin-bottom:clamp(26px,5vh,48px)}
.prose{color:var(--ink-2);font-size:18px;line-height:1.7}
.prose h2{font-size:clamp(28px,3.1vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:400;margin:clamp(44px,8vh,76px) 0 16px;color:var(--ink);text-wrap:balance}
.prose h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.02em;font-weight:500;color:var(--ink);margin:30px 0 10px}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.prose table{font-size:15px}
.prose th{color:var(--ink);border-bottom-color:var(--line-2)}
.prose td{color:var(--ink-2)}
.prose code{background:var(--bg-3);color:var(--ink);overflow-wrap:anywhere}
.prose pre{background:var(--bg-2);border:1px solid var(--line)}
.prose blockquote{border-left-color:var(--acc);color:var(--ink-2)}
.tldr{background:transparent;border:0;border-left:2px solid var(--acc);border-radius:0;padding:4px 0 4px clamp(16px,2vw,26px);margin-bottom:clamp(26px,5vh,44px)}
.tldr .t{color:var(--acc);font-family:var(--mono);letter-spacing:.06em}
.tldr p{color:var(--ink);font-size:clamp(19px,1.7vw,24px);line-height:1.42;letter-spacing:-.015em}
.tldr a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

/* perguntas nas paginas */
.faq-art{border-top:1px solid var(--line-2);margin-top:clamp(44px,8vh,80px)}
.faq-art>h2{font-size:clamp(32px,4vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:400;margin-bottom:18px}
.faq-q{border-top:1px solid var(--line);padding:18px 0}
.faq-q h3{font-size:clamp(18px,1.5vw,21px);font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.faq-q p{color:var(--ink-2)}
.pg-faq .fq-grupo{max-width:none}

/* autor e leia tambem */
.autor{background:transparent;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:26px 0 0;margin-top:clamp(40px,7vh,64px)}
.autor img{border-radius:8px;filter:grayscale(1);width:96px;height:96px;object-fit:cover}
.autor p{color:var(--ink-2)}
.autor strong{color:var(--ink)}
.autor .a-lbl{font-family:var(--mono);color:var(--muted)}
.autor .a-links a{color:var(--muted)}
.autor .a-links a:hover{color:var(--acc)}
.rel{border-top:1px solid var(--line-2);margin-top:clamp(30px,5vh,46px);padding-top:22px}
.rel .t{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.rel a{color:var(--ink);font-size:clamp(18px,1.6vw,22px);letter-spacing:-.015em}
.rel a:hover{color:var(--acc)}
.art-cta{background:var(--bg-2);border-color:var(--line)}
.art-cta h3{color:var(--ink)}
.art-cta p{color:var(--ink-2)}

/* lista do blog */
.cats{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:clamp(18px,3vh,30px);font-family:var(--mono)}
.cats a{font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);border:0;border-radius:0;padding:9px 0;background:none;border-bottom:1px solid transparent}
.cats a:hover,.cats a.on{color:var(--ink);border-color:var(--acc);background:none}
.plist{border-top:1px solid var(--line-2)}
.pitem{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:center;padding:clamp(14px,2.6vh,24px) 0;border-bottom:1px solid var(--line);border-top:0;margin:0;transition:none;background:none;content-visibility:auto;contain-intrinsic-size:auto 200px}
.pitem:hover{background:none;transform:none}
.pitem .thumb{grid-column:1;width:calc(100% - 24px);border:0;border-radius:6px}
.pitem>div{grid-column:2/-1;padding-left:12px;max-width:none}
.pitem h2{font-size:clamp(24px,2.6vw,42px);line-height:1.08;letter-spacing:-.035em;font-weight:400;margin-bottom:6px}
.pitem h2 a{transition:color .2s}
.pitem:hover h2 a{color:var(--acc)}
.pitem p{color:var(--muted);font-size:15.5px;line-height:1.45;max-width:64ch}
.pitem .tag{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-top:8px}

/* servicos */
.svc-grid{display:block;border-top:1px solid var(--line-2)}
.svc-card{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:0;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:clamp(20px,3.6vh,36px) 0;background:none}
.svc-card:hover{transform:none;border-color:var(--line)}
.svc-card h2{grid-column:1/span 2;font-size:clamp(28px,3.6vw,60px);line-height:1.05;letter-spacing:-.04em;font-weight:400;color:var(--ink-2);padding-right:20px;transition:transform .6s var(--ease),color .3s}
.svc-card:hover h2{transform:translateX(clamp(8px,2vw,30px));color:var(--ink)}
.svc-card p{grid-column:3;grid-row:1;color:var(--muted);font-size:15.5px;line-height:1.45;padding-left:12px;margin:0}
.svc-card .go{grid-column:4;grid-row:1;justify-self:end;font-family:var(--mono);font-size:12px;color:var(--acc)}

/* pills que vieram dos botoes antigos */
.pg .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pg .btn{border-radius:999px;font-family:var(--sans);font-weight:500}
.pg .btn-solid,.pg .btn-invert{background:var(--acc);color:var(--tinta)}
.pg .btn-line,.pg .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.prose .pill{color:var(--tinta);text-decoration:none}
.prose .linha{color:var(--ink);text-decoration:none}
.prova{border-color:var(--line);color:var(--muted);font-family:var(--mono);font-size:12px}

/* paginas do Atlas e do Mapeia */
.pg-prod.atl-hero,.pg-prod.mp-hero{background:transparent;border:0;color:var(--ink)}
.pg-prod .wrap{width:100%;max-width:1720px;margin-inline:auto;padding-inline:var(--marg);position:relative}
.pg-prod .atl-hero-in,.pg-prod .mp-hero-in{display:grid;grid-template-columns:1fr 3fr;gap:0;align-items:end;padding:0}
.pg-prod .atl-logo,.pg-prod .mp-hlogo{width:min(180px,76%);height:auto;margin:0}
.pg-prod .atl-lede,.pg-prod .mp-lede{font-size:clamp(46px,min(9vw,21vh),190px);line-height:.96;letter-spacing:-.05em;font-weight:400;color:var(--ink);text-wrap:balance}
.pg-prod h1{font-size:clamp(19px,1.8vw,28px);line-height:1.32;letter-spacing:-.02em;font-weight:400;color:var(--ink-2);max-width:44ch;margin-top:clamp(14px,2.4vh,24px)}
.pg-prod .atl-status,.pg-prod .mp-status{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.pg-prod .acts{margin-top:clamp(16px,3vh,28px)}
.pg-prod .pill{min-height:52px}

/* o fluxo em serpentina ocupava mais que a coluna antiga */
.pg .fluxo-rot,.pg .fluxo-wrap,.pg .fluxo-dica{margin-left:0;margin-right:0}

/* faixas que eram escuras sobre fundo branco */
.atl-beam{background:var(--bg-2)}
.pg .beam .oglyph,.pg .beam .mic,.pg .beam .person{color:var(--tinta);stroke:var(--tinta)}
.pg .beam .pulse{stroke:var(--acc)}

/* a esfera so aparece no topo e no fechamento: o meio da pagina e opaco */
.pg main>*:not(.pg-hero):not(.contato){position:relative;background:var(--bg)}

/* a chamada final usa o texto da pagina */
.pg .contato{min-height:min(100dvh,900px)}
.pg .contato .gigante{font-size:clamp(44px,min(8.6vw,19vh),170px);max-width:15ch;text-wrap:balance}

@media (max-width:1100px){
  .pg .wrap-lg>*,.pg .wrap-lg article>*{margin-left:0;max-width:760px}
  .pg .capa{width:100%}
}
@media (max-width:900px){
  .pg-hero{min-height:0;padding:96px 0 28px}
  .t-curto h1{font-size:clamp(46px,14.6vw,110px)}
  .t-medio h1{font-size:clamp(36px,10.4vw,76px)}
  .t-longo h1{font-size:clamp(30px,8.4vw,60px)}
  .prose{font-size:17px}
  .prose table{display:block;overflow-x:auto;font-size:14px}
  .prose th,.prose td{min-width:110px}
  .pitem{grid-template-columns:96px 1fr;align-items:start;gap:0 12px}
  .pitem .thumb{width:100%}
  .pitem>div{grid-column:2;padding-left:0}
  .pitem h2{font-size:clamp(19px,5vw,26px);line-height:1.14;letter-spacing:-.02em}
  .pitem p{display:none}
  .svc-card{grid-template-columns:1fr;gap:8px}
  .svc-card h2,.svc-card p,.svc-card .go{grid-column:1;grid-row:auto;padding:0;justify-self:start}
  .pg-prod .atl-hero-in,.pg-prod .mp-hero-in{grid-template-columns:1fr;gap:18px}
  .pg-prod .atl-logo,.pg-prod .mp-hlogo{width:110px}
  .pg-prod .atl-lede,.pg-prod .mp-lede{font-size:clamp(40px,12vw,84px)}
  .pg .contato .gigante{font-size:clamp(38px,11vw,84px)}
  .autor{grid-template-columns:72px 1fr;gap:14px}
  .autor img{width:72px;height:72px}
}
@media (max-height:520px) and (orientation:landscape){
  .pg-hero{padding-top:70px}
  .t-curto h1{font-size:min(10vw,24vh)}
  .t-medio h1{font-size:min(6.6vw,18vh)}
  .t-longo h1{font-size:min(5vw,13vh);max-width:30ch}
  .pg .contato{min-height:0}
  .pg .contato .gigante{font-size:min(6vw,16vh);max-width:22ch}
}