/*
Theme Name: CTO Office
Author: CTO Office
Description: Tema de blocos (FSE) do site CTO Office, portado do cto-office-blocks 3.3.0 para o Método F3. Cor, tipografia, espaçamento e estilo de bloco moram no theme.json e em styles/; este arquivo guarda apenas o que não tem equivalente nativo — cada regra com o motivo declarado.
Version: 4.2.0
Requires at least: 6.7
Tested up to: 7.1
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: ctooffice
Tags: block-patterns, full-site-editing, accessibility-ready, one-column, wide-blocks, custom-logo
*/

/* ==========================================================================
   Regra de admissão deste arquivo
   --------------------------------------------------------------------------
   Só entra aqui o que o theme.json não expressa. Cor vem SEMPRE de
   var(--wp--preset--color--…): nenhum literal (hex/rgb/hsl) neste arquivo e
   nenhum SVG embutido. Medidas de layout (larguras de selo, alturas de barra,
   pontos de quebra) são geometria, não token, e ficam em px. Cada bloco abaixo
   declara por que não pôde ser nativo. A numeração segue a do tema de origem
   (cto-office-blocks 3.3.0) para que o diff com o site publicado seja legível.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens de layout
   Motivo: a altura do cabeçalho fixo é consumida por três regras que precisam
   concordar (recuo de âncora, altura mínima da barra e camada). O theme.json
   não expõe custom property de layout; o token nasce aqui, em uma fonte só.
   -------------------------------------------------------------------------- */
:root {
	--ctooffice-altura-cabecalho: 76px;
	--ctooffice-altura-cabecalho-campanha: 68px;
	--ctooffice-camada-cabecalho: 60;
	--ctooffice-camada-overlay: 200;
	--ctooffice-alvo-minimo: 44px;
}

/* 1. Base do documento — `scroll-behavior` e `text-wrap` não são expostos pelo theme.json. A rolagem suave só para quem não pediu redução de movimento (bloco 14). */
html {
	/* Compensa o cabeçalho fixo ao navegar por âncoras (#servicos, #faq...). */
	scroll-padding-top: calc(var(--ctooffice-altura-cabecalho) + var(--wp--preset--spacing--px-20));
}

:where(h1, h2, h3) {
	/* `break-word` e não `anywhere`: `anywhere` reduz a largura min-content do título a um caractere e o texto colapsa em flex/grid. */
	overflow-wrap: break-word;
}

/* Foco por teclado em todo controle: o core não aceita `:focus-visible` em styles.elements, então a regra é global aqui. Sobre as faixas escuras o anel passa ao dourado (bloco 15b). */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

::selection {
	background-color: var(--wp--preset--color--accent-soft);
}

/* 2. Cabeçalho fixo — o sticky nativo se aplica ao Grupo, cujo pai é o wrapper do Template Part (mesma altura): nunca desliza. Aqui o sticky vai para o wrapper <header>, cujo pai é `.wp-site-blocks`. O deslocamento pela admin bar também não tem equivalente nativo. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--ctooffice-camada-cabecalho);
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* A altura mínima da barra saiu do atributo do bloco (dimensions.minHeight literal, proibido pelo contrato de preset) e mora no token. */
.cto-header > .wp-block-group {
	min-height: var(--ctooffice-altura-cabecalho);
}

.cto-header--campanha > .wp-block-group {
	min-height: var(--ctooffice-altura-cabecalho-campanha);
}

