/* ==========================================================================
   CarOffice: base compartilhada do site (porta do molde da casa)

   Este arquivo carrega DEPOIS de css/tokens.css e ANTES de qualquer CSS de
   secao. Ele contem apenas o que e comum a todas as paginas: reset, container,
   utilitarios, primitivos de componente e movimento global.

   Regras do sistema visual:
   - Nenhuma cor, espaco, raio, peso ou tamanho de fonte escrito a mao.
   - Todo primitivo funciona nos dois temas sem regra propria: .em-papel
     reescreve os tokens, entao basta usar var(--texto)/var(--borda)/var(--sup-2).
   - Quatro breakpoints: 1200, 980, 680, 380.
   - Nenhum estilo de secao da home e nenhum estilo de rodape mora aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Fontes
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontes/manrope-latin.woff2") format("woff2");
}
@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontes/sora-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fontes/jetbrainsmono-variavel-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   02. Reset e elementos base

   scroll-padding-top NAO mora aqui: o valor efetivo vem de css/cabecalho.css
   (100 / 86).
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* js/cabecalho.js poe overflow: hidden no body enquanto o mega menu esta
     aberto. Sem a calha reservada, a barra de rolagem some e a pagina inteira
     pula para a direita a largura dela (17px no Windows) a cada abertura. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--sup-0);
  color: var(--texto);
  font: var(--c2) / 1.7 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

/* :modal, nunca [open]: com [open] um dialog embutido travaria o scroll da
   pagina mesmo fechado para o usuario. */
body:has(dialog:modal) {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--titulo);
  /* Linhas de comprimento parecido em vez de uma longa e uma palavra sozinha
     na segunda. Respeita <br> escrito a mao e so age ate seis linhas, entao
     os titulos com quebra deliberada da home continuam onde estao. */
  text-wrap: balance;
}

h1 {
  font-size: var(--t1);
  font-weight: var(--p-max);
  letter-spacing: var(--tk1);
  line-height: 1.06;
}

h2 {
  font-size: var(--t2);
  font-weight: var(--p-max);
  letter-spacing: var(--tk2);
  line-height: 1.12;
}

h3 {
  font-size: var(--t4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.3;
}

p {
  color: var(--suave);
}

/* Sem palavra orfa na ultima linha do paragrafo: o navegador reparte as
   ultimas quatro linhas para a derradeira nao ficar com uma palavra so.
   Quem nao entende ignora a declaracao e nada muda. */
p,
li,
dd,
dt,
figcaption,
blockquote {
  text-wrap: pretty;
}

::selection {
  background: var(--acento);
  color: var(--sup-0);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   03. Container: o unico do site
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--container-max), 100% - var(--container-gutter));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   04. Utilitarios
   -------------------------------------------------------------------------- */
.pular-conteudo {
  position: fixed;
  z-index: 120;
  top: calc(var(--e9) * -1);
  left: var(--e5);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-sm);
  background: var(--acento);
  color: var(--sup-0);
  font-size: var(--c3);
  font-weight: var(--p-forte);
}

.pular-conteudo:focus {
  top: var(--e3);
}

/* Conteudo so para leitores de tela. Esta e a unica implementacao do site. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icone {
  width: 22px;
  height: 22px;
  flex: none;
}

.ponto-vivo {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--acento);
  box-shadow: 0 0 0 4px var(--acento-vidro);
}

.texto-gradiente {
  color: var(--acento);
}

/* Logotipo (componentes/marca.php). Tamanho padrao; cabecalho e rodape
   sobrescrevem com seletor proprio nos seus arquivos. */
.marca-vetor {
  width: 160px;
  height: auto;
  /* Camada propria de composicao. js/marca-site.js mexe em cy, r e opacity
     dos circulos a cada quadro, e o Safari nao repintava essas mudancas
     dentro do cabecalho, que tem backdrop-filter: a marca ficava parada no
     Mac e no iPhone enquanto no Chrome ela animava (relato do Rodrigo em
     21/09/2026; o mesmo laco anima no Safari na pagina de referencia do
     painel, que nao tem backdrop-filter em volta). O translateZ(0) tira o
     SVG da camada do cabecalho e ele passa a repintar sozinho. Custa uma
     textura de 164x45. */
  transform: translateZ(0);
}

