/* ==========================================================
   LAYOUT: largura do conteúdo, seções, assinatura, 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); }

/* ==========================================================
   ASSINATURA (cabeçalho, abertura e rodapé)
   Os desenhos são os <symbol> do começo do index.html (tools/otimizar-assinatura.py).
   ========================================================== */
.assinatura { display: inline-block; flex: none; text-decoration: none; color: var(--assinatura); line-height: 0; }
.assinatura svg { display: block; height: 100%; width: auto; overflow: visible; }
/* A assinatura segue a cor do texto da paleta (currentColor, por --assinatura); os pingos dos "i", --pingo (a própria
   tinta, ou o vermelho da paleta com ?pingos=1).
   Cada lugar leva a 404 (A: o "by" na linha do MENEZES; B, com ?by=base: o "by" na linha de base do Civitas) e a
   409 (classes v404, v404b e v409); fica a do data-assinatura e do data-by do <html> (sem parâmetros e sem
   JavaScript, a 404 A). A 404 é a do kit como ela é, em todos os lugares: a logo menor, proporcional ao Civitas e
   alinhada pela base dele (o sócio, 28/10, 15h03: a proporção vale mais que o mínimo de 110 px do manual).
   No computador, no topo, com 551 px (a logo com 93 px); encolhida e no rodapé, com 314 px (53 px). No celular, a
   peça cede o lugar do botão do menu: 314 px em 390 de tela (53 px), 220 px encolhida (37 px). */
:root[data-assinatura="409"] .assinatura .v404, :root[data-assinatura="409"] .assinatura .v404b,
:root:not([data-assinatura="409"]) .assinatura .v409, :root:not([data-by="base"]) .assinatura .v404b,
:root[data-by="base"]:not([data-assinatura="409"]) .assinatura .v404 { display: none !important; }
.assinatura { --pingo: currentColor; }
:root[data-pingos] .assinatura { --pingo: var(--praca); }
.assinatura .assinatura-curta { display: none; }
/* No cabeçalho do computador, as duas peças ficam uma sobre a outra, centradas na barra: no topo da página, a completa;
   depois de rolar (classe compacto, js/cabecalho.js), a compacta, para a Menezes não sumir. A completa encolhe e some enquanto a outra aparece, em 220 ms (troca direta com
   menos movimento, base.css). O link tem a largura da peça visível (as proporções vêm do medidas.json do kit). */
.assinatura-cabecalho { --alta: 105.2px; --proporcao: 5.2364; --encolhe: .57; --curta: 314px; --curta-alta: 60px; --celular-encolhida: 220px; position: relative; width: calc(var(--alta) * var(--proporcao)); height: var(--alta); padding: 0; transition: height .22s ease; }
:root[data-assinatura="409"] .assinatura-cabecalho { --alta: 86px; --proporcao: 6.8377; --encolhe: .94; --curta: 342px; --curta-alta: 81px; --celular-encolhida: 190px; }
@media (min-width: 801px) {
  .assinatura-cabecalho svg { position: absolute; left: 0; top: 50%; transform-origin: left center; transition: opacity .22s ease, transform .22s ease, visibility .22s; }
  .assinatura-cabecalho .assinatura-larga { height: var(--alta); transform: translateY(-50%); }
  .assinatura-cabecalho .assinatura-curta { display: block; width: var(--curta); height: auto; opacity: 0; visibility: hidden; transform: translateY(-50%); }
  .cabecalho.compacto .assinatura-cabecalho { width: var(--curta); height: var(--curta-alta); }
  .cabecalho.compacto .assinatura-larga { opacity: 0; visibility: hidden; transform: translateY(-50%) scale(var(--encolhe)); }
  .cabecalho.compacto .assinatura-curta { opacity: 1; visibility: visible; }
}
@media (max-width: 800px) {
  .assinatura .assinatura-larga { display: none; }
  .assinatura .assinatura-curta { display: block; }
  /* a peça cede o lugar do botão do menu (44 px), das margens (12 px) e do vão (8 px); encolhida, fica menor */
  .assinatura-cabecalho { width: min(314px, calc(100vw - 76px)); height: auto; padding: 0; transition: width .22s ease; }
  .cabecalho.compacto .assinatura-cabecalho { width: var(--celular-encolhida); }
  .assinatura-cabecalho svg { width: 100%; height: auto; }
}

