/*
Theme Name: Goncalo
Theme URI: https://construtoragoncalo.com.br
Author: Cavoli Network
Author URI: https://cavolinetwork.com.br
Description: Tema da Construtora Goncalo. Direcao visual "Vulto": fundo quase preto com brilho de oxido, manchete grotesca pesada em duas cores, cards com filete da marca e faixa de numeros. Sem requisicao externa.
Version: 3.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: goncalo
Tags: full-site-editing, block-patterns, one-column, custom-colors, accessibility-ready
*/

/* ==========================================================================
   SUMARIO
   1  Fontes locais: nao ficam aqui, ver nota abaixo
   2  Tokens
   3  Superficies
   4  Reset
   5  Tipografia
   6  Estrutura
   7  Brilho e textura
   8  Cabecalho
   9  Componentes
   10 Utilitarios
   11 Sobrescritas do core
   12 Telas estreitas
   13 Movimento reduzido
   ========================================================================== */


/* ==========================================================================
   1  FONTES LOCAIS

   As quatro @font-face NAO ficam aqui. Elas sao declaradas uma vez so, em
   theme.json, na chave fontFace de cada familia. O WordPress imprime as regras
   a partir dali (folha wp-fonts-local) tanto no site quanto no editor, e e a
   mesma declaracao que alimenta o seletor de fontes do Gutenberg.

   Duplicar aqui nao quebrava nada enquanto os unicode-range fossem iguais nos
   dois lugares, mas qualquer ajuste futuro feito num so criaria divergencia
   silenciosa. Fonte nova ou faixa nova: mexer em theme.json.

   Os arquivos sao variaveis, eixo wght 100 a 900 nos quatro (conferido no
   fvar). Todo acentuado do portugues, incluindo o C cedilha do logotipo, esta
   no arquivo latin: o latin-ext so desce se aparecer um nome estrangeiro, e
   por isso so os dois latin entram no preload do functions.php.
   ========================================================================== */


/* ==========================================================================
   2  TOKENS
   ========================================================================== */

:root {
	/* --- cor bruta, nao usar direto em componente novo: use os tokens de
	   superficie da secao 3, que ja resolvem contraste sozinhos --- */
	--preto:         #0B0B0C;
	--preto-2:       #141416;
	--vermelho:      #B92022;
	--vermelho-esc:  #8E181A;
	--vermelho-luz:  #E8484D;
	--areia:         #F4F1EC;
	--branco:        #FFFFFF;
	--cinza-txt:     #6B6B70;
	--cinza-luz:     #A5A29B;
	--cinza-borda:   #E2DED7;
	--verde-zap:     #25D366;

	/* rgb cru para montar rgba() sem repetir numero */
	--rgb-vermelho:  185, 32, 34;
	--rgb-vermelho-luz: 232, 72, 77;
	--rgb-branco:    255, 255, 255;
	--rgb-preto:     11, 11, 12;

	/* --- familias --- */
	--fonte-display: "Archivo", "Archivo Black", "Helvetica Neue", Arial, sans-serif;
	--fonte-corpo:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* --- escala fluida ---
	   O display do heroi e deliberadamente grande. Timidez de escala e o que
	   faz o site parecer barato. Nao reduzir sem trocar a direcao inteira. */
	--t-display:  clamp(2.75rem, 7vw, 6.5rem);
	--t-manchete: clamp(2rem, 4.6vw, 3.5rem);
	--t-numero:   clamp(3rem, 7.4vw, 5.75rem);
	--t-titulo:   clamp(1.3rem, 1.15vw + 1rem, 1.75rem);
	--t-subtitulo: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
	--t-olho:     clamp(1.0625rem, 0.55vw + 0.94rem, 1.3125rem);
	--t-corpo:    clamp(1rem, 0.25vw + 0.94rem, 1.0625rem);
	--t-apoio:    0.9375rem;
	--t-rotulo:   0.75rem;

	/* --- entrelinha e tracking ---
	 * ATENCAO ao mexer em --lh-display: o texto e caixa alta em portugues, e
	 * caixa alta em portugues carrega acento em cima da altura de caixa (A, E,
	 * I, O, U com til, agudo e circunflexo). Em 0.92 o agudo do U de PUBLICA
	 * cortava o B de OBRA na linha acima, e o til do A de SERTAO encostava no A
	 * de PUBLICA. Nao aparece em texto de teste em ingles, so no conteudo real.
	 * 1.04 e o menor valor que a manchete de tres linhas do heroi fecha sem
	 * encostar, e ainda le como entrelinha apertada. Se for reduzir, confira
	 * antes com uma palavra acentuada em cada linha. */
	--lh-display: 1.04;
	--lh-titulo:  1.1;
	--lh-corpo:   1.65;
	--ls-display: -0.02em;
	--ls-rotulo:  0.18em;

	/* --- espaco --- */
	--esp-xs:    0.5rem;
	--esp-sm:    0.875rem;
	--esp-md:    1.5rem;
	--esp-lg:    2.5rem;
	--esp-xl:    4rem;
	--esp-secao: clamp(5rem, 10vw, 9rem);
	--esp-area:  clamp(1.25rem, 5vw, 2.5rem);

	/* --- medida --- */
	--largura-conteudo: 1200px;
	--largura-folga:    1400px;
	--largura-texto:    62ch;

	/* --- forma --- */
	--raio-card:   4px;
	--raio-botao:  0;
	--raio-pilula: 999px;
	--filete:      4px;

	/* --- sombra --- */
	--sombra:      0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.12);
	--sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 56px -16px rgba(0, 0, 0, 0.22);

	/* --- movimento --- */
	--tempo:        320ms;
	--tempo-rapido: 180ms;
	--curva:        cubic-bezier(0.2, 0.6, 0.2, 1);
	--transicao:    var(--tempo) var(--curva);

	/* --- cabecalho fixo. o heroi e o scroll-padding leem daqui --- */
	--cab-altura: 4.75rem;

	/* --- brilho: posicao e forca, sobrescritiveis por secao --- */
	--brilho-x: 12%;
	--brilho-y: 28%;
	--brilho-forca: 1;

	--z-cabecalho: 100;
	--z-zap: 90;
}


