/*
 * Theme Name:  Floripa na Web Child
 * Theme URI:   https://floripanaweb.com.br
 * Description: Tema filho do Astra — identidade Fase 5 base (tokens, fontes, cores, logo).
 * Author:      Cloud Market
 * Template:    astra
 * Version:     1.2.5
 *
 * Fonte da verdade: design/DESIGN.md + design/tokens.css (Prisma). Sem modo
 * escuro (decisão do DESIGN). MOVIMENTO 2: única curva --fw-curva e duração
 * --fw-duracao. Zero chamada a fonts.googleapis.com (fontes locais em fontes/).
 */

/* --- Fontes locais (OFL 1.1; woff2 latin + latin-ext) --------------------- */

@font-face {
	font-family: 'Archivo Condensed';
	src: url('fontes/archivo-condensed-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('fontes/atkinson-next-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('fontes/atkinson-next-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('fontes/atkinson-next-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens (design/tokens.css) ------------------------------------------- */

:root {
	/* 68ch medido com a Atkinson 18px carregada (793,6 px), em px: ch depende da fonte do
	   corpo (CLS ao carregar) e rem encolhe com a raiz que o Astra reduz no celular/tablet
	   (91,2%), o que estreitava a coluna. Faixa, foto, autoria e texto usam esta medida. */
	--medida-texto: 794px;
	--color-fundo: #ffffff;
	--color-superficie: #f2f4f5;
	--color-texto: #14171a;
	--color-texto-secundario: #4a5157;
	--color-faixa: #14171a;
	--color-faixa-texto: #ffffff;
	--color-faixa-texto-secundario: #bcc3c8;
	--color-primary: #f2c230;
	--color-primary-hover: #e0ac12;
	--color-sublinhado: #8a6a00;
	--color-foco-claro: #14171a;
	--color-foco-faixa: #f2c230;
	--color-borda: #d3d8dc;
	--color-borda-forte: #6b7379;
	--spacing-2xs: 4px;
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;
	--spacing-3xl: 64px;
	--spacing-4xl: 96px;
	--rounded-sm: 2px;
	--rounded-md: 6px;
	/* MOVIMENTO 2: um token de curva e de duração (DESIGN.md). */
	--fw-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
	--fw-duracao: 180ms;
}

/* --- Base: texto, títulos, links, foco (C1/C2 já: #page dvh e 68ch) ------- */

body {
	font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
	color: var(--color-texto);
	background: var(--color-fundo);
	font-size: 1.125rem; /* corpo 18 px (DESIGN) */
	line-height: 1.6;
}

.page .entry-content {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-texto);
}

/* Corpo no celular (forja19, A5): o Astra encolhe a raiz para ~91,2% abaixo de 922 px, e 1,125rem virava 16,4 px
   (mesma causa do H1 da Sobre em 03/10). O DESIGN pede 18 px: em px, porque rem acompanha a raiz do Astra. */
@media (max-width: 921px) {
	body,
	.page .entry-content {
		font-size: 18px;
	}
}

/* Títulos em Archivo Condensed (DESIGN: titulo-secao/titulo-bloco). */
h1, h2, h3 {
	font-family: 'Archivo Condensed', 'Arial Narrow', sans-serif;
	font-weight: 800;
	color: var(--color-texto);
	text-wrap: balance;
}

h1 { font-size: 2.25rem; line-height: 1.05; }
h2 { font-size: 1.75rem; line-height: 1.15; }
h3 { font-size: 1.375rem; line-height: 1.2; }
@media (min-width: 769px) {
	h1 { font-size: 3rem; }
}

/* Hierarquia de título (fase 5c, item 2 da Prisma): o arquivo de fonte SÓ tem
   o peso 800; o Astra declarava 600 e 32px no entry-title, e H1 quase igual ao
   H2. Aqui: H1 3rem (desktop) / 2.25rem (celular), H2 1.75rem com 48 px antes
   no desktop, H3 1.375rem — sempre 800, sem fonte nova. */
.ast-article-single .entry-header .entry-title,
.ast-single-post .entry-header .entry-title,
.ast-separate-container .ast-article-single .entry-header .entry-title {
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1.05;
	text-wrap: balance;
}

.entry-content h2 {
	font-size: 1.75rem;
	line-height: 1.15;
	font-weight: 800; /* só existe o peso 800 no arquivo (fase 5c, item 2) */
}

.entry-content h3 {
	font-size: 1.375rem;
	line-height: 1.2;
	font-weight: 800;
}

@media (min-width: 769px) {
	/* Especificidade (0,4,0): vence a base (0,3,0) e o inline do Astra
	   (.ast-separate-container está sempre presente nas páginas). */
	.ast-separate-container .ast-article-single .entry-header .entry-title,
	.ast-separate-container .ast-single-post .entry-header .entry-title {
		font-size: 3rem;
	}
	.entry-content h2 {
		margin-top: var(--spacing-2xl); /* 48 px antes de cada H2 no desktop */
	}
}

/* Vazio no topo (fase 5c, item 3): o padding desktop do article vinha de
   5.34em/6.67em (~96/120 px) hardcoded no main.min.css do Astra — o Astra
   gratuito não expõe essa option no Customizer (registrado no DECISOES).
   32 px em cima no desktop, 24 px no celular; as laterais saem do article e a
   coluna de 68ch centraliza o texto. */
.ast-separate-container .ast-article-single {
	padding: var(--spacing-xl) 0 2em;
}

@media (max-width: 921px) {
	.ast-separate-container .ast-article-single {
		padding: var(--spacing-lg) 0 2em; /* 24 px no celular/tablet */
	}
}

.entry-content p {
	text-wrap: pretty;
}

/* Links em fundo claro: texto em texto, sublinhado 2 px em sublinhado (WCAG
   1.4.1 — não depende de cor; 5,07:1). Hover: sublinhado 3 px em texto. */
.entry-content a,
.ast-container a,
.ast-single-post .entry-content a,
.entry-content[data-ast-blocks-layout] a,
.entry-content a:visited,
.ast-container a:visited {
	color: var(--color-texto);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-sublinhado);
	text-underline-offset: 0.2em;
}

.entry-content a:hover,
.ast-container a:hover,
.ast-single-post .entry-content a:hover {
	text-decoration-color: var(--color-texto);
	text-decoration-thickness: 3px;
}

/* O main.min.css do Astra traz `a:hover,a:focus{color:var(--ast-global-color-1)}`
   — amarelo como TEXTO em hover/foco (fase 5c, item 1, varredura). Nenhum link
   visível das páginas o pega (cor do link declarada com especificidade maior),
   mas a regra fica como rede: hover/foco de QUALQUER link do conteúdo, rodapé
   e menu permanece em texto (nunca amarelo sobre claro). */
.entry-content a:hover,
.entry-content a:focus,
.ast-container a:hover,
.ast-container a:focus,
.site-footer a:hover,
.site-footer a:focus {
	color: var(--color-texto);
}

/* Foco visível por anel (2 px, offset 2 px; >= 3:1 em foco-claro sobre claro). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-foco-claro);
	outline-offset: 2px;
}

/* C2 (rodapé colado) e C1 (68ch) já aplicados; reforçados aqui. */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

#page .site-content {
	flex-grow: 1;
}

