/* A identidade AQUA usa pesos distintos de Montserrat no mesmo componente.
   O arquivo variável local cobre Regular, Medium, Semibold, Bold e ExtraBold
   sem depender de um carregamento externo em runtime.

   A faixa declarada aqui é a faixa REAL do eixo `wght` do arquivo
   (fvar: 100..900, instância padrão 100, OS/2.usWeightClass 100). Declarar
   uma faixa mais estreita que a do arquivo (era `400 800`) faz o navegador
   fazer clamp e, em qualquer caminho que não aplique o eixo variável, o
   texto cai na instância padrão — que neste arquivo é Thin. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-variable.woff2") format("woff2");
}

/* Alias de peso FIXO, consumido por --primary-font-bold/--primary-font-wide-bold
   logo abaixo. Não remover sem entender o porquê:

   ~200 regras do tema brk pedem `font-family: var(--primary-font-bold)` SEM
   declarar `font-weight` — o negrito vinha do próprio arquivo carregado sob
   aquele nome (RocGrotesk Bold no brk e, antes desta entrega, o @import que
   registrava SÓ o peso 700 do Montserrat). Os consumidores são em maioria
   `p`, `a`, `span`, `li` e itens de menu, cujo peso herdado é 400.

   Ao registrar a face variável 100..900 sob "Montserrat", essas regras
   passariam a renderizar em 400 e o site inteiro perderia o negrito — muito
   além da LP e da Home. Declarar o MESMO arquivo sob outro nome com
   `font-weight` de valor único faz o navegador fixar o eixo wght em 700 para
   qualquer peso pedido (a faixa do descritor é [700,700] e o peso usado é
   limitado a ela antes de ir para o eixo), reproduzindo o comportamento
   anterior. Mesma URL, sem download adicional. */
@font-face {
    font-family: "Montserrat Bold Fixo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin-variable.woff2") format("woff2");
}

/* --white-cian-color (#9aede4 no brk, ver variables.scss:9/39) é um ciano
   fixo — diferente da "Cor secundária" do Theme Options (--secondary-color)
   e também diferente da "Cor de acento ciano" (--cian-color), que já são
   configuráveis. Redefine só essa var pra herdar a cor secundária escolhida
   no CMS, na AQUA. ATENÇÃO: essa var só é lida de fato em
   background.scss:26 (`background-color: var(--white-cian-color)`) — nos
   outros 7 lugares que usam essa mesma cor (footer + 6 páginas, ver regra
   logo abaixo) o SCSS usa a variável Sass `$white-cyan-color` diretamente
   (`background: $white-cyan-color`), que vira um HEX FIXO no CSS compilado,
   sem nenhuma var() em tempo de execução — por isso essa var sozinha aqui
   não muda o footer nem essas páginas; é preciso sobrescrever cada seletor
   compilado individualmente (feito abaixo). */
:root {
    --primary-font-bold: "Montserrat Bold Fixo";
    --primary-font-wide-bold: "Montserrat Bold Fixo";
    --white-cian-color: var(--secondary-color);
    /* O PDF traz dois azuis para os mesmos elementos: a página de anotações
       escreve "Cor correta: #203A6D" e a de especificações lista #2D3D6B.
       Confirmado com o cliente em 2026-09-11: vale #203A6D. Como toda a
       entrega consome esta variável única, a troca aqui já alcança o texto e
       o botão da LP, o retângulo do botão da Agência Virtual, o título e o
       subtítulo dos serviços, os círculos dos ícones, os títulos dos cards e
       o texto no hover do botão de atendimento. */
    /* Paleta oficial AQUA: navy, slate, azul-claro, laranja e creme.
       A tipografia padrão da marca é Montserrat. */
    --aqua-navy: #203a6d;
    --aqua-slate: #6b8590;
    --aqua-light-blue: #d2dbe4;
    --aqua-orange: #c85b28;
    --aqua-cream: #f1e8c4;
    --aqua-card-hover: var(--aqua-light-blue);
    --aqua-light-gray: var(--aqua-light-blue);
    --aqua-off-white: #f2f2f2;
}

/* Textos do site institucional usam --dark-blue-color, que é alias de
   --secondary-color (`branding-head.blade.php`). Com a correção do bug de
   validação de cor (rgb()/hex), a cor secundária de verdade da AQUA (um
   azul médio) passou a valer, e como ~317 lugares no CSS do brk usam essa
   variável pra COR DE TEXTO (títulos, parágrafos, labels), todo o texto do
   site ficou azul em vez de preto.

   Fix: força --dark-blue-color pra preto globalmente (resolve o texto em
   todo lugar, sem precisar listar cada seletor de texto), e restaura
   var(--secondary-color) só nos poucos lugares do bundle institucional que
   usam essa mesma variável pra FUNDO/BORDA decorativa (não texto), que
   devem continuar acompanhando a marca: o box "Precisa de Atendimento"
   mobile, a variante de banner "dark-blue-color", o ícone hamburguer do
   menu mobile e o pequeno divisor do rodapé. O bundle separado
   main-imobiliaria.scss (área de fatura/Minha Conta, layout totalmente
   diferente) tem dezenas de outros usos de fundo/borda com essa mesma
   variável — fora do escopo desta correção, não foi tocado.

   IMPORTANTE — precisa de !important aqui: o `<link>` do aqua-overrides.css
   é emitido em `Theme::header()`, ANTES do `<style>` inline de
   branding-head.blade.php (incluído logo depois no master.blade.php) que
   redeclara `--dark-blue-color: var(--secondary-color)`. Sem !important,
   essa declaração inline posterior vence por ordem de documento (mesma
   especificidade, nenhum dos dois tinha !important) e desfazia esta
   correção silenciosamente — foi exatamente isso que aconteceu na primeira
   tentativa (texto do footer saiu ilegível, mesma cor do fundo). */
:root {
    --dark-blue-color: #000000 !important;
}

.background-dark-blue,
.box-default-header .header.dark-blue-color,
.attendance-mobile,
.divider {
    --dark-blue-color: var(--secondary-color) !important;
}

nav.navbar .nav-collapse-toggle .first-bar,
nav.navbar .nav-collapse-toggle .second-bar {
    border-bottom-color: var(--secondary-color) !important;
}

/* Os 7 lugares que compilam $white-cyan-color como hex fixo (#9aede4) em vez
   de usar a CSS var (ver explicação acima) — footer (.baseboard), Quem Somos
   (.background-composicao-societaria) e 5 boxes de página (nossa-atuação,
   home, conteúdo, compliance, brk inova). `.service-box` é reusado em 3
   dessas páginas com o mesmo valor, então um seletor só cobre as três. Mesma
   cor secundária do CMS em todos, só na AQUA. Footer e Quem Somos saíram
   deste grupo em 2026-09-21 (ver regra logo abaixo) por passarem a usar um
   tingimento translúcido em vez do sólido aqui. */
.nossa-operacao-box,
.service-box,
.attitude-image {
    background-color: var(--secondary-color) !important;
}

/* Rodapé ("Canais de atendimento") e Quem Somos ("Composição societária"):
   pedido de design 2026-09-21 — o bloco vinha com fundo sólido opaco
   (var(--secondary-color) cheio, herdado da regra acima), destoando do
   resto do site, que usa superfícies translúcidas. Troca para um tingimento
   translúcido real (color-mix com `transparent`, não um hex sólido mais
   claro) da própria cor secundária da marca: mantém a conexão com a
   paleta do site e deixa a superfície visivelmente mais transparente.
   `color-mix()`/`:has()` já são usados em outras regras deste arquivo, sem
   necessidade de fallback para os navegadores suportados pelo projeto. */
.footer .baseboard,
.background-composicao-societaria {
    background-color: color-mix(in srgb, var(--secondary-color) 12%, transparent) !important;
}

/* Quem Somos ("Composição societária"): no mobile o título ainda herda o
   `width: 50%` do brk.scss (pensado só para a coluna estreita do desktop,
   onde já existe um override análogo abaixo em @media (min-width: 992px)).
   Numa viewport de ~390px isso faz "Composição societária" quebrar de forma
   que só a segunda palavra fica visível na primeira dobra — corrige
   liberando a largura total abaixo do breakpoint desktop. */
@media (max-width: 991.98px) {
    .quem-somos .box-composicao-societaria .content h4 {
        width: 100%;
        max-width: none;
    }
}

/* ==========================================================================
   AQUA white-label — overrides do tema "aqua" (NAO tocam o tema "brk")
   ==========================================================================

   Decisao (2026-07-21): o footer usa o MESMO logo do header (branding.logoUrl =
   theme_option('logo') = rebranding/logo-aqua-azul.png). O antigo swap para uma
   versao branca (logo-aqua-branca.png) foi removido a pedido. Se futuramente o
   footer precisar de uma versao clara para o fundo escuro (--dark-blue-color),
   reintroduzir aqui:

       .footer img.footer-logo { content: url("/storage/rebranding/<versao-branca>.png"); }
*/

/* Logo compartilhada header/footer (branding.logoUrl = theme_option('logo')):
   a logo cheia (AQUA + PERNAMBUCO + BRK + acciona) tem proporção ~2,1:1 —
   bem mais "alta" que só o wordmark AQUA sozinho. Nos 27px originais do
   header (`height="27"` fixo no <img> do DefaultHeader.vue), BRK/acciona
   ficariam com uns 5px de altura, ilegíveis — por isso o header sobe pra
   48px ("1x") aqui, decisão consciente (HITL) pra manter as marcas
   legíveis, e o footer some pro dobro exato, 96px ("2x"). Os dois com
   `width: auto` pra nunca distorcer a proporção real do arquivo, não
   importa qual seja. Como CSS externo vence atributo HTML, sobrescreve
   aqui só a altura/largura do <img>, sem tocar no Vue/JS compartilhado. */
nav.navbar .navbar-brand img {
    width: auto;
    height: 48px;
}

/* Submenu do header ("Fale Conosco" > Atendimento/Contato): o item destacado
   saía no azul PADRAO do Bootstrap (#0d6efd), nao no azul da marca. A origem
   e o `style.css` compilado do tema, que nunca redefine as vars do dropdown e
   mantem os defaults do Bootstrap 5 (`--bs-dropdown-link-active-bg: #0d6efd`,
   usado por `.dropdown-item.active` e `.dropdown-item:active`); o
   `navbar.scss` do brk so mexe em espacamento dos itens, nunca na cor de
   fundo. Nao ha ajuste equivalente no CMS: as Theme Options alimentam
   `--primary-color`/`--secondary-color`, que o Bootstrap nao consulta.

   Corrige redefinindo as proprias vars no `.dropdown-menu` (em vez de
   sobrescrever cada seletor `.dropdown-item`), o que recolore de uma vez
   todos os estados que usam o azul — inclusive o `:active` do clique. Vale so
   para o tema aqua, porque este arquivo so e enfileirado no config.php do
   aqua; o brk continua com o azul dele. `!important` porque custom properties
   tambem cascateiam e o style.css as declara no mesmo seletor. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--aqua-navy) !important;
    --bs-dropdown-link-active-color: var(--aqua-off-white) !important;
}

/* Footer: logo em resolução melhor (2x do header, ver regra acima). O
   "borrado" de antes vinha do footer.scss forçar width:95px/height:46px
   numa proporção que não batia com a do arquivo, distorcendo a imagem.
   Fix: só define height e deixa width:auto, o navegador preserva a
   proporção nativa sem distorcer (funciona com qualquer arquivo).

   Já tentamos "colar" essa logo do lado do texto da .link-row via CSS Grid
   (reposicionando a row da logo pro mesmo grid-row), mas os gutters reais
   do Bootstrap não bateram com a conta teórica (2/12 de coluna) e a logo
   ficou sobrepondo o texto "Serviços para você"/"AQUA Pernambuco" — bug
   visual confirmado ao vivo. Reverte pro empilhamento normal (a logo na
   sua própria row, como já era por padrão no Footer.vue) — garante que
   nunca sobrepõe nada e já é responsivo em qualquer largura de tela, sem
   depender de nenhuma conta de grid. */
.footer .d-none.d-lg-flex .footer-links img.footer-logo {
    width: auto;
    height: 96px;
    object-fit: contain;
}

/* Trabalhe Conosco (/trabalhe-conosco): o player de vídeo do topo (Content.vue)
   é renderizado sem checar se há um vídeo configurado (box_trabalhe_conosco_video
   está NULL). O fix correto (v-if no componente Vue) já foi feito no código, mas
   depende de rebuild/deploy do JS do tema, que a aqua não tem hoje. Esconde a caixa
   vazia via CSS puro (sem build) até o deploy acontecer. Remover esta regra quando
   o JS compilado com o v-if estiver no ar. */
.video-box:has(video:not([src])),
.video-box:has(video[src=""]) {
    display: none;
}

/* Trabalhe Conosco (/trabalhe-conosco): remove as seções "Liderança na AQUA
   Pernambuco", "Ciclo de Desenvolvimento", "Atração e desenvolvimento de
   talentos", "Nossos Programas" (box + texto + carrossel de Estágio e Trainee)
   e "Cultura e Bem-estar" (com carrossel), só na AQUA. Nenhum desses blocos em
   WorkWithUs.vue tem v-if próprio (são props required, sem checagem de vazio),
   então omitir a prop no blade quebraria o render com "Cannot read properties
   of undefined" — por isso a mesma estratégia do vídeo acima: esconder via CSS,
   escopado em .work-with-us pra não vazar pra outras páginas que reusam as
   mesmas classes/componentes (ex.: Talents.vue reusa .services-home-page-pkg-0
   da Home). Os links do menu de âncoras para essas seções já são removidos à
   parte, no override platform/themes/aqua/views/work-with-us.blade.php. */
.work-with-us .row:has(> .col-12 > .box-image-right),
.work-with-us .development-cycle,
.work-with-us .services-home-page-pkg-0,
.work-with-us .row:has(.programs-work),
.work-with-us .row:has(.trainings.text-center),
.work-with-us .trainings-cards,
.work-with-us .culture {
    display: none;
}

/* Quem Somos (/quem-somos): remove o box "Nosso Futuro" ("Coragem para mudar
   o futuro"), só na AQUA. Diferente dos outros boxes da página, esse não tem
   v-if em QuemSomos.vue (b-row incondicional), então omitir a prop no blade
   quebraria o render. O wrapper tem id fixo (NossoFuturoQuemSomos.vue:2,
   <div class="box-nosso-futuro" id="nosso-futuro">), então esconde via CSS
   puro, mesma estratégia já usada acima pro vídeo vazio e pro Trabalhe
   Conosco. */
#nosso-futuro {
    display: none;
}

/* Quem Somos (/quem-somos): renomeia a aba "No Brasil" da seção Nossos
   Números para "Em Pernambuco", só na AQUA. O texto é uma string fixa
   ('No Brasil') no componente compartilhado NossosNumerosQuemSomos.vue, sem
   nenhum campo de CMS por trás — mudar no JS exigiria rebuild em todos os
   temas. Como o texto é nó de texto direto dentro do <li> (sem wrapper),
   usa o truque de zerar o font-size do texto real e injetar o texto novo
   via ::before, preservando font-size/font-weight originais da aba
   (tabs.scss). A aba "No Brasil" é sempre a ÚLTIMA das options em
   NossosNumerosQuemSomos.vue (é empurrada depois da aba da cidade quando
   ela existe), então :last-child é estável com ou sem cidade selecionada.
   Escopado em #nossos-numeros pra não afetar outros usos do Tabs.vue
   genérico no site. */
#nossos-numeros .tabs-brk li.tab-option:last-child {
    font-size: 0;
}

#nossos-numeros .tabs-brk li.tab-option:last-child::before {
    content: "Em Pernambuco";
    font-size: 20px;
    line-height: 24px;
}

/* Cabeçalho: renomeia "Atuação Nacional" para "Pernambuco" no título do
   modal "escolha uma cidade" (ModalSelectCity.vue > SelectSearch.vue), só na
   AQUA. É texto fixo (`title="Atuação Nacional"`) no template compartilhado
   de SelectSearch.vue, sem campo de CMS por trás — mudar no JS exigiria
   rebuild em todos os temas. O MESMO componente ModalSelectCity é reusado em
   várias páginas (Quem Somos, Conteúdos, BRK Inova, Fale Conosco), cada uma
   com sua própria instância sem esse texto customizável por prop — por isso
   o fix é escopado só em `#city-modal`, o id exclusivo da instância do
   cabeçalho (`DefaultHeader.vue:3`, `modal-id="city-modal"`); as outras
   páginas não passam esse id e continuam com "Atuação Nacional". Mesmo
   truque de zerar o texto real e injetar via ::before já usado acima —
   aqui sem precisar fixar font-size, porque só o <span> filho é zerado e o
   ::before fica no elemento pai (.list-title), que preserva o font-size
   herdado normalmente. */
#city-modal .list-title span {
    font-size: 0;
}

#city-modal .list-title::before {
    content: "Pernambuco";
}