/* Texto de apoio. Fica em --suave, e nao em --tenue: 12,5px em --tenue da
   4,2:1 sobre as faixas escuras, abaixo do minimo AA. */
.nota {
  font-size: var(--c4);
  line-height: 1.75;
  color: var(--suave);
}

/* Caixa de icone dos cartoes, usada por todas as secoes da home. */
.cartao-icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--acento-linha);
  border-radius: var(--r-md);
  background: var(--acento-vidro);
  color: var(--acento);
}

.cartao-icone .icone {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   05. Secao: o unico ritmo vertical do site

   A home alterna capitulo claro e capitulo escuro do comeco ao fim. Uma secao
   declara a sua superficie e nada mais: a divisa com a vizinha e deduzida
   daqui, por :has(), e nenhum componente precisa saber onde esta na pagina.
   -------------------------------------------------------------------------- */
.secao {
  position: relative;
  padding-block: var(--esp-secao);
  /* Duas fatias reservadas da mesma propriedade: a divisa de cima e a de
     baixo. Ficam neutras por padrao e sao ligadas pelas regras de vizinhanca
     mais abaixo. `none` nao pode entrar numa lista de sombras; o neutro e
     uma sombra transparente de raio zero. */
  --divisa-topo: inset 0 0 0 0 transparent;
  --divisa-base: inset 0 0 0 0 transparent;
  box-shadow: var(--divisa-topo), var(--divisa-base);
}

.secao > * {
  position: relative;
  z-index: 1;
}

.secao--curta {
  padding-block: var(--esp-secao-curta);
}

.secao--sup1 {
  background: var(--sup-1);
}

/* Capitulo claro. Os tokens locais ja vem trocados por tokens.css, e a divisa
   mora inteira no vizinho escuro (logo abaixo). Por isso o capitulo claro nao
   pinta sombra nenhuma. */
.em-papel {
  background: var(--papel);
  color: var(--texto);
  box-shadow: none;
}

/* --- Divisa entre capitulos ---------------------------------------------
   Regra unica para a pagina inteira, e negativa: entre duas faixas escuras
   nao ha nada, porque nao ha o que separar. So quando um capitulo claro
   encosta num escuro e que a divisa aparece, e ela e sempre desenhada no
   lado ESCURO, como sombra que a borda do papel projeta.

   O motivo: um gradiente entre o papel e o azul-noite passa quase todo o
   percurso no cinza medio, e o que se ve e uma faixa suja. Sombra preta sobre superficie escura nunca sai do escuro.
   ------------------------------------------------------------------------ */
.em-papel + .secao {
  --divisa-topo: inset 0 var(--divisa-altura) calc(var(--divisa-altura) * .82)
    calc(var(--divisa-altura) * -.72) var(--divisa-cor);
}

.secao:has(+ .em-papel) {
  --divisa-base: inset 0 calc(var(--divisa-altura) * -1)
    calc(var(--divisa-altura) * .82) calc(var(--divisa-altura) * -.72)
    var(--divisa-cor);
}

/* O ultimo capitulo claro da home (#contato) fecha contra o rodape, que fica
   fora de <main> e portanto fora do alcance de `+`. Essa divisa e escrita a
   mao em css/rodape.css, com ESTES MESMOS tokens e valores. Nao ha gradiente
   de divisa em nenhum lugar do site. Houve um em css/sec-contato.css ate
   21/09/2026; era o borrao oliva no fim da home. */

/* Nao ha regra de transicao entre duas faixas ESCURAS, e e proposital. Houve
   uma, a .secao--fio, um filete de luz sobre a borda, e ela saiu daqui em
   20/09/2026 sem nunca ter sido usada em pagina nenhuma: a decisao de
   revezar capitulo claro e escuro tornou o problema dela inexistente, porque
   entre dois escuros nao ha limite a marcar. Se um dia duas faixas escuras
   voltarem a se encostar, o lugar da solucao e aqui.
   ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
   06. Cabecalho de secao
   -------------------------------------------------------------------------- */
.secao-cabecalho {
  margin-bottom: var(--esp-bloco);
}

/* <em> num titulo e a palavra que aquele trecho defende: sai no acento, nunca
   em italico. E o mesmo idioma que a capa e a chamada final ja falam
   (css/pagina.css). Comecou preso ao .secao-cabecalho, e ai todo titulo de
   secao escrito fora dele (o h2 de uma .dupla, o de um bloco solto)
   voltava ao italico do navegador como acidente; duas paginas ja tinham
   remendado isso no proprio CSS. Agora vale para qualquer titulo dentro de
   uma .secao. Em paragrafo o <em> continua italico, como deve ser.
   Em capitulo claro o acento vira --acento-tinta sozinho, por tokens.css. */
.secao :is(h1, h2, h3, h4) em {
  font-style: normal;
  color: var(--acento);
}

.sobretitulo {
  display: block;
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--suave);
}

