/**
 * Estilos específicos de página — Fenachamp 2027
 *
 * Autoria: [Fosfo virtual] (https://fosfo.com.br)
 *
 * Diferença para componentes.css: aqui vive layout que só uma página
 * usa. Se um padrão daqui se repetir numa segunda página, ele é
 * PROMOVIDO para componentes.css — não duplicado. Mesmas regras:
 * nada sem origem, só token, mobile first.
 */


/* ------------------------------------------------------------------
 * GARIBALDI — seção "O que te espera"
 * Origem: post 163, container "SEÇÃO APOIO"
 * ------------------------------------------------------------------ */

.garibaldi-sobre {
	position: relative;
	overflow: hidden;
	background-color: var(--cor-fundo-creme);
	/* D24: era --esp-40 fixo (40px) — não batia com o ritmo do hero
	 * acima (5%/10%), por isso "não equalizado" e "colado" no fim.
	 * Última seção da página, termina em CTA: leva o dobro embaixo. */
	padding-top: var(--ritmo-secao);
	padding-bottom: var(--ritmo-secao-dobro);
}

.garibaldi-sobre__conteudo {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-largura);   /* D28: era --container-largura (1440) — esparramava borda a borda */
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* título já vem de .titulo-prata (componentes.css) — aqui só a margem */
.garibaldi-sobre__titulo {
	margin: var(--esp-16) 0 var(--esp-20);
}

.garibaldi-sobre__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-40);
	align-items: start;
}

/* D74: tamanho e display vêm do componente .estrelas; aqui fica só a
 * margem própria desta seção (sem respiro em cima, diferente do padrão). */
.garibaldi-sobre__estrelas { margin-top: 0; }

.garibaldi-sobre__paragrafo {
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
	margin: 0;
	max-width: 56ch;
}

.garibaldi-sobre__galeria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--esp-16);
}

/* a 3ª foto (retrato) ocupa as duas linhas — igual à proporção
 * original: 2 paisagem + 1 retrato alto + 2 paisagem */
.garibaldi-sobre__foto:nth-child(3) {
	grid-row: span 2;
}

.garibaldi-sobre__foto {
	margin: 0;
	border-radius: var(--raio-6);
	overflow: hidden;
	background-color: var(--cor-fundo-nude);
}

.garibaldi-sobre__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transition: transform .5s ease;
}

.garibaldi-sobre__foto:nth-child(3) img {
	aspect-ratio: 2 / 3;
}

.garibaldi-sobre__foto:hover img {
	transform: scale(1.05);
}

/* Coluna direita: galeria + CTA, empilhados */
.garibaldi-sobre__lado {
	display: flex;
	flex-direction: column;
	gap: var(--esp-40);   /* D24: era esp-20, apertado entre a galeria e o CTA final */
}

.garibaldi-sobre__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-16);
}

/* D20: fonte reduzida a pedido do Diego — era 16px */
.garibaldi-sobre__cta-texto {
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 14px;
	color: var(--cor-neutra-cacau);
}

@media (min-width: 768px) {
	.garibaldi-sobre__galeria { gap: var(--esp-20); }
}

@media (min-width: 1025px) {
	.garibaldi-sobre__grid {
		grid-template-columns: 1fr 1fr;
		gap: 8%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.garibaldi-sobre__foto img { transition: none; }
	.garibaldi-sobre__foto:hover img { transform: none; }
}


/* ====================================================================
 * INÍCIO (post 165) — página com mais seções construída até agora.
 * ==================================================================== */

/* ------------------------------------------------------------------
 * HERO — widget "slides". Medido: as DUAS telas têm o mesmo texto,
 * só o fundo muda — por isso é um crossfade de imagem, não um
 * carrossel de conteúdo (ver main.js). Altura 80vh/88vh mobile,
 * conteúdo max-width 55%/88% tablet/100% mobile, padding-left
 * 12%/6% tablet/8% mobile — tudo medido no widget.
 * ------------------------------------------------------------------ */

.inicio-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	/* D69: era `row` (padrão) — conteúdo e pontos dividiam a linha ao
	 * meio, cada um com metade da tela. Era essa a causa real de o
	 * texto ficar espremido e desalinhado do logo, não só o padding em
	 * porcentagem. Empilhados, cada um ocupa a largura toda e o
	 * container de 1440px passa a valer. */
	flex-direction: column;
	justify-content: center;
	min-height: 88vh;
	background-color: var(--cor-fundo-slides);   /* fallback medido enquanto a imagem carrega */
}

.inicio-hero__fundo {
	position: absolute;
	inset: 0;
	background-image: var(--fundo-desktop);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;   /* transition_speed medido: 1200ms */
}

/* D107 — a versão em pé, quando o cliente mandou uma. Sem ela, o
 * fallback do var() devolve a de computador e nada muda. */
@media (max-width: 767px) {
	.inicio-hero__fundo { background-image: var(--fundo-mobile, var(--fundo-desktop)); }
}

.inicio-hero__fundo--ativo { opacity: 1; }

/* Banner com link vira <a> (D107). Só o que está à mostra recebe
 * clique.
 *
 * A regra vale pra TODA camada, não só pras que viraram <a>: os fundos
 * ficam empilhados no mesmo lugar, e o de baixo na ordem do HTML é o
 * de CIMA na pilha. Medido: com a regra presa ao `a`, um banner sem
 * link (que continua <div>) ficava por cima e engolia o clique do
 * banner com link que estava à mostra. */
.inicio-hero__fundo { pointer-events: none; }
.inicio-hero__fundo--ativo { pointer-events: auto; }

/* D69 — o hero da Início nunca respeitou o teto de 1440px do site: ele
 * usava porcentagem do VIEWPORT inteiro (55% de largura + 12% de
 * padding), então em tela larga o texto começava num ponto diferente do
 * logo do cabeçalho e a coluna ficava estreita demais — "A maior festa
 * do" quebrava por falta de espaço. É o MESMO bug do D31, que já tinha
 * sido corrigido no .pagina-hero da Garibaldi e não foi replicado aqui
 * (exatamente o erro E6: aplicar correção estrutural sem auditar todos
 * os lugares que precisam dela).
 *
 * Agora __conteudo é só o container — mesma receita do cabeçalho e do
 * rodapé (max-width + margin auto + padding 5%) — e a coluna de texto
 * de 50% é a __coluna, por dentro. */
.inicio-hero__conteudo,
.inicio-hero__pontos {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.inicio-hero__coluna { max-width: 100%; }

.inicio-hero__titulo {
	margin: 0 0 var(--esp-16);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 36px;
	line-height: 1.15;
	color: var(--cor-fundo-creme);
}

.inicio-hero__desc {
	margin: 0 0 var(--esp-24);
	font-family: var(--fonte-texto-alt);
	font-weight: var(--peso-medio);
	font-size: 16px;
	color: var(--cor-fundo-creme);
}

/* botão do hero: mesma base do .btn, com a borda "cheia" (10px,
 * mesma cor do fundo) medida no widget — visualmente só engorda o
 * botão, já que a cor da borda é igual à do fundo */
.inicio-hero__btn {
	border-width: 10px;
	letter-spacing: .1em;
}

.inicio-hero__btn:hover,
.inicio-hero__btn:focus-visible {
	background-color: var(--cor-dourado);       /* button_hover_background_color medido */
	border-color: var(--cor-dourado);
	color: var(--cor-fundo-creme);
}

/* D123 — os pontos assentam no pé do banner.
 *
 * Antes eles vinham logo abaixo do botão, e o `justify-content:center`
 * do hero centralizava os dois juntos. Sem o bloco de texto, os pontos
 * ficaram sozinhos e o mesmo `center` os deixou boiando no meio da
 * imagem, com 268px de banner vazio embaixo — medido.
 *
 * `margin-top:auto` empurra pro fim da coluna flex, que é onde a barra
 * de um slider é procurada.
 *
 * ⚠️ O `margin-top` tem que ser o ÚNICO da regra: eu tinha deixado o
 * `var(--esp-24)` logo abaixo, e ele anulava o `auto` calado. */
.inicio-hero__pontos {
	display: flex;
	gap: var(--esp-8);
	margin-top: auto;
	padding-bottom: var(--esp-24);
}

.inicio-hero__ponto {
	width: 17px;
	height: 17px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--cor-fundo-creme-suave) 34%, transparent);
	cursor: pointer;
	transition: background-color .3s ease;
}

.inicio-hero__ponto[aria-current="true"] {
	background-color: var(--cor-vinho-principal);
}

@media (min-width: 768px) {
	.inicio-hero { min-height: 80vh; }
	.inicio-hero__coluna { max-width: 80%; }
	.inicio-hero__titulo { font-size: 60px; }
}

@media (min-width: 1025px) {
	/* 50% da largura do container, pedido do Diego. Como o container
	 * já é o de 1440px, a coluna acompanha o logo em qualquer tela. */
	.inicio-hero__coluna { max-width: 50%; }
	.inicio-hero__titulo { font-size: 72px; }
	.inicio-hero__desc { font-size: 22px; }
	.inicio-hero__btn { letter-spacing: .03em; }
}


/* ------------------------------------------------------------------
 * SOBRE — "A Fenachamp é tradição viva"
 * Origem: containers logo após o hero. Título usa a cor MEDIDA
 * (#9D3D49, vinho-principal) — não a --cor-vinho-titulo-hero do D23,
 * que foi decisão ao vivo do Diego só pro H1 da Garibaldi (ver nota
 * em componentes.css). Aqui o valor extraído é uniforme com as
 * outras 30+ ocorrências do site (D23), sem override.
 * ------------------------------------------------------------------ */

.titulo-prata--medido { color: var(--cor-vinho-principal); }

/* D40: título Prata sobre fundo escuro (Confira nossa programação) —
 * base creme, igual ao resto do texto daquela seção; a palavra de
 * destaque continua dourada (.destaque-titulo), igual em toda página. */
.titulo-prata--claro { color: var(--cor-fundo-creme); }

.inicio-sobre {
	position: relative;
	z-index: 2;                 /* acima da faixa de ondas (z 1) — D53 */
	/* sem isso a letra "A" (700px, top negativo) vazava pra cima,
	 * pintando por cima do hero — mesmo problema que D33 já tinha
	 * resolvido nas outras seções com letra (D49) */
	overflow: hidden;
	/* D53: fundo sólido removido — a faixa de ondas (atrás, no
	 * wrapper .inicio-transicao) é quem preenche o fundo aqui agora;
	 * sem cor sólida por cima dela, ela aparece atrás da foto, como
	 * o Diego pediu. Onde a faixa não cobre, o creme do body (mesmo
	 * tom) segue aparecendo — visualmente nada muda ali. */
	padding-top: var(--ritmo-secao);
	padding-bottom: var(--ritmo-secao);
}

.inicio-sobre__conteudo {
	position: relative;
	z-index: 1;
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* Origem: container "Sobre" > "Conteúdo" (flex_direction row, gap 36px
 * medido, coluna "Imagem" 42.821% medida, coluna "Text" com
 * flex_direction column no tablet). position:relative pra letra "A"
 * se ancorar no grid inteiro, não numa coluna só (D49). */
.inicio-sobre__grid {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* D49: a letra "A" NÃO fica presa/centralizada dentro da foto (isso
 * era D47) — ela extravasa por cima e pelo lado, igual à referência
 * do site validado que o Diego mandou, com o mesmo parallax de scroll
 * das outras letras da página (regra genérica em main.js, nada de
 * especial aqui). Posição por olho, ajustada aos dois pontos medidos:
 * começa acima da foto, avança pra dentro da coluna de texto. */
.inicio-sobre__letra {
	top: -48px;
	left: 34%;
	right: auto;
}

@media (max-width: 1024px) {
	.inicio-sobre__letra { top: -24px; left: auto; right: 6%; }
}

/* D47: uma foto só (não mais galeria) — o Diego corrigiu ao vivo
 * depois da 1ª correção ter posto o widget "gallery" inteiro aqui;
 * a galeria real fica na seção própria .inicio-galeria, mais abaixo,
 * onde ela vive de verdade no _elementor_data.
 * D49: proporção ~3:4 fixa (medida na referência que o Diego mandou),
 * não mais esticada pra bater com a altura do texto ao lado. */
.inicio-sobre__imagem-col {
	position: relative;
	z-index: 1;
	margin: 0;
	aspect-ratio: 3 / 4;
	padding: 12px;   /* medido no DevTools do validado (widget "Imagem") */
	background-color: var(--cor-fundo-creme);
	border-radius: var(--raio-4);
	border: 1px solid var(--cor-fundo-pessego);   /* __globals__ border_color medido: 941a93d */
	box-sizing: border-box;
}

.inicio-sobre__foto-unica {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--raio-4);
	object-fit: cover;
}

.inicio-sobre__texto {
	position: relative;
	z-index: 2;
	/* D49: sem isso, o flex-column (justify-content:center no desktop)
	 * herdava align-items:stretch e esticava o botão pra largura
	 * cheia da coluna — ele precisa ficar do tamanho do conteúdo. */
	align-items: flex-start;
	max-width: 640px;
}

.inicio-sobre__titulo { margin: 0 0 var(--esp-8); }

.inicio-sobre__paragrafo {
	margin: 0 0 var(--esp-16);
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

.inicio-sobre__paragrafo:last-of-type { margin-bottom: var(--esp-24); }

@media (min-width: 1025px) {
	.inicio-sobre__grid { flex-direction: row; align-items: center; }
	/* align-self AUTO (não stretch): stretch força uma altura que
	 * vence o aspect-ratio 3/4 — precisa ficar livre pra proporção
	 * mandar (D49). */
	.inicio-sobre__imagem-col { width: 42.821%; flex: none; align-self: auto; }
	.inicio-sobre__texto { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}


/* ------------------------------------------------------------------
 * GALERIA "Imagens" — widget gallery (post 165, id d2589b4), 10 das
 * 11 fotos reais. Layout BENTO: tamanhos de célula bem variados,
 * pedido explícito do Diego ("não me vem com fotos em grade tudo com
 * o mesmo tamanho") — não é o algoritmo "justified" exato do widget
 * original (pediria JS de layout), é um grid CSS com o mesmo espírito
 * assimétrico.
 *
 * D60 — three coisas mudaram, todas pedido do Diego:
 *   1. FULL-BLEED: sem teto de container e sem padding lateral, as
 *      fotos vão de borda a borda da página.
 *   2. NO MÁXIMO 3 LINHAS, SEM BURACO. O `grid-auto-flow: dense` de
 *      antes não garantia isso — ele preenche buracos quando dá, mas
 *      com spans mistos sobrava célula vazia (o "X" que ele marcou no
 *      print). Agora os spans são fixos por posição (:nth-child) e
 *      calculados pra fechar EXATO: 6 colunas × 3 linhas = 18 células
 *      pra 10 fotos, e 4 × 3 = 12 no tablet. Por isso a ORDEM do array
 *      em page-inicio.php importa — mexer nela quebra o encaixe.
 *   3. Sem lightbox. `object-position: center` mantém o assunto da
 *      foto centrado no corte, como ele pediu.
 * ------------------------------------------------------------------ */

.inicio-galeria {
	background-color: var(--cor-fundo-creme);
	padding-bottom: var(--ritmo-secao);
}

/* Mobile: 2 colunas, todas as células iguais — 10 fotos em 5 linhas.
 * O teto de 3 linhas é regra de desktop; em 2 colunas ele obrigaria a
 * cortar fotos fora. */
.inicio-galeria__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: clamp(120px, 30vw, 200px);
	gap: var(--esp-8);
}

.inicio-galeria__foto {
	margin: 0;
	overflow: hidden;
	background-color: var(--cor-fundo-nude);
}

.inicio-galeria__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;   /* D60: assunto centrado no corte */
	transition: transform .5s ease;
}

.inicio-galeria__foto:hover img { transform: scale(1.05); }

/* Tablet — 4 colunas × 3 linhas = 12 células, 10 fotos:
 *   linha 1: [1 1] [2] [3]
 *   linha 2: [4 4] [5] [6]
 *   linha 3: [7] [8] [9] [10]                                   */
@media (min-width: 768px) {
	.inicio-galeria__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: clamp(150px, 19vw, 230px);
		gap: var(--esp-12);
	}

	.inicio-galeria__foto:nth-child(1),
	.inicio-galeria__foto:nth-child(4) { grid-column: span 2; }
}