/* ==========================================================================
   3  SUPERFICIES
   Todo componente le --fundo, --txt, --txt-apoio, --borda, --acento e --eco.
   Nenhum componente escreve cor bruta. Isso e o que impede o erro de
   contraste: o vermelho de texto pequeno (--acento) troca sozinho para
   #E8484D quando o fundo e escuro.

   MEDIDO, nao estimado:
     #B92022 sobre #0B0B0C = 3.08:1  so texto grande, fundo de botao, filete
     #B92022 sobre #141416 = 2.88:1  reprova ate em texto grande
     #B92022 sobre #F4F1EC = 5.66:1  passa em tudo
     #E8484D sobre #0B0B0C = 5.12:1  passa em tudo
     #E8484D sobre #141416 = 4.79:1  passa em tudo
     #6B6B70 sobre #0B0B0C = 3.71:1  reprova, por isso existe --cinza-luz
     #A5A29B sobre #0B0B0C = 7.72:1  apoio sobre escuro

   DOIS TOKENS DE BORDA, e nao um. Eles nao sao intercambiaveis:

     --borda        filete decorativo (divisoria, moldura de card, etiqueta).
                    Pode ser tenue de proposito, nao carrega informacao.
     --borda-campo  contorno de CONTROLE (campo de formulario, botao vazado).
                    E a unica coisa que diz ao visitante onde clicar e onde
                    digitar, entao a 1.4.11 exige 3:1 contra o fundo.

   Medido para --borda-campo, que e o que fixa os valores abaixo:
     rgba(255,255,255,0.36) sobre #0B0B0C compoe #5B5B5C = 3.27:1  passa
     rgba(255,255,255,0.13) sobre #0B0B0C compoe #2B2B2C = 1.39:1  reprovava
     #8C8A85 sobre #FFFFFF = 3.45:1 e sobre #F4F1EC = 3.06:1       passa
     #E2DED7 sobre #FFFFFF = 1.34:1 e sobre #F4F1EC = 1.19:1       reprovava
   ========================================================================== */

/* fundo claro, o padrao do documento */
:root,
.sec--claro,
.sup--clara {
	--fundo:     var(--areia);
	--txt:       var(--preto);
	--txt-apoio: var(--cinza-txt);
	--borda:     var(--cinza-borda);
	--borda-campo: #8C8A85;
	--acento:    var(--vermelho);
	--acento-forte: var(--vermelho-esc);
	--eco:       var(--vermelho);
	--filete-cor: var(--vermelho);
}

.sup--clara {
	--fundo: var(--branco);
}

/* fundo escuro principal. o unico lugar onde o vermelho da marca pode ser
   texto, e ainda assim so em tamanho display */
.sec--escuro {
	--fundo:     var(--preto);
	--txt:       var(--branco);
	--txt-apoio: var(--cinza-luz);
	--borda:     rgba(var(--rgb-branco), 0.13);
	--borda-campo: rgba(var(--rgb-branco), 0.36);
	--acento:    var(--vermelho-luz);
	--acento-forte: var(--vermelho-luz);
	--eco:       var(--vermelho);
	--filete-cor: var(--vermelho);
}

/* card sobre o escuro. aqui o #B92022 cai para 2.88:1 e reprova ate em
   tamanho display, entao --eco tambem vira a versao clara */
.sup--escura {
	--fundo:     var(--preto-2);
	--txt:       var(--branco);
	--txt-apoio: var(--cinza-luz);
	--borda:     rgba(var(--rgb-branco), 0.11);
	--borda-campo: rgba(var(--rgb-branco), 0.38);
	--acento:    var(--vermelho-luz);
	--acento-forte: var(--vermelho-luz);
	--eco:       var(--vermelho-luz);
	--filete-cor: var(--vermelho);
}

.sec--escuro,
.sec--claro,
.sup--escura,
.sup--clara {
	background-color: var(--fundo);
	color: var(--txt);
}

/* Toda secao com brilho clareia o proprio fundo, e o #B92022 do --eco cai
   junto: medido, 3,01:1 em 1440px e 2,88:1 em 961px, contra os 3:1 que texto
   grande exige. Sobre fundo clareado o display vira a versao clara, que fecha
   4,8:1 a 5,1:1 em todas as larguras.

   Esta linha e o que permite que a manchete do heroi e o eco do 404 sejam
   heading normal, sem style inline corrigindo cor caso a caso. */
.sec--brilho {
	--eco: var(--vermelho-luz);
}

/* Link de texto solto sobre fundo escuro.
   O theme.json pinta elements.link com #B92022, que sobre #0B0B0C da 3,08:1 e
   reprova em texto normal, e com #8E181A no hover, que da 2,15:1. Hoje o site
   escapa por acidente, porque todo link de secao escura carrega .botao ou
   .rotulo--acento. Mas a espec exige que o cliente escreva texto pelo admin
   sem quebrar nada, e o primeiro paragrafo com link que ele digitar aqui
   entraria reprovado. Com --acento o link fecha 5,12:1 sobre a secao e 4,79:1
   sobre o card, no repouso e no hover. */
.sec--escuro a:not(.botao):not(.zap):not(.cab__link):not(.cab__marca),
.sup--escura a:not(.botao):not(.zap) {
	color: var(--acento);
}

.sec--escuro a:not(.botao):not(.zap):not(.cab__link):not(.cab__marca):hover,
.sup--escura a:not(.botao):not(.zap):hover {
	color: var(--acento-forte);
}


/* ==========================================================================
   4  RESET
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* sem isso a ancora para embaixo do cabecalho fixo */
	scroll-padding-top: calc(var(--cab-altura) + 1rem);
}