/* O numero editorial da secao vem em <b> dentro do sobretitulo. */
.sobretitulo b {
  font-weight: inherit;
  color: var(--acento);
}

.secao-cabecalho h2 {
  margin-top: var(--e4);
}

.secao-lead {
  max-width: 60ch;
  margin-top: var(--e5);
  font-size: var(--c1);
  line-height: 1.8;
  color: var(--suave);
}

.secao-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e5);
  margin-top: var(--e6);
}

/* Eyebrow + h2 a esquerda, lead + acao a direita. */
.secao-cabecalho--dividido {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--e5) var(--esp-grid);
  align-items: end;
}

.secao-cabecalho--dividido > .sobretitulo {
  grid-column: 1;
  grid-row: 1;
}

.secao-cabecalho--dividido > h2 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
}

.secao-cabecalho--dividido > .secao-lead {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

.secao-cabecalho--dividido > .secao-acao {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   07. Botao: uma altura (46px), dois raios
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 46px;
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  line-height: 1.3;
  text-align: center;
  /* `translate` entra na lista mesmo em botao que nunca se translada: e a
     unica forma de [data-imantar] (logo abaixo) ganhar transicao sem ter de
     repetir as outras quatro propriedades. O atalho `transition` reescreve a
     lista inteira, entao uma segunda regra com `transition: translate ...`
     apagaria o hover de fundo, borda e sombra. Quem nao imanta paga zero por
     uma transicao de uma propriedade que nunca muda.

     --dur-1, e nao --dur-2 como o resto: o ima acompanha o ponteiro quadro a
     quadro, e 280ms de atraso ali viram arrasto. 160ms le como peso. */
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    translate var(--dur-1) var(--ease);
}

/* O ima do botao de decisao. js/site.js (secao 3) escreve --imanta-x/y em
   pixels enquanto o ponteiro esta por cima, e zera ao sair; sem JS, sem
   ponteiro fino ou com movimento reduzido as variaveis nunca existem e o
   fallback deixa o botao no lugar. Nao ha estado de repouso diferente: o
   botao parado e exatamente o botao de sempre. */
[data-imantar] {
  translate: var(--imanta-x, 0) var(--imanta-y, 0);
}

.botao .icone {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-2) var(--ease);
}

.botao:hover .icone {
  transform: translate(3px, -2px);
}

.botao--primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sup-0);
}

.botao--primario:hover {
  background: var(--acento-brilho);
  border-color: var(--acento-brilho);
  box-shadow: var(--brilho-acento);
}

/* Contraste invertido: claro sobre escuro, tinta sobre papel. */
.botao--escuro {
  background: var(--texto);
  border-color: var(--texto);
  color: var(--sup-0);
}

.botao--escuro:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
}

.botao--fantasma {
  border-color: var(--borda-forte);
  color: var(--texto);
}

