/* =====================================================================
   O ESTILO BUILDEROPUS (26/10/2026, à noite)
   Um estilo só para as 13 páginas. A inicial leva este mesmo arquivo dentro dela (o programa copia).

   A ideia: a BuilderOpus desenha o Google da empresa como um arquiteto desenha uma casa. O que marca
   o site é o desenho de planta: linha fina, cruzinhas nos cantos, cotas em letra de máquina e uma
   planta animada própria em cada página. Todo o resto fica quieto.

   Letras (só 5 tamanhos, nada fora deles):
     --t1  título do topo        44 a 96 px   Geist 700, linhas apertadas
     --t2  título de cada parte  32 a 56 px   Geist 700
     --t3  destaque              20 a 24 px   Geist 600 (nome de item, frase do topo, pergunta)
     --t4  texto                 17 px        Geist 400 (16 no celular)
     --t5  nota                  13 px        Geist 500 (trilha, fonte, legenda); Geist Mono só nas cotas dos desenhos
   Unbounded só no nome BUILDEROPUS (menu, faixa e rodapé).

   Espaços: um passo só, de 8 px (--e1). Tudo é 8, 16, 24, 32, 48, 64, 96 ou 128.
   Largura do texto: até 66 caracteres por linha (--medida). Títulos até 20 palavras curtas.

   Cores (as da marca, nenhuma outra): Breu #070A12 (fundo), Superfície #0D131F (cartões),
   Faixa #03308A (a faixa e a chamada final), Ação #0B44C5 (o botão e o traço que importa),
   Cinza #9A9FA9 (texto de apoio), Branco #FFFFFF (texto e linhas, com transparência).

   Botões: o principal (Ação cheio, em pílula; branco quando está sobre a Faixa) e o discreto
   (texto com um traço embaixo, com o ícone do WhatsApp quando leva a ele). Nada além disso.
   Cartão: Superfície, linha fina de 1 px e cantos de 24 px. Só quando o conteúdo é um conjunto.
   Lista: linha fina entre os itens; o detalhe abre com um toque (<details>, aberto sem script).
   Desenhos em linha: traço de 1,5 px branco a 60%, o que importa em Ação, cruzinhas e cotas.

   A família de animações (igual em todas as páginas, só com transform, opacity e clip-path):
     1. a entrada de cada parte: o título sobe linha por linha com máscara; o resto sobe 24 px e aparece;
     2. a régua fina no alto de cada parte se desenha da esquerda;
     3. a rolagem macia (no computador com mouse);
     4. a luz que segue o dedo e o mouse nos cartões;
     5. a passagem para a parte clara ou para a chamada final, num destes quatro jeitos, um por página:
        a tinta branca que sobe, a grade que se preenche, o círculo que cresce e a cortina de borda curva
        (no celular, a versão leve: a tinta sem filtro, a grade igual, e no lugar do círculo e da cortina
        a parte cresce um pouco);
     6. a animação própria da página (data-anima) e mais um efeito escolhido para o assunto dela.
   O que corre sem parar (a faixa, a parede de buscas, o brilho do botão) para quando sai da tela,
   e as faixas têm um botão pequeno de pausar.
   Com "reduzir movimento", nada corre. Sem script, a página aparece inteira e parada.
   ===================================================================== */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fontes/geist-latin.woff2?v=20261020) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fontes/geist-mono-latin.woff2?v=20261020) format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/fontes/unbounded-800-completa.woff2) format("woff2"); }

:root {
  --breu: #070A12;
  --superficie: #0D131F;
  --faixa: #03308A;
  --acao: #0B44C5;
  --cinza: #9A9FA9;
  --branco: #FFFFFF;
  --linha: rgba(255,255,255,.07);
  --linha-forte: rgba(255,255,255,.14);
  --tinta: rgba(255,255,255,.62);
  --f-nome: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-texto: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t1: clamp(44px, 6.4vw, 96px);
  --t2: clamp(32px, 4vw, 56px);
  --t3: clamp(20px, 1.7vw, 24px);
  --t4: 17px;
  --t5: 13px;
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e6: 48px; --e8: 64px; --e12: 96px; --e16: 128px;
  --medida: 66ch;
  --raio: 24px;
  --gutter: max(16px, 2.6vw, env(safe-area-inset-left, 0px));
  --gutter-d: max(16px, 2.6vw, env(safe-area-inset-right, 0px));
  --largura: 1320px;
  --sai: cubic-bezier(.2,.8,.2,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--breu); scroll-padding-top: 96px; }
/* em Trabalhos, a régua presa embaixo do menu: o foco do teclado e os links para a parte não ficam escondidos atrás dela */
html:has(.regua-obras) { scroll-padding-top: 144px; }
/* em Perguntas, os assuntos presos no alto também (só no computador, onde eles ficam presos) */
@media (min-width: 901px) { html:has(.grupos-nav) { scroll-padding-top: 168px; } }
body {
  margin: 0; background: var(--breu); color: var(--branco);
  font-family: var(--f-texto); font-size: var(--t4); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--f-texto); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t1); font-weight: 700; line-height: .98; letter-spacing: -.045em; }
h2 { font-size: var(--t2); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; }
h3 { font-size: var(--t3); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
p { margin: 0; }
.nota { font-size: var(--t5); line-height: 1.45; color: var(--cinza); }

/* ---------- o fundo: a grade fina de planta ---------- */
.fundo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
}
.fundo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fundo.vivo { background-image: none; }
main, .menu { position: relative; z-index: 1; }

/* ---------- os dois botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-height: 56px; padding: 0 var(--e3);
  font-family: var(--f-texto); font-size: var(--t4); font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--branco); background: var(--acao); border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .2s ease;
}
.botao:hover { transform: translateY(-2px); }
/* o brilho que passa pelo botão duas vezes quando ele aparece e para sozinho, em uns 5 segundos (ideia do Shiny Text, reactbits) */
.botao::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%);
  transform: translateX(-120%);
}
.anima .botao.brilha::after { animation: brilho 2s ease-in-out 1s 2; }
@keyframes brilho { 0%, 40% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.botao-branco { background: var(--branco); color: var(--breu); }
.botao-branco::after { background: linear-gradient(105deg, transparent 35%, rgba(11,68,197,.16) 50%, transparent 65%); }
.discreto {
  display: inline-flex; align-items: center; gap: var(--e1); min-height: 48px;
  color: var(--branco); font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
  opacity: .92; transition: opacity .2s;
}
.discreto:hover { opacity: 1; }
.discreto svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin-top: var(--e4); }
.link { color: var(--branco); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-color: var(--branco); }
.selo {
  font-family: var(--f-mono); font-size: var(--t5); letter-spacing: .02em;
  background: var(--branco); color: var(--breu); padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}

/* =====================================================================
   MENU E RODAPÉ: igual na inicial (index.html) e nas páginas de dentro
   ===================================================================== */