.cto-header {
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

/* ARMADILHA MEDIDA EM PRODUÇÃO (01/08/2026): `backdrop-filter` cria BLOCO CONTENTOR para descendentes `position: fixed` (também `transform`, `filter`, `perspective`, `contain`, `will-change`). O overlay do menu compacto é `position: fixed; inset: 0` DENTRO do cabeçalho e resolvia o inset contra o cabeçalho (medido a 390px: overlay 390x76 dentro de um cabeçalho de 77px). Sem o blur o overlay mede 390x844. O blur é suprimido SÓ com o menu aberto; o overlay é opaco e cobre a tela, então não há o que borrar. `has-modal-open` é posto pelo core no <html>. */
html.has-modal-open .cto-header,
.cto-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Sem o blockGap raiz entre cabeçalho, conteúdo e rodapé: a faixa entre seções escuras adjacentes apareceria como listra clara. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* 3. Navegação — antecipa o menu sanduíche. O core fixa o corte em 600px; com cinco itens mais o botão a quebra em duas linhas ocorre abaixo de 960px. Estas regras invertem, na mesma especificidade do core, o intervalo 600–959px. */
@media (max-width: 959px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* CTA do cabeçalho sai junto com o menu. Três classes para superar `.wp-block-buttons.is-layout-flex` (display: flex) do wp-block-library. */
	.cto-header .wp-block-buttons.cto-header-cta {
		display: none;
	}
}

/* Botões do menu compacto: alvo mínimo de 44px (WCAG 2.5.8), que o bloco não expõe. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-inline-size: var(--ctooffice-alvo-minimo);
	min-block-size: var(--ctooffice-alvo-minimo);
}

/* 4. Eyebrow (rótulo de seção) — o traço é pseudo-elemento decorativo; a cor vem do bloco e a tipografia mora aqui (contrato de preset: nenhum peso ou espaçamento de letra inline). */
.cto-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.25;
	text-transform: uppercase;
}

.cto-eyebrow::before {
	content: "";
	flex: 0 0 34px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.85;
}

.cto-eyebrow--center {
	justify-content: center;
}

/* 4b. Medidas de leitura — `max-width` por elemento não tem controle nativo em parágrafos e títulos. */
.cto-measure-text {
	max-width: 46rem;
}

.cto-measure-title {
	max-width: 53rem;
}

.cto-lead {
	line-height: 1.58;
}

/* 4c. Tipografia que saiu do markup (peso, entrelinha, espaçamento de letra): o contrato de preset só admite token inline, e estes valores não são token. Cada classe é o gancho que o bloco já carregava. */
.cto-map-title {
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.cto-proof-title {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.cto-proof-text {
	line-height: 1.4;
}

.cto-hero-note {
	line-height: 1.5;
}

.cto-risk-text {
	line-height: 1.42;
}

.cto-map-caption {
	line-height: 1.45;
}

.cto-card-text {
	line-height: 1.5;
}

.cto-decision-box__titulo {
	font-weight: 600;
	line-height: 1.25;
}

.cto-price-value {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.12;
}

.cto-step-num {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.cto-risk-label {
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.cto-mark {
	font-weight: 800;
}

.cto-placar-foot {
	line-height: 1.5;
}

.cto-header-note {
	line-height: 1.3;
}

.cto-card-title {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.18;
}

/* 5. Selo de status com marcador circular — o ponto é pseudo-elemento decorativo. */
.cto-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	width: -moz-fit-content;
	width: fit-content;
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cto-status::before {
	content: "";
	flex: 0 0 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 5px var(--wp--preset--color--gold-line);
}

/* 6. Selo em pílula — sem `width: fit-content` nativo para parágrafos. */
.cto-pill {
	width: -moz-fit-content;
	width: fit-content;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cto-pill--spaced {
	letter-spacing: 0.14em;
}

/* 7. Selos numéricos dos cards — caixa fixa com número centralizado. `inline-grid` porque no layout `constrained` o core aplica `margin-inline: auto !important` aos filhos de nível bloco e centralizaria o selo; o core aplica `padding: 1.25em 2.375em` a `p.has-background`. */
.cto-num {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	font-weight: 700;
	line-height: 1;
}

/* 8. Listas com marcador próprio — sem controle nativo para marcador circular colorido posicionado. */
.cto-mini-list,
.cto-check-list {
	list-style: none;
	padding-left: 0;
}

.cto-mini-list li,
.cto-check-list li {
	position: relative;
	padding-left: 22px;
	line-height: 1.45;
}

.cto-mini-list li {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
}

.cto-check-list li {
	padding-left: 24px;
	color: var(--wp--preset--color--on-dark-3);
	font-size: var(--wp--preset--font-size--medium);
}

/* O core não aplica blockGap entre itens de lista. */
.cto-mini-list li + li {
	margin-top: 10px;
}

.cto-check-list li + li {
	margin-top: 12px;
}

.cto-mini-list li::before,
.cto-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: var(--wp--preset--color--accent);
}

.cto-check-list li::before {
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--gold);
}

.cto-mini-list--neutro li::before {
	background: var(--wp--preset--color--neutral);
}

/* 8b. Marcador dos cards "Para quem é" — quadrado decorativo em pseudo-elemento, para não ser lido por leitor de tela. */
.cto-audience-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	line-height: 1.25;
}

.cto-audience-title::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.cto-mark-yes::before {
	content: "\2713";
	background: var(--wp--preset--color--accent);
}

.cto-mark-no::before {
	content: "\2014";
	background: var(--wp--preset--color--neutral);
}

/* 8c. Painel de risco do hero — a barra é um bloco Colunas; a largura da coluna preenchida É o nível de risco (controle nativo). O CSS só dá altura, raio e gradiente. */
.cto-risk-label {
	flex: 0 0 128px;
	min-width: 0;
}

.cto-risk-bar {
	width: 100%;
}

.cto-risk-track.wp-block-columns {
	min-width: 0;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wp--preset--color--track);
}

.cto-risk-track > .wp-block-column {
	min-height: 8px;
	margin: 0;
}

.cto-risk-fill {
	border-radius: inherit;
	background: linear-gradient(90deg, var(--wp--preset--color--gold-dark), var(--wp--preset--color--gold));
}

.cto-risk-tag {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* O rótulo encolhe antes de quebrar; abaixo de 640px o item vira uma coluna. */
@media (max-width: 640px) {
	.is-style-risk-item.wp-block-group.is-layout-flex,
	.cto-map-header.wp-block-group.is-layout-flex {
		flex-wrap: wrap;
	}

	.cto-risk-label {
		flex-basis: 100%;
	}
}

/* 9. Lista de etapas do contato (numeração + texto) — layout interno do item. */
.cto-flow-list {
	display: grid;
	gap: 12px;
	list-style: none;
	padding-left: 0;
}

.cto-flow-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--line-translucent);
	border-radius: 16px;
	background: var(--wp--preset--color--surface-dark);
	line-height: 1.45;
}