body {
	margin: 0;
	background-color: var(--areia);
	color: var(--preto);
	font-family: var(--fonte-corpo);
	font-size: var(--t-corpo);
	line-height: var(--lh-corpo);
	font-weight: 400;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* trava a rolagem horizontal exigida em 390 e 1440. clip e melhor que
	   hidden: nao cria contexto de rolagem e nao quebra position: sticky */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Sem :where() de proposito. Ele zera a especificidade, e a regra caia para
   (0,0,0): qualquer `outline: none` de componente ganhava dela sem esforco, e
   era exatamente o que acontecia com .campo__entrada:focus. */
:focus-visible {
	outline: 2px solid var(--acento, var(--vermelho));
	outline-offset: 3px;
}

::selection {
	background: var(--vermelho);
	color: var(--branco);
}


/* ==========================================================================
   5  TIPOGRAFIA
   ========================================================================== */

/* etiqueta em pilula. o unico componente que pode ser redondo */
.etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1.05em;
	border: 1px solid var(--borda);
	border-radius: var(--raio-pilula);
	color: var(--txt-apoio);
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--ls-rotulo);
	text-transform: uppercase;
	white-space: nowrap;
}

/* o ponto vermelho antes do texto da etiqueta */
.etiqueta::before {
	content: "";
	width: 0.375em;
	height: 0.375em;
	flex: none;
	border-radius: 50%;
	background: var(--acento);
}

/* manchete do heroi. duas cores: o corpo em --txt, a ultima linha em --eco */
.manchete {
	margin: 0;
	font-family: var(--fonte-display);
	font-size: var(--t-display);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--txt);
}

/* SEMPRE em tamanho display. o vermelho da marca sobre escuro so fecha
   contraste como texto grande. nao reaproveitar esta classe em texto miudo */
.manchete__eco {
	color: var(--eco);
	display: block;
}

/* titulo de secao */
.titulo-sec {
	margin: 0;
	font-family: var(--fonte-display);
	font-size: var(--t-manchete);
	font-weight: 900;
	/* mesma variavel da manchete: este h2 tambem quebra em duas linhas em caixa
	 * alta acentuada ("MAIS DE UMA DECADA DE OBRA PUBLICA"), entao sofre da
	 * mesma colisao de acento. Um valor so, um lugar so para corrigir. */
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--txt);
}

.titulo {
	margin: 0;
	font-family: var(--fonte-display);
	font-size: var(--t-titulo);
	font-weight: 700;
	line-height: var(--lh-titulo);
	letter-spacing: -0.01em;
	color: var(--txt);
	text-wrap: balance;
}

/* rotulo miudo em caixa alta espacada */
.rotulo {
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ls-rotulo);
	text-transform: uppercase;
	color: var(--txt-apoio);
}

.rotulo--acento {
	color: var(--acento);
}

/* paragrafo de abertura */
.olho {
	font-size: var(--t-olho);
	line-height: 1.55;
	color: var(--txt-apoio);
	max-width: 54ch;
	text-wrap: pretty;
}

.texto {
	font-size: var(--t-corpo);
	line-height: var(--lh-corpo);
	color: var(--txt-apoio);
	max-width: var(--largura-texto);
	text-wrap: pretty;
}

.texto--forte {
	color: var(--txt);
}

.texto + .texto {
	margin-top: 1em;
}

/* linha discreta de frentes no pe do heroi, no lugar do vao vazio que sobrava.
   Sao os seis servicos reais, escritos por extenso e separados por filete,
   como a linha de indicadores do referencia. Nenhum numero: os quatro da faixa
   ainda nao vieram do cliente. */
.frentes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 1.1rem;
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
	padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
	border-block-start: 1px solid var(--borda);
	list-style: none;
}

.frentes li {
	position: relative;
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--txt-apoio);
	line-height: 1.3;
}

.frentes li + li::before {
	content: "";
	position: absolute;
	inset-block: 0.05em 0.05em;
	inset-inline-start: -0.58rem;
	width: 1px;
	background: var(--borda);
}


/* ==========================================================================
   6  ESTRUTURA
   ========================================================================== */

.sec {
	position: relative;
	padding-block: var(--esp-secao);
}

.sec--curta {
	padding-block: clamp(3rem, 6vw, 5rem);
}

/* respiro extra sob o cabecalho fixo, so no primeiro bloco da pagina.
   O pe e mais curto que o topo de proposito: o padding-block do .sec foi
   pensado para secao com conteudo acima e abaixo, e no heroi ele virava vao
   morto. Medido antes: os botoes terminavam em y=679 numa tela de 900, e a
   secao so acabava em y=887. */
.sec--heroi {
	padding-top: calc(var(--cab-altura) + clamp(3.5rem, 8vw, 7rem));
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.area {
	width: 100%;
	max-width: var(--largura-conteudo);
	margin-inline: auto;
	padding-inline: var(--esp-area);
}

.area--larga {
	max-width: var(--largura-folga);
}

/* cabeca de secao: etiqueta, titulo e olho */
.sec__cabeca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--esp-md);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	max-width: 46rem;
}

/* no heroi a cabeca e a coluna inteira, nao vem grade depois dela: a margem
   ficaria orfa e viraria vao morto acima da dobra */
.sec--heroi .sec__cabeca {
	margin-bottom: 0;
}

.grade {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
}

.grade--dois  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--tres  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--seis  { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Duas colunas desiguais, a favor do texto.
   Em 1.15fr/0.85fr com gap de 28px a coluna de texto ficava com 546px, e
   "MAIS DE UMA DECADA DE OBRA PUBLICA" quebrava em tres linhas tortas. Com
   1.2fr/0.8fr e o gap da grade--heroi a manchete cabe em duas e o vao no pe
   da coluna esquerda encolhe. */
.grade--desigual {
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(2rem, 4vw, 4rem);
}

/* grade de documento: duas colunas largas, e o ultimo atravessa.
   Cinco cards em tres colunas deixavam um buraco no canto direito da segunda
   fileira, e o titulo de quatro linhas da Politica Anticorrupcao desalinhava a
   tipografia da grade inteira. Em duas colunas o titulo mais longo cabe em
   duas linhas e o quinto card fecha a grade sem vao. */
.grade--docs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.grade--docs > :last-child {
	grid-column: 1 / -1;
}

/* Heroi: texto a esquerda, cartao do logo a direita.
   Use esta classe em vez de escrever grid-template-columns na mao. Coluna
   fixa escrita direto no bloco nao colapsa em tela estreita, e como as
   secoes de brilho tem overflow: clip, o cartao nao gera rolagem, ele
   simplesmente some da tela. */
.grade--heroi {
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* linha de botoes */
.acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-sm);
}