/* Cabeçalho: botão "Agência Virtual" (ao lado da lupa de busca, e também no
   menu mobile) passa a usar a cor primária do CMS, só na AQUA. O componente
   usa `color="button-background-blue"` (DefaultHeader.vue), que vira a
   classe `.btn-button-background-blue` do Bootstrap — essa cor é fixa em
   $theme-colors (bootstrap.scss), decisão intencional do projeto pra manter
   as utilidades .bg-/.text-bg-button-background-* estáticas (Bootstrap exige
   hex literal ali, não aceita var(--…)), então não é uma CSS var em runtime.
   Como o botão já tem uma classe própria (`button-agencia-virtual`, herdada
   via atributo class no componente Vue) igual nas duas instâncias (desktop e
   mobile), escopa a troca só nele, sem afetar outros botões que usem a mesma
   cor "button-background-blue" em outras partes do site. O :hover/:focus só
   escurece a cor via filter (sem precisar saber o valor exato de
   --primary-color em SCSS). Atenção: a cor do TEXTO do botão continua fixa
   (branca, calculada pelo Bootstrap a partir do hex original) — se a cor
   primária escolhida no CMS for muito clara, o contraste pode ficar ruim;
   isso não é ajustável só com CSS sem saber o valor da cor em tempo de build. */
.button-agencia-virtual.btn-button-background-blue {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.button-agencia-virtual.btn-button-background-blue:hover,
.button-agencia-virtual.btn-button-background-blue:focus,
.button-agencia-virtual.btn-button-background-blue:active {
    filter: brightness(0.9);
}

/* Nossa Atuação (/nossa-atuacao): esconde a combo "Selecione uma cidade" da
   seção "Onde Estamos", só na AQUA. Em NossaAtuacao.vue, o <map-box> nunca
   recebe a prop `button` (só description/map/items), e MapBox.vue mostra a
   combo (SelectSearch) sempre que `button` está ausente (`v-if="!button"`)
   — ou seja, não é algo que fique vazio por falta de configuração no CMS, é
   estrutural: essa página sempre mostra a combo, nunca um botão, então não
   dá pra "desligar" preenchendo campo nenhum no admin. Esconde via CSS
   usando o id fixo do box (`anchorId: 'where-we-are'`, em
   NossaAtuacao.php::getBoxOndeEstamos()) — mantém a descrição e a imagem do
   mapa, remove só a combo. Esse id é exclusivo dessa seção (Trabalhe
   Conosco usa outro anchor, 'map-box', para o mapa dele), então não afeta
   a mesma combo em outras páginas. */
#where-we-are .select-box {
    display: none;
}

/* Widget "Precisa de Atendimento" (rodapé, todas as páginas): botão "Agência
   Virtual" passa a usar a cor secundária do CMS, só na AQUA. Igual ao caso
   do botão de mesmo nome no cabeçalho: o botão usa uma variante de cor fixa
   do Bootstrap (`button-background-cyan`, #42eedc — uma das opções estáticas
   escolhidas no admin pra esse Button, não é `--secondary-color`). Escopa
   pelas classes do próprio widget (`.attendance`/`.attendance-mobile`,
   Footer.vue) pra não afetar outros botões que porventura usem a mesma cor
   "cyan" em outras partes do site. Diferente do botão do
   cabeçalho: como o cyan original (#42eedc) é uma cor CLARA, o Bootstrap
   calculou texto ESCURO pra esse variant — e como a cor secundária das
   marcas costuma ser escura/saturada (ex.: atual da AQUA é um azul vívido),
   texto escuro em cima ficaria ilegível. Força o texto pra branco também,
   assumindo que a cor secundária seguirá esse padrão mais escuro; se algum
   dia a marca configurar uma cor secundária clara, essa parte precisaria
   ser revista. */
.attendance .btn-button-background-cyan,
.attendance-mobile .btn-button-background-cyan {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #ffffff !important;
}

.attendance .btn-button-background-cyan:hover,
.attendance .btn-button-background-cyan:focus,
.attendance .btn-button-background-cyan:active,
.attendance-mobile .btn-button-background-cyan:hover,
.attendance-mobile .btn-button-background-cyan:focus,
.attendance-mobile .btn-button-background-cyan:active {
    filter: brightness(0.9);
}

/* Cabeçalhos internos de /contato, /imprensa e /nossa-atuacao: fundo passa
   a usar a cor secundária do CMS, só na AQUA. Nenhum dos três já usava essa
   variável — .header-contato/.header-imprensa usam --white-green-color (um
   verde claro FIXO, #ceff78 em variables.scss, sem nenhum campo no Theme
   Options por trás) e o header de Nossa Atuação usa color="cian-color"
   (NossaAtuacao.vue), que puxa --cian-color — um campo do CMS de verdade,
   mas independente da "Cor secundária" ("Cor de acento ciano").

   Como o texto (h2, breadcrumb) desses três cabeçalhos usa
   --dark-blue-color (forçado pra preto no fix anterior desta branch), e a
   cor secundária tende a ser escura/saturada, ficaria preto-em-cima-de-
   escuro, ilegível — força esse texto pra branco só nesses três contextos
   específicos (escopado por classe/seletor do próprio cabeçalho), sem
   afetar o preto em nenhuma outra página. */
/* CORREÇÃO (2026-09-08): `.header-imprensa` nesta lista é CSS MORTO e nunca teve
   efeito. O seletor existe em pages/imprensa.scss:2, mas o componente que o usaria
   (HeaderImprensa.vue) está apenas IMPORTADO em Imprensa.vue:25 e não é usado no
   template — a página monta o header pelo `header-component` compartilhado
   (Imprensa.vue:4) passando `color="white-green-color"`, que em Header.vue:3 vira
   `<div :class="['header', color]">` dentro de `.box-default-header`. Ou seja, o
   header de /imprensa é `.box-default-header .header.white-green-color`
   (header.scss:28), e é ele que precisa entrar aqui. Mantemos `.header-imprensa`
   por segurança, caso o componente volte a ser usado. */
.header-contato,
.header-imprensa,
.box-default-header .header.cian-color,
.box-default-header .header.white-green-color {
    background-color: var(--secondary-color) !important;
}

.header-contato h2,
.header-imprensa h2,
.box-default-header .header.cian-color h2,
.box-default-header .header.white-green-color h2,
.header-contato span.breadcrumb-brk a,
.header-contato span.breadcrumb-brk svg,
.header-imprensa span.breadcrumb-brk a,
.header-imprensa span.breadcrumb-brk svg,
.box-default-header .header.cian-color span.breadcrumb-brk a,
.box-default-header .header.cian-color span.breadcrumb-brk svg,
.box-default-header .header.white-green-color span.breadcrumb-brk a,
.box-default-header .header.white-green-color span.breadcrumb-brk svg {
    color: #ffffff !important;
}

/* Compliance (/compliance): remove a seção "Compromissos de Integridade"
   (box Reconhecimento — texto + cards de Selo Pró-Ética, ISO 37.001 e
   Sustainalytics), só na AQUA. Em Compliance.vue a seção tem v-if, mas o
   teste é isNotEmpty(firstSlider) sobre o OBJETO, que o model sempre monta
   com as chaves description/cards — nunca fica vazio, então esvaziar o
   campo no admin não oculta o bloco. O wrapper tem id fixo
   (Compliance.vue:49, <b-col id="reconhecimento">), então esconde via CSS
   puro, mesma estratégia já usada acima pro vídeo vazio e pro Nosso Futuro.
   O link "reconhecimento" do menu de âncoras sai à parte, esvaziando o campo
   "Descrição do box" na aba Reconhecimento do admin — getSummary() em
   Compliance.php:329 só inclui a âncora quando esse campo tem conteúdo. */
#reconhecimento {
    display: none;
}

/* Compliance (/compliance): remove a seção "Transparência" — o texto de
   abertura e o box "Contratos com a administração pública" (seletor de estado
   + fichas dos contratos) —, só na AQUA. Os dois vivem no mesmo wrapper
   (Compliance.vue:67, <b-col id="transparencia">), então uma regra cobre os
   dois. Mesma razão do #reconhecimento pra ser CSS e não admin: o v-if testa
   isNotEmpty(transparency) sobre o OBJETO, que o model sempre monta com
   description/select_description/items. Pior aqui: getTransparencia()
   (Compliance.php:229) faz usort() e $states[$item->state] direto no
   json_decode, então esvaziar o JSON no admin arrisca estourar o render.
   O link "transparência" do menu de âncoras sai à parte, esvaziando o campo
   de descrição na aba Transparência do admin (getSummary(), Compliance.php:345). */
#transparencia {
    display: none;
}

/* Compliance (/compliance): remove a seção "Associações" — texto de abertura
   e o carrossel de instituições (Instituto Ethos, Pacto Empresarial, Pacto
   Global) —, só na AQUA. Wrapper com id fixo (Compliance.vue:57,
   <b-col id="associacoes">). Aqui o dado vem da relação morph `sliders`
   (getSlidersJson(), Compliance.php:267), não de um campo de texto simples,
   e o card usa o mesmo CardSlider que quebra com lista vazia — por isso CSS
   em vez de apagar no admin. O link "associações" do menu de âncoras sai à
   parte, esvaziando "Descrição dos sliders" (getSummary(), Compliance.php:337). */
#associacoes {
    display: none;
}

/* Compliance (/compliance): remove o bloco em inglês "Click below to read our
   normative instruments", só na AQUA. Esse título NÃO tem campo no admin — é
   string fixa no model (Compliance.php:141), então não há como esvaziar pelo
   CMS. Diferente do bloco PT, esse <normative> não recebe id nem withDesc
   (compliance.blade.php), então é identificado por duas condições somadas:
   não é o #principais-instrumentos (que deve continuar visível) E contém
   .normative-simplified, marca do branch v-else de Normative.vue. Exigir as
   duas evita esconder o bloco PT por engano caso o id deixe de cair na raiz. */
.normative + .normative {
    display: none;
}

.conteudo .row:has(#blog),
.conteudo .row:has(#consumo-consciente),
.conteudo .row:has(#brk-explica) {
    display: none !important;
}

.d-none.d-lg-flex .footer-links > div:nth-child(2) > div:nth-child(3),
.d-none.d-lg-flex .footer-links > .link-row > div:last-child {
    display: none;
}

.d-flex.d-lg-none .footer-links > div > div:has(> .list-footer.orange-color),
.d-flex.d-lg-none .footer-links > div > div:has(+ div > .list-footer.orange-color) {
    display: none;
}

/* Nossa Atuação: o material final substitui o verde legado do tema pelo
   azul-claro da AQUA. */
.nossa-atuacao .white-green-color {
    background-color: var(--aqua-light-blue) !important;
}

/* Imprensa (/imprensa): reorganiza o bloco "Atendimento à Imprensa" para o layout
   pedido pela cliente — COLUNA ESQUERDA com título, texto do jornalista e o
   contato institucional (e-mail da imprensa); COLUNA DIREITA com os dois contatos
   pessoais empilhados.

   O DOM de BoxAssessoriaImprensa.vue é rígido e tem DUAS .row irmãs:
       .row #1  ->  [col: h4 título]        [col: p parágrafo]
       .row #2  ->  [col: contato 1] [col: contato 2] [col: contato 3] …
   Cada coluna é `col-md-6 col-12`, então o parágrafo cai à DIREITA e os contatos
   alternam esquerda/direita 2 em 2. Não existe ordem de contatos no CMS que produza
   o layout pedido (o parágrafo precisa descer para a esquerda e os dois contatos
   pessoais precisam ficar juntos na direita) — é reposicionamento, não dado.

   Por que CSS e não Vue: o tema aqua NÃO tem build de JS hoje (config.php aponta os
   assets para public/themes/aqua/ e todo o Vue vem compilado do brk). Um override do
   componente exigiria montar um pipeline de build só para o aqua, e editar o
   componente do brk afetaria a BRK. Decisão (HITL, 08/09/2026): CSS puro.

   Como funciona: o container (`#assessoria-de-imprensa`, id passado como atributo em
   Imprensa.vue:17 e aplicado ao root `.container-md` do componente) vira um grid de 2
   colunas, e as duas `.row` recebem `display: contents` — isso remove os wrappers do
   fluxo e promove os `col-*` a itens do grid do CONTAINER, permitindo posicionar
   filhos de .row diferentes na mesma coluna. Cada um recebe grid-column/grid-row
   explícitos.

   ATENÇÃO — `width: auto` é obrigatório: `col-md-6` define `width: 50%`, que como
   item de grid passaria a significar metade da CÉLULA (25% da largura total), não
   metade do container. Sem esse reset o layout encolhe pela metade.

   FRAGILIDADE ACEITA: as posições são fixas por `nth-child`, então o layout assume
   exatamente 3 contatos. Com 2, a esquerda perde o contato institucional; com 4+, o
   quarto em diante volta a empilhar no fluxo normal do grid (não quebra, mas sai do
   desenho). Se a quantidade mudar, revisar esta regra. A ORDEM entre os dois
   contatos da direita continua vindo do CMS (contatos 1 e 2 da aba Contatos da
   Unidade, na ordem gravada) — só o posicionamento é fixo aqui.

   Escopado em `@media (min-width: 768px)` (breakpoint `md` do Bootstrap 5) para o
   mobile manter o empilhamento nativo de `col-12`, em coluna única. */
@media (min-width: 768px) {
    #assessoria-de-imprensa {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    #assessoria-de-imprensa > .row {
        display: contents;
    }

    #assessoria-de-imprensa > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
    }

    /* esquerda: título (linha 1), texto do jornalista (linha 2) */
    #assessoria-de-imprensa > .row:first-child > [class*="col-"]:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    #assessoria-de-imprensa > .row:first-child > [class*="col-"]:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    /* direita: os dois primeiros contatos, empilhados */
    #assessoria-de-imprensa > .row:last-child > [class*="col-"]:nth-child(1) {
        grid-column: 2;
        grid-row: 1;
    }

    #assessoria-de-imprensa > .row:last-child > [class*="col-"]:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }

    /* esquerda: contato institucional, abaixo do texto */
    #assessoria-de-imprensa > .row:last-child > [class*="col-"]:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }
}

/* ==========================================================================
   AQUA Pernambuco — ajustes aprovados de Landing Page e Home (2026-09)
   ========================================================================== */

/* Landing Page */
.seletor-page {
    font-family: "Montserrat", sans-serif;
}