/* Desktop — 6 colunas × 3 linhas = 18 células, 10 fotos:
 *   linha 1: [1 1] [2] [3] [4 4]
 *   linha 2: [1 1] [2] [5] [6 6]     (1 e 2 descem da linha 1)
 *   linha 3: [7 7] [8 8] [9] [10]                               */
@media (min-width: 1025px) {
	.inicio-galeria__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: clamp(170px, 15vw, 260px);
		gap: var(--esp-12);
	}

	/* reseta o span do tablet antes de reatribuir */
	.inicio-galeria__foto:nth-child(4) { grid-column: auto; }

	.inicio-galeria__foto:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.inicio-galeria__foto:nth-child(2) { grid-row: span 2; }
	.inicio-galeria__foto:nth-child(4),
	.inicio-galeria__foto:nth-child(6),
	.inicio-galeria__foto:nth-child(7),
	.inicio-galeria__foto:nth-child(8) { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
	.inicio-galeria__foto img { transition: none; }
	.inicio-galeria__foto:hover img { transform: none; }
}


/* ------------------------------------------------------------------
 * NÚMEROS — "Uma grande história / Contada em números"
 * Origem: containers com fundo Pêssego Claro + imagem decorativa
 * bg-home-1.png. O validado usa margens negativas (Elementor) pra
 * sobrepor o fundo à seção anterior — sem tradução 1:1 em CSS comum;
 * aqui a imagem entra como textura de fundo no topo da seção, mesmo
 * espírito visual, simplificado.
 * ------------------------------------------------------------------ */

/* D52: "Div Ondas" (id 521172e no validado) — faixa decorativa
 * translúcida (bg-home-1.png, topo branco/transparente) que é a
 * DIVISÓRIA entre Sobre e Números, não o plano de fundo de Números.
 * Margem negativa cola ela no fim de Sobre, sobrepondo o início de
 * Números — "não pode ficar abaixo, tem que ficar posicionada acima"
 * (pedido do Diego). O valor medido no validado é -500px/min-height
 * 480px, mas numa estrutura bem diferente da nossa (full_width,
 * outro sistema de padding) — sem tradução 1:1, aproximado aqui pelo
 * resultado visual: uma faixa que cobre visivelmente as duas bordas. */
/* D53/D55 — camadas, de baixo pra cima:
 *   auto  fundo de .inicio-numeros (degradê creme→pêssego, ver abaixo)
 *   1     .inicio-onda            ← passa POR CIMA desse fundo
 *   2     conteúdo das duas seções ← foto e cards ficam acima da faixa
 * É o que o Diego pediu: "por baixo da foto do sobre a festa, e por
 * cima da seção seguinte, daí aparecem os números".
 *
 * D55: ancorada em top:0 (a costura Sobre/Números) com margem
 * negativa de METADE da própria altura — o centro da faixa cai exato
 * na costura, independente da altura das seções. Antes era um
 * percentual do wrapper (D53/D54), que mudava de lugar toda vez que
 * o conteúdo mudava de tamanho. */
.inicio-onda {
	--onda-altura: clamp(320px, 40vw, 620px);

	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	height: var(--onda-altura);
	margin-top: calc(var(--onda-altura) / -2);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

/* z-index AUTO de propósito: com um z-index numérico aqui a seção
 * viraria um stacking context e prenderia o conteúdo dela abaixo da
 * faixa. Sem ele, o fundo pinta na camada de fundo e o conteúdo
 * (z-index 2) sobe livremente por cima da faixa. */
.inicio-numeros {
	position: relative;
	/* D55: a linha reta entre as duas seções (creme × pêssego-claro)
	 * aparecia nos trechos transparentes do PNG de ondas. O degradê
	 * derrete essa borda: começa no creme exato da seção de cima e
	 * chega no pêssego já dentro da faixa, então não existe mais
	 * aresta pra esconder. Sem cor nova — os dois tokens já são os
	 * fundos das duas seções. */
	background-color: var(--cor-fundo-pessego-claro);
	background-image: linear-gradient(
		to bottom,
		var(--cor-fundo-creme) 0,
		var(--cor-fundo-pessego-claro) clamp(160px, 20vw, 310px)
	);
	background-repeat: no-repeat;
	/* D54: exceção ao --ritmo-secao-dobro (144px no desktop) — o
	 * "UMA GRANDE HISTÓRIA" colava na faixa de ondas. O Diego mediu e
	 * pediu 240px. Mantém o padrão de clamp mobile-first do ritmo. */
	padding-top: clamp(72px, 16.7vw, 240px);
	/* D57: era --ritmo-secao (72px no desktop) — a seção colava na
	 * galeria logo abaixo. O Diego pediu "bastante respiro no pé". */
	padding-bottom: clamp(96px, 14vw, 200px);
}

/* D58/D59/D61: textura de pétalas (bg-folhas-fenachamp.jpg, arquivo do
 * próprio site validado) POR CIMA da cor de fundo. Usada em DUAS
 * seções da Início — "Contada em números" e "Viva a Magia da Festa"
 * (D61) — por isso a regra é uma só, não duplicada.
 *
 * Está num pseudo-elemento, e não como camada de `background-image`,
 * porque camada de background não aceita opacidade própria — e o
 * Diego pediu 65%. Aqui `opacity` funciona direto.
 *
 * `multiply` é o que faz o JPEG (fundo branco opaco) não tapar a cor
 * embaixo: branco × cor = a própria cor (nada muda), pétalas (cinza
 * claro) × cor = a cor levemente escurecida. Então só as pétalas
 * aparecem.
 *
 * `fixed` = a textura não rola junto com a seção, fica presa à
 * viewport (pedido do Diego: "ela tem que ficar fixa").
 *
 * z-index 0: abaixo da faixa de ondas (z 1) e do conteúdo (z 2). */
.inicio-numeros::before,
.inicio-magia::before,
.inicio-programacao::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('../../../../uploads/2026/03/bg-folhas-fenachamp.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	mix-blend-mode: multiply;
	opacity: .65;
	pointer-events: none;
}

/* D64 — CORRIGE D63. Eu tinha trocado o blend desta seção pra `screen`
 * achando que multiply "sumiria" no fundo escuro. Sumir não era o
 * problema: `screen` sobre branco resulta em BRANCO, então a 22% ele
 * jogava 22% de branco sobre o vinho e clareava #5C2632 → ~#80565F,
 * um malva lavado. O Diego comparou com o Elementor antigo lado a
 * lado e apontou: o fundo tem que ficar escuro igual.
 *
 * `multiply` mantém: branco × vinho = o próprio vinho (#5C2632
 * intacto), e só as pétalas (cinza claro) escurecem um tiquinho. A
 * textura fica bem discreta aqui — e é assim que o validado é. */
.inicio-programacao::before {
	mix-blend-mode: multiply;
	opacity: .65;
}

/* iOS/Safari mobile renderiza `background-attachment: fixed` de forma
 * quebrada (trava ou estica a imagem). Abaixo do breakpoint de tablet
 * a textura volta a rolar junto — o efeito "fixo" é desktop. */
@media (max-width: 767px) {
	.inicio-numeros::before,
	.inicio-magia::before,
	.inicio-programacao::before { background-attachment: scroll; }
}

.inicio-numeros__conteudo {
	position: relative;
	z-index: 2;                 /* acima da faixa de ondas (z 1) — D53 */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* D56: cabeçalho da seção centralizado (título, eyebrow e estrelas) —
 * pedido do Diego. É exceção ao alinhamento à esquerda das outras
 * seções da página, decisão dele ao vivo, só aqui. */
.inicio-numeros__cabecalho {
	/* D57: era --esp-40 (40px) — cabeçalho colado na grade de cards */
	margin-bottom: clamp(40px, 6vw, 80px);
	text-align: center;
}

.inicio-numeros__cabecalho .eyebrow { justify-content: center; }
.inicio-numeros__cabecalho .estrelas { margin-inline: auto; }

/* D120 — ESTOURO DE GRID NO CELULAR.
 *
 * `1fr` é `minmax(auto, 1fr)`, e esse `auto` é o tamanho MÍNIMO do
 * conteúdo: se um rótulo não couber, a coluna cresce e arrasta a
 * página junto. Era o caso aqui — em 375px a grade media 462px e a
 * home rolava de lado, com a barra horizontal aparecendo no celular.
 *
 * `minmax(0, 1fr)` deixa a coluna encolher, e o `overflow-wrap` no
 * rótulo quebra a palavra longa em vez de empurrar a caixa
 * ("GASTRONÔMICAS" era a maior). */
.inicio-numeros__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--esp-20);
}

.inicio-numeros__card { min-width: 0; }

.inicio-numeros__label,
.inicio-numeros__valor { overflow-wrap: anywhere; }

/* D57: card VERTICAL, proporção ~3:4 — em D56 eu tinha achatado
 * demais tentando tirar o "quadradão" e ele virou um quadrado ainda
 * mais óbvio. O Diego pediu retrato ("mais vertical, três por quatro,
 * algo assim") com respiro em cima e embaixo: por isso o
 * justify-content:center, que distribui a folga sobrando nas duas
 * pontas em vez de empilhar tudo no topo. */
.inicio-numeros__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	aspect-ratio: 3 / 4;
	padding: var(--esp-24) var(--esp-16);
	background-color: var(--cor-fundo-creme);
	border: 1px solid var(--cor-fundo-nude);
	border-radius: var(--raio-4);
}

.inicio-numeros__icone {
	display: grid;
	place-items: center;
	width: 120px;               /* D59: medido pelo Diego no DevTools */
	height: 120px;
	margin-bottom: var(--esp-20);
	border-radius: 50%;
	/* BUG corrigido: os SVGs (ico-espumantes/visitantes/shows/pratos) têm
	 * fill="white" no próprio arquivo — num fundo creme (quase branco) o
	 * ícone ficava invisível. Fundo nude (mais escuro) é o que dá contraste,
	 * e bate com o secondary_color medido pro frame do icon-box. */
	background-color: var(--cor-fundo-nude);
	/* D56: borda do círculo removida a pedido do Diego */
}

.inicio-numeros__icone img { width: 64px; height: 64px; }   /* D59: medido pelo Diego no DevTools */

.inicio-numeros__valor {
	margin: 0 0 var(--esp-8);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 50px;            /* 55 (medido) → 46 (D56) → 50: cabe no card retrato sem encolher demais */
	line-height: 1.1;
	color: var(--cor-vinho-principal);
}

.inicio-numeros__label {
	margin: 0;
	font-family: var(--fonte-text);
	font-weight: var(--peso-texto);
	font-size: 15px;
	line-height: 1.4;
	color: var(--cor-neutra-pedra);
}

@media (min-width: 768px) {
	/* D56: teto de largura na linha inteira — em tela larga os 4 cards
	 * esticavam até 1440px e ficavam "extensos" demais. */
	.inicio-numeros__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--esp-24);
		max-width: 1040px;
		margin-inline: auto;
	}
}


/* ------------------------------------------------------------------
 * MAGIA — "Viva a Magia da Festa" (4 cards: Vinícolas, Gastronomia,
 * Feira, Shows). Fundo alternado MEDIDO widget a widget: Vinícolas e
 * Shows usam Fundo Pêssego Claro explícito; Gastronomia e Feira caem
 * no fallback do kit (Fundo Blush) — preservado como está, não é
 * erro meu, é o dado real dos 4 widgets.
 * ------------------------------------------------------------------ */

.inicio-magia {
	/* D61: âncora da textura de pétalas (::before) e, a partir do D62,
	 * também da área da letra decorativa "M" */
	position: relative;
	background-color: var(--cor-fundo-creme);
	padding-top: var(--ritmo-secao);
	padding-bottom: var(--ritmo-secao-dobro);
}

.inicio-magia__conteudo {
	position: relative;
	z-index: 2;                 /* D61: acima da textura */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.inicio-magia__cabecalho { margin-bottom: var(--esp-40); }

.inicio-magia__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-20);
}

.inicio-magia__card {
	display: flex;
	flex-direction: column;
	padding: var(--esp-24);
	border: 2px solid var(--cor-fundo-blush);
	border-radius: var(--raio-4);
	text-decoration: none;
	/* D61: hover — o card inteiro é um link e não dava sinal nenhum de
	 * que era clicável (só a cor do "EXPLORAR" mudava, no rodapé). Sobe
	 * 6px + sombra na MESMA cor da sombra aprovada em D5, com geometria
	 * proporcional ao card (mesmo princípio do .btn em D14 — não é uma
	 * sombra nova, é a mesma cor via color-mix). */
	/* D73: a `transition` é desligada durante a revelação pelo próprio
	 * main.js (vale pra todo elemento animado, não só este) — aqui basta
	 * declarar normalmente. Ver o comentário do onStart lá. */
	transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.inicio-magia__card:hover,
.inicio-magia__card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--cor-vinho-principal) 18%, transparent);
	border-color: var(--cor-fundo-pessego);
}

.inicio-magia__card:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

.inicio-magia__card--claro { background-color: var(--cor-fundo-pessego-claro); }
.inicio-magia__card--blush { background-color: var(--cor-fundo-blush); }

.inicio-magia__icone {
	width: 40px;
	height: 40px;
	margin-bottom: var(--esp-16);
	transition: transform .4s ease;
}

.inicio-magia__card:hover .inicio-magia__icone,
.inicio-magia__card:focus-visible .inicio-magia__icone {
	transform: scale(1.12);
}

.inicio-magia__titulo {
	margin: 0 0 var(--esp-12);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 32px;
	color: var(--cor-vinho-principal);
}

.inicio-magia__desc {
	margin: 0 0 var(--esp-20);
	font-size: 16px;
	line-height: 1.6;
	color: var(--cor-neutra-pedra);
}

.inicio-magia__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-8);
	margin-top: auto;
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cor-vinho-principal);
	transition: color .3s ease;
}

.inicio-magia__card:hover .inicio-magia__cta,
.inicio-magia__card:focus-visible .inicio-magia__cta {
	color: var(--cor-dourado);
}

@media (min-width: 768px) {
	.inicio-magia__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.inicio-magia__titulo { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.inicio-magia__card,
	.inicio-magia__icone,
	.inicio-magia__cta { transition: none; }
	.inicio-magia__card:hover { transform: none; }
	.inicio-magia__card:hover .inicio-magia__icone { transform: none; }
}


/* ------------------------------------------------------------------
 * PROGRAMAÇÃO — "Confira nossa programação" (fundo escuro medido,
 * --cor-vinho-fundo-secao). Título Prata usa a mesma cor MEDIDA
 * (#9D3D49) do resto do site (D23) — mesmo em cima do fundo escuro;
 * não é engano meu, o widget mede essa cor explicitamente ali.
 * ------------------------------------------------------------------ */

.inicio-programacao {
	position: relative;
	overflow: hidden;
	background-color: var(--cor-vinho-fundo-secao);
	padding-top: var(--ritmo-secao);
	padding-bottom: var(--ritmo-secao-dobro);
}

.inicio-programacao__conteudo {
	position: relative;
	z-index: 2;                 /* D63: acima da textura de pétalas */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* D63: título à esquerda e botão à direita, na mesma linha, centrados
 * verticalmente um em relação ao outro. No mobile empilha. */
.inicio-programacao__topo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--esp-24);
	margin-bottom: var(--esp-40);
}

/* alinhado à esquerda, igual ao padrão das outras seções da página —
 * não é centralizado (correção: tinha inventado centralização aqui) */
.inicio-programacao__cabecalho { margin-bottom: 0; }

.eyebrow--claro { color: var(--cor-fundo-creme); }

.inicio-programacao__acao { flex: none; }

