/* KAIEN, prévia do novo site: "o original, bem feito" (briefing anti-cara-de-IA, 17/10/2026).
   A linguagem visual é a do kaien.cc, porque é da marca: painéis arredondados (20 px) recuados da borda, sobre
   a calha da página; quase-preto #0a0f15, branco e o painel azul-ardósia #657084; Inter em peso regular nos
   títulos e Geist no corpo; zero cor de acento, zero borda decorativa, zero sombra, zero gradiente. O que a
   prévia acrescenta é só o que se mede: tema claro/escuro, contraste AA, fontes locais, peso, acessibilidade.
   Regras de disciplina que o avaliador (refazer/cara_de_ia.py) cobra nesta folha: só 10 tamanhos de fonte
   (.75 .875 1 1.125 1.375 1.75 2 2.5 3.5 4.5 rem, razão 6), dois pesos (400 e 600), três raios (20, 12 e 999 px),
   nenhum @keyframes, nenhum gradient(), nenhum box-shadow, nenhum backdrop-filter.
   TEMAS: o escuro é o padrão da marca (o :root base); o claro vem do sistema ou do botão (tema.js → data-tema).
   No claro a calha é branca e as seções claras são brancas, como no original; no escuro a calha é preta e as
   seções claras ficam num cinza-azulado fundo. Os painéis escuro e ardósia são fixos nos dois temas. */
@font-face { font-family: "Geist"; src: url("fontes/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* paleta escura (marca) */
  --e-fundo: #05070b; --e-fundo-2: #0a0f15; --e-fundo-3: #141a23; --e-linha: #2a3240;
  --e-texto: #ffffff; --e-suave: #aab3c0; --e-corpo: #c9d1dd; --e-acento: #8fb4ff;
  /* paleta clara (a do original: calha e seções brancas, cartões cinza-claro) */
  --c-fundo: #ffffff; --c-fundo-2: #ffffff; --c-fundo-3: #eef0f3; --c-linha: #d9dde3;
  --c-texto: #0a0f15; --c-suave: #4a5466; --c-corpo: #2b3443; --c-acento: #2350d8;
  /* tokens semânticos: escuro por padrão */
  --fundo: var(--e-fundo); --fundo-2: var(--e-fundo-2); --fundo-3: var(--e-fundo-3); --linha: var(--e-linha);
  --texto: var(--e-texto); --suave: var(--e-suave); --corpo: var(--e-corpo); --acento: var(--e-acento); --foco: var(--e-acento);
  --botao-fundo: #ffffff; --botao-texto: #0a0f15;
  /* painéis fixos (iguais nos dois temas), como no original */
  --p-escuro: #0a0f15; --p-escuro-2: #141a23; --p-escuro-texto: #ffffff; --p-escuro-suave: #aab3c0;
  --p-ardosia: #657084; --p-ardosia-2: #525d70; --p-ardosia-texto: #ffffff; --p-ardosia-suave: #f4f6fa;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
  --largura: 1320px;
  --gutter: 48px;
  --calha: 12px;
  --raio: 20px;
  --topo-h: 78px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --fundo: var(--c-fundo); --fundo-2: var(--c-fundo-2); --fundo-3: var(--c-fundo-3); --linha: var(--c-linha);
    --texto: var(--c-texto); --suave: var(--c-suave); --corpo: var(--c-corpo); --acento: var(--c-acento); --foco: var(--c-acento);
    --botao-fundo: #0a0f15; --botao-texto: #ffffff;
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --fundo: var(--c-fundo); --fundo-2: var(--c-fundo-2); --fundo-3: var(--c-fundo-3); --linha: var(--c-linha);
  --texto: var(--c-texto); --suave: var(--c-suave); --corpo: var(--c-corpo); --acento: var(--c-acento); --foco: var(--c-acento);
  --botao-fundo: #0a0f15; --botao-texto: #ffffff;
  color-scheme: light;
}
/* painel escuro: os tokens viram os do painel (botão branco, texto branco) nos dois temas */
.painel-escuro, .escuro-fixo { --fundo: var(--p-escuro); --fundo-2: var(--p-escuro); --fundo-3: var(--p-escuro-2); --linha: #2a3240;
  --texto: var(--p-escuro-texto); --suave: var(--p-escuro-suave); --corpo: #c9d1dd; --botao-fundo: #ffffff; --botao-texto: #0a0f15; --foco: #ffffff;
  background: var(--p-escuro); color: var(--p-escuro-texto); }
.painel-ardosia { --fundo: var(--p-ardosia); --fundo-2: var(--p-ardosia); --fundo-3: var(--p-ardosia-2); --linha: #8e97a8;
  --texto: var(--p-ardosia-texto); --suave: var(--p-ardosia-suave); --corpo: #f4f6fa; --botao-fundo: #ffffff; --botao-texto: #0a0f15; --foco: #ffffff;
  background: var(--p-ardosia); color: var(--p-ardosia-texto); }
/* componentes do molde (abas nas páginas internas): seguem o tema do bloco */
.abas, .carrossel { --comp-borda: var(--linha); --comp-texto: var(--texto); --comp-texto-suave: var(--suave); --comp-acento: var(--texto);
  --comp-foco: var(--foco); --comp-fundo: transparent; }
.tema-botao { --tema-cor: var(--texto); --tema-borda: var(--linha); --tema-foco: var(--foco); --tema-fundo: transparent; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + 16px); }
html.sem-rolagem { overflow: hidden; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--sans); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
kbd { font: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: 12px; background: var(--botao-fundo);
  color: var(--botao-texto); font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }
.dentro { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------- aviso da prévia: uma linha, 12 px */
.previa { margin: 0; padding: 8px var(--gutter); font-size: .75rem; color: var(--suave); text-align: center; }
.previa a { color: var(--texto); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- selos (a pílula cinza do original) e botões */
.selo { display: inline-flex; align-items: center; gap: .6em; padding: 6px 12px; border-radius: 999px; background: var(--fundo-3);
  color: var(--texto); font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.selo::before { content: "/"; font-weight: 400; color: var(--suave); }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  background: var(--botao-fundo); color: var(--botao-texto); }
.botao-linha { background: transparent; color: var(--texto); outline: 1px solid var(--linha); outline-offset: -1px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--fundo-3); color: var(--texto);
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.liga { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- topo: logo, links, dois botões (como o original) */
.topo { position: sticky; top: 0; z-index: 40; height: var(--topo-h); background: var(--fundo); color: var(--texto); }
.topo-dentro { display: flex; align-items: center; gap: 24px; height: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.marca { display: inline-flex; align-items: center; color: var(--texto); padding: 6px 0; }
.marca .logo { width: auto; height: 30px; aspect-ratio: 148 / 34; }
.topo-nav { margin-left: 24px; }
.topo-nav ul { display: flex; gap: 4px; }
.topo-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--texto); text-decoration: none; font-size: .875rem; }
.topo-nav a:hover, .topo-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.topo-nav-cta { display: none; }
.topo-ferramentas { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.busca-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; color: var(--texto); text-decoration: none; font-size: .875rem; }
.busca-tecla { font-size: .75rem; color: var(--suave); white-space: nowrap; }
.topo-cta { min-height: 44px; }
.menu-botao { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; color: var(--texto); text-decoration: none; font-size: .875rem; font-weight: 600; cursor: pointer; }
.menu-linhas, .menu-linhas::before { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; }
.menu-linhas { margin-top: -6px; }
.menu-linhas::before { content: ""; position: absolute; top: 7px; }
.menu-aberto .menu-linhas { transform: translateY(3px) rotate(45deg); }
.menu-aberto .menu-linhas::before { transform: translateY(-7px) rotate(-90deg); }
@media (max-width: 1199px) {
  .topo-nav { position: fixed; inset: var(--menu-topo, var(--topo-h)) 0 0 0; margin: 0; padding: 16px var(--gutter) 40px; background: var(--fundo); display: none; overflow-y: auto; }
  .menu-aberto .topo-nav { display: block; }
  .topo-nav ul { flex-direction: column; gap: 0; }
  .topo-nav a { width: 100%; min-height: 60px; padding: 0; font-family: var(--titulo); font-size: 1.75rem; letter-spacing: -0.03em; }
  .topo-nav-cta { display: block; margin-top: 24px; }
  .topo-nav-cta a { justify-content: center; min-height: 56px; border-radius: 12px; background: var(--botao-fundo); color: var(--botao-texto); font-family: var(--sans); font-size: 1rem; font-weight: 600; }
  .menu-botao { display: inline-flex; }
}
@media (max-width: 719px) { .topo-cta, .busca-texto, .busca-tecla { display: none; } .topo-dentro { gap: 8px; } .menu-texto { display: none; } }

/* ---------------------------------------------------------------- painéis e seções */
.painel { position: relative; margin: 0 var(--calha); border-radius: var(--raio); overflow: hidden; }
.painel + .painel { margin-top: var(--calha); }
.secao { padding-block: 120px; }
.painel .secao { padding-block: 112px; }
#nosso-jeito { padding-block: 128px 96px; }
#o-que-fazemos { padding-block: 96px 136px; }
#o-que-olhamos { padding-block: 120px 72px; }
.newsletter .secao { padding-block: 144px 128px; }
.cabeca { display: grid; gap: 24px; max-width: 900px; margin-bottom: 64px; justify-items: start; }
.cabeca h2, .titulo-grande { font-size: 3.5rem; letter-spacing: -0.045em; line-height: 1; }
.lide { font-size: 1.125rem; line-height: 1.5; color: var(--suave); max-width: 640px; }
.foto { overflow: hidden; border-radius: 12px; background: var(--fundo-3); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- herói: só texto; a foto inteira abaixo */
.heroi { padding: 96px 0 56px; }
.heroi-dentro { display: grid; gap: 32px; justify-items: start; }
.heroi-titulo { max-width: 15ch; font-size: 4.5rem; letter-spacing: -0.05em; line-height: 1; }
.heroi-t2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.heroi-titulo.alterna { display: grid; }
.heroi-titulo.alterna > span { grid-area: 1 / 1; position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; transition: opacity .6s; }
.heroi-titulo.alterna[data-ativo="0"] .heroi-t2, .heroi-titulo.alterna[data-ativo="1"] .heroi-t1 { opacity: 0; }
.heroi-texto { display: grid; gap: 20px; max-width: 520px; font-size: 1.125rem; color: var(--corpo); }
.heroi-rodape { display: flex; justify-content: flex-end; width: 100%; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--suave); }
.heroi-foto { margin-top: 32px; width: 100%; aspect-ratio: 16 / 7; border-radius: 12px; }

/* ---------------------------------------------------------------- quem somos: o gráfico de barras à esquerda, como no original */
.quem { padding-block: 64px 96px; }
.quem-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; align-items: center; }
.quem-texto { display: grid; gap: 28px; justify-items: start; }
.quem-texto h2 { font-size: 2.5rem; letter-spacing: -0.045em; }
.grafico { display: grid; gap: 24px; }
.barras { display: grid; grid-template-columns: repeat(5, 70px); gap: 12px; align-items: end; height: 340px; justify-content: center; }
.barras li { display: grid; align-content: end; gap: 12px; height: 100%; }
.barras li .barra { display: block; width: 100%; border-radius: 12px 12px 0 0; background: var(--fundo-3); }
.barras li:nth-child(1) .barra { height: 42%; } .barras li:nth-child(2) .barra { height: 12%; } .barras li:nth-child(3) .barra { height: 62%; }
.barras li:nth-child(4) .barra { height: 34%; } .barras li:nth-child(5) .barra { height: 22%; }
.barra-nome { font-size: .75rem; font-weight: 600; text-transform: uppercase; text-align: center; white-space: nowrap; }
.barra-nome::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 10px; background: var(--fundo-3); }
.grafico figcaption { font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--suave); text-align: center; }