.seletor-page .left-banner .content .text {
    margin: 30px 0 16px;
    color: var(--aqua-navy);
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.seletor-page .left-banner .content .text p,
.seletor-page .left-banner .content .text span {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.seletor-page .left-banner .content .text strong,
.seletor-page .left-banner .content .text strong *,
.seletor-page .left-banner .content .text b,
.seletor-page .right-banner .text-box strong,
.seletor-page .right-banner .text-box strong *,
.seletor-page .right-banner .text-box b {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
}

.seletor-page .left-banner .brk-btn {
    border-color: var(--aqua-navy) !important;
    background-color: transparent !important;
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
}

.seletor-page .left-banner .brk-btn:hover,
.seletor-page .left-banner .brk-btn:focus,
.seletor-page .left-banner .brk-btn:active {
    border-color: var(--aqua-navy) !important;
    background-color: var(--aqua-navy) !important;
    color: var(--aqua-off-white) !important;
}

.seletor-page .right-banner .box .text {
    width: 220px;
}

/* Vão entre "É cliente e busca..." e o botão da Agência Virtual. Este é o
   único valor da entrega que não saiu de medição do PDF: o mockup da LP não
   é confiável para converter em px porque os dois textos declaram
   line-height 24px na especificação mas têm passos diferentes no arquivo
   (12,2pt à esquerda contra 13,9pt à direita), então não há uma escala
   px/pt única. Ajustado no olho contra o mockup — é o botão de giro se
   ainda parecer distante. */
.seletor-page .right-banner .box .text .text-box {
    margin-bottom: 6px;
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.seletor-page .right-banner .box .text .text-box p {
    margin: 0 !important;
}

.seletor-page .right-banner .box .text .text-box p,
.seletor-page .right-banner .box .text .text-box span {
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.seletor-page .right-banner .brk-btn {
    display: inline-flex !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    min-height: 52px !important;
    padding: 6px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: var(--aqua-navy) !important;
    background-color: var(--aqua-navy) !important;
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 19px;
    white-space: normal !important;
    text-align: center !important;
}

.seletor-page .right-banner .brk-btn:hover,
.seletor-page .right-banner .brk-btn:focus,
.seletor-page .right-banner .brk-btn:active {
    border-color: var(--aqua-light-gray) !important;
    background-color: var(--aqua-light-gray) !important;
    color: var(--aqua-navy) !important;
}

@media (min-width: 992px) {
    .seletor-page .left-banner,
    .seletor-page .right-banner {
        position: relative;
    }

    .seletor-page .left-banner .content {
        position: absolute;
        bottom: 45%;
        left: 11.25%;
        width: 77.5%;
        margin: 0;
    }

    .seletor-page .right-banner .box {
        position: static;
        height: 100%;
    }

    .seletor-page .right-banner .box .text {
        position: absolute;
        bottom: 45%;
        left: 15%;
    }
}

/* Hero da Home */
.header-home-page-pkg-0 .content-box {
    row-gap: 20px !important;
}

/* ATUALIZADO em 22/09: estes DOIS titulos — "Saneamento como prioridade" (hero)
   e "AQUA Pernambuco" (atuacao) — usam o navy da marca, conforme o material de
   referencia mais recente.

   A troca e SO nestes dois. Todo o resto do texto do site segue preto, via
   `--dark-blue-color: #000000` no `:root`, que continua como estava. Os
   `span`/`strong` entram junto porque "prioridade" fica em <strong> dentro do
   h2 e tem regra propria — sem eles a palavra ficaria preta no meio do
   titulo. */
.header-home-page-pkg-0 .content-header-home .text h2 {
    margin: 0 0 16px !important;
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 50px !important;
    letter-spacing: 0 !important;
}

.header-home-page-pkg-0 .content-header-home .text h2 span {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 50px !important;
    letter-spacing: 0 !important;
}

.header-home-page-pkg-0 .content-header-home .text h2 strong,
.header-home-page-pkg-0 .content-header-home .text h2 strong *,
.header-home-page-pkg-0 .content-header-home .text h2 b {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 800 !important;
}

.header-home-page-pkg-0 .content-header-home .text p {
    margin: 0 !important;
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}

.header-home-page-pkg-0 .content-header-home .text p span {
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}

.header-home-page-pkg-0 .home-btn {
    border-color: var(--aqua-orange) !important;
    background-color: transparent !important;
    color: var(--aqua-orange) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    text-align: center !important;
}

.header-home-page-pkg-0 .home-btn:hover,
.header-home-page-pkg-0 .home-btn:focus,
.header-home-page-pkg-0 .home-btn:active {
    border-color: var(--aqua-orange) !important;
    background-color: var(--aqua-orange) !important;
    color: var(--aqua-off-white) !important;
}

.header-home-page-pkg-0 .carousel .carousel-it {
    border-color: var(--aqua-off-white) !important;
    background-color: var(--aqua-off-white) !important;
}

/* O indicador ativo é um ANEL, não um disco. A especificação do PDF diz
   "Círculo maior HEX #AE5B2D / Círculo menor HEX #F2F2F2" — os dois círculos
   são o mesmo indicador: o maior é a borda, o menor é o miolo.

   O estilo base (bloco <style scoped> de Carousel.vue) dá `border: 4px` com
   `box-sizing: border-box`: no inativo, 8px de diâmetro com 4px de borda de
   cada lado faz a borda ocupar o disco todo e o background nunca aparecer;
   no ativo, 14px deixam 4px de anel e 6px de miolo visível. Por isso o
   inativo leva borda e fundo da mesma cor, e o ativo leva borda laranja com
   fundo claro. Pintar os dois de laranja no ativo apagava o miolo. */
.header-home-page-pkg-0 .carousel .carousel-it.active {
    border-color: var(--aqua-orange) !important;
    background-color: var(--aqua-off-white) !important;
}

@media (min-width: 992px) {
    /* Borda direita da foto do hero alinhada com a das demais seções.
       Passar por baixo da barra de menu é intencional no PDF; o que
       destoava era a foto ir além da caixa de serviços e do banner de
       atendimento.

       Aritmética, conferida em tela a 1905px de linha:
         `.service-box` e `.attendance` são `cols="11"` (91,6667%)
         centralizados por `margin: auto`, então sobram 79,375px de cada
         lado e a borda direita dos dois cai em 1825,625px.
         A coluna de texto `col-lg-5` ocupa 793,75px e a da foto `col-lg-7`
         os 1111,25px seguintes, terminando colada na janela.
         Largura necessária da foto = 1825,625 - 793,75 = 1031,875px,
         ou 1031,875 / 1111,25 = 92,857142% da coluna.

       O ajuste é na largura do `.slider-background` (o div da foto), não na
       da coluna: assim a linha flex fica intacta e não há risco de a coluna
       quebrar. Mexer na coluna para 54,166667% dá o MESMO pixel — são dois
       caminhos para o mesmo resultado, então aplicar os dois juntos deixaria
       a foto 62px estreita demais. 94% chega perto mas passa 12,7px. */
    .header-home-page-pkg-0 .slider-background {
        width: 92.857142% !important;
    }
}

/* Serviços */
.services-home-page-pkg-0 .service-box {
    border-radius: 36px;
    background-color: #dce5ed !important;
    background-image: url("../images/home-services-background.png") !important;
    background-position: center !important;
    background-size: cover !important;
}

.services-home-page-pkg-0 .service-content h5 {
    margin-bottom: 8px !important;
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
}

.services-home-page-pkg-0 .service-content h5 span,
.services-home-page-pkg-0 .service-content h5 strong {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
}

.services-home-page-pkg-0 .service-content p {
    margin: 0 !important;
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.services-home-page-pkg-0 .service-content p span {
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.services-home-page-pkg-0 .service-card .icon-box {
    background-color: var(--aqua-navy) !important;
}

.services-home-page-pkg-0 .service-card .icon-box svg {
    color: var(--aqua-off-white) !important;
}

.services-home-page-pkg-0 .service-card .service-title h5 {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 26px !important;
}

.services-home-page-pkg-0 .service-card .service-title h5 span {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 26px !important;
}

.services-home-page-pkg-0 .service-card .service-desc,
.services-home-page-pkg-0 .service-card .service-desc p,
.services-home-page-pkg-0 .service-card .service-desc span {
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
}

.services-home-page-pkg-0 .service-card .service-desc p {
    margin: 0 !important;
}

.services-home-page-pkg-0 .service-card .service-background,
.services-home-page-pkg-0 .service-card .service-background.leave {
    width: 167px !important;
    height: 188px !important;
    top: 0 !important;
    left: 50% !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    animation: none !important;
    transform: translateX(-50%) !important;
    transition:
        width 0.45s ease,
        height 0.45s ease,
        top 0.45s ease,
        border-radius 0.45s ease,
        background-color 0.45s ease !important;
}

.services-home-page-pkg-0 .service-card .service-background.active,
.services-home-page-pkg-0 .service-card .service-background.last {
    width: 224px !important;
    height: 226px !important;
    top: -13px !important;
    left: 50% !important;
    border-radius: 20px !important;
    background-color: var(--aqua-card-hover) !important;
    animation: none !important;
    transform: translateX(-50%) !important;
}

.services-home-page-pkg-0 .service-card:last-child .service-title h5 {
    white-space: nowrap !important;
}

.services-home-page-pkg-0 .service-card:last-child .box {
    left: -8px !important;
}

/* Atuação institucional */
.acting-home-pkg-0 .content-acting h1 {
    margin: 0 0 16px !important;
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 54px !important;
    font-weight: 800 !important;
    line-height: 56px !important;
}

.acting-home-pkg-0 .content-acting h1 span,
.acting-home-pkg-0 .content-acting h1 strong {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 54px !important;
    font-weight: 800 !important;
    line-height: 56px !important;
}

/* A descrição institucional são DOIS parágrafos no mockup: o texto quebra
   depois de "...saneamento básico." e recomeça em "Unimos eficiência...".
   Medido entre linhas de base: o passo normal é 13,0pt e o da troca de
   parágrafo é 16,2pt — só 3,2pt a mais, ou ~5px na referência de 1440px.
   Não é uma linha em branco; é um vão curto. Daí a margem de 5px aqui, com
   o vão até o botão ficando na margem do wrapper do v-html (abaixo). */
.acting-home-pkg-0 .content-acting p {
    margin: 0 0 5px !important;
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.acting-home-pkg-0 .content-acting p span {
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* NÃO reintroduzir uma regra do tipo
   `.content-acting > div > p:last-child { display: none }` aqui. Ela existia
   para esconder o `<p>&nbsp;</p>` final que o editor do CMS deixava na
   descrição institucional, mas o último `<p>` do HTML limpo é a PRÓPRIA
   descrição — com o conteúdo corrigido no CMS a regra apagava o parágrafo
   inteiro. Parágrafo vazio residual se resolve limpando o campo no CMS
   (`acting_description`), não por CSS posicional. */

/* Vão entre o fim da descrição e o botão. Fica no wrapper do v-html em vez
   de num `p:last-child`, para não depender de qual elemento é o último —
   a descrição tem dois parágrafos e pode voltar a ter um. 5px da margem do
   último parágrafo + 27px daqui = os ~32px do mockup. */
.acting-home-pkg-0 .content-acting > div {
    margin-bottom: 27px !important;
}

.acting-home-pkg-0 .content-acting .brk-btn {
    border-color: var(--aqua-orange) !important;
    background-color: transparent !important;
    color: var(--aqua-orange) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    text-align: center !important;
}

.acting-home-pkg-0 .content-acting .brk-btn:hover,
.acting-home-pkg-0 .content-acting .brk-btn:focus,
.acting-home-pkg-0 .content-acting .brk-btn:active {
    border-color: var(--aqua-orange) !important;
    background-color: var(--aqua-orange) !important;
    color: var(--aqua-off-white) !important;
}

.acting-home-pkg-0 .acting-right-box {
    margin-top: 0 !important;
}

/* NÃO reintroduzir `.acting-right-box br { display: none }` aqui. A regra
   existia para neutralizar os `<br>` que o campo de números usava como
   espaçamento — conteúdo que passou a ser removido no CMS, tornando-a
   inócua. O que ela ainda fazia era BLOQUEAR uma quebra de linha legítima
   no headline: se "do Litoral ao Sertão de Pernambuco" não quebrar em duas
   linhas como no mockup, a saída é um `<br>` no próprio texto do CMS, e
   isso só funciona sem esta regra. Espaçamento vem das margens abaixo. */

.acting-home-pkg-0 .acting-right-box p {
    margin: 0 0 8px !important;
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
}

.acting-home-pkg-0 .acting-right-box p span {
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
}

.acting-home-pkg-0 .acting-right-box h1 {
    margin: 0 0 48px !important;
    color: var(--aqua-orange) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 50px !important;
    font-weight: 800 !important;
    line-height: 52px !important;
}

.acting-home-pkg-0 .acting-right-box h1 span,
.acting-home-pkg-0 .acting-right-box h1 strong {
    color: var(--aqua-orange) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 50px !important;
    font-weight: 800 !important;
    line-height: 52px !important;
}

.acting-home-pkg-0 .acting-right-box h1:last-of-type {
    margin-bottom: 8px !important;
}

.acting-home-pkg-0 .left-box-image:not([src]),
.acting-home-pkg-0 .left-box-image[src=""] {
    display: none !important;
}

@media (min-width: 992px) {
    .acting-home-pkg-0 .content-row {
        width: 100% !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .acting-home-pkg-0 .left-box {
        padding-right: 0 !important;
    }

    .acting-home-pkg-0 .content-acting {
        width: 72% !important;
        padding-left: 15% !important;
    }

    /* "Alinhar margens" do PDF: a anotação aponta para a BORDA DIREITA da
       coluna de números, pedindo que a margem à direita espelhe a da
       esquerda. Medido no mockup: moldura do site de 66,8 a 1015,3pt, texto
       da esquerda começando em 185,4pt — margem esquerda de 118,6pt. Para
       simetria o conteúdo dos números precisa terminar em 896,7pt, ou seja
       começar em 568,2pt com no máximo 328,5pt de largura.

       Na referência de 1440px (fator 1,518 px/pt) o início fica em 761px, ou
       seja 41px adentro da coluna `col-lg-6` (720px).

       Sem um max-width os `<h1>` recebiam os ~696px da coluna inteira e
       "do Litoral ao Sertão de Pernambuco" quebrava tarde, correndo para a
       borda — era o desalinhamento apontado.

       O valor do max-width NÃO é a margem simétrica: é o que força a quebra
       no lugar certo. Larguras reais medidas na própria fonte em peso 800,
       a 50px:
         "do Litoral ao Sertão"    = 521,2px  -> tem de CABER
         "do Litoral ao Sertão de" = 602,8px  -> NÃO pode caber
         "+ de 150 municípios"     = 520,1px  -> tem de caber em uma linha
       Logo a janela válida é 521..603px, e 540px fica com folga nas duas
       pontas. Um valor abaixo de 521 (era 499) quebrava "+ de 150
       municípios" e partia o outro título em três linhas.

       A margem direita resultante vem da linha mais longa: 1440 - 761 - 521
       = 158px, contra 180px à esquerda — o equilíbrio que o PDF pede. */
    .acting-home-pkg-0 .acting-right-box {
        padding-left: 41px !important;
    }

    /* Metade vertical do "Alinhar margens" — ver o comentário do
       `.footer .attendance` sobre as setas. A base põe `margin-bottom: 30px`
       só no `.left-box`, o que empurra apenas a coluna da esquerda e torna o
       vão inferior da seção assimétrico em relação ao superior. Zerado aqui
       para que o vão de baixo seja governado por um único valor, a margem
       superior do banner de atendimento. */
    .acting-home-pkg-0 .left-box {
        margin-bottom: 0 !important;
    }

    .acting-home-pkg-0 .acting-right-box > div {
        max-width: 540px !important;
    }
}

/* Precisa de atendimento */

/* O banner NÃO é chumbado aqui, de propósito. Por decisão do cliente a
   imagem cadastrada no CMS é mantida, e ela chega como style inline em
   Footer.vue (`backgroundStyles(needHelp.background_image)`). Um
   `background-image: ... !important` nesta folha venceria esse inline e
   deixaria os campos `background_image` e `mobile_background_image` do
   admin inertes — era o efeito de chumbar aqui o PNG do PDF. Ao tema cabem
   só o enquadramento e o alinhamento; a imagem é conteúdo. */
.footer .attendance,
.footer .attendance-mobile {
    background-position: center !important;
    background-size: cover !important;
}

.footer .attendance {
    width: 87.5% !important;
    height: auto !important;
    min-height: 0 !important;
    /* Mantém as dimensões do banner previstas no material de referência. */
    aspect-ratio: 1680 / 441;
    /* "Alinhar margens" do PDF é uma instrução VERTICAL, não horizontal. As
       setas verdes ficam todas na margem direita da página (x=92,4%) e são
       de duas pontas, medindo alturas e vãos; o rótulo está a y=66,3%,
       exatamente entre as duas setas de 174,3pt que medem o vão ACIMA e o
       vão ABAIXO da seção de atuação. Estarem desenhadas com o mesmo
       comprimento é o pedido: os dois vãos devem ser iguais.

       Antes: 200px acima (margin-top do .acting-home-pkg-0, no tema base)
       contra 130px abaixo (30px do .left-box + 100px daqui). A margem
       superior sobe para 200px e o .left-box é zerado logo acima, deixando
       os dois vãos iguais. A margem inferior, até o rodapé, segue 100px.

       (Escala da página 3: 912pt de moldura para 1836px de screenshot, ou
       2,01 px/pt — pelo que as setas de 174,3pt equivalem a ~350px.)

       ATUALIZADO em 22/09 com medição no DEV local. O valor era 200px fixos,
       e a Home tinha uma exceção com `clamp` que as demais páginas não
       recebiam. O vão branco medido antes do banner ficava assim:

           /home ............ 104px   <- aprovado pela cliente
           /compliance ...... 200px
           /quem-somos ...... 207px
           /trabalhe-conosco  240px
           /nossa-atuacao ... 296px
           /imprensa ........ 344px

       Ou seja, a Home era a única calibrada e todo o resto herdava o dobro
       ou o triplo. O `clamp` passa a valer para todas, o que zera a diferença
       sem tocar em cada página. A margem inferior, até o rodapé, segue 100px:
       ela já dá 168px em todas as páginas, Home inclusive, e foi aprovada
       assim. */
    margin: clamp(64px, 6vw, 96px) auto 100px !important;
    padding: 0 7.5% !important;
    align-items: flex-start !important;
    justify-content: center !important;
    border-radius: 36px !important;
    text-align: left !important;
}

.footer .attendance > div {
    width: auto !important;
    max-width: none !important;
}

.footer .attendance h1,
.footer .attendance h2,
.footer .attendance h3,
.footer .attendance h4,
.footer .attendance h5 {
    margin: 0 0 16px !important;
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 54px !important;
    font-weight: 700 !important;
    line-height: 56px !important;
    text-align: left !important;
}

.footer .attendance h1 {
    white-space: nowrap !important;
}

.footer .attendance h1 br {
    display: none !important;
}

.footer .attendance h1 span,
.footer .attendance h2 span,
.footer .attendance h3 span,
.footer .attendance h4 span,
.footer .attendance h5 span,
.footer .attendance h1 strong,
.footer .attendance h2 strong {
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 54px !important;
    font-weight: 700 !important;
    line-height: 56px !important;
}

.footer .attendance p {
    width: 650px !important;
    max-width: 650px !important;
    margin: 0 0 24px !important;
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-align: left !important;
}

.footer .attendance p span {
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.footer .attendance .brk-btn,
.footer .attendance-mobile .brk-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: var(--aqua-cream) !important;
    background-color: transparent !important;
    color: var(--aqua-cream) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    text-align: center !important;
}

.footer .attendance .brk-btn {
    width: 196px !important;
    min-width: 196px !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
}

/* Rodapé institucional: somente o link de serviço "AQUA Pernambuco"
   preserva o sublinhado. Os links do mapa usam o navy da marca. */
.footer .d-none.d-lg-flex .footer-links .link-row ul.list-footer a.text-secondary-bold {
    color: var(--aqua-navy) !important;
    text-decoration: none !important;
}

.footer .d-none.d-lg-flex .footer-links .link-row ul.list-footer a.text-secondary-bold:hover,
.footer .d-none.d-lg-flex .footer-links .link-row ul.list-footer a.text-secondary-bold:focus,
.footer .d-flex.d-lg-none .footer-links ul.list-footer a.text-secondary-bold:hover,
.footer .d-flex.d-lg-none .footer-links ul.list-footer a.text-secondary-bold:focus {
    color: var(--aqua-navy) !important;
    text-decoration: none !important;
}

.footer .d-flex.d-lg-none .footer-links ul.list-footer a.text-secondary-bold {
    color: var(--aqua-navy) !important;
    text-decoration: none !important;
}

.footer .footer-links .links-baseboard span {
    font-size: 14px !important;
    line-height: 20px;
}

.footer .menu-reservado-direita {
    display: none !important;
}

/* Rodapé > "Canais de atendimento" (dropdown do .baseboard) no celular: o
   Footer.vue monta o bloco com `cols="3"` fixo em qualquer largura, numa
   .row só de títulos e outra (.link-row) só de conteúdo. Numa viewport de
   ~390px cada coluna fica com ~90px — "Serviços para você" quebra palavra a
   palavra, "Atendimento:" invade a coluna de Ouvidoria e a coluna de
   WhatsApp (vazia na AQUA) deixa um buraco no meio.

   Como títulos e conteúdos estão em rows separadas, empilhar as colunas
   jogaria todos os títulos primeiro e todos os conteúdos depois. Por isso
   as duas rows viram `display: contents` e as colunas passam a ser filhas
   diretas de um flex em coluna, intercaladas por `order` (título N → 2N-1,
   conteúdo N → 2N). O padding lateral das colunas é zerado porque, sem o
   margin negativo da .row, ele deslocaria o bloco em relação ao resto do
   rodapé. Títulos vazios (WhatsApp e Lojas não cadastrados) e a coluna de
   conteúdo vazia somem para não deixar vãos. Só abaixo do `md`: do tablet
   para cima as 4 colunas já cabem. */
@media (max-width: 767.98px) {
    .footer .baseboard .footer-drop-box {
        display: flex;
        flex-direction: column;
    }

    .footer .baseboard .footer-drop-box > .row {
        display: contents;
    }

    .footer .baseboard .footer-drop-box > .row > [class*="col-"] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .footer .baseboard .footer-drop-box > .row:not(.link-row) > :nth-child(1) { order: 1; }
    .footer .baseboard .footer-drop-box > .link-row > :nth-child(1) { order: 2; }
    .footer .baseboard .footer-drop-box > .row:not(.link-row) > :nth-child(2) { order: 3; }
    .footer .baseboard .footer-drop-box > .link-row > :nth-child(2) { order: 4; }
    .footer .baseboard .footer-drop-box > .row:not(.link-row) > :nth-child(3) { order: 5; }
    .footer .baseboard .footer-drop-box > .link-row > :nth-child(3) { order: 6; }
    .footer .baseboard .footer-drop-box > .row:not(.link-row) > :nth-child(4) { order: 7; }
    .footer .baseboard .footer-drop-box > .link-row > :nth-child(4) { order: 8; }

    .footer .baseboard .footer-drop-box > .row:not(.link-row) > :not(:first-child):has(> .list-title:not(:empty)) {
        margin-top: 24px;
    }

    /* A margem do último parágrafo somaria 16px ao vão antes do próximo
       grupo, deixando "Serviços → Telefones" maior que os demais. */
    .footer .baseboard .footer-drop-box > .link-row > * > p.text-secondary:last-of-type {
        margin-bottom: 0;
    }

    .footer .baseboard .footer-drop-box .list-title:empty,
    .footer .baseboard .footer-drop-box > .link-row > :empty {
        display: none;
    }
}

.footer .attendance .brk-btn:hover,
.footer .attendance .brk-btn:focus,
.footer .attendance .brk-btn:active,
.footer .attendance-mobile .brk-btn:hover,
.footer .attendance-mobile .brk-btn:focus,
.footer .attendance-mobile .brk-btn:active {
    border-color: var(--aqua-cream) !important;
    background-color: var(--aqua-cream) !important;
    color: var(--aqua-navy) !important;
    filter: none !important;
}

@media (max-width: 991.98px) {
    .seletor-page .left-banner .content {
        margin: 60px 0;
    }

    .seletor-page .right-banner {
        min-height: 480px;
    }

    .seletor-page .right-banner .box {
        height: 100%;
        align-items: flex-start;
        justify-content: center;
        padding-left: 10%;
    }

    .header-home-page-pkg-0 .content-header-home .text h2 {
        font-size: 50px;
        line-height: 42px;
    }

    .services-home-page-pkg-0 .service-box {
        border-radius: 24px;
    }

    .services-home-page-pkg-0 .service-content h5 {
        font-size: 28px;
        line-height: 32px;
    }

    .services-home-page-pkg-0 .service-content p {
        font-size: 16px;
        line-height: 20px;
    }

    .acting-home-pkg-0 .content-acting h1 {
        font-size: 42px;
        line-height: 44px;
    }

    .acting-home-pkg-0 .acting-right-box h1 {
        font-size: 40px;
        line-height: 42px;
    }

    .footer .attendance-mobile {
        min-height: 300px;
        height: auto;
        padding: 36px 24px;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
    }

    .footer .attendance-mobile > div {
        max-width: 65%;
    }

    .footer .attendance-mobile h1,
    .footer .attendance-mobile h2,
    .footer .attendance-mobile h3,
    .footer .attendance-mobile h4,
    .footer .attendance-mobile h5 {
        color: var(--aqua-off-white) !important;
        font-family: "Montserrat", sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 36px;
    }

    .footer .attendance-mobile p,
    .footer .attendance-mobile span {
        color: var(--aqua-off-white) !important;
        font-family: "Montserrat", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 20px;
    }
}

/* ============================================================
   AQUA Pernambuco — páginas institucionais além da Home
   (spec 007-ajustes-visuais-aqua-outras-paginas)
   ============================================================

   Estende para Institucional (/quem-somos), Nossa Atuação
   (/nossa-atuacao), Trabalhe Conosco (/work-with-us), Imprensa
   (/imprensa) e Compliance (/compliance) o mesmo tratamento tipográfico
   já aplicado à Home pela spec 006. Ver
   .agents/specs/007-ajustes-visuais-aqua-outras-paginas/.

   POR QUE ISSO É NECESSÁRIO: os h1-h6 do tema (base.scss) já herdam
   `--primary-font-wide-bold`, que a spec 006 realiasou para Montserrat
   fixo em 700 — então a FONTE dos títulos já está correta aqui. O
   problema é a COR: esses h1-h6 usam `color: var(--blue-color)`, e nas
   Opções de Tema da AQUA esse token ainda não foi configurado com a cor
   da marca (o valor herdado hoje é o azul/roxo de placeholder do tema
   BRK base, não `--aqua-navy`). O certo seria corrigir isso nas Opções
   de Tema — mas isso vale para o site inteiro e está fora do escopo
   desta entrega (CSS-only); por isso a cor é fixada por título, como já
   era feito na Home.

   NÃO é uma regra genérica "todo h1-h6 vira navy": títulos que JÁ têm
   uma cor própria definida no SCSS de cada página (as classes
   `.subtitle`, `.support-text-primary-bold`, `.box-valores .title` etc.)
   foram deixados de fora de propósito — essas cores já foram corrigidas
   em rodadas anteriores de white-label (viram preto via `--dark-blue-color`,
   forçado global na spec 006) e não fazem parte desta entrega. Cada
   seletor abaixo mira apenas o título "solto" (sem classe própria) que
   ainda herda o `--blue-color` quebrado.

   As mudanças de fundo abaixo são restritas aos componentes e páginas
   explicitamente identificados pelos seletores. */

/* Institucional (/quem-somos): o header usa a variante `blue-color`, cujo
   token ainda está com o roxo do tema base no ambiente AQUA. O mockup usa
   o navy da marca e breadcrumb branco com leve transparência. */
.quem-somos .box-default-header .header.blue-color {
    background-color: var(--aqua-navy) !important;
}

.quem-somos .box-default-header .header.blue-color span.breadcrumb-brk a,
.quem-somos .box-default-header .header.blue-color span.breadcrumb-brk svg,
.nossa-atuacao .box-default-header .header.cian-color span.breadcrumb-brk a,
.nossa-atuacao .box-default-header .header.cian-color span.breadcrumb-brk svg {
    color: rgba(255, 255, 255, 0.8) !important;
}

.quem-somos .box-default-header .header.blue-color span.breadcrumb-brk a,
.nossa-atuacao .box-default-header .header.cian-color span.breadcrumb-brk a {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400;
    text-decoration: none;
}

.quem-somos .box-image-right .text-container h4,
.quem-somos .box-image-left .text-container h4,
.quem-somos .box-nossos-numeros .header h2.subtitle,
.quem-somos .box-nossos-numeros h1,
.quem-somos .box-composicao-societaria .content h4 {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
}

.quem-somos #nossos-valores {
    background-color: #ffffff;
    background-image: none !important;
    font-family: "Montserrat", sans-serif;
}

.quem-somos #nossos-valores > .header .title,
.quem-somos #nossos-valores > .header .subtitle,
.quem-somos #nossos-valores > .content .number,
.quem-somos #nossos-valores > .content .title,
.quem-somos #nossos-valores > .content .hover-description {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
}

.quem-somos #nossos-valores > .header .title {
    font-weight: 800;
}

.quem-somos #nossos-valores > .content .number {
    background-color: var(--aqua-light-blue);
    font-weight: 800;
}

@media (min-width: 992px) {
    .quem-somos .box-default-header .header.blue-color span.breadcrumb-brk,
    .quem-somos .box-default-header .header.blue-color > h2,
    .nossa-atuacao .box-default-header .header.cian-color span.breadcrumb-brk,
    .nossa-atuacao .box-default-header .header.cian-color > h2 {
        position: relative;
        top: 54px;
    }

    .quem-somos #quem-somos {
        width: 100%;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /* A row e full-bleed (width: 100%) de proposito: a foto da coluna direita
       encosta na borda da tela. Mas `padding-left: 0` levava junto o TEXTO para
       x=0, desalinhado de todas as outras secoes, que usam `width: 87.5%`
       centralizado — ou seja, 6,25% de recuo. O recuo volta so na coluna do
       texto, preservando a foto sangrada. Em % (nao vw) para bater exatamente
       com as secoes de 87,5%, que tambem ignoram a barra de rolagem. */
    .quem-somos #quem-somos > .col-lg-6:first-child {
        display: flex;
        flex: 0 0 42%;
        max-width: 42%;
        align-items: center;
        padding-left: 6.25%;
    }

    .quem-somos #quem-somos > .col-lg-6:last-child {
        flex: 0 0 58%;
        max-width: 58%;
    }

    .quem-somos #quem-somos .text-container {
        height: 100% !important;
        width: 100%;
        max-width: 440px;
        padding: 0;
        margin: 0 auto 0 0;
        text-align: left;
    }

    .quem-somos #quem-somos .text-container h4 {
        margin-bottom: 12px;
        font-size: 61px;
        font-weight: 800;
        line-height: 65px;
    }

    .quem-somos #quem-somos .text-container p {
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .quem-somos #quem-somos .text-container > .brk-btn {
        margin-top: 36px;
        line-height: 26px;
    }

    /* Mesmo caso do `#quem-somos` logo acima: a secao e full-bleed
       (`width: 100%`) porque o carrossel de cards precisa correr ate a borda
       direita da tela. So que o `padding: 64px 0 0` zerava a esquerda tambem,
       e o titulo "Saneamento e so o comeco", o subtitulo e as setas ficavam em
       x=12 — o padding do container, nada mais — contra os 75px (6,25%) de
       "Quem somos" e "Nossos numeros". O recuo entra so na esquerda; o
       carrossel continua sangrando a direita. Em %, e nao vw, para bater com
       as secoes de `width: 87.5%`, que tambem ignoram a barra de rolagem. */
    .quem-somos #destaque {
        width: 100%;
        padding: 64px 0 0 6.25%;
        margin-right: auto;
        margin-left: auto;
    }

    .quem-somos #destaque > h2.subtitle {
        margin-bottom: 4px;
        color: var(--aqua-navy) !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 24px;
        font-weight: 700;
        line-height: 29px;
    }

    .quem-somos #destaque > p {
        margin-bottom: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .quem-somos #nossos-numeros {
        display: grid;
        grid-template-columns: 42% 58%;
        width: 87.5%;
        padding: 120px 0 100px;
        margin: 0 auto !important;
    }

    .quem-somos #nossos-numeros > .header {
        grid-column: 1;
        margin: 88px 0 0;
    }

    .quem-somos #nossos-numeros > .header h2.subtitle {
        margin-bottom: 12px;
        font-size: 36px;
        font-weight: 800;
        line-height: 40px;
    }

    .quem-somos #nossos-numeros > .header p {
        max-width: 620px;
        margin: 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 29px;
    }

    .quem-somos #nossos-numeros > .header .brk-btn {
        margin-top: 48px;
        line-height: 26px;
    }

    .quem-somos #nossos-numeros > .tabs-brk {
        grid-column: 2;
        padding-left: 48px;
    }

    .quem-somos #nossos-numeros > .tabs-brk > ul {
        margin: 0 0 52px;
    }

    .quem-somos #nossos-numeros > .tabs-brk > ul li.tab-option {
        float: none;
        padding: 0;
        color: var(--aqua-navy) !important;
        background: transparent !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 32px;
        font-weight: 800;
        line-height: 38px;
    }

    .quem-somos #nossos-numeros > .tabs-brk > ul li.tab-option:last-child {
        font-size: 0;
    }

    .quem-somos #nossos-numeros > .tabs-brk > ul li.tab-option::before {
        font-size: 32px;
        font-weight: 800;
        line-height: 38px;
    }

    .quem-somos #nossos-numeros .nossos-numeros {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px;
        max-height: none;
    }

    .quem-somos #nossos-numeros .nossos-numeros .numeros-item {
        margin: 0;
    }

    .quem-somos #nossos-numeros .nossos-numeros .numeros-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .quem-somos #nossos-numeros .nossos-numeros .numeros-item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .quem-somos #nossos-numeros .nossos-numeros .numeros-item:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }

    .quem-somos #nossos-numeros .nossos-numeros h1,
    .quem-somos #nossos-numeros .nossos-numeros h1 span,
    .quem-somos #nossos-numeros .nossos-numeros h1 strong {
        margin: 8px 0 6px;
        color: var(--aqua-orange) !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 50px;
        font-weight: 800;
        line-height: 52px;
        white-space: nowrap;
    }

    .quem-somos #nossos-numeros .nossos-numeros p,
    .quem-somos #nossos-numeros .nossos-numeros p strong {
        margin: 0;
        color: #000000 !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 20px;
        font-weight: 500;
        line-height: 22px;
    }

    .quem-somos #proposito-e-valores > .col-lg-6:last-child {
        display: flex;
        align-items: center;
    }

    .quem-somos #proposito-e-valores .text-container {
        height: 100%;
        width: 100%;
        max-width: 560px;
        padding: 0;
        margin: 0 auto;
        text-align: left;
    }

    .quem-somos #proposito-e-valores .text-container h4 {
        color: var(--aqua-navy) !important;
        font-family: "Montserrat", sans-serif !important;
        font-weight: 800;
    }

    /* O `padding-top` e o `margin-top` eram 64px CADA, somando 128px no mesmo
       ponto e produzindo 187px de vao medido antes de "Nossos valores" — o
       maior vao interno de /quem-somos. Como a secao tem `background-color:
       #ffffff`, igual ao fundo da pagina, nao ha diferenca visual entre por o
       espaco dentro ou fora da caixa: os dois viravam branco. Fica so o
       `padding`, o que traz o vao para ~123px, na faixa dos ~120px que o Word
       de 18/09 pede como referencia. */
    .quem-somos #nossos-valores {
        width: 100%;
        padding: 64px 0 0;
        margin: 0;
    }

    .quem-somos #nossos-valores > .header {
        max-width: 720px;
        padding: 0;
        margin: 0 auto;
    }

    .quem-somos #nossos-valores > .header .title {
        margin: 0 0 14px;
        font-size: 40px;
        line-height: 48px;
    }

    .quem-somos #nossos-valores > .header .subtitle {
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
    }

    .quem-somos #nossos-valores > .content {
        width: 81%;
        margin: 68px auto 0;
    }

    .quem-somos #nossos-valores > .content > .row {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        row-gap: 56px;
        margin: 0;
    }

    .quem-somos #nossos-valores > .content > .row > .grid {
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0;
        background-color: transparent !important;
    }

    .quem-somos #nossos-valores > .content > .row > .grid:nth-child(3n + 1) {
        grid-column: 1;
    }

    .quem-somos #nossos-valores > .content > .row > .grid:nth-child(3n + 2) {
        grid-column: 3;
    }

    .quem-somos #nossos-valores > .content > .row > .grid:nth-child(3n) {
        grid-column: 5;
    }

    .quem-somos #nossos-valores > .content .number {
        width: 72px;
        height: 72px;
        font-size: 34px;
        line-height: 40px;
    }

    .quem-somos #nossos-valores > .content .title {
        padding-top: 14px;
        font-size: 24px;
        font-weight: 700;
        line-height: 29px;
    }
}