.botao--fantasma:hover {
  background: var(--sup-2);
  border-color: var(--acento-linha);
}

/* Controles, abas e alternadores. */
.botao--pequeno {
  min-height: 38px;
  padding: var(--e2) var(--e4);
  border-radius: var(--r-sm);
  font-size: var(--c4);
}

.botao--pequeno .icone {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   08. Link com seta
   -------------------------------------------------------------------------- */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  width: fit-content;
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--acento-linha);
  color: var(--acento);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.link-seta .icone {
  width: 17px;
  height: 17px;
  transition: transform var(--dur-2) var(--ease);
}

.link-seta:hover {
  color: var(--acento-brilho);
  border-bottom-color: var(--acento);
}

.link-seta:hover .icone {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   09. Cartao
   -------------------------------------------------------------------------- */
.cartao {
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-2);
}

.cartao--vidro {
  background: transparent;
  border-color: var(--borda-forte);
  backdrop-filter: blur(18px);
}

.cartao--destaque {
  border-color: var(--acento-linha);
  box-shadow: var(--brilho-acento);
}

.cartao h3 {
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   10. Selo
   -------------------------------------------------------------------------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  color: var(--suave);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  line-height: 1.8;
  white-space: nowrap;
}

.selo .icone {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   11. Acordeao
   -------------------------------------------------------------------------- */
.acordeao > details {
  border-top: 1px solid var(--borda);
}

.acordeao > details:last-child {
  border-bottom: 1px solid var(--borda);
}

.acordeao summary {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e5) 0;
  list-style: none;
  cursor: pointer;
  color: var(--texto);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  line-height: 1.5;
}

.acordeao summary::-webkit-details-marker {
  display: none;
}

.acordeao summary > .icone {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--acento);
  transition: transform var(--dur-2) var(--ease);
}

.acordeao > details[open] > summary > .icone {
  transform: rotate(45deg);
}

.acordeao > details > div {
  padding: 0 var(--e5) var(--e5) var(--e7);
}

/* So o paragrafo NU. Ver a nota de .dupla-texto p:not([class]) em
   css/pagina.css. Seletor de elemento pesa (0,1,1) e vence calado o
   .nota e o .sobretitulo, que pesam (0,1,0). */
.acordeao p:not([class]) {
  font-size: var(--c3);
  line-height: 1.85;
  color: var(--suave);
}

/* --------------------------------------------------------------------------
   12. Lista marcada
   -------------------------------------------------------------------------- */
.lista-marcada {
  display: grid;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-marcada > li {
  display: flex;
  gap: var(--e3);
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.7;
}

.lista-marcada .icone {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--acento);
}

.lista-marcada strong {
  display: block;
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --------------------------------------------------------------------------
   13. Grade

   `grade--N` significa "no MAXIMO N colunas", e nao apenas "colunas de pelo
   menos tantos px". A diferenca importa: com auto-fit, um piso baixo deixa a
   tela larga inventar colunas a mais. Medido em 21/09/2026, `.grade--4` com
   piso de 210px dava CINCO colunas em 1440 (paragrafos de 157px, 17 caracteres
   por linha) e TRES em 768 (155px). Nos dois casos a coluna some antes de a
   grade empilhar, que e o pior dos dois mundos.

   A largura pedida e o maior entre o piso de leitura (--grade-min) e a largura
   que N colunas teriam AGORA neste container. Em tela larga o segundo termo
   vence e trava o numero de colunas em N; quando a tela encolhe e ele cai
   abaixo do piso, o piso assume e o auto-fit volta a mandar, tirando uma coluna
   de cada vez. `min(100%, …)` na frente e a guarda de sempre: sem ela a coluna
   fica maior que o container em telas de 320px e a pagina inteira rola de lado.

   --grade-colunas default 99 = sem teto: a `.grade` sozinha continua exatamente
   como era, porque o segundo termo fica negativo e o piso sempre vence.
   -------------------------------------------------------------------------- */
.grade {
  --grade-colunas: 99;
  --grade-min: 260px;
  display: grid;
  gap: var(--esp-grid);
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          var(--grade-min),
          (100% - (var(--grade-colunas) - 1) * var(--esp-grid)) /
            var(--grade-colunas)
        )
      ),
      1fr
    )
  );
}