@media (min-width: 768px) {
	.inicio-programacao__topo {
		flex-direction: row;
		align-items: center;            /* centralização vertical pedida */
		justify-content: space-between;
		gap: var(--esp-40);
	}
}

.inicio-programacao__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-20);
	margin-bottom: var(--esp-40);
}

.inicio-programacao__card {
	display: flex;
	flex-direction: column;
	gap: var(--esp-16);
	padding: 6%;
	background-color: var(--cor-vinho-fundo-secao);
	border: 1px solid var(--cor-neutra-borda);
	border-radius: var(--raio-4);
	text-decoration: none;
	/* D63: hover suave — o card é um link e não dava sinal disso.
	 * Mais contido que o da "Magia da Festa" (sobe 4px em vez de 6,
	 * sem sombra): o fundo aqui é escuro, então sombra não aparece;
	 * quem faz o trabalho é a borda clareando pra dourado e um leve
	 * lift. Nenhuma cor nova — dourado e vinho-profundo já são tokens. */
	transition: transform .4s ease, border-color .4s ease, background-color .4s ease;
}

.inicio-programacao__card:hover,
.inicio-programacao__card:focus-visible {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--cor-dourado) 55%, transparent);
	background-color: var(--cor-vinho-profundo);
}

.inicio-programacao__card:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

/* a seta do rodapé do card avança um pouco, igual à do .btn (D12) */
.inicio-programacao__seta { transition: transform .4s ease; }

.inicio-programacao__card:hover .inicio-programacao__seta,
.inicio-programacao__card:focus-visible .inicio-programacao__seta {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.inicio-programacao__card,
	.inicio-programacao__seta { transition: none; }
	.inicio-programacao__card:hover { transform: none; }
	.inicio-programacao__card:hover .inicio-programacao__seta { transform: none; }
}

.inicio-programacao__data-linha {
	display: flex;
	align-items: baseline;
	gap: var(--esp-12);
}

.inicio-programacao__dia {
	font-family: var(--fonte-display);
	font-weight: var(--peso-texto);
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	color: var(--cor-dourado);
}

.inicio-programacao__semana {
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1.7px;
	color: var(--cor-fundo-creme);
}

.inicio-programacao__divisor {
	width: 24%;
	height: 2px;
	background-color: var(--cor-neutra-borda);
	border: 0;
	margin: 0;
}

.inicio-programacao__titulo-card {
	margin: 0;
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 26px;
	color: var(--cor-fundo-creme);
}

.inicio-programacao__rodape-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.inicio-programacao__hora {
	font-family: var(--fonte-text);
	font-weight: var(--peso-texto);
	font-size: 12px;
	letter-spacing: 1.7px;
	color: var(--cor-fundo-creme);
}

.inicio-programacao__seta { width: 16px; height: 16px; color: var(--cor-fundo-creme); flex: none; }

@media (min-width: 768px) {
	.inicio-programacao__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.inicio-programacao__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------------
 * QUEM FAZ ACONTECER — Patrocinadores / Realização / Apoiadores
 * Origem: 3 loop-grids, mesmo template ("Loop Apoiador"), filtrados
 * pela taxonomia categoria_apoiador (termos: Patrocínio, Prefeitura
 * & Entidades, Parceiros). Fundo claro (nenhuma cor de fundo medida
 * — cai no padrão creme da página, diferente da seção anterior).
 * ------------------------------------------------------------------ */

.inicio-patrocinadores {
	position: relative;
	overflow: hidden;
	background-color: var(--cor-fundo-creme);
	padding-top: var(--ritmo-secao);
	padding-bottom: var(--ritmo-secao-dobro);
}

/* D66: imagem de fundo (bg-home-2.jpg, arquivo do próprio validado) em
 * multiply a 60%, pedido do Diego. Mesma técnica das pétalas das outras
 * seções — pseudo-elemento, porque camada de background-image não
 * aceita opacidade própria.
 *
 * D71 — a imagem tem um esmaecimento pro BRANCO na base, e multiply
 * sobre branco não muda nada: aquela faixa virava creme chapado antes
 * do rodapé, o que o Diego leu como "margem branca no final".
 *
 * `cover` sozinho não resolvia: a seção é ~1440×1073 (proporção 1,34)
 * e a imagem é 2,04 — o cover escala pela ALTURA e acaba mostrando a
 * imagem inteira no eixo vertical, esmaecimento incluído.
 *
 * Solução: o pseudo-elemento é 35% MAIS ALTO que a seção e ancorado no
 * topo. O `overflow: hidden` da seção corta o excedente — ou seja,
 * corta justamente a base esmaecida. Sobra só o miolo da foto, e ela
 * chega até o rodapé sem faixa clara.
 *
 * z-index 0: abaixo da letra decorativa e do conteúdo (z 2). */
.inicio-patrocinadores::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 135%;
	z-index: 0;
	background-image: url('../../../../uploads/2026/05/bg-home-2.jpg');
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	opacity: .6;
	pointer-events: none;
}

.inicio-patrocinadores__conteudo {
	position: relative;
	z-index: 2;                 /* D66: acima da imagem de fundo */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
	text-align: center;
}

.inicio-patrocinadores__grupo { margin-bottom: var(--esp-40); }
.inicio-patrocinadores__grupo:last-child { margin-bottom: 0; }

/* D66: título e estrelinhas centralizados (o título estava à esquerda) */
.inicio-patrocinadores__grupo-titulo {
	margin: 0 0 var(--esp-8);
	text-align: center;
}

.inicio-patrocinadores__estrelas {
	margin-inline: auto;
	margin-bottom: var(--esp-24);
}

/* D81 — o CSS dos logos saiu daqui: virou o componente .grade-logos /
 * .logo-marca (componentes.css), agora compartilhado com a página
 * Expositores. Os valores são exatamente os mesmos de antes — o que
 * mudou foi o lugar. */


/* ====================================================================
 * INGRESSOS (post 168)
 *
 * Sem CPT: no validado os cards e o FAQ vivem dentro do Elementor.
 * Todos os valores abaixo saíram do _elementor_data da página.
 * ==================================================================== */

/* ------------------------------------------------------------------
 * "Escolha seu Ingresso" — 3 cards
 * Origem: container "Escolha ingresso" (id 89c6e48) — padding 5%,
 * gap de linha 60px entre o cabeçalho e a grade.
 * ------------------------------------------------------------------ */

.ingressos-escolha {
	position: relative;
	overflow: hidden;
	background-color: var(--cor-fundo-creme);
	padding-block: var(--ritmo-secao);
}

.ingressos-escolha__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* medido: flex_align_items center no container da seção */
.ingressos-escolha__cabecalho {
	text-align: center;
	margin-bottom: 60px;        /* flex_gap row: 60px */
}

.ingressos-escolha__cabecalho .estrelas { margin-inline: auto; }

.ingressos-grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-24);
	align-items: stretch;       /* medido: _flex_align_self stretch nos cards */
}

/* ------------------------------------------------------------------
 * Card de ingresso
 * CARD 1/3: borda 1px Neutra Cacau a 12%, raio 6px, padding 7%/6%
 * CARD 2 (destaque): fundo creme, borda 2px vinho-principal, raio 6px,
 *   sombra 0 20px 50px rgba(157,61,73,.15) — que é exatamente a
 *   --sombra-card-suave já medida no D5, não uma sombra nova.
 * ------------------------------------------------------------------ */

.ingressos-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--esp-20);         /* flex_gap medido: 20px */
	padding: 7% 6%;
	border: 1px solid color-mix(in srgb, var(--cor-neutra-cacau) 12%, transparent);
	border-radius: var(--raio-6);
	/* D75: creme-SUAVE, medido. Vinha por referência global e eu tinha
	 * lido como creme na 1ª versão. O card em destaque é que usa creme
	 * (esse sim literal no dado). */
	background-color: var(--cor-fundo-creme-suave);
}

.ingressos-card--destaque {
	background-color: var(--cor-fundo-creme);   /* medido: literal rgba(255,252,248,1) */
	border: 2px solid var(--cor-vinho-principal);
	box-shadow: var(--sombra-card-suave);
	padding-bottom: 13%;
}

/* Selo "MAIS POPULAR" — largura 60%, pílula, fundo --cor-vinho-selo
 * (#99414A, medido; ver D74).
 *
 * D75: fica MONTADO SOBRE a borda do card, centrado no topo — pedido
 * do Diego ("ele tem que ficar exatamente no meio do topo do card").
 * Antes ele nascia dentro do card, abaixo da linha da borda.
 *
 * `position:absolute` + `left:50%` + `translate(-50%,-50%)` no eixo Y
 * deixa o selo cortado ao meio pela borda. Uso `translate` (propriedade
 * própria) e não `transform` de propósito: o card é revelado pelo GSAP,
 * que escreve `transform` — misturar os dois é a armadilha do D12/D70.
 * O selo em si não é animado, mas a regra vale como higiene. */
.ingressos-card__selo {
	position: absolute;
	/* -2px = a espessura da borda do card em destaque. `top:0` num
	 * absoluto conta a partir da borda INTERNA, então sem isso o selo
	 * fica 2px abaixo do fio e não centrado nele. */
	top: -2px;
	left: 50%;
	translate: -50% -50%;
	z-index: 1;
	width: 60%;
	margin: 0;
	padding: var(--esp-8) var(--esp-16);
	border-radius: var(--raio-pilula);
	background-color: var(--cor-vinho-selo);
	color: var(--cor-fundo-creme);
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 11px;
	letter-spacing: 1px;
	white-space: nowrap;
}

.ingressos-card__topo { display: grid; gap: var(--esp-8); }

.ingressos-card__nome {
	margin: 0;
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 28px;
	color: var(--cor-vinho-principal);
}

.ingressos-card__resumo {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cor-neutra-pedra);
}

.ingressos-card__preco-area { width: 100%; }

/* preço: Prata 44px. Neutra Cacau nos cards 1 e 3, vinho-principal no
 * card em destaque — os dois valores são medidos, não uma escolha. */
.ingressos-card__preco {
	margin: 0 0 var(--esp-16);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 44px;
	line-height: 1.1;
	color: var(--cor-neutra-cacau);
}

.ingressos-card--destaque .ingressos-card__preco { color: var(--cor-vinho-principal); }

.ingressos-card__divisor {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background-color: color-mix(in srgb, var(--cor-neutra-cacau) 12%, transparent);
}

/* lista de benefícios — icon-list medido: ícone 20px, texto 14px/400 */
.ingressos-card__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--esp-12);
	width: 100%;
	text-align: left;
}

.ingressos-card__lista li {
	display: flex;
	align-items: flex-start;
	gap: var(--esp-8);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cor-neutra-cacau);   /* medido (global): #4F4039 */
}

.ingressos-card__check {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 1px;
	color: var(--cor-vinho-principal);
}

.ingressos-card__nota {
	margin: 0;
	width: 100%;
	text-align: left;
	font-size: 12px;
	line-height: 1.4;
	color: var(--cor-neutra-pedra);
}

/* empurra o botão pro rodapé do card, pra os 3 alinharem mesmo com
 * quantidades diferentes de benefício */
.ingressos-card__botao { margin-top: auto; }

@media (min-width: 768px) {
	.ingressos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------------
 * FAQ — accordion
 * Origem: widget nested-accordion (id de92fa8) — padding do item
 * 16/25/16/24, título 20px, sem borda e sem raio.
 * Feito em <button> + [hidden] pra funcionar com teclado e leitor de
 * tela; o JS só alterna aria-expanded (ver main.js).
 * ------------------------------------------------------------------ */

/* D75: fundo pêssego-claro — MEDIDO. Na primeira versão eu usei creme
 * porque meu extrator não resolvia cor vinda por referência global
 * (`__globals__`), e essa seção define o fundo justamente assim. O
 * Diego apontou ("tinha uma cor diferente"). Ferramenta corrigida pra
 * resolver essas referências. */
.ingressos-faq {
	position: relative;
	overflow: hidden;
	background-color: var(--cor-fundo-pessego-claro);
	padding-block: var(--ritmo-secao);
}

.ingressos-faq__conteudo {
	position: relative;
	z-index: 2;
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.ingressos-faq__cabecalho {
	text-align: center;
	margin-bottom: 60px;        /* mesmo gap de linha medido: 60px */
}

.ingressos-faq__cabecalho .eyebrow { justify-content: center; }
.ingressos-faq__cabecalho .estrelas { margin-inline: auto; }

.acordeao {
	max-width: 900px;
	margin-inline: auto;
}


/* D75: medidas reais do widget — item SEM borda e SEM raio, fundo
 * creme, hover creme-suave, conteúdo creme. Tudo isso vinha por
 * referência global e não aparecia na 1ª extração; na 1ª versão eu
 * tinha feito uma lista com fio embaixo e fundo transparente. */
.acordeao__item {
	background-color: var(--cor-fundo-creme);
	border: 0;
	border-radius: 0;
}

/* separador de 1px entre itens, pra não virar um bloco chapado —
 * o widget não declara borda, mas os itens têm fundo próprio sobre a
 * seção pêssego-claro, então o respiro vem do gap do container. */
.acordeao { display: grid; gap: 2px; }

.acordeao__titulo { margin: 0; }

.acordeao__gatilho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-16);
	width: 100%;
	padding: var(--esp-16) 25px var(--esp-16) var(--esp-24);   /* medido */
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 20px;                    /* medido */
	line-height: 1.35;
	color: var(--cor-vinho-principal);  /* medido: normal_title_color */
	transition: color .3s ease, background-color .3s ease;
}

/* medido: accordion_background_hover_color = creme-suave */
.acordeao__gatilho:hover { background-color: var(--cor-fundo-creme-suave); }

/* medido: active_title_color = vinho-escuro */
.acordeao__gatilho[aria-expanded="true"] { color: var(--cor-vinho-escuro); }

.acordeao__gatilho:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: -2px;
	border-radius: var(--raio-4);
}

.acordeao__sinal {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--cor-neutra-cacau);   /* medido: normal_icon_color */
	transition: transform .3s ease;
}

.acordeao__gatilho[aria-expanded="true"] .acordeao__sinal { transform: rotate(180deg); }

/* D76 — abertura/fechamento suave.
 *
 * O painel usava o atributo `hidden`, que é `display:none`: liga/desliga
 * seco, sem meio-termo. O Diego apontou ("está abrindo e fechando
 * bruscamente").
 *
 * A técnica é animar `grid-template-rows` de `0fr` pra `1fr`. É o único
 * jeito de transicionar altura DESCONHECIDA em CSS puro — `height:auto`
 * não anima, e `max-height` chutado dá timing torto (fecha rápido
 * demais ou sobra atraso, dependendo do tamanho da resposta). Aqui as
 * respostas variam de 1 a 5 linhas, então o chute seria ruim em quase
 * todas.
 *
 * `visibility` entra junto porque transição discreta: ao abrir, vira
 * visible na hora; ao fechar, só some no FIM da animação. Isso mantém
 * o conteúdo fora da árvore de acessibilidade quando fechado — mesmo
 * efeito semântico do `hidden` que saiu daqui. */
.acordeao__painel {
	display: grid;
	grid-template-rows: 1fr;
	visibility: visible;
	background-color: var(--cor-fundo-creme);   /* medido: content_background_color */
	transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1),
	            visibility .38s;
}

.acordeao__painel[data-aberto="nao"] {
	grid-template-rows: 0fr;
	visibility: hidden;
}

/* o overflow tem que ficar no filho: é ele que é espremido pelo 0fr */
.acordeao__painel-interno {
	overflow: hidden;
	min-height: 0;
}

/* padding no interno, não no painel — no painel ele apareceria como
 * uma faixa vazia mesmo com o conteúdo colapsado */
.acordeao__painel p {
	margin: 0;
	padding: 0 25px var(--esp-20) var(--esp-24);
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
	max-width: 70ch;
}