@media (min-width: 1400px) {
    .quem-somos #nossos-valores > .content .title {
        white-space: nowrap;
    }
}

/* Nossa Atuação (/nossa-atuacao) */
.nossa-atuacao .center-content h4,
.nossa-atuacao .box-image-left .text-container h4,
.nossa-atuacao .box-image-right .text-container h4 {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
}

.nossa-atuacao #commitment .text-container h4 {
    font-weight: 800;
}

@media (min-width: 992px) {
    .nossa-atuacao #what-we-do {
        flex: 0 0 87.5%;
        width: 87.5%;
        max-width: 87.5%;
        margin-bottom: 0 !important;
    }

    .nossa-atuacao #what-we-do > .row {
        display: grid;
        grid-template-columns: 32% 32%;
        column-gap: 8%;
        margin: 0;
    }

    .nossa-atuacao #what-we-do > .row > .col-12:first-child {
        display: none;
    }

    .nossa-atuacao #what-we-do .attitude-text {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .nossa-atuacao #what-we-do .attitude-text:last-child {
        padding-top: 60px;
    }

    .nossa-atuacao #what-we-do .attitude-text h4,
    .nossa-atuacao #where-we-are h4 {
        margin-bottom: 16px;
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
    }

    .nossa-atuacao #what-we-do .attitude-text p,
    .nossa-atuacao #where-we-are p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .nossa-atuacao #where-we-are {
        flex: 0 0 87.5%;
        width: 87.5%;
        max-width: 87.5%;
        margin-top: 0 !important;
    }

    .nossa-atuacao #where-we-are > .row {
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: center;
        margin: 0;
    }

    .nossa-atuacao #where-we-are > .row > .col-12 {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .nossa-atuacao #where-we-are .map-img {
        width: 100%;
    }

    .nossa-atuacao #where-we-are .map-image {
        display: block;
        width: 100%;
        max-width: none;
        padding-left: 0;
    }

    .nossa-atuacao #socio-environmental-performance {
        position: relative;
        min-height: 0;
        aspect-ratio: 1920 / 638;
        margin: 0;
    }

    .nossa-atuacao #socio-environmental-performance > .col-lg-6:first-child {
        position: absolute;
        inset: 0;
        z-index: 0;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .nossa-atuacao #socio-environmental-performance .img-box {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .nossa-atuacao #socio-environmental-performance .img-box img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .nossa-atuacao #socio-environmental-performance > .col-lg-6:last-child {
        position: relative;
        z-index: 1;
        display: flex;
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        min-height: 100%;
        align-items: center;
        /* A coluna da imagem e `position: absolute; inset: 0` e cobre a secao
           inteira; o texto fica por cima, comecando exatamente na marca dos
           50%. So que a curva do recorte da arte passa um pouco dessa linha, e
           em telas estreitas ela encostava nas primeiras letras. O recuo
           afasta o texto dessa borda sem mexer na arte. */
        padding: 0 0 0 clamp(16px, 2.5vw, 48px);
        margin-left: 50%;
    }

    .nossa-atuacao #socio-environmental-performance .text-container {
        width: 100%;
        height: auto;
        max-width: 560px;
        padding: 0;
        margin: 0 auto;
    }

    .nossa-atuacao #socio-environmental-performance .text-container h4 {
        margin-bottom: 16px;
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
    }

    .nossa-atuacao #socio-environmental-performance .text-container p {
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }
}