/* ---------------------------------------------------------------- números em caixas escalonadas (4 px a mais em cada) */
.numeros { padding: 0 0 24px; }
.numeros-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }
.numeros-lista li { display: grid; gap: 40px; padding: 24px 24px 20px; border-radius: 12px; background: var(--fundo-3); }
.numeros-lista li:nth-child(2) { margin-top: 4px; } .numeros-lista li:nth-child(3) { margin-top: 8px; } .numeros-lista li:nth-child(4) { margin-top: 12px; }
.num-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.num { font-family: var(--titulo); font-size: 2.5rem; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.num-unidade-palavra { margin-left: .22em; }
.num-pontos { font-size: .75rem; letter-spacing: .1em; color: var(--suave); }
.num-texto { font-size: .875rem; color: var(--suave); text-align: right; }

/* ---------------------------------------------------------------- cartões cinza-claro (nosso jeito, o que olhamos) */
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cartao { display: grid; align-content: end; gap: 12px; min-height: 420px; padding: 32px; border-radius: 12px; background: var(--fundo-3); }
.cartao .chip { justify-self: start; margin-bottom: 8px; background: var(--fundo-2); }
.cartao h3 { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15; }
.cartao p { color: var(--suave); }
.cartoes-baixos .cartao { min-height: 190px; }

/* ---------------------------------------------------------------- o que fazemos: lista numerada com "+" */
.fazemos-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; align-items: start; }
.fazemos-grade .cabeca { margin-bottom: 0; }
.servicos-lista { border-top: 1px solid var(--linha); }
.servicos-lista a { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 72px; padding: 12px 0;
  border-bottom: 1px solid var(--linha); text-decoration: none; }