/* D75 — ajuste de leitura no mobile. Os 20px medidos são do desktop;
 * numa coluna de ~340px quase toda pergunta quebrava em duas linhas e
 * a lista ficava pesada (o Diego apontou: "no mobile ficou meio
 * confuso"). Reduz a pergunta e aperta o respiro lateral só abaixo de
 * 768px — o valor medido segue valendo do tablet pra cima. */
@media (max-width: 767px) {
	.acordeao__gatilho {
		font-size: 17px;
		padding: var(--esp-14) var(--esp-16);
		gap: var(--esp-12);
	}
	.acordeao__sinal { width: 18px; height: 18px; }
	.acordeao__painel p {
		padding: 0 var(--esp-16) var(--esp-16);
		font-size: 15px;
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acordeao__gatilho,
	.acordeao__sinal,
	.acordeao__painel { transition: none; }
}


/* ====================================================================
 * PÁGINA ATRAÇÕES (post 169 do validado)
 * ==================================================================== */

/* ------------------------------------------------------------------
 * "O que te espera" — cabeçalho + grade de 10 fotos
 * Seção a2ddced: fundo creme, padding 5%, gap de linha 60px.
 * ------------------------------------------------------------------ */

.atracoes-espera {
	position: relative;
	background-color: var(--cor-fundo-creme);
	padding-block: var(--ritmo-secao);
}

.atracoes-espera__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* centralizado por MEDIÇÃO: os três containers do cabeçalho
 * (adf80e0, ce84a79, ec86bcc) têm flex_align_items:center já no
 * desktop — não é o caso do E10, onde eu centralizei sem dado. */
.atracoes-espera__cabecalho {
	text-align: center;
	margin-bottom: 60px;        /* flex_gap row: 60px */
}

.atracoes-espera__cabecalho .eyebrow { justify-content: center; }
.atracoes-espera__cabecalho .estrelas { margin-inline: auto; }

/* medido: _element_custom_width 50% no desktop, 100% no tablet */
.atracoes-espera__texto {
	margin: 0 auto;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cor-neutra-pedra);
}

/* ------------------------------------------------------------------
 * Grade das atrações
 * Medido: 2 colunas no tablet (grid_columns_grid_tablet), 3 no
 * desktop (default do Elementor), gap 20px, margem superior 50px
 * (30px no mobile).
 * ------------------------------------------------------------------ */

.atracoes-grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--esp-20);
	margin-top: var(--esp-30);
}

/* ------------------------------------------------------------------
 * Card de atração
 * O card inteiro é clicável e abre a foto ampliada — no validado ele é
 * `html_tag: a` com link dinâmico `[elementor-tag name="lightbox"]`.
 * Aqui é um <button class="ampliar-imagem">, que o D37 já sabe abrir;
 * botão em vez de link porque o destino não é uma página, é o próprio
 * lightbox.
 *
 * Raio medido: 6px em cima e 10px embaixo no card, 0 0 6px 6px na
 * tarja. Os dois não batem (10 × 6) — é assim no validado; o
 * overflow:hidden do card resolve o encontro sem alterar o valor.
 * ------------------------------------------------------------------ */

.atracoes-card {
	/* reset de <button> */
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 0;
	font: inherit;
	text-align: inherit;
	background: none;
	cursor: pointer;

	overflow: hidden;
	border-radius: var(--raio-6) var(--raio-6) var(--raio-10) var(--raio-10);
	/* mesma linguagem de hover dos outros cards clicáveis do site
	 * (D61): sobe 6px + a sombra do D5 via color-mix, nunca uma
	 * sombra nova. A transition é desligada durante a revelação pelo
	 * próprio main.js — ver o onStart lá (D73/E18). */
	transition: transform .4s ease, box-shadow .4s ease;
}

.atracoes-card:hover,
.atracoes-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--cor-vinho-principal) 18%, transparent);
}

.atracoes-card:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

/* a altura NÃO é aspect-ratio nem min-height: no validado ela vem de
 * um widget `spacer` dentro do card — 300px no desktop, 189px no
 * tablet (e o mobile herda o tablet). São 10 spacers pra 10 cards,
 * todos com o mesmo valor. */
.atracoes-card__foto {
	display: block;
	height: 189px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: transform .6s ease;
}

.atracoes-card:hover .atracoes-card__foto,
.atracoes-card:focus-visible .atracoes-card__foto {
	transform: scale(1.06);
}

/* tarja inferior: fundo creme, borda vinho-principal a 10%,
 * padding 18/16, Prata 500 sobre vinho-profundo */
.atracoes-card__rotulo {
	/* estica pra ocupar a altura que sobra: numa mesma linha da grade os
	 * cards têm a mesma altura (align-items:stretch), mas os rótulos
	 * variam de 1 a 3 linhas ("Shows" × "Espumantes premiados"). Sem
	 * isto, o card do rótulo curto ficava com um vão vazio embaixo.
	 * Centralizar na vertical e alinhar à esquerda é o que o validado
	 * mede no container da tarja (column + justify center + align
	 * flex-start). */
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	padding: var(--esp-18) var(--esp-16);
	border: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 10%, transparent);
	border-radius: 0 0 var(--raio-6) var(--raio-6);
	background-color: var(--cor-fundo-creme);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 16px;
	line-height: 1.3;
	color: var(--cor-vinho-profundo);
}

/* ------------------------------------------------------------------
 * Seção do CTA (6e5c9ac) — fundo pêssego claro, caixa a 70% da
 * largura no desktop (largura medida no container a9b3ea5).
 * O CTA em si é componente: ver .cta-ingressos em componentes.css.
 * ------------------------------------------------------------------ */

/* D82: sem letra decorativa — seção de CTA não leva letra em nenhuma
 * página (decisão do Diego). */
.atracoes-cta {
	background-color: var(--cor-fundo-pessego-claro);
	padding-block: var(--ritmo-secao);
}

.atracoes-cta__conteudo {
	position: relative;
	z-index: 2;
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

@media (min-width: 768px) {
	.atracoes-grade         { margin-top: 50px; }
}

@media (min-width: 1025px) {
	.atracoes-grade         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* _element_custom_width: 50% no desktop, 100% no tablet — por isso
	 * a regra é daqui pra cima, não do breakpoint de 768. */
	.atracoes-espera__texto { max-width: 50%; }
	.atracoes-card__foto    { height: 300px; }
	/* largura medida no container a9b3ea5. Fica no invólucro pra que o
	 * padding percentual do CTA resolva contra 70% da coluna, e não
	 * contra a coluna inteira — ver o comentário no page-atracoes.php. */
	.atracoes-cta__caixa    { width: 70%; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.atracoes-card,
	.atracoes-card__foto { transition: none; }
	.atracoes-card:hover { transform: none; }
	.atracoes-card:hover .atracoes-card__foto { transform: none; }
}


/* ====================================================================
 * PÁGINA EXPOSITORES (post 485 do validado)
 * ==================================================================== */

/* seção 2 — "O que TE espera": fundo creme, padding 5%, gap 60px */
.expositores-espera {
	position: relative;
	background-color: var(--cor-fundo-creme);
	padding-block: var(--ritmo-secao);
}

.expositores-espera__conteudo,
.expositores-lista__conteudo,
.expositores-cta__conteudo,
.expositores-local__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1);
	                               no CTA não há letra, mas manter a
	                               regra junta evita divergir do resto */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* medido: flex_align_items center nos containers do cabeçalho */
.expositores-espera__cabecalho,
.expositores-lista__cabecalho,
.expositores-local__cabecalho {
	text-align: center;
	margin-bottom: 60px;        /* flex_gap row: 60px */
}

.expositores-espera__cabecalho .eyebrow,
.expositores-lista__cabecalho .eyebrow,
.expositores-local__cabecalho .eyebrow { justify-content: center; }

.expositores-espera__cabecalho .estrelas,
.expositores-lista__cabecalho .estrelas,
.expositores-local__cabecalho .estrelas { margin-inline: auto; }

/* D80 — DUAS COLUNAS, JUSTIFICADO. Estava numa coluna só, alinhado à
 * esquerda, e o Diego apontou: "deve estar em duas colunas,
 * justificado, como no original". Ele tem razão e é MEDIDO —
 * `text_columns: 2`, `text_columns_tablet/mobile: 1`,
 * `column_gap: 40px`, `align: justify`, `_padding: 2% 0`. Passou
 * batido porque o extrator não lia essas chaves (E27, já corrigido). */
.expositores-espera__texto {
	margin: 0 auto;
	padding-block: 2%;
	font-size: 16px;
	line-height: 1.8;           /* 4 blocos separados por <br>: precisa respirar */
	color: var(--cor-neutra-pedra);
	text-align: justify;
	text-wrap: pretty;          /* evita rio de espaço nas linhas justificadas */
	hyphens: auto;
}

/* ------------------------------------------------------------------
 * GALERIA BENTO — 9 fotos
 * D80: o validado mede `gallery_layout: justified`, mas o Diego pediu
 * o desenho da home ("fotos de tamanhos diferentes, meio organizada,
 * como na home"). Divergência do validado por decisão dele.
 *
 * Mesma linguagem da .inicio-galeria: células de altura fixa, foto em
 * `cover`, zoom suave no hover. O que muda é o mapa de spans, que é
 * função da QUANTIDADE de fotos — lá são 10, aqui 9 — e por isso não
 * dá pra promover a componente sem parametrizar o mapa. Se uma
 * terceira página pedir bento, aí vale extrair a base comum.
 *
 * Em toda resolução o número de células fecha exato com as 9 fotos,
 * sem buraco:
 *   mobile  2 col: [1 1] depois 4 linhas de 2  = 10 células, 5 linhas
 *   tablet  4 col: [1 1][2][3] / [4][5 5][6] / [7][8 8][9] = 12, 3 linhas
 *   desktop 6 col: [1 1][2 2][3 3] / [1 1][4 4][5 5] / [6 6][7 7][8][9]
 *                  (a 1 desce da linha 1)     = 18 células, 3 linhas
 * ------------------------------------------------------------------ */

.expositores-galeria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: clamp(120px, 30vw, 200px);
	gap: var(--esp-8);
}

.expositores-galeria__foto {
	/* reset de <button> — a foto inteira abre o lightbox (D37/D80) */
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--cor-fundo-nude);
	cursor: zoom-in;
	overflow: hidden;
	border-radius: var(--raio-6);
}

.expositores-galeria__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .5s ease;
}

.expositores-galeria__foto:hover img,
.expositores-galeria__foto:focus-visible img { transform: scale(1.05); }

.expositores-galeria__foto:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 2px;
}

.expositores-galeria__foto:nth-child(1) { grid-column: span 2; }

/* seção 3 — "Conheça os Expositores": fundo pêssego-claro */
.expositores-lista {
	position: relative;
	background-color: var(--cor-fundo-pessego-claro);
	padding-block: var(--ritmo-secao);
	/* âncora #expositores (menu-anchor 73cdf18). O 100px fixo errava
	 * quando o cabeçalho crescia; agora acompanha a altura real dele
	 * (D89) — mesma regra nas três âncoras do tema. */
	scroll-margin-top: calc(var(--altura-cabecalho, 80px) + 24px);
}

/* D81 — a grade de logos virou COMPONENTE (.grade-logos / .logo-marca
 * em componentes.css), porque é o mesmo padrão dos patrocinadores da
 * home e o Diego pediu que ficassem idênticos. O CSS que estava aqui
 * saiu inteiro — nada de manter duas cópias. */

/* o hover é só daqui: o card de expositor leva pro site da empresa e o
 * Diego aprovou o movimento ("na listagem até tá ok"). Na home os
 * logos de patrocinador nunca tiveram hover e a página está aprovada,
 * então o componente não carrega isso. */
.expositores-lista a.logo-marca {
	transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.expositores-lista a.logo-marca:hover,
.expositores-lista a.logo-marca:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--cor-vinho-principal) 18%, transparent);
	border-color: var(--cor-fundo-pessego);
}

.expositores-lista a.logo-marca:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.expositores-lista a.logo-marca { transition: none; }
	.expositores-lista a.logo-marca:hover { transform: none; }
}
.expositores-vazio {
	margin: 0;
	text-align: center;
	color: var(--cor-neutra-pedra);
}

/* seção 4 — CTA: fundo creme.
 * D82: sem letra decorativa, como em toda seção de CTA. */
.expositores-cta {
	background-color: var(--cor-fundo-creme);
	padding-block: var(--ritmo-secao);
}

/* seção 5 — Localização: fundo pêssego-claro */
.expositores-local {
	position: relative;
	background-color: var(--cor-fundo-pessego-claro);
	padding-block: var(--ritmo-secao);
}

.expositores-local__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-24);
	align-items: stretch;
}

/* cartão de endereço: fundo vinho-escuro + a gravura fenachamp-footer
 * por cima a 63% (background_overlay_opacity medido), raio 6px,
 * padding 32px, conteúdo centralizado. */
.expositores-endereco {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px;              /* medido; 32 não é token (D7: só entra o que repete 20+) */
	border-radius: var(--raio-6);
	background-color: var(--cor-vinho-escuro);
	text-align: center;
	min-height: 400px;          /* acompanha a altura medida do mapa */
}

.expositores-endereco::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('../../../../uploads/2026/03/fenachamp-footer.png');
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .63;
	pointer-events: none;
}

.expositores-endereco > * { position: relative; z-index: 1; }

.expositores-endereco__titulo {
	margin: 0 0 var(--esp-16);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: clamp(24px, 4vw, 32px);
	color: var(--cor-dourado);
}

/* divisor medido: 24% de largura, 2px, creme a 28% de opacidade
 * (o valor bruto é #FFFCF847 — creme com alpha 47 em hex) */
.expositores-endereco__divisor {
	width: 24%;
	height: 2px;
	margin: 0 auto var(--esp-20);
	border: 0;
	background-color: color-mix(in srgb, var(--cor-fundo-creme) 28%, transparent);
}

.expositores-endereco__linha {
	margin: 0 0 5px;            /* flex_gap 5px medido no container 7c9c80e */
	font-size: 16px;
	color: var(--cor-fundo-creme);
}

.expositores-endereco__linha:last-child { margin-bottom: 0; }

/* cartão do mapa: fundo vinho-principal, raio 6px, iframe de 400px */
.expositores-mapa {
	overflow: hidden;
	border-radius: var(--raio-6);
	background-color: var(--cor-vinho-principal);
	line-height: 0;
}

.expositores-mapa iframe {
	display: block;
	width: 100%;
	height: 400px;              /* medido no widget google_maps */
	border: 0;
}

/* tablet — bento em 4 colunas; 1, 5 e 8 ocupam duas */
@media (min-width: 768px) {
	.expositores-local__grid { grid-template-columns: 1fr 1fr; }
	.expositores-galeria {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: clamp(150px, 19vw, 230px);
		gap: var(--esp-12);
	}
	.expositores-galeria__foto:nth-child(5),
	.expositores-galeria__foto:nth-child(8) { grid-column: span 2; }
}