/* o toque responde na hora, sem esperar o toque duplo */
a, button, summary { touch-action: manipulation; }
/* o atalho para quem usa o teclado: aparece só quando recebe o foco */
.pular {
  position: fixed; z-index: 70; left: 16px; top: 16px; padding: 12px 16px; border-radius: 999px;
  background: var(--branco); color: var(--breu); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s ease;
}
.pular:focus { transform: none; }
main:focus { outline: none; }
.menu {
  position: fixed; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 0; right: 0;
  padding-left: var(--gutter); padding-right: var(--gutter-d); pointer-events: none;
}
.menu-pilula {
  pointer-events: auto; max-width: var(--largura); margin: 0 auto; position: relative;
  display: flex; align-items: center; gap: var(--e2); padding: 8px 8px 8px 16px;
  background: rgba(13,19,31,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--linha-forte); border-radius: 999px;
}
/* a linha de quanto já rolou fica presa dentro da pílula */
.menu-fio { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.progresso { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--acao); transform-origin: 0 50%; transform: scaleX(0); }
.marca { display: flex; align-items: center; gap: var(--e1); text-decoration: none; flex: 0 0 auto; }
.marca img { width: 24px; height: 24px; display: block; }
.marca-nome { font-family: var(--f-nome); font-weight: 800; font-size: var(--t4); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.menu-links { display: flex; align-items: center; gap: 0; margin: 0 0 0 auto; padding: 0; list-style: none; }
.menu-item {
  display: flex; align-items: center; gap: var(--e1); padding: 8px 12px; border-radius: 999px;
  font-size: var(--t5); font-weight: 500; letter-spacing: .01em; color: var(--cinza); text-decoration: none; cursor: pointer; transition: color .2s;
}
.menu-item:hover, .servicos[open] > .menu-item { color: var(--branco); }
/* a página em que a pessoa está: um quadradinho Ação antes do nome (ideia do Kraftline, cta.gallery) */
.menu-item[aria-current="page"], .menu-item.atual { color: var(--branco); }
.menu-item[aria-current="page"]::before, .menu-item.atual::before { content: ""; width: 6px; height: 6px; background: var(--acao); flex: 0 0 auto; }
/* o texto do link rola para cima e outro igual entra por baixo (ideia do Alche) */
.rola { display: block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.rola span { display: block; position: relative; transition: transform .45s cubic-bezier(.6,0,.2,1); }
.rola span::after { content: attr(data-t); content: attr(data-t) / ""; position: absolute; left: 0; top: 100%; color: var(--branco); }
a:hover > .rola span, a:focus-visible > .rola span, summary:hover > .rola span, summary:focus-visible > .rola span { transform: translateY(-100%); }
/* Serviços: a lista que abre. Sem script, o próprio navegador abre e fecha (details). */
.servicos > summary, .menu-cel > summary { list-style: none; }
.servicos > summary::-webkit-details-marker, .menu-cel > summary::-webkit-details-marker { display: none; }
.menu-seta { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.6,0,.2,1); }
.servicos[open] .menu-seta { transform: rotate(180deg); }
.servicos-painel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 32px;
  box-shadow: 0 40px 80px -32px rgba(0,0,0,.85);
}
.servicos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.servicos-lista a {
  position: relative; height: 100%; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--e3);
  padding: 16px 48px 16px 16px; border-radius: var(--raio); border: 1px solid var(--linha); background: rgba(255,255,255,.03);
  color: var(--branco); text-decoration: none; transition: border-color .25s;
}
.servicos-lista a:hover, .servicos-lista a:focus-visible, .servicos-lista a[aria-current="page"] { border-color: var(--acao); }
.servico-nome { font-size: var(--t3); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.servico-linha { font-size: var(--t5); line-height: 1.45; color: var(--cinza); }
.servico-seta { position: absolute; right: 16px; top: 16px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--sai); }
.servicos-lista a:hover .servico-seta, .servicos-lista a:focus-visible .servico-seta { transform: translate(3px, -3px); }
.servicos-lista a[aria-current="page"] .servico-linha::before { content: "Você está aqui. "; color: var(--branco); }
.botao-menu { min-height: 40px; padding: 0 var(--e2); font-size: var(--t5); flex: 0 0 auto; }
.botao-menu .so-curto { display: none; }
/* o menu do celular: a pílula abre um painel (ideia do WeEvolveIT), com o contato dentro (ideia do ESR Bespoke) */
.menu-cel { display: none; }
.menu-abre { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha-forte); background: rgba(255,255,255,.04); color: var(--branco); cursor: pointer; position: relative; }
.menu-abre i { position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .35s cubic-bezier(.6,0,.2,1); }
.menu-abre i:first-of-type { transform: translateY(-4px); }
.menu-abre i:last-of-type { transform: translateY(4px); }
.menu-cel[open] .menu-abre i:first-of-type { transform: rotate(45deg); }
.menu-cel[open] .menu-abre i:last-of-type { transform: rotate(-45deg); }
.menu-painel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px;
  max-height: calc(100svh - 104px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: 0 40px 80px -32px rgba(0,0,0,.85);
}
.painel-rotulo { padding: 16px 16px 8px; font-size: var(--t5); color: var(--cinza); }
.menu-painel ul { list-style: none; margin: 0; padding: 0; }
.painel-servicos { display: grid; gap: 8px; padding: 0 0 8px; }
.painel-servicos a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e2); min-height: 56px; padding: 8px 16px;
  border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--linha);
  font-size: var(--t4); font-weight: 600; line-height: 1.25; text-decoration: none; color: var(--branco);
}
.painel-servicos a[aria-current="page"] { border-color: var(--acao); }
.painel-servicos svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--cinza); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.painel-links li + li { border-top: 1px solid var(--linha); }
.painel-links a { display: flex; align-items: center; gap: var(--e1); padding: 16px; font-size: var(--t3); font-weight: 600; letter-spacing: -.02em; text-decoration: none; color: var(--branco); }
.painel-links a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; background: var(--acao); }
.painel-zap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; margin-bottom: 8px; padding: 16px; border-radius: 16px; background: var(--acao); color: var(--branco); text-decoration: none; font-weight: 600; }
.painel-zap b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------- rodapé ---------- */
.rodape { position: relative; z-index: 0; overflow: hidden; }
.rodape-mexe { padding-left: var(--gutter); padding-right: var(--gutter-d); }
.rodape-dentro { max-width: var(--largura); margin: 0 auto; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; padding-top: var(--e6); }
.pilula { display: inline-flex; align-items: center; gap: var(--e1); min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha-forte); font-size: var(--t5); color: var(--cinza); }
.pilula b { color: var(--branco); font-weight: 500; font-variant-numeric: tabular-nums; }
a.pilula { text-decoration: none; transition: border-color .2s; }
a.pilula:hover { border-color: rgba(255,255,255,.4); }
/* o relógio só aparece quando o script consegue mostrar a hora */
.pilula-hora { display: none; }
.pilula-hora.pronta { display: inline-flex; }
.pilula i { width: 8px; height: 8px; border-radius: 50%; background: var(--acao); display: block; position: relative; }
.pilula i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--acao); }
.anima .pilula i::after { animation: pulsa 1.8s ease-out infinite; }
@keyframes pulsa { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
/* as colunas: a marca à esquerda e as listas à direita (ideia dos rodapés Nominal e AUI, no Unsection) */
.rodape-colunas { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: var(--e6) var(--e4); padding-block: var(--e8) var(--e6); }
.rodape-cab { margin: 0 0 var(--e2); font-size: var(--t5); font-weight: 600; color: var(--cinza); }
.rodape-colunas p { color: var(--cinza); max-width: 36ch; }
.rodape-colunas .rodape-regiao { margin-top: var(--e2); color: var(--branco); }
.rodape-colunas .rodape-cidades { margin-top: var(--e1); font-size: var(--t5); }
.rodape-colunas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.rodape-colunas a { text-decoration: none; color: var(--branco); display: inline-block; padding-block: 4px; }
.rodape-colunas li { color: var(--cinza); }
.rodape-nome {
  font-family: var(--f-nome); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em;
  font-size: 11.4vw; line-height: .8; margin: 0 0 -1.6vw; padding-top: .06em; white-space: nowrap; text-align: center;
  color: var(--branco); user-select: none; overflow: hidden;
}
.rodape-nome .letra { display: inline-block; }
.rodape-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  padding-block: var(--e3) var(--e4); border-top: 1px solid var(--linha-forte); font-size: var(--t5); color: var(--cinza);
  position: relative; background: var(--breu);
}
.rodape-base a { color: var(--branco); text-decoration: none; padding-block: 8px; }
.rodape-base a:hover { text-decoration: underline; text-underline-offset: 4px; }
.volta { display: inline-flex; align-items: center; gap: var(--e1); }
.volta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s; }
.volta:hover svg { transform: translateY(-3px); }
@media (max-width: 1100px) {
  .rodape-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape-colunas > :first-child { grid-column: 1 / -1; }
  .menu-item { padding: 8px 8px; }
}
@media (max-width: 900px) {
  .menu-links { display: none; }
  .botao-menu { margin-left: auto; }
  .menu-cel { display: block; flex: 0 0 auto; }
  .pilulas { padding-top: var(--e4); }
  .pilula:nth-child(3) { display: none; }
  .rodape-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4) var(--e3); padding-block: var(--e4); }
  .rodape-colunas > :last-child { grid-column: 1 / -1; }
  .rodape-nome { margin-bottom: 0; }
  .rodape-base { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .botao-menu .so-largo { display: none; }
  .botao-menu .so-curto { display: inline; }
}
@media (max-width: 520px) { .rodape-colunas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .marca-nome { font-size: var(--t5); }
  .menu-pilula { gap: 8px; padding-left: 12px; }
  .botao-menu { padding: 0 12px; }
}
@media (max-width: 360px) { .marca img { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .rola span, .menu-seta, .menu-abre i { transition: none; }
  .pilula i::after { animation: none; display: none; }
}
/* ===================== fim do bloco menu e rodapé ===================== */

/* ================== o topo das páginas de dentro ==================
   A trilha em cima do título, à esquerda; o título grande embaixo (ideia do Emotion Agency, Awwwards:
   a página de dentro repete o jeito do topo da inicial). O globo pequeno com o Brasil aceso fica no
   alto à direita: é o elemento único (regra 27). */
.topo {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 80svh, 840px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(env(safe-area-inset-top, 0px) + 128px) var(--gutter-d) var(--e8) var(--gutter);
}
.globo-tela { position: absolute; z-index: -4; left: 0; top: 0; pointer-events: none; display: block; }
.globo-luz { position: absolute; z-index: -5; pointer-events: none; border-radius: 50%; left: 76%; top: 33%; width: 46vh; height: 46vh; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(11,68,197,.3), rgba(11,68,197,.1) 55%, rgba(11,68,197,0)); }
/* sem script: um anel no mesmo lugar do globo */
.topo::before { content: ""; position: absolute; z-index: -5; width: min(34svh, 22vw); aspect-ratio: 1; border-radius: 50%; left: 76%; top: 33%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 120px -20px rgba(11,68,197,.55), inset 0 0 100px -40px rgba(11,68,197,.6); }
.topo.vivo::before { display: none; }
.topo::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(to top, rgba(7,10,18,.94) 0%, rgba(7,10,18,.6) 30%, rgba(7,10,18,0) 60%), linear-gradient(to right, rgba(7,10,18,.5) 0%, rgba(7,10,18,0) 42%); }
.topo-dentro { position: relative; z-index: 1; width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: end; gap: var(--e4) var(--e8); }
.topo-titulo, .topo-lado { min-width: 0; }
.lin { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.lin-d { display: block; }
.trilha { margin: 0 0 var(--e3); font-size: var(--t5); font-weight: 500; color: var(--cinza); }
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 8px; }
.trilha li { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.trilha li:last-child { flex: 0 1 auto; min-width: 0; }
.trilha li + li::before { content: "/"; content: "/" / ""; color: rgba(255,255,255,.3); }
.trilha a { display: inline-block; padding-block: 12px; color: var(--branco); text-decoration: none; }
.trilha a:hover { text-decoration: underline; text-underline-offset: 4px; }
.trilha [aria-current="page"] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topo-lado { display: flex; flex-direction: column; align-items: flex-start; }
.subtitulo { font-size: var(--t3); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; max-width: 32ch; }
.acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); margin-top: var(--e4); }
.topo-curto { min-height: clamp(520px, 70svh, 720px); }
.artigo-meta { margin-top: var(--e3); }
/* a entrada curta: o menu desce, a trilha e o título sobem e o globo chega (o globo é do script) */
.anima .menu-pilula { animation: desce-menu .9s var(--sai) .05s both; }
.anima .topo .lin-d { animation: sobe-linha 1s var(--sai) both; animation-delay: calc(.16s + var(--k, 0) * .1s); }
.anima .topo .trilha, .anima .topo .subtitulo, .anima .topo .acoes, .anima .topo .artigo-meta { animation: sobe-leve .9s var(--sai) both; }
.anima .topo .trilha { animation-delay: .08s; }
.anima .topo .subtitulo, .anima .topo .artigo-meta { animation-delay: .42s; }
.anima .topo .acoes { animation-delay: .52s; }
.anima .passagem .faixa-in { animation: entra-faixa 1.2s var(--sai) .5s both; }
@keyframes desce-menu { from { transform: translateY(-170%); opacity: 0; } }
@keyframes sobe-linha { from { transform: translateY(105%); } }
@keyframes sobe-leve { from { transform: translateY(24px); opacity: 0; } }
@keyframes entra-faixa { from { transform: translateX(14%); opacity: 0; } }