.cto-flow-list strong {
	color: var(--wp--preset--color--gold-light);
	font-variant-numeric: tabular-nums;
}

/* 10. FAQ — bloco Detalhes: o core não expõe o marcador do <summary> nem seu layout interno. Bordas, raio e fundo vêm de styles.blocks["core/details"]. */
.cto-faq .wp-block-details {
	overflow: hidden;
}

.cto-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 24px;
	color: var(--wp--preset--color--contrast);
	font-weight: 800;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.cto-faq summary::-webkit-details-marker {
	display: none;
}

.cto-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 400;
	line-height: 1;
}

.cto-faq details[open] > summary::after {
	content: "\2212";
}

.cto-faq .wp-block-details > *:not(summary) {
	max-width: 780px;
	margin: 0;
	padding: 0 24px 24px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
}

/* 12. Colunas assimétricas — o bloco Colunas empilha em 781px (fixo do core); hero, faixa de serviços e contato precisam empilhar antes. */
@media (max-width: 1020px) {
	.cto-stack-early.wp-block-columns:not(.is-not-stacked-on-mobile) {
		/* `!important` obrigatório: acima de 782px o wp-block-library declara `flex-wrap: nowrap !important`. */
		flex-wrap: wrap !important;
	}

	.cto-stack-early.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important; /* sobrepõe o flex-basis inline do atributo width da coluna */
	}
}

/* 13. Link "pular para o conteúdo" — não existe bloco nativo para o link de salto, e ele precisa ser o PRIMEIRO nó focável do DOM, sair da tela por padrão e voltar ao receber foco. A técnica de recorte mantém o link na árvore de acessibilidade (ao contrário de `display:none`). */
.ctooffice-pular {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--ctooffice-alvo-minimo);
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--base);
	text-decoration: underline;
}

.ctooffice-pular:not(:focus):not(:active) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ctooffice-pular:focus {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	z-index: var(--ctooffice-camada-overlay);
}