/* desktop — bento em 6 colunas; a 1ª ocupa 2×2 e desce pra linha 2 */
@media (min-width: 1025px) {
	/* D81 — sem `max-width`: o Diego pediu que o texto vá até as
	 * laterais do container ("a largura do texto deve ir até as
	 * laterais, aí onde tá laranja"). O 70% era herança do meu
	 * primeiro corte, quando o texto era de uma coluna só — em duas
	 * colunas ele fica estreito e as linhas ficam curtas demais. */
	.expositores-espera__texto {
		columns: 2;
		column-gap: 40px;       /* medido */
	}

	.expositores-galeria {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: clamp(170px, 15vw, 260px);
		gap: var(--esp-12);
	}
	/* reseta o span do tablet antes de reatribuir */
	.expositores-galeria__foto:nth-child(5),
	.expositores-galeria__foto:nth-child(8) { grid-column: auto; }

	.expositores-galeria__foto:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.expositores-galeria__foto:nth-child(2),
	.expositores-galeria__foto:nth-child(3),
	.expositores-galeria__foto:nth-child(4),
	.expositores-galeria__foto:nth-child(5),
	.expositores-galeria__foto:nth-child(6),
	.expositores-galeria__foto:nth-child(7) { grid-column: span 2; }
	/* largura no invólucro, não no CTA — o padding dele é percentual e
	 * resolve contra o continente (ver page-atracoes.php / D77) */
	.expositores-cta__caixa    { width: 70%; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.expositores-galeria__foto img { transition: none; }
	.expositores-galeria__foto:hover img { transform: none; }
}


/* ====================================================================
 * PÁGINA COMUNICAÇÃO (post 170 do validado)
 * ==================================================================== */

.comunicacao-noticias,
.comunicacao-videos,
.comunicacao-imprensa {
	position: relative;
	padding-block: var(--ritmo-secao);
}

.comunicacao-noticias  { background-color: var(--cor-fundo-creme); }
.comunicacao-videos    { background-color: var(--cor-fundo-pessego-claro); }
/* âncora #imprensa — mesma regra das outras duas (D89) */
.comunicacao-imprensa {
	background-color: var(--cor-fundo-creme);
	scroll-margin-top: calc(var(--altura-cabecalho, 80px) + 24px);
}

.comunicacao-noticias__conteudo,
.comunicacao-videos__conteudo,
.comunicacao-imprensa__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* D84 — CORRIGE erro meu. Eu tinha centralizado os TRÊS cabeçalhos; o
 * dado diz outra coisa, e o Diego apontou ("faça alinhado à
 * esquerda"). Medido, container a container:
 *   e06aa99 (Notícias) .... flex-start no desktop, center no tablet
 *   4f33743 (Vídeos) ...... flex-start no desktop, center no tablet
 *   b0da4d9 (Imprensa) .... center, e só esse
 * É a terceira vez que centralizo algo sem o dado mandar (E10, E29).
 *
 * Centralizado a partir do tablet pra baixo, como o dado manda —
 * abaixo de 1025px os títulos têm `align_tablet: center`. */
.comunicacao-noticias__cabecalho,
.comunicacao-videos__cabecalho,
.comunicacao-imprensa__cabecalho { text-align: center; }

.comunicacao-noticias__cabecalho .eyebrow,
.comunicacao-videos__cabecalho .eyebrow { justify-content: center; }

.comunicacao-noticias__cabecalho .estrelas,
.comunicacao-videos__cabecalho .estrelas,
.comunicacao-imprensa__cabecalho .estrelas { margin-inline: auto; }

/* ------------------------------------------------------------------
 * Últimas Notícias — grade de posts
 * Medido no loop-grid: 2 colunas no desktop, 1 no tablet e mobile,
 * gap 20px, 50px de distância do cabeçalho (30 no mobile).
 * ------------------------------------------------------------------ */

.comunicacao-noticias__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-20);
	margin-top: var(--esp-30);
}

/* ------------------------------------------------------------------
 * Card de notícia — template 1344 do validado.
 * Fundo creme, borda 1px vinho-principal a 12%, raio 6px, padding
 * 33/37 (17/19 no tablet, 20 no mobile). O card INTEIRO é link pro
 * post, e o fundo vira pêssego-claro no hover (background_hover_color
 * medido — não é invenção minha).
 * ------------------------------------------------------------------ */

.noticia-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--esp-20);
	border: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 12%, transparent);
	border-radius: var(--raio-6);
	background-color: var(--cor-fundo-creme);
	text-decoration: none;
	transition: background-color .4s ease, transform .4s ease, box-shadow .4s ease;
}

.noticia-card:hover,
.noticia-card:focus-visible {
	background-color: var(--cor-fundo-pessego-claro);   /* medido */
	transform: translateY(-6px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--cor-vinho-principal) 18%, transparent);
}

.noticia-card:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

.noticia-card__data {
	margin: 0 0 var(--esp-12);
	font-size: 11px;            /* medido */
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cor-neutra-pedra);
}

.noticia-card__titulo {
	margin: 0 0 var(--esp-12);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 24px;            /* 26 no desktop, ver media query */
	line-height: 1.2;
	color: var(--cor-vinho-profundo);
}

.noticia-card__resumo {
	margin: 0 0 var(--esp-20);
	font-size: 14px;            /* medido */
	line-height: 1.6;
	color: var(--cor-neutra-pedra);
}

/* "LER MAIS →" — é um heading no validado, aqui é o rodapé do card.
 * `margin-top:auto` cola no fim, então cards de alturas diferentes
 * alinham o link na mesma linha de base. */
.noticia-card__mais {
	margin-top: auto;
	font-size: 12px;            /* 13 no tablet, medido */
	font-weight: var(--peso-medio);
	letter-spacing: 1px;
	color: var(--cor-vinho-principal);
}

/* botão "VER todas" — abaixo das notícias e CENTRALIZADO.
 * ⚠️ Diverge do validado por decisão do Diego: o dado mede
 * `align: left` no desktop (e center só no mobile). Ele pediu
 * centralizado ("botão ver todas abaixo de notícias, alinhado ao
 * centro"). */
.comunicacao-noticias__acao {
	margin-top: clamp(30px, 4vw, 50px);
	text-align: center;
}

/* ------------------------------------------------------------------
 * Vídeos destacados
 * Medido: 3 colunas no desktop, 2 no tablet, gap 40 no tablet,
 * 50px de distância do cabeçalho (30 no mobile).
 * ------------------------------------------------------------------ */

.comunicacao-videos__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-20);
	margin-top: var(--esp-30);
}

.comunicacao-video {
	overflow: hidden;
	border-radius: var(--raio-6);
	background-color: var(--cor-vinho-profundo);
	aspect-ratio: 16 / 9;       /* proporção padrão do widget de vídeo */
	line-height: 0;
}

.comunicacao-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------
 * Área de Imprensa
 * ------------------------------------------------------------------ */

/* D84 — o Diego mediu a div em 1440px e achou larga demais: "pode
 * deixar o conteúdo (títulos e box de credenciamento e download) com
 * uns 850px de largura, mais parecido com o que havia no antigo".
 * A caixa entra aqui, no wrapper da seção, pra valer pro cabeçalho e
 * pelas duas caixas de uma vez. */
.comunicacao-imprensa__conteudo > * {
	max-width: 850px;
	margin-inline: auto;
}

.comunicacao-imprensa__texto {
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

/* caixa de download: título à esquerda e botão à direita
 * (space-between), empilhados no mobile. Fundo creme-suave, borda 1px
 * vinho a 12%, raio 6, padding 2%/4%. */
.comunicacao-caixa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--esp-20);
	margin-top: clamp(40px, 6vw, 60px);
	padding: 12px 13px;         /* medido no mobile */
	border: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 12%, transparent);
	border-radius: var(--raio-6);
	background-color: var(--cor-fundo-creme-suave);
	text-align: center;
}

.comunicacao-caixa__titulo {
	margin: 0;
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: clamp(20px, 3vw, 26px);
	color: var(--cor-vinho-profundo);
}

/* credenciamento: fundo pêssego-claro com a ilustração à direita.
 * Posição medida: x 102%, y 126px, sem repetir, opacidade cheia.
 * No mobile o x vai a 0 (medido), então a arte encosta à esquerda —
 * por isso ela some abaixo do tablet, senão fica atrás do texto. */
.comunicacao-credenciamento {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--esp-20);
	margin-top: var(--esp-20);
	padding: 8%;                /* medido no mobile */
	border: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 12%, transparent);
	border-radius: var(--raio-6);
	background-color: var(--cor-fundo-pessego-claro);
}

.comunicacao-credenciamento__titulo {
	margin: 0;
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: clamp(24px, 4vw, 32px);
	color: var(--cor-vinho-principal);
}

.comunicacao-credenciamento__texto {
	margin: 0;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

@media (min-width: 768px) {
	.comunicacao-noticias__grade,
	.comunicacao-videos__grade { margin-top: 50px; }

	.comunicacao-videos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-40); }

	.noticia-card { padding: 17px 19px; }
	.noticia-card__mais { font-size: 13px; }

	.comunicacao-caixa {
		flex-direction: row;
		justify-content: space-between;
		padding: 17px 19px;
		text-align: left;
	}

	.comunicacao-credenciamento {
		padding: 5% 5% 6%;
		background-image: url('../../../../uploads/2026/06/png-imprensa.png');
		background-repeat: no-repeat;
		background-position: 102% 126px;
	}
}

@media (min-width: 1025px) {
	/* Só o cabeçalho de Notícias fica à esquerda no desktop.
	 *
	 * O dado mede `flex-start` também no de Vídeos (container
	 * 4f33743), mas o Diego pediu ele CENTRALIZADO — D85. Divergência
	 * do validado por decisão dele, não engano meu: a correção do D84
	 * (que trouxe os dois pra esquerda) estava certa pelo dado, e ele
	 * revisou só o de Vídeos depois de ver renderizado.
	 *
	 * Resultado: dos três cabeçalhos da página, Notícias é o único à
	 * esquerda; Vídeos e Área de Imprensa são centralizados. */
	.comunicacao-noticias__cabecalho { text-align: left; }
	.comunicacao-noticias__cabecalho .eyebrow { justify-content: flex-start; }
	.comunicacao-noticias__cabecalho .estrelas { margin-inline: 0; }

	.comunicacao-noticias__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.comunicacao-videos__grade   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-20); }

	.noticia-card { padding: 33px 37px; }
	.noticia-card__titulo { font-size: 26px; }

	.comunicacao-caixa { padding: 2% 4%; }
}

@media (prefers-reduced-motion: reduce) {
	.noticia-card { transition: none; }
	.noticia-card:hover { transform: none; }
}


/* ====================================================================
 * POST INDIVIDUAL (template 1418 do validado, tipo single-post)
 * ==================================================================== */

.post-corpo,
.post-outras {
	position: relative;
	padding-block: var(--ritmo-secao);
}

.post-corpo   { background-color: var(--cor-fundo-creme); }
.post-outras  { background-color: var(--cor-fundo-creme-suave); }

/* 960px é `boxed_width` medido no container do conteúdo (53cb01a) —
 * não é escolha de tipografia minha, é o valor do validado. */
.post-corpo__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: 960px;
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.post-corpo__conteudo .estrelas { margin-inline: auto; }

.post-corpo__capa {
	margin: 0 0 clamp(24px, 4vw, 40px);
	overflow: hidden;
	border-radius: var(--raio-6);
	background-color: var(--cor-fundo-nude);
}

.post-corpo__capa img {
	display: block;
	width: 100%;                /* medido: width 100%, image_size full */
	height: auto;
}

/* corpo do texto: justificado e 16px, os dois medidos no
 * theme-post-content. */
.post-corpo__texto {
	font-size: 16px;
	line-height: 1.8;
	text-align: justify;
	text-wrap: pretty;
	color: var(--cor-neutra-pedra);
}

.post-corpo__texto p { margin: 0 0 var(--esp-20); }
.post-corpo__texto p:last-child { margin-bottom: 0; }

/* parágrafo que só tem espaço em branco: os posts do validado usam
 * linhas vazias como respiro, e o wpautop transforma cada uma num
 * <p> vazio. Sem isto viram buracos grandes no meio do texto. */
.post-corpo__texto p:empty { display: none; }

.post-corpo__texto h2,
.post-corpo__texto h3,
.post-corpo__texto h4 {
	margin: clamp(28px, 4vw, 40px) 0 var(--esp-12);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	line-height: 1.25;
	text-align: left;
	color: var(--cor-vinho-profundo);
}

.post-corpo__texto h2 { font-size: clamp(24px, 3.4vw, 32px); }
.post-corpo__texto h3 { font-size: clamp(21px, 3vw, 26px); }
.post-corpo__texto h4 { font-size: clamp(18px, 2.6vw, 21px); }

.post-corpo__texto a {
	color: var(--cor-vinho-principal);
	text-underline-offset: 3px;
}

.post-corpo__texto a:hover,
.post-corpo__texto a:focus-visible { color: var(--cor-vinho-escuro); }

.post-corpo__texto img,
.post-corpo__texto iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--raio-6);
}

.post-corpo__texto figure { margin: clamp(24px, 4vw, 40px) 0; }

.post-corpo__texto figcaption {
	margin-top: var(--esp-8);
	font-size: 13px;
	text-align: center;
	color: var(--cor-neutra-titulo);
}

.post-corpo__texto ul,
.post-corpo__texto ol {
	margin: 0 0 var(--esp-20);
	padding-left: var(--esp-24);
	text-align: left;
}

.post-corpo__texto li { margin-bottom: var(--esp-8); }

.post-corpo__texto blockquote {
	margin: clamp(24px, 4vw, 40px) 0;
	padding-left: var(--esp-20);
	border-left: 3px solid var(--cor-dourado);
	font-style: italic;
	text-align: left;
	color: var(--cor-vinho-profundo);
}

/* ------------------------------------------------------------------
 * "Continue lendo / Outras Notícias"
 * Medido: cabeçalho centralizado (flex_align_items center), 3 colunas
 * no loop-grid, 60px de gap entre os blocos da seção, e o botão "VER
 * todas" com borda 2px vinho e pílula — que é o `.btn--secundario`
 * que o tema já tem.
 * ------------------------------------------------------------------ */

.post-outras__conteudo {
	position: relative;
	z-index: 2;
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.post-outras__cabecalho { text-align: center; }
.post-outras__cabecalho .eyebrow { justify-content: center; }
.post-outras__cabecalho .estrelas { margin-inline: auto; }

.post-outras__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-20);
	margin-top: var(--esp-30);
}

/* o card é o mesmo da Comunicação (template 1344 nos dois lugares).
 * Aqui o fundo da seção é creme-suave, então o card mantém o creme e
 * continua se destacando. */

.post-outras__acao {
	margin-top: clamp(30px, 4vw, 50px);
	text-align: center;
}

@media (min-width: 768px) {
	.post-outras__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 50px; }
}

@media (min-width: 1025px) {
	.post-outras__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ====================================================================
 * PÁGINA NOTÍCIAS (post 1329 do validado)
 * A grade e o card são os mesmos da Comunicação e do post individual —
 * template 1344 do validado nos três lugares. Aqui só muda que a lista
 * é completa e paginada.
 * ==================================================================== */

.noticias-lista {
	position: relative;
	background-color: var(--cor-fundo-creme);
	padding-block: var(--ritmo-secao);
}

.noticias-lista__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.noticias-lista__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-20);
}

.noticias-lista__vazio {
	margin: 0;
	text-align: center;
	color: var(--cor-neutra-pedra);
}

/* paginação — rótulos "Anterior"/"Próximo" medidos no loop-grid.
 * Visual na linguagem do `.btn--secundario`, que é o que a página usa
 * nos outros botões de navegação. */
.noticias-paginacao {
	margin-top: clamp(30px, 4vw, 50px);
}

.noticias-paginacao ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--esp-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.noticias-paginacao a,
.noticias-paginacao span {
	display: block;
	min-width: 44px;
	padding: 10px var(--esp-16);
	border: 2px solid var(--cor-vinho-principal);
	border-radius: var(--raio-pilula);
	background-color: var(--cor-fundo-creme);
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	color: var(--cor-vinho-principal);
	transition: background-color .3s ease, color .3s ease;
}

.noticias-paginacao a:hover,
.noticias-paginacao a:focus-visible,
.noticias-paginacao .current {
	background-color: var(--cor-vinho-principal);
	color: var(--cor-fundo-creme);
}

.noticias-paginacao a:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

/* reticências entre páginas: não é botão, não leva pílula */
.noticias-paginacao .dots {
	border-color: transparent;
	background: none;
	color: var(--cor-neutra-pedra);
}

@media (min-width: 1025px) {
	.noticias-lista__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.noticias-paginacao a { transition: none; }
}


