/* Só o que é do site e não existe no design system. Medidas e cores vêm dos tokens. */

/* ---------- Topo (repetido em todas as páginas) ---------- */
.topo { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); }
.topo-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: var(--section-inner); height: 72px; margin: 0 auto; padding: 0 var(--space-8); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.marca-logo { display: block; width: 139px; height: auto; } /* logo oficial (v6+): primária, mínimo 120 px */
.menu { display: flex; gap: var(--space-6); }
.menu a { color: var(--text); text-decoration: none; }
.menu a:hover { color: var(--text-meta); }
/* Âncoras (#diagnostico) não ficam escondidas embaixo do topo fixo. */
[id] { scroll-margin-top: 74px; } /* 72 do topo + a borda + folga de arredondamento */
@media (max-width: 820px) {
  [id] { scroll-margin-top: 66px; }
  .topo-inner { padding: 0 var(--space-4); height: 64px; }
  .menu { display: none; }
}

/* ---------- Rodapé (repetido em todas as páginas) ---------- */
.rodape .tg-inner { gap: var(--space-6); }
.rodape-linhas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-8); color: var(--text-meta); }
.rodape-linhas a { color: var(--text-body); }
.rodape-contato { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

/* ---------- Topo da home ---------- */
.abertura .tg-inner { padding-block: 96px var(--space-section); gap: var(--space-8); }
.abertura-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
/* Diz para onde o botão leva: o WhatsApp abre em outro app. */
.abertura-canal { font: 400 13px/16.9px var(--font-sans); color: var(--text-meta); }
.tg-btn-icon svg.icone-whatsapp { width: 18px; height: 18px; }
@media (max-width: 720px) { .abertura .tg-inner { padding-block: var(--space-12); } }


/* Botão "Cookies" do rodapé: parece link, reabre o aviso de cookies. */
.rodape-cookies { padding: 0; border: 0; background: none; font: inherit; text-transform: inherit; color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Texto v1 (26/09/2026) ----------
   Estruturas simples para o texto aprovado. */
.texto { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.incluso-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.incluso-grupo { display: flex; flex-direction: column; gap: var(--space-2); }
.incluso-grupo .tg-list li { align-items: baseline; }
.falas { display: flex; flex-direction: column; gap: var(--space-2); }
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); counter-reset: passo; }
.passos li { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-8); position: relative; counter-increment: passo; }
.passos li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 400 13px/16.9px var(--font-mono); color: var(--text-meta); }
.tg-cell .tg-btn-link { align-self: flex-start; }
@media (max-width: 820px) {
  .incluso-grupos, .lado-a-lado { grid-template-columns: 1fr; }
}
/* Celular estreito: o botão "Quero agendar uma reunião" do topo cabe ao lado do logo (mínimo de 120 px no guia de logos). */
@media (max-width: 400px) {
  .topo-inner { gap: var(--space-2); }
  .marca-logo { width: 120px; }
}

/* ---------- Estrutura das páginas (vinda do wireframe v1) ---------- */
.celulas-compactas .tg-cell { min-height: 0; }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.abertura-texto { display: flex; flex-direction: column; gap: var(--space-8); }
.preco-destaque { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-xs); }
.preco-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.duas-colunas .tg-head-text { gap: var(--space-6); }
.preco-destaque .tg-body { max-width: 720px; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); align-items: start; }
@media (max-width: 820px) {
  .abertura-grade, .duas-colunas { grid-template-columns: 1fr; gap: var(--space-8); }
  .preco-destaque { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-6); }
}
.preco-destaque .linha { display: inline-block; }

/* ---------- Letreiro das ferramentas (home e páginas de produto) ----------
   ticker.js copia o grupo e liga a animação; sem ele, as marcas ficam paradas e quebram linha. */