/* Trabalhe Conosco (/work-with-us): "Onde estamos" (MapBox) e "Nossas
   vagas" (OurVacancies) reusam o mesmo wrapper `.center-content`. As
   demais seções (Liderança, Ciclo de Desenvolvimento, Nossos Programas,
   Cultura e Bem-estar) já estão ocultas por CSS mais acima neste arquivo
   — esta regra também alcança os títulos delas, mas sem efeito visual
   já que os blocos inteiros estão com `display:none`. */
.work-with-us .center-content h4 {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
}

.work-with-us .box-default-header .header.dark-blue-color {
    background-color: var(--aqua-orange) !important;
}

.work-with-us .box-default-header .header.dark-blue-color > h2 {
    color: #ffffff !important;
    font-family: "Montserrat", sans-serif !important;
}

.work-with-us .box-default-header .header.dark-blue-color span.breadcrumb-brk a,
.work-with-us .box-default-header .header.dark-blue-color span.breadcrumb-brk svg {
    color: rgba(255, 255, 255, 0.8) !important;
}

.work-with-us .box-default-header .header.dark-blue-color span.breadcrumb-brk a {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400;
    text-decoration: none;
}

@media (min-width: 992px) {
    .work-with-us .box-default-header .header.dark-blue-color span.breadcrumb-brk,
    .work-with-us .box-default-header .header.dark-blue-color > h2 {
        position: relative;
        top: 54px;
    }

    .work-with-us #trabalhe-conosco,
    .work-with-us #map-box,
    .work-with-us #nossas-vagas {
        width: 87.5%;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .work-with-us #trabalhe-conosco > .col-11,
    .work-with-us #nossas-vagas > .col-11 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .work-with-us #trabalhe-conosco .main-content {
        display: block;
        max-width: 540px;
    }

    .work-with-us #trabalhe-conosco .main-content p {
        width: 100%;
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .work-with-us #trabalhe-conosco .brk-btn {
        float: none !important;
        margin-top: 32px !important;
        font-weight: 600 !important;
    }

    .work-with-us #map-box {
        flex: 0 0 87.5%;
        max-width: 87.5%;
        margin-top: 64px !important;
        margin-bottom: 96px !important;
    }

    .work-with-us #map-box > .row {
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: center;
        margin: 0;
    }

    .work-with-us #map-box > .row > .col-12 {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .work-with-us #map-box h4,
    .work-with-us #nossas-vagas h4 {
        margin-bottom: 16px;
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
    }

    .work-with-us #map-box p,
    .work-with-us #nossas-vagas p {
        margin-bottom: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .work-with-us #map-box .map-img,
    .work-with-us #map-box .map-img img {
        display: block;
        width: 100%;
        max-width: none;
    }

    .work-with-us #map-box .brk-btn {
        display: none !important;
    }

    .work-with-us #nossas-vagas {
        margin-bottom: 40px !important;
    }

    .work-with-us #nossas-vagas > .col-11 {
        display: grid;
        grid-template-columns: max-content max-content;
        column-gap: 16px;
    }

    .work-with-us #nossas-vagas > .col-11 > .row,
    .work-with-us #nossas-vagas > .col-11 > .row > .col-12 {
        display: contents;
    }

    .work-with-us #nossas-vagas > .col-11 > .row:first-child > div {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .work-with-us #nossas-vagas h4,
    .work-with-us #nossas-vagas > .col-11 > .row:first-child p {
        grid-column: 1 / -1;
    }

    .work-with-us #nossas-vagas > .col-11 > .row:first-child a,
    .work-with-us #nossas-vagas .vacancy {
        display: inline-flex;
        width: auto;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 8px 20px;
        border: 1px solid var(--aqua-orange);
        border-radius: 8px;
        background-color: transparent;
        color: var(--aqua-orange) !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none !important;
    }

    .work-with-us #nossas-vagas > .col-11 > .row:first-child a {
        margin-top: 24px;
    }

    .work-with-us #nossas-vagas .vacancy-box {
        display: inline-flex;
        gap: 16px;
        margin-top: 24px !important;
        vertical-align: top;
    }

    .work-with-us #nossas-vagas .vacancy {
        margin: 0;
    }

    .work-with-us #nossas-vagas .vacancy img,
    .work-with-us #nossas-vagas .vacancy .text-secondary {
        display: none;
    }

    .work-with-us #nossas-vagas .vacancy h2 {
        margin: 0;
        color: var(--aqua-orange) !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
    }

    .work-with-us #nossas-vagas > .col-11 > .row:first-child a:hover,
    .work-with-us #nossas-vagas > .col-11 > .row:first-child a:focus,
    .work-with-us #nossas-vagas .vacancy:hover {
        background-color: var(--aqua-orange);
        color: #ffffff !important;
    }

    .work-with-us #nossas-vagas .vacancy:hover h2 {
        color: #ffffff !important;
    }
}

/* Imprensa */
.imprensa .box-default-header .header.white-green-color {
    background-color: var(--aqua-light-blue) !important;
}

.imprensa .box-default-header .header.white-green-color > h2,
.imprensa .box-default-header .header.white-green-color span.breadcrumb-brk a,
.imprensa .box-default-header .header.white-green-color span.breadcrumb-brk svg {
    color: var(--aqua-navy) !important;
}

.imprensa .box-default-header .header.white-green-color > h2,
.imprensa .box-acessoria-imprensa-title {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
}

.imprensa .box-default-header .header.white-green-color span.breadcrumb-brk a {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400;
    text-decoration: none;
}

.imprensa .box-default-header .banner-default-header {
    height: auto;
    aspect-ratio: 1677 / 619;
    overflow: hidden;
}

.imprensa .box-default-header .banner-default-header img {
    height: 100%;
    object-fit: cover;
}

.imprensa #assessoria-de-imprensa {
    width: 87.5%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

.imprensa .box-acessoria-imprensa-title {
    max-width: 720px;
    margin-bottom: 16px;
    padding-right: 0;
    font-size: 36px;
    font-weight: 800;
    line-height: 44px;
}

.imprensa .box-acessoria-imprensa-text {
    max-width: 590px;
    padding-right: 0;
}

.imprensa .box-acessoria-imprensa-text,
.imprensa .box-acessoria-imprensa-text p {
    margin-bottom: 0;
    color: #000000;
    font-family: "Montserrat", sans-serif !important;
    font-size: 23px;
    font-weight: 400;
    line-height: 28px;
}

.imprensa #assessoria-de-imprensa .subtitle {
    margin-bottom: 0;
    color: var(--aqua-navy);
    font-family: "Montserrat", sans-serif !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.imprensa #assessoria-de-imprensa .description {
    margin-bottom: 0;
    color: #000000;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.imprensa
    #assessoria-de-imprensa
    > .row:last-child
    > [class*="col-"]:nth-child(-n + 2)
    .subtitle
    + .description {
    color: var(--aqua-navy);
}

.imprensa #assessoria-de-imprensa br {
    display: none;
}

@media (min-width: 992px) {
    .imprensa .box-default-header .header.white-green-color span.breadcrumb-brk,
    .imprensa .box-default-header .header.white-green-color > h2 {
        position: relative;
        top: 54px;
    }

    .imprensa #assessoria-de-imprensa {
        grid-template-columns: 55% 45%;
        margin-bottom: 96px;
    }

    .imprensa .box-acessoria-imprensa-title {
        font-size: 48px;
        line-height: 56px;
    }

    .imprensa #assessoria-de-imprensa > .row > [class*="col-"] {
        padding: 0;
    }

    .imprensa #assessoria-de-imprensa > .row:first-child > [class*="col-"]:nth-child(2) {
        position: relative;
        top: -48px;
    }

    .imprensa #assessoria-de-imprensa > .row:last-child > [class*="col-"]:nth-child(1) {
        margin-top: 84px;
    }

    .imprensa #assessoria-de-imprensa > .row:last-child > [class*="col-"]:nth-child(2) {
        margin-top: 24px;
    }

    .imprensa #assessoria-de-imprensa > .row:last-child > [class*="col-"]:nth-child(3) {
        position: relative;
        top: -48px;
    }
}

/* Compliance (/compliance): título da introdução (Attitude), "Nossos
   Princípios (CERTO)" / "Nossos Pilares Fundamentais" (textRight da
   Attitude), "Principais instrumentos normativos" (Normative, reusa
   `.center-content`) e "Estrutura de Governança e Compliance" (Committee). */
.compliance .center-content h4,
.compliance .attitude-text h6,
.compliance .committee h4,
.compliance .committee h6:not(.subtitle) {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
}

/* Compliance (/compliance): "Canal confidencial" — o título vem do campo
   de conteúdo com `style="color:#3700FF"` gravado direto no HTML pelo
   editor (cor de placeholder do tema base). Uma regra !important em
   stylesheet tem prioridade sobre estilo inline sem !important, então dá
   para corrigir sem reeditar o conteúdo — reeditar não resolveria de
   forma duradoura, já que qualquer novo texto herdaria o mesmo padrão do
   editor. */
.compliance .box-image-right .text-container h2 {
    color: var(--aqua-navy) !important;
}

.compliance {
    background-color: #ffffff !important;
}

.compliance .box-default-header .header.dark-blue-color {
    background-color: var(--aqua-slate) !important;
}

.compliance .box-default-header .header.dark-blue-color > h2,
.compliance .box-default-header .header.dark-blue-color span.breadcrumb-brk a,
.compliance .box-default-header .header.dark-blue-color span.breadcrumb-brk svg {
    color: #ffffff !important;
}

.compliance .box-default-header .header.dark-blue-color span.breadcrumb-brk a {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400;
    text-decoration: none;
}

.compliance .box-default-header .banner-default-header {
    height: auto;
    aspect-ratio: 3410 / 1251;
    overflow: hidden;
}

.compliance .box-default-header .banner-default-header img {
    height: 100%;
    object-fit: cover;
}

.compliance #atitude-compliance {
    width: 87.5%;
    max-width: none;
    margin-right: auto;
    margin-bottom: 112px;
    margin-left: auto;
    padding: 0;
}

.compliance #atitude-compliance .attitude-image {
    display: none;
}

.compliance #atitude-compliance h4,
.compliance #principais-instrumentos h4,
.compliance #canal-confidencial h2,
.compliance #comite-de-etica .committee-desc h4 {
    margin-bottom: 16px;
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 40px;
    font-weight: 800;
    line-height: 48px;
}

.compliance #atitude-compliance h4 {
    font-size: 57px;
    line-height: 56px;
}

.compliance #atitude-compliance h2.subtitle,
.compliance #atitude-compliance .attitude-text h6,
.compliance #comite-de-etica .committee-desc h6 {
    margin-bottom: 16px;
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.compliance #atitude-compliance h2.subtitle {
    font-size: 40px;
    line-height: 38px;
}

.compliance #comite-de-etica .committee-desc h6 {
    font-size: 32px;
}

.compliance #atitude-compliance .attitude-text h6 {
    font-size: 36px;
    line-height: 32px;
}

.compliance #atitude-compliance p,
.compliance #principais-instrumentos p,
.compliance #canal-confidencial p,
.compliance #comite-de-etica p {
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.compliance #atitude-compliance .attitude-text + .attitude-text p {
    font-weight: 400;
}

.compliance #atitude-compliance .attitude-text + .attitude-text p strong {
    font-weight: 700;
}

.compliance #principais-instrumentos {
    width: 87.5%;
    max-width: none;
    margin-right: auto;
    margin-bottom: 112px;
    margin-left: auto;
    padding: 0;
}

.compliance #principais-instrumentos > .row,
.compliance #principais-instrumentos > .row > .col-12 > .row {
    margin-right: 0;
    margin-left: 0;
}

.compliance #principais-instrumentos .normatives-text,
.compliance #principais-instrumentos .normative-title,
.compliance #principais-instrumentos .normative-desc,
.compliance #principais-instrumentos .normative-icon {
    padding-right: 0;
    padding-left: 0;
}

.compliance #principais-instrumentos .normatives-text {
    max-width: none;
    margin-bottom: 48px;
}

.compliance #principais-instrumentos .normatives-text p {
    max-width: 620px;
}

.compliance #principais-instrumentos .support-text-secondary-bold,
.compliance #principais-instrumentos .support-text-secondary-bold p {
    color: var(--aqua-navy) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

.compliance #principais-instrumentos .support-text-secondary-bold p {
    margin: 0;
}

.compliance #principais-instrumentos .normative-desc {
    margin: 0;
}

.compliance #principais-instrumentos .border-white {
    border-color: var(--aqua-light-blue) !important;
}

.compliance #principais-instrumentos .normative-icon img {
    filter: brightness(0) saturate(100%) invert(43%) sepia(76%) saturate(1185%)
        hue-rotate(344deg) brightness(91%) contrast(86%);
}

/* Página /transparencia (AQUA) — lista de documentos rolável.
   ---------------------------------------------------------------------------
   A cliente vai cadastrar dezenas de PDFs nessa página. Sem limite de altura a
   página cresce indefinidamente e o rodapé fica inalcançável, então a lista de
   documentos vira uma área de rolagem própria: o texto de abertura continua
   fixo e só o bloco de linhas rola.

   O seletor é `> .row > .col-12:last-child` porque Normative.vue monta dois
   filhos dentro da `.row` — o primeiro é a `.normatives-text` (descrição) e o
   segundo é o `<b-col cols="12" v-if="withDesc">` que embrulha TODAS as linhas
   de documento. Escopado em `.aqua-transparencia` para não mexer na seção
   "Principais instrumentos" da /compliance, que tem poucos itens e não quer
   rolagem interna.

   `max-height` só age quando o conteúdo passa do limite: com 3 ou 4 documentos
   nada muda visualmente e nenhuma barra aparece. A linha cortada pela metade no
   fim da área é o próprio indicador de que há mais conteúdo abaixo. */
.aqua-transparencia
    .compliance
    #principais-instrumentos
    > .row
    > .col-12:last-child {
    max-height: 70vh;
    overflow-y: auto;
    /* Impede o scroll chaining: ao chegar no fim da lista a rolagem para, em vez
       de continuar arrastando a página inteira. */
    overscroll-behavior: contain;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--aqua-orange) var(--aqua-light-blue);
}

/* Chromium/Safari: a barra padrão é cinza e destoa da paleta da marca. */
.aqua-transparencia
    .compliance
    #principais-instrumentos
    > .row
    > .col-12:last-child::-webkit-scrollbar {
    width: 6px;
}

.aqua-transparencia
    .compliance
    #principais-instrumentos
    > .row
    > .col-12:last-child::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: var(--aqua-light-blue);
}

.aqua-transparencia
    .compliance
    #principais-instrumentos
    > .row
    > .col-12:last-child::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--aqua-orange);
}

.compliance #canal-confidencial {
    margin: 0 0 112px;
    background-color: #ffffff;
}

.compliance #canal-confidencial .text-container {
    margin: 0;
}