.grade--2 {
  --grade-colunas: 2;
  --grade-min: 340px;
}

.grade--3 {
  --grade-colunas: 3;
  --grade-min: 280px;
}

/* Piso 240px, e nao os 210px antigos: 210 so existia para caber a quinta
   coluna que esta grade nunca deveria ter tido. Com 240 a quebra de quatro para
   duas colunas acontece em 768, onde quatro ja nao cabem. */
.grade--4 {
  --grade-colunas: 4;
  --grade-min: 240px;
}

/* --------------------------------------------------------------------------
   14. Numero de etapa
   -------------------------------------------------------------------------- */
.numero-etapa {
  display: block;
  font-family: var(--titulo);
  font-size: var(--t3);
  font-weight: var(--p-normal);
  letter-spacing: var(--tk1);
  line-height: 1;
  color: var(--acento);
}

/* --------------------------------------------------------------------------
   14b. Trilha de navegacao

   Mora aqui, e nao em css/site/pagina.css, para que qualquer pagina possa
   escrever a trilha. Nas internas, site.css entra antes de pagina.css,
   entao a cascata nao muda.
   -------------------------------------------------------------------------- */
.trilha {
  font-size: var(--c5);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trilha li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

/* Separador desenhado no li, nao no conteudo: a barra nunca entra na
   selecao de texto nem e lida em voz alta.

   Em pe, e nao deitado. A barra horizontal de 10px lia como um travessao
   entre os nomes (um risco entre INICIO, PLANOS e PRECOS), e o site nao usa travessao em
   lugar nenhum desde 21/09/2026. O fio vertical separa sem parecer
   pontuacao. */
.trilha li + li::before {
  content: "";
  width: 1px;
  height: 10px;
  flex: none;
  background: var(--borda-forte);
}

.trilha a {
  color: var(--tenue);
  transition: color var(--dur-1) var(--ease);
}

.trilha a:hover {
  color: var(--acento);
}

.trilha [aria-current="page"] {
  color: var(--texto);
  /* A pagina aberta nao e link; o peso e a unica marca que ela precisa. */
  font-weight: var(--p-forte);
}

@media (max-width: 680px) {
  .trilha a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   16. Cabecalho: empilhamento e barra de progresso

   O header real e .site-header, estilizado em css/cabecalho.css. Aqui fica
   somente o que aquele arquivo nao declara: o sticky (do qual depende o
   posicionamento do mega menu) e a barra de leitura no rodape do header.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--acento);
      transform-origin: left;
      scale: 0 1;
      animation: progresso-pagina linear;
      animation-timeline: scroll(root);
    }
    @keyframes progresso-pagina {
      to {
        scale: 1 1;
      }
    }
  }
}

/* --------------------------------------------------------------------------
   17. Movimento: o vocabulario que as secoes compartilham

   Tres familias, e nenhuma secao inventa a quarta:

   A) Revelacao na entrada  [data-revelar]        : js/site.js, uma vez so.
   B) Movimento ligado ao scroll  .mov-*          : CSS puro, timeline view().
   C) Movimento ligado ao ponteiro  [data-brilho] / [data-inclinar]
                                                  : js/site.js, so em ponteiro fino.

   Tudo obedece a pausa global (#movimento-controle) e a
   prefers-reduced-motion, declarada uma unica vez na secao 19.
   -------------------------------------------------------------------------- */

/* --- A. Revelacao -------------------------------------------------------
   O estado inicial fica em CSS e so e aplicado quando o JS confirma que vai
   animar (html.movimento-pronto). Sem JS, ou com movimento desligado, o
   conteudo nasce visivel: a revelacao e enfeite, nunca requisito de leitura. */