.ticker { width: 100%; }
.ticker-janela { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-trilho { display: flex; justify-content: center; }
.ticker-grupo { display: flex; flex-wrap: wrap; justify-content: center; }
.ticker-ativo .ticker-trilho { justify-content: flex-start; width: max-content; animation: ticker 50s linear infinite; }
.ticker-ativo .ticker-grupo { flex-wrap: nowrap; }
.ticker-ativo .ticker-janela:hover .ticker-trilho { animation-play-state: paused; }
.ticker .tg-logo-cell { flex-shrink: 0; }
.ticker-grupo + .ticker-grupo .tg-logo-cell:first-child::before { content: ""; position: absolute; left: 0; top: 11px; width: 1px; height: 42px; background: var(--line); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 720px) { .ticker .tg-logo-cell { width: 96px; height: 56px; } .ticker .tg-faixa-marca { width: 72px; height: 24px; } .ticker .tg-logo-cell + .tg-logo-cell::before, .ticker-grupo + .ticker-grupo .tg-logo-cell:first-child::before { top: 12px; height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .ticker-ativo .ticker-trilho { animation: none; width: auto; justify-content: center; }
  .ticker-ativo .ticker-grupo { flex-wrap: wrap; }
  .ticker-grupo[aria-hidden="true"] { display: none; }
}
/* Células em duas colunas (dobras longas: cada item com mais espaço). */
@media (min-width: 821px) {
  .celulas-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .celulas-duas .tg-cell, .celulas-duas .tg-cell:nth-child(3n+1), .celulas-duas .tg-cell:nth-child(-n+3) { padding: var(--space-6); }
  .celulas-duas .tg-cell:nth-child(odd) { padding-left: 0; }
  .celulas-duas .tg-cell:nth-child(-n+2) { padding-top: 0; }
  .celulas-duas .tg-cell::after, .celulas-duas .tg-cell:nth-child(3n)::after, .celulas-duas .tg-cell:nth-child(n+4)::after { border: 0; border-right: 1px dashed var(--line); }
  .celulas-duas .tg-cell:nth-child(even)::after { border-right: 0; }
  .celulas-duas .tg-cell:nth-child(n+3)::after { border-top: 1px dashed var(--line); }
}
.celulas-duas .tg-cell { min-height: 0; }
/* Preço sem imagem ao lado (dobra curta). */
.preco-simples { grid-template-columns: 1fr; padding: var(--space-8); }

/* ---------- Visual v1 (tickets 29 e 30) ----------
   Componentes do site montados com os tokens e o desenho do design system v7. */
img { max-width: 100%; height: auto; }
.abertura-imagem { margin: 0; justify-self: center; width: 100%; max-width: 460px; }
.abertura-imagem img { display: block; width: 100%; }
.tg-head + .tg-cells, .tg-head + .caminho, .tg-head + .linha-tempo { margin-top: var(--space-4); }

/* Diagrama: o caminho do cliente (Google → perfil → site → WhatsApp). */
.caminho { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.caminho-passo { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-6) var(--space-8) 0; }
.caminho-passo + .caminho-passo { padding-left: var(--space-6); border-left: 1px dashed var(--line); }
.caminho-passo + .caminho-passo::before { content: ""; position: absolute; left: -7px; top: calc(var(--space-8) + 17px); width: 13px; height: 13px; border-top: 1.5px solid var(--tone, var(--accent-cyan)); border-right: 1.5px solid var(--tone, var(--accent-cyan)); transform: rotate(45deg); background: var(--surface); }
.caminho-icone { width: 40px; height: 40px; color: var(--tone, var(--accent-cyan)); margin-bottom: var(--space-2); }
.incluso-grupo .tg-cell-icon { width: 32px; height: 32px; margin-bottom: var(--space-2); }

/* Preço: moldura com colchetes. */
.preco-moldura { margin: 0; }
.preco-moldura .preco-destaque { border: 0; }
.preco-imagem { display: block; width: 100%; }

/* Diagrama: linha do tempo (dia 0 → dia 7 → todo mês). */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 0; right: 0; top: 46px; border-top: 1.5px dashed var(--border); }
.tempo-marco { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding-right: var(--space-6); }
.tempo-quando { color: var(--text-meta); height: 16px; }
.tempo-ponto { position: relative; z-index: 1; width: 48px; height: 48px; margin: var(--space-2) 0; display: grid; place-items: center; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--tone, var(--accent-cyan)); color: var(--tone, var(--accent-cyan)); }
.tempo-ponto svg { width: 22px; height: 22px; }

.diagnostico-imagem { display: block; width: 100%; max-width: 520px; margin-top: var(--space-4); }