/* C1 (Fase 5 correções, defeito 2): título (entry-header), linha de autoria e
   corpo alinhados na MESMA coluna de ~68ch (tablet e desktop); celular fica
   largura cheia com a margem do Astra. O bloco de oferta fica dentro do
   entry-content, na mesma largura do texto. */
@media (min-width: 769px) {
	.entry-content[data-ast-blocks-layout],
	.ast-separate-container .ast-page-builder-template .entry-header,
	.ast-separate-container .ast-article-single .entry-header {
		max-width: var(--medida-texto);
		margin-inline: auto;
	}
}

/* --- Menu do cabeçalho (fase 5c, item 1) -----------------------------------
   O Astra usa var(--ast-global-color-1)=#E0AC12 como COR DE TEXTO do item
   ativo e do hover sobre branco (2,08:1) — amarelo nunca é texto sobre claro
   (DESIGN). Ativo: texto #14171A + sublinhado de 3px em #14171A (indicador
   não textual com >= 3:1). Celular (menu vertical): ativo em texto + 700.
   Hover: #14171A em vez de amarelo. */
.ast-builder-menu-1 .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-1 .inline-on-mobile .ast-menu-toggle:hover,
.ast-builder-menu-1 .ast-menu-toggle:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .ast-menu-toggle {
	color: var(--color-texto);
	background: transparent;
}

