/*
Theme Name: AquaONG
Theme URI: https://github.com/aquaong/aquaong
Author: Lucas Junqueira
Description: Tema base do projeto Aqua ONG.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aquaong
Tags: blog, one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# CSS Reset
--------------------------------------------------------------*/

/* ------------------------------------------------------------------
   # CSS Reset
   Normaliza estilos padrão dos navegadores para uma base consistente.
   Baseado em práticas comuns de resets modernos.
------------------------------------------------------------------- */

/* 1. Box sizing universal */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remover margens e paddings padrão */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 3. Reset de listas */
ol,
ul {
	list-style: none;
}

/* 4. Elementos de bloco HTML5 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

/* 5. Elementos de mídia fluidos */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 6. Links */
a {
	text-decoration: none;
	color: inherit;
	background-color: transparent;
}

/* 7. Formulários — herdam a fonte e alinham */
button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

textarea {
	overflow: auto;
}

/* 8. Tabelas */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 9. Base do documento */
html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #111;
	background-color: #fff;
	word-wrap: break-word;
}

/* 10. Cabeçalhos com tamanho consistente (baseado no template) */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: inherit;
	line-height: 1.2;
}

/* 11. Blocos de citação e código */
blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: "";
	content: none;
}

code,
kbd,
samp,
pre {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 1em;
}

/* 12. Acessibilidade */
[hidden] {
	display: none;
}

:focus {
	outline: 3px solid #4f9cf9;
	outline-offset: 2px;
}

hr {
	height: 0;
	overflow: visible;
	box-sizing: content-box;
}

/*--------------------------------------------------------------
# Modelo de página: Aviso
--------------------------------------------------------------*/

/* Página em tela cheia, sem cabeçalho/rodapé, alinhada ao centro. */
body.aviso-body {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	padding: 24px;
}

/* Bloco "imagem + título + texto" centralizado vertical e horizontalmente. */
.aviso {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: auto; /* Centraliza e evita corte do topo quando o conteúdo excede a tela. */
	text-align: center;
	color: var( --aviso-text-color, #111 );
}

.aviso__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 1.5rem;
}