/* 14. Movimento — a rolagem suave é conforto, não conteúdo. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@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;
		scroll-behavior: auto !important;
	}
}

/* 15. Botão secundário (estilo "Contorno" nativo) — o core só zera o fundo; o desenho pede superfície branca com borda. A borda é `muted` (5,5:1 sobre base), e não a linha clara do desenho de origem: contorno de botão é fronteira de componente e precisa de 3:1 (WCAG 1.4.11), medido em a11y.contraste. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}

/* 15b. Foco visível sobre as faixas escuras: o acento não alcança 3:1 sobre navy; o anel passa ao dourado. */
.is-style-section-dark :focus-visible,
.is-style-section-hero-campanha :focus-visible,
.is-style-panel-executive :focus-visible,
.cto-footer :focus-visible,
.cto-header--campanha :focus-visible,
.cto-cta-fixo :focus-visible,
.cto-sticky-cta :focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* 16. Botões: `min-height` e `display:inline-flex` não são expostos em styles.elements.button. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	white-space: nowrap;
	transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* 17. Landing "Segunda Opinião" — placar da proposta: separador entre linhas sem controle nativo por item. */
.cto-scorerow {
	padding: 11px 2px;
	border-bottom: 1px solid var(--wp--preset--color--surface-dark);
}

.cto-placar > .cto-scorerow:last-of-type {
	border-bottom: 0;
}

.cto-scorerow .cto-mark {
	flex: none;
	white-space: nowrap;
}

.cto-placar-foot {
	padding-top: 14px;
	border-top: 1px dashed var(--wp--preset--color--line-translucent-2);
}

/* 19. Landing — selo numérico redondo dos passos (variação da seção 7). */
.cto-num--round {
	width: 38px;
	height: 38px;
	font-weight: 800;
}

/* 21. Landing — botão de campanha (dourado): o theme.json define UM conjunto de cores para elements.button. */
.cto-cta-gold > .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

.cto-cta-gold > .wp-block-button__link:hover,
.cto-cta-gold > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--gold);
}

/* Botão contornado sobre fundo escuro: a seção 15 assume fundo claro. */
.is-style-section-hero-campanha .wp-block-button.is-style-outline > .wp-block-button__link,
.is-style-section-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--line-on-dark);
	background-color: transparent;
	color: var(--wp--preset--color--on-dark-strong);
}

.is-style-section-hero-campanha .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.is-style-section-hero-campanha .wp-block-button.is-style-outline > .wp-block-button__link:focus,
.is-style-section-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.is-style-section-dark .wp-block-button.is-style-outline > .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--base);
	background-color: transparent;
	color: var(--wp--preset--color--base);
	box-shadow: none;
}

/* 22. Landing — CTA fixo no rodapé (telas pequenas): `position: fixed` não tem equivalente nativo. Abaixo de 782px. Sem JavaScript funciona; o script só esconde com o formulário visível. */
.cto-sticky-cta {
	display: none;
}