/* ---------- a passagem: a faixa que corre (ideia do Boc.Studio, Awwwards) ---------- */
.passagem { position: relative; z-index: 2; padding-block: var(--e4) var(--e6); overflow: hidden; }
.faixa { background: var(--faixa); transform: rotate(-1.6deg) scale(1.04); border-block: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.faixa-trilho { display: flex; width: max-content; }
.anima .faixa-trilho { animation: corre 40s linear infinite; }
.faixa-trilho > div { display: flex; align-items: center; flex: 0 0 auto; }
.faixa span { display: inline-flex; align-items: center; gap: var(--e3); padding: 16px 0 16px var(--e3); font-size: var(--t3); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.faixa span::after { content: ""; width: 7px; height: 7px; background: var(--branco); transform: rotate(45deg); }
.faixa .nome { font-family: var(--f-nome); font-weight: 800; font-size: var(--t4); letter-spacing: -.01em; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ================== as partes ================== */
section[id], .chamada { scroll-margin-top: 88px; }
.sec { position: relative; padding: var(--e16) var(--gutter-d) var(--e16) var(--gutter); }
.sec-dentro { max-width: var(--largura); margin: 0 auto; position: relative; }
/* a régua fina no alto de cada parte: a passagem de uma parte para a outra */
.regua { position: absolute; left: var(--gutter); right: var(--gutter-d); top: 0; height: 1px; max-width: var(--largura); margin: 0 auto; background: var(--linha-forte); transform-origin: 0 50%; }
.regua::before, .regua::after { content: ""; position: absolute; top: -6px; width: 1px; height: 13px; background: rgba(255,255,255,.4); }
.regua::before { left: 0; } .regua::after { right: 0; }
.anima .regua { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.6,0,.2,1); }
.anima .regua.revelado { transform: none; }
.cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e3) var(--e8); align-items: end; }
.apoio { font-size: var(--t4); line-height: 1.6; color: var(--cinza); max-width: 46ch; }
.texto { max-width: var(--medida); }
.texto p { font-size: var(--t3); font-weight: 400; line-height: 1.5; letter-spacing: -.01em; }
.texto p + p { margin-top: var(--e2); }
.texto h2 + p, .texto h2 + .desenho { margin-top: var(--e3); }
.sub-titulo { margin: var(--e8) 0 0; font-size: var(--t3); font-weight: 600; }
.fonte { margin-top: var(--e1); font-size: var(--t5); color: var(--cinza); }
.fonte a { color: var(--cinza); text-decoration: underline; text-decoration-color: rgba(154,159,169,.5); text-underline-offset: 3px; }
.fonte a:hover { color: var(--branco); }
.bordao { margin-top: var(--e2); font-size: var(--t5); color: var(--cinza); }
.bordao b { color: var(--branco); font-weight: 600; }
.anima [data-revela] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s var(--sai); transition-delay: calc(var(--i, 0) * 80ms); }
.anima [data-revela].revelado { opacity: 1; transform: none; }

/* a parte clara (no máximo uma por página): o papel da planta */
.claro-pista { padding-inline: clamp(0px, 1.2vw, 16px); }
.sec.claro { background: var(--branco); color: var(--breu); border-radius: clamp(32px, 4vw, 48px); --linha-forte: rgba(7,10,18,.14); --linha: rgba(7,10,18,.06); --tinta: rgba(7,10,18,.62); transform-origin: 50% 0; }
.claro .apoio, .claro .fonte, .claro .nota, .claro .lista-resumo, .claro .item p { color: #3B4250; }
.claro .fonte a { color: #3B4250; }
.claro :focus-visible { outline-color: var(--breu); }
.claro .link, .claro .discreto { color: var(--breu); }
.claro .regua { display: none; }

/* ---------- os cartões (só quando o conteúdo é um conjunto) ---------- */
.cartao { position: relative; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); }
.claro .cartao { background: #F5F6F8; }
/* as cruzinhas nos cantos, como numa planta (ideia do Alche e do Heron) */
.canto { position: absolute; z-index: 2; width: 13px; height: 13px; pointer-events: none; }
.canto::before, .canto::after { content: ""; position: absolute; background: rgba(255,255,255,.5); }
.claro .canto::before, .claro .canto::after { background: rgba(7,10,18,.4); }
.canto::before { left: 6px; top: 0; width: 1px; height: 13px; }
.canto::after { top: 6px; left: 0; height: 1px; width: 13px; }
.canto.c1 { left: 12px; top: 12px; } .canto.c2 { right: 12px; top: 12px; } .canto.c3 { left: 12px; bottom: 12px; } .canto.c4 { right: 12px; bottom: 12px; }
.itens { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); gap: var(--e2); }
.item { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3); }
.item p { color: var(--cinza); }
.item .fonte { margin-top: auto; padding-top: var(--e1); }

/* ---------- a lista: o que a gente faz (o detalhe abre com um toque; sem script, tudo aberto) ----------
   (ideia da lista de serviços em linhas finas do ESR Bespoke, Awwwards) */
.lista { list-style: none; margin: var(--e6) 0 0; padding: 0; border-top: 1px solid var(--linha-forte); }
.lista > li { border-bottom: 1px solid var(--linha-forte); }
.lista details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--e2); align-items: start; padding: var(--e3) 0; }
.lista details > summary::-webkit-details-marker { display: none; }
.lista-nome { display: block; font-size: var(--t3); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.lista-resumo { display: block; margin-top: 4px; color: var(--cinza); }
.lista-detalhe { padding: 0 48px var(--e3) 0; max-width: calc(var(--medida) + 48px); }
.lista-detalhe p + p { margin-top: var(--e1); }
.lista-simples > li, .lista > li.lista-simples-item { display: block; padding: var(--e3) 48px var(--e3) 0; }
.mais { position: relative; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--linha-forte); transition: transform .4s cubic-bezier(.6,0,.2,1); }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; }
.mais::after { transform: rotate(90deg); }
details[open] > summary .mais { transform: rotate(45deg); }
details[open] > summary .mais::before, details[open] > summary .mais::after { background: currentColor; }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e8); margin-top: var(--e6); }
.duas .lista { margin-top: var(--e2); }
.duas h3 { font-size: var(--t3); }