/* ==========================================================================
   7  BRILHO E TEXTURA
   Sol baixo raspando concreto, nao spot de estudio. So gradiente, nenhuma
   imagem, nenhuma requisicao.
   ========================================================================== */

.sec--brilho {
	isolation: isolate;
	overflow: clip;
}

/* MEDIDO no referencia e aqui, mesmo viewport de 1440x900, heroi contra heroi:

     referencia   fundo medio rgb(70,13,13),  99% dos pixels com cor,  0% preto
     antes        fundo medio rgb(24,14,15),  25% com cor,            60% preto

   O canto superior direito media rgb(12,12,13), ou seja preto puro. A causa
   eram tres coisas somadas: a elipse principal pequena (72% 52%) e ancorada
   num canto, nenhuma camada cobrindo a secao inteira, e a vinheta de 0.55
   comendo o que sobrava na base.

   O QUE FALTAVA ERA ALCANCE, NAO INTENSIDADE. O alfa do pico continua 0.44,
   o mesmo de antes. O que mudou foi a elipse (72% 52% para 130% 110%), a
   camada de campo nova e a vinheta mais fraca. Subir o pico para 0.60 tambem
   levava a media ao alvo, mas empurrava o ponto mais quente para rgb(125,25,26),
   e ali o #A5A29B do olho caia para 4,09:1 e o #E8484D da manchete para 2,71:1,
   ou seja o brilho bonito reprovava o texto que vive em cima dele.

   MEDIDO com o alfa atual, heroi de 1425x836:
     fundo medio         rgb(66,18,19)    alvo: acima de rgb(55,12,13)
     preto chapado       0,0%             alvo: abaixo de 15%
     canto mais escuro   rgb(38,15,16)    alvo: nunca abaixo de rgb(30,14,15)
     ponto mais claro    rgb(101,22,23)   e ali #A5A29B da 4,92:1 e #E8484D 3,27:1

   Referencia temerelacerda.adv.br no mesmo viewport: media rgb(70,13,13), 0%
   de preto. Se mexer em qualquer alfa daqui, refazer as duas contas: a da
   media E a do contraste no ponto mais claro. Elas puxam para lados opostos. */
.sec--brilho::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		/* 1. a fonte de luz, entrando rasante pela lateral. o alcance e o que
		   mudou: a elipse agora cobre bem mais que o proprio quadro */
		radial-gradient(
			130% 110% at var(--brilho-x) var(--brilho-y),
			rgba(var(--rgb-vermelho), calc(0.44 * var(--brilho-forca))) 0%,
			rgba(var(--rgb-vermelho), calc(0.22 * var(--brilho-forca))) 40%,
			rgba(var(--rgb-vermelho), 0) 78%
		),
		/* 2. rebatimento no canto oposto, para o brilho nao ficar chapado */
		radial-gradient(
			120% 70% at 96% 104%,
			rgba(var(--rgb-vermelho-luz), calc(0.16 * var(--brilho-forca))) 0%,
			rgba(var(--rgb-vermelho-luz), 0) 64%
		),
		/* 3. campo: cobre a secao inteira, e o que tira o preto morto dos cantos */
		radial-gradient(
			150% 150% at 50% 40%,
			rgba(var(--rgb-vermelho), calc(0.14 * var(--brilho-forca))) 0%,
			rgba(var(--rgb-vermelho), calc(0.12 * var(--brilho-forca))) 100%
		),
		/* 4. vinheta que afunda a base e costura com a proxima secao.
		   0.35 e nao 0.55: antes ela apagava a camada de campo justamente onde
		   a secao encontra a seguinte */
		linear-gradient(
			to bottom,
			rgba(var(--rgb-preto), 0) 62%,
			rgba(var(--rgb-preto), 0.35) 100%
		);
}

.sec--brilho-suave { --brilho-forca: 0.62; }
.sec--brilho-alto  { --brilho-y: 10%; }

/* ruido finissimo. SVG embutido como data URI: nao e requisicao de rede */
.ruido {
	position: relative;
	isolation: isolate;
}

.ruido::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.4;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.22'/%3E%3C/svg%3E");
}

/* monograma gigante como marca d'agua. o SVG usa currentColor */
.marca-dagua {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: -8%;
	translate: 0 -50%;
	z-index: -1;
	width: min(58vw, 720px);
	color: var(--txt);
	opacity: 0.03;
	pointer-events: none;
	user-select: none;
}

.marca-dagua svg {
	width: 100%;
	height: auto;
}

/* dentro da marca d'agua o chevron vermelho tambem vira monocromatico */
.marca-dagua svg [fill="#B92022"] {
	fill: currentColor;
}


/* ==========================================================================
   8  CABECALHO
   Transparente sobre o heroi, solido depois que rola. O JS so alterna a
   classe .cabecalho--solido. Sem JS o cabecalho fica transparente e legivel,
   porque o heroi atras dele e escuro.
   ========================================================================== */

.cabecalho {
	/* O cabecalho e fixo, entao fica FORA de qualquer .sec--escuro e herdaria
	   o --acento de :root, que e #B92022. Sobre o fundo do cabecalho solido
	   composto por cima de uma secao clara (#272727) o anel de foco daria
	   2,34:1, contra os 3:1 da 1.4.11. E metade da home e clara. Com a versao
	   clara o mesmo anel fecha 3,89:1.
	   O --vermelho do filete .cab__link::after e do fundo do botao NAO muda:
	   sao nao-texto de 3:1 ja resolvidos. */
	--acento: var(--vermelho-luz);
	--acento-forte: var(--vermelho-luz);

	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-cabecalho);
	height: var(--cab-altura);
	display: flex;
	align-items: center;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--transicao),
		border-color var(--transicao),
		box-shadow var(--transicao),
		backdrop-filter var(--transicao);
}