.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-1 .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-1 .current-menu-ancestor > .menu-link {
	color: var(--color-texto);
	box-shadow: inset 0 -3px 0 var(--color-texto);
	font-weight: 700;
}

.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .ast-menu-toggle {
	color: var(--color-texto);
	background: transparent;
	font-weight: 700;
}

.ast-builder-menu-mobile .main-navigation .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .inline-on-mobile .ast-menu-toggle:hover,
.ast-builder-menu-mobile .main-navigation .ast-menu-toggle:hover {
	color: var(--color-texto);
	background: transparent;
}

/* --- Logo no cabeçalho (Fase 5, item 3) ------------------------------------ */

.fw-logo {
	display: inline-block;
	line-height: 0;
	/* Área de proteção (brand-spec: x = largura de um bloco do símbolo). */
	padding: 10px 12px;
}

.fw-logo svg {
	height: 32px;
	width: 177.33px; /* proporção do viewBox 221.66x40 — largura explícita evita CLS e colapso no mobile */
	display: block;
}

/* --- Skip-link (forja19, A4) ------------------------------------------------
   O texto vem do tema (inc/idioma.php). Visual no foco, no sistema: fundo texto, letra branca (17,99:1), canto md,
   anel de 3 px em primary (10,74:1 contra o quase-preto), SEM a sombra escura dura do Astra. Aparece sobre o logo,
   no canto superior esquerdo, e não cobre a faixa. Fora de foco continua 1x1 (padrão do leitor de tela). */
body .skip-link.screen-reader-text:focus,
body .skip-link.screen-reader-text:focus-visible {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--spacing-sm) var(--spacing-md);
	top: var(--spacing-xs);
	left: var(--spacing-xs);
	background: var(--color-texto);
	color: var(--color-faixa-texto);
	font-size: max(16px, 1rem);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	border-radius: var(--rounded-md);
	box-shadow: none;
	outline: 3px solid var(--color-primary);
	outline-offset: 0;
}

/* --- Seletor de idioma (forja19, A1) -----------------------------------------
   Desktop: último item do menu, à direita. Celular: ao lado do logo, no cabeçalho, visível sem abrir o menu (o
   último item de um menu que abre numa lista longa ou rola pode ficar fora da tela). Nome por extenso, texto vivo,
   sem bandeira, alvo >= 44 px, largura mínima reservada (sem CLS), foco no padrão do sistema. */
.fw-idioma {
	display: inline-flex;
	align-items: center;
}

.ast-container .fw-idioma .fw-idioma__link,
.fw-idioma .fw-idioma__link,
.fw-idioma .fw-idioma__link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	min-width: 96px;
	padding: 0 var(--spacing-md);
	font-size: max(16px, 1rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-texto);
	text-decoration: none;
	border: 1.5px solid var(--color-borda-forte);
	border-radius: var(--rounded-md);
	background: transparent;
	white-space: nowrap;
}

.ast-container .fw-idioma .fw-idioma__link:hover,
.ast-container .fw-idioma .fw-idioma__link:focus-visible,
.fw-idioma .fw-idioma__link:hover,
.fw-idioma .fw-idioma__link:focus-visible {
	color: var(--color-texto);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-texto);
	text-underline-offset: 0.2em;
}

.main-header-menu > .fw-idioma-item {
	display: flex;
	align-items: center;
	margin-left: var(--spacing-md);
}