/* ---------- os números com fonte (uma linha, sem cartão) ---------- */
.numeros { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linha-forte); }
.numeros li { padding: var(--e3) var(--e3) var(--e3) 0; border-bottom: 1px solid var(--linha-forte); display: flex; flex-direction: column; gap: var(--e1); }
.numeros li + li { padding-left: var(--e3); border-left: 1px solid var(--linha-forte); }
.numeros strong { font-size: var(--t2); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.numeros p { color: var(--cinza); }
.numeros .fonte { margin-top: auto; }

/* ---------- as perguntas: abre e fecha ---------- */
.perguntas-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--e6) var(--e8); align-items: start; }
.perguntas-lado .apoio { margin-top: var(--e2); }
.perguntas-lado .botoes { margin-top: var(--e3); }
@media (min-width: 901px) { .perguntas-lado { position: sticky; top: 120px; } }
.lista-perguntas { border-top: 1px solid var(--linha-forte); }
.pergunta { border-bottom: 1px solid var(--linha-forte); }
.pergunta summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--e2); align-items: center; padding: var(--e3) 0; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta h3 { font-size: var(--t3); line-height: 1.3; }
.resposta { padding: 0 48px var(--e3) 0; }
.resposta p { color: var(--cinza); max-width: 60ch; }
/* a resposta abrindo: desce um pouco e aparece (só transform e opacity) */
.anima .pergunta[open] .resposta { animation: abre-resposta .45s var(--sai) both; }
@keyframes abre-resposta { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- a chamada final ---------- */
.chamada { position: relative; z-index: 2; padding-inline: clamp(0px, 1.2vw, 16px); }
.chamada-fundo {
  position: relative; overflow: hidden; isolation: isolate; background: var(--faixa); color: var(--branco);
  padding: var(--e16) var(--gutter-d) var(--e16) var(--gutter); border-radius: clamp(32px, 4vw, 48px); transform-origin: 50% 100%;
}
.chamada-parede { position: absolute; inset: -16px; z-index: -1; pointer-events: none; overflow: hidden; display: flex; flex-direction: column; justify-content: space-around; font-size: var(--t5); font-weight: 500; color: rgba(255,255,255,.1); white-space: nowrap; }
.chamada-parede div { display: flex; gap: var(--e4); width: max-content; }
.chamada-parede span::before { content: attr(data-t); }
.anima .chamada-parede div { animation: corre 60s linear infinite; }
.anima .chamada-parede div:nth-child(even) { animation-direction: reverse; animation-duration: 74s; }
.chamada-texto { max-width: 820px; }
.chamada .apoio { color: var(--branco); margin-top: var(--e3); font-size: var(--t3); max-width: 40ch; }
.chamada .bordao { margin-top: var(--e2); color: rgba(255,255,255,.86); font-size: var(--t4); }
.chamada .bordao b { color: var(--branco); }
.chamada .botoes { margin-top: var(--e4); }

/* =====================================================================
   OS DESENHOS EM LINHA (a planta) E AS PARTES PRÓPRIAS DE CADA PÁGINA
   ===================================================================== */
.desenho { position: relative; margin-top: var(--e6); }
.desenho svg { display: block; width: 100%; height: auto; overflow: visible; }
.traco-l { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.traco-a { fill: none; stroke: var(--acao); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cota { font-family: var(--f-mono); font-size: var(--t5); fill: var(--cinza); letter-spacing: .02em; }
.legenda { margin-top: var(--e2); font-family: var(--f-mono); font-size: var(--t5); color: var(--cinza); }

/* --- Google Meu Negócio: o pino cai e o perfil se completa campo por campo --- */
.perfil-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4) var(--e8); margin-top: var(--e6); align-items: start; }
.perfil { padding: var(--e4); }
.perfil-mapa { position: relative; height: 136px; border-radius: 16px; border: 1px solid var(--linha-forte); overflow: hidden;
  background: linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(var(--linha) 1px, transparent 1px) 0 0 / 24px 24px; }
.perfil-mapa .rua { position: absolute; background: rgba(255,255,255,.12); }
.perfil-mapa .r1 { left: 0; right: 0; top: 58%; height: 6px; } .perfil-mapa .r2 { top: 0; bottom: 0; left: 36%; width: 6px; }
.pino { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -30px 0 0 -14px; }
.pino svg { width: 100%; height: 100%; fill: var(--acao); stroke: var(--branco); stroke-width: 1.5; }
.pino-sombra { position: absolute; left: 50%; top: 50%; width: 16px; height: 5px; margin: -1px 0 0 -8px; border-radius: 50%; background: rgba(0,0,0,.6); }
.perfil-cab { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) 0 var(--e2); border-bottom: 1px solid var(--linha-forte); }
.perfil-cab b { display: block; font-size: var(--t3); font-weight: 600; }
.perfil-cab .selo { margin-left: auto; }
.perfil-campos { list-style: none; margin: 0; padding: 0; }
.perfil-campos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--e2); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: var(--t5); color: var(--cinza); }
.perfil-campos li:last-child { border-bottom: 0; }
.perfil-campos .barra-c { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.perfil-campos .barra-c i { display: block; height: 100%; background: rgba(255,255,255,.55); border-radius: inherit; transform-origin: 0 50%; }
.ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acao); }
.ok svg { width: 13px; height: 13px; fill: none; stroke: var(--branco); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nomes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); margin-top: var(--e3); font-size: var(--t3); font-weight: 600; letter-spacing: -.02em; }
.nome-velho { position: relative; color: var(--cinza); }
.nome-velho::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 2px; background: currentColor; transform-origin: 0 50%; }
.anima .nomes:not(.revelado) .nome-velho::after { transform: scaleX(0); }
.anima .nomes .nome-velho::after { transition: transform .8s var(--sai) .35s; }
.nomes-seta svg { display: block; width: 24px; height: 24px; color: var(--cinza); }

/* --- Aparecer no Google: a página do Google em planta, com a anotação de cada parte --- */
.planta { position: relative; margin-top: var(--e6); --vao: clamp(32px, 5vw, 88px); }
.planta-lista { list-style: none; margin: 0; padding: 0; }
.zona { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0 var(--vao); align-items: stretch; }
.zona-desenho { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 12px var(--e3); border-left: 1px solid var(--linha-forte); border-right: 1px solid var(--linha-forte); background: rgba(13,19,31,.55); }
.zona-busca .zona-desenho { border-top: 1px solid var(--linha-forte); border-radius: var(--raio) var(--raio) 0 0; padding-top: var(--e3); }
.planta-lista > .zona:last-child .zona-desenho { border-bottom: 1px solid var(--linha-forte); border-radius: 0 0 var(--raio) var(--raio); padding-bottom: var(--e3); }
.navegador { display: flex; align-items: center; gap: 6px; padding-bottom: var(--e2); }
.navegador i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
.navegador .selo { margin-left: auto; }
.busca { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); font-size: var(--t5); }
.busca-g { font-weight: 700; font-size: var(--t4); line-height: 1; }
.busca svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
.caixa { position: relative; border: 1px dashed rgba(255,255,255,.24); border-radius: 16px; padding: 16px; }
/* o destaque da parte acesa é uma camada que aparece (opacity), sem mudar cor */
.caixa::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--acao); background: rgba(11,68,197,.12); box-shadow: 0 0 0 4px rgba(11,68,197,.2); opacity: 0; transition: opacity .5s; pointer-events: none; }
.zona.agora .caixa::after { opacity: 1; }
.caixa-rotulo { display: block; font-family: var(--f-mono); font-size: var(--t5); color: var(--cinza); }
.risco-l { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.14); margin-top: 8px; }
.risco-l.m { width: 82%; } .risco-l.c { width: 58%; } .risco-l.t { width: 34%; height: 8px; background: rgba(255,255,255,.3); }
.caixa-mapa { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e2); margin-top: 8px; }
.mapinha { min-height: 88px; border-radius: 8px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 16px 16px; }
.mapinha i { position: absolute; width: 11px; height: 11px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.empresas { display: grid; gap: 8px; align-content: center; }
.empresas span { display: block; padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,.14); }
.empresas span:last-child { border-bottom: 0; padding-bottom: 0; }
.perg { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.14); }
.perg .risco-l { margin: 0; flex: 1 1 auto; }
.perg b { font-weight: 400; color: var(--cinza); line-height: 1; }
.caixa-site + .caixa-site { margin-top: 8px; }
.caixa-site .url { display: block; font-family: var(--f-mono); font-size: var(--t5); color: var(--cinza); }
/* o anúncio: hachurado, como área que não entra na obra */
.zona-fora .caixa { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 9px); }
.zona-nota { position: relative; align-self: center; padding-block: var(--e3); transition: opacity .6s ease; }
.anima .zona:not(.lida):not(.zona-busca) .zona-nota { opacity: .85; }
/* a parte que a linha azul já leu ganha o losango e o fio em Ação */
.zona.lida .zona-nota::after { background: var(--acao); }
.zona.lida .zona-nota::before { border-top-color: rgba(11,68,197,.9); }
.zona-nota::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--vao); border-top: 1px dashed rgba(255,255,255,.3); }
.zona-nota::after { content: ""; position: absolute; right: calc(100% + var(--vao) - 4px); top: calc(50% - 3.5px); width: 7px; height: 7px; background: rgba(255,255,255,.5); transform: rotate(45deg); }
.zona-nota p { margin-top: var(--e1); color: var(--cinza); max-width: 42ch; }
.zona-nota .nao-mexe { display: inline-block; margin-top: 12px; }
.zona-busca .zona-nota::before, .zona-busca .zona-nota::after { display: none; }
/* a linha azul que passa como num raio-x (só com movimento) */
.planta-scan { display: none; }
.anima .planta-scan { display: block; position: absolute; z-index: 2; left: 0; top: 0; height: 2px; pointer-events: none; width: calc((100% - var(--vao)) * .525); transform: translateY(var(--scan, 0px)); background: linear-gradient(90deg, rgba(11,68,197,0), var(--acao) 15%, var(--branco) 50%, var(--acao) 85%, rgba(11,68,197,0)); box-shadow: 0 0 22px 3px rgba(11,68,197,.65); }