/* ==========================================================
   CABEÇALHO
   Sobre a abertura, transparente, com um véu claro leve no alto; depois, o fundo da página. Ele já nasce
   transparente (a classe sobre-abertura está no HTML, para não piscar); sem JavaScript, fica sólido.
   No computador, depois de rolar um pouco, ele encolhe (classe compacto): a peça do celular no lugar da assinatura
   completa (a barra com 97 px na 409 e 64 px na 404). Quando o menu inteiro não cabe ao lado, ele abre pelo botão
   "Menu" (sem JavaScript, os links ficam numa linha embaixo): as larguras estão no bloco do menu, abaixo.
   No celular também: fixo no alto, com o botão do menu no canto de cima, à direita, e encolhe ao rolar (o sócio,
   28/10, 15h04: o botão embaixo, sob o do WhatsApp, não se via).
   ========================================================== */
.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); box-shadow: 0 1px 0 var(--linha); transition: background-color .4s, box-shadow .4s, color .4s; }
.js .cabecalho.sobre-abertura { background: transparent; box-shadow: none; }
/* Versão 2: a assinatura fica no cabeçalho também sobre a abertura (a abertura não tem mais a dela). */
.assinatura-cabecalho { box-sizing: content-box; }
.cabecalho::before { content: ""; position: absolute; inset: 0 0 -70px 0; background: linear-gradient(var(--veu-cabecalho), rgba(242, 242, 242, .6) 55%, var(--veu-cabecalho-fim)); pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; }
.js .cabecalho.sobre-abertura::before { opacity: 1; }
.cabecalho-linha { max-width: 1600px; display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); min-height: var(--altura-cabecalho); transition: min-height .22s ease; }
@media (min-width: 801px) {
  .cabecalho.compacto .cabecalho-linha { min-height: var(--altura-cabecalho-compacto); }
  /* Encolhido sobre a abertura, o véu fica cheio (90%) em toda a barra e só se desfaz abaixo dela: com o degradê
     inteiro numa barra baixa, o menu ficava abaixo do AA sobre as partes escuras da imagem. */
  .cabecalho.compacto::before { inset: 0 0 -56px 0; background: linear-gradient(var(--veu-cabecalho), var(--veu-cabecalho) var(--altura-cabecalho-compacto), var(--veu-cabecalho-fim)); }
}

.menu { display: flex; align-items: center; gap: 13px; font-size: 13px; font-weight: 500; line-height: 1.25; }
/* Os nomes completos das seções, em até duas linhas (o sócio, 27/10, vídeo 2): cada linha é um span que não quebra,
   então o nome nunca passa de duas linhas e o ponto em que o menu se recolhe é medido com ele assim */