/* Largura reservada (sem CLS): "Português" (110 px com a Atkinson 700 carregada) é o rótulo mais largo e a troca da
   fonte de reserva por ela crescia o menu 5 px (medido: CLS 0,0002 nas páginas ES). Os dois rótulos ocupam 112 px. */
.ast-container .fw-idioma--menu .fw-idioma__link,
.fw-idioma--menu .fw-idioma__link {
	min-width: 112px;
}

/* Cópia do celular (forja20): dentro do cabeçalho do celular, encostada à direita da coluna do logo (ao lado do
   botão do menu). NENHUMA regra daqui depende de media query de largura: quem decide qual cabeçalho aparece é o
   Astra (breakpoint em `astra_header_break_point`, ver functions.php); as regras ficam presas ao contêiner do
   cabeçalho do celular (#ast-mobile-header) e do desktop (#ast-desktop-header). Antes, a cópia do celular some
   em `min-width: 922px` e o resto vivia em `max-width: 921px`, e na largura de 922 px o Astra ainda mostrava o
   hambúrguer sem o seletor (lacuna de 1 px entre os dois breakpoints). */
#ast-desktop-header .fw-idioma--barra {
	display: none;
}

/* Qual cabeçalho aparece (forja20, N2). O Astra esconde o cabeçalho do desktop em `max-width: 921.99px` e o do
   celular em `min-width: 922px`, valores fixos da quebra de tablet; já o <body> ganha a classe
   `ast-header-break-point` pelo JS do Astra com o valor de `astra_header_break_point` (functions.php, 1199).
   Entre 922 px e esse valor o menu horizontal com o seletor não cabe numa linha, então o hambúrguer continua: a
   classe esconde o cabeçalho do desktop (o do celular já aparece por `.ast-header-break-point #ast-mobile-header`).
   A classe é a regra principal (os dois lados trocam no mesmo pixel que o JS do Astra decidir). Mas ela só entra
   quando o JS inline do Astra roda, logo depois do <body>; sem JS, ou antes dele, o primeiro desenho entre 922 e
   1199 px era o do desktop (cabeçalho de 115 a 141 px e, em 922 px, nenhum dos dois). Por isso a mesma troca vem
   também por media query, com o MESMO limite do script do Astra (`max-width: 1199.99px`, ver `matchMedia` no <body>);
   se o filtro de `functions.php` mudar, mude os dois (o test_forja20.py confere que são iguais). */
.ast-header-break-point #ast-desktop-header {
	display: none;
}

@media (min-width: 922px) and (max-width: 1199.99px) {
	#masthead #ast-desktop-header {
		display: none;
	}
	#masthead #ast-mobile-header {
		display: block;
	}
}

.fw-idioma--barra {
	margin-left: auto;
}

#ast-mobile-header .site-branding {
	display: flex;
	align-items: center;
	width: 100%;
}

/* Cabeçalho do celular: logo no mesmo x do texto (16 px, como o H1: some a folga de 12 px da caixa do logo e o recuo
   de 20 px da barra vira 16; resolve o D4 da Prisma), 12 px entre o logo e o seletor, seletor encostado no botão do
   menu (8 px). Fecha a conta a 375 px na ES: 177 + 12 + 94,5 + 8 + 47 = 338,5 de 343 px.
   O recuo de 20 px vem de `.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar`
   (1,3,0): o seletor abaixo tem o id do cabeçalho a mais para vencer. */
.ast-header-break-point #masthead #ast-mobile-header .ast-primary-header-bar {
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

#ast-mobile-header .ast-builder-grid-row {
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--spacing-xs);
}

/* A coluna do logo ocupa a sobra (o elemento que embrulha a identidade do site é do tamanho do conteúdo), para a
   `margin-left: auto` do seletor empurrá-lo até o botão do menu, em vez de grudá-lo no logo (N3 da Prisma). */
#ast-mobile-header .site-header-primary-section-left > .ast-builder-layout-element {
	flex: 1 1 auto;
	min-width: 0;
}

#ast-mobile-header .fw-logo {
	padding-left: 0;
	padding-right: var(--spacing-sm);
}