/* --- o tempo e a verdade: a linha dos meses --- */
.verdade { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--e6) var(--e8); align-items: end; }
.prazo { position: relative; padding-top: var(--e8); }
.prazo-faixa { position: absolute; left: 50%; right: 0; top: 0; padding: 0 0 12px 16px; font-size: var(--t5); border-left: 1px solid var(--acao); }
.prazo-trilho { position: relative; height: 32px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--linha-forte); }
.prazo-banda { position: absolute; top: -1px; bottom: -1px; left: 50%; right: -1px; border-radius: 0 8px 8px 0; background: rgba(11,68,197,.28); border: 1px solid var(--acao); }
.prazo-cheio { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: 100%; background: var(--branco); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.prazo-meses { list-style: none; margin: 16px 0 0; padding: 0; position: relative; height: 40px; font-family: var(--f-mono); font-size: var(--t5); color: var(--cinza); }
.prazo-meses li { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.prazo-meses li:first-child { transform: none; }
.prazo-meses li:last-child { transform: translateX(-100%); }
.prazo-meses li::before { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 8px; background: rgba(255,255,255,.35); }
.prazo-meses li:first-child::before { left: 0; } .prazo-meses li:last-child::before { left: auto; right: 0; }

/* --- o relatório do mês (exemplo) --- */
.resultado { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e6) var(--e8); align-items: start; }
.relatorio { padding: var(--e4); }
.relatorio-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); padding-bottom: var(--e2); border-bottom: 1px solid var(--linha-forte); }
.relatorio ul { list-style: none; margin: 0; padding: 0; }
.relatorio li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, .55fr); gap: 8px var(--e3); align-items: center; padding: var(--e2) 0; border-bottom: 1px solid var(--linha); }
.relatorio li:last-child { border-bottom: 0; padding-bottom: 0; }
.relatorio small { grid-column: 1 / -1; display: block; color: var(--cinza); font-size: var(--t5); }
.barra { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra i { display: block; height: 100%; width: calc(var(--w, .5) * 100%); background: var(--acao); border-radius: inherit; transform-origin: 0 50%; transition: transform 1.3s var(--sai); transition-delay: calc(var(--i, 0) * 80ms); }
.barra.cinza i { background: rgba(154,159,169,.5); }
.anima .relatorio:not(.visto) .barra i { transform: scaleX(0); }

/* --- Site para empresa: as páginas do site se montando (a planta do site) --- */
.arvore { margin-top: var(--e6); }
.arvore-raiz { position: relative; display: inline-flex; flex-direction: column; gap: 2px; padding: var(--e2) var(--e3); border-radius: 16px; border: 1px solid var(--acao); background: rgba(11,68,197,.14); font-weight: 600; }
.arvore-raiz small { font-size: var(--t5); color: var(--cinza); font-weight: 400; }
.arvore-raiz::after { content: ""; position: absolute; left: 24px; top: 100%; width: 1px; height: var(--e3); background: var(--linha-forte); }
.galhos { list-style: none; margin: var(--e3) 0 0; padding: 0 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e6); }
.galho { position: relative; padding: 12px 0 0 32px; }
.galho::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--linha-forte); transform-origin: 50% 0; }
.galho::after { content: ""; position: absolute; left: 0; top: 40px; width: 32px; height: 1px; background: var(--linha-forte); transform-origin: 0 50%; }
.galho-caixa { position: relative; border: 1px solid rgba(255,255,255,.36); border-radius: 16px; padding: 12px var(--e2); background: rgba(13,19,31,.6); }
.galho-caixa b { display: block; font-weight: 600; }
.galho-caixa span { display: block; font-size: var(--t5); color: var(--cinza); margin-top: 2px; }
.anima .arvore .galho::before { transform: scaleY(0); }
.anima .arvore .galho::after { transform: scaleX(0); }
.anima .arvore .galho-caixa { opacity: 0; transform: translateY(16px) scale(.96); }
.arvore.montada .galho::before { transform: none; transition: transform .6s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.arvore.montada .galho::after { transform: none; transition: transform .45s cubic-bezier(.6,0,.2,1); transition-delay: calc(.2s + var(--i, 0) * 90ms); }
.arvore.montada .galho-caixa { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s var(--sai); transition-delay: calc(.3s + var(--i, 0) * 90ms); }

/* --- Aparecer nas IAs: a conversa com a IA sendo escrita --- */
.ias-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4) var(--e8); align-items: center; }
.conversa { padding: var(--e3); }
.conversa-cab { display: flex; align-items: center; gap: var(--e1); padding-bottom: var(--e2); border-bottom: 1px solid var(--linha-forte); font-size: var(--t5); color: var(--cinza); }
.conversa-cab i { width: 10px; height: 10px; border-radius: 50%; background: var(--acao); }
.conversa-cab .selo { margin-left: auto; }
.msg { margin-top: var(--e2); padding: 12px var(--e2); border-radius: 16px; max-width: 88%; line-height: 1.45; }
.msg-eu { margin-left: auto; background: var(--acao); border-bottom-right-radius: 4px; }
.msg-ia { background: rgba(255,255,255,.04); border: 1px solid var(--linha-forte); border-bottom-left-radius: 4px; }
.msg-ia .risco-l { transform-origin: 0 50%; }
.digitando { display: inline-flex; gap: 4px; padding: 4px 0; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--cinza); }
.letra-d { opacity: 1; }
.anima .conversa:not(.escrita) .letra-d { opacity: 0; }
.anima .conversa:not(.escrita) .msg-ia .risco-l { transform: scaleX(0); }
.anima .conversa .msg-ia .risco-l { transition: transform .7s var(--sai); transition-delay: calc(1.6s + var(--i, 0) * .3s); }
.anima .conversa .digitando { animation: some 0s linear 1.5s forwards; }
.anima .conversa:not(.escrita) .digitando { animation: none; }
.anima .conversa .digitando i { animation: pula 1s ease-in-out infinite; }
.anima .conversa .digitando i:nth-child(2) { animation-delay: .15s; } .anima .conversa .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes some { to { opacity: 0; transform: scale(0); } }
.digitando { position: absolute; }
.msg-ia { position: relative; }
.conversa:not(.escrita) .digitando, .conversa .digitando { left: var(--e2); top: 12px; }
.msg-ia .risco-l:first-of-type { margin-top: 0; }

/* --- Sobre: as fotos da equipe (a cortina sobe de cada foto) --- */
.gente { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); max-width: 880px; }
.gente-c { padding: var(--e2) var(--e2) var(--e3); display: flex; flex-direction: column; gap: var(--e1); }
.gente-foto { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: var(--e1); }
.gente-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; display: block; background: var(--superficie); }
.gente-foto::after { content: ""; position: absolute; inset: 0; background: var(--superficie); transform-origin: 50% 0; }
.gente-foto::after { transform: scaleY(0); }
.anima .gente-c:not(.revelado) .gente-foto::after { transform: scaleY(1); }
.anima .gente-foto::after { transition: transform 1.1s cubic-bezier(.7,0,.2,1) .2s; }
.anima .gente-foto img { transition: transform 1.6s var(--sai) .2s; }
.anima .gente-c:not(.revelado) .gente-foto img { transform: scale(1.12); }
.gente-c h3, .gente-c p { padding-inline: var(--e1); }
.gente-c p { color: var(--cinza); }
.gente-c .papel { color: var(--branco); font-size: var(--t5); font-weight: 600; }