@media (max-width: 781px) {
	.cto-sticky-cta {
		display: block;
		position: fixed;
		inset: auto 0 0 0;
		z-index: var(--ctooffice-camada-cabecalho);
		padding: 12px 16px;
		border-top: 1px solid var(--wp--preset--color--line-translucent-2);
		background: var(--wp--preset--color--navy);
		transition: transform 0.24s ease, opacity 0.24s ease;
	}

	.cto-sticky-cta.is-hidden {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.cto-sticky-cta .wp-block-button__link {
		white-space: normal;
		text-align: center;
	}

	.cto-sticky-cta ~ * {
		scroll-margin-bottom: 88px;
	}

	body:has(.cto-sticky-cta) .wp-site-blocks > footer {
		padding-bottom: 84px;
	}
}

/* 23. Landing — retrato do responsável: recorte com `object-fit`; as dimensões saíram do bloco (literal proibido no contrato) e moram aqui. */
.cto-avatar img {
	display: block;
	width: 180px;
	height: 180px;
	border-radius: 20px;
	object-fit: cover;
	background: var(--wp--preset--color--paper-2);
}

/* 24. Landing — destaque dourado no título do hero: o realce nativo grava um fundo transparente em notação funcional, e o kses descarta parênteses fora de var()/calc()/gradiente; o trecho usa <em>, que sobrevive ao kses. */
.is-style-section-hero-campanha h1 em {
	color: var(--wp--preset--color--gold);
	font-style: normal;
}

/* 25. CTA fixo no rodapé em telas pequenas — SITE INTEIRO. `position: fixed` sem equivalente nativo; o CTA do cabeçalho sai abaixo de 960px com o menu (seção 3). Corte 781px, o MESMO da barra da landing. SEM `backdrop-filter` de propósito (bloco contentor, seção 2). O tema decide ONDE ela aparece (`inc/cta-fixo.php` põe a classe `cto-sem-cta-fixo` no body) e quais templates incluem a part. */
.cto-cta-fixo {
	display: none;
}

@media (max-width: 781px) {
	.cto-cta-fixo {
		display: block;
		position: fixed;
		inset: auto 0 0 0;
		z-index: var(--ctooffice-camada-cabecalho);
		/* `env()` com valor de reserva: sem safe-area resolve para 0px em vez de invalidar o `calc()`. */
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--wp--preset--color--line-translucent-2);
		background: var(--wp--preset--color--navy);
		transition: transform 0.24s ease, opacity 0.24s ease;
	}

	.cto-cta-fixo.is-hidden {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.cto-cta-fixo .wp-block-button__link {
		white-space: normal;
		text-align: center;
	}

	/* `:has()` aqui é ENRIQUECIMENTO: sem suporte perde-se o respiro do rodapé, não a barra. */
	body:has(.cto-cta-fixo):not(.cto-sem-cta-fixo) .wp-site-blocks > footer {
		padding-bottom: 84px;
	}
}

/* Uma barra por página, sempre. `.cto-sem-cta-fixo` vem do tema (`inc/cta-fixo.php`); `:has(.cto-sticky-cta)` é a rede de segurança contra duas barras. */
body.cto-sem-cta-fixo .cto-cta-fixo,
body:has(.cto-sticky-cta) .cto-cta-fixo {
	display: none;
}

/* MENU ABERTO: a barra SOME. O wrapper <header> é sticky com z-index 60 e cria CONTEXTO DE EMPILHAMENTO: os 100000 do overlay são resolvidos dentro dele, e o que compete é o 60 do cabeçalho contra o 60 da barra — empate pela ordem no documento, e a barra vem depois. Modal aberto torna o resto inerte; a barra sair é o certo em qualquer z-index. */
html.has-modal-open .cto-cta-fixo,
body:has(.wp-block-navigation__responsive-container.is-menu-open) .cto-cta-fixo {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.cto-sticky-cta,
	.cto-cta-fixo {
		transition: none;
	}
}

/* 26. Consentimento — o controle do rodapé e a faixa que ele abre.
   O controle existe em toda página publicada (mora nas parts de rodapé), mas não
   há bloco nativo para ele. O tema dá a apresentação; abrir a faixa, desligar as
   tags, persistir a negativa pelo TTL e religar no re-aceite são do site-core.

   ELE CONTINUA SENDO UM `<button>`: o controle executa uma AÇÃO NA PRÓPRIA
   PÁGINA, não navega. `<a>` sem href não é focável nem anunciado, e `<a href="#">`
   inventa um destino que muda a URL e quebra o botão de voltar. O que mudou é só
   a aparência — ele perde borda, fundo, padding e o alvo de 44px e passa a ser
   tratado como os outros links do rodapé. O preço está declarado: em tela pequena
   o alvo deixa de ter os 44px e passa a ter a altura de uma linha de texto.

   A cor sai de `--wp--style--color--link`, a custom property que o núcleo emite
   quando `elements.link.color.text` está declarado no bloco — a mesma que o <a>
   vizinho consome. O `:hover` precisa ser escrito à mão: o estilo de elemento
   `:hover` do theme.json só alcança `a`, e um botão pintado de link nunca o
   receberia. */
.f3base-consentimento-rodape,
.f3base-consentimento-abrir,
.f3base-consentimento-banner,
.f3base-consentimento-banner * {
	box-sizing: border-box;
}

.f3base-consentimento-abrir {
	padding: 0;
	background-color: transparent;
	color: var(--wp--style--color--link, currentColor);
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.f3base-consentimento-abrir:hover,
.f3base-consentimento-abrir:focus-visible {
	color: var(--wp--preset--color--base);
}

/* 26b. Faixa de consentimento — base do viewport, nunca tela cheia.
   ARMADILHA MEDIDA, e ela tinha DUAS causas na mesma regra: a versão anterior era
   `position: fixed; inset: 0`, então cobria o site inteiro; e o `display` de AUTOR
   declarado aqui vencia o `[hidden] { display: none }` da folha do user agent —
   origem decide antes de a especificidade ser consultada —, de modo que o `hidden`
   que o site-core alternava não tinha efeito nenhum e o botão "Fechar" não fechava.

   As duas correções: a faixa mora na BASE do viewport com a altura do conteúdo — o
   visitante continua vendo e usando a página —, e todo `display` declarado sobre
   elemento comandado por `hidden` vem com o par `[hidden]` ao lado, que tem
   especificidade 0,2,0 contra 0,1,0 e vence sem `!important`.

   `--f3base-banner-altura` é escrita pelo site-core quando a faixa abre: o corpo
   ganha exatamente aquela altura de respiro embaixo e a devolve ao fechar. Sem
   isso a faixa fixa tampa o fim do documento, inclusive o rodapé e o próprio
   controle que a abriu. */
:root {
	--f3base-banner-altura: 0px;
}

.f3base-consentimento-banner {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--ctooffice-camada-overlay);
	display: block;
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-dark-strong);
	/* `line-forte` e não `line-on-dark`: a borda separa a faixa da página e é
	   elemento não-textual, que tem piso de 3:1. Medido sobre `navy`,
	   `line-on-dark` dá 2.47:1 e `line-forte` dá 5.63:1. */
	border-block-start: 1px solid var(--wp--preset--color--line-forte);
	box-shadow: var(--wp--preset--shadow--panel);
}