.servicos-lista a:hover .servicos-lista-titulo { text-decoration: underline; text-underline-offset: 5px; }
.servicos-lista-num { font-size: .875rem; color: var(--suave); }
.servicos-lista-num::before { content: "/ "; }
.servicos-lista-titulo { font-family: var(--titulo); font-size: 1.375rem; letter-spacing: -0.02em; }
.servicos-lista-mais { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; background: var(--botao-fundo); color: var(--botao-texto); font-size: 1rem; line-height: 1; }
.sigilo { display: grid; gap: 8px; margin-top: 48px; max-width: 720px; }
.sigilo h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.sigilo p { color: var(--suave); }
.sigilo a { color: var(--texto); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- chamadas: foto inteira, texto embaixo */
.chamadas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 96px; }
.chamada { display: grid; gap: 16px; justify-items: start; }
.chamada-foto { width: 100%; aspect-ratio: 4 / 3; }
.chamada h3 { font-size: 1.75rem; letter-spacing: -0.03em; padding: 16px 24px 0; }
.chamada p { color: var(--suave); padding: 0 24px; max-width: 540px; }
.chamada .botao { margin: 8px 24px 0; }

/* ---------------------------------------------------------------- como funciona: o painel ardósia e o caminho sinuoso de 1 px */
.como .cabeca { margin-bottom: 0; }
.caminho { position: relative; width: 100%; aspect-ratio: 1200 / 1400; margin-top: 24px; }
.caminho-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.caminho-svg path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .8; vector-effect: non-scaling-stroke; }
.etapas { position: absolute; inset: 0; }
.etapa { position: absolute; display: grid; gap: 16px; justify-items: start; width: min(360px, 40%); }
.etapa-1 { left: 62%; top: 16%; } .etapa-2 { left: 18%; top: 50%; } .etapa-3 { left: 50%; top: 75%; }
.etapa h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.etapa p { color: var(--suave); }
.etapa-num { display: inline-block; padding: 6px 12px; border-radius: 12px; background: var(--fundo-3); font-size: .75rem; font-weight: 600; }
.etapa-num::before { content: "/ "; font-weight: 400; color: var(--suave); }
.etapa-servicos { display: grid; gap: 4px; }
.etapa-servicos a { display: inline-flex; gap: 10px; align-items: center; min-height: 36px; text-decoration: none; }
.etapa-servicos a:hover { text-decoration: underline; text-underline-offset: 4px; }
.etapa-servicos span { font-size: .75rem; color: var(--suave); }

/* ---------------------------------------------------------------- módulos: uma linha cada (ferramentas, quiz, wiki) */
.modulos { padding-top: 0; }
.modulos-lista { border-top: 1px solid var(--linha); }
.modulos-lista a { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 88px; padding: 16px 0;
  border-bottom: 1px solid var(--linha); text-decoration: none; }
.modulos-lista b { font-family: var(--titulo); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.02em; }
.modulos-lista span { color: var(--suave); }
.modulos-lista a:hover b { text-decoration: underline; text-underline-offset: 5px; }