/* --- Trabalhos: a régua de obras (a ficha técnica em linhas finas: ideia do A24, Awwwards) --- */
/* a régua fica presa logo abaixo do menu enquanto os exemplos passam (a faixa é Breu, para nada aparecer por trás) */
.regua-obras { position: sticky; top: 76px; z-index: 3; height: 52px; margin-top: var(--e6); border-bottom: 1px solid var(--linha-forte); background: var(--breu); box-shadow: 0 12px 16px -4px var(--breu); }
.regua-obras .marcas { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; }
.regua-obras .marcas i { width: 1px; height: 8px; background: rgba(255,255,255,.3); }
.regua-obras .marcas i:nth-child(5n+1) { height: 16px; background: rgba(255,255,255,.55); }
.regua-obras .cursor { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--acao); transform-origin: 0 50%; transform: scaleX(var(--obra, 0)); }
.regua-obras .conta { position: absolute; right: 0; top: 8px; font-family: var(--f-mono); font-size: var(--t5); color: var(--cinza); }
.obras { list-style: none; margin: 0; padding: 0; }
.obra { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .95fr); gap: var(--e3) var(--e6); padding: var(--e4) 0; border-bottom: 1px solid var(--linha-forte); align-items: start; }
.obra-nome h3 { font-size: var(--t2); line-height: 1; }
.obra-num { display: block; font-family: var(--f-mono); font-size: var(--t5); color: var(--cinza); margin-bottom: var(--e1); }
/* a tela do exemplo: o selo fica preso na borda de cima, como etiqueta, sem cobrir nada da tela */
.obra-tela { position: relative; margin: 0; }
.tela-recorte { overflow: hidden; border-radius: 16px; border: 1px solid var(--linha-forte); }
.obra-tela img { width: 100%; height: auto; display: block; }
.obra-tela .selo { position: absolute; z-index: 1; left: 16px; top: -11px; }
.anima .obra .obra-tela img { transform: scale(1.08); transition: transform 1.4s var(--sai); }
.anima .obra.revelado .obra-tela img { transform: none; }
.ficha { margin: 0; }
.ficha div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e2); padding: 12px 0; border-top: 1px solid var(--linha-forte); }
.ficha div:last-child { border-bottom: 1px solid var(--linha-forte); }
.ficha dt { font-size: var(--t5); color: var(--cinza); }
.ficha dd { margin: 0; }
.ficha .achado { font-size: var(--t3); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.ficha .fonte { margin-top: var(--e1); }
.ramos-lista { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ramos-lista li { padding: 8px var(--e2); border-radius: 999px; border: 1px solid var(--linha-forte); font-weight: 500; }

/* --- Perguntas: os assuntos --- */
.grupos-nav { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.grupos-nav a { display: inline-flex; align-items: center; gap: var(--e1); min-height: 48px; padding: 0 var(--e2); border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--branco); text-decoration: none; font-weight: 500; }
.grupos-nav a:hover { border-color: var(--acao); }
.grupos-nav small { font-size: var(--t5); color: var(--cinza); }
.grupo + .grupo { margin-top: var(--e12); }
.grupo .lista-perguntas { margin-top: var(--e3); }
.sec-junto { padding-top: var(--e8); }
.sec:has(.grupos-nav) { padding-bottom: 0; }

/* --- Dicas: os cartões desenhados (o desenho se monta ao aparecer) --- */
.artigos { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.artigo-c a { display: flex; flex-direction: column; gap: var(--e2); height: 100%; padding: var(--e3); color: var(--branco); text-decoration: none; }
.artigo-pic { aspect-ratio: 2 / 1; border-radius: 16px; border: 1px solid var(--linha-forte); display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(var(--linha) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / 24px 24px, rgba(11,68,197,.08); }
.artigo-pic svg { width: 46%; height: auto; max-height: 80%; overflow: visible; }
.artigo-pic svg * { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.artigo-pic svg .acao { stroke: var(--branco); stroke-width: 2; }
.anima .artigo-c .peca { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s var(--sai); transition-delay: calc(.2s + var(--p, 0) * .12s); transform-box: fill-box; transform-origin: center; }
.anima .artigo-c.revelado .peca { opacity: 1; transform: none; }
.artigo-c h3 { font-size: var(--t3); }
.artigo-c p { color: var(--cinza); }
.artigo-ir { margin-top: auto; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; }

/* --- os artigos: o sumário que acompanha a leitura (ideia do Scroll Spy, 21st.dev) --- */
.artigo-grade { display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, 1fr); gap: var(--e6) var(--e8); align-items: start; }
@media (min-width: 901px) { .sumario { position: sticky; top: 120px; } }
.sumario { font-size: var(--t5); }
.sumario-titulo { margin: 0 0 var(--e2); font-weight: 600; color: var(--cinza); }
.sumario ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linha-forte); }
.sumario a { position: relative; display: block; padding: 8px 0 8px var(--e2); color: var(--cinza); text-decoration: none; line-height: 1.4; }
.sumario a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--acao); transform: scaleY(0); transition: transform .3s var(--sai); }
.sumario a:hover, .sumario a.agora { color: var(--branco); }
.sumario a.agora::before { transform: none; }
.leitura-barra { position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 3px; background: var(--acao); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.artigo-corpo { max-width: var(--medida); }
.artigo-corpo > section + section { margin-top: var(--e8); }
.artigo-corpo h2 { font-size: var(--t3); font-weight: 700; line-height: 1.25; margin: 0 0 var(--e2); }
.artigo-corpo p + p, .artigo-corpo p + ul, .artigo-corpo p + ol, .artigo-corpo ul + p, .artigo-corpo ol + p, .artigo-corpo ul + ul, .artigo-corpo ol + ol { margin-top: var(--e2); }
.artigo-corpo ul, .artigo-corpo ol { margin: 0; padding-left: 1.3em; }
.artigo-corpo li + li { margin-top: var(--e1); }
.artigo-corpo li::marker { color: var(--cinza); }
.artigo-corpo a:not(.botao):not(.discreto) { color: var(--branco); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.resposta-direta { margin-bottom: var(--e8); padding: var(--e3); border-radius: var(--raio); border: 1px solid rgba(11,68,197,.6); background: rgba(11,68,197,.12); }
.resposta-direta .rd-rotulo { margin-bottom: var(--e1); font-size: var(--t5); font-weight: 600; }
.artigo-corpo .lista-perguntas { margin-top: var(--e1); }
.artigo-corpo .resposta { padding-right: 0; }
.fontes-lista { margin-top: var(--e8); padding-top: var(--e3); border-top: 1px dashed var(--linha-forte); font-size: var(--t5); color: var(--cinza); }
.fontes-lista p { font-weight: 600; }
.fontes-lista ol { margin: var(--e1) 0 0; padding-left: 1.3em; }
.fontes-lista a { word-break: break-word; }

/* --- Contato: os jeitos de falar e o mapa da região (ideia do Belgrade Arbor, Awwwards) --- */
.contatos { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e2); }
.contato-c > a, .contato-c > div { display: flex; flex-direction: column; gap: var(--e1); height: 100%; padding: var(--e3); color: var(--branco); text-decoration: none; }
.contato-c small { font-size: var(--t5); color: var(--cinza); }
.contato-c b { font-size: var(--t3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.contato-c span { color: var(--cinza); }
.contato-c.principal { background: var(--acao); border-color: var(--acao); }
.contato-c.principal small, .contato-c.principal span { color: rgba(255,255,255,.88); }
.regiao-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--e4) var(--e8); align-items: center; margin-top: var(--e6); }
.mapa-regiao { position: relative; margin: 0; }
.mapa-regiao svg { display: block; width: 100%; height: auto; overflow: visible; }
.mapa-regiao .anel { fill: none; stroke: rgba(255,255,255,.14); stroke-dasharray: 3 6; }
.mapa-regiao .anel-rot { font-family: var(--f-mono); font-size: 11px; fill: rgba(154,159,169,.85); }
.mapa-regiao .eixo { stroke: rgba(255,255,255,.07); }
.mapa-regiao .rota { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.2; transform-box: view-box; transform-origin: 300px 300px; }
.mapa-regiao .rota-on { fill: none; stroke: var(--branco); stroke-width: 2.2; opacity: 0; transition: opacity .3s; }
.mapa-regiao .cidade.on .rota-on { opacity: 1; }
.mapa-regiao .ponto { fill: var(--breu); stroke: var(--branco); stroke-width: 1.5; }
.mapa-regiao .ponto-on { fill: var(--acao); stroke: var(--branco); stroke-width: 1.5; opacity: 0; transition: opacity .3s; }
.mapa-regiao .cidade.on .ponto-on { opacity: 1; }
.mapa-regiao .marca-cidade { transform-box: fill-box; transform-origin: center; }
.anima .mapa-regiao:not(.revelado) .rota { transform: scale(0); }
.anima .mapa-regiao:not(.revelado) .marca-cidade { opacity: 0; transform: scale(.2); }
.anima .mapa-regiao .rota { transition: transform 1s cubic-bezier(.6,0,.2,1); transition-delay: calc(.2s + var(--i, 0) * .14s); }
.anima .mapa-regiao .marca-cidade { transition: opacity .4s ease, transform .6s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.9s + var(--i, 0) * .14s); }
.mapa-regiao .nome { font-family: var(--f-texto); font-size: 15px; font-weight: 600; fill: var(--branco); }
.mapa-regiao .km { font-family: var(--f-mono); font-size: 12px; fill: var(--cinza); }
.mapa-regiao .fio { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.mapa-regiao .sede { fill: var(--acao); stroke: var(--branco); stroke-width: 2; }
.mapa-regiao .sede-onda { fill: none; stroke: var(--branco); stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; }
.anima .mapa-regiao .sede-onda { animation: onda 2.4s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.mapa-regiao .norte { font-family: var(--f-mono); font-size: 12px; fill: var(--cinza); }
.cidades { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-forte); }
.cidades li { border-bottom: 1px solid var(--linha-forte); }
.cidades li > button, .cidades li > div { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: var(--e2) 4px; }
.cidades li > button { cursor: pointer; }
.cidades li > button:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; border-radius: 6px; }
.cidades b { font-size: var(--t3); font-weight: 600; letter-spacing: -.02em; }
.cidades span { font-size: var(--t5); color: var(--cinza); text-align: right; }
.cidades li.on b { text-decoration: underline; text-decoration-color: var(--acao); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.brasil-todo { display: flex; align-items: center; gap: 12px; margin-top: var(--e3); font-weight: 600; }
.brasil-todo svg { width: 24px; height: 24px; fill: none; stroke: var(--branco); stroke-width: 1.6; flex: 0 0 auto; }
.mapa-legenda { margin-top: var(--e2); font-size: var(--t5); color: var(--cinza); }

/* --- Privacidade: o cadeado que fecha e o texto corrido --- */
.cadeado { width: 64px; height: 64px; margin-bottom: var(--e3); }
.cadeado svg { width: 100%; height: 100%; overflow: visible; }
.cadeado .arco { fill: none; stroke: var(--branco); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; }
.cadeado .corpo { fill: var(--acao); stroke: var(--branco); stroke-width: 2; }
.anima .cadeado:not(.fechado) .arco { transform: translateY(-9px); }
.anima .cadeado .arco { transition: transform .6s cubic-bezier(.5,1.6,.5,1) .3s; }
.prosa { max-width: var(--medida); }
.prosa section + section { margin-top: var(--e6); }
.prosa h2 { font-size: var(--t3); font-weight: 700; }
.prosa p { margin-top: var(--e2); }
.prosa a { color: var(--branco); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.prosa .data { margin-top: var(--e6); font-size: var(--t5); color: var(--cinza); }

/* --- a dica do mapa e a do golpe: o desenho do topo do artigo --- */
.pic-grande { width: min(320px, 70%); margin-bottom: var(--e4); }
.pic-grande svg { width: 100%; height: auto; overflow: visible; }
.pic-grande svg * { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pic-grande svg .acao { stroke: var(--branco); stroke-width: 2; }
.anima .pic-grande .cai { transform: translateY(-40px); opacity: 0; animation: cai .9s cubic-bezier(.3,1.5,.5,1) .5s forwards; transform-box: fill-box; }
@keyframes cai { to { transform: none; opacity: 1; } }
.anima .pic-grande .toca { transform-box: fill-box; transform-origin: 50% 50%; animation: toca 2.4s ease-in-out .6s 2; }
@keyframes toca { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-9deg); } 68% { transform: rotate(9deg); } 72% { transform: rotate(-7deg); } 76% { transform: rotate(6deg); } 80% { transform: rotate(0); } }

/* --- o pino e os campos do perfil (Google Meu Negócio) --- */
.anima .perfil .pino { transition: transform .8s cubic-bezier(.3,1.5,.5,1) .1s, opacity .3s ease .1s; }
.anima .perfil:not(.vivo) .pino { transform: translateY(-56px); opacity: 0; }
.anima .perfil .pino-sombra { transition: transform .8s var(--sai) .1s, opacity .8s ease .1s; }
.anima .perfil:not(.vivo) .pino-sombra { transform: scale(.3); opacity: 0; }
.anima .perfil .perfil-campos li > span:last-child { transition: opacity .4s ease; transition-delay: calc(.7s + var(--i, 0) * 140ms); }
.anima .perfil:not(.vivo) .perfil-campos li > span:last-child { opacity: .3; }
.anima .perfil .ok { transition: transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.75s + var(--i, 0) * 140ms); }
.anima .perfil:not(.vivo) .ok { transform: scale(0); }