.menu a:not(.botao) { padding: 8px 0; text-decoration: none; border-bottom: 1px solid transparent; }
.menu .linha { display: block; white-space: nowrap; }
.menu a:not(.botao):hover, .menu a:not(.botao)[aria-current="true"] { border-bottom-color: currentColor; }
.botao-menu { flex: none; min-height: 44px; padding: 0 20px; font-size: 13px; font-weight: 500; background: transparent; color: var(--texto); border-color: currentColor; }
.botao-menu:hover { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

.menu-botao { flex: none; display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; background: none; border: 0; color: var(--texto); font-size: 15px; font-weight: 500; cursor: pointer; }
.menu-botao-icone { position: relative; width: 20px; height: 2px; background: currentColor; transition: background-color .2s; }
.menu-botao-icone::before, .menu-botao-icone::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .25s; }
.menu-botao-icone::before { top: -6px; } .menu-botao-icone::after { top: 6px; }
.menu-botao[aria-expanded="true"] .menu-botao-icone { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao-icone::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao-icone::after { transform: translateY(-6px) rotate(-45deg); }

/* O menu inteiro (os nomes completos, em até duas linhas: 850 px) cabe ao lado da assinatura com as margens do
   cabeçalho em 40 px e uma folga de 8 px:
   - no topo da página, a partir de 1513 px com a 404 aberta (551 px) e de 1550 px com a 409 (588 px);
   - encolhido, com a compacta, a partir de 1276 px na 404 (314 px) e de 1304 px na 409 (342 px).
   Abaixo disso, ele recolhe no botão "Menu". Entre um e outro, o menu fica no botão no topo e aparece inteiro, com um
   esmaecer curto, quando o cabeçalho encolhe. A linha do cabeçalho vai até 1600 px. */
@media (min-width: 1240px) {
  .cabecalho-linha { padding-left: 40px; padding-right: 40px; }
}
@keyframes menu-entra { from { opacity: 0; } }
@media (max-width: 1275px) {
  .js .cabecalho .menu-botao { display: inline-flex; }
  .js .cabecalho .cabecalho-linha { gap: 8px; }
  .js .cabecalho .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--margem) 24px; background: var(--fundo); color: var(--texto); box-shadow: 0 1px 0 var(--linha), 0 18px 30px rgba(33, 31, 27, .1); font-size: 13px; }
  .js .cabecalho .menu:not(.aberto) { display: none; }
  .js .cabecalho .menu a:not(.botao) { max-width: none; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .js .cabecalho .menu .linha { display: inline; white-space: normal; }
  .js .cabecalho .menu .botao-menu { margin-top: 20px; align-self: flex-start; }
  html:not(.js) .cabecalho-linha { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .menu { flex-wrap: wrap; gap: 4px 18px; }
}
@media (min-width: 1276px) and (max-width: 1303px) {
  .js .cabecalho:not(.compacto) .menu-botao, :root.js[data-assinatura="409"] .cabecalho.compacto .menu-botao { display: inline-flex; }
  .js .cabecalho:not(.compacto) .cabecalho-linha, :root.js[data-assinatura="409"] .cabecalho.compacto .cabecalho-linha { gap: 8px; }
  .js .cabecalho:not(.compacto) .menu, :root.js[data-assinatura="409"] .cabecalho.compacto .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--margem) 24px; background: var(--fundo); color: var(--texto); box-shadow: 0 1px 0 var(--linha), 0 18px 30px rgba(33, 31, 27, .1); font-size: 13px; }
  .js .cabecalho:not(.compacto) .menu:not(.aberto), :root.js[data-assinatura="409"] .cabecalho.compacto .menu:not(.aberto) { display: none; }
  .js .cabecalho:not(.compacto) .menu a:not(.botao), :root.js[data-assinatura="409"] .cabecalho.compacto .menu a:not(.botao) { max-width: none; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .js .cabecalho:not(.compacto) .menu .linha, :root.js[data-assinatura="409"] .cabecalho.compacto .menu .linha { display: inline; white-space: normal; }
  .js .cabecalho:not(.compacto) .menu .botao-menu, :root.js[data-assinatura="409"] .cabecalho.compacto .menu .botao-menu { margin-top: 20px; align-self: flex-start; }
  :root.js:not([data-assinatura="409"]) .cabecalho.compacto .menu { animation: menu-entra .22s ease both; }
  html:not(.js) .cabecalho-linha { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .menu { flex-wrap: wrap; gap: 4px 18px; }
}
@media (min-width: 1304px) and (max-width: 1512px) {
  .js .cabecalho:not(.compacto) .menu-botao { display: inline-flex; }
  .js .cabecalho:not(.compacto) .cabecalho-linha { gap: 8px; }
  .js .cabecalho:not(.compacto) .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--margem) 24px; background: var(--fundo); color: var(--texto); box-shadow: 0 1px 0 var(--linha), 0 18px 30px rgba(33, 31, 27, .1); font-size: 13px; }
  .js .cabecalho:not(.compacto) .menu:not(.aberto) { display: none; }
  .js .cabecalho:not(.compacto) .menu a:not(.botao) { max-width: none; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .js .cabecalho:not(.compacto) .menu .linha { display: inline; white-space: normal; }
  .js .cabecalho:not(.compacto) .menu .botao-menu { margin-top: 20px; align-self: flex-start; }
  .js .cabecalho.compacto .menu { animation: menu-entra .22s ease both; }
  html:not(.js) .cabecalho-linha { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .menu { flex-wrap: wrap; gap: 4px 18px; }
}
@media (min-width: 1513px) and (max-width: 1549px) {
  :root.js[data-assinatura="409"] .cabecalho:not(.compacto) .menu-botao { display: inline-flex; }
  :root.js[data-assinatura="409"] .cabecalho:not(.compacto) .cabecalho-linha { gap: 8px; }
  :root.js[data-assinatura="409"] .cabecalho:not(.compacto) .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--margem) 24px; background: var(--fundo); color: var(--texto); box-shadow: 0 1px 0 var(--linha), 0 18px 30px rgba(33, 31, 27, .1); font-size: 13px; }
  :root.js[data-assinatura="409"] .cabecalho:not(.compacto) .menu:not(.aberto) { display: none; }
  :root.js[data-assinatura="409"] .cabecalho:not(.compacto) .menu a:not(.botao) { max-width: none; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  :root.js[data-assinatura="409"] .cabecalho:not(.compacto) .menu .linha { display: inline; white-space: normal; }
  :root.js[data-assinatura="409"] .cabecalho:not(.compacto) .menu .botao-menu { margin-top: 20px; align-self: flex-start; }
  :root.js[data-assinatura="409"] .cabecalho.compacto .menu { animation: menu-entra .22s ease both; }
  html:not(.js) .cabecalho-linha { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .menu { flex-wrap: wrap; gap: 4px 18px; }
}

/* O celular (até 800 px): o cabeçalho fixo no alto, sólido (a imagem começa abaixo dele), com a assinatura à esquerda e
   o botão do menu à direita, com 44 px; encolhe ao rolar (de 80 para 58 px na 404). A lista abre para baixo, a partir
   do cabeçalho, e rola se for mais alta que a tela. */
@media (max-width: 800px) {
  .js .cabecalho.sobre-abertura { background: var(--fundo); box-shadow: 0 1px 0 var(--linha); }
  .cabecalho::before { display: none; }
  .cabecalho-linha { justify-content: space-between; gap: 8px; padding: 10px 12px; min-height: var(--altura-cabecalho); }
  .cabecalho.compacto .cabecalho-linha { min-height: var(--altura-cabecalho-compacto); padding-top: 8px; padding-bottom: 8px; }
  .js .cabecalho .menu-botao { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .menu-botao-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .cabecalho .menu { max-height: calc(100vh - var(--altura-cabecalho)); max-height: calc(100svh - var(--altura-cabecalho)); overflow-y: auto; }
}

/* ==========================================================
   RODAPÉ
   ========================================================== */
.rodape { padding: var(--espaco-5) 0; background: var(--fundo); color: var(--texto); box-shadow: inset 0 1px 0 var(--linha); font-size: var(--texto-legenda); }
.rodape-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espaco-4); }
/* No rodapé, a compacta, com a Menezes ao lado (a logo com 112 px): 314 px na 404, 342 px na 409. Numa tela mais
   estreita que ela, ela avança sobre a margem, centrada, em vez de encolher. */