/* A variante "sobe" fica de fora: ela so anda em transform e nasce visivel.
   E a da primeira dobra das internas (a .capa), onde um opacity 0 segurava o
   LCP ate a animacao chegar e fazia a capa piscar entre a primeira pintura e
   o JS. */
.movimento-pronto [data-revelar]:not([data-revelar="sobe"]) {
  opacity: 0;
}

.movimento-pronto [data-revelar].revelado {
  opacity: 1;
}

/* Variante "palavras": js/site.js divide o titulo em <i class="palavra"><i>.
   A caixa de fora corta, a de dentro sobe. O titulo so e dividido quando o JS
   vai mesmo animar, entao estas regras nunca alcancam um titulo intacto. */
.palavra {
  display: inline-block;
  overflow: hidden;
  font-style: inherit;
  /* A fresta precisa de folga vertical ou acentos e descidas sao cortados. */
  padding-block: 0.12em;
  margin-block: -0.12em;
  vertical-align: bottom;
}

.palavra > i {
  display: inline-block;
  font-style: inherit;
}

/* --- B. Movimento ligado ao scroll --------------------------------------
   Timelines de scroll rodam no compositor: nao ha listener, nao ha rAF e nao
   ha jank. Onde o navegador nao suporta, o elemento simplesmente fica parado
   no seu estado final, nunca invisivel.

   UMA CLASSE .mov-* POR ELEMENTO. Elas nao compoem: todas declaram
   `animation-name` com a mesma especificidade, entao duas na mesma tag nao
   somam os efeitos: a ultima da folha simplesmente vence, e a outra some
   sem erro nenhum. Para combinar parallax com zoom, aninhe: a moldura leva
   `.mov-parallax`, a imagem dentro dela leva `.mov-zoom`. Isso tambem e o
   que produz profundidade de verdade, porque as duas camadas passam a andar
   em velocidades diferentes.

   Combinar com [data-revelar] no mesmo elemento e seguro para .mov-parallax,
   .mov-deriva, .mov-zoom e .mov-fio: a revelacao mexe em `transform` e
   `opacity`, e essas quatro mexem em `translate` e `scale`, que sao
   propriedades separadas e se somam. A excecao e .mov-clarear, que anima
   `opacity`: essa disputa com a revelacao e nao deve dividir elemento
   com ela. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mov-parallax,
    .mov-deriva,
    .mov-zoom,
    .mov-fio,
    .mov-clarear,
    .mov-girar,
    .mov-empurrar {
      animation: linear both;
      animation-timeline: view();
    }

    /* Parallax vertical. A intensidade vem de --mov-forca (padrao 5%). */
    .mov-parallax {
      animation-name: mov-parallax;
      animation-range: cover 0% cover 100%;
    }

    @keyframes mov-parallax {
      from {
        translate: 0 calc(var(--mov-forca, 5%) * -1);
      }
      to {
        translate: 0 var(--mov-forca, 5%);
      }
    }

    /* Deriva horizontal, para faixas e tiras. */
    .mov-deriva {
      animation-name: mov-deriva;
      animation-range: cover 0% cover 100%;
    }

    @keyframes mov-deriva {
      from {
        translate: calc(var(--mov-forca, 3%) * -1) 0;
      }
      to {
        translate: var(--mov-forca, 3%) 0;
      }
    }

    /* Aproximacao lenta de uma fotografia enquanto ela sobe a tela. */
    .mov-zoom {
      animation-name: mov-zoom;
      animation-range: cover 0% cover 100%;
    }

    @keyframes mov-zoom {
      from {
        scale: var(--mov-zoom-de, 1.14);
      }
      to {
        scale: var(--mov-zoom-ate, 1);
      }
    }

    /* Fio que se desenha da esquerda para a direita conforme entra. */
    .mov-fio {
      animation-name: mov-fio;
      animation-range: entry 10% cover 40%;
      transform-origin: left center;
    }

    @keyframes mov-fio {
      from {
        scale: 0 1;
      }
      to {
        scale: 1 1;
      }
    }

    /* Brilho que acende no meio da passagem e apaga na saida. */
    .mov-clarear {
      animation-name: mov-clarear;
      animation-range: cover 0% cover 100%;
    }

    @keyframes mov-clarear {
      0%,
      100% {
        opacity: var(--mov-opacidade-min, 0);
      }
      50% {
        opacity: var(--mov-opacidade-max, 1);
      }
    }

    /* Giro lento de aneis e halos decorativos. Usa `rotate`, propriedade
       independente: soma com `translate` de .mov-parallax num ancestral. */
    .mov-girar {
      animation-name: mov-girar;
      animation-range: cover 0% cover 100%;
    }

    @keyframes mov-girar {
      from {
        rotate: calc(var(--mov-giro, 24deg) * -1);
      }
      to {
        rotate: var(--mov-giro, 24deg);
      }
    }

    /* Havia aqui um .mov-desenhar, traco de SVG que se desenhava conforme a
       secao entrava, animando stroke-dashoffset. Saiu em 20/09/2026 por nao
       ter sujeito: os unicos SVG do site sao icones de 24px e as setas do
       cabecalho, onde um traco se desenhando e ruido, e as linhas que de fato
       se desenham na pagina (o fio dos passos, as reguas)
       sao caixas de 1px que .mov-fio ja resolve com scaleX/scaleY, sem SVG.
       Se um dia entrar um diagrama de verdade, a peca a reconstruir e esta,
       e o elemento precisa trazer stroke-dasharray e stroke-dashoffset iguais
       ao comprimento do caminho, que e o detalhe facil de esquecer. */

    /* Coluna que entra de baixo e assenta. Para blocos que se revezam dentro
       de uma grade e nao devem chegar todos ao mesmo tempo. */
    .mov-empurrar {
      animation-name: mov-empurrar;
      animation-range: entry 0% cover 42%;
    }

    @keyframes mov-empurrar {
      from {
        translate: 0 var(--mov-empurra, 46px);
      }
      to {
        translate: 0 0;
      }
    }
  }
}