/* --- o relatório: as palavras, o feito e a linha do mês --- */
.chips { display: flex; justify-content: flex-end; gap: 4px; }
.chips i { flex: 1 1 0; max-width: 40px; height: 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.feito { justify-self: end; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acao); }
.feito svg { width: 13px; height: 13px; fill: none; stroke: var(--branco); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.linha-mini svg { display: block; width: 100%; height: 24px; overflow: visible; }
.linha-mini path { fill: none; stroke: var(--acao); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.perfil-cab .nota { display: block; margin-top: 2px; }

/* --- a pergunta da conversa: as letras aparecem uma a uma --- */
.anima .conversa .letra-d { transition: opacity .05s linear; transition-delay: calc(var(--l, 0) * 26ms); }

/* --- Perguntas: o assunto que está na tela fica marcado --- */
.grupos-nav a.agora { border-color: var(--acao); background: rgba(11,68,197,.16); }

/* =====================================================================
   O MOVIMENTO DE VOLTA (27/10/2026): a luz, a pausa, as passagens e os efeitos de cada página.
   Tudo o que esconde ou recorta só existe com script (.anima, ou estilo posto pelo script):
   sem script, cada coisa já aparece no estado final.
   ===================================================================== */

/* ---------- a luz que segue o dedo e o mouse nos cartões (ideia do Spotlight Card, reactbits) ---------- */
/* o script põe dentro do cartão a janela da luz (b-luz): a bola de luz só anda com transform e a janela só muda a opacidade */
.cartao { isolation: isolate; }
.cartao > b-luz { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.cartao > b-luz > i { position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; background: radial-gradient(circle closest-side, rgba(11,68,197,.28), transparent 62%); }
.claro .cartao > b-luz > i { background: radial-gradient(circle closest-side, rgba(11,68,197,.13), transparent 62%); }
.fino .cartao:hover > b-luz, .cartao.tocado > b-luz { opacity: 1; }
.fino .cartao:hover > b-luz > i { will-change: transform; }

/* ---------- o botão pequeno de pausar as faixas que correm ---------- */
.pausa { display: none; }
.js .pausa {
  position: absolute; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.38); background: rgba(7,10,18,.86); color: var(--branco); cursor: pointer;
}
.pausa::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.pausa:hover::after { opacity: 1; }
.pausa svg { width: 14px; height: 14px; fill: currentColor; }
.pausa .ic-toca, .pausa[aria-pressed="true"] .ic-pausa { display: none; }
.pausa[aria-pressed="true"] .ic-toca { display: block; }
.passagem .pausa { right: var(--gutter-d); bottom: 4px; }
.chamada .pausa { right: var(--e2); top: var(--e2); border-color: rgba(255,255,255,.35); background: rgba(3,48,138,.7); }
/* parado: quando sai da tela ou quando a pessoa pausa */
.faixa-trilho.parado, .faixa-trilho.pausado, .parede-parada div, .chamada-parede.pausado div, .botao.fora::after,
.pilula.parado i::after, .mapa-regiao.parado .sede-onda, .pic-grande.parado .toca { animation-play-state: paused; }
/* o pontinho do rodapé e a onda da sede pulsam por 5 segundos depois de a pessoa ver e ficam quietos (o script põe "quieto") */
.anima .pilula.quieto i::after, .anima .mapa-regiao.quieto .sede-onda { animation: none; }

/* ---------- as passagens: a tinta e a grade ficam entre as partes ---------- */
/* a tinta branca que sobe e vira a próxima parte (ideia do WeEvolveIT; Ink Reveal, motionsites) */
.passa-tinta { position: relative; z-index: 1; height: clamp(200px, 32vh, 360px); margin-bottom: -2px; pointer-events: none; overflow: hidden; }
.passa-tinta svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* a grade que se preenche, quadradinho por quadradinho, como a planta virando parede
   (ideia do Pixel Transition, reactbits, e da grade de formas do C&E Growth Partners, Awwwards) */
.passa-grade { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); aspect-ratio: 16 / 3; margin-bottom: -1px; pointer-events: none; overflow: hidden; }
.passa-grade i { background: var(--branco); transform-origin: 50% 100%; }
.passa-grade.cor-faixa i { background: var(--faixa); }
/* a parte que encosta na tinta ou na grade ocupa a largura toda e perde os cantos de cima */
.colado { padding-inline: 0 !important; }
.colado > .sec.claro, .colado > .chamada-fundo { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ---------- a frase que acende palavra por palavra com a rolagem, passando pelo azul Ação
   (ideia do CoMinVi e do Emotion Agency, Awwwards; Scroll Reveal, reactbits). Só a opacidade muda. ---------- */
.acende .p { position: relative; transition: opacity .35s ease; }
.anima .acende .p { opacity: .5; }   /* .5 ainda passa no contraste; mais apagado, não */
.anima .acende .p.lida, .anima .acende .p.agora { opacity: 1; }
.acende .p::after { content: attr(data-p); content: attr(data-p) / ""; position: absolute; left: 0; top: 0; color: #8FA9EE; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.acende .p.agora::after { opacity: 1; }

/* ---------- os números que rolam como contador (ideia do Dopamine Studio, Awwwards; Counter, reactbits) ---------- */
/* cada dígito é uma coluna de 0 a 9 numa janela da altura da letra: a linha não muda de altura (nada pula) */
.odo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.odo-d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -.16em; }
.odo-d > span { display: block; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.odo-d > span > span { display: block; height: 1em; }

/* ---------- o marca-texto que passa por trás da frase (ideia do Ploy, no Unsection) ---------- */
.marca-texto { position: relative; z-index: 0; white-space: nowrap; }
.marca-texto::before { content: ""; position: absolute; z-index: -1; left: -.14em; right: -.14em; bottom: .02em; height: .78em; background: rgba(11,68,197,.62); border-radius: 3px; transform-origin: 0 50%; }
.claro .marca-texto::before { background: rgba(11,68,197,.22); }
.anima .marca-texto::before { transition: transform .9s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--i, 0) * 160ms); }
.anima .marca-texto:not(.marcado)::before { transform: scaleX(0); }

/* ---------- a linha do passo a passo: a trilha enche e cada passo acende quando ela chega
   (ideia do Timeline e do Vertical How It Works Timeline, 21st.dev) ---------- */
.artigo-corpo ol.passo-a-passo { list-style: none; padding-left: 48px; position: relative; counter-reset: passo; }
.passo-a-passo::before, .passo-a-passo::after { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--linha-forte); }
.passo-a-passo::after { background: var(--acao); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.passo-a-passo > li { position: relative; counter-increment: passo; min-height: 32px; padding-top: 4px; }
.passo-a-passo > li::before {
  content: counter(passo); position: absolute; left: -48px; top: 0; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t5); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--acao); color: var(--branco); border: 1px solid var(--acao); transition: transform .4s cubic-bezier(.3,1.6,.5,1);
}
.anima .passo-a-passo > li::after {
  content: counter(passo); position: absolute; left: -48px; top: 0; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t5); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--breu); color: var(--branco); border: 1px solid var(--linha-forte); transition: opacity .3s ease, transform .4s cubic-bezier(.3,1.6,.5,1);
}
.anima .passo-a-passo > li:not(.chegou)::before, .anima .passo-a-passo > li:not(.chegou)::after { transform: scale(.86); }
.anima .passo-a-passo > li.chegou::after { opacity: 0; }
.passo-a-passo > li + li { margin-top: var(--e2); }

