/* Site do Resolvidos — reproduz docs/desenho/site-aprovado-{topo,baixo}.png (1024 px de largura).
   Medidas em px vêm do desenho; o celular (390 px) reorganiza em uma coluna. Cores só por variáveis.
   Paleta (pedido do usuário, 14/10): o desenho como estava, trocando só duas cores — o petróleo (e os tons
   dele) pela primária do app e o creme pelo fundo/superfície do app (app/src/theme/variables.scss);
   o cobre e os tons dele ficam iguais, para ver a combinação. */

@font-face {
  font-family: 'Fraunces';
  src: url('fontes/fraunces-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fontes/fraunces-latin-wght-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fontes/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Tema: o script do <head> (antes da pintura) resolve e grava html[data-tema] = claro | escuro — a escolha
     salva (chamados.tema, a mesma do app) ou, sem escolha, o aparelho (matchMedia, acompanhando a mudança).
     Os tokens claros ficam aqui; os escuros, num bloco só, em html[data-tema="escuro"]. Sem JS, o site é claro
     (sem light-dark() nem media query no CSS: iOS < 17.5 perderia todas as cores — decisão da IA, pode ser revista). */
  color-scheme: light;
  /* tokens do app (app/src/theme/variables.scss, tema claro) no lugar do petróleo e do creme */
  --fundo: #F6F8FB;        /* era o creme #F1F0ED: fundo da página, topo, rodapé */
  --superficie: #FBFCFE;   /* era o branco/cartão: cartões da fila e dos planos, botões claros */
  --primaria: #183A62;     /* era o petróleo #11404A: faixa escura, lua e formas cheias, botão cheio */
  --primaria-faixa: var(--primaria); /* a faixa escura (no escuro, a barra do app: a primária luminosa é só para formas e botões) */
  --sobrecor: #FFFFFF;     /* texto sobre a faixa, o cobre e o botão cheio (= sobrecor do app) */
  --texto: #0B2249;        /* texto do app */
  --texto-suave: color-mix(in srgb, var(--texto) 80%, var(--fundo)); /* parágrafos: um tom do texto, como o antigo era um tom do petróleo */
  --borda: #E4E6ED;        /* borda do app */
  --separador: var(--borda);
  --cinza: #626D72;        /* cliente e tempo no cartão: o cinza neutro de antes (não era tom do petróleo); 5:1 na superfície */
  --sombra: #164073;       /* cor da sombra do app (shadow-cartao) */
  --fio-claro-cor: var(--fundo); /* linha clara sobre a faixa cobre (era creme) */
  /* o cobre e os tons dele ficam como estavam (pedido do usuário, 14/10: "mantém o cobre") */
  --cobre: #C16D4C;
  --cobre-claro: #D4906F;
  --cobre-escuro: #A9502F;
  /* variantes do cobre para texto, calculadas para contraste AA (decisão da IA — pode ser revista):
     rótulo 12px no fundo 5,1:1 · branco na faixa/botão 4,6:1 · itálico grande no fundo 3,6:1 · rótulo na faixa 5:1 */
  --cobre-rotulo: #A9502F;
  --cobre-faixa: #B65C3C;
  --cobre-no-escuro: #E29A78; /* itálico cobre sobre a faixa escura: ≥ 3:1 para texto grande (revisor visual, 08/10) */
  --cobre-rotulo-escuro: #DDA082;
  --alta-fundo: #FBE8E4;
  --alta-texto: #8A3B2D;
  --normal-fundo: #D4E4EE;
  --normal-texto: #3E6078;
  --critica-fundo: #F6D9D8;
  --critica-texto: #8A2E2E;
  --sombra-cartao: 0 1px 2px color-mix(in srgb, var(--sombra) 6%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--sombra) 14%, transparent);
  --sombra-botao: 0 4px 10px -2px color-mix(in srgb, var(--primaria) 22%, transparent);
  --sombra-botao-hover: 0 6px 14px -2px color-mix(in srgb, var(--primaria) 28%, transparent);
  --serifa: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sem-serifa: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --largura: 1024px;
  --margem: 42px;
}
/* tema escuro: só por html[data-tema="escuro"], que o script do <head> grava (escolha salva ou aparelho).
   Fundo e superfície do app no escuro; o cobre continua, com os tons para fundo escuro que já existiam. */