/* Conter o texto dentro da propria coluna.
   ---------------------------------------------------------------------------
   Em 1024 o titulo "Canal confidencial" saia por baixo da foto. Ele e um `h2`
   de 40px/800: pede ~400px, e a coluna de 45% menos os paddings oferece ~344px.
   Como a foto e o proximo item do grid e vem DEPOIS no DOM, ela pinta por cima
   do que transborda — dai a impressao de que a foto invadiu o texto, quando na
   verdade era o texto que saia da coluna.

   Antes tentei resolver trocando as faixas do grid por `minmax(0, Nfr)`, o que
   corrige o piso de `min-width: auto` da FAIXA mas nao impede um filho de
   exceder a caixa. O `.text-container` e um flex column com
   `align-items: flex-start` (box-image-right.scss), entao cada filho e
   dimensionado pelo proprio conteudo e pode passar da largura disponivel.

   O cap abaixo fecha isso na origem, e vale para qualquer largura: o container
   nunca passa da coluna, e nenhum filho passa do container. O `min-width: 0`
   e o que permite ao texto realmente quebrar em vez de empurrar. Fora de media
   query porque o ponto em que o titulo nao cabe depende do texto cadastrado no
   CMS, nao de uma largura fixa. */
.compliance #canal-confidencial .text-container {
    box-sizing: border-box;
    max-width: 100%;
}

.compliance #canal-confidencial .text-container > * {
    max-width: 100%;
    min-width: 0;
}

/* O titulo precisa CABER, nao apenas ser contido.
   ---------------------------------------------------------------------------
   O campo do CMS traz `<h2>Canal&nbsp;confidencial</h2>`. O `&nbsp;` faz o
   navegador tratar as duas palavras como uma unidade inquebravel de ~392px, e
   a coluna de 45% menos os paddings oferece ~344px em 1024 — dai o titulo
   passar por baixo da foto, que e o item seguinte do grid e pinta por cima.
   Nenhuma regra de largura resolve: e o conteudo mandando.

   `overflow-wrap: anywhere` resolveria, mas quebrando no meio da palavra
   ("confidenci / al"), o que e pior que o problema. Reduzir o corpo do titulo
   nas larguras onde ele nao cabe resolve sem quebra feia: em 1024 da ~33px
   (~322px de largura) e a partir de ~1250px volta aos 40px aprovados.

   Isto e BLINDAGEM, nao a correcao de raiz. O certo e limpar o campo no CMS
   (/admin/configurar-brk/compliance/edit) — o `&nbsp;` do titulo, o
   `<p>&nbsp;</p>`, o `<div>&nbsp;</div>` e os `style` de cor (#3700FF,
   #110043, hsl()) que so nao aparecem porque esta folha sobrescreve. Mas o
   conteudo pode voltar a ter `&nbsp;` a qualquer momento, entao a regra fica. */
.compliance #canal-confidencial .text-container h2 {
    font-size: clamp(28px, 3.2vw, 40px);
}

.compliance #canal-confidencial .text-container > div > p:empty,
.compliance #canal-confidencial .text-container > div > div:empty {
    display: none;
}

.compliance
    #canal-confidencial
    .text-container
    > div
    > p:nth-last-of-type(-n + 2) {
    font-size: 21px !important;
}

.compliance #canal-confidencial .img-box,
.compliance #canal-confidencial .img-box img {
    display: block;
    width: 100%;
    height: 100%;
}

.compliance #canal-confidencial .img-box img {
    object-fit: cover;
}

.compliance #comite-de-etica {
    margin-top: 0;
    padding: 96px 0;
    background-color: var(--aqua-light-blue) !important;
}

.compliance #comite-de-etica > .center-content {
    width: 87.5%;
    max-width: none;
    padding: 0;
}

.compliance #comite-de-etica .list-text {
    height: auto;
    margin-top: 0;
    padding: 0;
    gap: 12px;
}

.compliance #comite-de-etica .list-text .support-text-primary-bold,
.compliance #comite-de-etica .list-text h3 {
    margin: 0;
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.compliance #comite-de-etica .aqua-governance-copy p {
    margin: 0 0 16px;
}

.compliance #comite-de-etica .aqua-governance-copy {
    width: 100%;
    max-width: 540px;
}

.compliance #comite-de-etica .aqua-governance-copy p:last-child {
    margin-bottom: 0;
}

.compliance #patrocinios {
    display: none;
}

@media (min-width: 992px) {
    .compliance .box-default-header .header.dark-blue-color {
        height: auto;
        padding-bottom: 0;
        background: linear-gradient(
            to bottom,
            var(--aqua-slate) 0,
            var(--aqua-slate) 66%,
            transparent 66%,
            transparent 100%
        ) !important;
    }

    .compliance .box-default-header .header.dark-blue-color span.breadcrumb-brk,
    .compliance .box-default-header .header.dark-blue-color > h2 {
        position: relative;
        top: 54px;
    }

    .compliance #atitude-compliance {
        margin-top: 96px !important;
    }

    .compliance #atitude-compliance > .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(64px, 7vw, 136px);
        margin: 0;
    }

    .compliance #atitude-compliance > .row > .col-12:first-child {
        grid-column: 1 / -1;
        padding: 0;
    }

    .compliance #atitude-compliance > .row > .attitude-text,
    .compliance #atitude-compliance > .row > .attitude-text > div {
        display: contents;
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-image
        + .attitude-text
        p:nth-child(1) {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 520px;
        justify-self: start;
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-image
        + .attitude-text
        p:nth-child(2) {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        max-width: 560px;
        justify-self: start;
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-image
        + .attitude-text
        p:nth-child(3) {
        grid-column: 2;
        grid-row: 2 / span 2;
        width: 100%;
        max-width: 620px;
        justify-self: start;
        transform: translateX(-190px);
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        h6:nth-of-type(1) {
        grid-column: 1;
        grid-row: 4;
        width: 100%;
        max-width: 560px;
        justify-self: start;
        margin-top: 48px;
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        p:nth-of-type(1) {
        grid-column: 1;
        grid-row: 5;
        width: 100%;
        max-width: 560px;
        justify-self: start;
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        h6:nth-of-type(2) {
        grid-column: 2;
        grid-row: 4;
        width: 100%;
        max-width: 620px;
        justify-self: start;
        margin-top: 48px;
        transform: translateX(-190px);
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        p:nth-of-type(2) {
        grid-column: 2;
        grid-row: 5;
        width: 100%;
        max-width: 620px;
        justify-self: start;
        transform: translateX(-190px);
    }

    .compliance #atitude-compliance .attitude-text p {
        margin-bottom: 12px;
    }

    .compliance #principais-instrumentos .normatives-text {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
    }

    .compliance #principais-instrumentos .normatives-text h4 {
        white-space: nowrap;
    }

    /* No desktop a linha tem altura fixa (`min-height: 112px` abaixo), então a
       altura da área rolável é expressa em linhas — 5 visíveis — em vez de vh.
       O par `padding-right: 24px` / `margin-right: -12px` reserva a faixa da
       barra de rolagem fora da caixa de conteúdo: o Bootstrap já aplica 12px de
       padding nessa coluna, então os 12px extras de padding somados aos 12px
       negativos de margem deixam as linhas exatamente onde estavam — a barra
       ocupa a calha, não o espaço do ícone de PDF. */
    .aqua-transparencia
        .compliance
        #principais-instrumentos
        > .row
        > .col-12:last-child {
        max-height: 560px;
        margin-right: -12px;
        padding-right: 24px;
    }

    .compliance #principais-instrumentos > .row > .col-12 > .row {
        display: grid;
        grid-template-columns: 28% 64% 8%;
        align-items: center;
        min-height: 112px;
        column-gap: 0;
    }

    .compliance
        #principais-instrumentos
        > .row
        > .col-12
        > .row
        > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
    }

    .compliance #principais-instrumentos .normative-title,
    .compliance #principais-instrumentos .normative-icon {
        margin: 0;
    }

    .compliance #principais-instrumentos .normative-desc {
        padding: 24px 32px;
    }

    .compliance #principais-instrumentos .normative-icon {
        display: flex;
        align-self: start;
        align-items: center;
        justify-content: flex-end;
    }

    /* `grid-template-columns: 45% 55%` com itens de `min-width: auto` (o
       padrao) nao impede o item de TRANSBORDAR a propria faixa quando o
       conteudo tem largura minima maior que ela — e o que sobra invade a
       coluna vizinha, deixando a foto por cima do texto. `minmax(0, Nfr)`
       remove esse piso e faz o texto se ajustar dentro da coluna. O
       `column-gap` garante que as duas nunca se encostem. */
    .compliance #canal-confidencial {
        display: grid;
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        align-items: stretch;
    }

    .compliance #canal-confidencial > .col-lg-6 {
        width: auto;
        max-width: none;
        flex: none;
        padding: 0;
    }

    .compliance #canal-confidencial .text-container {
        max-width: 660px;
        padding: 80px 48px 80px 13.89%;
    }

    .compliance #comite-de-etica > .center-content {
        display: grid;
        grid-template-columns: 55% 45%;
        column-gap: 64px;
    }

    .compliance #comite-de-etica > .center-content > .row,
    .compliance #comite-de-etica > .center-content > .row > .col-12,
    .compliance #comite-de-etica .committee-desc {
        display: contents;
    }

    .compliance #comite-de-etica .committee-desc h4 {
        grid-column: 1;
        grid-row: 1;
    }

    .compliance #comite-de-etica .committee-desc > p {
        grid-column: 1;
        grid-row: 2 / span 2;
        margin: 0;
    }

    .compliance #comite-de-etica .committee-desc > p:empty {
        display: none;
    }

    .compliance #comite-de-etica .aqua-governance-copy {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    /* O h6 "Estrutura de Governanca:" e a lista abaixo dele ficavam na MESMA
       celula (ambos `grid-row: 2`), e a separacao vinha so de um
       `margin-top: 48px` na lista. Em 1920 o h6 cabe em uma linha (~29px) e os
       48px davam conta; em 1024 a coluna estreita e ele quebra em DUAS linhas
       (~58px), entao a lista subia por cima e "Presidencia" ficava embaixo do
       titulo. Agora sao linhas diferentes do grid: a separacao passa a ser
       estrutural e nao depende de quantas linhas o titulo ocupa. A coluna 1 ja
       vinha com `grid-row: 2 / span 2`, entao a linha 3 existe. */
    .compliance #comite-de-etica .committee-desc h6 {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-bottom: 16px;
        transform: translateX(-300px);
    }

    .compliance #comite-de-etica .list-text {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        margin-top: 0;
        transform: translateX(-300px);
    }
}

/* Corpo de texto (p/span/li/strong/em) destas 5 páginas: usa
   `--primary-font` (Roc Grotesk), que a spec 006 não realiasou para não
   afetar o site inteiro — por isso o mesmo font-family explícito que a
   Home usa precisa ser repetido aqui, página a página. */
.quem-somos p,
.quem-somos span,
.quem-somos li,
.quem-somos strong,
.quem-somos em,
.nossa-atuacao p,
.nossa-atuacao span,
.nossa-atuacao li,
.nossa-atuacao strong,
.nossa-atuacao em,
.work-with-us p,
.work-with-us span,
.work-with-us li,
.work-with-us strong,
.work-with-us em,
.imprensa p,
.imprensa span,
.imprensa li,
.imprensa strong,
.imprensa em,
.compliance p,
.compliance span,
.compliance li,
.compliance strong,
.compliance em {
    font-family: "Montserrat", sans-serif !important;
}

/* Botões de CTA (brk-btn outline, cor "button-background-blue") destas
   páginas: mesmo tratamento da Home (spec 006) — outline laranja em
   repouso, preenchido de laranja no hover/focus, em vez do azul de
   placeholder herdado do tema base. */
.quem-somos .brk-btn,
.nossa-atuacao .brk-btn,
.work-with-us .brk-btn,
.compliance .brk-btn {
    border-color: var(--aqua-orange) !important;
    background-color: transparent !important;
    color: var(--aqua-orange) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    text-align: center !important;
}

.quem-somos .brk-btn:hover,
.quem-somos .brk-btn:focus,
.quem-somos .brk-btn:active,
.nossa-atuacao .brk-btn:hover,
.nossa-atuacao .brk-btn:focus,
.nossa-atuacao .brk-btn:active,
.work-with-us .brk-btn:hover,
.work-with-us .brk-btn:focus,
.work-with-us .brk-btn:active,
.compliance .brk-btn:hover,
.compliance .brk-btn:focus,
.compliance .brk-btn:active {
    border-color: var(--aqua-orange) !important;
    background-color: var(--aqua-orange) !important;
    color: var(--aqua-off-white) !important;
}

/* ==========================================================================
      AQUA Pernambuco — ajustes solicitados em 18/09/2026
      ========================================================================== */

/* Cabeçalho: replica no hover da Agência Virtual o comportamento do CTA da
      landing page, sem depender das variantes Bootstrap compiladas com cores BRK. */
.button-agencia-virtual.btn-button-background-blue:hover,
.button-agencia-virtual.btn-button-background-blue:focus,
.button-agencia-virtual.btn-button-background-blue:active {
    border-color: var(--aqua-light-gray) !important;
    background-color: var(--aqua-light-gray) !important;
    color: var(--aqua-navy) !important;
    filter: none;
}

/* Institucional: o componente Nosso Futuro fica oculto na AQUA, mas a row pai
      mantinha 12em de padding e criava um vão vazio antes de Propósito e valores. */
.quem-somos > .row:has(#nosso-futuro) {
    display: none !important;
}

@media (min-width: 992px) {
    .quem-somos > .row:has(#proposito-e-valores) {
        padding-top: clamp(64px, 6vw, 96px) !important;
    }

    .quem-somos .neutral-surface > .col-12:has(#proposito-e-valores) {
        padding-top: clamp(64px, 6vw, 96px) !important;
    }

    /* `nowrap` atende o pedido de manter o título em uma linha, mas
       `.box-composicao-societaria` tem `overflow: hidden` (quem-somos.scss:211):
       se o texto estourar a coluna ele é CORTADO em silêncio, sem barra de
       rolagem e sem quebra. A coluna é `lg="4"`, ou seja `100vw/3 - 24px` de
       gutter, e "Composição societária" mede 11,86x o `font-size` em Montserrat
       700. A rampa anterior (2.5vw, piso 25px) deixava só ~10px de folga em
       992px — menos que o erro de um fallback de fonte. Com 2.35vw e piso 22px
       a folga passa a ~30px no pior caso e o teto de 40px do mockup não muda,
       porque continua sendo atingido a partir de ~1600px. */
    .quem-somos .box-composicao-societaria .content h4 {
        width: auto !important;
        max-width: none;
        font-size: clamp(22px, 2.35vw, 40px);
        line-height: 1.15;
        white-space: nowrap;
    }

    .quem-somos #nossos-valores > .content > .row > .grid:nth-child(4) {
        grid-column: 1 / span 2;
    }

    /* Força a quebra pedida no Word: "Confiança se constrói" / "com
       integridade". Medido na própria fonte do tema (Montserrat 700, 24px):
       "Confiança se constrói" = 271,0px (tem de caber) e "Confiança se constrói
       com" = 332,9px (não pode caber). A janela válida é 271–333px; 300px fica
       no meio, em vez dos 285px anteriores, que deixavam só 14px de folga na
       ponta de baixo — um fallback de fonte quebrava em três linhas.

       ATENÇÃO: o seletor é posicional (`:nth-child(4)`) e o título vem do CMS
       por `v-html` (ValoresQuemSomos.vue:11). Reordenar os valores no admin move
       esta regra para o card errado, sem aviso. A solução à prova disso é um
       `<br>` no próprio campo do CMS; enquanto não houver, mantenha esta regra
       e a posição do valor. */
    .quem-somos #nossos-valores > .content > .row > .grid:nth-child(4) .title {
        max-width: 300px;
        white-space: normal;
    }
}

/* Nossa Atuação: remove o espaço do wrapper regional vazio e uniformiza o
      ritmo vertical dos blocos visíveis no desktop. */
.nossa-atuacao .what-we-do-city:empty {
    display: none;
}

@media (min-width: 992px) {
    .nossa-atuacao #what-we-do,
    .nossa-atuacao #where-we-are {
        margin-bottom: clamp(64px, 6vw, 96px) !important;
    }

    .nossa-atuacao .white-green-color:has(#socio-environmental-performance),
    .nossa-atuacao .d-lg-block:has(#commitment) {
        margin-top: 0 !important;
        margin-bottom: clamp(64px, 6vw, 96px) !important;
    }

    /* ...exceto quando o bloco de "Compromisso com o cliente" e o ULTIMO da
       pagina, caso em que a margem dele soma com a do banner. Ver a regra
       `*:last-child` mais abaixo, que faz o mesmo em /imprensa: aqui ela NAO
       basta, porque `:has(#commitment)` carrega a especificidade de um id
       (1,2,0) e vence `.nossa-atuacao > .row > *:last-child` (0,2,0) mesmo
       com `!important` nos dois lados. Dai a regra dedicada, (1,3,0).
       O `:last-child` e essencial: `<cards-nossa-atuacao>` tem `v-if` e hoje
       nao renderiza, mas se a cliente preencher os cards no CMS este bloco
       deixa de ser o ultimo e volta a precisar da margem. */
    .nossa-atuacao .d-lg-block:has(#commitment):last-child {
        margin-bottom: 0 !important;
    }
}

/* Contato: o banner usa o mesmo registro "Precisa de Atendimento" do rodapé,
      mas tinha enquadramento e cores próprios. Mantém a mídia do CMS e replica a
      apresentação da marca, deixando o conteúdo seguinte no fluxo normal. */
.contato .header-contato {
    height: auto;
    padding-bottom: 0;
}