/* ---------------------------------------------------------------- parcerias, clientes e manifesto (painel escuro) */
.parceria { text-align: center; }
.parceria-dentro { display: grid; gap: 28px; justify-items: center; }
.parceria h2 { max-width: 14ch; font-size: 3.5rem; letter-spacing: -0.045em; line-height: 1; }
.pilares { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.parceria .lide { color: var(--texto); font-size: 1rem; max-width: 480px; }
.clientes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; margin-top: 96px; padding-top: 1px; }
.clientes li { display: grid; place-items: center; width: 240px; height: 140px; outline: 1px solid var(--linha); outline-offset: -1px; }
.clientes img { width: auto; max-width: 160px; max-height: 50px; opacity: .9; }
.manifesto { margin-top: 112px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; text-align: left; }
.manifesto h3 { font-size: 2.5rem; letter-spacing: -0.04em; line-height: 1.05; }
.manifesto p { color: var(--suave); align-self: end; max-width: 460px; }

/* ---------------------------------------------------------------- perguntas (painel ardósia, cartões translúcidos) */
.perguntas-cabeca { display: grid; gap: 24px; justify-items: center; text-align: center; margin-bottom: 56px; }
.perguntas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: start; }
.pergunta { border-radius: 12px; background: var(--fundo-3); }
.pergunta summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: var(--titulo); font-size: 1.125rem; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta .abre { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 12px; background: var(--fundo-2); color: var(--texto); font-size: 1rem; line-height: 1; }
.pergunta[open] .abre { opacity: .5; }
.pergunta p { padding: 0 24px 24px; color: var(--texto); max-width: 620px; }

/* ---------------------------------------------------------------- newsletter (painel escuro, centrado) */
.newsletter { text-align: center; }
.news-dentro { display: grid; gap: 24px; justify-items: center; }
.news-dentro h2 { max-width: 12ch; font-size: 3.5rem; letter-spacing: -0.045em; line-height: 1; }
.news-dentro p { color: var(--suave); max-width: 420px; }

/* ---------------------------------------------------------------- rodapé e mapa do site */
.rodape { padding-block: 64px 32px; }
.rodape-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)) minmax(0, 1fr); gap: 40px; }
.rodape-col { display: grid; gap: 14px; align-content: start; }
.rodape-col .rodape-titulo { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--suave); }
.rodape-col ul { display: grid; gap: 6px; }
.rodape-col a, .mapa a { text-decoration: none; }
.rodape-col a:hover, .mapa a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape-topo { justify-self: end; align-self: start; }
.mapa { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: .875rem; }
.mapa-titulo { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--suave); margin-bottom: 20px; }
.mapa-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 24px; }
.mapa-grade > div { display: grid; gap: 10px; align-content: start; }
.mapa-grade > div > p { font-weight: 600; }
.mapa-grade ul { display: grid; gap: 4px; color: var(--suave); }
.mapa-longo { grid-column: 1 / -1; }
.mapa-longo ul { display: block; columns: 4 190px; column-gap: 24px; }
.mapa-longo li { break-inside: avoid; }
.rodape-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: .75rem; color: var(--suave); }
.rodape-legal a { color: var(--texto); text-underline-offset: 3px; }
.creditos { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.creditos ul { display: contents; }
.creditos li:not(:last-child)::after { content: ","; }

/* ---------------------------------------------------------------- busca ⌘K */
.busca { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100svh - 64px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--linha);
  border-radius: 12px; background: var(--fundo-2); color: var(--texto); overflow: hidden; }