/* ====================================================================
 * PÁGINA PROGRAMAÇÃO (post 910 do validado)
 *
 * ⚠️ SOBRE AS CORES. Os dois blocos vêm de code snippets do validado, e
 * o CSS deles foi escrito à mão, fora do kit: #7a1f2b, #7a3b3b,
 * #d9c7c0, #b88a4a, #3a2a26, #f1e2d6. Nenhuma existe no Design System,
 * então usei o token mais próximo de cada uma — é o que a guarda do DS
 * exige e o que o resto do tema faz. O mapa está em cada regra e no
 * D88; se o Diego quiser os valores exatos do snippet, eles viram
 * literais aprovados e a guarda passa a aceitar.
 *
 *   #7a1f2b / #7a3b3b → --cor-vinho-titulo-hero  (#742E38)
 *   #b88a4a           → --cor-dourado            (#C5A64A)
 *   #3a2a26           → --cor-neutra-cacau       (#4F4039)
 *   #d9c7c0 / #f1e2d6 → --cor-fundo-nude         (#EDDED9)
 *   #ffffff           → --cor-fundo-creme        (#FFFCF8)
 *   rgba(255,243,238,1) → --cor-fundo-pessego-claro — essa É do kit
 * ==================================================================== */

/* ------------------------------------------------------------------
 * Barra de atalhos pros dias — [nav_datas_eventos_v2]
 * ------------------------------------------------------------------ */

/* D89 — a barra gruda embaixo do cabeçalho ao rolar (pedido do Diego).
 * O `top` vem de `--altura-cabecalho`, que o main.js mede no próprio
 * cabeçalho e mantém atualizada — o valor muda por breakpoint, então
 * um número fixo aqui erraria em alguma largura. O fallback de 80px só
 * vale no instante entre o CSS aplicar e o JS rodar.
 *
 * z-index 40: abaixo do cabeçalho (50) e acima do conteúdo. */
.prog-datas {
	position: sticky;
	top: var(--altura-cabecalho, 80px);
	z-index: 40;
	background-color: var(--cor-fundo-creme);
	padding-block: var(--esp-20);
	border-bottom: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 10%, transparent);
}

.prog-datas__conteudo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;                   /* .5rem medido */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* O trilho dos dias. No desktop se comporta como antes — os itens
 * eram filhos diretos do `__conteudo` e ficavam numa linha centralizada
 * junto do rótulo. */
.prog-datas__trilho {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* D121 — O DIA ESCOLHIDO FICA MARCADO.
 *
 * Pedido do Diego: *"ao clicar em uma data, ela deve ficar
 * selecionada.. em todos os displays"*. O `aria-current` é o atributo
 * que já existe pra isso — leitor de tela anuncia junto, sem classe
 * inventada. Quem escreve é o `main.js`, que também acompanha a
 * rolagem: descer até outro dia troca a marca sozinho. */
.prog-datas__item[aria-current="true"] {
	background-color: var(--cor-vinho-titulo-hero);
	border-color: var(--cor-vinho-titulo-hero);
	color: var(--cor-fundo-creme);
}

.prog-datas__rotulo {
	margin-right: 12px;         /* .75rem medido */
	font-family: var(--fonte-text);
	font-size: 11px;            /* .7rem medido */
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cor-vinho-titulo-hero);
}

.prog-datas__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;                   /* .35rem medido */
	padding: 7px 18px;          /* .45rem 1.1rem medido */
	border: 1px solid var(--cor-fundo-nude);
	border-radius: var(--raio-pilula);
	text-decoration: none;
	color: var(--cor-vinho-titulo-hero);
	line-height: 1.8em;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.prog-datas__num {
	font-family: var(--fonte-display);
	font-size: 24px;            /* 1.51rem medido */
	font-weight: var(--peso-forte);
}

.prog-datas__mes {
	font-size: 10px;            /* .65rem medido */
	letter-spacing: .12em;
	text-transform: uppercase;
}

.prog-datas__item:hover,
.prog-datas__item:focus-visible {
	background-color: var(--cor-vinho-titulo-hero);
	border-color: var(--cor-vinho-titulo-hero);
	color: var(--cor-fundo-creme);
}

.prog-datas__item:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

/* D121 — NO CELULAR A BARRA ROLA DE LADO, EM VEZ DE EMPILHAR.
 *
 * Ela media 172px de altura em 390px de tela: quebrava em duas linhas
 * e comia metade da primeira dobra. O Diego apontou e sugeriu
 * "dropdown, rolar para o lado, algo assim".
 *
 * Rolar de lado é o melhor dos três aqui: os dias continuam TODOS à
 * vista e legíveis de relance, sem um toque a mais pra abrir nada —
 * que é o que um dropdown cobraria. */
@media (max-width: 767px) {
	.prog-datas { padding-block: var(--esp-12); }

	/* O `__conteudo` vira coluna: rótulo em cima, trilho embaixo.
	 *
	 * ERRO CORRIGIDO AQUI: primeiro eu tinha deixado tudo numa fila só
	 * com `flex-basis:100%` no rótulo. Isso quebra linha em `wrap`, mas
	 * o contêiner virou `nowrap` — então o rótulo só encolheu, foi para
	 * 39px de largura e saiu da tela. */
	.prog-datas__conteudo {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 6px;
		padding-inline: 0;
	}

	.prog-datas__rotulo {
		margin: 0 0 0 var(--respiro-container);
		text-align: left;
	}

	.prog-datas__trilho {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		/* o respiro lateral vira padding do próprio trilho: assim o
		 * primeiro e o último item não encostam na borda da tela */
		padding-inline: var(--respiro-container);
		scroll-padding-inline: var(--respiro-container);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.prog-datas__trilho::-webkit-scrollbar { display: none; }

	.prog-datas__item {
		flex: none;
		scroll-snap-align: start;
		gap: 4px;
		padding: 5px 14px;
		line-height: 1.5em;
	}

	.prog-datas__num { font-size: 19px; }
	.prog-datas__mes { font-size: 9px; }
}

/* ------------------------------------------------------------------
 * "Eventos em Destaque" — loop-grid de 4 colunas, card do template 242
 * ------------------------------------------------------------------ */

.prog-destaques {
	position: relative;
	background-color: var(--cor-fundo-creme);
	padding-block: var(--ritmo-secao);
}

.prog-destaques__conteudo,
.prog-completa-secao__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* medido: `align: center` nos dois títulos desta página */
.prog-destaques__cabecalho,
.prog-completa-secao__cabecalho {
	text-align: center;
	margin-bottom: clamp(30px, 5vw, 50px);
}

.prog-destaques__cabecalho .eyebrow,
.prog-completa-secao__cabecalho .eyebrow { justify-content: center; }

.prog-destaques__cabecalho .estrelas,
.prog-completa-secao__cabecalho .estrelas { margin-inline: auto; }

.prog-destaques__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-20);
}

/* card de evento em destaque (template 242) */
.evento-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--raio-6);
}

.evento-card__foto {
	position: relative;
	height: 240px;              /* medido: 220 desktop / 240 mobile */
	background-color: var(--cor-fundo-nude);
}

.evento-card__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;          /* medido */
}

/* tarja de data: vinho-profundo a 96%, raio 4, padding 8/14 — medidos */
.evento-card__data {
	position: absolute;
	left: var(--esp-12);
	bottom: var(--esp-12);
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	border-radius: var(--raio-4);
	background-color: color-mix(in srgb, var(--cor-vinho-profundo) 96%, transparent);
	color: var(--cor-fundo-creme);
}

.evento-card__dia-num {
	font-size: 22px;            /* medido */
	line-height: 22px;
}

.evento-card__dia-mes {
	font-size: 10px;            /* medido */
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* rodapé creme, borda vinho a 10%, raio só embaixo — medidos */
.evento-card__info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--esp-8);
	padding: var(--esp-16);
	border: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 10%, transparent);
	border-radius: 0 0 var(--raio-6) var(--raio-6);
	background-color: var(--cor-fundo-creme);
}

.evento-card__linha {
	display: flex;
	align-items: center;
	gap: var(--esp-8);
	margin: 0;
	font-size: 12px;            /* medido */
	line-height: 1;
	text-transform: uppercase;
	color: var(--cor-neutra-pedra);
}

.evento-card__ponto { color: var(--cor-dourado); }        /* globals: accent */
.evento-card__hora  { color: var(--cor-vinho-principal); } /* medido */

.evento-card__nome {
	margin: 0;
	font-size: 18px;            /* medido */
	line-height: 20px;
	color: var(--cor-vinho-profundo);
}

/* ------------------------------------------------------------------
 * Programação completa — [lista_eventos_agrupados_v2]
 * ------------------------------------------------------------------ */

.prog-completa-secao {
	position: relative;
	background-color: var(--cor-fundo-pessego-claro);
	padding-block: var(--ritmo-secao);
}

.prog-completa {
	display: flex;
	flex-direction: column;
	gap: 32px;                  /* 2rem medido */
}

.prog-dia {
	overflow: hidden;
	border-radius: 16px;        /* medido */
	background-color: var(--cor-fundo-creme);
	box-shadow: 0 12px 40px color-mix(in srgb, var(--cor-vinho-titulo-hero) 8%, transparent);
	/* D122 — a âncora para abaixo do cabeçalho E da barra grudada.
	 *
	 * Os 100px daqui eram CHUTE, e era o que fazia a rolagem parar no
	 * lugar errado: o cabeçalho do dia seguinte já aparecia, e a marca
	 * saltava pra ele — foi o que o Diego viu, clicando no 13 e
	 * ativando o 14.
	 *
	 * `--altura-datas` é a altura REAL, medida pelo `main.js`. Os 8px
	 * são só um respiro pra o cartão não encostar na barra.
	 *
	 * ⚠️ Havia DUAS regras `.prog-dia` com `scroll-margin-top` — esta e
	 * a que eu escrevi no D121. Mesma especificidade, e esta vinha
	 * depois: vencia calada, e a minha nunca valeu. Agora é uma só. */
	scroll-margin-top: calc(var(--altura-cabecalho, 80px) + var(--altura-datas, 86px) + 8px);
}

/* número à esquerda, mês em cima e dia da semana embaixo — medido */
.prog-dia__cabecalho {
	display: grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 13px;           /* .8rem medido */
	row-gap: 2px;
	align-items: baseline;
	padding: 20px 20px;         /* 1.2rem 1.25rem medido no mobile */
	background-color: var(--cor-fundo-pessego-claro);
}

.prog-dia__num {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	font-family: var(--fonte-display);
	font-size: 38px;            /* 2.4rem no mobile, 3rem no desktop */
	line-height: 1;
	color: var(--cor-vinho-titulo-hero);
}

.prog-dia__mes {
	grid-column: 2;
	grid-row: 1;
	font-size: 11px;            /* .7rem medido */
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cor-dourado);
}

.prog-dia__semana {
	grid-column: 2;
	grid-row: 2;
	font-family: var(--fonte-display);
	font-size: 19px;            /* 1.2rem no mobile, 1.5rem no desktop */
	line-height: 1;
	color: var(--cor-neutra-cacau);
}

.prog-dia__lista {
	display: flex;
	flex-direction: column;
}

.prog-linha {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;                  /* .6rem no mobile, 1.5rem no desktop */
	padding: 14px 20px;         /* .9rem 1.25rem medido no mobile */
	border-top: 1px solid var(--cor-fundo-nude);
	background-color: var(--cor-fundo-creme);
}

.prog-linha__hora {
	flex-shrink: 0;
	min-width: 5ch;             /* medido */
	font-family: var(--fonte-display);
	font-size: 22px;            /* 1.4rem medido */
	color: var(--cor-vinho-titulo-hero);
}

.prog-linha__titulo {
	flex: 1;
	font-family: var(--fonte-display);
	font-size: 17px;            /* 1.05rem no mobile, 1.2rem no desktop */
	color: var(--cor-neutra-cacau);
}

/* a linha de evento em destaque leva a foto; no mobile ela vai pro fim
 * e ocupa a largura toda — os dois medidos */
.prog-linha__img {
	order: 3;
	width: 100%;
	margin-top: 8px;
}

.prog-linha__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--raio-6);
}

.prog-completa-secao__vazio {
	margin: 0;
	text-align: center;
	color: var(--cor-neutra-pedra);
}

@media (min-width: 768px) {
	.prog-destaques__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.evento-card__foto     { height: 220px; }   /* medido no desktop */

	.prog-dia__cabecalho   { padding: 24px 32px; }  /* 1.5rem 2rem medido */
	.prog-dia__num         { font-size: 48px; }     /* 3rem medido */
	.prog-dia__semana      { font-size: 24px; }     /* 1.5rem medido */

	.prog-linha            { gap: 24px; padding: 16px 32px; flex-wrap: nowrap; }
	.prog-linha__titulo    { font-size: 19px; }     /* 1.2rem medido */

	.prog-linha__img       { order: 0; width: 120px; margin: 0 0 0 auto; } /* medido */
}

@media (min-width: 1025px) {
	.prog-destaques__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* columns: 4 medido */
}

@media (prefers-reduced-motion: reduce) {
	.prog-datas__item { transition: none; }
}


/* ====================================================================
 * PÁGINA CEC (post 1980 do validado)
 * ==================================================================== */

/* D93: .cec-sobre não tem mais letra decorativa (o Diego pediu pra
 * tirar), mas segue `relative` — é o que ancora o conteúdo em z-index. */
.cec-sobre,
.cec-diretoria {
	position: relative;
	padding-block: var(--ritmo-secao);
}

.cec-sobre      { background-color: var(--cor-fundo-creme); }
.cec-diretoria  { background-color: var(--cor-fundo-pessego-claro); }

.cec-sobre__conteudo,
.cec-diretoria__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

/* ------------------------------------------------------------------
 * Sobre o CEC — foto emoldurada à esquerda, logo e texto à direita.
 * Medido: linha no desktop, coluna no tablet, gap 36px.
 * ------------------------------------------------------------------ */

.cec-sobre__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;                  /* medido */
}

/* a moldura é a mesma da foto do "Sobre" na Início (D50): borda 1px
 * pêssego, raio 4, padding 12 — todos medidos aqui também.
 *
 * D91 — a foto sobrava fundo dentro da moldura, e o Diego pediu ela
 * "full no box, centralizada, aparecendo em todas as resoluções, como
 * na imagem do sobre a nossa festa da home".
 *
 * CAUSA: o validado mede `min-height: 56vh` na foto. Altura em vh não
 * conversa com a largura da coluna — em tela larga e baixa a moldura
 * (esticada pelo `align-items: stretch` da linha) ficava mais alta que
 * os 56vh e sobrava uma faixa de fundo embaixo; em outra proporção de
 * tela sobrava do outro jeito. Nenhum valor de vh resolve isso, porque
 * o problema é a unidade.
 *
 * CORREÇÃO, igual à da home: proporção FIXA na moldura + a foto como
 * <img> com `object-fit: cover` centralizado. Aí ela preenche a caixa
 * inteira em qualquer resolução, sem sobra e sem distorcer. O
 * `align-self: auto` no desktop é o mesmo detalhe do D49 — `stretch`
 * força uma altura que vence o `aspect-ratio`. */
.cec-sobre__moldura {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--cor-fundo-pessego);
	border-radius: var(--raio-4);
	box-sizing: border-box;
	/* D92 — 5/4 em vez de 4/3: o Diego pediu "a altura um pouco maior".
	 * A foto continua preenchendo a caixa inteira (object-fit cover),
	 * só corta um pouco mais das laterais. É o único valor a mexer se
	 * ele quiser mais ou menos altura. */
	aspect-ratio: 5 / 4;
	background-color: var(--cor-fundo-creme);
}

.cec-sobre__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--raio-4);
	background-color: var(--cor-fundo-nude);
}