#ast-mobile-header .fw-idioma--barra .fw-idioma__link {
	min-width: 0;
	padding-inline: var(--spacing-xs);
}

/* Abaixo de 375 px a palavra não cabe ao lado do logo e do botão (ES precisa de 359 px, PT de 343 px): o texto visível
   vira a sigla, "ES" ou "PT". O nome por extenso continua no `aria-label` do link e no próprio texto do `<a>`
   ("Español"/"Português"), escondido só da vista; "ES" está contido em "Español", então o rótulo visível não
   contradiz o nome acessível (WCAG 2.5.3). Só texto vivo e CSS: sem JavaScript. */
@media (max-width: 374px) {
	#ast-mobile-header .fw-idioma--barra .fw-idioma__link {
		font-size: 0;
		min-width: 44px;
		padding-inline: var(--spacing-xs);
	}
	#ast-mobile-header .fw-idioma--barra .fw-idioma__link::before {
		content: attr(data-sigla);
		font-size: max(16px, 1rem);
		line-height: 1.25;
	}
}

/* --- Bloco de oferta (DESIGN.md: oferta) ----------------------------------- */

.fw-oferta {
	background: var(--color-superficie);
	border: 1.5px solid var(--color-borda-forte);
	border-radius: var(--rounded-md);
	padding: var(--spacing-lg);
	font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
	color: var(--color-texto);
}

.fw-oferta__selo {
	font-size: max(16px, 1rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-texto);
	margin: 0 0 var(--spacing-sm);
}

.fw-oferta__aviso {
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-texto-secundario);
	margin: 0 0 var(--spacing-sm);
}

.fw-oferta__titulo {
	font-family: 'Archivo Condensed', 'Arial Narrow', sans-serif;
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--color-texto);
	margin: 0 0 var(--spacing-sm);
}

.fw-oferta__criterio {
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-texto-secundario);
	margin: 0 0 var(--spacing-sm);
}

/* Botão de ação: placa amarela com borda quase-preta (DESIGN: botao-acao).
   Sem sublinhado; min 48 px de altura. Desktop largura automática (>= 16rem);
   celular largura toda. */
.fw-oferta__botao {
	display: inline-block;
	width: 100%;
	text-align: center;
	min-height: 48px;
	padding: var(--spacing-sm);
	font-size: max(16px, 1rem);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	color: var(--color-texto);
	background: var(--color-primary);
	border: 2px solid var(--color-texto);
	border-radius: var(--rounded-md);
	position: relative;
	overflow: hidden;
	transition: opacity var(--fw-duracao) var(--fw-curva);
}

/* Fase 5 correções (defeito 1): a regra de link `.entry-content a` tem
   especificidade maior e sublinhava o botão; essas regras fortes vencem e
   garantem SEM sublinhado (nem no hover nem no :active). */
.entry-content .fw-oferta a.fw-oferta__botao,
.ast-container .fw-oferta a.fw-oferta__botao {
	text-decoration: none;
}

.entry-content .fw-oferta a.fw-oferta__botao:hover,
.ast-container .fw-oferta a.fw-oferta__botao:hover {
	text-decoration: none;
	/* não engrossa para 3px no hover (o underline fica none, então a
	   espessura nem chega a aplicar) */
}

.entry-content .fw-oferta a.fw-oferta__botao:active,
.ast-container .fw-oferta a.fw-oferta__botao:active {
	text-decoration: none;
}

.fw-oferta__botao::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-primary-hover);
	opacity: 0;
	transition: opacity var(--fw-duracao) var(--fw-curva);
	pointer-events: none;
}

.fw-oferta__botao:hover::before { opacity: 1; }
.fw-oferta__botao:active { transform: translateY(1px); }

.fw-oferta__botao > * { position: relative; }
.fw-oferta__botao:focus-visible,
.fw-oferta a:focus-visible {
	outline: 3px solid var(--color-foco-claro);
	outline-offset: 2px;
}

@media (min-width: 769px) {
	.fw-oferta__botao {
		width: auto;
		min-width: 16rem;
	}
}

/* --- Banner de consentimento (DESIGN: banner-consentimento) ---------------- */