.cabecalho--solido {
	background-color: rgba(var(--rgb-preto), 0.88);
	border-bottom-color: rgba(var(--rgb-branco), 0.1);
	box-shadow: 0 8px 32px -16px rgba(0, 0, 0, 0.8);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
}

.cabecalho__area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-md);
	width: 100%;
	max-width: var(--largura-folga);
	margin-inline: auto;
	padding-inline: var(--esp-area);
}

.cab__marca {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--branco);
	text-decoration: none;
	flex: none;
}

.cab__marca svg {
	height: 1.9rem;
	width: auto;
}

.cab__marca b {
	font-family: var(--fonte-display);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}

.cab__nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

.cab__link {
	position: relative;
	color: rgba(var(--rgb-branco), 0.78);
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding-block: 0.5rem;
	transition: color var(--tempo-rapido) var(--curva);
}

.cab__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	background: var(--vermelho);
	scale: 0 1;
	transform-origin: left;
	transition: scale var(--tempo) var(--curva);
}

.cab__link:hover,
.cab__link[aria-current="true"] {
	color: var(--branco);
}

.cab__link:hover::after,
.cab__link[aria-current="true"]::after {
	scale: 1 1;
}

/* botao sanduiche, so aparece em tela estreita */
.cab__menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(var(--rgb-branco), 0.22);
	border-radius: 2px;
	color: var(--branco);
	cursor: pointer;
}


/* ==========================================================================
   9  COMPONENTES
   ========================================================================== */

/* --- botao ---------------------------------------------------------------
   Retangulo. O core do WordPress forca 9999px, a secao 11 desfaz isso.
   -------------------------------------------------------------------------- */

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 1.0625rem 1.75rem;
	border: 1px solid var(--vermelho);
	border-radius: var(--raio-botao);
	background-color: var(--vermelho);
	color: var(--branco);
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color var(--transicao),
		border-color var(--transicao),
		color var(--transicao),
		translate var(--transicao),
		box-shadow var(--transicao);
}

.botao svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

.botao:hover {
	background-color: var(--vermelho-esc);
	border-color: var(--vermelho-esc);
	translate: 0 -2px;
	box-shadow: 0 12px 28px -12px rgba(var(--rgb-vermelho), 0.7);
}

.botao:active {
	translate: 0 0;
	box-shadow: none;
}

/* vazado. herda a cor do texto da superficie, entao funciona nos dois fundos.
   A borda le --borda-campo e nao --borda: e contorno de controle, precisa dos
   3:1 da 1.4.11. Com --borda o botao media 1,39:1 no escuro e 1,19:1 sobre a
   areia, e os quatro links do rodape, o segundo CTA do heroi e os cinco
   "Abrir PDF" liam como texto solto, nao como botao. */
.botao--vazado {
	background-color: transparent;
	border-color: var(--borda-campo);
	color: var(--txt);
}

.botao--vazado:hover {
	background-color: var(--txt);
	border-color: var(--txt);
	color: var(--fundo);
	box-shadow: none;
}

.botao--largo {
	width: 100%;
}

/* --- card com filete -----------------------------------------------------
   O filete de 4px na borda esquerda e a assinatura do sistema.
   -------------------------------------------------------------------------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--esp-sm);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	background-color: var(--fundo);
	border: 1px solid var(--borda);
	border-inline-start: var(--filete) solid var(--filete-cor);
	border-radius: var(--raio-card);
	box-shadow: var(--sombra);
	transition:
		translate var(--transicao),
		box-shadow var(--transicao),
		border-color var(--transicao);
}

.card:hover {
	translate: 0 -3px;
	box-shadow: var(--sombra-alta);
}

/* 3.25rem e nao 2rem: em 32px, ao lado de um titulo de 28px e dentro de um
   card de 546px, o icone tinha menos massa visual que a palavra "Missao" e
   lia como rabisco de wireframe. O traco dos SVG desceu de 2 para 1.6 na
   mesma proporcao, senao ele engordaria junto ao crescer. */
.card__icone {
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--esp-xs);
	color: var(--acento);
}

.card__titulo {
	font-family: var(--fonte-display);
	font-size: var(--t-titulo);
	font-weight: 700;
	line-height: var(--lh-titulo);
	letter-spacing: -0.01em;
	color: var(--txt);
	margin: 0;
}

.card__texto {
	font-size: var(--t-corpo);
	line-height: var(--lh-corpo);
	color: var(--txt-apoio);
	margin: 0;
}

/* --- card de servico -----------------------------------------------------
   Mais seco que o .card: sem sombra e com o filete um pouco mais discreto,
   feito para grade de seis sobre fundo escuro.
   -------------------------------------------------------------------------- */

.servico {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--esp-sm);
	padding: clamp(1.5rem, 2.4vw, 2rem);
	background-color: var(--fundo);
	border: 1px solid var(--borda);
	border-radius: var(--raio-card);
	overflow: hidden;
	transition:
		background-color var(--transicao),
		border-color var(--transicao),
		translate var(--transicao);
}

/* O FILETE NASCE VISIVEL.
   Antes ele estava em scale 1 0, ou seja colapsado, e so crescia no :hover.
   Hover nao existe em celular e nao existe na primeira leitura de ninguem, e
   o resultado eram seis retangulos #141416 de borda 1px, indistinguiveis de
   qualquer template, justamente na secao com mais cards.
   O filete grosso da marca na borda esquerda e a assinatura do sistema: ele e
   presenca, nao recompensa. O hover mudou para variar a INTENSIDADE, e nao a
   existencia: o filete engrossa e o fundo do card clareia. */
.servico::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--filete);
	background: var(--filete-cor);
	transition: width var(--transicao);
}

/* o clareado sai de um veu branco e nao de uma cor bruta, entao o mesmo card
   funciona se um dia ele aparecer sobre superficie clara */
.servico:hover {
	translate: 0 -3px;
	border-color: rgba(var(--rgb-vermelho), 0.4);
	box-shadow: inset 0 0 0 999px rgba(var(--rgb-branco), 0.03);
}