.f3base-consentimento-banner[hidden] {
	display: none;
}

.f3base-consentimento-caixa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	inline-size: min(100%, var(--wp--style--global--wide-size, 60rem));
	margin-inline: auto;
}

.f3base-consentimento-titulo,
.f3base-consentimento-texto,
.f3base-consentimento-estado {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.f3base-consentimento-titulo {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.f3base-consentimento-texto,
.f3base-consentimento-estado {
	color: var(--wp--preset--color--on-dark);
}

.f3base-consentimento-politica {
	color: var(--wp--preset--color--gold-light);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
}

.f3base-consentimento-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-inline-start: auto;
}

.f3base-consentimento-acoes button {
	min-block-size: var(--ctooffice-alvo-minimo);
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--40);
	background-color: transparent;
	color: currentColor;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.f3base-consentimento-aceitar {
	border-color: transparent;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

/* O respiro do corpo é comandado por atributo na raiz, e não por classe no body:
   quem o escreve é o site-core ao abrir a faixa, e a raiz é o elemento que ele
   alcança sem depender de o body já existir. */
[data-f3base-banner="aberto"] body {
	padding-block-end: var(--f3base-banner-altura);
}

/* Aviso de primeira visita (desligado nesta instância; a regra existe para o dia em que for ligado). */
.f3base-consentimento-aviso {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--40);
	inset-inline: var(--wp--preset--spacing--40);
	z-index: var(--ctooffice-camada-overlay);
	inline-size: min(100% - 2 * var(--wp--preset--spacing--40), 34rem);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-dark-strong);
	border-radius: 18px;
}

/* 27. Rodapé: o link de privacidade sem destino (política em rascunho) vira texto, e texto não pode parecer link. */
.cto-footer a:not([href]) {
	text-decoration: none;
	cursor: default;
}

/* 28. Logotipo sobre faixa escura — o bloco Logotipo do site serve UM anexo para TODAS
   as partes, e o desenho pede o lockup escuro sobre `paper` e o MESMO lockup em branco
   sobre `navy`. Não há atributo nativo para variante por contexto, e um segundo anexo
   criaria uma segunda fonte do mesmo arquivo — trocar a marca passaria a exigir duas
   trocas, e esquecer uma delas não dá erro nenhum.

   `brightness(0)` zera o canal de cor PRESERVANDO o alfa, e `invert(1)` leva o que
   sobrou a branco; a suavização das bordas viaja no alfa e sobrevive. O resultado foi
   comparado com o arquivo branco desenhado à parte: RMSE = 0, idêntico pixel a pixel.

   Sem literal de cor: o filtro não nomeia cor nenhuma, e por isso cabe na regra de
   admissão deste arquivo. As duas superfícies escuras que imprimem o logotipo são o
   rodapé e o cabeçalho de campanha. */
.cto-footer .custom-logo,
.cto-header--campanha .custom-logo {
	filter: brightness(0) invert(1);
}