/* --- C. Movimento ligado ao ponteiro ------------------------------------
   js/site.js publica --ponteiro-x / --ponteiro-y em porcentagem sobre o
   elemento, e --inclina-x / --inclina-y em graus. So em dispositivos com
   ponteiro fino: no toque, nada disso existe. */
[data-brilho] {
  position: relative;
  isolation: isolate;
}

[data-brilho]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--ponteiro-x, 50%) var(--ponteiro-y, 50%),
    var(--acento-vidro),
    transparent 70%
  );
  transition: opacity var(--dur-2) var(--ease);
}

[data-brilho]:hover::after,
[data-brilho]:focus-within::after {
  opacity: 1;
}

[data-inclinar] {
  transform: perspective(1100px) rotateX(var(--inclina-x, 0deg))
    rotateY(var(--inclina-y, 0deg)) translateZ(0);
  transition: transform var(--dur-2) var(--ease-solto);
}

/* --- Keyframe herdado ---------------------------------------------------
   'onda' e consumido pela barra de voz das secoes (.ia-voz-onda, em
   componentes/inteligencia.php). */
@keyframes onda {
  from {
    transform: scaleY(0.3);
    opacity: 0.55;
  }
  to {
    transform: scaleY(0.95);
    opacity: 1;
  }
}

/* Pausa global (#movimento-controle) e aba em segundo plano. */
.movimento-pausado *,
.movimento-pausado *::before,
.movimento-pausado *::after,
.pagina-oculta *,
.pagina-oculta *::before,
.pagina-oculta *::after {
  animation-play-state: paused !important;
}

.movimento-pausado {
  scroll-behavior: auto;
}

.movimento-pausado .botao,
.movimento-pausado .botao .icone,
.movimento-pausado .link-seta,
.movimento-pausado .link-seta .icone,
.movimento-pausado .icone {
  transition: none;
}

/* Com a pausa ligada nada se esconde esperando entrada, e o ponteiro para de
   inclinar. O brilho continua: e transicao de opacidade no hover, nao
   animacao em curso. */