.aviso__title {
	margin: 0 0 1rem;
	font-size: clamp( 1.75rem, 5vw, 3rem );
	font-weight: 700;
	line-height: 1.2;
	color: var( --aviso-title-color, #111 );
}

.aviso__text {
	max-width: 100%;
	font-size: 1.125rem;
	line-height: 1.6;
}

.aviso__text p {
	margin: 0 0 1rem;
}

.aviso__text p:last-child {
	margin-bottom: 0;
}

.aviso__text a {
	color: var( --aviso-link-color, #1a73e8 );
	text-decoration: underline;
}

/* Largura máxima do bloco conforme a orientação da tela. */
@media ( orientation: landscape ) {
	.aviso {
		max-width: var( --aviso-max-width-h, 80% );
	}
}

@media ( orientation: portrait ) {
	.aviso {
		max-width: var( --aviso-max-width-v, 90% );
	}
}

/*--------------------------------------------------------------
# Variáveis globais
--------------------------------------------------------------*/

:root {
	/* Cores da marca */
	--aq-cor-primaria: #1b3360;
	--aq-cor-verde: #91c245;
	--aq-cor-creme: #f4eee9;
	--aq-cor-azul-claro: #7ed2ea;
	--aq-cor-cinza: #3d3d3b;

	/*
	 * Linha fina que separa o cabeçalho e o rodapé da área de conteúdo da página.
	 */
	--aq-cor-linha: #dcdcdc;

	/*
	 * Largura de conteúdo dos blocos (a "área de conteúdo").
	 *
	 * Os blocos ocupam toda a largura da página, mas o conteúdo deles fica
	 * dentro desta área, que vai do ponto de início da logomarca do cabeçalho
	 * até o fim dos botões de redes sociais do cabeçalho.
	 * No design: de x=166 a x=1200, em uma tela de 1366px.
	 */
	--aq-largura-conteudo: 1034px;

	/* Cabeçalho / rodapé — variação "Padrão" */
	--aq-superficie: #ffffff;
	--aq-cor-menu: #1b3360;
	--aq-cor-icone: #1b3360;
	--aq-cor-botao-menu: #1b3360;
	--aq-traco: #7ed2ea;
	--aq-traco-rodape: #7ed2ea;
}

/*
	* Além do que muda na página toda, cada variação tem a sua própria cor para o
	* ícone do botão de menu móvel — um valor independente da cor dos textos do
	* menu e da cor dos ícones de redes sociais.
	*/
body.aq-cabecalho-padrao {
	--aq-superficie: #ffffff;
	--aq-cor-menu: #1b3360;
	--aq-cor-icone: #1b3360;
	--aq-cor-botao-menu: #1b3360;
	--aq-traco-rodape: #7ed2ea;
}

body.aq-cabecalho-botafogo {
	--aq-superficie: #505ad6;
	--aq-cor-menu: #ffffff;
	--aq-cor-icone: #ffffff;
	--aq-cor-botao-menu: #ffffff;
	--aq-traco-rodape: #55bf4c;
}

/*--------------------------------------------------------------
# Base tipográfica global
--------------------------------------------------------------*/

body {
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.1;
	color: var( --aq-cor-primaria );
	background-color: #ffffff;
}

/* Títulos e parágrafos compartilham as mesmas margens. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 1rem;
	line-height: 1.1;
}

/* Todos os títulos do site recebem 10px de espaçamento interno em todos os cantos. */
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 10px;
}

/*
 * Títulos SEM cor de fundo não têm espaçamento à esquerda: sem uma faixa de cor
 * para acomodar, os 10px apenas deslocariam o texto em relação ao conteúdo ao
 * redor. Os demais lados seguem com 10px, e os títulos com fundo (regra abaixo)
 * mantêm os 10px nos quatro cantos.
 */
h1:not(.has-background),
h2:not(.has-background),
h3:not(.has-background),
h4:not(.has-background),
h5:not(.has-background),
h6:not(.has-background) {
	padding-inline-start: 0;
}

/*
 * Títulos com cor de fundo.
 *
 * O WordPress injeta um estilo próprio para títulos com fundo
 * (`h1:where(.wp-block-heading).has-background { padding: 1.25em 2.375em }`),
 * cuja especificidade (0,1,1) vence a regra genérica dos títulos (0,0,1) — daí
 * a especificidade maior nas regras abaixo.
 *
 * Além de garantir os 10px, os títulos com fundo passam a se comportar como
 * texto em linha: assim a cor é aplicada apenas ao redor do texto e, com o
 * `box-decoration-break: clone`, linha a linha, desenhando o espaçamento nas
 * duas pontas de cada linha.
 *
 * O `line-height` precisa ser maior que o normal: o padding é desenhado em cada
 * linha mas NÃO aumenta a altura da linha, então sem essa compensação a faixa da
 * linha de baixo cobriria o texto da linha de cima. A altura de linha reserva a
 * área de conteúdo da fonte (1.4em, valor conservador — cobre as métricas
 * usuais) mais os 10px do padding. Se o desenho da fonte for mais alto, basta
 * aumentar o 1.4em.
 */
body h1.has-background,
body h2.has-background,
body h3.has-background,
body h4.has-background,
body h5.has-background,
body h6.has-background {
	display: inline;
	padding: 10px;
	line-height: calc( 1.4em + 10px );
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/*
 * Elementos em linha ignoram margens verticais. O espaço abaixo dos títulos
 * com fundo passa a ser dado pelo elemento seguinte, preservando o ritmo
 * original de 1rem entre os textos.
 */
h1.has-background + *,
h2.has-background + *,
h3.has-background + *,
h4.has-background + *,
h5.has-background + *,
h6.has-background + * {
	margin-top: 1rem;
}

/*
 * Parágrafos: o `line-height` é próprio deles, e não o 1.1 compartilhado com os
 * títulos logo acima — texto corrido precisa de mais respiro entre as linhas do
 * que uma linha de título. Como esta regra vem depois e tem a mesma
 * especificidade, os títulos permanecem com 1.1.
 */
p {
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var( --aq-cor-primaria );
}

h1 {
	font-family: "Livvic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 54px;
	font-weight: 500;
	color: var( --aq-cor-primaria );
}

h2 {
	font-family: "Livvic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 40px;
	font-weight: 500;
	color: var( --aq-cor-primaria );
}

h3 {
	font-family: "Livvic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 28px;
	font-weight: 600;
	color: var( --aq-cor-primaria );
}

h4,
h5,
h6 {
	font-family: "Livvic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var( --aq-cor-primaria );
}

a {
	color: var( --aq-cor-primaria );
}

/*
 * Links no meio do texto comum: sublinhados, para se distinguirem do texto ao
 * redor, e o sublinhado desaparece no mouse over (e no foco pelo teclado).
 *
 * A regra vale só para links dentro de parágrafos: os dos menus, dos botões e
 * das redes sociais têm regras próprias e continuam sem sublinhado.
 */
p a {
	text-decoration: underline;
}

p a:hover,
p a:focus {
	text-decoration: none;
}

/*--------------------------------------------------------------
# Ênfases e elementos de texto em linha
--------------------------------------------------------------
   O reset zera `font` destes elementos (por meio de `font: inherit`),
   portanto os estilos semânticos precisam ser restabelecidos aqui.
---------------------------------------------------------------- */

em,
i,
cite,
dfn,
var {
	font-style: italic;
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

ins {
	text-decoration: underline;
}

del,
s,
strike {
	text-decoration: line-through;
}

mark {
	background-color: var( --aq-cor-azul-claro );
	color: inherit;
}

abbr[title],
acronym[title] {
	text-decoration: underline dotted;
	cursor: help;
}

/*--------------------------------------------------------------
# Botões
--------------------------------------------------------------*/

/*
 * Estilo padrão dos botões do site (bloco `wp-block-button`):
 * fundo transparente, fonte Livvic, texto em negrito e cor de texto e de borda
 * na cor principal da marca. O formato é de pílula, como no design
 * (botões de 32px de altura com raio de 16px).
 */
.wp-block-button .wp-block-button__link {
	border: 1px solid var( --aq-cor-primaria );
	border-radius: 999px;
	font-family: "Livvic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 700;
	line-height: 1.1;
	padding: 0.4em 1.5em;
	text-decoration: none;
}

/* Cores padrão — as escolhas feitas no editor continuam valendo. */
.wp-block-button .wp-block-button__link:not(.has-background) {
	background-color: transparent;
}

.wp-block-button .wp-block-button__link:not(.has-text-color) {
	color: var( --aq-cor-primaria );
}

/* Interação: o botão se preenche com a cor da marca. */
.wp-block-button .wp-block-button__link:not(.has-background):hover,
.wp-block-button .wp-block-button__link:not(.has-background):focus {
	background-color: var( --aq-cor-primaria );
	border-color: var( --aq-cor-primaria );
	color: #ffffff;
}

/*
 * Botão verde — variante do botão do tema.
 *
 * Basta acrescentar a classe `botaoverde` ao bloco de botão (no campo "Classe
 * CSS adicional", no painel lateral do editor). O texto e a borda ficam verdes
 * e, no mouse over, o botão se preenche de verde com o texto branco.
 *
 * A classe é procurada tanto no bloco de botão — onde o editor a coloca por
 * padrão — quanto no próprio link. As regras têm a mesma força das regras
 * padrão dos botões e vêm depois delas no arquivo, então vencem na cascata.
 */
.wp-block-button.botaoverde .wp-block-button__link,
.wp-block-button .wp-block-button__link.botaoverde {
	border-color: var( --aq-cor-verde, #91c245 );
	color: var( --aq-cor-verde, #91c245 );
}

.wp-block-button.botaoverde .wp-block-button__link:hover,
.wp-block-button.botaoverde .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.botaoverde:hover,
.wp-block-button .wp-block-button__link.botaoverde:focus {
	background-color: var( --aq-cor-verde, #91c245 );
	border-color: var( --aq-cor-verde, #91c245 );
	color: #ffffff;
}

/*--------------------------------------------------------------
# Legendas de imagens
--------------------------------------------------------------*/

/*
 * Legenda no formato do design: um traço vertical colorido na borda inicial da
 * área de conteúdo e o texto alinhado 12px depois dele.
 *
 * Na referência (`a_aqua.svg`), o traço mede 5 × 43 px na cor #7AA8BA e o texto
 * tem 14px em Open Sans Medium (peso 500) na cor principal, começando 12px à
 * direita da borda inicial (5px do traço + 7px de afastamento). Aqui o traço é
 * desenhado com a altura da própria legenda (acompanha uma, duas ou mais
 * linhas) e o `line-height: 1.5` mantém os 43px de altura para uma legenda de
 * duas linhas, como no design.
 *
 * Cobre as legendas do bloco de imagem (`figcaption`), as do formato clássico e
 * as das galerias.
 */
.wp-element-caption,
.wp-caption-text,
.gallery-caption {
 position: relative;
 margin-top: 16px;
 padding-inline-start: 12px; /* 5px do traço + 7px de afastamento */
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	color: var( --aq-cor-primaria );
	text-align: left;
}

.wp-element-caption::before,
.wp-caption-text::before,
.gallery-caption::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 5px;
	background-color: #7aa8ba;
}

/*--------------------------------------------------------------
# Utilitários
--------------------------------------------------------------*/

/*
 * Container padrão de conteúdo — a "área de conteúdo" dos blocos.
 *
 * O cabeçalho usa este mesmo container (logomarca alinhada à esquerda e redes
 * sociais à direita), de modo que as bordas desta área coincidem exatamente com
 * o início da logomarca e com o fim dos botões de redes sociais.
 *
 * Assim, dentro dos blocos: conteúdo alinhado à esquerda começa na borda
 * esquerda da área; alinhado à direita, termina na borda direita da área.
 */
.aq-container {
	width: 100%;
	max-width: calc( var( --aq-largura-conteudo ) + 48px );
	margin-inline: auto;
	padding-inline: 24px;
}

/*
 * Faixas de destaque de texto (usadas no bloco de abertura):
 * aplicadas a títulos/parágrafos pelo autor do conteúdo.
 */
.aq-destaque {
	background-color: var( --aq-cor-azul-claro );
	padding: 0.08em 12px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.aq-destaque--escuro {
	background-color: var( --aq-cor-primaria );
	color: #ffffff;
}

/* Acessibilidade */
.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.aq-pular:focus {
	background-color: #ffffff;
	clip-path: none;
	color: var( --aq-cor-primaria );
	display: block;
	font-size: 14px;
	height: auto;
	left: 16px;
	padding: 12px 20px;
	top: 16px;
	width: auto;
	z-index: 100000;
}

/*--------------------------------------------------------------
# Cabeçalho do site
--------------------------------------------------------------*/

.aq-cabecalho {
	position: relative;
	z-index: 10;
	background-color: var( --aq-superficie );
	color: var( --aq-cor-menu );

	/*
	 * Linha fina cinza separando o cabeçalho da área de conteúdo da página. Como
	 * o `box-sizing` do tema é `border-box`, esta borda de 1px não aumenta a
	 * altura do cabeçalho (o conteúdo interno é que fica 1px menor).
	 */
	border-bottom: 1px solid var( --aq-cor-linha );
}

.aq-cabecalho__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 80px;
}

.aq-cabecalho__link-logo {
	display: inline-flex;
	align-items: center;
}

.aq-cabecalho__logo {
	display: block;
	width: auto;
	height: 44px;
	max-width: 200px;
	object-fit: contain;
}

.aq-cabecalho__nome {
	font-family: "Livvic", system-ui, sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var( --aq-cor-menu );
}

/*
 * Botão do menu — ícone tradicional de três traços.
 *
 * Só existe na exibição em aparelhos móveis: no computador o menu de páginas e
 * os ícones de redes sociais ficam sempre visíveis e este botão não aparece
 * (por isso o `display: none` aqui, revertido na seção # Responsivo).
 *
 * A cor do ícone vem de `--aq-cor-botao-menu`, definida em cada variação de
 * cabeçalho — é um valor próprio, distinto da cor dos textos do menu e da cor
 * dos ícones de redes sociais.
 */
.aq-cabecalho__botao-menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background-color: transparent;
	color: var( --aq-cor-botao-menu );
	cursor: pointer;
}

.aq-cabecalho__botao-menu .dashicons {
	width: 30px;
	height: 30px;
	font-size: 30px;
	line-height: 1;
}

.aq-cabecalho__navegacao {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Menu do site */
.aq-menu {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aq-menu__item {
	margin: 0;
}

.aq-menu__link {
	color: inherit;
	text-decoration: none;
}

/* Traços coloridos abaixo dos itens do menu do cabeçalho */
.aq-cabecalho .aq-menu__link {
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}

.aq-cabecalho .aq-menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 20px;
	height: 5px;
	background-color: var( --aq-traco, #7ed2ea );
}

.aq-cabecalho .aq-menu {
	font-family: "Livvic", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 600;
}

/* Alternância das cores dos traços na variação "Padrão" */
.aq-cabecalho-padrao .aq-cabecalho .aq-menu__item:nth-child( 5n + 1 ) {
	--aq-traco: #7ed2ea;
}

.aq-cabecalho-padrao .aq-cabecalho .aq-menu__item:nth-child( 5n + 2 ) {
	--aq-traco: #bf2130;
}

.aq-cabecalho-padrao .aq-cabecalho .aq-menu__item:nth-child( 5n + 3 ) {
	--aq-traco: #f29626;
}

.aq-cabecalho-padrao .aq-cabecalho .aq-menu__item:nth-child( 5n + 4 ) {
	--aq-traco: #91c245;
}

.aq-cabecalho-padrao .aq-cabecalho .aq-menu__item:nth-child( 5n + 5 ) {
	--aq-traco: #3d3d3b;
}

/* Na variação "Botafogo" todos os traços têm a mesma cor */
.aq-cabecalho-botafogo .aq-cabecalho .aq-menu__item {
	--aq-traco: #55bf4c;
}

/* Redes sociais */
.aq-redes {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aq-redes__item {
	margin: 0;
}

.aq-redes__link {
	display: inline-flex;
	color: var( --aq-cor-icone );
	text-decoration: none;
}

.aq-icone {
	width: 26px;
	height: 26px;
	font-size: 26px;
	line-height: 1;
	color: inherit;
}

.aq-cabecalho .aq-icone {
	width: 26px;
	height: 26px;
	font-size: 26px;
}

/*--------------------------------------------------------------
# Rodapé do site
--------------------------------------------------------------*/

.aq-rodape {
	/*
	 * O rodapé precisa ser posicionado, como o cabeçalho: os blocos do tema usam
	 * `position: relative` (regra base `.aq-bloco`), ou seja, são pintados em uma
	 * camada acima dos elementos não posicionados — inclusive acima da linha que
	 * separa o rodapé do último bloco da página, na variação em que ela existe.
	 */
	position: relative;
	z-index: 10;

	background-color: var( --aq-superficie );
	color: var( --aq-cor-menu );

	/*
	 * Recuo vertical do rodapé: 30px acima da logomarca e 34px abaixo do último
	 * traço do menu — este último já contando com os 19px de margem inferior que
	 * cada item do menu carrega, o que deixa 53px de folga embaixo.
	 */
	padding-block: 30px 34px;

	/*
	 * Medidas do rodapé na referência: altura da logomarca e vão entre os itens
	 * da coluna da esquerda (logomarca e menu).
	 */
	--aq-rodape-logo-altura: 56px;
	--aq-rodape-vao: 24px;
}

/*
	* Linha divisória no topo do rodapé.
	*
	* Conforme o modelo, esta linha fina cinza existe apenas na variação "Padrão":
	* o rodapé "Botafogo" começa sem ela, emendando direto no último bloco da
	* página. Por isso a borda não está na regra base do rodapé, e sim presa à
	* variação escolhida para a página (a mesma classe de `<body>` que define as
	* cores do cabeçalho e do rodapé).
	*/
body.aq-cabecalho-padrao .aq-rodape {
	border-top: 1px solid var( --aq-cor-linha );
}

.aq-rodape__interno {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 64px;
	flex-wrap: wrap;
}

.aq-rodape__bloco {
	display: flex;
	flex-direction: column;
	gap: var( --aq-rodape-vao, 24px );
}

/*
 * Coluna da direita do rodapé (redes sociais e contato).
 *
 * Posição horizontal: na referência ela não encosta na borda direita da área de
 * conteúdo — começa a 59% dela (x=775 numa área que vai de 166 a 1200) e o
 * conteúdo ocupa 291px, a mesma largura da linha divisória. Como este bloco é o
 * último item de um flex com `justify-content: space-between`, dar 41% de
 * largura a ele faz o conteúdo começar exatamente nesses 59%.
 *
 * Posição vertical: os 33px de recuo põem o primeiro texto ("Segue a gente:") na
 * altura em que ele aparece no design — 33px abaixo do topo da coluna da
 * esquerda, portanto acima da primeira linha do menu.
 *
 * Espaçamentos internos: no design eles não são iguais entre si, então o `gap`
 * do bloco é zerado e cada distância fica no elemento correspondente, abaixo.
 */
.aq-rodape__bloco--contato {
	width: 41%;
	margin-top: 33px;
	gap: 0;
}

/* Da linha das redes sociais (rótulo + ícones) até a linha divisória. */
.aq-rodape__linha-item--redes {
	margin-bottom: 20px;
}

.aq-rodape__link-logo {
	display: inline-flex;
}

.aq-rodape__logo {
	display: block;
	width: auto;
	height: var( --aq-rodape-logo-altura, 56px );
	max-width: 240px;
	object-fit: contain;
}

.aq-rodape__nome {
	font-family: "Livvic", system-ui, sans-serif;
	font-size: 24px;
	font-weight: 600;
}

/*
 * Menu do rodapé, em duas colunas como no design.
 *
 * Grade (e não `columns`) porque no design cada coluna fica com a largura do seu
 * item mais largo, enquanto no `columns` as duas colunas têm sempre a mesma
 * largura. A grade também preenche linha a linha, que é a ordem da referência.
 *
 * Na referência o menu começa 68px depois do início da área de conteúdo (o
 * logotipo está em x=167 e os itens em x=234) e a segunda coluna fica 92px
 * depois da primeira (x=326), o que corresponde a um vão de ~37px entre elas.
 */
.aq-rodape .aq-menu {
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 37px;
	/* O vão entre as linhas vem da margem de cada item, não da grade. */
	row-gap: 0;
	margin-inline-start: 68px;
	font-family: "Livvic", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
}

/*
 * Linhas do menu a 47,2px uma da outra, como no design (47,5px): a linha do
 * link (1.2 × 16px de altura + 9px do traço) mais os 19px de margem.
 */
.aq-rodape .aq-menu__item {
	margin: 0 0 19px;
}

.aq-rodape .aq-menu__link {
	position: relative;
	display: inline-block;
	line-height: 1.2;
	/* No design o traço fica 8px abaixo da linha de base do texto. */
	padding-bottom: 9px;
	color: inherit;
}

.aq-rodape .aq-menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 17px;
	height: 4px;
	background-color: var( --aq-traco-rodape, #7ed2ea );
}

/*
 * Alternância das cores dos traços do menu do rodapé na variação "Padrão".
 *
 * Mesma paleta e mesma ordem do cabeçalho: os dois menus vêm da mesma consulta
 * (as páginas filhas de "home", na ordem das páginas), então o enésimo item do
 * rodapé é o mesmo do cabeçalho. As duas colunas do rodapé são apenas uma
 * divisão visual da mesma lista — a contagem do `nth-child` segue a ordem dos
 * itens no documento, exatamente como no cabeçalho.
 *
 * Na variação "Botafogo" nada é definido aqui: vale o `--aq-traco-rodape` do
 * corpo (verde, o mesmo do cabeçalho), com todos os traços iguais.
 */
.aq-cabecalho-padrao .aq-rodape .aq-menu__item:nth-child( 5n + 1 ) {
	--aq-traco-rodape: #7ed2ea;
}

.aq-cabecalho-padrao .aq-rodape .aq-menu__item:nth-child( 5n + 2 ) {
	--aq-traco-rodape: #bf2130;
}

.aq-cabecalho-padrao .aq-rodape .aq-menu__item:nth-child( 5n + 3 ) {
	--aq-traco-rodape: #f29626;
}

.aq-cabecalho-padrao .aq-rodape .aq-menu__item:nth-child( 5n + 4 ) {
	--aq-traco-rodape: #91c245;
}

.aq-cabecalho-padrao .aq-rodape .aq-menu__item:nth-child( 5n + 5 ) {
	--aq-traco-rodape: #3d3d3b;
}

/*
 * Rótulos do rodapé ("Segue a gente:", "Entre em contato:").
 *
 * São parágrafos, e o tema dá a todo parágrafo a cor principal da marca. Sem
 * esta linha, a cor do parágrafo venceria a cor herdada do rodapé e os rótulos
 * ficariam sempre em #1B3360 — ilegíveis sobre o azul do rodapé na variação
 * "Botafogo". Com `inherit`, eles acompanham a cor configurada para os textos e
 * links do rodapé, como o restante dos elementos do bloco.
 */
.aq-rodape__rotulo {
	color: inherit;
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	margin: 0;
}

/*
 * Linha divisória entre as redes sociais e o WhatsApp: ocupa toda a largura da
 * coluna da direita, como os demais itens dela, e sem transparência — no design
 * o traço tem a cor cheia.
 */
.aq-rodape__linha {
	border: 0;
	border-top: 1px solid currentColor;
	width: 100%;
	/* Da linha até a linha de contato (12px), como no design. */
	margin: 0 0 12px;
}

/*
 * Linha de item do rodapé.
 *
 * O rótulo ("Segue a gente:", "Entre em contato:") e o que vem com ele — a
 * fileira de ícones das redes ou os ícones de WhatsApp e e-mail — ficam lado a
 * lado, em vez de empilhados pelo espaçamento em coluna do bloco de contato.
 *
 * O `align-items: center` centraliza o texto em relação aos ícones (46px de
 * altura); o `justify-content: flex-end` encosta a linha inteira — texto e
 * ícones — na borda direita da coluna; e o `flex-wrap` protege as telas mais
 * estreitas, onde o texto sozinho já ocupa quase toda a largura da área de
 * conteúdo.
 */
.aq-rodape__linha-item {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px;
}

.aq-rodape .aq-icone {
	width: 46px;
	height: 46px;
	font-size: 46px;
}

/* No rodapé os ícones das redes ficam mais afastados do que no cabeçalho. */
.aq-rodape .aq-redes {
	gap: 19px;
}

/*
 * Links que são apenas um ícone no rodapé (WhatsApp e e-mail): herdam a cor dos
 * ícones da variação de cabeçalho escolhida para a página.
 */
.aq-rodape__link-icone {
	display: inline-flex;
	color: var( --aq-cor-icone );
}

/*--------------------------------------------------------------
# Área específica da página
--------------------------------------------------------------*/

.aq-conteudo-principal {
	display: block;
}

.aq-pagina__area > * + * {
	margin-top: 0;
}

/*
 * Parágrafos vazios que sobraram no fim do conteúdo não devem virar espaço.
 *
 * Sem conteúdo, o parágrafo não tem altura — mas a margem inferior de 1rem
 * continua existindo e, por colapso de margens, escapa de todos os invólucros
 * da área da página (nenhum deles tem recuo ou borda embaixo). Ela então
 * aparece como uma faixa vazia entre o último bloco e o rodapé, com a cor de
 * fundo da página. Não há motivo para exibir um parágrafo sem texto.
 */
.aq-pagina__area > p:empty {
	display: none;
}

/*
 * Rede de segurança: zera a margem inferior de quem for o último filho da área,
 * seja parágrafo, título ou figura. Os blocos do tema não usam margem embaixo,
 * então a regra só tem efeito quando há uma sobra de edição a corrigir.
 */
.aq-pagina__area > *:last-child {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blocos de conteúdo — base comum
--------------------------------------------------------------*/

.aq-bloco {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var( --aq-bloco-altura, 400px );
	overflow: hidden;
	background-color: var( --aq-cor-creme );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.aq-bloco__conteudo {
	position: relative;
	z-index: 2;
	width: 100%;
}

.aq-bloco__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/*--------------------------------------------------------------
# Bloco: Área visual de duas colunas
--------------------------------------------------------------*/

.aq-bloco--duas-colunas {
	min-height: var( --aq-bloco-altura, 768px );
	color: #ffffff;
}

/*
 * Parágrafos deste bloco recebem 10px de espaçamento interno em todos os cantos
 * (os títulos já seguem a regra global de títulos do site).
 */
.aq-bloco--duas-colunas p {
	padding: 10px;
}

.aq-bloco--duas-colunas .aq-bloco__conteudo > * {
	max-width: 62%;
}

.aq-bloco--conteudo-left .aq-bloco__conteudo > * {
	margin-left: 0;
	margin-right: auto;
}

.aq-bloco--conteudo-right .aq-bloco__conteudo > * {
	margin-left: auto;
	margin-right: 0;
}

/*--------------------------------------------------------------
# Bloco: Foto em degradê no fundo
--------------------------------------------------------------*/

.aq-bloco--foto-degrade {
	min-height: var( --aq-bloco-altura, 400px );
}

/*
 * A foto ocupa a metade do bloco, mas o elemento vai um pouco além do centro:
 * assim a borda reta da imagem fica escondida sob a parte já sólida do degradê
 * (que termina antes), evitando um corte visível no fim do esmaecimento.
 */
.aq-bloco--foto-degrade .aq-bloco__foto {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 64%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	z-index: 0;
}

.aq-bloco--imagem-left .aq-bloco__foto {
	left: 0;
}

.aq-bloco--imagem-right .aq-bloco__foto {
	right: 0;
}

/* Degradê que esmaece a imagem até a cor de fundo do bloco */
.aq-bloco--foto-degrade::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --aq-degrade );
	z-index: 1;
	pointer-events: none;
}

.aq-bloco--foto-degrade .aq-bloco__conteudo {
	z-index: 2;
}

.aq-bloco--foto-degrade .aq-bloco__conteudo > * {
	max-width: 46%;
}

.aq-bloco--foto-degrade.aq-bloco--imagem-left .aq-bloco__conteudo > * {
	margin-left: auto;
	margin-right: 0;
}

.aq-bloco--foto-degrade.aq-bloco--imagem-right .aq-bloco__conteudo > * {
	margin-left: 0;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Bloco: Área com imagem
--------------------------------------------------------------*/

.aq-bloco--area-com-imagem {
	min-height: var( --aq-bloco-altura, 400px );
	align-items: stretch;
}

.aq-bloco__grade {
	display: flex;
	align-items: stretch;
}

.aq-bloco--area-com-imagem .aq-bloco__conteudo,
.aq-bloco--area-com-imagem .aq-bloco__imagem {
	flex: 1 1 50%;
	min-width: 0;
}

/*
 * O conteúdo é centralizado verticalmente pela própria coluna (`align-self`) e
 * não por um contêiner flex interno: itens flex têm o `display` "blocado" pelo
 * navegador, o que impediria o efeito de fundo apenas ao redor do texto nos
 * títulos com cor de fundo.
 */
.aq-bloco--area-com-imagem .aq-bloco__conteudo {
	align-self: center;
	display: block;
}

.aq-bloco--conteudo-left .aq-bloco__conteudo {
	order: 1;
}

.aq-bloco--conteudo-left .aq-bloco__imagem {
	order: 2;
}

.aq-bloco--conteudo-right .aq-bloco__conteudo {
	order: 2;
}

.aq-bloco--conteudo-right .aq-bloco__imagem {
	order: 1;
}

/* A imagem é exibida em tamanho original e cortada no limite inferior do bloco. */
.aq-bloco--area-com-imagem .aq-bloco__imagem {
	position: relative;
	height: var( --aq-bloco-altura, 400px );
	overflow: hidden;
}

.aq-bloco--area-com-imagem .aq-bloco__imagem img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	max-width: none;
}

.aq-bloco__imagem-vazia {
	font-size: 14px;
	font-style: italic;
	opacity: 0.6;
	padding: 24px;
}

/*--------------------------------------------------------------
# Bloco: Aqua: topo de página
--------------------------------------------------------------*/

.aq-bloco--topo-pagina {
	display: flex;
	flex-direction: column;
	/*
	 * O alinhamento não usa `space-between`: com três linhas (trilha, texto de
	 * apoio e campo de conteúdo) o espaço livre iria para o meio, empurrando o
	 * texto de apoio para longe da trilha. Quem prende o campo de conteúdo à
	 * base do bloco é o `margin-top: auto` dele, mais abaixo.
	 */
	justify-content: flex-start;
	min-height: var( --aq-bloco-altura, 500px );
	padding-block: 40px;
	/*
	 * Foto de fundo. O endereço chega como variável CSS — definida pelo PHP no
	 * site e pelo script do editor na pré-visualização —, e não como
	 * `background-image` na linha da página. É o que permite à exibição em
	 * aparelhos móveis desligar a foto com uma simples regra de classe: um valor
	 * na linha venceria qualquer regra deste arquivo. O enquadramento continua
	 * sendo o da base dos blocos (`cover`, centralizado, sem repetição).
	 */
	background-image: var( --aq-topo-foto, none );
}

/*
 * Degradê vertical até a cor de fundo, desenhado por cima da foto num
 * pseudo-elemento. A curva suavizada é montada no PHP (no site) e uma
 * aproximação de dois pontos no script do editor (na pré-visualização) — os
 * dois escrevem a mesma variável. Sem imagem, o degradê vai da cor de fundo até
 * ela mesma e, portanto, não aparece.
 */
.aq-bloco--topo-pagina::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --aq-topo-degrade );
	pointer-events: none;
	z-index: 0;
}

.aq-bloco--topo-pagina .aq-container {
	position: relative;
	z-index: 1;
}

/*
 * Campo livre da base do bloco. A largura é uma porcentagem da área de conteúdo
 * e afeta apenas este campo — a trilha de navegação e o texto de apoio seguem
 * com a largura cheia.
 */
.aq-topo__campo {
	width: var( --aq-conteudo-largura, 100% );
	max-width: 100%;
}

/*
 * Campo de conteúdo preso à base do bloco. O `padding-top` garante um
 * afastamento mínimo do que vem acima quando o bloco cresce para caber o
 * conteúdo — nesse caso o `margin-top: auto` fica sem espaço para distribuir.
 */
.aq-topo__conteudo {
	margin-top: auto;
	padding-top: 40px;
}

/*
 * Texto livre de apoio, logo abaixo da trilha de navegação. É opcional: quando
 * o campo não é preenchido, o elemento nem é renderizado.
 */
.aq-topo__apoio {
	margin-top: 16px;
}

.aq-topo__texto {
	margin: 0;
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	/* Mesma cor configurada para a trilha: os dois ficam sobre a imagem. */
	color: var( --aq-trilha-cor, #ffffff );
}

/*
 * Trilha de navegação (breadcrumb).
 *
 * Os itens são alinhados pela BASE do texto, e não pelo centro da caixa. O item
 * da página atual carrega a linha colorida embaixo do próprio texto (padding +
 * borda), o que deixa a caixa dele mais alta que a dos outros: com o
 * alinhamento pelo centro, o texto dele subia alguns pixels em relação aos
 * demais e a linha sublinhada deixava de ficar logo abaixo do texto. Pela base,
 * todos os textos ficam na mesma linha e o sublinhado acompanha o texto atual.
 */
.aq-trilha {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	color: var( --aq-trilha-cor, #ffffff );
	font-family: "Livvic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.aq-trilha__item {
	color: inherit;
	text-decoration: none;
}

.aq-trilha__item--atual {
	border-bottom: 3px solid var( --aq-trilha-atual, #91c245 );
	padding-bottom: 3px;
}

.aq-trilha__separador {
	opacity: 0.85;
}

/*--------------------------------------------------------------
# Bloco: Aqua: coluna de conteúdo
--------------------------------------------------------------*/

.aq-bloco--coluna-conteudo {
	/* Vão livre entre a coluna de conteúdo e a área da imagem. */
	--aq-coluna-vao: 40px;

	display: flex;
	align-items: stretch;
	/*
	 * A altura acompanha o conteúdo da coluna; a altura mínima personalizável só
	 * entra em cena quando o autor define um valor no editor (padrão 0).
	 */
	min-height: var( --aq-bloco-altura-minima, 0 );
	/* Margem superior e inferior personalizável (72px é o padrão do tema). */
	padding-block: var( --aq-bloco-espaco-vertical, 72px );
}

/*
 * Posicionamento das metades conforme o lado escolhido para o conteúdo.
 * A margem automática empurra a imagem para a borda externa do bloco, e o vão
 * livre fica entre ela e a coluna de conteúdo.
 */
.aq-bloco--conteudo-left .aq-coluna__metade--conteudo {
	order: 1;
}

.aq-bloco--conteudo-left .aq-coluna__metade--imagem {
	order: 2;
	margin-left: auto;
}

.aq-bloco--conteudo-right .aq-coluna__metade--conteudo {
	order: 2;
}

.aq-bloco--conteudo-right .aq-coluna__metade--imagem {
	order: 1;
	margin-right: auto;
}

.aq-coluna__metade {
	width: 50%;
}

.aq-coluna__metade--conteudo {
	display: flex;
	align-items: center;
}

/*
 * A coluna de conteúdo tem metade da largura da área de conteúdo e fica
 * encostada no centro da página — ou seja, na borda interna da sua metade.
 */
.aq-coluna__conteudo {
	width: 100%;
	max-width: calc( var( --aq-largura-conteudo ) / 2 );
}

.aq-bloco--conteudo-left .aq-coluna__conteudo {
	margin-left: auto;
}

.aq-bloco--conteudo-right .aq-coluna__conteudo {
	margin-right: auto;
}

/*
 * A área da imagem é um pouco mais estreita que a metade: a diferença forma um
 * vão livre (na cor de fundo do bloco) junto à coluna de conteúdo, do lado em
 * que ela estiver.
 */
.aq-coluna__metade--imagem {
	position: relative;
	overflow: hidden;
	width: calc( 50% - var( --aq-coluna-vao ) );
}

.aq-coluna__imagem {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/*
 * Opção "exibir a imagem inteira": em vez de cobrir a área (e ser recortada em
 * cima e embaixo), a imagem é reduzida até caber por completo na altura do
 * bloco, mantendo a proporção. A sobra fica na cor de fundo do bloco, e a
 * imagem continua alinhada pelo centro.
 */
.aq-bloco--imagem-inteira .aq-coluna__imagem {
	object-fit: contain;
}

/*
 * Opção "ultrapassar limite do bloco": a imagem não é recortada nem reduzida.
 * Ela é desenhada começando no topo da sua área, com a largura ajustada ao
 * espaço disponível e a altura na proporção original da imagem — em vez de
 * preencher a altura do bloco, como nas outras duas opções.
 *
 * Tudo o que vem abaixo vale para a exibição em computadores. Em aparelhos
 * móveis a opção se comporta como "exibir a imagem inteira" — as regras que
 * fazem essa troca estão no trecho de exibição em aparelhos móveis, no fim
 * deste arquivo.
 *
 * Como a altura deixa de ser a do bloco e passa a ser a que resulta dessa
 * largura, a imagem pode ficar mais alta que o bloco — e nesse caso continua
 * para fora dele, sobrepondo o bloco de baixo. Para isso são necessários dois
 * ajustes além do alinhamento pelo topo:
 *
 * 1. nada recorta a imagem: a metade da imagem já recortava (`overflow: hidden`)
 *    e o bloco também (a base `.aq-bloco` recorta sempre). Os dois passam a
 *    deixar a imagem sair;
 * 2. o bloco sobe na ordem de pintura (`z-index`). Sem isso, o bloco seguinte —
 *    que vem depois no HTML — seria pintado por cima da imagem que transborda,
 *    e a imagem apareceria cortada no limite do bloco. O valor usado fica acima
 *    do cabeçalho e do rodapé (10) para que a imagem passe também por cima do
 *    rodapé quando a área da página terminar em um bloco desta opção. O
 *    cabeçalho não é afetado: a imagem só cresce para baixo.
 *
 * O topo considerado é o topo da área da imagem (depois da margem superior e
 * inferior do bloco). Para a imagem começar rente à borda do bloco, basta zerar
 * esse valor na personalização "Margem superior e inferior".
 */
.aq-bloco--imagem-ultrapassa-limite {
	overflow: visible;
	/*
	 * Acima do cabeçalho e do rodapé (`z-index: 10`, em `.aq-cabecalho` e
	 * `.aq-rodape`), para a imagem transbordar por cima do rodapé. O cabeçalho
	 * continua intacto: a imagem só cresce para baixo, nunca na direção dele.
	 */
	z-index: 20;
}

.aq-bloco--imagem-ultrapassa-limite .aq-coluna__metade--imagem {
	overflow: visible;
}

/*
 * `width: auto` deixa a largura por conta do espaço disponível: quando a imagem
 * é maior que a área, ela é reduzida até a largura disponível (`max-width`,
 * que também impede qualquer transbordo para os lados); quando é menor, mantém
 * o tamanho próprio, sem ser esticada. As margens automáticas, com `left` e
 * `right` em 0, mantêm a imagem centralizada na área, como nas outras opções.
 *
 * A altura acompanha a proporção original (`height: auto`) — é ela que pode
 * passar do fim do bloco quando a imagem é mais alta que ele.
 */
.aq-bloco--imagem-ultrapassa-limite .aq-coluna__imagem {
	top: 0;
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: none;
	margin-inline: auto;
	object-fit: fill;
	object-position: center top;
}

/*--------------------------------------------------------------
# Bloco: Aqua: banner
--------------------------------------------------------------*/

.aq-bloco--banner {
	display: flex;
	align-items: center;
	min-height: var( --aq-bloco-altura, 400px );
}

.aq-banner__interno {
	width: 100%;
}

/*
 * Área de conteúdo com 75% da largura da área de conteúdo, centralizada, com
 * 25px de margem acima e abaixo.
 */
.aq-banner__conteudo {
	width: 75%;
	max-width: calc( var( --aq-largura-conteudo ) * 0.75 );
	margin-block: 25px;
	margin-inline: auto;
}

/*
 * Opção "largura do conteúdo: ocupando toda a área de conteúdo". Em vez dos 75%
 * centralizados, o conteúdo passa a ocupar a largura cheia da área de conteúdo
 * do bloco — a margem automática deixa de ter efeito, porque não sobra espaço.
 */
.aq-bloco--banner-conteudo-cheio .aq-banner__conteudo {
	width: 100%;
	max-width: 100%;
}

/*--------------------------------------------------------------
# Bloco: Aqua: conteúdo maior
--------------------------------------------------------------*/

.aq-bloco--conteudo-maior {
	display: block;
	min-height: 0;
	/* Margem superior e inferior personalizável (72px é o padrão do tema). */
	padding-block: var( --aq-bloco-espaco-vertical, 72px );
}

.aq-conteudo-maior__coluna {
	width: var( --aq-conteudo-largura, 75% );
	max-width: 100%;
}

/*--------------------------------------------------------------
# Bloco: Aqua: separador
--------------------------------------------------------------*/

/*
 * Área do separador: usa a largura da área de conteúdo e a centraliza, mas
 * SEM o recuo lateral do container. Assim a linha fica exatamente no início da
 * área de conteúdo quando o bloco está solto na página e, quando ele está dentro
 * de outro bloco (que já está na área de conteúdo), não soma um segundo recuo.
 */
.aq-separador__area {
	max-width: var( --aq-largura-conteudo );
	padding-inline: 0;
}

/*
 * Linha curta de separação: 30px de largura, 7px de altura, 5px de margem acima
 * e 15px abaixo.
 */
.aq-separador {
	width: 30px;
	height: 7px;
	border: 0;
	margin: 5px 0 15px;
	background-color: var( --aq-separador-cor, #7aa8ba );
}

/*--------------------------------------------------------------
# Responsivo
--------------------------------------------------------------*/

@media ( max-width: 900px ) {
	/*
	 * Orientação geral: a área de conteúdo passa a medir 90% da largura da tela
	 * e fica centralizada. O recuo lateral de 24px do container é dispensado —
	 * os 5% de cada lado já separam o conteúdo das bordas da tela.
	 */
	.aq-container {
		width: 90%;
		max-width: none;
		padding-inline: 0;
	}

	/*
	 * Separador — exceção à regra acima.
	 *
	 * O bloco usa um container próprio para se alinhar à área de conteúdo. Ele
	 * costuma ser usado DENTRO da área de conteúdo de outro bloco (entre dois
	 * parágrafos, por exemplo). Ali, aplicar de novo os 90% com centralização
	 * criava uma margem à esquerda que empurrava a linha para dentro, desalinhada
	 * do texto ao redor. Zera aí: o separador ocupa a largura toda do que está em
	 * volta e encosta na borda inicial, como o texto.
	 */
	.aq-separador__area {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	/*
	 * Cabeçalho: a logomarca fica à esquerda e o botão de menu, à direita, na
	 * primeira linha. O menu de páginas e as redes sociais deixam de ser exibidos
	 * em linha e passam a ocupar uma segunda linha do próprio cabeçalho.
	 *
	 * Essa segunda linha participa do fluxo normal da página: por isso, quando
	 * aberta, ela EMPURRA o restante do conteúdo para baixo em vez de se sobrepor
	 * a ele. Fechada, ela não ocupa espaço algum.
	 */
	.aq-cabecalho__interno {
		flex-wrap: wrap;
		gap: 0; /* o afastamento do painel vem do padding dele mesmo */
		padding-block: 16px;
	}

	.aq-cabecalho__botao-menu {
		display: inline-flex;
		flex: 0 0 auto;
	}

	/*
	 * Menu (itens de páginas + redes sociais): ocupa a largura toda, o que o joga
	 * para a linha seguinte do cabeçalho. Fechado por padrão — altura, recuo e
	 * opacidade zerados — e revelado com uma pequena animação ao se clicar no
	 * botão. O `visibility` acompanha o estado para que os links escondidos não
	 * recebam foco pelo teclado.
	 */
	.aq-cabecalho__navegacao {
		flex-basis: 100%; /* linha própria, abaixo da logomarca e do botão */
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;

		overflow: hidden;
		max-height: 0;
		padding-block: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			max-height 0.25s ease,
			padding 0.25s ease,
			opacity 0.25s ease,
			visibility 0s 0.25s;
	}

	/* Estado aberto — classe aplicada ao cabeçalho pelo script do tema. */
	.aq-cabecalho--menu-aberto .aq-cabecalho__navegacao {
		max-height: 400px;
		padding-block: 12px 0;
		opacity: 1;
		visibility: visible;
		transition:
			max-height 0.25s ease,
			padding 0.25s ease,
			opacity 0.25s ease,
			visibility 0s 0s;
	}

	/*
	 * Itens do menu: um embaixo do outro, alinhados à direita — assim a borda
	 * direita dos itens coincide com a borda direita da área de conteúdo.
	 *
	 * O `max-width: 100%` prende os itens à área de conteúdo: sem ele, um item de
	 * texto longo avançaria para a esquerda até o canto da página, sem respeitar
	 * os 5% de recuo.
	 */
	.aq-cabecalho .aq-menu {
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
		max-width: 100%;
		font-size: 17px;
		text-align: right;
	}

	.aq-cabecalho .aq-menu__item {
		max-width: 100%;
	}

	/*
	 * Cada item mais junto do traço colorido que o sublinha (10px em vez dos 14px
	 * do computador), combinado com o `gap` acima para aproximar os itens. O
	 * `overflow-wrap` quebra o texto em vez de deixá-lo escapar da área.
	 */
	.aq-cabecalho .aq-menu__link {
		padding-bottom: 10px;
		overflow-wrap: break-word;
	}

	/* Redes sociais: permanecem em linha, abaixo dos itens do menu. */
	.aq-cabecalho .aq-redes {
		flex-wrap: wrap;
		justify-content: flex-end;
		max-width: 100%;
	}

	/*
	 * Altura dos blocos na exibição em aparelhos móveis.
	 *
	 * Os blocos com altura personalizável guardam DOIS valores: a altura comum
	 * e a altura para dispositivos móveis. Aqui a altura comum é substituída
	 * pela altura móvel — e, se ela não estiver definida, vale a comum.
	 */
	.aq-bloco--duas-colunas,
	.aq-bloco--foto-degrade,
	.aq-bloco--topo-pagina,
	.aq-bloco--banner {
		min-height: var( --aq-bloco-altura-movel, var( --aq-bloco-altura, 400px ) );
	}

	/*
	 * Largura do conteúdo do bloco "topo de página". Assim como a altura, ela
	 * tem um valor para a exibição comum e outro para os aparelhos móveis — este
	 * só afeta o campo livre, nunca a trilha de navegação.
	 */
	.aq-bloco--topo-pagina .aq-topo__campo {
		width: var( --aq-conteudo-largura-movel, var( --aq-conteudo-largura, 100% ) );
	}

	/*
	 * Bloco "topo de página" com a imagem de fundo desmarcada para aparelhos
	 * móveis: a foto sai da tela e o bloco fica apenas com a cor de fundo. A
	 * trilha de navegação, o texto de apoio e o campo livre continuam no lugar —
	 * o que muda é só o fundo.
	 *
	 * O que se desliga é a `background-image`, e não a variável da foto: a
	 * variável vem definida na linha do bloco, e um valor na linha vence
	 * qualquer regra do arquivo.
	 *
	 * O degradê não precisa de ajuste: ele vai da cor de fundo até ela mesma, o
	 * que o torna invisível quando não há foto por baixo.
	 */
	.aq-bloco--topo-foto-oculta-movel {
		background-image: none;
	}

	.aq-bloco--duas-colunas .aq-bloco__conteudo > *,
	.aq-bloco--foto-degrade .aq-bloco__conteudo > * {
		max-width: 100%;
	}

	.aq-bloco--foto-degrade .aq-bloco__foto {
		width: 100%;
		opacity: 0.35;
	}

	.aq-bloco__grade {
		flex-direction: column;
	}

	.aq-bloco--area-com-imagem .aq-bloco__conteudo,
	.aq-bloco--area-com-imagem .aq-bloco__imagem {
		flex: 0 0 auto;
		width: 100%;
	}

	.aq-bloco--conteudo-left .aq-bloco__conteudo,
	.aq-bloco--conteudo-right .aq-bloco__conteudo {
		order: 1;
	}

	.aq-bloco--conteudo-left .aq-bloco__imagem,
	.aq-bloco--conteudo-right .aq-bloco__imagem {
		order: 2;
		height: 320px;
	}

	.aq-bloco--area-com-imagem .aq-bloco__imagem img {
		position: static;
		width: 100%;
		height: 320px;
		object-fit: cover;
	}

	/* Rodapé: não exibe os itens do menu na exibição em aparelhos móveis. */
	.aq-rodape .aq-menu {
		display: none;
	}

	.aq-rodape__interno {
		flex-direction: column;
		gap: 32px;
	}

	/*
	 * Empilhadas, as colunas deixam de precisar da largura e do recuo que as
	 * posicionavam lado a lado: o espaçamento entre elas passa a ser o `gap`
	 * acima e cada uma ocupa a largura toda.
	 */
	.aq-rodape__bloco--contato {
		width: auto;
		margin-top: 0;
	}

	.aq-bloco--coluna-conteudo {
		flex-direction: column;
		/*
		 * Altura mínima própria para a exibição em aparelhos móveis; sem ela,
		 * vale a altura mínima comum.
		 */
		min-height: var( --aq-bloco-altura-minima-movel, var( --aq-bloco-altura-minima, 0 ) );
		/*
		 * Margem própria para a exibição em aparelhos móveis — bem menor que a do
		 * computador (72px para 24px, o padrão do tema), porque em uma tela
		 * estreita o respiro grande acima e abaixo do bloco pesa demais.
		 */
		padding-block: var( --aq-bloco-espaco-vertical-movel, var( --aq-bloco-espaco-vertical, 24px ) );
	}

	/*
	 * Empilhado, cada metade ocupa a largura toda do bloco. A coluna de conteúdo,
	 * porém, fica presa à área de conteúdo — 90% da largura da tela, centralizada
	 * —, em vez de escorrer de ponta a ponta da página.
	 *
	 * No computador ela obedece ao limite de metade da área de conteúdo; aqui esse
	 * limite não faz sentido (a tela é estreita), então ele é trocado pela própria
	 * largura da área de conteúdo. A área da imagem segue de borda a borda, como
	 * no computador.
	 */
	.aq-coluna__metade {
		width: 100%;
	}

	.aq-bloco--coluna-conteudo .aq-coluna__conteudo {
		width: 90%;
		max-width: 100%;
		margin-inline: auto;
	}

	.aq-coluna__metade--imagem {
		min-height: 280px;
		margin-top: 32px;
	}

	/*
	 * Bloco "coluna de conteúdo" com a imagem desmarcada para aparelhos móveis:
	 * a metade da imagem sai da tela e a coluna de conteúdo ocupa o espaço. A
	 * marcação continua sendo entregue — a decisão é só de exibição.
	 */
	.aq-bloco--imagem-oculta-movel .aq-coluna__metade--imagem {
		display: none;
	}

	/*
	 * Opção "ultrapassar limite do bloco" na exibição em aparelhos móveis: aqui
	 * ela se comporta como "exibir a imagem inteira", ou seja, como o padrão do
	 * tema para essa tela. Numa tela estreita a imagem é larga e a altura
	 * proporcional a ela fica bem maior que o bloco — a sobreposição cobriria
	 * boa parte do que vem depois. Por isso, na exibição em aparelhos móveis:
	 *
	 * - a imagem volta a preencher a área toda (largura e altura em 100%) e é
	 *   reduzida até caber por completo, sem recorte (`object-fit: contain`);
	 * - o bloco e a área da imagem voltam a recortar o que sai deles;
	 * - a elevação de camada é desfeita (`z-index: auto`, o valor da base dos
	 *   blocos), já que não há transbordo nenhum para passar por cima.
	 *
	 * A sobreposição é um recurso exclusivo da exibição em computadores.
	 */
	.aq-bloco--imagem-ultrapassa-limite {
		overflow: hidden;
		z-index: auto;
	}

	.aq-bloco--imagem-ultrapassa-limite .aq-coluna__metade--imagem {
		overflow: hidden;
	}

	.aq-bloco--imagem-ultrapassa-limite .aq-coluna__imagem {
		bottom: 0;
		width: 100%;
		height: 100%;
		margin-inline: 0;
		object-fit: contain;
		object-position: center center;
	}

	/*
	 * Bloco "conteúdo maior": margem própria para a exibição em aparelhos móveis
	 * — bem menor que a do computador (72px para 36px, o padrão do tema), porque
	 * em tela estreita o respiro grande acima e abaixo do bloco pesa demais.
	 */
	.aq-bloco--conteudo-maior {
		padding-block: var( --aq-bloco-espaco-vertical-movel, var( --aq-bloco-espaco-vertical, 36px ) );
	}

	.aq-banner__conteudo,
	.aq-conteudo-maior__coluna {
		width: 100%;
	}

	h1 {
		font-size: 36px;
	}

	h2 {
		font-size: 28px;
	}
}