.assinatura-rodape { --largura: 314px; width: var(--largura); height: auto; padding: 4px 0; margin-inline: min(0px, calc((100% - var(--largura)) / 2)); }
:root[data-assinatura="409"] .assinatura-rodape { --largura: 342px; }
.assinatura-rodape svg { width: 100%; height: auto; }
.rodape-textos { text-align: right; color: var(--texto-suave); line-height: 1.7; }
.rodape-textos a { display: inline-block; padding: 12px 0; text-decoration: none; }
.rodape-textos a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .rodape { padding-bottom: calc(var(--espaco-5) + 72px); }  /* o lugar do botão do WhatsApp, que flutua no canto */
}
@media (max-width: 640px) {
  .rodape-textos { text-align: left; }
}

/* ==========================================================
   O BOTÃO DO WHATSAPP (o sócio, 28/10): redondo, fixo no canto de baixo, à direita, em todas as larguras, no verde
   da marca, com o ícone branco e um anel branco (que o separa de foto e de fundo escuro); sozinho, no celular também.
   Sem número em js/dados.js, não aparece.
   ========================================================== */
.whatsapp { position: fixed; z-index: 30; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 0 0 2px #fff, 0 6px 20px rgba(0, 0, 0, .28); transition: transform .2s; }
.whatsapp[hidden] { display: none; }
.whatsapp:hover { transform: scale(1.06); }
.whatsapp svg { width: 30px; height: 30px; fill: currentColor; }
@media (min-width: 801px) {
  .rodape { padding-bottom: calc(var(--espaco-5) + 64px); }
}
@media (max-width: 800px) {
  .whatsapp { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
  .whatsapp svg { width: 26px; height: 26px; }
}