.cec-sobre__texto {
	display: flex;
	flex-direction: column;
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

.cec-sobre__texto p { margin: 0 0 var(--esp-20); }
.cec-sobre__texto p:last-child { margin-bottom: 0; }
.cec-sobre__texto b { color: var(--cor-vinho-profundo); }

/* logo a 34% da coluna, alinhada ao início — medidos */
.cec-sobre__logo {
	width: 34%;
	min-width: 160px;
	height: auto;
	margin-bottom: var(--esp-24);
}

/* ------------------------------------------------------------------
 * Diretoria — tudo centralizado (flex_align_items center medido),
 * padding 10%/5% e 60px entre os blocos.
 * ------------------------------------------------------------------ */

.cec-diretoria__cabecalho {
	text-align: center;
	margin-bottom: clamp(30px, 5vw, 60px);
}

.cec-diretoria__cabecalho .eyebrow { justify-content: center; }
.cec-diretoria__cabecalho .estrelas { margin-inline: auto; }

/* D91 — a diretoria em colunas, cargo em cor.
 * Cada entrada é um bloco: título do cargo em vinho-principal, caixa
 * alta e miúdo; nome embaixo, no corpo do texto. Assim a leitura é por
 * cargo, não por parágrafo corrido. */
.cec-diretoria__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 32px);
	max-width: 900px;
	margin: 0 auto clamp(30px, 5vw, 60px);
	text-align: center;
}

.cec-cargo p { margin: 0; }

.cec-cargo__titulo {
	margin-bottom: var(--esp-8) !important;
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cor-vinho-principal);
}

.cec-cargo__nome {
	font-family: var(--fonte-display);
	font-size: 18px;
	line-height: 1.35;
	color: var(--cor-vinho-profundo);
}

/* o conselho tem nomes longos: o nome volta pro corpo de texto */
.cec-diretoria__grade--conselho .cec-cargo__nome {
	font-family: var(--fonte-text);
	font-size: 15px;
	line-height: 1.6;
	color: var(--cor-neutra-pedra);
}

.cec-diretoria__conselho { margin-bottom: clamp(30px, 5vw, 60px); }
.cec-diretoria__grade--conselho { margin-bottom: 0; }

.cec-diretoria__subtitulo {
	margin: 0 0 var(--esp-24);
	text-align: center;
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--cor-neutra-cacau);
}

.cec-diretoria__nota {
	max-width: 720px;
	margin: 0 auto clamp(30px, 5vw, 60px);
	text-align: center;
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

.cec-diretoria__acao { text-align: center; }

@media (min-width: 768px) {
	.cec-diretoria__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	/* D92 — `flex-start`: o Diego pediu a foto alinhada ao TOPO da
	 * seção, na mesma linha em que o logo do CEC começa. Antes estava
	 * `center` e ela flutuava no meio da coluna de texto.
	 *
	 * Continua não sendo `stretch`: stretch força uma altura que vence
	 * o aspect-ratio da moldura (mesmo detalhe do D49 na home). */
	.cec-sobre__grid      { flex-direction: row; align-items: flex-start; }
	.cec-sobre__moldura   { flex: 0 0 42.821%; align-self: auto; }   /* largura medida */
	.cec-sobre__texto     { flex: 1; }
	.cec-diretoria__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ====================================================================
 * PÁGINA A FESTA (post 181 do validado — a maior do site)
 * ==================================================================== */

.festa-origem,
.festa-linha,
.festa-soberanas,
.festa-memoria {
	position: relative;
	padding-block: var(--ritmo-secao);
}

.festa-origem     { background-color: var(--cor-fundo-creme); }
.festa-linha      { background-color: var(--cor-fundo-pessego-claro); }
.festa-soberanas  { background-color: var(--cor-fundo-creme); }
.festa-memoria    { background-color: var(--cor-fundo-creme-suave); }

.festa-origem__conteudo,
.festa-linha__conteudo,
.festa-soberanas__conteudo,
.festa-memoria__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.festa-origem__cabecalho,
.festa-linha__cabecalho,
.festa-soberanas__cabecalho,
.festa-memoria__cabecalho {
	text-align: center;
	margin-bottom: clamp(30px, 5vw, 60px);
}

.festa-origem__cabecalho .eyebrow,
.festa-linha__cabecalho .eyebrow,
.festa-soberanas__cabecalho .eyebrow,
.festa-memoria__cabecalho .eyebrow { justify-content: center; }

.festa-origem__cabecalho .estrelas,
.festa-linha__cabecalho .estrelas,
.festa-soberanas__cabecalho .estrelas,
.festa-memoria__cabecalho .estrelas { margin-inline: auto; }

.festa-soberanas__texto,
.festa-memoria__texto {
	max-width: 760px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

/* ------------------------------------------------------------------
 * MOLDURA DE FOTO — "Como tudo começou" e "Nossas Soberanas"
 * D97: as duas seções são uma linha de foto emoldurada + texto, com a
 * MESMA moldura da Cec e da Início: 42,8% de largura, borda 1px
 * pêssego, raio 4, padding 12 (todos medidos aqui também).
 *
 * A foto vem de `background_overlay_image` no validado, com
 * `min-height` em vh — a mesma unidade que deixava sobra na Cec (D91).
 * Aqui já nasce com proporção fixa + `object-fit: cover`, que é a
 * solução que ele aprovou lá.
 * ------------------------------------------------------------------ */

.festa-moldura {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--cor-fundo-pessego);
	border-radius: var(--raio-4);
	box-sizing: border-box;
	background-color: var(--cor-fundo-creme);
	aspect-ratio: 4 / 3;        /* 1-Fenachamp.jpg é 960×691 */
}

/* a foto das soberanas é retrato (1439×2000) */
.festa-moldura--retrato { aspect-ratio: 3 / 4; }

.festa-moldura__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--raio-4);
	background-color: var(--cor-fundo-nude);
}

/* ------------------------------------------------------------------
 * "Como tudo começou"
 * ------------------------------------------------------------------ */

.festa-origem__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;                  /* medido no container 1a10026 */
	margin-bottom: clamp(24px, 4vw, 40px);
}

.festa-origem__texto,
.festa-origem__continuacao {
	font-size: 16px;
	line-height: 1.8;
	text-align: justify;
	text-wrap: pretty;
	color: var(--cor-neutra-pedra);
}

.festa-origem__texto p,
.festa-origem__continuacao p { margin: 0 0 var(--esp-20); }
.festa-origem__texto p:last-child,
.festa-origem__continuacao p:last-child { margin-bottom: 0; }
.festa-origem__texto b { color: var(--cor-vinho-profundo); }

/* o cabeçalho dentro da coluna de texto fica à esquerda, junto do
 * parágrafo — não centralizado como os das outras seções.
 *
 * D100: o título precisa de `text-align: left` EXPLÍCITO. A coluna é
 * `justify` (por causa dos parágrafos), e o h2 herdava isso: como ele
 * quebra em duas linhas, a primeira era esticada de ponta a ponta e
 * ficava com vãos enormes entre as palavras. Justificar serve pra
 * corpo de texto, não pra título. */
.festa-origem__texto .eyebrow,
.festa-origem__texto .titulo-prata { text-align: left; }
.festa-origem__texto .estrelas { margin-inline: 0; }
.festa-origem__texto .titulo-prata { margin-bottom: var(--esp-8); }

/* ------------------------------------------------------------------
 * FICHA (Prefeito / Presidente / Rainha / Princesas)
 * D97: cada campo num bloco próprio, com fundo e borda — pedido do
 * Diego. Usada na seção Soberanas e em cada card de edição.
 * ------------------------------------------------------------------ */

/* D98 — SEM CAIXA. O Diego pediu "apenas texto, mas com cor nas
 * fontes". O rótulo fica em vinho-principal e o nome no corpo do
 * texto, na mesma linha; uma quebra separa prefeitura de corte, que é
 * como o validado traz (dois parágrafos). */
.festa-ficha {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--cor-neutra-pedra);
}

.festa-ficha p { margin: 0; }

.festa-ficha span {
	font-weight: var(--peso-medio);
	color: var(--cor-vinho-principal);
}

/* o segundo grupo (Rainha / Princesas) começa depois de um respiro */
.festa-ficha__grupo { margin-top: var(--esp-16) !important; }

/* ------------------------------------------------------------------
 * "Nossas Soberanas"
 * ------------------------------------------------------------------ */

.festa-soberanas__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;                  /* medido */
	margin-bottom: clamp(30px, 5vw, 50px);
}

.festa-soberanas__texto .estrelas { margin-inline: 0; }
.festa-soberanas__texto .titulo-prata { margin-bottom: var(--esp-8); }

.festa-soberanas__desc {
	margin: 0 0 var(--esp-24);
	font-size: 16px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

/* D98 — LINHA DA EDIÇÃO: ano · número · nome, tudo numa linha só.
 * Usada na seção Soberanas e no topo de cada card da memória visual.
 *
 * O DESTAQUE É O NÚMERO DA EDIÇÃO, não o ano — foi o que ele corrigiu
 * ("você aumentou o tamanho da data, e eu queria que aumentasse o
 * número da edição"). O ano e o nome ficam em corpo menor e cor mais
 * calma; o número fica maior e em vinho-principal. */
.festa-linha-edicao {
	display: flex;
	/* D102: centro vertical, não baseline — os dois corpos são
	 * diferentes (34 e 24) e o Diego pediu alinhamento pelo centro. */
	align-items: center;
	flex-wrap: wrap;
	gap: var(--esp-8);
	margin: 0 0 var(--esp-20);
	font-family: var(--fonte-display);
	line-height: 1.1;
}

/* D101 — o ANO maior que a edição, nos corpos que ele passou:
 * "2027 (34) 19ª - Fenachamp (24)". Cor segue a do D99: ano em
 * vinho-principal, edição em neutra-cacau. */
.festa-linha-edicao__ano {
	font-size: 34px;
	color: var(--cor-vinho-principal);
}

.festa-linha-edicao__edicao {
	font-size: 24px;
	color: var(--cor-neutra-cacau);
}

/* o hífen entre o ano e a edição acompanha a edição */
.festa-linha-edicao__sep {
	font-size: 24px;
	color: var(--cor-neutra-cacau);
}

/* na seção Soberanas a linha respira mais do bloco de cima */
.festa-soberanas__ficha .festa-linha-edicao { margin-top: var(--esp-24); }

/* ------------------------------------------------------------------
 * Linha do tempo — 4 marcos
 * ------------------------------------------------------------------ */

.festa-marcos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-24);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: marco;
}

.festa-marco {
	position: relative;
	padding: var(--esp-24);
	border: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 12%, transparent);
	border-radius: var(--raio-6);
	background-color: var(--cor-fundo-creme);
}

.festa-marco__ano {
	margin: 0 0 var(--esp-8);
	font-family: var(--fonte-display);
	font-size: 30px;
	line-height: 1;
	color: var(--cor-dourado);
}

.festa-marco__titulo {
	margin: 0 0 var(--esp-12);
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: 21px;
	line-height: 1.25;
	color: var(--cor-vinho-principal);
}

.festa-marco__texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cor-neutra-pedra);
}


/* ------------------------------------------------------------------
 * MEMÓRIA VISUAL — as 18 edições
 *
 * ⚠️ O PONTO DELICADO DA PÁGINA: os cartazes têm proporções que vão
 * de 0,34 (1993, uma tira vertical de 1022×3000) a 1,37 (1990, o
 * único deitado). As fotos de soberanas são quase todas 0,80, menos a
 * de 1990, que é 1,68.
 *
 * `object-fit: cover` numa proporção fixa cortaria o cartaz de 1993
 * quase inteiro e decapitaria o de 1990. Cartaz é peça gráfica: se
 * perde o título, o ano ou a arte, perde a informação.
 *
 * Por isso cada imagem fica num PALCO de altura fixa com
 * `object-fit: contain`, centralizada — aparece inteira em qualquer
 * proporção, sem distorcer e sem cortar. O palco tem fundo próprio
 * (nude), então a sobra ao redor de um cartaz estreito lê como
 * moldura, não como buraco.
 * ------------------------------------------------------------------ */

/* D99 — LINHA DO TEMPO. O Diego: "tenta fazer algo como se fosse uma
 * timeline mesmo, com um card levemente mais pra baixo do que o outro
 * do lado. Lado a lado assim não ficou muito legal."
 *
 * Duas colunas com a da direita descendo meio card, e um fio vertical
 * na calha entre elas. O olho passa a ler em ziguezague, de cima pra
 * baixo, em vez de varrer duas colunas paradas. Só no desktop — no
 * mobile é coluna única e o deslocamento não faria sentido. */
.festa-edicoes {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-24);
	align-items: start;         /* cada card com a altura do próprio conteúdo */
}

.festa-edicao {
	position: relative;         /* ancora o marcador da linha do tempo */
	display: flex;
	flex-direction: column;
	padding: var(--esp-20);
	border: 1px solid color-mix(in srgb, var(--cor-vinho-principal) 12%, transparent);
	border-radius: var(--raio-6);
	background-color: var(--cor-fundo-creme);
}

/* D98: o topo do card usa a mesma .festa-linha-edicao da seção
 * Soberanas. No D97 eu tinha inflado o ANO pra 64px; era o número da
 * edição que ele queria em destaque, e num corpo mais perto do
 * original (era 32px). */
.festa-edicao__topo {
	margin-bottom: var(--esp-20);
	padding-bottom: var(--esp-16);
	border-bottom: 1px solid var(--cor-fundo-nude);
}

.festa-edicao__topo .festa-linha-edicao { margin-bottom: 0; }

.festa-edicao__pecas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--esp-12);
	margin-bottom: var(--esp-20);
}

/* o palco — ver o comentário grande acima */
.festa-peca {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--esp-12);
	border: 0;
	border-radius: var(--raio-4);
	background-color: var(--cor-fundo-nude);
	cursor: zoom-in;
	overflow: hidden;
}

.festa-peca img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: contain;        /* INTEIRA, nunca cortada */
	object-position: center;
	transition: transform .4s ease;
}

.festa-peca:hover img,
.festa-peca:focus-visible img { transform: scale(1.04); }

.festa-peca:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 2px;
}