@media (max-width: 820px) {
  .caminho, .linha-tempo { grid-template-columns: 1fr; }
  .caminho-passo, .caminho-passo + .caminho-passo { padding: var(--space-6) 0 var(--space-6) 56px; border-left: 0; border-top: 1px dashed var(--line); }
  .caminho-passo:first-child { border-top: 0; }
  .caminho-icone { position: absolute; left: 0; top: var(--space-6); width: 36px; height: 36px; }
  .caminho-passo + .caminho-passo::before { left: 12px; top: -7px; transform: rotate(135deg); }
  .linha-tempo { gap: var(--space-6); }
  .linha-tempo::before { left: 23px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--border); }
  .tempo-marco { padding: 0 0 0 64px; min-height: 48px; }
  .tempo-ponto { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Diagrama: para onde vai o dinheiro (/anuncios). Uma origem, dois destinos. */
.fluxo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto auto; gap: var(--space-4) var(--space-12); align-items: center; position: relative; }
.fluxo li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px dashed var(--border); border-radius: var(--radius-xs); background: var(--surface); position: relative; z-index: 1; }
.fluxo-origem { grid-row: 1 / 3; align-self: center; }
.fluxo-origem::after, .fluxo-destino::before { content: ""; position: absolute; top: 50%; width: calc(var(--space-12) / 2 + 1px); border-top: 1.5px solid var(--tone, var(--accent-cyan)); }
.fluxo-origem::after { left: 100%; }
.fluxo-destino::before { right: 100%; }
.fluxo-destino:nth-child(2)::after { content: ""; position: absolute; top: 50%; right: calc(100% + var(--space-12) / 2); height: calc(100% + var(--space-4)); border-left: 1.5px solid var(--tone, var(--accent-cyan)); }
.fluxo-icone { width: 32px; height: 32px; color: var(--tone, var(--accent-cyan)); }
.linha-tempo-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bloco-imagem { display: block; width: 100%; }
.prova-foto { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-xs); }
.cota { border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.cota .tg-stat { padding-left: 0; }
@media (max-width: 820px) {
  .fluxo { grid-template-columns: 1fr; gap: var(--space-4); }
  .fluxo-origem { grid-row: auto; }
  .fluxo-origem::after, .fluxo-destino::before, .fluxo-destino:nth-child(2)::after { display: none; }
  .linha-tempo-5 { grid-template-columns: 1fr; }
  .cota .tg-stat { border-right: 0; border-bottom: 1px dashed var(--line); padding: var(--space-6) 0; }
}

/* Home: as frases de quem chega, as fotos, o café e os passos com ícone. */
.falas { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.falas figcaption { color: var(--text-meta); }
.falas-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-12); color: var(--text); }
.foto-retrato { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xs); }
.cafe { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text); }
.cafe-icone { flex-shrink: 0; width: 24px; height: 24px; color: var(--tone, var(--accent-cyan)); }
.passos-com-icone li { padding-left: 56px; }
.passos-com-icone li::before { content: none; }
.passo-icone { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 1.5px solid var(--tone, var(--accent-cyan)); color: var(--tone, var(--accent-cyan)); }
.passo-icone svg { width: 20px; height: 20px; }
/* Privacidade: página de leitura, seções mais curtas. */
.privacidade-secao .tg-inner { padding-block: var(--space-12); }
.privacidade-secao + .privacidade-secao { border-top: 0; }
@media (max-width: 820px) { .falas-lista { grid-template-columns: 1fr; } }
.junto { white-space: nowrap; }
.preco-com-fluxo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.prova-foto { max-height: 380px; }
@media (max-width: 820px) { .preco-com-fluxo { grid-template-columns: 1fr; } }

/* ---------- Bloco do diagnóstico (26/09/2026) ----------
   O que acontece depois do pedido, entre tracejados, como uma cota da planta. */