/* C3 (Fase 5 correções) + C3-res (revisão Atalaia): enquanto o banner está
   aberto (classe no <html> posta pelo consentimento.js), a página inteira
   reserva a altura real do banner via --fw-consent-altura (medida no mostrar e
   remedida em resize/rotação/fontes.ready pelo JS; o espaço fica no FIM do
   body — rodapé e "Preferências de cookies" também ficam acima do banner, sem
   layout shift no scroll). */
.fw-consent-aberto body {
	padding-bottom: var(--fw-consent-altura, 0px);
}

.fw-consent {
	background: var(--color-fundo);
	border-top: 2px solid var(--color-texto);
	border-radius: var(--rounded-md);
	padding: var(--spacing-md);
	color: var(--color-texto);
	box-shadow: none;
	animation: fw-consent-in var(--fw-duracao) var(--fw-curva);
}

@keyframes fw-consent-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fw-consent__texto {
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-texto);
	margin: 0 0 var(--spacing-md);
}

.fw-consent__acoes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-sm);
}

/* Aceitar e Recusar: MESMO componente (botao-neutro) — mesma cor, borda,
   tamanho e peso. Nenhum dos dois é amarelo (amarelo é ação de guia). */
.fw-consent__botao {
	min-height: 48px;
	padding: var(--spacing-sm);
	font-size: max(16px, 1rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: var(--color-texto);
	background: var(--color-fundo);
	border: 2px solid var(--color-texto);
	border-radius: var(--rounded-md);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: opacity var(--fw-duracao) var(--fw-curva);
}

.fw-consent__botao::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-superficie);
	opacity: 0;
	transition: opacity var(--fw-duracao) var(--fw-curva);
	pointer-events: none;
}

.fw-consent__botao:hover::before { opacity: 1; }
.fw-consent__botao:active { transform: translateY(1px); }
.fw-consent__botao > * { position: relative; }
.fw-consent__botao:focus-visible {
	outline: 3px solid var(--color-foco-claro);
	outline-offset: 2px;
}

.fw-consent__privacidade,
.fw-consent__abrir {
	font-size: max(16px, 1rem);
	color: var(--color-texto);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-sublinhado);
	text-underline-offset: 0.2em;
	margin-top: var(--spacing-sm);
}

@media (min-width: 769px) {
	.fw-consent {
		margin: 0;
		max-width: none;
	}
	.fw-consent__acoes {
		grid-template-columns: repeat(2, minmax(10rem, auto));
		justify-content: start;
	}
}

/* --- Linha de autoria (DESIGN: autoria) ------------------------------------ */

.fw-autoria {
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-texto-secundario);
	margin: 0 0 var(--spacing-md);
}

/* --- Rodapé (DESIGN: rodape) ------------------------------------------------ */

.site-below-footer-wrap[data-section="section-below-footer-builder"] {
	background: var(--color-superficie);
	padding-top: var(--spacing-2xl);
	padding-bottom: var(--spacing-2xl);
}

.site-below-footer-wrap .ast-footer-copyright {
	font-size: max(16px, 1rem);
	color: var(--color-texto);
}

/* Quebra de linha no lugar da barra vertical (fase 5c, item 6): cada bloco do
   copyright é display:block — Copyright / Sobre (PT) / Cloud Market. */
.site-below-footer-wrap .ast-footer-copyright .fw-rodape-linha2,
.site-below-footer-wrap .ast-footer-copyright .fw-rodape-cloud-market {
	display: block;
	margin-top: var(--spacing-xs);
}

.site-below-footer-wrap .ast-footer-copyright a {
	color: var(--color-texto);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-texto);
	text-underline-offset: 0.2em;
}

.site-below-footer-wrap .ast-footer-copyright .fw-rodape-cloud-market {
	color: var(--color-texto-secundario);
}

/* --- Fase 6: faixa do guia (assinatura) ----------------------------------- */

.fw-guia-faixa {
	background: var(--color-faixa);
	color: var(--color-faixa-texto);
	padding-block: var(--spacing-xl);
}