@media (min-width: 768px) {
	.festa-marcos            { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.festa-edicoes           { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.festa-peca img          { height: 260px; }
}

@media (min-width: 1025px) {
	/* linha: moldura de 42,8% (medido) + texto ocupando o resto */
	.festa-origem__grid,
	.festa-soberanas__grid   { flex-direction: row; align-items: flex-start; }
	.festa-moldura           { flex: 0 0 42.821%; align-self: auto; }
	.festa-origem__texto,
	.festa-soberanas__texto  { flex: 1; }

	.festa-marcos            { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* DUAS colunas, não três: com três, o palco do cartaz ficava com
	 * 157px de largura e o cartaz — que tem título, ano e arte — virava
	 * uma miniatura ilegível. Com duas, passa de 157 pra ~295px e dá
	 * pra ler. São 18 edições, então a página fica longa; o ganho de
	 * legibilidade da peça principal compensa, e o lightbox continua
	 * lá pra ver de perto. */
	.festa-edicoes           { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }

	/* o fio da linha do tempo, na calha entre as colunas */
	.festa-edicoes::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background-color: color-mix(in srgb, var(--cor-vinho-principal) 14%, transparent);
		pointer-events: none;
	}

	/* D101 — a coluna da direita desce MAIS: o Diego pediu que o card
	 * do lado só comece "ao menos até a metade ou mais" do anterior.
	 * O card mede ~720px, então 400 põe o topo da direita um pouco
	 * abaixo da metade da esquerda. É o único valor a mexer se ele
	 * quiser mais ou menos desnível. */
	.festa-edicao:nth-child(even) { margin-top: 400px; }

	/* marcador na altura do topo de cada card, tocando o fio */
	.festa-edicao::after {
		content: '';
		position: absolute;
		top: 34px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: var(--cor-dourado);
		box-shadow: 0 0 0 4px var(--cor-fundo-creme-suave);
	}

	.festa-edicao:nth-child(odd)::after  { right: -36px; }
	.festa-edicao:nth-child(even)::after { left: -36px; }
	.festa-peca img          { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
	.festa-peca img { transition: none; }
	.festa-peca:hover img { transform: none; }
}


/* ====================================================================
 * TELA DE AVISO — "Em breve" (post 15) e "Regulamento das Soberanas"
 * (post 41). As duas são a MESMA tela no validado; só mudam o
 * subtítulo e o que vem embaixo dele.
 *
 * São `elementor_canvas` lá: tela cheia, SEM cabeçalho e SEM rodapé —
 * é o que faz sentido numa página de "voltamos em breve", já que não
 * há para onde navegar.
 * ==================================================================== */

.aviso {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 98vh;           /* medido */
	background-image: url('../../../../uploads/2026/03/bg-folhas-fenachamp.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--cor-fundo-creme);
}

.aviso__miolo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;   /* medido no mobile/tablet */
	gap: var(--esp-30);              /* 32px medido */
	min-height: 90vh;                /* medido */
	width: 90%;                      /* medido */
	max-width: var(--container-largura);
	margin-inline: auto;
	padding-block: var(--ritmo-secao);
	text-align: center;
}

/* a logo é uma faixa de 22vh no validado (20 no tablet), com a imagem
 * em `contain` — aqui vira uma <img> com a mesma altura máxima. */
.aviso__logo {
	display: block;
	width: auto;
	max-width: min(70vw, 420px);
	max-height: 22vh;
	object-fit: contain;
}

.aviso__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--esp-30);         /* 32px medido */
	width: 100%;
}

.aviso__titulo {
	margin: 0;
	font-family: var(--fonte-display);
	font-weight: var(--peso-medio);
	font-size: clamp(34px, 6vw, 72px);   /* 72 desktop / 34 mobile, medidos */
	line-height: 1.1;
	color: var(--cor-vinho-claro);       /* #AA4753, literal aprovado no D6 */
}

/* ⚠️ o widget traz `color: #EEDED8` — o typo que o D6 já tinha banido
 * (o certo seria #EDDED9). Mas o `__globals__` do mesmo widget aponta
 * pra `primary`, e o GLOBAL VENCE: o divisor é vinho-principal. É a
 * mesma armadilha do E10bis. */
.aviso__divisor {
	width: min(220px, 60%);
	height: 2px;
	margin: 0;
	border: 0;
	background-color: var(--cor-vinho-principal);
}

.aviso__subtitulo {
	margin: 0;
	font-family: var(--fonte-display);
	font-weight: var(--peso-texto);      /* 400 medido */
	font-size: clamp(24px, 3.4vw, 42px); /* 42 desktop / 24 mobile, medidos */
	line-height: 1.2;
	color: var(--cor-dourado);           /* globals: accent */
}

.aviso__contato {
	margin: 0;
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);      /* 500 medido */
	font-size: 16px;
	color: var(--cor-vinho-escuro);      /* globals: 23cdac3 */
}

.aviso__acoes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--esp-16);
}

/* botão 1: borda e hover em dourado, raio 0, padding 16/24 — medidos.
 * O fundo no hover é vinho-escuro (globals `secondary`). */
.aviso__botao {
	padding: 16px 24px;
	border: 2px solid var(--cor-dourado);
	border-radius: 0;
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 15px;
	text-decoration: none;
	color: var(--cor-vinho-escuro);
	transition: background-color .3s ease, color .3s ease;
}

.aviso__botao:hover,
.aviso__botao:focus-visible {
	background-color: var(--cor-vinho-escuro);
	color: var(--cor-dourado);
}

/* botão 2: sem padding e sem fundo no dado — é um link de texto */
.aviso__link {
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 15px;
	color: var(--cor-vinho-escuro);
	text-underline-offset: 4px;
	transition: color .3s ease;
}

.aviso__link:hover,
.aviso__link:focus-visible { color: var(--cor-dourado); }

.aviso__botao:focus-visible,
.aviso__link:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

@media (min-width: 768px) {
	.aviso__acoes { flex-direction: row; gap: var(--esp-24); }
}

@media (prefers-reduced-motion: reduce) {
	.aviso__botao,
	.aviso__link { transition: none; }
}


/* ====================================================================
 * TEMPLATES DE SISTEMA (D104)
 * page.php · archive.php · search.php · 404.php
 *
 * Só o 404 vem do validado (post 197, tipo error-404). Os outros três
 * o Elementor não cobria — mas o WordPress serve essas URLs de
 * qualquer jeito, e sem template caíam no index.php cru. Por isso não
 * há desenho novo aqui: é a linguagem já aprovada (topo do D75, caixa
 * de 960px do D86, card de notícia do template 1344) aplicada a
 * contextos que o validado não desenhou.
 * ==================================================================== */

/* ------------------------------------------------------------------
 * page.php — corpo de página genérica.
 * Mesma caixa de 960px do post individual, então herda toda a
 * tipografia de `.post-corpo__texto` (D86).
 * ------------------------------------------------------------------ */

.pagina-corpo {
	position: relative;
	background-color: var(--cor-fundo-creme);
	padding-block: var(--ritmo-secao);
}

.pagina-corpo__conteudo {
	position: relative;
	z-index: 2;                 /* acima da letra decorativa (z 1) */
	max-width: 960px;           /* mesma medida do post individual */
	margin-inline: auto;
	padding-inline: var(--respiro-container);
}

.pagina-corpo__capa {
	margin: 0 0 clamp(24px, 4vw, 40px);
	overflow: hidden;
	border-radius: var(--raio-6);
	background-color: var(--cor-fundo-nude);
}

.pagina-corpo__capa img { display: block; width: 100%; height: auto; }

/* paginação interna de página (wp_link_pages) */
.pagina-corpo__paginas {
	margin-top: var(--esp-30);
	font-size: 14px;
	color: var(--cor-neutra-pedra);
}

.pagina-corpo__paginas a { color: var(--cor-vinho-principal); }

/* ------------------------------------------------------------------
 * 404.php — replicado do post 197 do validado.
 * ------------------------------------------------------------------ */

.erro404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 96vh;           /* medido */
	padding-inline: 5%;         /* 8% no desktop, ver media query */
	/* ⚠️ o validado traz `#F3F5F8` como cor de fundo — DESCARTADA no D6
	 * como "genérico da 404". A imagem cobre tudo de qualquer jeito, e
	 * a base fica no creme do kit. */
	background-color: var(--cor-fundo-creme);
	background-image: url('../../../../uploads/2026/03/bg-folhas-fenachamp.jpg');
	background-position: bottom right;   /* medido */
	background-size: cover;
	background-repeat: no-repeat;
}

.erro404__miolo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(24px, 4vw, 40px);
	width: 100%;
	max-width: 1650px;          /* boxed_width medido */
	margin-inline: auto;
	text-align: center;
}

.erro404__logo img { display: block; height: auto; }

.erro404__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--esp-20);
}

.erro404__numero {
	margin: 0;
	font-family: var(--fonte-text);
	font-weight: var(--peso-forte);      /* 600 medido */
	font-size: clamp(96px, 22vw, 200px); /* 200 medido no desktop */
	line-height: 1;
	color: var(--cor-vinho-principal);   /* globals: primary */
}

.erro404__frase {
	margin: 0;
	font-family: var(--fonte-text);
	font-weight: var(--peso-texto);      /* 400 medido */
	font-size: 16px;
	color: var(--cor-neutra-pedra);      /* globals: text */
}

/* pílula, padding 16/24, letter-spacing 1,2 — medidos.
 * hover: fundo vinho-escuro (secondary) e texto creme-suave. */
.erro404__botao {
	padding: 16px 24px;
	border: 1px solid var(--cor-vinho-principal);
	border-radius: var(--raio-pilula);
	background-color: var(--cor-vinho-principal);
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);      /* 500 medido */
	font-size: 14px;
	letter-spacing: 1.2px;
	text-decoration: none;
	color: var(--cor-fundo-creme);
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.erro404__botao:hover,
.erro404__botao:focus-visible {
	background-color: var(--cor-vinho-escuro);
	border-color: var(--cor-vinho-principal);
	color: var(--cor-fundo-creme-suave);
}

.erro404__botao:focus-visible {
	outline: 2px solid var(--cor-dourado);
	outline-offset: 3px;
}

@media (min-width: 1025px) {
	.erro404 { padding-inline: 8%; }    /* medido */
}

@media (prefers-reduced-motion: reduce) {
	.erro404__botao { transition: none; }
}


/* ------------------------------------------------------------------
 * PROGRAMAÇÃO — passado e "acontecendo agora" (D106)
 *
 * O passado NÃO some da programação completa: ele fica, apagado. A
 * régua do tempo continua legível — dá pra ver que o dia 13 já
 * aconteceu — sem o que passou competindo com o que ainda vem.
 * ------------------------------------------------------------------ */

/* dia inteiro no passado: o cartão todo recua */
.prog-dia--passado {
	opacity: .55;
	box-shadow: none;
}

.prog-dia--passado .prog-dia__num  { color: var(--cor-neutra-pedra); }
.prog-dia--passado .prog-dia__mes  { color: var(--cor-neutra-pedra); }

/* linha de evento já encerrado */
.prog-linha--passado { opacity: .6; }

/* o horário perde o vinho e vira cinza — é o sinal mais rápido de que
 * aquilo já foi */
.prog-linha--passado .prog-linha__hora   { color: var(--cor-neutra-pedra); }
.prog-linha--passado .prog-linha__titulo { color: var(--cor-neutra-pedra); }

.prog-linha__selo {
	flex: none;
    align-self: center;
	padding: 3px 10px;
	border-radius: var(--raio-pilula);
	background-color: var(--cor-fundo-nude);
	font-family: var(--fonte-text);
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cor-neutra-pedra);
}

/* acontecendo agora — o oposto: ganha peso em vez de perder.
 * ⚠️ É aproximação: o evento não tem hora de término no cadastro, então
 * a janela é de 3h a partir do horário. Ver `fenachamp_evento_agora()`. */
.prog-linha--agora {
	background-color: var(--cor-fundo-pessego-claro);
	box-shadow: inset 3px 0 0 var(--cor-dourado);
}

.prog-linha__agora {
	flex: none;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border-radius: var(--raio-pilula);
	background-color: var(--cor-vinho-principal);
	font-family: var(--fonte-text);
	font-weight: var(--peso-medio);
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cor-fundo-creme);
}

.prog-linha__agora::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--cor-dourado);
	animation: fenachamp-pulso 1.8s ease-in-out infinite;
}

@keyframes fenachamp-pulso {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
	.prog-linha__agora::before { animation: none; }
}

/* D112 — a foto de "Como tudo começou" amplia.
 * O botão é só o embrulho: nada de caixa, nada de contorno próprio.
 * A moldura continua sendo o <figure>, exatamente como estava. */
.festa-moldura__zoom {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	font: inherit;
	color: inherit;
}

.festa-moldura__zoom:focus-visible {
	outline: 2px solid var(--cor-vinho-principal);
	outline-offset: 3px;
}

/* ====================================================================
 * AVISO SAZONAL (D118)
 *
 * Ocupa o lugar do conteúdo quando a área está fora de temporada. O
 * hero fica acima, por decisão do Diego — o topo diz onde a pessoa
 * está, e o aviso explica por que não há mais nada.
 * ==================================================================== */

.aviso-sazonal {
	padding-block: var(--ritmo-secao-dobro);
	background-color: var(--cor-fundo-creme);
}

.aviso-sazonal__interno {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--esp-24);
	/* D130 — o texto em si mede 900px (pedido do Diego, medido por ele
	 * no DevTools: a caixa saía com 489px). O `calc` soma o respiro
	 * lateral pra que a MEDIDA VALHA PRO TEXTO, não pra caixa. */
	max-width: calc(900px + var(--respiro-container) * 2);
	margin-inline: auto;
	padding-inline: var(--respiro-container);
	text-align: center;
}

.aviso-sazonal__texto {
	width: 100%;
	font-family: var(--fonte-text);
	font-size: 18px;
	line-height: 1.7;
	color: var(--cor-neutra-pedra);
}

/* D130 — o texto agora vem em parágrafos (`wpautop`). O espaço entre
 * eles é o que faz a leitura funcionar; sem isso, formatar não teria
 * servido de nada. Primeiro e último sem margem pra não brigar com o
 * `gap` da coluna. */
.aviso-sazonal__texto > p {
	margin: 0 0 var(--esp-16);
}

.aviso-sazonal__texto > p:last-child {
	margin-bottom: 0;
}

/* A tarja de quem pode editar. Fica presa no topo porque o conteúdo
 * abaixo é longo: rolando, a pessoa esquece que está espiando. */
.tarja-sazonal {
	position: sticky;
	top: var(--altura-cabecalho, 80px);
	z-index: 30;
	background-color: var(--cor-vinho-profundo);
	color: var(--cor-fundo-creme);
}

/* D130 — a tarja do site fechado (modo manutenção) fica ACIMA do
 * cabeçalho e NÃO gruda: o recado vale pra visita inteira, não pra uma
 * seção. Grudada, ela disputaria o topo com o cabeçalho, que também é
 * `sticky`. */
.tarja-sazonal--topo {
	position: static;
}

.tarja-sazonal__interno {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--esp-12) var(--esp-16);
	max-width: var(--container-largura);
	margin-inline: auto;
	padding: var(--esp-12) var(--respiro-container);
}

.tarja-sazonal__marca {
	flex: none;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: var(--cor-dourado);
	color: var(--cor-vinho-profundo);
	font-family: var(--fonte-text);
	font-size: 11px;
	font-weight: var(--peso-medio);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.tarja-sazonal__texto {
	margin: 0;
	font-family: var(--fonte-text);
	font-size: 14px;
	line-height: 1.5;
}

.tarja-sazonal__texto em { color: var(--cor-fundo-pessego); font-style: italic; }

.tarja-sazonal__link {
	margin-left: auto;
	color: var(--cor-fundo-pessego);
	font-family: var(--fonte-text);
	font-size: 13px;
	font-weight: var(--peso-medio);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.tarja-sazonal__link { margin-left: 0; }
}

/* D127 — "Contada em números" no celular: LADO A LADO, tudo menor.
 *
 * O D126 tinha empilhado, e ele viu no telefone: *"os cards da home
 * ficaram enormes... ajusta eles para ficarem lado a lado, mas ajusta
 * o texto para não quebrar a linha... diminui para que tudo fique
 * adequado"*.
 *
 * Então voltam as duas colunas e o CONTEÚDO encolhe até caber. A conta
 * do espaço, em 375px:
 *   375 − 38 (respiro) − 20 (gap) = 317 ÷ 2 = 158 por card
 *   158 − 16 (padding lateral) = 142 pra escrever
 *
 * "OPÇÕES GASTRONÔMICAS" é o rótulo mais longo e é ele que manda no
 * tamanho da fonte — os outros três sobram. */
@media (max-width: 767px) {
	.inicio-numeros__card {
		aspect-ratio: auto;      /* 3/4 num card de 158px daria altura demais */
		/* 6px de lado, não 8: com 8 o rótulo mais longo ficava com 4px
		 * de sobra, e 4px é o tipo de folga que some quando a fonte
		 * renderiza um fio diferente no aparelho de verdade. */
		padding: var(--esp-20) 6px;
		/* D128 — SEM `gap` aqui. Eu tinha posto 12px e o Diego
		 * desmarcou no DevTools: *"os itens ficam muito espaçados"*.
		 * A regra base do card não tem gap nenhum — quem separa ícone,
		 * número e rótulo são as margens deles. O gap somava por cima
		 * disso e esticava o card à toa. */
	}

	.inicio-numeros__icone { width: 64px; height: 64px; }
	.inicio-numeros__icone img { width: 34px; height: 34px; }

	.inicio-numeros__valor { font-size: 32px; }

	/* MEDIDO, não estimado: testei 6 combinações de fonte, entreletra e
	 * padding no navegador. 10px com entreletra ZERO é o maior que faz
	 * "OPÇÕES GASTRONÔMICAS" caber numa linha — a 0.3 de entreletra ele
	 * pedia 144px num espaço de 141 e quebrava. */
	.inicio-numeros__label {
		font-size: 10px;
		letter-spacing: 0;
		line-height: 1.35;
		/* se um rótulo novo for maior que o mais longo de hoje, é melhor
		 * quebrar do que vazar do card */
		overflow-wrap: anywhere;
	}
}