.contato .header-contato div.banner {
    position: relative;
    left: 50%;
    width: 100%;
    max-width: none;
    margin: 48px 0 0;
    transform: translateX(-50%);
}

.contato .header-contato div.banner .attendance,
.contato .header-contato div.banner .attendance-mobile {
    width: 100%;
    max-width: none;
    height: auto !important;
    min-height: 0;
    margin: 0 auto !important;
    padding: 0 7.5vw !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background-position: center !important;
    background-size: cover !important;
    border-radius: 36px;
    text-align: left;
}

.contato .header-contato .attendance {
    aspect-ratio: 1680 / 441;
}

.contato .header-contato .attendance h1 {
    white-space: nowrap !important;
}

.contato .header-contato .attendance h1 br {
    display: none !important;
}

.contato .header-contato .attendance > div {
    width: auto;
    max-width: none;
}

.contato .header-contato .attendance h1,
.contato .header-contato .attendance h2,
.contato .header-contato .attendance h3,
.contato .header-contato .attendance h4,
.contato .header-contato .attendance h5,
.contato .header-contato .attendance-mobile h1,
.contato .header-contato .attendance-mobile h2,
.contato .header-contato .attendance-mobile h3,
.contato .header-contato .attendance-mobile h4,
.contato .header-contato .attendance-mobile h5 {
    margin: 0 0 16px !important;
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 54px !important;
    font-weight: 700 !important;
    line-height: 56px !important;
    text-align: left !important;
}

.contato .header-contato .attendance h1 span,
.contato .header-contato .attendance h2 span,
.contato .header-contato .attendance h3 span,
.contato .header-contato .attendance h4 span,
.contato .header-contato .attendance h5 span,
.contato .header-contato .attendance h1 strong,
.contato .header-contato .attendance h2 strong {
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 54px !important;
    font-weight: 700 !important;
    line-height: 56px !important;
}

.contato .header-contato .attendance p {
    width: 650px;
    max-width: 650px;
    margin: 0 0 24px !important;
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-align: left !important;
}

.contato .header-contato .attendance p span {
    color: var(--aqua-off-white) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.contato .header-contato .attendance .brk-btn,
.contato .header-contato .attendance-mobile .brk-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: var(--aqua-cream) !important;
    background-color: transparent !important;
    color: var(--aqua-cream) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    text-align: center !important;
}

.contato .header-contato .attendance .brk-btn {
    width: 196px !important;
    min-width: 196px !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
}

.contato .header-contato .attendance .brk-btn:hover,
.contato .header-contato .attendance .brk-btn:focus,
.contato .header-contato .attendance .brk-btn:active,
.contato .header-contato .attendance-mobile .brk-btn:hover,
.contato .header-contato .attendance-mobile .brk-btn:focus,
.contato .header-contato .attendance-mobile .brk-btn:active {
    border-color: var(--aqua-cream) !important;
    background-color: var(--aqua-cream) !important;
    color: var(--aqua-navy) !important;
}

.contato > .row > .center-content.margin-top-banner-conteudo {
    margin-top: clamp(48px, 6vw, 80px) !important;
}

.contato .box-text-center {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto;
    gap: 32px;
    align-items: start;
    padding: 0;
}

.contato .box-text-center > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.contato .box-text-center .title h3 {
    color: var(--aqua-navy) !important;
}

.contato .box-text-center .button .brk-btn {
    border-color: var(--aqua-navy) !important;
    background-color: var(--aqua-navy) !important;
    color: var(--aqua-off-white) !important;
    white-space: nowrap;
}

.contato .box-text-center .text div {
    margin-top: 0;
}

/* Notícias: as variantes de botão são geradas pelo Bootstrap com hexadecimal
      fixo da BRK; o override garante o navy AQUA independentemente do build. */
.conteudo .noticias h1,
.conteudo .noticias h2,
.conteudo .noticias h3,
.conteudo .noticias h4,
.conteudo .noticias h5,
.conteudo .box-ultimas-noticias h1,
.conteudo .box-ultimas-noticias h2,
.conteudo .box-ultimas-noticias h3,
.conteudo .box-ultimas-noticias h4,
.conteudo .box-ultimas-noticias h5,
.conteudo .box-ultimas-noticias .ultimas-noticias-title span {
    color: var(--aqua-navy) !important;
}

.conteudo .noticias .brk-btn,
.conteudo .box-ultimas-noticias .brk-btn {
    border-color: var(--aqua-navy) !important;
    background-color: transparent !important;
    color: var(--aqua-navy) !important;
}

.conteudo .noticias .brk-btn:hover,
.conteudo .noticias .brk-btn:focus,
.conteudo .noticias .brk-btn:active,
.conteudo .box-ultimas-noticias .brk-btn:hover,
.conteudo .box-ultimas-noticias .brk-btn:focus,
.conteudo .box-ultimas-noticias .brk-btn:active {
    border-color: var(--aqua-navy) !important;
    background-color: var(--aqua-navy) !important;
    color: var(--aqua-off-white) !important;
}

/* Compliance: os deslocamentos negativos foram calculados para uma única
      resolução e faziam as colunas se sobreporem em notebooks. O grid passa a
      controlar a separação e os títulos longos podem quebrar normalmente. */
@media (min-width: 1200px) {
    .compliance #atitude-compliance > .row {
        column-gap: clamp(64px, 7vw, 112px);
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-image
        + .attitude-text
        p:nth-child(3),
    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        h6:nth-of-type(2),
    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        p:nth-of-type(2),
    .compliance #comite-de-etica .committee-desc h6,
    .compliance #comite-de-etica .list-text {
        max-width: 100%;
        transform: none;
    }

    .compliance #comite-de-etica > .center-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(64px, 7vw, 112px);
    }

    .compliance #principais-instrumentos .normatives-text h4 {
        white-space: normal;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .compliance #atitude-compliance > .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(32px, 4.5vw, 56px);
    }

    .compliance #atitude-compliance > .row > .attitude-text,
    .compliance #atitude-compliance > .row > .attitude-text > div {
        display: contents;
    }

    .compliance
        #atitude-compliance
        > .row
        > .attitude-image
        + .attitude-text
        p:nth-child(3),
    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        h6:nth-of-type(2),
    .compliance
        #atitude-compliance
        > .row
        > .attitude-text
        + .attitude-text
        p:nth-of-type(2) {
        min-width: 0;
        max-width: 100%;
        transform: none;
    }

    .compliance #atitude-compliance .attitude-text h6 {
        font-size: clamp(30px, 3vw, 34px);
        line-height: 1.15;
    }

    .compliance #comite-de-etica > .center-content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(32px, 4.5vw, 56px);
    }

    .compliance #comite-de-etica > .center-content > .row,
    .compliance #comite-de-etica > .center-content > .row > .col-12,
    .compliance #comite-de-etica .committee-desc {
        display: contents;
    }

    .compliance #comite-de-etica .committee-desc h6,
    .compliance #comite-de-etica .list-text {
        min-width: 0;
        max-width: 100%;
        transform: none;
    }

    .compliance #principais-instrumentos .normatives-text h4 {
        white-space: normal;
    }
}

/* Transparência: separa o conteúdo de abertura da primeira linha de documento
      e mantém o bloco afastado do banner em todas as larguras. */
.aqua-transparencia .compliance #principais-instrumentos {
    margin-top: clamp(64px, 7vw, 112px) !important;
}

.aqua-transparencia .compliance #principais-instrumentos .normatives-text {
    margin-bottom: clamp(48px, 5vw, 72px);
}

.aqua-transparencia .compliance #principais-instrumentos .normative-title {
    overflow-wrap: anywhere;
}

/* Home: remove o vão fixo de 200px entre Serviços e "AQUA Pernambuco".
      O banner de atendimento saiu deste seletor em 22/09: agora o mesmo
      `clamp` vale para todas as páginas, direto em `.footer .attendance`,
      então repeti-lo aqui só mascararia de onde o valor vem. O escopo em
      `body:has(.header-home-page-pkg-0)` continua necessário para o
      `.acting-home-pkg-0`, que também existe fora da Home. */
body:has(.header-home-page-pkg-0) .acting-home-pkg-0 {
    margin-top: clamp(64px, 6vw, 96px) !important;
}

/* Última seção de conteúdo não contribui espaço inferior.
   ---------------------------------------------------------------------------
   Quem governa o vão até o banner "Precisa de atendimento?" é o `margin-top`
   do próprio banner. Sem isto, três espaçamentos se empilham na MESMA
   fronteira e somam. Medido no DEV local em 1920×945, com o banner já em 96px:

       /nossa-atuacao ... 356px = 128 (.text-container, `padding: 8em` do
                                 box-image-right.scss:26) + 96 (margin-bottom
                                 da coluna) + 96 (banner) + ~36 intrínseco
       /imprensa ........ 240px = 96 (margin-bottom) + 96 (banner) + ~48

   A Home já nascia certa (104px) porque a seção acima dela não tem margem
   inferior — o banner governava sozinho. É a mesma correção que o
   `.acting-home-pkg-0 .left-box { margin-bottom: 0 }` faz lá.

   O seletor é `*:last-child`, e não a classe do bloco atual, de propósito:
   em /nossa-atuacao o último bloco só é "Compromisso com o cliente" porque
   `<cards-nossa-atuacao>` tem `v-if` e hoje não renderiza. Se a cliente
   preencher os cards no CMS, a regra acompanha sozinha o novo último bloco,
   em vez de zerar a margem no meio da página.

   NÃO resolve os 128px de `padding-bottom` do `.text-container`: aquilo é
   respiro INTERNO do box, pensado para emoldurar o texto ao lado da imagem.
   Mexer nele é decisão visual e ficou fora desta correção.

   Em /nossa-atuacao esta regra sozinha NAO vence: o bloco final e alvo de
   `.nossa-atuacao .d-lg-block:has(#commitment)`, cujo `:has()` de id da
   especificidade (1,2,0) contra os (0,2,0) daqui. A regra companheira, com
   `:last-child` e especificidade maior, esta junto daquela. Esta aqui e o
   caso geral, e e o que resolve /imprensa. */
.nossa-atuacao > .row > *:last-child,
.imprensa > *:last-child {
    margin-bottom: 0 !important;
}

/* Composicao societaria: a caixa CRESCE em vez de cortar.
   ---------------------------------------------------------------------------
   O tema base da `height: 500px` fixos a `.composicao-societaria-content`
   (quem-somos.scss:236) e `overflow: hidden` ao `.box-composicao-societaria`
   (quem-somos.scss:211). A coluna do texto e `lg="4"` com `offset-lg="7"`,
   entao a largura dela acompanha a janela: ~640px em 1920, mas so ~341px em
   1024. O mesmo texto quebra em muito mais linhas na largura menor, estoura os
   500px e e CORTADO — e, como o conteudo e centralizado verticalmente
   (`align-items: center`), o corte acontece EM CIMA E EMBAIXO ao mesmo tempo,
   sem barra de rolagem e sem aviso. Em 1024 sumiam o titulo "Composicao
   societaria" e o fim do paragrafo.

   `height: auto` com `min-height: 500px` preserva a altura original onde o
   texto cabe e deixa a caixa crescer onde nao cabe. O fundo e
   `background-size: cover`, entao acompanha. O `padding-bottom` da respiro
   quando ela cresce.

   FORA de qualquer media query de proposito: o ponto em que o texto estoura
   depende do tamanho do que esta cadastrado no CMS, que pode crescer a
   qualquer momento. Prender isto a uma largura fixa so adia o corte. */
.quem-somos .box-composicao-societaria .composicao-societaria-content {
    height: auto !important;
    min-height: 500px;
    padding-bottom: 48px;
}

/* Trabalhe Conosco: o vão entre o banner e "Por meio dos nossos (...)".
   ---------------------------------------------------------------------------
   A projeção do banner para fora da faixa colorida do cabeçalho NÃO depende só
   da largura da janela. No tema base a faixa tem `height: 75vh`
   (header.scss:17) e o banner dentro dela `height: 40vw` (header.scss:51),
   então o quanto ele sobra por baixo é:

       projeção = 40vw − 75vh + B

   com B = distância do topo da faixa até o topo do banner. B foi MEDIDO no
   DEV local em 22/09, não estimado: em 1920×945 o banner termina em y=919 em
   /trabalhe-conosco, /nossa-atuacao e /imprensa — as três páginas usam o
   mesmo `box-default-header`, e as três dão o mesmo valor, **B ≈ 151px**.
   (A versão anterior deste comentário estimava 269px por soma de paddings;
   a medição desmentiu, e era aí que nasciam os 190px de vão.)

   A regra anterior calibrava a margem só em `vw` — `clamp(180px, 16vw, 308px)`,
   com uma faixa extra entre 1200px e 1399.98px. Essa faixa extra não existia
   porque o cabeçalho "cresce mais" nessa largura: ela aparecia porque
   1366×768 e 1440×900 têm ALTURAS diferentes, e a altura acabou codificada
   como se fosse largura. O efeito é que bastava redimensionar a janela em
   altura para quebrar: em 1920×800 a margem aplicada (307px) ficava ~190px
   abaixo da projeção real e o banner cobria o texto; em 1366×900 sobravam
   ~120px de vão vazio — exatamente a queixa original, só que ao contrário.

   Agora a margem usa a fórmula de verdade, na MESMA unidade que a regra do
   tema base (`vh`, não `dvh`, senão os dois termos não se cancelam), mais um
   respiro de 72px. O `max()` segura o piso quando a janela é alta o bastante
   para o banner não projetar nada.

   O único número a mexer é a constante, e a relação é direta:

       vão branco = constante − B_real = constante − 151px

   Como os dois termos em `vw`/`vh` se cancelam, esse vão é CONSTANTE em
   qualquer viewport — era esse o objetivo da fórmula. Com 341px dava 190px
   de vão; a constante caiu para **271px**, que dá os **120px** medidos entre
   o banner e o primeiro título em /nossa-atuacao e /imprensa. Esses 120px são
   a referência que o Word de 18/09 pede para replicar ("o espaçamento entre a
   imagem de banner e o primeiro tópico seja a melhor opção").

   Subir a constante abre vão; baixá-la fecha, até o banner cobrir o texto
   quando ela chegar perto de 151px.

   GENERALIZADO em 22/09. A formula nasceu escopada em /trabalhe-conosco, e
   isso estava errado: TODAS as paginas institucionais usam o mesmo
   `box-default-header`, entao todas sofriam o mesmo efeito. Com margem fixa,
   quanto MENOR a largura menos o banner projeta, e a margem que sobra vira
   branco puro. Medido com a base de 330px:

       1920x945 ... projecao 210px -> vao 120px   <- a unica calibrada
       1440x900 ... projecao  52px -> vao 278px
       1280x800 ... projecao  63px -> vao 267px
       1024x827 ... projecao   0px -> vao 330px

   As constantes abaixo foram escolhidas para PRESERVAR a margem atual em
   1920x945 — onde cada pagina foi aprovada — e deixar o resto se ajustar:

       .margin-top-banner-conteudo ......... 330px em 1920 -> constante 271
       ...-espaco-maior (/compliance) ...... 430px em 1920 -> constante 371
       row de /quem-somos (inline 280px) ... 280px em 1920 -> constante 221

   So a partir de 992px: abaixo disso a faixa do tema base e 60vh (md) ou
   40vh, nao 75vh, e os termos deixariam de se cancelar. O `B` de md nao foi
   medido, entao aquela faixa segue com a margem fixa do tema. */
@media (min-width: 992px) {
    .margin-top-banner-conteudo {
        margin-top: max(72px, calc(40vw - 75vh + 271px)) !important;
    }

    .margin-top-banner-conteudo-espaco-maior {
        margin-top: max(72px, calc(40vw - 75vh + 371px)) !important;
    }

    /* Esta row carrega `style="margin-top: 280px"` inline no QuemSomos.vue,
       por isso precisa de `!important` — e do `:has()` para nao pegar outras
       `.row.no-margin` da mesma pagina. */
    .quem-somos > .row.no-margin:has(#quem-somos) {
        margin-top: max(72px, calc(40vw - 75vh + 221px)) !important;
    }
}

@media (max-width: 1199.98px) {
    .contato .box-text-center {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contato .box-text-center .button {
        text-align: left;
    }
}

/* Quem Somos: nesta faixa o segundo bloco de Nossos Números não comporta os
   títulos sem criar overflow. Uma coluna preserva o conteúdo legível. */
@media (min-width: 992px) and (max-width: 1365.98px) {
    .quem-somos #nossos-numeros .nossos-numeros {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* OBRIGATORIO junto da troca para uma coluna. O bloco de >=992px coloca
       cada item explicitamente (item 1 em 1/1, item 2 em 1/2, item 3 em 2/1).
       Trocar so o `grid-template-columns` NAO desfaz essas colocacoes: o item 3
       continua pedindo a COLUNA 2, que aqui nao existe mais, entao o navegador
       cria uma coluna implicita e o item 3 volta para a LINHA 1 — em cima do
       item 1. Era o embaralhado de "estamos em / atendemos" visto em 1024px.
       `grid-row: auto` devolve o fluxo natural; sem ele a linha continua fixa. */
    .quem-somos #nossos-numeros .nossos-numeros .numeros-item:nth-child(1),
    .quem-somos #nossos-numeros .nossos-numeros .numeros-item:nth-child(2),
    .quem-somos #nossos-numeros .nossos-numeros .numeros-item:nth-child(3) {
        grid-column: 1;
        grid-row: auto;
    }

    .quem-somos #nossos-numeros .nossos-numeros h1,
    .quem-somos #nossos-numeros .nossos-numeros h1 span,
    .quem-somos #nossos-numeros .nossos-numeros h1 strong {
        white-space: normal;
    }
}