.servico:hover::before {
	width: calc(var(--filete) + 2px);
}

.servico__icone {
	width: 3rem;
	height: 3rem;
	color: var(--acento);
}

.servico__icone svg {
	width: 100%;
	height: 100%;
}

.servico__titulo {
	font-family: var(--fonte-display);
	font-size: var(--t-subtitulo);
	font-weight: 700;
	line-height: var(--lh-titulo);
	color: var(--txt);
	margin: 0;
}

.servico__texto {
	font-size: var(--t-apoio);
	line-height: 1.6;
	color: var(--txt-apoio);
	margin: 0;
}

/* --- faixa de numeros ----------------------------------------------------
   Quatro colunas separadas por filete vertical. Os valores reais ainda nao
   vieram do cliente: o placeholder e um travessao neutro, nunca colchete.
   -------------------------------------------------------------------------- */

.numeros {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-block: 1px solid var(--borda);
}

.num {
	display: flex;
	flex-direction: column;
	gap: var(--esp-sm);
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1rem, 2.5vw, 2rem);
	border-inline-start: 1px solid var(--borda);
}

.num:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.num__valor {
	display: flex;
	align-items: baseline;
	gap: 0.06em;
	font-family: var(--fonte-display);
	font-size: var(--t-numero);
	font-weight: 900;
	line-height: 0.86;
	letter-spacing: -0.035em;
	color: var(--txt);
	font-variant-numeric: tabular-nums lining-nums;
}

/* o mais em vermelho. tamanho display, contraste medido em 3.08:1, passa */
.num__mais {
	color: var(--eco);
	font-size: 0.62em;
	line-height: 1;
}

/* Enquanto o cliente nao manda o numero.
   NUNCA em tamanho display. Em 92px de Archivo 900 o travessao vira um
   retangulo cinza solido de ~110x14px, e quatro deles numa faixa de largura
   total leem como texto tarjado ou skeleton de carregamento. Trocar colchete
   a mostra por tarja a mostra e o mesmo erro com outra roupa.
   Em 1.75rem com peso 400 ele volta a ser o que e: um travessao, do tamanho
   do rotulo que esta embaixo dele.
   A faixa inteira so entra na home quando pelo menos um dos quatro valores
   estiver preenchido, entao este estado so aparece ao lado de numero real,
   onde o contexto explica sozinho que aquele ainda nao veio. */
.num__valor--vazio {
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--txt-apoio);
	letter-spacing: 0;
}

.num__rotulo {
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: var(--ls-rotulo);
	text-transform: uppercase;
	color: var(--txt-apoio);
	line-height: 1.35;
}

/* --- cartao do logo ------------------------------------------------------ */

.cartao-logo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--esp-md);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
	background-color: var(--preto-2);
	border: 1px solid rgba(var(--rgb-branco), 0.1);
	border-radius: var(--raio-card);
	/* SEM isolation: isolate aqui, de proposito. Sem stacking context proprio o
	   ::before de z-index -1 sobe ate o contexto da secao e passa a ser pintado
	   ANTES do fundo opaco deste cartao. E o que faz o halo aparecer em volta
	   da moldura sem lavar o interior dela, onde o logotipo precisa de #141416
	   chapado para ler. */
}

/* O brilho que vaza por tras da moldura.
   MEDIDO antes: dentro do cartao rgb(20,20,22), fora rgb(12,12,13). Oito
   niveis de diferenca, imperceptivel no desktop. Tres causas:
     1. o blur(14px) num gradiente que ja era suave nao produzia halo, so
        lavava a cor. Saiu.
     2. o inset de -30% prendia o vazamento perto demais da moldura. Agora
        -60%, e o halo acontece fora dela, que e onde ele e visto.
     3. o alfa central subiu de 0.5 para 0.72.
   Conferir medindo: a area imediatamente ao redor do cartao precisa ficar ao
   menos 25 niveis acima do fundo da secao. */
.cartao-logo::before {
	content: "";
	position: absolute;
	inset: -60%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		42% 42% at 50% 46%,
		rgba(var(--rgb-vermelho), 0.72) 0%,
		rgba(var(--rgb-vermelho), 0.30) 38%,
		rgba(var(--rgb-vermelho), 0.08) 62%,
		rgba(var(--rgb-vermelho), 0) 78%
	);
}

.cartao-logo__marca {
	width: min(100%, 300px);
	color: var(--branco);
}

.cartao-logo__marca svg {
	width: 100%;
	height: auto;
}

.cartao-logo__legenda {
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: var(--ls-rotulo);
	text-transform: uppercase;
	color: var(--cinza-luz);
	text-align: center;
	line-height: 1.5;
}

/* --- selo ----------------------------------------------------------------
   Retangulo vermelho solido sobreposto ao card.
   -------------------------------------------------------------------------- */