.fw-guia-faixa :focus-visible {
	outline-color: var(--color-foco-faixa);
}

.fw-guia-faixa__grade {
	box-sizing: border-box;
	max-width: calc(var(--medida-texto) + 2 * var(--spacing-md));
	margin-inline: auto;
	padding-inline: var(--spacing-md);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--spacing-lg);
	align-items: start;
}

.fw-guia-faixa__regiao {
	font-family: 'Archivo Condensed', 'Arial Narrow', sans-serif;
	font-weight: 800;
	font-size: max(16px, 1rem);
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-sm);
}

.fw-guia-faixa__titulo {
	font-family: 'Archivo Condensed', 'Arial Narrow', sans-serif;
	font-weight: 800;
	font-size: 48px; /* display-guia; em px: rem encolhe com a raiz do Astra no celular */
	line-height: 1.05;
	margin: 0;
	color: var(--color-faixa-texto);
	text-wrap: balance;
}

.fw-guia-faixa__meta {
	margin: var(--spacing-md) 0 0;
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-faixa-texto-secundario);
}

.fw-guia-faixa__mapa {
	margin: 0;
	text-align: center;
}

.fw-guia-faixa__mapa img {
	display: block;
	width: 43px;
	height: 96px;
	margin-inline: auto;
}

.fw-guia-faixa__mapa figcaption {
	margin-top: var(--spacing-xs);
	font-size: max(16px, 1rem);
	line-height: 1.25;
	color: var(--color-faixa-texto-secundario);
	max-width: 7rem;
}

/* Herói: foto com crédito em figcaption; largura plena, altura pela
   proporção (width/height no markup — sem CLS), sem lazy. */
/* Espaço entre a faixa e o primeiro bloco (foto ou, sem foto, o texto): UM só valor
   da escala, o padding-top do article (32 px desktop / 24 px celular, ver acima).
   Antes somava margem do #primary do Astra (72 px) + padding do article + margem
   do herói = 136 px (desktop) e 114 px (celular). Fase 7, ajuste A1. */
.ast-separate-container #primary.fw-guia-primary {
	margin-top: 0;
	padding-top: 0;
}

.fw-guia-heroi {
	margin: 0;
}

/* Coluna única das páginas de guia (protótipo amostra-guia.html: `.coluna`): faixa, foto,
   autoria e texto começam no mesmo x, em qualquer largura. O container do Astra soma
   8,9 px (celular) ou 20 px (tablet) de recuo, e a foto/autoria ficavam fora da coluna
   no desktop; aqui o recuo do container sai (só nestas páginas) e o article vira a
   coluna: medida do texto + gutter de 16 px de cada lado, igual à grade da faixa. */
.fw-guia-pagina #content > .ast-container {
	padding-inline: 0;
}

.ast-separate-container .ast-article-single.fw-guia {
	box-sizing: border-box;
	max-width: calc(var(--medida-texto) + 2 * var(--spacing-md));
	margin-inline: auto;
	padding-inline: var(--spacing-md);
}

/* Sem foto (aluguel), a autoria abre o artigo: o espaço já vem do padding. */
.fw-guia > .fw-guia-autoria:first-child {
	margin-top: 0;
}

.fw-guia-heroi img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rounded-md);
	background: var(--color-superficie);
}

.fw-guia-heroi figcaption {
	margin-top: var(--spacing-xs);
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-texto-secundario);
}

.fw-guia-heroi figcaption a,
.fw-guia-heroi figcaption a:visited {
	color: var(--color-texto-secundario);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-sublinhado);
}

.fw-guia-autoria {
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-texto-secundario);
	margin: var(--spacing-lg) 0 var(--spacing-xl);
}

/* Crédito do OpenStreetMap (fim de toda página com mini-mapa). */
.fw-guia-osm {
	font-size: max(16px, 1rem);
	line-height: 1.5;
	color: var(--color-texto-secundario);
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-borda);
}

.fw-guia-osm a {
	color: var(--color-texto-secundario);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-sublinhado);
	text-underline-offset: 0.2em;
}