html[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #021124;
  --superficie: #07162A;
  --primaria: #0261CF;       /* primária luminosa do app: formas, botão cheio, satélite */
  --primaria-faixa: #012D65; /* barra do app: a faixa escura e a chamada final (decisão da IA — pode ser revista) */
  --texto: #F8F8FA;
  --borda: #1C3755;
  --cinza: #9EB3D4;
  --sombra: #000000;
  --fio-claro-cor: var(--sobrecor);
  --cobre-rotulo: var(--cobre-rotulo-escuro); /* rótulo sobre o fundo escuro: 8:1 */
  --sombra-botao: 0 4px 10px -2px color-mix(in srgb, var(--sombra) 40%, transparent);
  --sombra-botao-hover: 0 6px 14px -2px color-mix(in srgb, var(--sombra) 50%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--serifa);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; border-radius: 4px; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--primaria); color: var(--sobrecor); padding: 10px 16px; border-radius: 999px;
  font-family: var(--sem-serifa); font-size: 14px;
}
.pular:focus { top: 12px; }

.caixa {
  position: relative;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* ---------- arte (SVG nas coordenadas do desenho) ---------- */
section { position: relative; overflow: hidden; }
.arte { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; }
.arte .cheia { fill: var(--primaria); }
.arte .cobre-escuro { fill: var(--cobre-escuro); opacity: 0.55; }
.arte .fio { fill: none; stroke: var(--cobre); stroke-width: 1.2; }
.arte .fio-claro { stroke: var(--fio-claro-cor); opacity: 0.75; }
.arte .sombra { fill: var(--sombra); opacity: 0.35; }

/* ---------- textos de apoio ---------- */
.rotulo {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 15px;
  font-family: var(--sem-serifa); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobre-rotulo); line-height: 1.4;
}
.rotulo::before { content: ''; width: 31px; height: 1px; background: var(--cobre); flex: none; }
.rotulo-claro { color: var(--cobre-rotulo-escuro); }
.rotulo-claro::before { background: var(--cobre); }
.traco { display: block; position: relative; z-index: 1; width: 31px; height: 1px; background: var(--cobre); }

/* A Fraunces do projeto só tem o eixo wght (corte de texto, mais largo que o display do desenho):
   peso 340, espaçamento -0.02em e corpos ~10% menores dão as mesmas quebras de linha. */
.titulo {
  position: relative; z-index: 1;
  font-weight: 340; font-size: 50px; line-height: 1.1; letter-spacing: -0.02em;
}
.titulo em, h1 em, .faixa-titulo em, .chamada-titulo em { font-style: italic; color: var(--cobre); font-weight: 400; }
.faixa-titulo em, .chamada-titulo em { color: var(--cobre-no-escuro); }
.titulo-claro { color: var(--sobrecor); }
.paragrafo { position: relative; z-index: 1; color: var(--texto-suave); font-size: 18px; line-height: 27px; max-width: 460px; }
.paragrafo-claro { color: var(--sobrecor); } /* sem a opacidade de antes: a 92 % dava 4,1:1 sobre o cobre (AA pede 4,5) */