.selo {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: clamp(1rem, 2.6vw, 2rem);
	translate: 0 -50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	padding: 0.55rem 0.85rem;
	background-color: var(--vermelho);
	color: var(--branco);
	font-family: var(--fonte-display);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* --- pilula do whatsapp --------------------------------------------------
   Texto quase preto sobre o verde da marca do WhatsApp: 9.92:1. Branco sobre
   esse mesmo verde daria 1.98:1 e reprovaria.
   -------------------------------------------------------------------------- */

.zap {
	/* mesma razao do .cabecalho: a pilula e fixa, fica fora de qualquer secao e
	   herdaria o #B92022 de :root no anel de foco. Sobre o canto inferior
	   direito do #contato isso media 2,95:1. */
	--acento: var(--vermelho-luz);
	--acento-forte: var(--vermelho-luz);

	position: fixed;
	inset-block-end: clamp(1rem, 3vw, 1.75rem);
	inset-inline-end: clamp(1rem, 3vw, 1.75rem);
	z-index: var(--z-zap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	/* piso de 44px nos dois eixos: abaixo de 430px o rotulo some e sobrava so o
	   icone, o que deixava o alvo em 43,4px. E o CTA principal no celular. */
	min-width: 44px;
	min-height: 44px;
	padding: 0.85rem 1.25rem;
	background-color: var(--verde-zap);
	color: var(--preto);
	border-radius: var(--raio-pilula);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45);
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: translate var(--transicao), box-shadow var(--transicao);
}

.zap:hover {
	translate: 0 -2px;
	box-shadow: 0 16px 38px -10px rgba(0, 0, 0, 0.55);
}

.zap svg {
	width: 1.35em;
	height: 1.35em;
	flex: none;
}

/* --- campo de formulario ------------------------------------------------- */

.campo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.campo__rotulo {
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: var(--ls-rotulo);
	text-transform: uppercase;
	color: var(--txt-apoio);
}

/* O campo nao tem texto dentro em repouso, entao a borda e a UNICA coisa que
   diz ao visitante que ali se digita. Por isso ela le --borda-campo (3,27:1) e
   nao --borda (1,39:1), que e filete decorativo. Antes disso os quatro campos
   sumiam do fundo e sobrava o rotulo flutuando, num formulario que e o unico
   ponto de conversao da pagina. O preenchimento tambem subiu de 0.04 para
   0.06, para o campo ler como campo e nao como buraco. */
.campo__entrada {
	width: 100%;
	padding: 0.9rem 1rem;
	background-color: rgba(var(--rgb-branco), 0.06);
	border: 1px solid var(--borda-campo);
	border-radius: 2px;
	color: var(--txt);
	font-family: var(--fonte-corpo);
	font-size: var(--t-corpo);
	transition: border-color var(--tempo-rapido) var(--curva), background-color var(--tempo-rapido) var(--curva);
}

.campo__entrada::placeholder {
	color: var(--txt-apoio);
	opacity: 0.7;
}

/* o anel vale para o teclado, a troca de borda e o reforco. Antes havia
   `outline: none` aqui, e como o :focus-visible geral estava dentro de um
   :where() de especificidade zero, esta regra ganhava e o campo ficava sem
   anel nenhum, so com a troca de uma borda que era invisivel. */
.campo__entrada:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 2px;
}

.campo__entrada:focus {
	border-color: var(--acento);
	background-color: rgba(var(--rgb-branco), 0.09);
}

.sec--claro .campo__entrada,
.sup--clara .campo__entrada {
	background-color: var(--branco);
}

/* Card escuro dentro de uma secao clara, que e o caso do canal de denuncias:
   a regra acima pinta os campos de branco por serem descendentes de .sec--claro,
   e eles somem dentro do card preto. Aqui eles voltam ao campo escuro. Mesma
   especificidade da regra acima, ganha por vir depois. */
.sup--escura .campo__entrada {
	background-color: rgba(var(--rgb-branco), 0.06);
	color: var(--branco);
	border-color: var(--borda-campo);
}

.sup--escura .campo__entrada::placeholder {
	color: rgba(var(--rgb-branco), 0.5);
}

.sup--escura select.campo__entrada option {
	color: initial;   /* a lista aberta e desenhada pelo sistema, fundo claro */
}

textarea.campo__entrada {
	min-height: 9rem;
	resize: vertical;
}

/* --- formulario do canal de denuncias -------------------------------------
   Fica dentro de um card .sup--escura, entao herda o estilo de campo escuro.
   A identificacao e opcional e vive dentro de um <details>: fechado por
   padrao, para o caminho anonimo ser o caminho mais curto e obvio.
   -------------------------------------------------------------------------- */

.grade--canal {
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.canal-identif {
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	background-color: rgba(var(--rgb-branco), 0.03);
	border: 1px dashed var(--borda-campo);
	border-radius: 2px;
}

.canal-identif > summary {
	cursor: pointer;
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: var(--ls-rotulo);
	text-transform: uppercase;
	color: var(--txt-apoio);
	list-style: none;
}

.canal-identif > summary::-webkit-details-marker {
	display: none;
}

.canal-identif > summary::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	color: var(--acento);
	font-weight: 700;
}

.canal-identif[open] > summary::before {
	content: "\2212"; /* sinal de menos */
}

.canal-identif > summary:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
}

.canal-identif[open] > summary {
	margin-block-end: 0.75rem;
}

/* --- dado de contato em destaque -----------------------------------------
   O telefone e dado, nao link de leitura corrida. Sem o sublinhado padrao do
   navegador, que num site que quer parecer caro e um dos sinais mais rapidos
   de template. O sublinhado volta no hover e no foco, onde ele informa.
   -------------------------------------------------------------------------- */

.dado-forte {
	font-family: var(--fonte-display);
	font-size: var(--t-subtitulo);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--acento);
	text-decoration: none;
}

.dado-forte:hover,
.dado-forte:focus-visible {
	text-decoration: underline;
}

/* --- rodape --------------------------------------------------------------
   Degrau proprio de superficie. Antes o rodape era o mesmo #0B0B0C da secao de
   contato, sem filete e sem degrau: os dois liam como uma unica mancha preta
   de 1528px e o rodape desaparecia dentro do contato. A espec pede alternancia
   de superficie, e esta e a ultima troca da pagina.
   -------------------------------------------------------------------------- */

.rodape {
	background-color: var(--preto-2);
	border-block-start: 1px solid var(--borda);
	padding-block: clamp(3.5rem, 6vw, 5rem);
}

/* Rodape em coluna: titulo da coluna, depois os dados.
   Os titulos sao h2 e nao paragrafo forte, para quem navega por cabecalho
   encontrar o rodape. O desenho vem da classe, nao da tag. */
.rodape__titulo {
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 600;
	letter-spacing: var(--ls-rotulo);
	text-transform: uppercase;
	color: var(--txt);
	margin-bottom: var(--esp-sm);
}

/* links do rodape voltaram a ser texto, nao quatro botoes vazados enfileirados
   com cara de barra de ferramentas. A cor de link em secao escura ja esta
   resolvida na secao 3, entao aqui so falta o desenho da lista. */
.rodape__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	list-style: none;
}

.rodape__links a {
	font-size: var(--t-apoio);
	text-decoration: none;
}

.rodape__links a:hover,
.rodape__links a:focus-visible {
	text-decoration: underline;
}