.passos-diagnostico { padding-block: var(--space-4); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); gap: var(--space-3); }
/* Com erro, a página rola até o campo inteiro (rótulo incluso) aparecer abaixo do topo fixo. */
.tg-form-campo { scroll-margin-top: 96px; }
@media (max-width: 820px) { .tg-form-campo { scroll-margin-top: 88px; } }
/* No fundo claro, o amarelo neon some (1,4:1). Erros usam um âmbar escuro (4,9:1 sobre o papel), sempre com ícone e texto. */
.tg-light { --attention-ink: #8a6500; }
.tg-light .tg-form .tg-input[aria-invalid="true"] { border-color: var(--attention-ink); }
.tg-light .tg-form-erro svg, .tg-light .tg-form-aviso-erro svg { color: var(--attention-ink); }
/* Pílula de seção no claro: o cinza meta dava 4,3:1 sobre a névoa; o cinza 600 dá 7:1. */
.tg-light .tg-tagline { color: var(--gray-600); }

/* ---------- Vale de confiança (26/09/2026) ---------- */
/* Faixa de empresas: some enquanto houver menos de 3 logos reais (caixas vazias pareciam falta de cliente). */
[data-bloco="faixa-empresas"]:not(:has(.tg-logos-row > .tg-logo-cell:nth-child(3))) { display: none; }
/* Cota do Quem sou: o número primeiro, a legenda embaixo (lê "5 anos cuidando do marketing…"). */
.cota-quem { margin-top: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cota-quem .tg-stat { justify-content: flex-start; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-6) 0; }
.cota-quem .tg-stat + .tg-stat { padding-left: var(--space-6); }
.cota-quem .tg-stat-value { font-size: 36px; line-height: 46.8px; letter-spacing: 0; }
@media (max-width: 400px) {
  .cota-quem { grid-template-columns: 1fr; }
  .cota-quem .tg-stat, .cota-quem .tg-stat + .tg-stat { padding: var(--space-4) 0; border-right: 0; }
  .cota-quem .tg-stat + .tg-stat { border-top: 1px dashed var(--line); }
}

/* ---------- Planta da Grande João Pessoa (topo da home, 26/09/2026) ----------
   Desenho esquemático no vocabulário do site: traço fino, limites tracejados, rótulos em mono, carimbo e colchetes.
   A única cor é a mira, no tom da seção. */
.planta { max-width: 500px; }
.planta svg { display: block; width: 100%; height: auto; overflow: visible; }
.planta .grade { fill: none; stroke: rgba(255, 255, 255, 0.035); stroke-width: 1; }
.planta .terra { fill: rgba(255, 255, 255, 0.025); stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.planta .agua { fill: url(#planta-hachura); }
.planta .hachura { stroke: var(--border); stroke-width: 1; }
.planta .rio-fino { fill: none; stroke: var(--border); stroke-width: 6; stroke-linecap: round; }
.planta .costa { fill: none; stroke: var(--gray-400); stroke-width: 1.25; }
.planta .guia, .planta .norte path { fill: none; stroke: var(--text-meta); stroke-width: 1; }
.planta .rotulo { font: 400 11px var(--font-mono); fill: var(--text-meta); }
.planta .rotulo-fraco { fill: var(--text-faint); }
.planta .rotulo-fundo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.planta .rotulo-mira { fill: var(--text); }
.planta .carimbo rect { fill: var(--surface); stroke: var(--border); }
.planta .carimbo path { stroke: var(--border); }
.planta .mira { fill: none; stroke: var(--tone, var(--accent-cyan)); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.planta .mira-halo { stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.6; }
.planta .mira-centro { fill: var(--tone, var(--accent-cyan)); stroke: none; }
/* Um único momento: a mira gira e fecha sobre o ponto ao abrir a página. Parada, ela já está no lugar. */
@media (prefers-reduced-motion: no-preference) {
  .planta .mira { animation: mira-fecha 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
  @keyframes mira-fecha { from { opacity: 0; transform: scale(1.6) rotate(-90deg); } to { opacity: 1; transform: none; } }
}

/* Como eu trabalho: um trilho tracejado liga os passos, como uma rota. */
.passos-trilho li { position: relative; }
.passos-trilho li:not(:last-child)::after { content: ""; position: absolute; left: 19.25px; top: 44px; bottom: calc(-1 * var(--space-4) + 4px); border-left: 1.5px dashed var(--border); }
.passos-trilho .passo-icone { background: var(--surface); }
/* No celular a planta encolhe para ~60%: rótulos principais crescem, os secundários saem. */
@media (max-width: 720px) {
  .planta .rotulo { font-size: 15px; }
  .planta .carimbo .rotulo { font-size: 13px; }
  .planta > svg > .rotulo-fraco, .planta .guia-ponta { display: none; }
}

/* ---------- Celular e toque (26/09/2026) ---------- */
/* Quem sou: no HTML o texto vem antes da foto (nome primeiro no celular e no leitor de tela); no computador a foto fica à esquerda. */
@media (min-width: 821px) { .lado-a-lado > .foto-antes { order: -1; } }
/* Botão de reunião no meio da página, depois do método. */
.passos-acao { align-self: flex-start; margin-top: var(--space-4); }
@media (max-width: 820px) {
  /* Retratos 4:5 ocupavam uma tela inteira no celular: viram quadrados, com o rosto no alto. */
  .foto-retrato { aspect-ratio: 1 / 1; object-position: center 20%; }
}
/* Toque: botões com pelo menos 44 px de altura. */
@media (pointer: coarse) {
  .tg-btn { min-height: 44px; }
  .tg-btn-nav { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Movimento (26/09/2026) ----------
   A linguagem vem da planta: as linhas se desenham. Um momento no topo, os diagramas se traçam ao rolar,
   e respostas curtas ao toque. Com movimento reduzido, tudo já está no lugar. Curva padrão: saída rápida, chegada suave. */
:root { --ease-chega: cubic-bezier(0.16, 1, 0.3, 1); }

/* Respostas ao toque (valem sempre; são curtas e não deslocam conteúdo). */
.tg-btn { transition: opacity .15s ease, transform .1s ease-out; }
.tg-btn:active { transform: translateY(1px) scale(0.985); }
.tg-btn-icon svg { transition: transform .22s var(--ease-chega); }
.tg-btn:hover .tg-btn-icon svg { transform: translateX(3px); }
.tg-btn:hover .tg-btn-icon svg.icone-whatsapp { transform: rotate(-10deg) scale(1.06); }
.menu a { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .28s var(--ease-chega), color .15s ease; }
.menu a:hover, .menu a:focus-visible { background-size: 100% 1px; }
.tg-btn-link { transition: text-underline-offset .2s var(--ease-chega), opacity .15s ease; }
.tg-btn-link:hover { text-underline-offset: 6px; }

/* Formulário: cada estado entra, o "enviando" gira e o ✓ do sucesso se risca. */
.tg-form-aviso:not(:empty) { animation: aviso-entra .28s var(--ease-chega); }
.tg-form-aviso-sucesso svg path { stroke-dasharray: 1; animation: risca .5s .12s var(--ease-chega) both; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(4px); } }
@keyframes risca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Perguntas frequentes: a resposta abre deslizando (navegadores com ::details-content; nos outros, abre na hora). */
@supports selector(::details-content) {
  .tg-faq-item { interpolate-size: allow-keywords; }
  .tg-faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .32s var(--ease-chega), opacity .22s ease, content-visibility .32s allow-discrete; }
  .tg-faq-item[open]::details-content { block-size: auto; opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .tg-form-aviso-enviando svg { animation: gira 1.4s linear infinite; }
  @keyframes gira { to { transform: rotate(360deg); } }
  .tg-cookies { animation: sobe .4s var(--ease-chega); }
  @keyframes sobe { from { opacity: 0; transform: translateY(16px); } }

  /* Momento do topo: a faixa ciano do título passa como marca-texto… */
  .abertura .tg-highlight > span { animation: marca .75s .1s var(--ease-chega) both; }
  @keyframes marca { from { clip-path: inset(0 100% 0 0 round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
  /* …e, na home, a planta se traça: água e limites aparecem, a costa se desenha, os rótulos entram e a mira fecha por último. */
  .planta .agua, .planta .rio-fino { animation: aparece .9s .1s ease-out both; }
  .planta .terra { animation: aparece .8s .25s ease-out both; }
  .planta .costa { stroke-dasharray: 1; animation: risca 1.2s .2s var(--ease-chega) both; }
  .planta .rotulo, .planta .guia, .planta .norte, .planta .carimbo { animation: aparece .5s .85s ease-out both; }
  .planta .mira { animation-delay: 1s; }
  @keyframes aparece { from { opacity: 0; } }

  /* Diagramas ao rolar (movimento.js marca .a-tracar só no que ainda está fora da tela). */
  .a-tracar > * { opacity: 0; }
  .tracado > * { animation: entra .6s calc(var(--i, 0) * 110ms) var(--ease-chega) both; }
  @keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  /* Linhas que ligam os itens: o trilho desce, a linha do tempo corre, o fluxo sai da origem. */
  .a-tracar.passos-trilho li::after { transform: scaleY(0); }
  .tracado.passos-trilho li::after { transform-origin: top; animation: traca-y .45s calc(var(--i, 0) * 110ms + 280ms) var(--ease-chega) both; }
  .a-tracar.linha-tempo::before { transform: scaleX(0); }
  .tracado.linha-tempo::before { transform-origin: left; animation: traca-x .9s var(--ease-chega) both; }
  .tracado.fluxo li::before, .tracado.fluxo li::after { transform-origin: left; animation: traca-x .5s .35s var(--ease-chega) both; }
  .tracado.fluxo .fluxo-destino::before { transform-origin: right; }
  @keyframes traca-x { from { transform: scaleX(0); } }
  @keyframes traca-y { from { transform: scaleY(0); } }
  @media (max-width: 820px) {
    .a-tracar.linha-tempo::before { transform: scaleY(0); }
    .tracado.linha-tempo::before { transform-origin: top; animation-name: traca-y; }
  }
}

/* ---------- Acabamento (polish, 26/09/2026) ---------- */
/* Células: o texto sobe para logo abaixo do ícone, então os títulos de uma mesma linha ficam alinhados
   (antes, descrições de tamanhos diferentes empurravam cada título para uma altura). O link, quando há, vai para o pé. */
.tg-cell { justify-content: flex-start; gap: var(--space-6); }
.tg-cell > .tg-btn-link { margin-top: auto; margin-left: var(--space-2); }
/* Títulos de célula que quebram linha respiram melhor (18 → 20 px). */
.tg-title { line-height: 20px; }
/* Rótulo das faixas de marcas é uma frase: sai da caixa alta em mono e vira texto normal pequeno. */
.tg-logos > .tg-label-sm { font: 400 13px/18px var(--font-sans); text-transform: none; text-align: center; max-width: 52ch; }
/* Itens de lista que quebram linha (o "incluso" de /sites) com a mesma folga dos títulos. */
.tg-list li { line-height: 21px; }

/* ---------- Movimento no site todo (27/09/2026) ---------- */
/* Troca entre páginas (Chrome e Edge; nos outros navegadores, troca normal). Com movimento reduzido, a troca é instantânea. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  /* Entre páginas: o topo fixo fica parado e só o conteúdo troca, com um deslizar curto (a regra @view-transition fica no nível de cima, abaixo). */
  .topo { view-transition-name: topo; }
  ::view-transition-old(root) { animation: vt-sai .16s ease-in both; }
  ::view-transition-new(root) { animation: vt-entra .38s var(--ease-chega) both; }
  @keyframes vt-sai { to { opacity: 0; } }
  @keyframes vt-entra { from { opacity: 0; transform: translateY(12px); } }


  /* Grades de células: os tracejados se desenham do canto, célula por célula; o texto não se mexe. */
  .a-riscar > .tg-cell::after { clip-path: inset(0 100% 100% 0); }
  .riscado > .tg-cell::after { animation: risca-celula .8s calc(var(--i, 0) * 90ms) var(--ease-chega) both; }
  @keyframes risca-celula { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }

  /* Molduras: os colchetes fecham sobre o conteúdo. */
  .tg-bracket.tl { transform-origin: top left; } .tg-bracket.tr { transform-origin: top right; }
  .tg-bracket.bl { transform-origin: bottom left; } .tg-bracket.br { transform-origin: bottom right; }
  .a-riscar > .tg-bracket { transform: scale(0); opacity: 0; }
  .riscado > .tg-bracket, .planta > .tg-bracket { animation: canto .5s .15s var(--ease-chega) both; }
  .planta > .tg-bracket { animation-delay: 1.4s; }
  @keyframes canto { from { transform: scale(0); opacity: 0; } }

  /* Planta abaixo da dobra (celular): a sequência inteira espera ela aparecer. */
  .planta.espera, .planta.espera * { animation-play-state: paused !important; }
}