/* ---------- botões ---------- */
.botao {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 28px; border-radius: 999px;
  font-family: var(--serifa); font-size: 17px; line-height: 1; white-space: nowrap;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.botao:hover { transform: translateY(-1px); }
.botao-cheio { background: var(--primaria); color: var(--sobrecor); box-shadow: var(--sombra-botao); }
.botao-cheio:hover { box-shadow: var(--sombra-botao-hover); }
.botao-contorno { border: 1px solid var(--primaria); color: var(--texto); background: transparent; }
.botao-contorno:hover { background: color-mix(in srgb, var(--primaria) 6%, transparent); }
.botao-cobre { background: var(--cobre-faixa); color: var(--sobrecor); height: 55px; padding: 0 30px; font-size: 17px; }
.botao-cobre:hover { background: var(--cobre-escuro); }
.botao-pequeno { height: 36px; padding: 0 22px; font-family: var(--sem-serifa); font-size: 14px; background: var(--superficie); }
.botao-icone { width: 36px; padding: 0; }
button.botao { border: 0; margin: 0; cursor: pointer; }
button.botao-contorno { border: 1px solid var(--primaria); }
/* botão de tema: lua = "usar tema escuro", sol = "usar tema claro" (o mesmo fa-moon/fa-sun do app); o
   site.js escolhe o ícone e o rótulo pelo tema em uso (html[data-tema] ou o aparelho) */
.icones { display: none; }
.icone { width: 16px; height: 16px; fill: currentColor; flex: none; }
.icone-sol, .tema-escuro .icone-lua { display: none; }
.tema-escuro .icone-sol { display: inline; }
.menu-tema { display: none; }
.seta { width: 15px; height: 15px; flex: none; }
.seta path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- topo ---------- */
.topo { position: relative; z-index: 5; background: var(--fundo); }
.topo-linha { height: 75px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
/* Marca: lockup em SVG (docs/marca, regerado por compose.py); duas artes trocadas pelo tema, como no app */
.marca { display: inline-flex; align-items: center; line-height: 1; }
.marca img { display: block; height: 34px; width: auto; }
.marca .marca-escura, .marca .simbolo-claro, .marca .simbolo-escuro { display: none; }
html[data-tema="escuro"] .marca .marca-clara { display: none; }
html[data-tema="escuro"] .marca .marca-escura { display: block; }
.menu { display: flex; gap: 40px; font-family: var(--sem-serifa); font-size: 13px; color: var(--texto); }
.menu a { padding: 6px 0; border-bottom: 1px solid transparent; }
.menu a:hover { border-bottom-color: var(--cobre); }
.topo-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.menu-botao { display: none; }

/* ---------- hero ---------- */
.hero { background: var(--fundo); }
.hero-caixa { min-height: 581px; padding-top: 107px; padding-bottom: 103px; }
.hero-texto { position: relative; z-index: 1; max-width: 600px; }
/* arte do hero: do fim do texto (570px da coluna de 1024, a ponta da lua não encosta no título) até 24px
   antes da borda da seção — a seção não inclui a barra de rolagem; o viewBox (meet) mantém as formas inteiras */
.arte-hero {
  position: absolute; z-index: 0; pointer-events: none;
  top: 24px; left: calc(max(0px, (100% - var(--largura)) / 2) + 570px);
  width: calc(100% - max(0px, (100% - var(--largura)) / 2) - 594px); height: calc(100% - 48px);
}
.arte .anel-hero { stroke-dasharray: 1000 0; stroke-width: 2; } /* a arte encolhe (0,4–0,8×): 2 unidades ≈ 1–1,6px */
h1 { font-weight: 340; font-size: 64px; line-height: 0.95; letter-spacing: -0.02em; margin-top: 26px; }
h1 em { display: block; }
.hero-paragrafo { position: relative; z-index: 1; color: var(--texto-suave); font-size: 18px; line-height: 27px; max-width: 435px; margin-top: 38px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 38px; }

/* ---------- faixas (escura e cobre) ---------- */
.faixa { color: var(--sobrecor); }
.faixa-escura { background: var(--primaria-faixa); }
.faixa-escura .caixa { min-height: 396px; padding-top: 92px; padding-bottom: 60px; }
.faixa-titulo { position: relative; z-index: 1; font-weight: 340; font-size: 56px; line-height: 1.18; letter-spacing: -0.02em; margin-top: 20px; }
.faixa-cobre { background: var(--cobre-faixa); background-image: radial-gradient(120% 140% at 10% 20%, var(--cobre-faixa) 45%, var(--cobre-escuro) 130%); }
.faixa-cobre .caixa { min-height: 356px; padding-top: 51px; padding-bottom: 35px; }
.faixa-cobre .titulo { font-size: 52px; line-height: 1.15; margin-top: 24px; }
.faixa-cobre .paragrafo { margin-top: 30px; max-width: 540px; }
.faixa-cobre .rotulo { color: var(--sobrecor); }
.faixa-cobre .rotulo::before { background: var(--sobrecor); }
.faixa-cobre .titulo em { color: var(--sobrecor); }

/* ---------- três portas ---------- */
.portas .caixa { min-height: 483px; padding-top: 94px; padding-bottom: 121px; }
.portas .titulo { margin-top: 19px; }
.portas-colunas { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 36px; }
.porta { padding: 0 40px 15px 0; min-height: 150px; }
.porta + .porta { border-left: 1px solid var(--borda); padding-left: 42px; }
.porta:last-child { padding-right: 0; padding-left: 36px; }
.porta:last-child p { max-width: 270px; }
.porta h3 { font-weight: 340; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; }
.porta p { margin-top: 14px; font-size: 17px; line-height: 24px; color: var(--texto-suave); max-width: 250px; }

/* ---------- para sua equipe ---------- */
.equipe-caixa { min-height: 413px; padding-top: 50px; padding-bottom: 84px; }
.equipe-texto { position: relative; z-index: 1; max-width: 500px; }
.equipe .titulo { font-size: 52px; line-height: 1.15; margin-top: 24px; }
.equipe .titulo em { display: block; }
.equipe .paragrafo { margin-top: 38px; max-width: 455px; }
.cartoes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cartao {
  position: absolute; display: flex; flex-direction: column;
  background: var(--superficie); border-radius: 10px; box-shadow: var(--sombra-cartao);
  padding: 16px 14px 16px 22px; pointer-events: auto;
}
.cartao-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* as três vagas com a mesma largura: o cartão troca de vaga na fila viva sem pular de tamanho */
.cartao-1 { left: 640px; top: 65px; width: 276px; }
.cartao-2 { left: 690px; top: 172px; width: 276px; }
.cartao-3 { left: 640px; top: 275px; width: 276px; }
.cartao-id { font-family: var(--sem-serifa); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 16px; }
.selo { font-family: var(--sem-serifa); font-size: 12px; font-weight: 500; line-height: 1; padding: 6px 14px 7px; border-radius: 999px; }
.selo-alta { background: var(--alta-fundo); color: var(--alta-texto); }
.selo-normal { background: var(--normal-fundo); color: var(--normal-texto); }
.selo-critica { background: var(--critica-fundo); color: var(--critica-texto); }
.cartao-titulo { margin-top: 6px; font-size: 15px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-cliente, .cartao-tempo { font-family: var(--sem-serifa); font-size: 12px; line-height: 16px; color: var(--cinza); margin-top: 4px; white-space: nowrap; }
.cartao-tempo { padding-right: 6px; }

/* ---------- planos ---------- */
.planos .caixa { min-height: 508px; padding-top: 46px; padding-bottom: 33px; }
.planos .titulo { margin-top: 14px; }
.planos-lista { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 338px); gap: 23px; justify-content: center; margin-top: 29px; }
.plano {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  padding: 20px 36px 24px; display: flex; flex-direction: column;
}
.plano-nome { font-weight: 340; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.plano-preco { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; color: var(--cobre); line-height: 1; }
.plano-moeda { font-size: 34px; }
.plano-valor { font-size: 48px; }
.plano-periodo { font-size: 18px; color: var(--texto); margin-left: 2px; }
.plano-descricao { margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--separador); font-size: 18px; line-height: 25px; color: var(--texto-suave); padding-bottom: 16px; }
.plano-botao { margin-top: auto; width: 100%; height: 51px; }

/* ---------- chamada final ---------- */
.chamada { background: var(--primaria-faixa); color: var(--sobrecor); }
.chamada-caixa { min-height: 156px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 32px; padding-bottom: 32px; }
.chamada-titulo { position: relative; z-index: 1; font-weight: 340; font-size: 35px; line-height: 1.15; letter-spacing: -0.02em; }

/* ---------- rodapé ---------- */
.rodape { background: var(--fundo); }
.rodape-caixa { height: 100px; display: flex; align-items: center; justify-content: space-between; }
.marca-rodape img { height: 31px; }
.rodape-links { display: flex; gap: 14px; align-items: center; font-family: var(--sem-serifa); font-size: 14px; margin-left: auto; margin-right: 78px; }
.rodape-links a:hover { color: var(--cobre); }
.rodape-copia { font-family: var(--sem-serifa); font-size: 14px; }
.pausar-animacao {
  margin-right: 24px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--sem-serifa); font-size: 14px; color: var(--texto); text-decoration: underline; text-underline-offset: 3px;
}
.pausar-animacao:hover { color: var(--cobre-rotulo); }
@media (prefers-reduced-motion: reduce) { .pausar-animacao { display: none; } }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- telas menores que o desenho ---------- */
@media (max-width: 1023px) {
  :root { --margem: 20px; }
  .arte-faixa, .arte-portas, .arte-equipe, .arte-planos, .arte-clientes { display: none; }
  .hero { display: flex; flex-direction: column; }
  .arte-hero { position: relative; top: auto; left: auto; display: block; width: calc(100% - 2 * var(--margem)); max-width: 560px; height: auto; margin: 0 auto 40px; order: 1; }
  .arte .anel-hero { stroke-width: 3; }

  .topo-linha { height: 64px; grid-template-columns: auto 1fr; }
  /* celular: o lockup (214 px) encostava no botão Entrar (foto 19/10) — no topo fica só o símbolo; o rodapé mantém o lockup */
  .topo .marca img { height: 34px; display: none; }
  .topo .marca .simbolo-claro { display: block; }
  html[data-tema="escuro"] .topo .marca .marca-escura, html[data-tema="escuro"] .topo .marca .simbolo-claro { display: none; }
  html[data-tema="escuro"] .topo .marca .simbolo-escuro { display: block; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 64px;
    flex-direction: column; gap: 0; background: var(--fundo); padding: 8px 20px 16px;
    border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); box-shadow: var(--sombra-cartao);
  }
  .menu a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--separador); }
  .menu a:last-child { border-bottom: 0; }
  .menu-aberto .menu { display: flex; }
  .tema-botao { display: none; }
  .menu-tema { display: inline-flex; align-self: flex-start; margin-top: 14px; }
  .menu-botao {
    display: inline-flex; align-items: center; gap: 8px; height: var(--altura-botao-pequeno, 36px); padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--primaria); background: var(--superficie); color: var(--texto);
    font-family: var(--sem-serifa); font-size: 14px; cursor: pointer;
  }
  .menu-botao-traco { width: 14px; height: 1.5px; background: currentColor; box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor; }

  .hero-caixa { min-height: 0; padding-top: 48px; padding-bottom: 40px; }
  h1 { font-size: clamp(40px, 25.2px + 3.79vw, 64px); margin-top: 20px; }
  .hero-paragrafo { margin-top: 24px; }
  .hero-acoes { margin-top: 24px; }
  .botao { height: 48px; padding: 0 24px; font-size: 16px; }

  .faixa-escura .caixa { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .faixa-titulo { font-size: clamp(34px, 20.5px + 3.47vw, 56px); margin-top: 16px; }
  .titulo { font-size: clamp(34px, 24.2px + 2.52vw, 50px); }
  .equipe .titulo, .faixa-cobre .titulo { font-size: clamp(34px, 23px + 2.84vw, 52px); }

  .portas .caixa { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .portas-colunas { grid-template-columns: 1fr; margin-top: 28px; }
  .porta { padding: 0 0 22px; min-height: 0; max-width: 460px; }
  .porta + .porta { border-left: 0; border-top: 1px solid var(--borda); padding-left: 0; padding-top: 22px; }
  .porta p { max-width: none; }

  .equipe-caixa { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .cartoes { position: relative; inset: auto; display: flex; flex-direction: column; gap: 10px; margin: 40px auto 0; max-width: 360px; padding: 28px 0; }
  .cartoes::before {
    content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 66%; height: 100%;
    background: var(--primaria); border-radius: 50%;
  }
  .cartao { position: static; width: 82%; }
  .cartao-2 { margin-left: 18%; width: 82%; }

  .faixa-cobre .caixa { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .faixa-cobre .titulo, .equipe .titulo { margin-top: 16px; }

  .planos .caixa { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .planos-lista { grid-template-columns: minmax(0, 338px); margin-top: 24px; }
  .plano { padding: 20px 24px 24px; }
  .plano-descricao { min-height: 0; }
  .plano-botao { margin-top: 28px; }

  .chamada-caixa { min-height: 0; flex-direction: column; align-items: flex-start; padding-top: 48px; padding-bottom: 48px; gap: 24px; }
  .chamada-titulo { font-size: clamp(26px, 20.5px + 1.42vw, 35px); }

  .rodape-caixa { height: auto; padding-top: 28px; padding-bottom: 28px; flex-wrap: wrap; gap: 14px 24px; }
  .marca-rodape img { height: 28px; }
  .rodape-links { margin-left: 0; margin-right: 0; }
  .rodape-copia { margin-left: auto; }
}

/* quebras de linha equilibradas nos títulos (no celular "sabe" ficava sozinho — revisão no ar, 08/10) */
h1, h2, .titulo, .faixa-titulo, .chamada-titulo { text-wrap: balance; }

/* ---------- movimento ----------
   Entrada única das formas do hero (só o "de onde vem": o fim é a posição do desenho). O resto do
   movimento é do site.js, atrelado à rolagem. Com "reduzir movimento" no aparelho, nada se mexe. */
@media (prefers-reduced-motion: no-preference) {
  .entra { transform-box: fill-box; transform-origin: center; animation: 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .entra-disco { animation-name: entra-disco; }
  .entra-lua { animation-name: entra-lua; animation-delay: 120ms; }
  .entra-esfera { animation-name: entra-esfera; animation-delay: 420ms; animation-duration: 900ms; }
  .entra-anel .anel-hero { animation: entra-anel 1800ms 200ms cubic-bezier(0.3, 0.6, 0.2, 1) backwards; }
  .cartao { transition: box-shadow 160ms ease; will-change: transform; }

  /* movimento constante — lento, em três lugares só, e parado quando a seção sai da tela (.pausado, site.js) */
  .orbita { transform-box: fill-box; transform-origin: center; animation: orbitar 28s linear infinite; }
  .flutua { animation: flutuar 3.2s ease-in-out infinite alternate; }
  .sombra-flutua { transform-box: fill-box; transform-origin: center; animation: sombra-flutuar 3.2s ease-in-out infinite alternate; }
  .chamada .botao-cobre::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    animation: chamar 3.6s ease-out infinite; /* brilho que se espalha (um anel parado parecia foco) */
  }
  .pausado .orbita, .pausado .flutua, .pausado .sombra-flutua, .pausado .botao-cobre::after,
  .sem-animacao .orbita, .sem-animacao .flutua, .sem-animacao .sombra-flutua, .sem-animacao .botao-cobre::after { animation-play-state: paused; }
}
@keyframes entra-disco { from { opacity: 0; transform: scale(0.92); } }
@keyframes entra-lua { from { opacity: 0; transform: translateX(60px); } }
@keyframes entra-esfera { from { opacity: 0; transform: translateY(-50px); } }
@keyframes orbitar { to { transform: rotate(360deg); } }
@keyframes flutuar { to { transform: translateY(-7px); } }
@keyframes sombra-flutuar { to { transform: scale(0.86); opacity: 0.7; } }
@keyframes chamar { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cobre-no-escuro) 55%, transparent); } 60%, 100% { box-shadow: 0 0 0 16px transparent; } }
.satelite { fill: var(--primaria); stroke: var(--fundo); stroke-width: 3; }
@keyframes entra-anel { from { stroke-dasharray: 0 1000; } }
.cartao { transform: translateX(calc(var(--falta, 0) * 70px)); opacity: calc(1 - var(--falta, 0) * 0.5); }