/* ---------- os combinados do Sobre: cada cartão entra e fica inteiro para ler (a entrada é a do data-revela) ---------- */
.pilha { list-style: none; margin: var(--e6) 0 0; padding: 0; max-width: 880px; }
.pilha-c + .pilha-c { margin-top: var(--e3); }
.pilha-c { padding: var(--e4); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--e3); }
.pilha-c .pilha-n { font-family: var(--f-mono); font-size: var(--t5); color: var(--cinza); }
.pilha-c h3 { font-size: var(--t2); line-height: 1.04; letter-spacing: -.04em; }
.pilha-c p { margin-top: var(--e2); color: var(--cinza); max-width: 52ch; }

/* ---------- Trabalhos: a tela abre de uma moldura e inclina com o mouse
   (ideia do Potadot, Awwwards, e do Tilted Card, reactbits) ---------- */
.obra-tela { perspective: 900px; }
.obra-tela .tela-recorte { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); }

/* ---------- Google Meu Negócio: as estrelas enchem uma a uma (ideia do Potadot, Awwwards) ---------- */
.estrelas { display: flex; align-items: center; gap: var(--e1); margin-top: var(--e4); }
.estrela { position: relative; width: 40px; height: 40px; }
.estrela svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.estrela .linha-e { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.estrela .cheia { fill: var(--acao); stroke: var(--branco); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.anima .estrela .cheia { transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s ease; transition-delay: calc(.2s + var(--i, 0) * 180ms); }
.anima .estrelas:not(.cheias) .estrela .cheia { transform: scale(0); opacity: 0; }
.estrelas .legenda { margin: 0 0 0 var(--e2); }

/* ---------- Perguntas: os assuntos ficam presos no alto enquanto a pessoa rola (ideia das abas presas do Jimo, Awwwards) ---------- */
.grupos-nav.preso { z-index: 4; margin-top: 0; padding: var(--e1) 0; background: var(--breu); box-shadow: 0 12px 16px -4px var(--breu); }
@media (max-width: 900px) {
  .grupos-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-d)); padding-inline: var(--gutter) var(--gutter-d); }
  .grupos-nav::-webkit-scrollbar { display: none; }
  .grupos-nav li { flex: 0 0 auto; }
}
.resposta .linha-r { display: block; }

/* ---------- tablet e celular ---------- */
@media (max-width: 1100px) {
  .servicos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicos-lista a { min-height: 120px; }
  .itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros li:nth-child(3) { padding-left: 0; border-left: 0; }
  .contatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .obra .ficha { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --t4: 16px; }
  .sec { padding-block: var(--e12); }
  /* no celular o globo fica pequeno em cima do título, para o título, a frase e os 2 botões caberem na primeira tela */
  :root { --t1: clamp(36px, 10vw, 44px); }
  .topo { min-height: 0; justify-content: flex-start; padding-block: calc(env(safe-area-inset-top, 0px) + 104px + min(34vw, 140px) + 16px) var(--e4); }
  .topo::before { width: min(34vw, 140px); left: 50%; top: calc(env(safe-area-inset-top, 0px) + 100px + min(17vw, 70px)); }
  .globo-luz { left: 50%; top: calc(100px + min(17vw, 70px)); width: 72vw; height: 72vw; }
  .topo::after { background: linear-gradient(to top, rgba(7,10,18,.96) 0%, rgba(7,10,18,.85) 52%, rgba(7,10,18,0) 72%); }
  .topo-dentro { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .subtitulo { max-width: none; }
  .acoes { width: 100%; }
  .acoes .botao { width: 100%; }
  .passagem { padding-block: var(--e3) var(--e4); }
  .faixa { transform: rotate(-2.4deg) scale(1.06); }
  .faixa span { font-size: var(--t4); }
  .cab, .verdade, .resultado, .perguntas-grade, .perfil-grade, .ias-grade, .regiao-grade, .artigo-grade, .duas { grid-template-columns: minmax(0, 1fr); }
  .galhos { grid-template-columns: minmax(0, 1fr); }
  .zona { grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--linha-forte); border-right: 1px solid var(--linha-forte); background: rgba(13,19,31,.55); }
  .zona-desenho { border: 0 !important; border-radius: 0 !important; background: none; padding: 12px var(--e2); }
  .zona-busca { border-top: 1px solid var(--linha-forte); border-radius: var(--raio) var(--raio) 0 0; }
  .planta-lista > .zona:last-child { border-bottom: 1px solid var(--linha-forte); border-radius: 0 0 var(--raio) var(--raio); padding-bottom: 8px; }
  .zona-nota { padding: 4px var(--e2) var(--e3); }
  .zona-nota::before, .zona-nota::after { display: none; }
  .zona-busca .zona-nota { display: none; }
  .anima .planta-scan { width: 100%; }
  .obra { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  .sumario { display: none; }
  .resposta, .lista-detalhe { padding-right: 0; }
}
@media (max-width: 600px) {
  .regua-obras { display: none; }
  html:has(.regua-obras) { scroll-padding-top: 96px; }
  /* o título longo dos artigos usa o segundo tamanho no celular */
  .topo-curto h1 { font-size: var(--t2); }
  .itens, .artigos, .contatos, .gente { grid-template-columns: minmax(0, 1fr); }
  .numeros { grid-template-columns: minmax(0, 1fr); }
  .numeros li + li { padding-left: 0; border-left: 0; }
  .caixa-mapa { grid-template-columns: minmax(0, 1fr); }
  .mapinha { min-height: 72px; }
  .prazo-meses .so-largo { font-size: 0; }
  .relatorio li { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px var(--e2); }
  .botoes .botao, .chamada .botao { width: 100%; }
  .gente { max-width: 420px; }
}
@media (max-width: 360px) { .busca { gap: 8px; padding: 8px 12px; } }
/* celular de tela baixa: o globo fica ainda menor, para os botões do topo não caírem para fora da primeira tela */
@media (max-width: 900px) and (max-height: 760px) {
  .topo { padding-block: calc(env(safe-area-inset-top, 0px) + 92px + min(24vw, 100px) + 12px) var(--e4); }
  .topo::before { width: min(24vw, 100px); top: calc(env(safe-area-inset-top, 0px) + 92px + min(12vw, 50px)); }
  .globo-luz { top: calc(92px + min(12vw, 50px)); width: 50vw; height: 50vw; }
}
@media (prefers-reduced-motion: reduce) {
  .anima [data-revela] { opacity: 1; transform: none; transition: none; }
  .botao::after { animation: none; display: none; }
  .faixa-trilho, .chamada-parede div { animation: none; }
  .barra i, .zona-nota, .caixa::after, .regua { transition: none; }
  .mapa-regiao .sede-onda { animation: none; opacity: 0; }
  .js .pausa { display: none; }
  .cartao > b-luz { display: none; }
}
/* com "reduzir movimento", nada corre: nem as transições pequenas (o "+" que gira, o tique que aparece) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}