/* --- Fase 6: trechos com selo (vivência/conferido/turismo) ---------------- */
/* Três formas, não três cores (marcacao-vivencia-conferido.md): cheio com
   ícone cheio, cheio com ícone de visto, só contorno com lupa e fio pontilhado.
   O ícone é decorativo (::before vazio com background-image): o texto do selo
   continua parágrafo vivo e é ele que o leitor de tela lê.
   O selo é parágrafo de verdade (lido pelo leitor de tela). */

.fw-trecho {
	margin-block: var(--spacing-lg);
	padding-top: var(--spacing-sm);
	border-top: 2px solid var(--color-texto);
}

/* Ritmo do selo (forja19, A2): fio→selo 12 px e selo→texto 12 px. O Astra zera o padding-top de todo
   `.entry-content > .wp-block-group` (0,2,0) e o `.fw-trecho` sozinho (0,1,0) perdia: fio→selo dava 0. Este seletor
   (0,3,0) vence. O primeiro bloco depois do selo perde a margem de cima (era 24 px somados aos 12 px do selo = 36). */
.entry-content .fw-trecho.wp-block-group {
	padding-top: var(--spacing-sm);
}

.entry-content .fw-trecho > .fw-selo + * {
	margin-top: 0;
}

/* Fios empilhados (forja19, A3): trecho que abre logo depois do título perde o fio de cima e fica só com o selo;
   o fio fica entre dois trechos seguidos sob o mesmo título. Título→selo = 12 px (token sm). */
.entry-content h2 + .fw-trecho.wp-block-group {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.entry-content h2:has(+ .fw-trecho) {
	margin-bottom: var(--spacing-sm);
}

.fw-trecho--conferido {
	border-top-color: var(--color-borda-forte);
}

.fw-trecho--turismo {
	border-top: 2px dotted var(--color-borda-forte);
}

.fw-trecho > .fw-selo {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	margin: 0 0 var(--spacing-sm);
	padding: var(--spacing-2xs) var(--spacing-xs);
	background: var(--color-superficie);
	border-radius: var(--rounded-sm);
	font-weight: 700;
	font-size: max(16px, 1rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--color-texto);
}

.fw-trecho > .fw-selo::before {
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	background: url('selos/selo-vivencia.svg') center/16px 16px no-repeat;
}

.fw-trecho--conferido > .fw-selo::before {
	background-image: url('selos/selo-conferido.svg');
}

.fw-trecho--turismo > .fw-selo {
	background: var(--color-fundo);
	box-shadow: inset 0 0 0 1.5px var(--color-borda-forte);
}

.fw-trecho--turismo > .fw-selo::before {
	background-image: url('selos/selo-turismo.svg');
}

@media (max-width: 768px) {
	.fw-guia-faixa {
		padding-block: var(--spacing-lg);
	}
	.fw-guia-faixa__titulo {
		font-size: 36px;
	}
	.fw-guia-faixa__mapa img {
		width: 32px;
		height: 72px;
	}
	.fw-guia-faixa__mapa figcaption {
		max-width: 5.5rem;
	}

	/* Data órfã (forja19, A7): "Atualizado em 4 de outubro de / 2026" quebrava porque a meta dividia a largura com
	   o mapa. A coluna de texto vira transparente para a grade (display: contents): região e título ficam ao lado
	   do mapa e a meta ocupa a largura toda embaixo. A primeira tela não cresce: o que sai da linha órfã paga a
	   linha da meta. */
	.fw-guia-faixa__grade {
		row-gap: 0;
	}
	.fw-guia-faixa__texto {
		display: contents;
	}
	.fw-guia-faixa__regiao {
		grid-column: 1;
		grid-row: 1;
	}
	.fw-guia-faixa__titulo {
		grid-column: 1;
		grid-row: 2;
	}
	.fw-guia-faixa__mapa {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
	.fw-guia-faixa__meta {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* MOVIMENTO 2: prefers-reduced-motion zera duração e deslocamento. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.fw-oferta__botao:active,
	.fw-consent__botao:active {
		transform: none;
	}
}