/* ============================================================================
   TOPO e RODAPÉ — o CSS do componente único (M3).

   Vive ao lado do `nav.js` de propósito: quem adota o componente leva a marcação E o estilo dele,
   em vez de recopiar as duas coisas em cada página. As regras abaixo são as MESMAS já usadas nas
   páginas legais (`legal.css`), copiadas para cá para o componente não depender de nenhuma folha
   de estilo específica de página.

   Ordem de carregamento: esta folha entra no `<head>`, ANTES do `<style>` da página — assim a página
   que quiser ajustar algo (e as páginas antigas que ainda têm a regra própria) continua ganhando.
   Nada aqui inventa token novo: só usa as variáveis do Padrao que toda página já define.
   ========================================================================== */

/* ------------------------------- topo ------------------------------- */
.marca{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) 0 var(--sp-4);flex-wrap:wrap}
.marca-logo{width:33px;height:40px;display:block;flex:0 0 auto}
.marca-txt{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.1}
.eyebrow{font:600 var(--fs-13)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.marca-txt b{font-size:var(--fs-18);font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.marca-nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.marca-nav a{color:var(--mut);text-decoration:none;font-size:var(--fs-14);transition:color var(--t)}
.marca-nav a:hover{color:var(--acc)}

/* seletor de idioma = a MESMA pílula segmentada da landing e de /planos (ids iguais de propósito:
   o pintaIdioma() do i18n.js pinta os dois botões pelo id) */
.idioma{display:inline-flex;gap:2px;padding:2px;flex:0 0 auto;
  background:var(--card);border:1px solid var(--azul-linha);border-radius:var(--pill);box-shadow:var(--halo-suave)}
.idioma-op{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;
  border:0;background:transparent;color:var(--mut);border-radius:var(--pill);
  font:600 var(--fs-13)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;transition:background var(--t),color var(--t)}
.idioma-op:hover{color:var(--tx)}
.idioma-op .tick{display:none}
.idioma-op.on{background:var(--acc);color:var(--txt-escuro);box-shadow:var(--halo-verde)}
.idioma-op.on .tick{display:inline}

/* ------------------------------- rodapé ------------------------------- */
footer.rodape-legal{margin-top:var(--sp-8);border-top:1px solid var(--line);padding-top:var(--sp-5)}
/* O seletor acima só vale DENTRO do rodapé do componente. Motivo: páginas que adotaram apenas o
   TOPO (mas ainda têm rodapé próprio, como /planos) carregam esta folha — sem o escopo, a regra
   vazaria para o rodapé delas e mudaria espaçamento que ninguém pediu para mudar. */
footer.rodape-legal .rodape-links{display:flex;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-14)}
/* O seletor tem escopo de propósito: páginas que adotaram apenas o TOPO (e ainda têm rodapé
   próprio, como /planos) carregam esta folha — sem o escopo, esta regra vazaria para o rodapé
   delas e mudaria um espaçamento que ninguém pediu para mudar. */
.rodape-links a{color:var(--azul);text-decoration:none}
.rodape-links a:hover{text-decoration:underline}
/* o aviso do rodapé: é para o VISITANTE ler, não recado interno */
.rascunho{font-size:var(--fs-14);line-height:1.6;color:var(--mut);margin-top:var(--sp-4);
  border:1px dashed var(--line);border-radius:var(--r-2);padding:var(--sp-3) var(--sp-4);background:var(--card2)}
.rascunho b{color:var(--tx)}
.marca-rodape{border-top:1px solid var(--line);margin-top:var(--sp-5);padding-top:var(--sp-4);
  color:var(--mut);font-size:var(--fs-13);display:flex;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap}

@media (max-width:640px){
  /* no celular o topo quebra em duas linhas em vez de espremer os links */
  .marca{padding:var(--sp-4) 0 var(--sp-3)}
  .marca-txt b{font-size:var(--fs-16)}   /* veio das páginas: agora vive no componente */
  .idioma-op{padding:0 9px}              /* idem */
  .marca-nav{margin-left:0;width:100%;gap:var(--sp-3)}
}