@media (max-width: 991.98px) {
    .quem-somos > .row:has(#proposito-e-valores) {
        padding-top: 48px !important;
    }

    .quem-somos .neutral-surface > .col-12:has(#proposito-e-valores) {
        padding-top: 48px !important;
    }

    .contato .header-contato {
        padding-bottom: 0;
    }

    .contato .header-contato div.banner {
        margin-top: 32px;
        width: 91.666667vw;
    }

    .contato .header-contato div.banner .attendance-mobile {
        min-height: 300px;
        padding: 36px 24px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left;
    }

    .contato .header-contato .attendance-mobile > div {
        max-width: 65%;
    }

    .contato .header-contato .attendance-mobile h1,
    .contato .header-contato .attendance-mobile h2,
    .contato .header-contato .attendance-mobile h3,
    .contato .header-contato .attendance-mobile h4,
    .contato .header-contato .attendance-mobile h5,
    .contato .header-contato .attendance-mobile h1 span,
    .contato .header-contato .attendance-mobile h2 span,
    .contato .header-contato .attendance-mobile h3 span,
    .contato .header-contato .attendance-mobile h4 span,
    .contato .header-contato .attendance-mobile h5 span {
        color: var(--aqua-off-white) !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 36px !important;
        text-align: left !important;
    }

    .contato .header-contato .attendance-mobile p,
    .contato .header-contato .attendance-mobile p span {
        color: var(--aqua-off-white) !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 20px !important;
        text-align: left !important;
    }

    .contato .box-text-center {
        display: grid;
        padding: 0;
    }

    /* O tema base fixa o mapa em 25em (400px); no mobile ele precisa seguir
       a largura útil da coluna. */
    .work-with-us #map-box .map-img img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Mantém Nossas vagas como botões no mobile, em vez de restaurar os
       cards do tema base com imagem e descrição. */
    .work-with-us #nossas-vagas .vacancy-box {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 24px !important;
    }

    .work-with-us #nossas-vagas .vacancy {
        display: inline-flex;
        width: auto;
        min-height: 44px;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        padding: 8px 20px;
        margin: 0;
        border: 1px solid var(--aqua-orange);
        border-radius: 8px;
        background-color: transparent;
        color: var(--aqua-orange) !important;
    }

    .work-with-us #nossas-vagas .vacancy img,
    .work-with-us #nossas-vagas .vacancy .text-secondary {
        display: none;
    }

    .work-with-us #nossas-vagas .vacancy h2 {
        margin: 0;
        color: var(--aqua-orange) !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
    }

    .work-with-us #nossas-vagas .vacancy:hover,
    .work-with-us #nossas-vagas .vacancy:focus {
        background-color: var(--aqua-orange);
        color: #ffffff !important;
    }

    .work-with-us #nossas-vagas .vacancy:hover h2,
    .work-with-us #nossas-vagas .vacancy:focus h2 {
        color: #ffffff !important;
    }

    .aqua-transparencia .compliance #principais-instrumentos {
        margin-top: 96px !important;
    }
}

/* ==========================================================================
      AQUA Pernambuco — "Ajustes site 22-09" (cores)
      ==========================================================================

   Fonte: `Ajustes site AQUA Pernambuco - 22-09.docx`. O documento traz sete
   pedidos em cinco telas. Este bloco cobre os SEIS DE COR; o sétimo — o vão
   entre seções da /transparencia — está no bloco seguinte, feito depois da
   validação das cores.

   Todos os seis têm a MESMA causa: um azul que não é da marca sobrevive
   porque vem do default de uma biblioteca que o tema nunca redefiniu. São
   três azuis, de três origens distintas:

     • #0d6efd — azul primário do Bootstrap 5, em `--bs-pagination-*` e em
       `--bs-dropdown-link-active-bg`.
     • #5897fb — azul do vue-select (`--vs-dropdown-option--active-bg`), que
       NÃO vem do style.css: o style-loader o injeta em runtime, numa <style>
       no fim do <head>, a partir do script.js.
     • #3700ff — o violeta dos prints. O `config/bootstrap.scss` do brk
       registra esse hexadecimal no mapa de temas sob o nome
       "button-background-blue", e o Bootstrap gera dele a variante
       `.btn-outline-button-background-blue`. Como é mapa Sass, o valor fica
       chumbado no CSS compilado — não há var() a trocar em runtime.

   SOBRE O LARANJA. O documento escreve #c75b25; a paleta da marca já usa
   `--aqua-orange: #c85b28`, fixado na entrega de 08/09. A diferença é de
   1/0/3 em RGB, imperceptível, e trocar a variável recoloriria todo o laranja
   já aprovado do site. Por isso estas regras consomem a variável existente em
   vez do hexadecimal do documento. O azul #203a6d pedido é, esse sim,
   exatamente o `--aqua-navy` já em uso.

   O QUE NÃO ESTÁ AQUI, e por quê:

     • Seleção do dropdown "Fale conosco" da barra superior (último item do
       documento). Já resolvido: a regra de `.dropdown-menu` lá em cima
       redefine `--bs-dropdown-link-active-bg` para o navy. O print do
       documento é anterior a ela. Nada a fazer — só conferir no ar.
     • Vão entre seções da /transparencia. Ver o bloco seguinte. */

/* Busca (/busca) — paginação no rodapé da lista de resultados.
   ---------------------------------------------------------------------------
   `b-pagination` (bootstrap-vue) emite a marcação padrão do Bootstrap, e o
   `style.css` do tema nunca redefine as vars de `.pagination`: ficam os
   defaults, tanto no item selecionado (`--bs-pagination-active-bg: #0d6efd`)
   quanto nos demais números e nas setas
   (`--bs-pagination-color: var(--bs-link-color)`, o mesmo azul).

   O documento pede o laranja da marca na seleção. Recolorir SÓ o item ativo
   deixaria o "2" e as quatro setas em #0d6efd encostados no laranja — o azul
   errado continuaria na tela, no mesmo controle e a um centímetro do que foi
   corrigido. Por isso o bloco inteiro passa para o laranja: seleção
   preenchida, os outros itens em texto laranja.

   Escopado em `.busca` (raiz do Busca.vue) porque é a única paginação que o
   documento cita — a de /conteudos não foi avaliada pela agência e segue como
   está.

   Redefine as vars no próprio `.pagination` em vez de sobrescrever cada
   seletor `.page-link`, mesmo padrão já usado no `.dropdown-menu` acima.
   `!important` porque custom properties também cascateiam e o style.css as
   declara no mesmo seletor. */
.busca .pagination {
    --bs-pagination-color: var(--aqua-orange) !important;
    --bs-pagination-hover-color: var(--aqua-orange) !important;
    --bs-pagination-focus-color: var(--aqua-orange) !important;
    --bs-pagination-active-bg: var(--aqua-orange) !important;
    --bs-pagination-active-border-color: var(--aqua-orange) !important;
    --bs-pagination-active-color: var(--aqua-off-white) !important;
    /* O anel de foco do Bootstrap é azul mesmo depois de trocadas as cores do
       item; sem esta linha ele reintroduz o #0d6efd a cada clique. */
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(200, 91, 40, 0.25) !important;
}

/* Contato (/contato) — dropdown "Assuntos" do modal "Fale conosco".
   ---------------------------------------------------------------------------
   O controle é um `v-select` (vue-select) do ModalContactForm.vue. O caminho
   óbvio — redefinir `--vs-dropdown-option--active-bg` no `:root` daqui — NÃO
   funciona sozinho: o CSS do vue-select é injetado em runtime pelo
   style-loader, numa <style> no fim do <head>, portanto DEPOIS desta folha na
   cascata; em empate de especificidade (`:root` contra `:root`), a última
   declaração vence.

   Por isso a regra ataca o seletor `.vs__dropdown-option--highlight`
   diretamente, com `!important`, que vence independentemente da ordem. Essa
   classe marca o item sob o `typeAheadPointer`, que o vue-select move no
   mouseover — é exatamente o hover que o documento cita.

   Sem escopo de página de propósito: hoje `<v-select>` tem UM único consumidor
   em todo o tema (este modal), então a regra global não alcança mais nada, e
   se um segundo select aparecer amanhã ele já nasce na cor certa.

   O texto em branco é pedido explícito do documento, para contraste: sobre o
   navy #203a6d o branco dá ~11:1, bem acima do 4,5:1 da WCAG AA. */
.vs__dropdown-option--highlight {
    background: var(--aqua-navy) !important;
    color: #ffffff !important;
}

/* O branco no `<li>` acima NÃO chega sozinho ao texto, e isso custou uma volta:
   o rótulo não é filho de texto direto da opção. O ModalContactForm passa um
   `<template v-slot:option>` que embrulha o label num <span>, e o style.css do
   tema traz uma regra SEM NENHUM escopo — `span { color: var(--dark-blue-color) }`
   — que alcança todo <span> do site. Regra explícita vence herança, então o
   fundo virava navy e o texto seguia escuro: exatamente o "preto ficou ruim de
   ler" apontado na validação de 22/09.

   Medido no local, na opção sob o mouse: o <li> computava rgb(255,255,255) e o
   <span> dentro dele, rgb(0,0,0).

   Daí a repetição no descendente. `strong`/`em` entram junto porque o rótulo
   vem do admin e pode ganhar formatação sem aviso — e a mesma regra global de
   `span` tem irmãs para eles. */
.vs__dropdown-option--highlight span,
.vs__dropdown-option--highlight strong,
.vs__dropdown-option--highlight em {
    color: #ffffff !important;
}

/* Notícias — "Veja outras notícias" (rodapé de /conteudos e das páginas de
   conteúdo): a linha divisória e o botão "Mais notícias".
   ---------------------------------------------------------------------------
   A linha é `.news-box .divider-down`, que o `footer.scss` do brk pinta com
   `border-color: $cyan-color` — variável Sass, ou seja, hexadecimal fixo no
   CSS compilado, sem var() em tempo de execução.

   O botão sai do CMS com a cor `button-background-blue` (ButtonColorEnum), o
   #3700ff descrito no cabeçalho deste bloco — é ele o violeta do print, não um
   link visitado.

   ATENÇÃO: a regra de `.conteudo .noticias .brk-btn` mais acima parece cobrir
   isto e não cobre. Ela trata a LISTA de notícias da /conteudos; este é o
   bloco "Veja outras notícias" do rodapé (News.vue), que tem raiz própria
   (`.news-box`) e aparece também fora daquele wrapper. São dois botões
   diferentes com a mesma cor errada. */
.news-box .divider-down {
    border-color: var(--aqua-orange) !important;
}

.news-box .brk-btn {
    border-color: var(--aqua-navy) !important;
    background-color: transparent !important;
    color: var(--aqua-navy) !important;
}

.news-box .brk-btn:hover,
.news-box .brk-btn:focus,
.news-box .brk-btn:active {
    border-color: var(--aqua-navy) !important;
    background-color: var(--aqua-navy) !important;
    color: var(--aqua-off-white) !important;
}

/* Barra superior — "Selecione uma cidade", dentro do modal "Escolha um local
   para conhecer a nossa atuação".
   ---------------------------------------------------------------------------
   Não é um <select>: o ModalSelectCity monta um `SelectSearch`, cujo gatilho é
   um `brk-btn` com `buttonColor="button-background-blue"` chumbado no próprio
   componente Vue. É o mesmo #3700ff do botão de notícias, e é por isso que o
   print mostra borda, texto e o alfinete em violeta já em repouso — o hover
   que o documento cita apenas PREENCHE o botão com a mesma cor, tornando-a
   óbvia.

   Como a cor vem do componente e não do admin, não há ajuste possível no CMS:
   tem de ser aqui. Trocar `buttonColor` no Vue resolveria na origem, mas o
   arquivo é compartilhado com a BRK e exigiria rebuild dos dois temas.

   Escopado em `.modal-select-city` de propósito. O mesmo `SelectSearch` também
   é usado pelo MapBox (/trabalhe-conosco) e pelo SelectTabBox, que o documento
   não avaliou — ficam como estão. */
.modal-select-city .select-box .brk-btn {
    border-color: var(--aqua-navy) !important;
    background-color: transparent !important;
    color: var(--aqua-navy) !important;
}

.modal-select-city .select-box .brk-btn:hover,
.modal-select-city .select-box .brk-btn:focus,
.modal-select-city .select-box .brk-btn:active {
    border-color: var(--aqua-navy) !important;
    background-color: var(--aqua-navy) !important;
    color: var(--aqua-off-white) !important;
}

/* O chevron do gatilho é pintado à parte pelo `select-search.scss`
   (`color: $dark-blue-color`, hexadecimal fixo), então não acompanha o `color`
   do botão e continuaria escuro sobre o navy no hover. */
.modal-select-city .select-box .brk-btn:hover .fa-chevron-down,
.modal-select-city .select-box .brk-btn:hover .fa-chevron-up,
.modal-select-city .select-box .brk-btn:focus .fa-chevron-down,
.modal-select-city .select-box .brk-btn:focus .fa-chevron-up {
    color: var(--aqua-off-white) !important;
}

/* ==========================================================================
      AQUA Pernambuco — "Ajustes site 22-09" (espaçamento da Transparência)
      ==========================================================================

   Pedido: "Ajustar espaçamento entre seções; o título placeholder está muito
   próximo da seção anterior (Dados abertos) e longe do conteúdo da sua seção."

   POR QUE ACONTECE. Os dois títulos e o parágrafo NÃO são markup do tema: são
   o campo rich-text `transparencia_page_description`, que a transparencia.blade
   entrega ao `Normative.vue` e o componente injeta com v-html em
   `.normatives-text`. Hoje o campo vale, literalmente:

       <h4>Dados abertos</h4>
       <p>Para a AQUA Pernambuco é fundamental…</p>
       <h4>Lorem ipsum</h4>

   O segundo <h4> é um RÓTULO DE SEÇÃO, mas o conteúdo que ele rotula não está
   ao lado dele: a lista de documentos é a COLUNA IRMÃ que o Normative.vue
   monta (o `<b-col cols="12" v-if="withDesc">`). Ou seja, o vão abaixo do
   título não é margem dele — é o `margin-bottom` do `.normatives-text`
   inteiro, dimensionado para separar o texto de abertura da lista. Um
   espaçamento pensado para o bloco todo acabou caindo entre o rótulo e o que
   ele rotula.

   MEDIDO no local, antes desta regra (vão acima / vão abaixo, em px):

       1920px …… 16 / 104
       1440px …… 16 / 104
       1024px ……  16 /  83

   Está invertido: o rótulo fica colado no parágrafo da seção ANTERIOR e
   distante da sua própria lista. O olho então lê "Lorem ipsum" como remate de
   "Dados abertos", que é exatamente a leitura errada apontada.

   A REGRA inverte a proporção: empurra o título para baixo (afastando-o da
   seção anterior) e encurta o que sobra até a lista. Resultado medido, mesmas
   três larguras (acima / abaixo, em px):

       1920px …… 112 / 40
       1440px …… 101 / 38
       1024px ……  72 / 34

   O vão de baixo some quase todo porque as linhas de documento já têm
   `min-height: 112px` com `align-items: center`, o que por si só reserva um
   respiro acima da primeira linha.

   POR QUE `> p + h4:last-child`, e não só `> h4:last-child`. O conteúdo é do
   admin e pode mudar sem aviso. O seletor exige as três condições que fazem
   dele um SEGUNDO título: ser <h4>, ser o último filho e vir logo depois de um
   parágrafo. Se a cliente apagar o rótulo, ou puser texto depois dele, ou
   deixar só "Dados abertos" no campo, nada casa e o espaçamento volta sozinho
   ao padrão — em vez de empurrar o título principal para longe do cabeçalho.
   É a falha segura que interessa aqui, já que ninguém revisita este CSS quando
   mexe no admin.

   Sem media query de propósito: os `clamp()` já cobrem de 1024 a 1920, e o
   problema é de proporção, não de largura. */

.aqua-transparencia
    .compliance
    #principais-instrumentos
    .normatives-text
    > p
    + h4:last-child {
    /* AQUI mora a altura do vão de cima — é este `margin-top`, e não uma
       margem do parágrafo. As duas margens COLAPSAM (o <p> acima traz 16px),
       então o vão medido é exatamente o maior dos dois, ou seja este valor.

       O `clamp()` não é arbitrário: é o mesmo `clamp(64px, 7vw, 112px)` que o
       `#principais-instrumentos` já usa como separação de seção nesta página.
       Reusar o valor mantém o ritmo vertical da /transparencia coerente — o
       rótulo passa a se separar da seção anterior com o MESMO respiro com que
       o bloco inteiro se separa do banner.

       Subiu de `clamp(56px, 5vw, 88px)` na validação de 22/09 ("dá pra descer
       mais um pouquinho"). */
    margin-top: clamp(64px, 7vw, 112px);
    margin-bottom: 8px;
}

/* O vão até a lista mora aqui, não no <h4> — ver a explicação acima. Vence o
   `clamp(48px, 5vw, 72px)` da regra de `.normatives-text` mais em cima porque
   o `:has()` soma a especificidade do seu argumento: (1,4,2) contra (1,3,0). */
.aqua-transparencia
    .compliance
    #principais-instrumentos
    .normatives-text:has(> p + h4:last-child) {
    margin-bottom: clamp(8px, 1vw, 16px);
}