/* Instagram e LinkedIn entram so como icone, do jeito que o referencia faz */
.rodape__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--borda-campo);
	border-radius: 2px;
	color: var(--txt);
	transition: border-color var(--transicao), color var(--transicao);
}

.rodape__social svg {
	width: 1.15rem;
	height: 1.15rem;
}

.rodape__social:hover {
	border-color: var(--acento);
	color: var(--acento);
}


/* ==========================================================================
   10  UTILITARIOS
   ========================================================================== */

/* Revelacao ao rolar.
   O estado escondido so existe sob html.js, e quem marca html.js e a PRIMEIRA
   linha do proprio assets/js/site.js, nao um script separado no wp_head.
   Isso e proposital: a flag e o observador que a consome vivem ou morrem
   juntos. Se site.js der 404, for bloqueado ou falhar, a flag nunca entra,
   .revelar nunca zera a opacidade e a pagina nasce inteira na tela, que e a
   exigencia da espec de tudo ser legivel com o JavaScript desligado.
   Com a flag no wp_head e o script num pedido separado, um 404 no script
   deixava Compliance e Contato em opacity 0 permanente, visiveis so para o
   leitor de tela. O custo desta troca e um quadro sem esconder, que e o
   comportamento seguro. */
.js .revelar {
	opacity: 0;
	translate: 0 18px;
	transition: opacity 620ms var(--curva), translate 620ms var(--curva);
}

.js .revelar--visivel {
	opacity: 1;
	translate: 0 0;
}

/* escalona a entrada dos filhos de uma grade */
.revelar--um   { transition-delay: 60ms; }
.revelar--dois { transition-delay: 120ms; }
.revelar--tres { transition-delay: 180ms; }

.so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* filete horizontal fino */
.risco {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--borda);
}

/* filete curto na cor da marca, usado acima de titulo de secao */
.risco--marca {
	width: 3.5rem;
	height: var(--filete);
	background: var(--filete-cor);
}


/* ==========================================================================
   11  SOBRESCRITAS DO CORE
   ========================================================================== */

/* Armadilha 3: o core forca border-radius 9999px no botao. Nesta direcao
   botao e retangulo. A especificidade precisa vencer .wp-element-button */
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-element-button,
button.wp-element-button,
.wp-block-search__button {
	border-radius: var(--raio-botao);
}

/* o botao do editor herda o desenho do .botao */
.wp-block-button__link,
.wp-element-button {
	font-family: var(--fonte-display);
	font-size: var(--t-rotulo);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 1.0625rem 1.75rem;
}

/* Armadilha 4: o WordPress 7 injeta o proprio skip link. Nao criar outro,
   so deixar o dele visivel quando recebe foco */
.skip-link:focus,
.wp-block-template-part .skip-link:focus {
	background: var(--vermelho);
	color: var(--branco);
	padding: 0.75rem 1.25rem;
	z-index: 999;
}

/* o editor nao tem <body class>, entao a raiz do canvas precisa da cor */
.editor-styles-wrapper {
	background-color: var(--areia);
	font-family: var(--fonte-corpo);
}

/* alinhamento largo dentro das secoes */
.sec .alignwide { max-width: var(--largura-folga); }
.sec .alignfull { max-width: none; }


/* ==========================================================================
   12  TELAS ESTREITAS
   ========================================================================== */

@media (max-width: 960px) {
	.grade--tres,
	.grade--seis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* o cartao do logo desce para baixo da manchete antes de ficar apertado */
	.grade--heroi,
	.grade--desigual {
		grid-template-columns: minmax(0, 1fr);
	}

	.numeros {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* com duas colunas, quem abre linha nao leva filete a esquerda */
	.num:nth-child(odd) {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.num:nth-child(n + 3) {
		border-block-start: 1px solid var(--borda);
	}

	.cab__nav {
		display: none;
	}

	.cab__nav[data-aberto="true"] {
		position: fixed;
		inset-block-start: var(--cab-altura);
		inset-inline: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--esp-md) var(--esp-area) var(--esp-lg);
		background-color: var(--preto);
		border-bottom: 1px solid rgba(var(--rgb-branco), 0.1);
	}

	.cab__nav[data-aberto="true"] .cab__link {
		padding-block: 1rem;
		border-bottom: 1px solid rgba(var(--rgb-branco), 0.08);
		font-size: 0.875rem;
	}

	.cab__menu {
		display: inline-flex;
	}
}

@media (max-width: 640px) {
	.grade--dois,
	.grade--tres,
	.grade--seis,
	.grade--docs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 390px, o alvo estreito da espec */
@media (max-width: 430px) {
	:root {
		--cab-altura: 4rem;
		/* o brilho sobe e enfraquece: em tela estreita ele comia a manchete */
		--brilho-x: 50%;
		--brilho-y: 12%;
		--brilho-forca: 0.72;
	}

	.numeros {
		grid-template-columns: minmax(0, 1fr);
	}

	.num {
		border-inline-start: 0;
		padding-inline: 0;
		padding-block: 1.5rem;
	}

	.num:not(:first-child) {
		border-block-start: 1px solid var(--borda);
	}

	.acoes {
		flex-direction: column;
		align-items: stretch;
	}

	.botao {
		width: 100%;
	}

	.cab__marca b {
		display: none;
	}

	/* so o icone, para a pilula nao ocupar meia tela. o min-width e o
	   min-height de 44px da regra base seguram o alvo de toque */
	.zap {
		padding: 0.9rem;
	}

	.zap span {
		display: none;
	}

	.marca-dagua {
		width: 92vw;
		inset-inline-end: -28%;
		opacity: 0.022;
	}
}


/* ==========================================================================
   13  MOVIMENTO REDUZIDO
   Nada some. Tudo que dependia de animacao para aparecer nasce visivel.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.js .revelar {
		opacity: 1;
		translate: none;
	}

	/* o deslocamento no hover some. a mudanca de cor e do filete continua,
	   so que instantanea, entao o estado de hover segue perceptivel */
	.botao:hover,
	.card:hover,
	.zap:hover,
	.servico:hover {
		translate: none;
	}
}