/* ==========================================================
   LAYOUT: largura do conteúdo, seções, cabeçalho e rodapé
   ========================================================== */
.container { width: 100%; max-width: var(--largura-maxima); margin: 0 auto; padding: 0 var(--margem); }
.secao { position: relative; padding: var(--espaco-secao) 0; background: var(--fundo); color: var(--texto); }
.secao + .secao:not(.tema-escuro) { border-top: 1px solid var(--linha); }

/* Quebra de página entre seções */
.secao + .secao { border-top: 0; }
.secao:not(.abertura) { box-shadow: inset 0 1px 0 var(--linha); }

/* ==========================================================
   CABEÇALHO
   ========================================================== */
.cabecalho { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: var(--fundo); color: var(--texto); border-bottom: 1px solid var(--linha); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.cabecalho .logo { transition: opacity .4s, visibility .4s; }
/* Sobre a imagem de abertura: cabeçalho transparente, sem logotipo */
.cabecalho.sobre-intro { --texto: var(--tinta); background: transparent; border-bottom-color: transparent; }
.cabecalho::before { content: ""; position: absolute; inset: 0 0 -70px 0; background: linear-gradient(var(--veu-cabecalho), var(--veu-cabecalho-fim)); pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; }
.cabecalho.sobre-intro::before { opacity: 1; }

.cabecalho .container { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); min-height: var(--altura-cabecalho); }
.logo { display: block; color: var(--texto); }
/* A assinatura horizontal é larga (cerca de 10 por 1): a altura fica menor que a do logotipo antigo. */
.logo svg { display: block; height: 28px; width: auto; }
.menu { display: flex; gap: 32px; font-size: var(--texto-apoio); font-weight: 500; }
.menu a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="true"] { border-bottom-color: var(--acento); outline: none; }

/* ==========================================================
   RODAPÉ
   ========================================================== */
.rodape { padding: var(--espaco-5) 0; border-top: 1px solid var(--linha); font-size: var(--texto-apoio); background: var(--fundo); color: var(--texto); }
.rodape .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espaco-4); }
.rodape .logo svg { height: 22px; }
.rodape-textos { text-align: right; }

@media (max-width: 1100px) {
  .menu { gap: 20px; font-size: 15px; }
}
@media (max-width: 900px) {
  .cabecalho .container { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding-top: 12px; padding-bottom: 10px; }
  .logo svg { height: 24px; }
  .menu { gap: 24px; overflow-x: auto; max-width: 100%; font-size: var(--texto-apoio); }
}
@media (max-width: 640px) {
  .rodape-textos { text-align: left; }
}