.movimento-pausado [data-revelar] {
  opacity: 1 !important;
}

.movimento-pausado [data-inclinar] {
  transform: none;
  transition: none;
}

/* O ima tambem para. `translate: none` e nao so `transition: none`: se a
   pausa chegar com o ponteiro ja em cima do botao, as variaveis estao
   escritas e o botao ficaria deslocado, parado e torto. */
.movimento-pausado [data-imantar] {
  translate: none;
  transition: none;
}

/* Marcado por js/site.js enquanto a revelacao [data-revelar] esta rodando. */
.revelar-em-curso {
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   18. Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .secao-cabecalho--dividido {
    grid-template-columns: 1fr;
  }

  /* Precisa repetir a especificidade das regras de colocacao acima: um
     seletor `> *` perde para `> .secao-lead` mesmo vindo depois. */
  .secao-cabecalho--dividido > *,
  .secao-cabecalho--dividido > .sobretitulo,
  .secao-cabecalho--dividido > h2,
  .secao-cabecalho--dividido > .secao-lead,
  .secao-cabecalho--dividido > .secao-acao {
    grid-column: 1;
    grid-row: auto;
  }

  .secao-cabecalho--dividido > .secao-lead,
  .secao-cabecalho--dividido > .secao-acao {
    margin-top: var(--e4);
  }

  .secao--sangria::before {
    height: 110px;
  }



}

@media (max-width: 680px) {
  .acordeao > details > div {
    padding: 0 0 var(--e5) var(--e6);
  }

  .acordeao summary {
    font-size: var(--c3);
  }









}

@media (max-width: 380px) {
  .botao {
    padding-inline: var(--e4);
  }

  .secao-acao {
    gap: var(--e4);
  }

  .acordeao > details > div {
    padding-left: var(--e5);
  }
}

/* --------------------------------------------------------------------------
   19. prefers-reduced-motion, declarado UMA vez, aqui
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .revelar-em-curso {
    will-change: auto;
  }

  /* Quem espera a revelacao para aparecer aparece de imediato, e o ponteiro
     nao mexe em nada. */
  [data-revelar] {
    opacity: 1 !important;
  }

  [data-inclinar] {
    transform: none !important;
  }

  /* A transicao entre paginas (secao 20) e movimento como qualquer outro. */
  @view-transition {
    navigation: none;
  }
}

/* --------------------------------------------------------------------------
   20. Navegacao entre paginas: o site inteiro se comporta como um so

   Duas coisas, e nenhuma delas tem JavaScript.

   A primeira e a transicao de documento: ao clicar num link interno, a pagina
   nova entra num esmaecimento curto em vez de piscar branco, e o cabecalho,
   que e o mesmo elemento em todas as 39 paginas, fica parado no lugar
   enquanto o conteudo troca por baixo dele. E o que faz o site parecer um
   aplicativo e nao uma sequencia de documentos. Quem nao entende
   @view-transition navega como sempre navegou.

   A segunda e o prefetch por especulacao, declarado em
   componentes/cabecalho.php: ao pairar sobre um link interno, o navegador ja
   baixa o HTML de destino, e o clique encontra o documento em cache. E
   prefetch, e nao prerender, porque o prerender roda os scripts num
   documento escondido e os scripts de movimento do site param enquanto a
   pagina esta escondida (a marca ficou estatica no Chrome em 21/09/2026).
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

/* O cabecalho tem nome proprio para ser transicionado como UM elemento, e
   nao como parte do retrato da pagina. Se o cabecalho da pagina antiga e o da
   nova ocupam o mesmo lugar, e ocupam, ele nao se mexe. */
.site-header {
  view-transition-name: cabecalho;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Sem esmaecimento cruzado no cabecalho: os dois retratos sao iguais, e o
   cruzamento de dois iguais com transparencia da um piscar de brilho. */
::view-transition-old(cabecalho) {
  animation: none;
  opacity: 0;
}

::view-transition-new(cabecalho) {
  animation: none;
}