.busca::backdrop { background: #0a0f15b3; }
.busca-caixa { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.busca-campo { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--linha); }
.busca-campo .ic { color: var(--suave); }
.busca-campo input { flex: 1; min-width: 0; height: 60px; border: 0; outline: 0; background: none; color: var(--texto); font: inherit; font-size: 1.125rem; }
.busca-campo input::placeholder { color: var(--suave); }
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-lista { overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.busca-grupo { padding: 12px 12px 6px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--suave); }
.busca-op a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.busca-op-t { font-weight: 600; }
.busca-op-d { font-size: .875rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-op[aria-selected="true"] a { background: var(--fundo-3); }
.busca-vazio { padding: 24px 20px; color: var(--suave); }
.busca-rodape { padding: 10px 20px; border-top: 1px solid var(--linha); font-size: .75rem; color: var(--suave); }

/* ---------------------------------------------------------------- páginas internas */
.pagina { padding-block: 0 80px; }
.abertura { padding-block: 96px 48px; }
.abertura .dentro { display: grid; gap: 24px; justify-items: start; }
.abertura-titulo { max-width: 16ch; font-size: 4.5rem; letter-spacing: -0.05em; line-height: 1; }
.abertura-lide { max-width: 720px; }
.painel-titulo { font-size: 2.5rem; letter-spacing: -0.04em; margin-bottom: 40px; max-width: 900px; }
.servicos-abas .abas-lista, .metodo-abas .abas-lista { gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 32px; }
.servicos-abas .aba, .metodo-abas .aba { font-weight: 400; font-size: 1rem; }
.servico { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 32px; align-items: start; padding: 40px 0; border-top: 1px solid var(--linha); }
.servico-num { font-size: .875rem; color: var(--suave); padding-top: 10px; }
.servico-num::before { content: "/ "; }
.servico-corpo { display: grid; gap: 20px; justify-items: start; }
.servico-corpo h2, .servico-corpo h3 { font-size: 2.5rem; letter-spacing: -0.04em; }
.servico-corpo > p { font-size: 1.125rem; color: var(--corpo); max-width: 640px; }
.servico-pagina { display: grid; gap: 8px; }
.servico-liga { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.etapa-cartao { display: grid; gap: 10px; align-content: start; padding: 32px; border-radius: 12px; background: var(--fundo-3); text-decoration: none; }
.etapa-cartao:hover .etapa-cartao-titulo { text-decoration: underline; text-underline-offset: 5px; }
.etapa-cartao-num { font-size: .875rem; color: var(--suave); }
.etapa-cartao-titulo { font-family: var(--titulo); font-size: 1.375rem; letter-spacing: -0.02em; }
.etapa-cartao-texto { color: var(--suave); }
.servico-cta { display: grid; gap: 16px; align-content: space-between; justify-items: start; padding: 32px; border-radius: 12px; background: var(--fundo-3); }
.servico-cta-titulo { font-family: var(--titulo); font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15; }
.marcas { display: grid; gap: 20px; margin-top: 8px; padding: 32px; border-radius: 12px; background: var(--fundo-3); }
.marcas-cabeca { display: grid; gap: 12px; max-width: 760px; }
.marcas-titulo { font-size: 1.375rem; letter-spacing: -0.02em; }
.marcas-lista { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.marcas-lista li { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--suave); font-size: .875rem; }
.marca-ic { display: block; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.marcas-nota { font-size: .75rem; color: var(--suave); max-width: 720px; }
.metodo-painel .como-grade { display: grid; gap: 40px; padding: 48px; border-radius: 12px; background: var(--p-ardosia); color: var(--p-ardosia-texto); }
.metodo-painel .como-grade .etapas { position: static; display: grid; gap: 32px; }
.metodo-painel .como-grade .etapa { position: static; width: auto; max-width: 640px; }
.metodo-painel .como-grade .etapa p, .metodo-painel .como-grade .etapa-servicos span { color: var(--p-ardosia-suave); }
.metodo-painel .como-grade .etapa-num { background: var(--p-ardosia-2); }
.metodo-painel .como-grade .caminho-svg { position: static; width: 100%; height: auto; max-width: 480px; aspect-ratio: 1200 / 1400; }
.metodo-painel .parceria-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.metodo-painel .parceria-corpo { display: grid; gap: 28px; justify-items: start; }
.metodo-painel .pilares { justify-content: flex-start; }
.pagina-contato { min-height: 70svh; padding-top: 96px; }
.contato-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.contato-texto { display: grid; gap: 24px; justify-items: start; }
.contato-texto h1 { font-size: 4.5rem; letter-spacing: -0.05em; line-height: 1; }
.contato-cidades { font-size: .875rem; color: var(--suave); }
.contato-acoes { display: grid; gap: 8px; }
.contato-cartao { display: grid; gap: 4px; padding: 24px; border-radius: 12px; background: var(--fundo-3); text-decoration: none; }
.contato-cartao .selo { justify-self: start; background: var(--fundo-2); }
.contato-valor { font-family: var(--titulo); font-size: 1.375rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contato-cartao:hover .contato-valor { text-decoration: underline; text-underline-offset: 5px; }
.pagina-politica { padding-top: 96px; }
.leitura { max-width: 800px; }
.leitura h1 { font-size: 3.5rem; letter-spacing: -0.045em; }
.politica-data { margin: 18px 0 48px; font-size: .875rem; color: var(--suave); }
.leitura h2 { font-size: 1.75rem; letter-spacing: -0.03em; margin: 56px 0 16px; padding-top: 28px; border-top: 1px solid var(--linha); }
.leitura h3 { font-size: 1.125rem; margin: 28px 0 12px; }
.leitura p { color: var(--corpo); margin-bottom: 16px; }
.leitura p a { color: var(--texto); text-underline-offset: 3px; }
.leitura .politica-contato { margin-bottom: 4px; }
.tabela-rola { overflow-x: auto; margin: 8px 0 24px; border-radius: 12px; background: var(--fundo-3); }
.leitura table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.leitura th, .leitura td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.leitura tbody tr:last-child > * { border-bottom: 0; }
.leitura thead th { font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--suave); }
.leitura tbody th { font-weight: 600; color: var(--texto); width: 44%; }
.leitura td { color: var(--corpo); }
.direitos { display: grid; gap: 10px; margin: 8px 0 24px; }
.direitos li { position: relative; padding-left: 24px; color: var(--corpo); }
.direitos li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 10px; height: 1px; background: var(--texto); }
.politica-voltar { margin-top: 56px; }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1099px) {
  .quem-grade { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .barras { grid-template-columns: repeat(5, minmax(0, 70px)); height: 280px; }
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-topo { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 959px) {
  :root { --gutter: 24px; }
  .secao, .painel .secao { padding-block: 80px; }
  .numeros-lista { grid-template-columns: repeat(2, 1fr); }
  .numeros-lista li:nth-child(n) { margin-top: 0; }
  .cartoes, .chamadas, .perguntas, .fazemos-grade, .modulos-lista a, .servicos-lista a, .manifesto, .contato-grade, .servico-liga,
  .metodo-painel .parceria-grade { grid-template-columns: minmax(0, 1fr); }
  .cartao { min-height: 280px; }
  .servicos-lista a { gap: 8px; }
  .servicos-lista-mais { display: none; }
  .caminho { aspect-ratio: auto; }
  .caminho-svg { display: none; }
  .etapas { position: static; display: grid; gap: 40px; margin-top: 40px; }
  .etapa { position: static; width: auto; max-width: 560px; }
  .servico { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mapa-longo { grid-column: auto; }
}
@media (max-width: 599px) {
  :root { --gutter: 20px; --calha: 8px; --topo-h: 68px; }
  .heroi { padding-top: 56px; }
  .heroi-titulo, .abertura-titulo, .contato-texto h1 { font-size: 2.5rem; letter-spacing: -0.04em; }
  .cabeca h2, .parceria h2, .news-dentro h2, .titulo-grande, .leitura h1 { font-size: 2rem; }
  .quem-texto h2, .manifesto h3, .servico-corpo h2, .servico-corpo h3, .painel-titulo { font-size: 1.75rem; }
  .heroi-foto { aspect-ratio: 4 / 3; }
  .barras { height: 220px; gap: 8px; }
  .numeros-lista { grid-template-columns: minmax(0, 1fr); }
  .num { font-size: 2rem; }
  .clientes li { width: 50%; height: 100px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .mapa-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mapa-longo { grid-column: 1 / -1; }
  .chamada h3, .chamada p, .chamada .botao { padding-inline: 8px; margin-inline: 8px; }
  .busca { margin-top: 16px; }
}

/* ---------------------------------------------------------------- movimento: uma revelação só (opacidade + 12 px, 300 ms) */
@media (prefers-reduced-motion: no-preference) {
  .luxo [data-revela] { opacity: 0; transform: translateY(12px); transition: opacity .3s ease-out, transform .3s ease-out; }
  .luxo [data-revela].visivel { opacity: 1; transform: none; }
}
@media print { .busca, .topo, .previa { display: none; } }