/*
 * Jooy CBPE — blocos próprios.
 *
 * Cada bloco desenha seu estado final aqui. A animação em GSAP é caminho até
 * este estado, nunca pré-requisito para ele: se o JS não rodar, tudo abaixo
 * continua legível e clicável.
 */

/* ================= cronômetro ================= */

.jooy-countdown {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.jooy-countdown--centro {
	display: block;
	text-align: center;
}

.jooy-countdown__palco {
	position: relative;
	display: inline-block;
	isolation: isolate;
}

/* O anel emoldura os dígitos, não o bloco todo. Amarelo abaixo de ~0.5 de
   opacidade sobre azul vira cinza: aqui ele fica opaco o bastante para ler
   como o elemento do kit que é. */
/* O anel é TONAL, não translúcido: amarelo com alpha sobre azul sempre cai num
   cinza-esverdeado sujo. Um azul mais claro em opacidade cheia dá a mesma
   profundidade sem lama — e deixa o amarelo reservado para os dígitos, que é
   onde ele tem função. */
.jooy-countdown__anel {
	position: absolute;
	top: 54%;
	left: -1.75rem;
	transform: translateY(-50%);
	width: clamp(160px, 22vw, 224px);
	z-index: -1;
	opacity: 1;
	pointer-events: none;
	--jooy-anel: #2E51FF;
}

.jooy-countdown--centro .jooy-countdown__palco {
	display: block;
}

.jooy-countdown--centro .jooy-countdown__anel {
	left: 50%;
	transform: translate(-50%, -50%);
}

/* O anel do bloco de número mantém o leque de raios do kit, na mesma lógica
   tonal: o branco pode ser translúcido (clareia sem sujar), o amarelo não. */
.jooy-stat__anel {
	opacity: 1;
	--jooy-anel: #2E51FF;
	--jooy-raio: rgba(255, 255, 255, 0.38);
}

/* Sobre amarelo ou branco o tonal inverte: o anel escurece em vez de clarear. */
.jooy-section--fundo-amarelo .jooy-countdown__anel,
.jooy-section--fundo-amarelo .jooy-stat__anel {
	--jooy-anel: #BFBD00;
	--jooy-raio: rgba(0, 54, 255, 0.28);
}

.jooy-section--fundo-branco .jooy-countdown__anel,
.jooy-section--fundo-branco .jooy-stat__anel {
	--jooy-anel: #D6DEFF;
	--jooy-raio: rgba(0, 54, 255, 0.22);
}

/* O palco isola o próprio contexto de empilhamento, então ele (e o anel dentro
   dele) pinta por cima da chamada, que vem antes no DOM. Sem este z-index o
   aro atravessa as letras de "A contagem já começou". */
.jooy-countdown__chamada {
	position: relative;
	z-index: 1;
	margin-bottom: 0.75rem;
}

.jooy-countdown__relogio {
	display: flex;
	gap: clamp(0.75rem, 2.5vw, 1.75rem);
	align-items: flex-start;
}

.jooy-countdown--centro .jooy-countdown__relogio {
	justify-content: center;
}

.jooy-countdown__unidade {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3.5rem;
}

.jooy-countdown__valor {
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--jooy-amarelo);
}

.jooy-countdown__rotulo {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jooy-branco);
}

.jooy-countdown__encerrado {
	margin: 0.75rem 0 0;
	font-weight: 600;
	color: var(--jooy-amarelo);
}

.jooy-section--fundo-amarelo .jooy-countdown__valor,
.jooy-section--fundo-branco .jooy-countdown__valor,
.jooy-section--fundo-amarelo .jooy-countdown__rotulo,
.jooy-section--fundo-branco .jooy-countdown__rotulo {
	color: var(--jooy-azul);
}

/* Cronômetro em seção própria: os dígitos viram o assunto da dobra, não um
   apoio ao lado do H1. O anel cresce junto, senão vira um aro apertado no
   meio dos números. */
.jooy-countdown--grande .jooy-countdown__valor {
	font-size: clamp(3.25rem, 13vw, 7.5rem);
	letter-spacing: -0.03em;
}

.jooy-countdown--grande .jooy-countdown__rotulo {
	margin-top: 0.75rem;
	font-size: clamp(0.75rem, 1.4vw, 0.9375rem);
	letter-spacing: 0.22em;
}

.jooy-countdown--grande .jooy-countdown__unidade {
	min-width: clamp(4.5rem, 17vw, 9rem);
}

.jooy-countdown--grande .jooy-countdown__relogio {
	gap: clamp(0.5rem, 4vw, 3rem);
}

.jooy-countdown--grande .jooy-countdown__anel {
	width: clamp(240px, 38vw, 420px);
}

.jooy-countdown--grande .jooy-countdown__chamada {
	margin-bottom: clamp(1.75rem, 4.5vw, 3.25rem);
	font-size: clamp(0.8125rem, 1.5vw, 1rem);
}

/* Os dígitos rolam por cima uns dos outros enquanto o segundo troca; largura
   tabular impede o relógio inteiro de tremer a cada tique. */
.jooy-countdown__valor {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ================= títulos animados palavra a palavra ================= */

/* A máscara é a palavra de fora; quem se move é o <i> de dentro. O padding
   compensa o corte das descidas (g, p, y) que o overflow:hidden causaria. */
.jooy-palavra {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.jooy-palavra__i {
	display: inline-block;
	will-change: transform;
}

/* ---------- a entrada em cascata do hero ---------- */

/*
 * A primeira dobra se monta de cima para baixo, uma peça esperando a anterior
 * terminar. Os tempos moram todos aqui, num lugar só: o CSS usa estas variáveis
 * como `animation-delay`, e o app.js LÊ as mesmas variáveis para encaixar os
 * dois passos que não são CSS — a logo e as palavras do H1, que são GSAP.
 * Mudar o ritmo é mexer no `--jooy-compasso` e em mais nada.
 *
 * Por que CSS e não uma linha do tempo em GSAP: a cascata precisa começar na
 * primeira pintura. O app.js é `defer` e chega depois; qualquer coisa presa a
 * ele apareceria inteira primeiro e só então se esconderia para entrar de novo.
 */
.jooy-hero {
	--jooy-compasso: 1;

	/*
	 * Cada tempo é o fim medido do passo anterior, não um palpite: os títulos
	 * entram palavra a palavra e duram o que a contagem de palavras manda — o
	 * H2, com nove, leva 0,68s contra os 0,59s do H1. Foi essa diferença que
	 * fez o parágrafo entrar por cima do H2 na primeira medição.
	 */
	--jooy-p1: calc(0.04s * var(--jooy-compasso));   /* sobretítulo           */
	--jooy-p2: calc(0.24s * var(--jooy-compasso));   /* marca ABRAPE          */
	--jooy-p2b: calc(0.44s * var(--jooy-compasso));  /* lockup XI CBPE        */
	--jooy-p3: calc(0.72s * var(--jooy-compasso));   /* H1, palavra a palavra */
	--jooy-p4: calc(1.26s * var(--jooy-compasso));   /* H2, palavra a palavra */
	--jooy-p5: calc(1.86s * var(--jooy-compasso));   /* parágrafo             */
	--jooy-p6: calc(2.10s * var(--jooy-compasso));   /* etiquetas de data     */
	--jooy-p7: calc(2.40s * var(--jooy-compasso));   /* botões                */
	--jooy-p8: calc(2.58s * var(--jooy-compasso));   /* nota de rodapé        */
}

/*
 * A classe jooy-js só existe quando há JS (ver inc/assets.php): sem ela nada
 * aqui se aplica e a dobra nasce montada. O resgate é o seguro do seguro —
 * se o app.js nunca chegar, tudo aparece aos 3,2s em vez de ficar invisível
 * para sempre.
 */
html.jooy-js .jooy-hero :is(
	.jooy-sobretitulo,
	.jooy-hero__abrape,
	.jooy-hero__texto > p,
	.jooy-data,
	.wp-block-buttons
),
html.jooy-js .jooy-hero > .jooy-section__interno > p:not(.jooy-sobretitulo) {
	opacity: 0;
	animation:
		jooy-entra 0.34s cubic-bezier(0.22, 1, 0.36, 1) var(--jooy-atraso, 0s) forwards,
		jooy-resgate 0s linear 3.2s forwards;
}

html.jooy-js .jooy-hero .jooy-sobretitulo   { --jooy-atraso: var(--jooy-p1); }
html.jooy-js .jooy-hero .jooy-hero__abrape  { --jooy-atraso: var(--jooy-p2); }
html.jooy-js .jooy-hero .jooy-hero__texto > p  { --jooy-atraso: var(--jooy-p5); }
html.jooy-js .jooy-hero .jooy-data          { --jooy-atraso: var(--jooy-p6); }
html.jooy-js .jooy-hero .wp-block-buttons   { --jooy-atraso: var(--jooy-p7); }
html.jooy-js .jooy-hero > .jooy-section__interno > p:not(.jooy-sobretitulo) { --jooy-atraso: var(--jooy-p8); }

@keyframes jooy-entra {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * As etiquetas de data se pintam sozinhas por CSS (ver `.jooy-chip`), e o
 * atraso padrão delas é medido para uma página sem cascata. Dentro do hero a
 * pintura tem de esperar a vez da vez — senão a caixa termina de pintar
 * enquanto ainda está invisível, e quando aparece já está pronta.
 */
html.jooy-js .jooy-hero .jooy-chip::before {
	animation-delay: calc(var(--jooy-p6) + 0.06s + var(--jooy-chip-ordem) * 0.085s);
}

html.jooy-js .jooy-hero .jooy-chip__t {
	animation-delay: calc(var(--jooy-p6) + 0.19s + var(--jooy-chip-ordem) * 0.085s);
}

/*
 * Os dois títulos do hero têm regra própria: quem entra são as PALAVRAS, uma a
 * uma, e não o bloco inteiro em desvanecimento. O CSS só os segura até o GSAP
 * montar as máscaras — e é por isso que eles não podem estar na regra de cima:
 * o `iniciaTitulos` grava `opacity:1` no estilo em linha assim que fatia o
 * título, o que venceria a opacidade zero da cascata e faria o H2 aparecer
 * antes do H1. Dois tratamentos na mesma peça é sempre um deles a mais.
 */
html.jooy-js .jooy-hero :is( h1, h2 ) {
	opacity: 0;
	animation: jooy-resgate 0s linear 3.2s forwards;
}

/* Movimento reduzido: a dobra nasce montada, sem cascata nenhuma. */
@media (prefers-reduced-motion: reduce) {
	html.jooy-js .jooy-hero :is( h1, h2 ),
	html.jooy-js .jooy-hero :is(
		.jooy-sobretitulo,
		.jooy-hero__abrape,
		.jooy-hero__texto > p,
		.jooy-data,
		.wp-block-buttons
	),
	html.jooy-js .jooy-hero > .jooy-section__interno > p:not(.jooy-sobretitulo) {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Movimento reduzido: o texto já nasce montado e o JS nem chega a fatiar. */
@media (prefers-reduced-motion: reduce) {
	.jooy-palavra,
	.jooy-palavra__i {
		display: inline;
		overflow: visible;
		padding: 0;
		margin: 0;
		transform: none !important;
	}
}

/* ================= números ================= */

.jooy-stats__ano {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.jooy-stats__grade {
	display: grid;
	grid-template-columns: repeat(var(--jooy-stats-colunas, 4), minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 1023px) {
	.jooy-stats__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.jooy-stats__grade {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

.jooy-stat {
	position: relative;
	isolation: isolate;
}

.jooy-stat__anel {
	position: absolute;
	top: -0.75rem;
	left: -1.5rem;
	width: clamp(120px, 14vw, 180px);
	z-index: -1;
	pointer-events: none;
}

.jooy-stat__numero {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15em;
	margin: 0 0 0.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
}

.jooy-stat__rotulo {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Variante promessa (2026): amarelo e grande. */
.jooy-stats--promessa .jooy-stat__valor,
.jooy-stats--promessa .jooy-stat__afixo {
	font-size: var(--wp--preset--font-size--numero, 4.5rem);
	font-weight: 800;
	color: var(--jooy-amarelo);
}

.jooy-stats--promessa .jooy-stat__afixo {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.jooy-stats--promessa .jooy-stat__rotulo {
	color: var(--jooy-branco);
}

/* Variante histórico (edição passada): menor, em menta, e sempre datada —
   ninguém pode confundir o que já aconteceu com o que vai acontecer. */
.jooy-stats--historico .jooy-stat__valor,
.jooy-stats--historico .jooy-stat__afixo {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	color: var(--jooy-menta);
}

.jooy-stats--historico .jooy-stat__afixo {
	font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.jooy-stats--historico .jooy-stat__rotulo {
	color: rgba(255, 255, 255, 0.82);
	letter-spacing: 0.1em;
}

.jooy-stats--historico .jooy-stats__ano {
	color: var(--jooy-menta);
}

.jooy-section--fundo-amarelo .jooy-stat__valor,
.jooy-section--fundo-amarelo .jooy-stat__afixo,
.jooy-section--fundo-amarelo .jooy-stat__rotulo,
.jooy-section--fundo-branco .jooy-stat__valor,
.jooy-section--fundo-branco .jooy-stat__afixo,
.jooy-section--fundo-branco .jooy-stat__rotulo {
	color: var(--jooy-azul);
}

/* ================= faixa em movimento ================= */

.jooy-marquee {
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 1.5vw, 1rem);
}

.jooy-marquee__trilha {
	display: flex;
	width: max-content;
	gap: clamp(0.5rem, 1.5vw, 1rem);
	will-change: transform;
}

.jooy-marquee__fita {
	display: flex;
	gap: clamp(0.5rem, 1.5vw, 1rem);
	flex: 0 0 auto;
}

.jooy-marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Faixa de imagens. */
.jooy-marquee--imagens .jooy-marquee__item {
	height: var(--jooy-marquee-altura, 240px);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.jooy-marquee--imagens .jooy-marquee__item :is(img, figure) {
	width: 100%;
	height: 100%;
	margin: 0;
}

.jooy-marquee--imagens .jooy-marquee__item img {
	object-fit: cover;
}

@media (max-width: 781px) {
	.jooy-marquee--imagens .jooy-marquee__item {
		height: 160px;
	}
}

/* ---------- o vão em arco ---------- */

/*
 * A cúpula do kit vira máscara de imagem e vídeo. É a peça mais valiosa das
 * pranchas e o documento de design é explícito: "use como máscara de foto —
 * recorta a imagem em arco e amarra foto e identidade".
 *
 * A forma é a do original: semicircunferência de raio igual a meia largura,
 * apoiada em laterais retas. `--jooy-vao-reta` é a fração da altura ocupada
 * pelas laterais — 0.5 é o padrão, e cada uso ajusta.
 *
 * Ressalva honesta: com `preserveAspectRatio="none"` a máscara acompanha a
 * caixa, então em caixas muito fora do quadrado o arco fica levemente
 * elíptico. Nas proporções em que o tema o usa (entre 4:3 e 21:9) a diferença
 * não é perceptível, e a alternativa — um caminho por proporção — não vale a
 * complexidade numa peça decorativa.
 */
:root {
	--jooy-vao: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 100V50A50 50 0 0 1 100 50V100Z" fill="black"/></svg>');

	/* Só a cúpula, sem as laterais retas: serve de camada de topo quando a
	   altura do arco precisa ser independente da altura da caixa. */
	--jooy-cupula-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 100A50 50 0 0 1 100 100Z" fill="black"/></svg>');

	/* Mantido para não quebrar uso antigo do token. */
	--jooy-arco: var(--jooy-vao);

	/*
	 * Grão de filme. Fica no CSS, e não gravado no vídeo, por três motivos:
	 * ruído é o pior inimigo do compressor e engordaria o arquivo em centenas
	 * de KB; gravado no vídeo ele ficaria DEBAIXO do véu, que o apagaria quase
	 * por completo; e aqui pode ser desligado em `prefers-reduced-motion`.
	 *
	 * `#` vira `%23` porque a referência ao filtro mora dentro de uma URI de
	 * dados — sem escapar, o navegador corta a URL ali e não carrega nada.
	 *
	 * Três detalhes do filtro que não são enfeite:
	 *
	 * - `color-interpolation-filters="sRGB"`. O padrão é linearRGB, e nele o
	 *   ruído sai lavado a ponto de não aparecer.
	 * - `feFuncA slope=0 intercept=1`. A feTurbulence gera ruído TAMBÉM no
	 *   alfa; sem fixar o alfa em 1, metade do efeito vira transparência e o
	 *   grão praticamente some.
	 * - `slope=1 intercept=-0.5` joga a maior parte do ruído para baixo de
	 *   zero, e sobram pontos claros esparsos — grão de filme, não chuvisco.
	 *
	 * Casado com `mix-blend-mode: screen`, que só clareia: sobre o azul da
	 * marca (R=0) qualquer mistura multiplicativa daria exatamente zero.
	 */
	--jooy-grao: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="190" height="190"><filter id="g" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncR type="linear" slope="1" intercept="-0.5"/><feFuncG type="linear" slope="1" intercept="-0.5"/><feFuncB type="linear" slope="1" intercept="-0.5"/><feFuncA type="linear" slope="0" intercept="1"/></feComponentTransfer></filter><rect width="190" height="190" filter="url(%23g)"/></svg>');
}

.jooy-vao {
	-webkit-mask: var(--jooy-vao) bottom center / 100% 100% no-repeat;
	mask: var(--jooy-vao) bottom center / 100% 100% no-repeat;
}

/* Sem suporte a mask a imagem aparece em retângulo — que é o que a página já
   é hoje. Degrada para o estado anterior, nunca para imagem sumida. */
@supports not ((-webkit-mask: url('#a')) or (mask: url('#a'))) {
	.jooy-vao {
		-webkit-mask: none;
		mask: none;
	}
}

/* Na trilha, uma imagem em cada três entra pelo vão: alternar é o que dá
   ritmo — todas em arco viram padrão de papel de parede. */
.jooy-marquee--arco .jooy-marquee__item:nth-child(3n + 1) img {
	-webkit-mask: var(--jooy-vao) bottom center / 100% 100% no-repeat;
	mask: var(--jooy-vao) bottom center / 100% 100% no-repeat;
}

/* Na galeria, o vão vai nos cantos da grade irregular. */
.wp-block-gallery.is-style-jooy-irregular .wp-block-image:first-child img,
.wp-block-gallery.is-style-jooy-irregular .wp-block-image:last-child img {
	-webkit-mask: var(--jooy-vao) bottom center / 100% 100% no-repeat;
	mask: var(--jooy-vao) bottom center / 100% 100% no-repeat;
}

/* Cápsulas de palavra-chave. */
.jooy-capsula {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	font-size: clamp(0.875rem, 1.6vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.jooy-capsula--preenchida {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

.jooy-capsula--contorno {
	background: transparent;
	color: var(--jooy-branco);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

/* Sobre amarelo o jogo se inverte, para a faixa do bloco 9 não repetir a do 6. */
.jooy-section--fundo-amarelo .jooy-capsula--preenchida {
	background: var(--jooy-azul);
	color: var(--jooy-branco);
}

.jooy-section--fundo-amarelo .jooy-capsula--contorno {
	color: var(--jooy-azul);
	box-shadow: inset 0 0 0 1.5px var(--jooy-azul);
}

/* ================= lista de espera ================= */

.jooy-waitlist {
	padding: clamp(1.75rem, 4vw, 3.5rem);
	border-radius: 8px;
}

.jooy-waitlist--amarelo {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

.jooy-waitlist--branco {
	background: var(--jooy-branco);
	color: var(--jooy-azul);
}

.jooy-waitlist :is(h1, h2, h3) {
	color: var(--jooy-azul);
}

.jooy-waitlist__cabecalho {
	max-width: 44ch;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.jooy-waitlist__titulo {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--titulo-secao, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
}

.jooy-waitlist__apoio {
	margin: 0;
	font-size: var(--wp--preset--font-size--corpo, 1.125rem);
	line-height: 1.6;
}

.jooy-waitlist__sucesso {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--jooy-azul);
	color: var(--jooy-branco);
	border-radius: 6px;
}

.jooy-waitlist__sucesso-texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--corpo-grande, 1.375rem);
	font-weight: 500;
	line-height: 1.5;
}

/* ---- formulário ---- */

.jooy-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

@media (max-width: 781px) {
	.jooy-form {
		grid-template-columns: 1fr;
	}
}

.jooy-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.jooy-form__grupo,
.jooy-form__campo--consentimento,
.jooy-form__acoes,
.jooy-form__aviso,
.jooy-form__social {
	grid-column: 1 / -1;
}

.jooy-form__armadilha {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Rótulo acima do campo — nunca placeholder no lugar de rótulo. */
.jooy-form__rotulo {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--jooy-azul);
}

.jooy-form__req {
	color: #B00020;
}

.jooy-form__input {
	width: 100%;
	min-height: 52px;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 54, 255, 0.45);
	border-radius: var(--jooy-raio);
	background: var(--jooy-branco);
	color: var(--jooy-azul);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--jooy-transicao), box-shadow var(--jooy-transicao);
}

.jooy-form__input::placeholder {
	color: rgba(0, 54, 255, 0.45);
}

.jooy-form__input:focus {
	outline: none;
	border-color: var(--jooy-azul);
	box-shadow: 0 0 0 2px var(--jooy-azul);
}

.jooy-waitlist--branco .jooy-form__input:focus {
	border-color: var(--jooy-amarelo);
	box-shadow: 0 0 0 2px var(--jooy-amarelo);
}

.jooy-form__input[aria-invalid="true"] {
	border-color: #B00020;
	box-shadow: 0 0 0 2px rgba(176, 0, 32, 0.28);
}

/* Azul cheio, não com alpha: azul a 78% sobre amarelo cai abaixo de 4,5:1.
   Em opacidade cheia a combinação fecha em 4,83:1 e passa em AA. */
.jooy-form__ajuda {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--jooy-azul);
}

/* Erro nunca só por cor: sempre com texto. */
.jooy-form__erro {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: #B00020;
}

.jooy-form__erro::before {
	content: "⚠ ";
}

/* Botões-rádio grandes, não select. */
.jooy-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*
 * Quatro vínculos em vez de Sim/Não. Em linha eles quebram em duas colunas
 * desalinhadas — "Estudante de instituição parceira" sozinho é quase a largura
 * do formulário. Empilhados, viram uma lista de escolha, que é o que são.
 */
.jooy-form__radios--coluna {
	flex-direction: column;
	gap: 0.6rem;
}

/*
 * O `flex: 1 1 140px` do rótulo mede o EIXO PRINCIPAL, e em coluna o eixo
 * principal é a altura. Cada opção virava uma caixa de 140px de altura com o
 * texto flutuando no meio — 589px de formulário para quatro linhas de texto.
 * Aqui a altura volta a ser a do conteúdo, com o piso de 52px do `min-height`
 * garantindo a área de toque.
 */
.jooy-form__radios--coluna .jooy-radio {
	flex: 0 0 auto;
}

.jooy-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	flex: 1 1 140px;
	min-height: 52px;
	padding: 0.75rem 1.25rem;
	border: 1px solid rgba(0, 54, 255, 0.45);
	border-radius: var(--jooy-raio);
	background: var(--jooy-branco);
	cursor: pointer;
	font-weight: 500;
	transition: border-color var(--jooy-transicao), background-color var(--jooy-transicao);
}

.jooy-radio input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.jooy-radio__marca {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--jooy-azul);
	border-radius: 50%;
	position: relative;
}

.jooy-radio input:checked + .jooy-radio__marca::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--jooy-azul);
}

.jooy-radio:has(input:checked) {
	border-color: var(--jooy-azul);
	border-width: 2px;
	background: rgba(0, 54, 255, 0.06);
}

.jooy-radio:has(input:focus-visible) {
	outline: 2px solid var(--jooy-azul);
	outline-offset: 2px;
}

.jooy-form__nota-associado {
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	background: rgba(0, 54, 255, 0.08);
	border-left: 3px solid var(--jooy-azul);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Consentimento LGPD. */
.jooy-check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
}

.jooy-check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.jooy-check__marca {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 0.15rem;
	border: 2px solid var(--jooy-azul);
	border-radius: 3px;
	background: var(--jooy-branco);
	position: relative;
}

.jooy-check input:checked + .jooy-check__marca::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 7px;
	height: 12px;
	border: solid var(--jooy-azul);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.jooy-check:has(input:focus-visible) .jooy-check__marca {
	outline: 2px solid var(--jooy-azul);
	outline-offset: 2px;
}

.jooy-check__texto {
	font-size: 0.875rem;
	line-height: 1.5;
}

.jooy-form__acoes {
	margin: 0.5rem 0 0;
}

.jooy-form__enviar {
	position: relative;
	width: 100%;
	max-width: 22rem;
}

.jooy-botao__carregando {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: jooy-girar 700ms linear infinite;
}

.jooy-form.esta-enviando .jooy-botao__carregando {
	display: inline-block;
}

.jooy-form.esta-enviando .jooy-form__enviar {
	opacity: 0.72;
	pointer-events: none;
}

@keyframes jooy-girar {
	to { transform: rotate(360deg); }
}

.jooy-form__aviso {
	margin: 0;
	padding: 0.85rem 1rem;
	background: rgba(176, 0, 32, 0.1);
	border-left: 3px solid #B00020;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #7A0016;
}

.jooy-form__social {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

/* ================= tarifas ================= */

.jooy-tarifas {
	overflow-x: auto;
}

.jooy-tarifas__tabela {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.jooy-tarifas__legenda {
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	text-align: left;
	color: rgba(255, 255, 255, 0.78);
}

.jooy-tarifas__tabela :is(th, td) {
	padding: 0.75rem 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.9375rem;
}

.jooy-tarifas__tabela thead th {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jooy-amarelo);
	white-space: nowrap;
}

.jooy-tarifas__tabela tbody th {
	font-weight: 600;
}

/* Tabela de três colunas não se lê em 375px: cada linha vira uma cartinha. */
@media (max-width: 599px) {
	.jooy-tarifas__tabela thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.jooy-tarifas__tabela tbody tr {
		display: block;
		margin-bottom: 1rem;
		padding: 0.85rem 1rem;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 6px;
	}

	.jooy-tarifas__tabela tbody :is(th, td) {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 0;
		border-bottom: 0;
	}

	.jooy-tarifas__tabela tbody th {
		font-size: 1.0625rem;
		padding-bottom: 0.6rem;
		margin-bottom: 0.3rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.24);
	}

	.jooy-tarifas__tabela tbody td::before {
		content: attr(data-rotulo);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--jooy-amarelo);
	}

	.jooy-tarifas__tabela tbody th::before {
		content: none;
	}
}

/* ================= vídeo com fachada ================= */

.jooy-video {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.28);
}

.jooy-video--16-9 { aspect-ratio: 16 / 9; }
.jooy-video--4-5  { aspect-ratio: 4 / 5; }
.jooy-video--1-1  { aspect-ratio: 1 / 1; }

.jooy-video__gatilho {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--jooy-branco);
}

.jooy-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jooy-video__play {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: clamp(64px, 9vw, 88px);
	height: clamp(64px, 9vw, 88px);
	border-radius: 50%;
	background: var(--jooy-amarelo);
	transition: transform var(--jooy-transicao), background-color var(--jooy-transicao);
}

.jooy-video__play::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 6px;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--jooy-azul);
}

.jooy-video__gatilho:hover .jooy-video__play {
	transform: scale(1.06);
}

.jooy-video__rotulo {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 1;
	max-width: calc(100% - 2rem);
	padding: 0.45rem 0.85rem;
	background: rgba(0, 0, 0, 0.62);
	border-radius: 3px;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: left;
}

.jooy-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.jooy-video__fallback {
	position: absolute;
	inset: auto 1rem 1rem;
	color: var(--jooy-branco);
}

/* ================= FAQ ================= */

.jooy-faq {
	max-width: var(--jooy-estreito);
}

.jooy-faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.jooy-faq__item[open] {
	border-bottom-color: var(--jooy-amarelo);
}

.jooy-faq__pergunta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--titulo-card, 1.375rem);
	font-weight: 600;
	line-height: 1.35;
	transition: color var(--jooy-transicao);
}

.jooy-faq__pergunta::-webkit-details-marker {
	display: none;
}

.jooy-faq__pergunta:hover {
	color: var(--jooy-amarelo);
}

.jooy-faq__sinal {
	flex: 0 0 auto;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: 0.3rem;
}

.jooy-faq__sinal::before,
.jooy-faq__sinal::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 2.5px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform var(--jooy-transicao), opacity var(--jooy-transicao);
}

.jooy-faq__sinal::after {
	transform: translateY(-50%) rotate(90deg);
}

.jooy-faq__item[open] .jooy-faq__sinal::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.jooy-faq__resposta {
	padding-bottom: 1.5rem;
	max-width: 68ch;
}

.jooy-faq__resposta > :first-child { margin-top: 0; }
.jooy-faq__resposta > :last-child  { margin-bottom: 0; }

/* ================= linha do tempo ================= */

.jooy-timeline__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jooy-timeline--horizontal .jooy-timeline__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0;
	position: relative;
}

/* A linha contínua atrás dos itens. */
.jooy-timeline--horizontal .jooy-timeline__lista::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 6px;
	height: 1px;
	background: rgba(255, 255, 255, 0.28);
}

.jooy-timeline__item {
	position: relative;
	padding-top: 1.75rem;
	padding-right: 1rem;
}

.jooy-timeline__marca {
	position: absolute;
	top: 0;
	left: 0;
	width: 13px;
	height: 13px;
	background: var(--jooy-amarelo);
	border-radius: 50%;
}

.jooy-timeline__ano {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jooy-menta);
	margin-bottom: 0.3rem;
}

.jooy-timeline__titulo {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--jooy-branco);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--jooy-transicao), border-color var(--jooy-transicao);
}

a.jooy-timeline__titulo:hover {
	color: var(--jooy-amarelo);
	border-bottom-color: var(--jooy-amarelo);
}

@media (max-width: 899px) {
	.jooy-timeline--horizontal .jooy-timeline__lista {
		grid-template-columns: 1fr;
	}

	.jooy-timeline--horizontal .jooy-timeline__lista::before {
		left: 6px;
		right: auto;
		top: 6px;
		bottom: 6px;
		width: 1px;
		height: auto;
	}

	.jooy-timeline__item {
		padding: 0 0 1.25rem 2rem;
	}

	.jooy-timeline__marca {
		top: 4px;
	}

	.jooy-timeline__ano {
		display: inline;
		margin-right: 0.5rem;
	}
}

/* ================= galeria (core/gallery + lightbox nativo) ================= */

/* Grade irregular: a 1ª e a 6ª foto ocupam dois módulos, o resto um. */
/* O !important aqui não é preguiça. O core do Gutenberg escreve as regras da
   galeria como `figure.wp-block-image:not(#individual-image)` — o :not() com um
   id leva a especificidade para (1,3,1), nível de ID, que nenhum seletor de
   classe alcança. É de lá que vêm `display:flex` e `width:calc(50% - gap)` na
   figure, e é por isso que a foto entrava no tamanho natural em vez de
   preencher a célula da grade. */
.wp-block-gallery.is-style-jooy-irregular.has-nested-images {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.2vw, 1rem);
}

.wp-block-gallery.is-style-jooy-irregular.has-nested-images figure.wp-block-image {
	display: block !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}

.wp-block-gallery.is-style-jooy-irregular.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* O segundo destaque só entra quando há foto para fechar a grade: 6º item com
   pelo menos mais quatro depois dele significa 10 ou mais no total. Com 9 fotos
   ele vira célula simples e a última linha fecha sem buraco — a grade se ajusta
   ao acervo em vez de exigir um número exato. */
.wp-block-gallery.is-style-jooy-irregular.has-nested-images figure.wp-block-image:nth-child(1),
.wp-block-gallery.is-style-jooy-irregular.has-nested-images figure.wp-block-image:nth-child(6):nth-last-child(n+5) {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto !important;
}

@media (max-width: 781px) {
	.wp-block-gallery.is-style-jooy-irregular.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-gallery.is-style-jooy-irregular.has-nested-images figure.wp-block-image:nth-child(6):nth-last-child(n+5) {
		grid-column: span 1;
		grid-row: span 1;
		aspect-ratio: 4 / 3;
	}
}

/* ================= cartões e utilitários de pattern ================= */

/* Cartão de pilar do bloco "O Congresso". */
.jooy-cartao {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	overflow: hidden;
}

.jooy-cartao :is(h3, h4) {
	color: var(--jooy-amarelo);
	margin-top: 0;
}

.jooy-cartao > :last-child {
	margin-bottom: 0;
}

/* Cartão do PRESE: identidade própria, margens visíveis, verde que não vaza. */
.jooy-prese {
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--wp--preset--color--prese-verde, #00782E);
	border-radius: 10px;
	color: var(--jooy-branco);
}

.jooy-prese :is(h2, h3) {
	color: var(--jooy-branco);
}

.jooy-prese .jooy-botao--primario {
	background: var(--wp--preset--color--prese-limao, #B1D110);
	color: #123400;
}

.jooy-prese__assinaturas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.jooy-prese__assinaturas img {
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

/* Mural de logos de parceiros. */
.jooy-parceiros__grupo + .jooy-parceiros__grupo {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.jooy-parceiros__titulo {
	margin: 0 0 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jooy-amarelo);
}

.jooy-parceiros__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jooy-parceiros__lista img {
	/* Altura padronizada, não largura: logo largo não pode dominar o mural. */
	height: 44px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: filter var(--jooy-transicao), opacity var(--jooy-transicao);
}

.jooy-parceiros__lista a:hover img {
	filter: none;
	opacity: 1;
}

/* Cartão de hotel. */
.jooy-hotel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 8px;
	height: 100%;
}

.jooy-hotel__etiqueta {
	align-self: flex-start;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.jooy-hotel__etiqueta--associados {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

.jooy-hotel__etiqueta--todos {
	background: var(--jooy-menta);
	color: var(--jooy-azul);
}

.jooy-hotel > :last-child {
	margin-top: auto;
	margin-bottom: 0;
}


/* Estilos de bloco do core reaproveitando os componentes do tema. */
.is-style-jooy-cartao { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; overflow: hidden; }
.is-style-jooy-cartao :is(h3, h4) { color: var(--jooy-amarelo); margin-top: 0; }
.is-style-jooy-cartao > :last-child { margin-bottom: 0; }

.is-style-jooy-hotel { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgba(255,255,255,0.24); border-radius: 8px; height: 100%; }

/* Foto no topo do cartão de hotel. Fica dentro do respiro do cartão em vez de
   sangrar até a borda: o cartão tem canto arredondado e borda de 1px, e uma
   imagem sangrando exigiria margem negativa que reabre o canto. */
.is-style-jooy-hotel .jooy-hotel__foto {
	margin: 0;
	order: -1;
}

/*
 * 3/2, e não 16/9. As duas fotos de hotel nascem em 3/2 (680x453 e 876x609):
 * forçá-las a 16/9 obrigava o `cover` a cortar um quinto da altura e ampliar o
 * resto para cobrir a caixa — a foto chegava recortada e esticada ao mesmo
 * tempo. Em 3/2 o `cover` não tem o que cortar e a imagem aparece inteira, no
 * enquadramento que o hotel mandou. Os dois cartões seguem com a mesma altura
 * de foto porque a proporção é fixa, não porque a imagem foi amputada.
 */
.is-style-jooy-hotel .jooy-hotel__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
}

.is-style-jooy-prese { padding: clamp(1.75rem, 4vw, 3rem); background: var(--wp--preset--color--prese-verde, #00782E); border-radius: 10px; color: var(--jooy-branco); }
.is-style-jooy-prese :is(h2, h3) { color: var(--jooy-branco); }

/* ================= hero ================= */

/* O logo do XI CBPE é um lockup vertical: em coluna única ele ocupa a tela
   inteira e empurra o H1 para fora da primeira dobra. Daí as duas colunas e o
   teto de largura por breakpoint. */
/* ---------- peças do kit no cenário ---------- */

:root {
	/* Como imagem de máscara o SVG vira documento isolado: `currentColor` não
	   resolve e a máscara sai vazia. Por isso a peça entra aqui em data-URI com
	   preto sólido — quem recolore é o background-color do elemento.
	   Os arquivos em assets/svg/kit/ seguem com currentColor, para o uso inline. */
	--jooy-kit-raios: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.761 116.762" fill="none"><g transform="translate(-3.355 -302.441)"><g fill="black" fill-rule="evenodd"><path class="jooy-kit__raio" d="M58.52 302.441L58.52 344.375L42.465 305.621L36.52 308.082L52.629 346.98L22.855 317.203L18.301 321.753L48.156 351.605L9.086 335.422L6.625 341.372L45.82 357.605L3.355 357.605L3.355 364.043L45.575 364.043L6.667 380.156L9.127 386.106L48.108 369.957L18.3 399.766L22.854 404.316L52.565 374.606L36.475 413.446L42.425 415.906L58.519 377.051L58.519 419.203L64.956 419.203L64.956 376.73L81.202 415.96L87.147 413.496L70.96 374.41L100.866 404.316L105.417 399.766L75.589 369.934L114.495 386.054L116.96 380.105L78.175 364.043L120.116 364.043L120.116 357.605L77.934 357.605L117.004 341.422L114.539 335.477L75.539 351.629L105.418 321.754L100.868 317.204L70.891 347.176L87.105 308.031L81.16 305.566L64.957 344.691L64.957 302.441Z"/></g></g></svg>');
	--jooy-kit-pontos: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.711 39.57" fill="none"><g transform="translate(-0.254 -116.352)"><g fill="black" fill-rule="evenodd"><path class="jooy-kit__ponto" d="M16.082 116.352L16.082 124.266L23.996 124.266L23.996 116.352Z"/><path class="jooy-kit__ponto" d="M95.219 116.352L95.219 124.266L103.133 124.266L103.133 116.352Z"/><path class="jooy-kit__ponto" d="M47.738 116.352L47.738 124.266L55.652 124.266L55.652 116.352Z"/><path class="jooy-kit__ponto" d="M79.395 116.352L79.395 124.266L87.309 124.266L87.309 116.352Z"/><path class="jooy-kit__ponto" d="M31.91 124.266L39.824 124.266L39.824 116.352L31.91 116.352Z"/><path class="jooy-kit__ponto" d="M63.563 116.352L63.563 124.266L71.477 124.266L71.477 116.352Z"/><path class="jooy-kit__ponto" d="M111.047 140.094L118.965 140.094L118.965 132.18L111.047 132.18Z"/><path class="jooy-kit__ponto" d="M23.996 148.008L16.082 148.008L16.082 155.922L23.996 155.922Z"/><path class="jooy-kit__ponto" d="M103.133 148.008L95.219 148.008L95.219 155.922L103.133 155.922Z"/><path class="jooy-kit__ponto" d="M71.477 148.008L63.562 148.008L63.562 155.922L71.477 155.922Z"/><path class="jooy-kit__ponto" d="M87.309 148.008L79.395 148.008L79.395 155.922L87.309 155.922Z"/><path class="jooy-kit__ponto" d="M111.047 124.266L118.965 124.266L118.965 116.352L111.047 116.352Z"/><path class="jooy-kit__ponto" d="M55.652 148.008L47.738 148.008L47.738 155.922L55.652 155.922Z"/><path class="jooy-kit__ponto" d="M31.91 155.922L39.824 155.922L39.824 148.008L31.91 148.008Z"/><path class="jooy-kit__ponto" d="M111.047 155.922L118.965 155.922L118.965 148.008L111.047 148.008Z"/><path class="jooy-kit__ponto" d="M87.309 132.18L79.395 132.18L79.395 140.094L87.309 140.094Z"/><path class="jooy-kit__ponto" d="M103.133 132.18L95.219 132.18L95.219 140.094L103.133 140.094Z"/><path class="jooy-kit__ponto" d="M23.996 132.18L16.082 132.18L16.082 140.094L23.996 140.094Z"/><path class="jooy-kit__ponto" d="M71.477 132.18L63.562 132.18L63.562 140.094L71.477 140.094Z"/><path class="jooy-kit__ponto" d="M55.652 132.18L47.738 132.18L47.738 140.094L55.652 140.094Z"/><path class="jooy-kit__ponto" d="M31.91 140.094L39.824 140.094L39.824 132.18L31.91 132.18Z"/><path class="jooy-kit__ponto" d="M0.254 116.352L0.254 124.266L8.168 124.266L8.168 116.352Z"/><path class="jooy-kit__ponto" d="M8.168 132.18L0.254 132.18L0.254 140.094L8.168 140.094Z"/><path class="jooy-kit__ponto" d="M8.168 148.008L0.254 148.008L0.254 155.922L8.168 155.922Z"/></g></g></svg>');
}

/*
 * Enfeites do kit. São elementos reais no HTML, não pseudo-elementos: a seção
 * já gasta `::before` com a foto de fundo e `::after` com o véu, e um terceiro
 * uso atropelaria um dos dois — o véu, justamente o que garante contraste.
 */
.jooy-section__enfeite {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-color: var(--jooy-branco);
}

/* Os raios no pé da seção, sangrando pela borda de baixo — é o uso que o
   documento de design prescreve para a peça. */
.jooy-section__enfeite--raios {
	left: 50%;
	bottom: -18%;
	width: min(78vw, 620px);
	aspect-ratio: 1;
	translate: -50% 0;
	opacity: 0.12;
	-webkit-mask: var(--jooy-kit-raios) center / contain no-repeat;
	mask: var(--jooy-kit-raios) center / contain no-repeat;
}

/* A grelha de pontos como textura de canto. */
.jooy-section__enfeite--pontos {
	top: clamp(1rem, 3vw, 2.5rem);
	right: clamp(1rem, 4vw, 3rem);
	width: min(30vw, 240px);
	aspect-ratio: 118.71 / 39.57;
	opacity: 0.22;
	-webkit-mask: var(--jooy-kit-pontos) center / contain no-repeat;
	mask: var(--jooy-kit-pontos) center / contain no-repeat;
}

/* Sobre fundo claro o enfeite inverte, senão some. */
.jooy-section--fundo-amarelo .jooy-section__enfeite,
.jooy-section--fundo-branco .jooy-section__enfeite,
.jooy-section--fundo-menta .jooy-section__enfeite {
	background-color: var(--jooy-azul);
}

/* Sobre foto ou vídeo o enfeite sai: já há imagem competindo pela atenção. */
.jooy-section--com-foto .jooy-section__enfeite,
.jooy-section--com-video .jooy-section__enfeite {
	display: none;
}

@media (max-width: 781px) {
	/* Limite do documento de design: no mobile, duas peças por dobra. As
	   decorativas são as primeiras a sair. */
	.jooy-section__enfeite {
		display: none;
	}
}

.jooy-hero .jooy-hero__grade {
	align-items: center;
}

.jooy-hero__logos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1rem, 2vw, 1.75rem);
}

.jooy-hero__logos figure {
	margin: 0;
	width: 100%;
}

.jooy-hero__logos img {
	width: 100%;
	height: auto;
}

.jooy-hero__abrape { max-width: 170px; }

.jooy-hero__texto > :first-child { margin-top: 0; }

@media (max-width: 781px) {
	/* No celular o lockup vira assinatura, não protagonista: o H1 e o
	   cronômetro precisam caber na primeira tela. */
	.jooy-hero__abrape { max-width: 110px; }

	/* Coluna, alinhados à esquerda: em linha o wordmark encosta na base do
	   lockup e a composição parece acidente. */
	.jooy-hero__logos {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

/* ================= logo animado (jooy/logo) ================= */

/* Embutir o SVG em vez de servir <img> é o que dá ao CSS e ao GSAP acesso a
   cada letra, faísca e linha de texto do lockup — dentro de um <img> o
   conteúdo é opaco para a página. */
.jooy-logo-anim {
	width: 100%;
	max-width: var(--jooy-logo-largura, 320px);
}

.jooy-logo-anim--centro { margin-inline: auto; }
.jooy-logo-anim--direita { margin-inline-start: auto; }

.jooy-logo-anim svg {
	display: block;
	width: 100%;
	height: auto;
	/* As faíscas encostam nas bordas do viewBox (x 0,4 e x 139,85) e os easings
	   de entrada passam do ponto final de propósito. Sem isto, o overshoot
	   entra cortado. */
	overflow: visible;
}

/* Aqui NÃO entra transform-box: fill-box. O GSAP resolve a origem de cada
   <path> sozinho: grava data-svg-origin e já assa o deslocamento na matriz, em
   espaço de usuário do SVG. Com fill-box o navegador aplica esse deslocamento
   uma segunda vez e, no meio da entrada, as letras saem voando do lugar — o C
   monta em cima do P. Medido: 17 mil pixels de diferença a 0,90s. */

/* Estado inicial da entrada. Mora no CSS, e não no JS, porque o app.js é defer:
   a logo pintaria inteira e só depois saltaria para trás para animar. O JS
   remove esta classe assim que assume o controle; se ele nunca chegar, o
   resgate revela tudo em 3s e ninguém fica olhando para um buraco. */
.jooy-logo-anim--anima [data-parte] {
	opacity: 0;
	animation: jooy-resgate 0s linear 3s forwards;
}

@keyframes jooy-resgate {
	to { opacity: 1; }
}

/* Movimento reduzido não espera resgate nenhum: a logo já nasce inteira. */
@media (prefers-reduced-motion: reduce) {
	.jooy-logo-anim--anima [data-parte] {
		opacity: 1;
		animation: none;
	}
}

@media (max-width: 781px) {
	.jooy-logo-anim {
		max-width: var(--jooy-logo-largura-mobile, var(--jooy-logo-largura, 320px));
	}
}

/* Fachada de vídeo sem miniatura: fundo da marca, não caixa cinza quebrada. */
.jooy-video:not(:has(.jooy-video__poster)) {
	background: linear-gradient(135deg, var(--jooy-azul) 0%, var(--wp--preset--color--azul-escuro, #0022A8) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

/* O PRESE tem identidade própria: o CTA dele usa o verde-limão da marca. */
.is-style-jooy-prese .wp-element-button,
.is-style-jooy-prese .wp-block-button__link {
	background-color: var(--wp--preset--color--prese-limao, #B1D110);
	color: #123400;
}

.is-style-jooy-prese .wp-element-button:hover,
.is-style-jooy-prese .wp-block-button__link:hover {
	background-color: #9BBB0E;
	color: #123400;
}

/* O box da lista de espera respira melhor com o cabeçalho em duas colunas
   quando há largura para isso. */
@media (min-width: 1024px) {
	.jooy-waitlist__cabecalho {
		max-width: 62ch;
	}
}

/* ================= botão de contorno do core ================= */

/* O tema estiliza o is-style-outline em vez de embutir cor no bloco: markup
   com estilo inline tem de casar exatamente com o save() do core, e qualquer
   divergência faz o editor acusar "conteúdo inválido" para o cliente. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--jooy-branco);
	border: 2px solid var(--jooy-branco);
	transition: background-color var(--jooy-transicao), color var(--jooy-transicao), transform var(--jooy-transicao);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--jooy-branco);
	color: var(--jooy-azul);
	transform: translateY(-2px);
}

/* Sobre amarelo, branco ou menta o contorno branco desaparece. */
.jooy-section--fundo-amarelo .wp-block-button.is-style-outline > .wp-block-button__link,
.jooy-section--fundo-branco .wp-block-button.is-style-outline > .wp-block-button__link,
.jooy-section--fundo-menta .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--jooy-azul);
	border-color: var(--jooy-azul);
}

.jooy-section--fundo-amarelo .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.jooy-section--fundo-branco .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.jooy-section--fundo-menta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--jooy-azul);
	color: var(--jooy-branco);
}

/* ================= parede de reels ================= */

/*
 * Os clipes são de celular: 720 × 1280, na vertical. Em cartão vertical de
 * ~400 px, 720p sobra e o corte vertical vira escolha, não defeito.
 *
 * A parede virou fita: cartões encostados um no outro, sem vão, sem arco e sem
 * rótulo. A mecânica de rolagem está em `.jooy-fita`, mais abaixo — aqui fica
 * só o que é do cartão de vídeo.
 */
.jooy-reel {
	position: relative;
	margin: 0;
	flex: 0 0 auto;
	/*
	 * A altura manda e a largura sai da proporção. O teto de 82vh existe para o
	 * cartão nunca passar da dobra; o outro termo faz a conta ao contrário — a
	 * largura que caberia com N cartões na tela, convertida em altura pelo 16/9.
	 * Assim o controle "quantos cartões cabem" do editor continua valendo.
	 */
	height: min(76vh, calc((100vw - var(--jooy-barra-rolagem, 0px)) / var(--jooy-fita-visiveis, 3) * 16 / 9));
	width: auto;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: var(--jooy-azul-escuro, #0022A8);
}

.jooy-reel__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * O rótulo está desligado na página, mas o interruptor continua no editor — e
 * um interruptor que liga algo sem estilo é uma armadilha. O degradê por baixo
 * não é enfeite: o pé do quadro é imprevisível (chão claro, luz de palco,
 * parede branca) e texto branco sozinho some.
 */
.jooy-reel__rotulo {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 0.75rem 0.7rem;
	background: linear-gradient(to top, rgba(0, 34, 168, 0.92), transparent);
	color: var(--jooy-branco);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Sobre fundo claro o cartão ganha o azul da identidade como moldura tonal. */
.jooy-section--fundo-amarelo .jooy-reel,
.jooy-section--fundo-branco .jooy-reel,
.jooy-section--fundo-menta .jooy-reel {
	background: var(--jooy-azul);
}

/* ---------- data e local em etiquetas (jooy/data-evento) ---------- */

/*
 * A data deixa de ser uma linha de texto e vira três caixas de cor chapada —
 * dia, mês e ano, cada um na sua. É o mesmo gesto do resto do kit: cor sólida
 * em bloco, sem gradiente e sem sombra.
 *
 * O preenchimento não nasce pronto: cresce da esquerda para a direita, como
 * marca-texto passando por cima da palavra, com as etiquetas entrando em
 * sequência. É animação de CSS puro, sem GSAP, de propósito — está na primeira
 * dobra e não pode depender de um arquivo que ainda está baixando.
 */

.jooy-data {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
}

.jooy-data__linha {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.jooy-chip {
	--jooy-chip-cor: var(--jooy-amarelo);
	--jooy-chip-texto: var(--jooy-azul);
	--jooy-chip-ordem: 0;

	position: relative;
	display: inline-block;
	padding: 0.3em 0.62em 0.26em;
	color: var(--jooy-chip-texto);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jooy-chip::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--jooy-chip-cor);
	transform: scaleX(0);
	transform-origin: left center;
	animation: jooy-chip-pinta 0.46s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(0.28s + var(--jooy-chip-ordem) * 0.085s);
}

/* O texto vai num filho posicionado porque o preenchimento é um `::before`
   absoluto: sem isto a cor cobriria a palavra em vez de passar por trás. */
.jooy-chip__t {
	position: relative;
	opacity: 0;
	animation: jooy-chip-texto 0.2s linear forwards;
	animation-delay: calc(0.41s + var(--jooy-chip-ordem) * 0.085s);
}

@keyframes jooy-chip-pinta {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes jooy-chip-texto {
	to { opacity: 1; }
}

.jooy-chip--amarelo { --jooy-chip-cor: var(--jooy-amarelo); }
.jooy-chip--branco  { --jooy-chip-cor: var(--jooy-branco); }
.jooy-chip--menta   { --jooy-chip-cor: var(--jooy-menta); }

/* A segunda linha é o detalhe, não a notícia: fica vazada, menor e herda a cor
   do texto da seção — assim funciona sobre qualquer um dos cinco fundos. */
.jooy-chip--vazado {
	--jooy-chip-texto: currentColor;

	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	padding: 0.4em 0.7em 0.36em;
}

/*
 * A vazada não usa o mesmo `scaleX`: escalar uma caixa com borda achata as
 * bordas verticais, e elas engrossariam de 0,2px a 1,5px durante a entrada.
 * Aqui a moldura simplesmente aparece.
 */
.jooy-chip--vazado::before {
	background: transparent;
	border: 1.5px solid currentColor;
	opacity: 0;
	transform: scaleX(1);
	animation-name: jooy-chip-moldura;
}

@keyframes jooy-chip-moldura {
	to { opacity: 0.55; }
}

.jooy-data__endereco {
	margin: 0.15rem 0 0;
	font-size: 0.875rem;
	opacity: 0.82;
}

/* Sobre fundo claro o azul das etiquetas cheias sumiria contra a página; a
   inversão devolve o contraste sem trocar a paleta. */
.jooy-section--fundo-amarelo .jooy-chip--amarelo,
.jooy-section--fundo-branco .jooy-chip--branco,
.jooy-section--fundo-menta .jooy-chip--menta {
	--jooy-chip-cor: var(--jooy-azul);
	--jooy-chip-texto: var(--jooy-branco);
}

@media (max-width: 599px) {
	.jooy-chip {
		font-size: 1.125rem;
	}

	.jooy-chip--vazado {
		font-size: 0.8125rem;
	}
}

/*
 * Movimento reduzido: a etiqueta já nasce pintada. Sem isto o `forwards` de um
 * `scaleX(0)` cancelado deixaria a caixa vazia e a palavra invisível.
 */
@media (prefers-reduced-motion: reduce) {
	.jooy-chip::before,
	.jooy-chip__t {
		animation: none;
	}

	.jooy-chip::before {
		transform: scaleX(1);
	}

	/* A vazada entra por opacidade, não por escala: sem esta linha a moldura
	   ficaria parada em `opacity: 0` e a etiqueta sairia sem contorno. */
	.jooy-chip--vazado::before {
		opacity: 0.55;
	}

	.jooy-chip__t {
		opacity: 1;
	}
}

/* ================= fita: rolagem horizontal presa ================= */

/*
 * Uma peça só, usada pela parede de reels e pela galeria de fotos: os itens
 * ficam encostados numa fita que sangra de borda a borda, e no desktop a
 * rolagem vertical fica presa enquanto a fita corre na horizontal.
 *
 * A ordem de leitura importa aqui. O estado que sai do servidor é uma fita com
 * rolagem horizontal NATIVA — funciona sem JS, sem GSAP, no leitor de tela e no
 * teclado. O `esta-presa` é acrescentado pelo app.js só quando há GSAP,
 * ponteiro fino e tela larga; é refinamento por cima de algo que já funcionava,
 * nunca pré-requisito.
 */
.jooy-fita {
	--jooy-fita-visiveis: 3;

	position: relative;
	/*
	 * Sangria até a borda da tela, só com margem — nada de `translate`. O pin do
	 * ScrollTrigger troca o elemento para `position: fixed` e mede a posição:
	 * uma transformação de centralização sobreviveria à troca e jogaria a fita
	 * meia tela para o lado no instante em que ela prende.
	 *
	 * `--jooy-barra-rolagem` é a largura da barra de rolagem, escrita pelo app.js. Sem
	 * descontá-la, 100vw passa da largura útil e a fita nasce deslocada.
	 */
	width: calc(100vw - var(--jooy-barra-rolagem, 0px));
	max-width: none;
	margin-left: calc(50% - 50vw + var(--jooy-barra-rolagem, 0px) / 2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.jooy-fita::-webkit-scrollbar {
	display: none;
}

.jooy-fita__trilho {
	display: flex;
	gap: 0;
	width: max-content;
	margin: 0;
}

.jooy-fita__trilho > * {
	scroll-snap-align: start;
}

/*
 * Preso: quem anda é o trilho, por transform, e a fita passa a ser uma janela
 * da altura da dobra. O respiro de cima é a altura do header — sem ele o
 * primeiro cartão nasce por baixo da barra fixa.
 */
/*
 * Presa, a fita não vira uma janela de 100svh. Já tentei assim e o resultado é
 * uma tira de 600px boiando no meio de uma tela vazia — a altura é a da própria
 * tira, e o ScrollTrigger prende com o centro dela no centro da tela. O respiro
 * garante que nem a tira nem a régua encostem no header fixo.
 */
.jooy-fita.esta-presa {
	overflow: hidden;
	padding-block: clamp(1rem, 3vh, 2.5rem);
	scroll-snap-type: none;
}

.jooy-fita.esta-presa .jooy-fita__trilho {
	will-change: transform;
}

/*
 * Trilho de progresso. Seção presa que come a rolagem sem dar sinal passa a
 * impressão de página travada; esta régua diz quanto falta.
 */
.jooy-fita__progresso {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: color-mix(in srgb, var(--jooy-branco) 20%, transparent);
	opacity: 0;
	transition: opacity var(--jooy-transicao);
	pointer-events: none;
}

.jooy-fita.esta-presa .jooy-fita__progresso {
	opacity: 1;
}

.jooy-fita__progresso > span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--jooy-amarelo);
	transform: scaleX(0);
	transform-origin: left center;
}

.jooy-section--fundo-amarelo .jooy-fita__progresso > span,
.jooy-section--fundo-branco .jooy-fita__progresso > span,
.jooy-section--fundo-menta .jooy-fita__progresso > span {
	background: var(--jooy-azul);
}

/*
 * Controles da fita solta.
 *
 * A régua já existia, mas só acendia presa. Solta, a fita ficava sem sinal
 * nenhum de que havia mais cartões à direita — e sem barra de rolagem, porque
 * ela está escondida por estilo. Aqui a régua acende também no estado solto e
 * ganha as setas ao lado, que são o único controle que um mouse alcança: roda
 * vertical não move contêiner horizontal, e arrastar exige uma barra que não
 * está na tela.
 */
.jooy-fita.tem-controles .jooy-fita__progresso {
	opacity: 1;
}

.jooy-fita__setas {
	display: none;
	gap: 0.75rem;
	justify-content: center;
	margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.jooy-fita.tem-controles + .jooy-fita__setas {
	display: flex;
}

.jooy-fita__seta {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--jooy-branco) 40%, transparent);
	border-radius: 50%;
	background: transparent;
	color: var(--jooy-branco);
	cursor: pointer;
	transition: background-color var(--jooy-transicao), border-color var(--jooy-transicao),
		color var(--jooy-transicao), opacity var(--jooy-transicao);
}

.jooy-fita__seta svg {
	width: 22px;
	height: 22px;
}

.jooy-fita__seta--anterior svg {
	transform: rotate(180deg);
}

.jooy-fita__seta:hover:not(:disabled),
.jooy-fita__seta:focus-visible {
	background: var(--jooy-amarelo);
	border-color: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

/* Ponta da fita: a seta continua na tela, apagada, para a régua não perder o
   par. Sumir com ela faria o outro botão pular de lugar a cada avanço. */
.jooy-fita__seta:disabled {
	opacity: 0.28;
	cursor: default;
}

.jooy-section--fundo-amarelo .jooy-fita__seta,
.jooy-section--fundo-branco .jooy-fita__seta,
.jooy-section--fundo-menta .jooy-fita__seta {
	border-color: color-mix(in srgb, var(--jooy-azul) 40%, transparent);
	color: var(--jooy-azul);
}

.jooy-section--fundo-amarelo .jooy-fita__seta:hover:not(:disabled),
.jooy-section--fundo-amarelo .jooy-fita__seta:focus-visible,
.jooy-section--fundo-branco .jooy-fita__seta:hover:not(:disabled),
.jooy-section--fundo-branco .jooy-fita__seta:focus-visible,
.jooy-section--fundo-menta .jooy-fita__seta:hover:not(:disabled),
.jooy-section--fundo-menta .jooy-fita__seta:focus-visible {
	background: var(--jooy-azul);
	border-color: var(--jooy-azul);
	color: var(--jooy-branco);
}

/* A fita solta vira alvo de teclado; o foco precisa aparecer. */
.jooy-fita:focus-visible {
	outline: 3px solid var(--jooy-amarelo);
	outline-offset: -3px;
}

/* ---------- a galeria de fotos como fita ---------- */

/*
 * O `!important` não é preguiça, é aritmética de especificidade: o core do
 * Gutenberg escreve as regras da galeria como
 * `figure.wp-block-image:not(#individual-image)`, e o `:not()` com um id leva o
 * seletor a (1,3,1) — nível de ID, que nenhum seletor de classe alcança. É de
 * lá que vêm o `display:flex` e o `width:calc(50% - gap)` na figure.
 */
.jooy-fita--galeria .wp-block-gallery.has-nested-images {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	width: max-content;
	margin: 0;
}

/*
 * Quatro na tela, e não três como os reels: são dez fotos contra seis clipes, e
 * a cada cartão a mais na tela a fita encurta um percurso inteiro de rolagem.
 */
.jooy-fita--galeria {
	--jooy-fita-visiveis: 4;
}

.jooy-fita--galeria figure.wp-block-image {
	display: block !important;
	margin: 0 !important;
	flex: 0 0 auto;
	/* Mesma conta dos reels, com a proporção da foto. 4:5 e não 3:4: o original
	   é 3:2 deitado, e cada décimo de proporção a menos salva enquadramento. */
	height: min(72vh, calc((100vw - var(--jooy-barra-rolagem, 0px)) / var(--jooy-fita-visiveis, 4) * 5 / 4));
	width: auto !important;
	max-width: none !important;
	aspect-ratio: 4 / 5;
	border-radius: 0;
	overflow: hidden;
}

.jooy-fita--galeria figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0;
}

/* ---------- as trilhas de conteúdo como fita ---------- */

/*
 * O cartão de trilha não é a mesma peça da galeria. Lá a foto é o conteúdo e
 * ocupa o quadro inteiro; aqui ela ilustra um texto que precisa ser lido —
 * título e resumo — e texto sobre foto de evento só fecha contraste com véu.
 * Em vez de empilhar mais um degradê, o cartão separa as duas coisas: foto em
 * cima, atrás da cúpula do kit, e o texto embaixo em cor chapada. Doze arcos
 * encostados leem como colunata, que é o gesto da identidade em escala de fita.
 */
.jooy-trilhas {
	--jooy-fita-visiveis: 3.6;
}

/*
 * A largura sai de `visiveis` e a altura é que se dobra na tela baixa — o
 * contrário dos reels. Lá o cartão é só vídeo e encolher junto não custa nada;
 * aqui encolher a largura apertaria a medida do texto, e o resumo mais longo
 * passa de 160 caracteres. Com a largura firme, quem cede na tela baixa é a
 * altura, e a foto é a única parte que encolhe (ver `__cena`, abaixo).
 */
.jooy-trilha {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: calc((100vw - var(--jooy-barra-rolagem, 0px)) / var(--jooy-fita-visiveis, 3.6));
	height: min(78vh, calc((100vw - var(--jooy-barra-rolagem, 0px)) / var(--jooy-fita-visiveis, 3.6) * 4 / 3));
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--azul-escuro, #0022A8);
	/* Filete no lado esquerdo em vez de vão: a fita fica contínua como filme, e
	   a emenda entre cartões continua legível. */
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16);
	counter-increment: jooy-trilha;
	/* A tipografia do cartão mede pela largura DELE, não pela da tela: é o que
	   mantém o número de linhas do título e do resumo constante do telefone ao
	   monitor largo, sem uma escada de media queries. */
	container-type: inline-size;
	transition: background-color var(--jooy-transicao);
}

.jooy-trilhas .jooy-fita__trilho {
	counter-reset: jooy-trilha;
}

/* ---------- a cena ---------- */

/*
 * A janela da foto é o único elemento elástico do cartão: numa tela baixa a
 * altura do cartão cai e é daqui que sai o espaço, nunca do texto. O piso de
 * 30% impede que ela vire uma tira sem imagem.
 */
.jooy-trilha__cena {
	--jooy-cupula: min(6rem, 42%);

	position: relative;
	flex: 1 1 auto;
	min-height: 30%;
	overflow: hidden;
	-webkit-mask:
		var(--jooy-cupula-svg) top center / 100% var(--jooy-cupula) no-repeat,
		linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--jooy-cupula)) no-repeat;
	mask:
		var(--jooy-cupula-svg) top center / 100% var(--jooy-cupula) no-repeat,
		linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--jooy-cupula)) no-repeat;
}

/*
 * O recuo dos cartões de fora do centro é véu azul, não cinza: dessaturar
 * apagava a foto e o cartão parecia quebrado, enquanto o azul da identidade a
 * faz recuar PARA DENTRO da faixa da seção — é o mesmo gesto do véu das seções
 * com foto, na escala do cartão.
 */
.jooy-trilha__cena::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--jooy-azul);
	opacity: 0;
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

/*
 * 116% de largura com 8% para fora de cada lado. O passeio horizontal do
 * app.js nunca passa de 7,5% da largura do cartão, então a borda da foto não
 * chega a aparecer nem no cartão mais afastado do centro.
 */
.jooy-trilha__foto {
	position: absolute;
	inset: 0 auto 0 -8%;
	width: 116%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- o corpo ---------- */

.jooy-trilha__corpo {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(0.9rem, 5cqi, 1.5rem) clamp(0.9rem, 5.5cqi, 1.6rem) clamp(1.1rem, 6cqi, 1.75rem);
}

/*
 * O número é índice, não decoração de fundo: vazado enquanto o cartão espera e
 * amarelo cheio quando ele é o do centro. É o que dá à fita a leitura de
 * "01 de 12" sem precisar de um contador flutuante por cima.
 */
.jooy-trilha__numero {
	display: block;
	font-size: clamp(1.5rem, 8.5cqi, 2.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.5);
	transition: color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jooy-trilha__numero::before {
	content: counter(jooy-trilha, decimal-leading-zero);
}

.jooy-trilha.esta-ativo .jooy-trilha__numero {
	color: var(--jooy-amarelo);
}

/*
 * Vazado só onde o vazado existe. Sem o @supports, um navegador sem
 * `-webkit-text-stroke` mostraria um número transparente — ou seja, nenhum.
 */
@supports (-webkit-text-stroke: 1px red) {
	.jooy-trilhas.esta-viva .jooy-trilha__numero {
		color: transparent;
		-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.72);
		transition: color 380ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-text-stroke-color 380ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.jooy-trilhas.esta-viva .jooy-trilha.esta-ativo .jooy-trilha__numero {
		color: var(--jooy-amarelo);
		-webkit-text-stroke-color: var(--jooy-amarelo);
	}
}

/* Régua amarela sob o número: cresce da esquerda quando o cartão acende. */
.jooy-trilha__regua {
	display: block;
	width: clamp(2rem, 14cqi, 3.5rem);
	height: 3px;
	margin: clamp(0.5rem, 2.6cqi, 0.8rem) 0 clamp(0.6rem, 3cqi, 0.95rem);
	background: var(--jooy-amarelo);
	transform-origin: left center;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jooy-trilhas.esta-viva .jooy-trilha__regua {
	transform: scaleX(0);
}

.jooy-trilhas.esta-viva .jooy-trilha.esta-ativo .jooy-trilha__regua {
	transform: scaleX(1);
}

/*
 * As alturas mínimas do título e do resumo são o que mantém a colunata alinhada.
 * A janela da foto é elástica (`flex: 1 1 auto`), então cada linha de texto a
 * mais empurrava o pé da foto para cima — e a fita ficava com uma base de arcos
 * serrilhada, que lê como erro e não como ritmo. Reservar duas linhas de título
 * e quatro de resumo iguala o corpo de todos os cartões sem travar a altura em
 * pixel, que quebraria na tela baixa. Em `em`, a reserva acompanha o tamanho de
 * fonte que a container query acabou de calcular.
 */
.jooy-trilha__titulo {
	margin: 0;
	min-height: 2.4em;
	font-size: clamp(0.95rem, 4.6cqi, 1.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--jooy-branco);
	text-wrap: balance;
	transition: color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jooy-trilha.esta-ativo .jooy-trilha__titulo {
	color: var(--jooy-amarelo);
}

.jooy-trilha__resumo {
	margin: clamp(0.45rem, 2.4cqi, 0.7rem) 0 0;
	min-height: 6em;
	font-size: clamp(0.75rem, 3.4cqi, 0.875rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * A ordem aqui é a mesma de toda a fita: o estado que sai do servidor é o
 * cartão aceso e inteiro — foto em cor, resumo legível. É o `esta-viva`, escrito
 * pelo app.js, que apaga os cartões de fora do centro. Sem JS, com movimento
 * reduzido ou sem GSAP, ninguém fica com texto meio transparente na tela.
 */
.jooy-trilhas.esta-viva .jooy-trilha__cena::after {
	opacity: 0.55;
}

.jooy-trilhas.esta-viva .jooy-trilha.esta-ativo .jooy-trilha__cena::after {
	opacity: 0;
}

.jooy-trilhas.esta-viva .jooy-trilha__foto {
	filter: brightness(0.88);
}

.jooy-trilhas.esta-viva .jooy-trilha.esta-ativo .jooy-trilha__foto {
	filter: none;
}

/*
 * O resumo recua, mas continua legível. Com 3,6 cartões na tela, apagar o texto
 * de todos menos um esconderia a maior parte do conteúdo o tempo todo — quem
 * quer varrer os doze temas de relance ficaria sem poder. Quem conduz o olho é
 * a cor de destaque (número, título e régua em amarelo), não o sumiço do texto.
 */
.jooy-trilhas.esta-viva .jooy-trilha__resumo {
	opacity: 0.62;
	transform: translateY(0.25rem);
}

.jooy-trilhas.esta-viva .jooy-trilha.esta-ativo .jooy-trilha__resumo {
	opacity: 1;
	transform: none;
}

/* Sobre fundo claro o cartão inverte a moldura: azul da identidade, filete escuro. */
.jooy-section--fundo-amarelo .jooy-trilha,
.jooy-section--fundo-branco .jooy-trilha,
.jooy-section--fundo-menta .jooy-trilha {
	background: var(--jooy-azul);
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28);
}

/* ---------- telefone: sem prender, com deslize nativo ---------- */

/*
 * No toque a fita não prende. O dedo já faz o gesto horizontal, e o pin briga
 * com ele: a página trava sob o polegar em vez de responder. O que fica é a
 * rolagem nativa, com o próximo cartão espiando na borda para dizer que há
 * mais coisa à direita.
 */
@media (max-width: 781px) {
	.jooy-reels {
		--jooy-fita-visiveis: 1.7;
	}

	.jooy-fita--galeria {
		--jooy-fita-visiveis: 1.9;
	}

	.jooy-reel {
		height: min(64vh, calc(100vw / var(--jooy-fita-visiveis, 1.7) * 16 / 9));
	}

	.jooy-fita--galeria figure.wp-block-image {
		height: min(56vh, calc(100vw / var(--jooy-fita-visiveis, 1.9) * 5 / 4));
	}

	/* Um cartão por vez, com a fatia do próximo à mostra: é ela que diz que a
	   fita continua. Mais estreito que isso e o resumo passaria de seis linhas. */
	.jooy-trilhas {
		--jooy-fita-visiveis: 1.15;
	}

	.jooy-trilha {
		width: calc(100vw / var(--jooy-fita-visiveis, 1.15));
		height: min(70vh, calc(100vw / var(--jooy-fita-visiveis, 1.15) * 4 / 3));
	}
}

/* ================= faixa que sangra dentro de seção com medida ================= */

/*
 * Uma faixa em movimento precisa da largura da tela para funcionar — cortada na
 * medida do texto ela deixa de ser faixa. Antes isso obrigava a faixa a morar
 * numa seção `largura: total` só dela, e duas seções irmãs da MESMA cor
 * deixavam aparecer entre elas o vão de bloco do `entry-content`: uma tira de
 * ~30px do azul da página cortando o amarelo ao meio.
 *
 * Com a sangria aqui, título e faixa cabem na mesma seção — sem emenda, sem o
 * respiro dobrado de duas seções e sem a tira azul.
 */
.jooy-section__interno .jooy-marquee.alignfull {
	width: calc(100vw - var(--jooy-barra-rolagem, 0px));
	max-width: none;
	margin-left: calc(50% - 50vw + var(--jooy-barra-rolagem, 0px) / 2);
}

/* Régua fina que separa duas partes dentro da mesma faixa de cor. */
.jooy-regua {
	height: 1px;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0;
	border: 0;
	background: currentColor;
	opacity: 0.28;
}

/* ================= CTA em faixa ================= */

/*
 * O pedido comercial não é mais um parágrafo no fim de uma seção longa: é uma
 * faixa própria, com o texto de um lado e o botão do outro. Na largura de
 * leitura eles empilham — nessa hora o botão vai para baixo do texto, que é a
 * ordem em que se lê de qualquer jeito.
 */
.jooy-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.jooy-cta__texto {
	flex: 1 1 28ch;
	min-width: 0;
}

.jooy-cta__texto > :first-child { margin-top: 0; }
.jooy-cta__texto > :last-child { margin-bottom: 0; }

/*
 * `flex: 0 1 auto` com `min-width: 0`, e não `0 0 auto`: a nota abaixo do botão
 * tem uns 400px de max-content, e sem poder encolher ela estourava a largura da
 * tela no telefone — a linha saía cortada na borda direita. Podendo encolher,
 * ela quebra em duas linhas onde falta espaço e continua numa só onde sobra.
 */
.jooy-cta__acao {
	flex: 0 1 auto;
	min-width: 0;
}

/* ================= destaques em colunas (estilo de core/list) ================= */

/*
 * Os três pilares da Expo eram itens de lista com asterisco — mesma hierarquia
 * de qualquer outro texto da seção, e por isso invisíveis. Como estilo de bloco
 * do `core/list`, o conteúdo continua sendo uma lista semântica (leitor de tela
 * ouve "lista de 3 itens") e só a apresentação muda.
 *
 * O `<strong>` do começo de cada item vira o título: é assim que o cliente já
 * escreve no editor, e não obriga ninguém a aprender uma estrutura nova.
 *
 * Os seletores carregam `.jooy-section .wp-block-list` de propósito. O marcador
 * de asterisco do tema é escrito em `.jooy-section ul:not(.jooy-lista-limpa) >
 * li::before`, que pesa (0,2,3); um seletor curto perderia e cada painel
 * nasceria com um asterisco amarelo grudado na quina.
 */
.jooy-section .wp-block-list.is-style-jooy-destaques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: jooy-destaque;
}

.jooy-section .wp-block-list.is-style-jooy-destaques > li {
	position: relative;
	counter-increment: jooy-destaque;
	margin: 0;
	padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
	/* Sobre foto o painel precisa de corpo próprio: o véu da seção fecha o
	   contraste do texto corrido, mas não sustenta uma peça que quer destaque. */
	background: color-mix(in srgb, var(--wp--preset--color--azul-escuro, #0022A8) 82%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	line-height: 1.45;
	transition: transform var(--jooy-transicao), border-color var(--jooy-transicao),
		background-color var(--jooy-transicao);
}

/* O número toma o lugar do asterisco: mesma posição no fluxo, papel diferente. */
.jooy-section .wp-block-list.is-style-jooy-destaques > li::before {
	content: counter( jooy-destaque, decimal-leading-zero );
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin-bottom: 0.55rem;
	background: none;
	-webkit-mask: none;
	mask: none;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
	color: var(--jooy-amarelo);
}

.jooy-section .wp-block-list.is-style-jooy-destaques > li strong {
	display: block;
	margin-bottom: 0.2rem;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 700;
	color: var(--jooy-amarelo);
}

.jooy-section .wp-block-list.is-style-jooy-destaques > li:hover {
	transform: translateY(-3px);
	border-color: var(--jooy-amarelo);
	background: color-mix(in srgb, var(--wp--preset--color--azul-escuro, #0022A8) 94%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.jooy-section .wp-block-list.is-style-jooy-destaques > li:hover { transform: none; }
}

/* Sobre fundo claro o painel inverte, e o número com ele. */
.jooy-section--fundo-amarelo .wp-block-list.is-style-jooy-destaques > li,
.jooy-section--fundo-branco .wp-block-list.is-style-jooy-destaques > li,
.jooy-section--fundo-menta .wp-block-list.is-style-jooy-destaques > li {
	background: var(--jooy-azul);
	border-color: transparent;
	color: var(--jooy-branco);
}

.jooy-section--fundo-amarelo .wp-block-list.is-style-jooy-destaques > li::before,
.jooy-section--fundo-branco .wp-block-list.is-style-jooy-destaques > li::before,
.jooy-section--fundo-menta .wp-block-list.is-style-jooy-destaques > li::before {
	color: var(--jooy-amarelo);
}

/* ================= números em painel ================= */

/*
 * A variante "promessa" solta na faixa azul era quatro números boiando: sem
 * moldura, sem separação entre um e outro e sem nada que dissesse onde termina
 * um dado e começa o seguinte. Em painel eles ganham corpo — mesmo azul e mesmo
 * filete dos cartões de trilha, para a página inteira falar uma língua só.
 *
 * O movimento não é enfeite: a régua cresce, o número conta de zero e o painel
 * responde ao ponteiro. Sem JS, sem GSAP ou com movimento reduzido, tudo isso
 * já sai pronto do servidor — número certo, régua inteira.
 */
.jooy-stats--painel .jooy-stats__grade {
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
}

.jooy-stats--painel .jooy-stat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(9rem, 12.5vw, 11.5rem);
	padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
	overflow: hidden;
	background: var(--wp--preset--color--azul-escuro, #0022A8);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	transition: transform var(--jooy-transicao), border-color var(--jooy-transicao);
}

/* Régua amarela no topo do painel — o mesmo sinal dos cartões de trilha. */
.jooy-stats--painel .jooy-stat::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: var(--jooy-amarelo);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Estado que sai do servidor: régua inteira. O app.js recolhe e solta de novo
   quando a grade entra na tela — refinamento por cima de algo já pronto. */
.jooy-stats--painel .jooy-stats__grade:not(.esta-viva) .jooy-stat::before,
.jooy-stats--painel .jooy-stat.esta-dentro::before {
	transform: scaleX(1);
}

.jooy-stats--painel .jooy-stat:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
	.jooy-stats--painel .jooy-stat:hover { transform: none; }
}

/*
 * O anel de raios do kit vira marca d'água do painel, não mais um adorno solto
 * ao lado do número: ancorado na quina, cortado pelo próprio painel e girando
 * devagar. Fora do painel ele continua onde estava.
 */
.jooy-stats--painel .jooy-stat__anel {
	top: auto;
	left: auto;
	right: -2.5rem;
	bottom: -2.5rem;
	width: clamp(110px, 11vw, 150px);
	opacity: 0.2;
}

.jooy-stats--painel .jooy-stat__numero {
	margin-bottom: 0.35rem;
}

.jooy-stats--painel .jooy-stat__rotulo {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.82);
}

/* Sobre fundo claro o painel vira o azul cheio da identidade. */
.jooy-section--fundo-amarelo .jooy-stats--painel .jooy-stat,
.jooy-section--fundo-branco .jooy-stats--painel .jooy-stat,
.jooy-section--fundo-menta .jooy-stats--painel .jooy-stat {
	background: var(--jooy-azul);
	border-color: transparent;
}

.jooy-section--fundo-amarelo .jooy-stats--painel .jooy-stat__valor,
.jooy-section--fundo-amarelo .jooy-stats--painel .jooy-stat__afixo,
.jooy-section--fundo-branco .jooy-stats--painel .jooy-stat__valor,
.jooy-section--fundo-branco .jooy-stats--painel .jooy-stat__afixo {
	color: var(--jooy-amarelo);
}

.jooy-section--fundo-amarelo .jooy-stats--painel .jooy-stat__rotulo,
.jooy-section--fundo-branco .jooy-stats--painel .jooy-stat__rotulo {
	color: rgba(255, 255, 255, 0.82);
}

/* ================= tarifas recolhidas ================= */

/*
 * A tabela de tarifas fazia o cartão do Holiday Inn ficar quase o dobro do
 * cartão da Accor, e a coluna vazia ao lado denunciava a diferença. Recolhida,
 * ela vira um pedido explícito — quem quer o preço abre; quem só quer saber que
 * existe tarifa de convênio segue lendo.
 *
 * `<details>` e não um painel em JS: abre no clique, abre no Enter, é
 * encontrável pelo Ctrl+F do navegador e continua aberto sem JavaScript nenhum.
 * O passar-o-mouse é a camada de cima, e só onde existe ponteiro fino.
 */
.jooy-tarifas--recolhida {
	margin: 0.25rem 0 0;
}

.jooy-tarifas__gatilho {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--jooy-transicao), color var(--jooy-transicao);
}

/* O triângulo nativo do summary sai nos dois motores. */
.jooy-tarifas__gatilho::-webkit-details-marker { display: none; }
.jooy-tarifas__gatilho::marker { content: ""; }

.jooy-tarifas__gatilho:hover,
.jooy-tarifas__gatilho:focus-visible {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

/* Seta que gira ao abrir — o único sinal de estado que o summary precisa. */
.jooy-tarifas__seta {
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform var(--jooy-transicao);
}

.jooy-tarifas--recolhida[open] .jooy-tarifas__seta {
	transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

.jooy-tarifas--recolhida[open] .jooy-tarifas__gatilho {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

.jooy-tarifas--recolhida .jooy-tarifas {
	margin-top: 0.9rem;
}

@media (prefers-reduced-motion: no-preference) {
	.jooy-tarifas--recolhida[open] .jooy-tarifas {
		animation: jooy-abre-tarifas 260ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@keyframes jooy-abre-tarifas {
	from { opacity: 0; transform: translateY(-0.4rem); }
	to   { opacity: 1; transform: none; }
}

/* ================= a faixa do PRESE ================= */

/*
 * O PRESE deixou de ser um quadrado verde no meio de uma faixa azul e virou a
 * faixa inteira. O motivo é de hierarquia: é uma premiação com patrocínio
 * próprio e identidade própria, e caixa dentro de seção lia como bloco de apoio,
 * não como capítulo.
 *
 * O véu da seção é azul em toda a página — é o que fecha o contraste do texto
 * sobre foto de evento. Aqui ele precisa ser verde, senão o azul por cima do
 * verde do PRESE devolve um azul-petróleo que não é cor de ninguém.
 */
.jooy-section--fundo-prese.jooy-section--com-veu::after {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--jooy-prese-verde) 84%, transparent) 0%,
		color-mix(in srgb, var(--jooy-prese-verde) 96%, transparent) 100%
	);
}

/* O botão do PRESE usa o limão da premiação, não o amarelo do congresso. */
.jooy-section--fundo-prese .wp-block-button:not(.is-style-outline) > .wp-element-button {
	background-color: var(--wp--preset--color--prese-limao, #B1D110);
	color: #123400;
}

.jooy-section--fundo-prese .wp-block-button:not(.is-style-outline) > .wp-element-button:hover {
	background-color: var(--jooy-branco);
	color: var(--jooy-prese-verde);
}

/* Sobretítulo e destaques em limão, para o verde não ficar chapado de branco. */
.jooy-section--fundo-prese .jooy-sobretitulo,
.jooy-section--fundo-prese :is(h2, h3) strong {
	color: var(--wp--preset--color--prese-limao, #B1D110);
}

/*
 * Assinaturas dos realizadores. Fora da caixa antiga a régua de cima precisa de
 * uma medida própria, senão ela atravessaria a largura toda da seção e viraria
 * um divisor de página em vez de um pé de bloco.
 */
.jooy-section--fundo-prese .jooy-prese__assinaturas {
	max-width: 32rem;
}

/* ================= faixas encostadas, sem vão ================= */

/*
 * O WordPress põe 32px de `block gap` entre todo par de blocos irmãos do
 * conteúdo — inclusive entre duas seções. Entre duas faixas azuis isso é
 * invisível (o vão mostra o azul do corpo, que é a mesma cor), mas em toda
 * troca de cor vira uma tira do fundo da página cortando o desenho: azul entre
 * dois amarelos, e um respiro solto acima de cada costura, que fazia a emenda
 * parecer descolada da faixa que ela emenda.
 *
 * As faixas são blocos de cor de página inteira; elas se encostam por
 * definição, e quem faz a transição é a costura. Margem entre elas é ruído.
 */
.jooy-section {
	margin-block: 0;
}

/* ================= selo do cartão de hotel ================= */

/*
 * O selo sai de dentro do cartão e passa a montar na borda de cima, metade
 * dentro e metade fora. É o primeiro elemento do cartão em ordem de leitura e
 * o primeiro que o olho encontra — que é o papel dele: dizer, antes de
 * qualquer outra coisa, se aquela tarifa é para todo mundo ou só para
 * associado.
 *
 * O cartão precisa de respiro extra no topo para a metade de fora não cobrir a
 * foto, e `overflow: visible` para ela não ser cortada pelo canto arredondado.
 */
.is-style-jooy-hotel {
	overflow: visible;
	padding-top: clamp(2.25rem, 4vw, 3rem);
}

.jooy-hotel__etiqueta {
	position: absolute;
	top: 0;
	left: clamp(1.5rem, 3vw, 2.25rem);
	transform: translateY(-50%);
	z-index: 2;
	align-self: auto;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	font-size: clamp(0.75rem, 1.1vw, 0.875rem);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	/* Anel da cor do fundo da seção: sem ele a pílula encosta na borda do
	   cartão e as duas linhas se confundem num ponto só. */
	box-shadow: 0 0 0 6px var(--jooy-azul);
}

.jooy-section--fundo-amarelo .jooy-hotel__etiqueta,
.jooy-section--fundo-branco .jooy-hotel__etiqueta { box-shadow: 0 0 0 6px var(--jooy-branco); }

/* O cartão vira a âncora do posicionamento absoluto do selo. */
.is-style-jooy-hotel { position: relative; }

@media (max-width: 600px) {
	.jooy-hotel__etiqueta {
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}
}

/* ================= onde acontece ================= */

/*
 * Endereço com mapa ao lado, e não uma linha de texto solta com um botão. O
 * mapa entra em <iframe> com `loading="lazy"`: nada do Google é baixado até o
 * bloco chegar perto da tela.
 */
.jooy-local {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: stretch;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 8px;
	background: var(--wp--preset--color--azul-escuro, #0022A8);
}

@media (max-width: 781px) {
	.jooy-local { grid-template-columns: 1fr; }
}

.jooy-local__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}

.jooy-local__texto > :is(h3, p) { margin: 0; }

.jooy-local__rotulo {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jooy-amarelo);
}

.jooy-local__nome {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
}

.jooy-local__endereco {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
}

.jooy-local__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 1rem;
}

/* A moldura do mapa repete o arco do kit no topo — o mesmo gesto dos cartões
   de trilha, para o mapa não entrar na página como um retângulo de fora. */
.jooy-local__mapa {
	--jooy-cupula: min(5rem, 34%);

	position: relative;
	min-height: clamp(220px, 26vw, 300px);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.25);
	-webkit-mask:
		var(--jooy-cupula-svg) top center / 100% var(--jooy-cupula) no-repeat,
		linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--jooy-cupula)) no-repeat;
	mask:
		var(--jooy-cupula-svg) top center / 100% var(--jooy-cupula) no-repeat,
		linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--jooy-cupula)) no-repeat;
}

.jooy-local__mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	border: 0;
	/* O mapa do Google chega branco e estoura no meio da faixa azul. O filtro
	   o traz para o azul da página sem precisar de chave de API nem de estilo
	   customizado do Maps. */
	filter: invert(0.92) hue-rotate(190deg) saturate(0.75) contrast(0.92);
}

.jooy-section--fundo-amarelo .jooy-local__mapa iframe,
.jooy-section--fundo-branco .jooy-local__mapa iframe { filter: none; }

/* ================= chamada de rodapé em faixa alta ================= */

/*
 * A faixa amarela de fechamento é o último pedido da página antes do rodapé, e
 * estava com o mesmo peso de um parágrafo qualquer. Aqui ela ganha altura,
 * corpo de texto de manchete e o botão grande — se é o último lugar onde se
 * converte, tem de parecer o último lugar onde se converte.
 */
.jooy-chamada {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	min-height: clamp(20rem, 34vw, 28rem);
	padding-block: clamp(1rem, 2vw, 2rem);
	text-align: center;
}

.jooy-chamada p {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(1.5rem, 3.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.jooy-chamada .wp-block-button__link {
	padding: 1.05em 2.4em;
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
}

/* ================= números sobre foto ================= */

/*
 * Cada indicador ganha a cena de onde ele saiu. O número deixa de ser um dado
 * solto numa grade e passa a ter lastro: "3.000 congressistas" sobre a foto do
 * auditório lotado diz a mesma coisa duas vezes, uma em texto e outra em
 * imagem, e é essa repetição que faz o número ser lido como verdade e não como
 * enfeite de apresentação.
 *
 * As fotos são as mesmas da galeria logo abaixo, de propósito: os ladrilhos
 * funcionam como um índice do que vem a seguir.
 */
.jooy-stats--foto .jooy-stats__grade {
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
}

.jooy-stats--foto .jooy-stat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(12rem, 19vw, 17rem);
	padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--azul-escuro, #0022A8);
	container-type: inline-size;
}

.jooy-stat__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * O véu é pesado no pé e leve no topo porque é no pé que mora o texto. As
 * paradas foram medidas nas seis fotos de verdade, no pior pixel da faixa onde
 * o texto cai: 6,1:1 no rótulo branco e 4,9:1 no número em menta. Havia folga
 * de sobra no véu anterior (8,4:1) — e folga de contraste que ninguém pediu se
 * paga em foto apagada, que era o caso: as cenas sumiam atrás do azul.
 */
.jooy-stats--foto .jooy-stat::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--azul-escuro, #0022A8) 20%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--azul-escuro, #0022A8) 58%, transparent) 52%,
		color-mix(in srgb, var(--wp--preset--color--azul-escuro, #0022A8) 92%, transparent) 100%
	);
	pointer-events: none;
}

.jooy-stats--foto .jooy-stat:hover .jooy-stat__foto {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.jooy-stats--foto .jooy-stat:hover .jooy-stat__foto { transform: none; }
}

/* Sobre foto o número cresce: é ele que precisa vencer a cena por trás. */
.jooy-stats--foto.jooy-stats--historico .jooy-stat__valor,
.jooy-stats--foto.jooy-stats--historico .jooy-stat__afixo {
	font-size: clamp(2.25rem, 11cqi, 3.75rem);
}

.jooy-stats--foto.jooy-stats--historico .jooy-stat__afixo {
	font-size: clamp(1rem, 5cqi, 1.5rem);
}

.jooy-stats--foto .jooy-stat__numero {
	margin-bottom: 0.4rem;
}

.jooy-stats--foto .jooy-stat__rotulo {
	font-size: clamp(0.6875rem, 3cqi, 0.8125rem);
	line-height: 1.35;
	color: var(--jooy-branco);
}

/* Régua em menta sob o número, como assinatura do conjunto histórico. */
.jooy-stats--foto .jooy-stat::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: var(--jooy-menta);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jooy-stats--foto .jooy-stats__grade:not(.esta-viva) .jooy-stat::before,
.jooy-stats--foto .jooy-stat.esta-dentro::before {
	transform: scaleX(1);
}

/* ================= assinatura de autoria ================= */

.jooy-rodape__autoria {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.jooy-rodape__jooy {
	display: inline-flex;
	align-items: center;
	color: inherit;
	opacity: 0.75;
	transition: opacity var(--jooy-transicao), color var(--jooy-transicao);
}

.jooy-rodape__jooy svg {
	display: block;
	width: auto;
	height: 1.35em;
}

.jooy-rodape__jooy:hover,
.jooy-rodape__jooy:focus-visible {
	opacity: 1;
	color: var(--jooy-amarelo);
}

/* ================= vídeo dentro de um celular ================= */

/*
 * A cena começa ocupando a tela e encolhe, conforme a página rola, até se
 * encaixar num aparelho deitado com o botão de play no centro. O aparelho é
 * desenhado em CSS — retângulo com raio, bisel e ilha — e não é uma foto de
 * mockup: assim ele escala sem perder nitidez, acompanha o tema em modo claro
 * ou escuro e não depende de um arquivo hospedado por terceiro.
 *
 * O estado que sai do servidor é o aparelho no tamanho de descanso, com o
 * pôster e o play. O palco só prende, e a cena só cresce, se houver GSAP,
 * tela larga e ponteiro fino — no toque prender a rolagem para um efeito
 * decorativo é hostil.
 */
.jooy-video--celular {
	position: relative;
	/*
	 * Desfaz três coisas da fachada normal. `aspect-ratio` era a causa raiz do
	 * corte: a classe de proporção travava o invólucro em 16:9 (numa tela de
	 * 1440, exatos 810px de altura) e o `overflow: hidden` da base serrava o
	 * palco preso — que tem a altura da janela — nessa marca. Aqui o invólucro
	 * não tem proporção própria: ele é só o trilho por onde a cena encolhe.
	 */
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	/* Sangria até a borda: em tela cheia a cena não pode parar na medida do
	   texto, senão o efeito perde justamente o "cheia". */
	width: calc(100vw - var(--jooy-barra-rolagem, 0px));
	max-width: none;
	margin-left: calc(50% - 50vw + var(--jooy-barra-rolagem, 0px) / 2);
	background: var(--wp--preset--color--azul-escuro, #0022A8);
}

/*
 * Quem corta o aparelho crescido é o PALCO, não o invólucro — e a diferença
 * não é de gosto. Preso, o palco vira `position: fixed` do tamanho da janela;
 * cortar nele confina a cena à janela exatamente como se quer. Cortar no
 * invólucro decepava o palco pela metade: com o palco fora do fluxo, o
 * invólucro fica da altura do espaçador menos a do palco, e o `overflow` dele
 * passa a serrar a cena no meio.
 */
.jooy-video__palco {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(2rem, 6vh, 4.5rem);
	overflow: hidden;
}

.jooy-video__palco.esta-preso {
	min-height: 100svh;
	padding-block: 0;
}

/* ---------- o aparelho ---------- */

.jooy-video__fone {
	--jooy-fone-raio: clamp(1.5rem, 3vw, 2.75rem);
	--jooy-fone-bisel: clamp(0.5rem, 0.9vw, 0.75rem);

	position: relative;
	width: min(880px, 84vw);
	aspect-ratio: 19.5 / 9;
	padding: var(--jooy-fone-bisel);
	border-radius: var(--jooy-fone-raio);
	background: #0a0a0f;
	will-change: transform;
	/* O bisel e a sombra entram junto com o encolher — em tela cheia eles
	   estariam fora da janela de qualquer jeito, e mantê-los em 0 evita pintar
	   uma sombra de 2000px de lado. */
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, calc(0.16 * var(--jooy-fone-aparece, 1))),
		0 2.5rem 5rem rgba(0, 0, 0, calc(0.45 * var(--jooy-fone-aparece, 1)));
}

.jooy-video__tela {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: calc(var(--jooy-fone-raio) - var(--jooy-fone-bisel));
	background: #000;
}

/* A ilha do topo fica na lateral esquerda: o aparelho está deitado. */
.jooy-video__ilha {
	position: absolute;
	top: 50%;
	left: calc(var(--jooy-fone-bisel) + 0.45rem);
	width: 0.42rem;
	height: clamp(3rem, 6vw, 4.5rem);
	transform: translateY(-50%);
	border-radius: 999px;
	background: #000;
	opacity: var(--jooy-fone-aparece, 1);
	pointer-events: none;
}

/* ---------- o miolo ---------- */

.jooy-video--celular .jooy-video__gatilho {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.jooy-video--celular .jooy-video__poster,
.jooy-video__teaser {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* O teaser cobre o pôster quando começa a tocar; sem JS, sem movimento
   reduzido ou em economia de dados, ele nunca baixa e o pôster fica. */
.jooy-video__teaser {
	z-index: 1;
}

/*
 * O rótulo é o nome acessível do botão e precisa continuar existindo — mas não
 * desenhado. Em escala de tela cheia ele saía como uma tarja de texto de
 * 80px cortada na borda; quem faz o papel visual aqui é o ícone de play.
 */
.jooy-video--celular .jooy-video__rotulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jooy-video--celular .jooy-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(var(--jooy-fone-play, 1));
	z-index: 2;
	opacity: var(--jooy-fone-aparece, 1);
}

/* O iframe do YouTube nasce dentro da tela do aparelho — o app.js troca o
   gatilho pelo iframe dentro do pai dele, e o pai é a tela. */
.jooy-video--celular .jooy-video__tela > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 781px) {
	.jooy-video__fone {
		--jooy-fone-raio: 1.25rem;
		--jooy-fone-bisel: 0.4rem;

		width: 92vw;
	}
}

/* ================= correções de ajuste ================= */

/*
 * As tarifas recolhidas ocupam a largura do cartão nos dois estados.
 *
 * O cartão de hotel é um core/group com layout "constrained", e o WordPress
 * dá `margin-inline: auto` aos filhos desse layout. Com o <details> no tamanho
 * do conteúdo, isso o centralizava — e como o conteúdo muda de largura ao
 * abrir (188px do botão contra 465px da tabela), o botão saltava do centro
 * para a esquerda no clique, como se tivesse mudado de lugar sozinho.
 */
.jooy-tarifas--recolhida {
	width: 100%;
	margin-inline: 0;
}

/*
 * Play centralizado também no hover.
 *
 * A regra base `.jooy-video__gatilho:hover .jooy-video__play` pesa (0,3,0) e
 * escreve `transform: scale()` puro — sem o translate que centraliza o botão
 * dentro do aparelho. Ela vencia a regra da moldura, de (0,2,0), e o play
 * pulava para fora do centro assim que o ponteiro entrava. Aqui as duas
 * versões (repouso e hover) sobem de especificidade e carregam o translate.
 */
.jooy-video--celular .jooy-video__gatilho .jooy-video__play {
	transform: translate(-50%, -50%) scale(var(--jooy-fone-play, 1));
}

.jooy-video--celular .jooy-video__gatilho:hover .jooy-video__play,
.jooy-video--celular .jooy-video__gatilho:focus-visible .jooy-video__play {
	transform: translate(-50%, -50%) scale(calc(var(--jooy-fone-play, 1) * 1.06));
}

/* ---------- rodapé de coluna única ---------- */

.jooy-rodape__coluna--unica {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.jooy-rodape__coluna--unica ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `ul a`, e não `a` solto: sem o `ul` a regra pegava também o link do botão
 * amarelo logo abaixo, que herdava o corpo de 1,75rem e a cor branca dos links
 * do rodapé — texto branco sobre amarelo, ilegível.
 */
.jooy-rodape__coluna--unica ul a {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/*
 * Chamada solta no meio da página.
 *
 * O formulário está na terceira seção e a próxima chamada só reaparece nove
 * seções depois. Entre as duas o visitante atravessa temas, números, expo,
 * academia, PRESE e hotéis sem nada para clicar. Isto é um botão isolado, sem
 * faixa nem fundo próprio: as duas faixas amarelas que já existem continuam
 * sendo os momentos altos, e estes aqui só evitam o vão.
 */
.jooy-cta-meio {
	margin-top: clamp(2rem, 5vw, 3.25rem);
}

/* ================= formulário do Fluent Forms dentro do box ================= */

/*
 * O miolo do formulário passou a ser do plugin; a moldura continua sendo do
 * tema. Esta seção veste o HTML do Fluent Forms com as MESMAS medidas do
 * formulário próprio, que seguem logo acima em `.jooy-form__*` — mesma grade de
 * duas colunas, mesma altura de campo, mesmo azul de borda, mesmo cartão branco
 * na opção de rádio.
 *
 * As classes `ff-*` são do plugin e não podem ser renomeadas; a largura de cada
 * campo vem de `jooy-ff-meio` / `jooy-ff-cheio`, gravadas no `container_class`
 * de cada campo dentro da definição do formulário — assim a disposição é dado,
 * não CSS adivinhando pela ordem dos filhos.
 *
 * Tudo aqui é escopado em `.jooy-waitlist--ff`: outro formulário do plugin em
 * outra página do site continua com a cara padrão dele.
 */

/*
 * A grade mora no <fieldset>, e não no <form>: o Fluent Forms envolve TODOS os
 * campos num fieldset único, então o form tem um filho só. Grade no form
 * deixava os quatro campos empilhados numa coluna, cada um com metade da
 * largura — foi o que apareceu na primeira tentativa.
 */
.jooy-waitlist--ff .frm-fluent-form > fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

@media (max-width: 781px) {
	.jooy-waitlist--ff .frm-fluent-form > fieldset {
		grid-template-columns: 1fr;
	}
}

.jooy-waitlist--ff .jooy-ff-meio { grid-column: auto; }

.jooy-waitlist--ff .jooy-ff-cheio,
.jooy-waitlist--ff .ff-el-group:has(.ff-el-tc),
.jooy-waitlist--ff .ff_submit_btn_wrapper,
.jooy-waitlist--ff .ff-message-success,
.jooy-waitlist--ff .ff-errors-in-stack {
	grid-column: 1 / -1;
}

/* O plugin dá margem de baixo a cada grupo; aqui quem espaça é o `gap`. */
.jooy-waitlist--ff .ff-el-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
}

/* ---- rótulo ---- */

.jooy-waitlist--ff .ff-el-input--label label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--jooy-azul);
}

.jooy-waitlist--ff .ff-el-is-required.asterisk-right label::after {
	color: #B00020;
}

/* ---- campo ---- */

.jooy-waitlist--ff .ff-el-form-control {
	width: 100%;
	min-height: 52px;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 54, 255, 0.45);
	border-radius: var(--jooy-raio);
	background: var(--jooy-branco);
	box-shadow: none;
	color: var(--jooy-azul);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--jooy-transicao), box-shadow var(--jooy-transicao);
}

.jooy-waitlist--ff .ff-el-form-control::placeholder {
	color: rgba(0, 54, 255, 0.45);
}

.jooy-waitlist--ff .ff-el-form-control:focus {
	outline: none;
	border-color: var(--jooy-azul);
	box-shadow: 0 0 0 2px var(--jooy-azul);
}

.jooy-waitlist--branco.jooy-waitlist--ff .ff-el-form-control:focus {
	border-color: var(--jooy-amarelo);
	box-shadow: 0 0 0 2px var(--jooy-amarelo);
}

/* ---- ajuda e erro ---- */

/* Azul cheio, não com alpha: azul a 78% sobre amarelo cai abaixo de 4,5:1. */
.jooy-waitlist--ff .ff-el-help-message {
	margin: 0;
	font-size: 0.8125rem;
	font-style: normal;
	line-height: 1.45;
	color: var(--jooy-azul);
}

/* Erro nunca só por cor: sempre com texto, com o mesmo sinal do outro motor. */
.jooy-waitlist--ff .error.text-danger,
.jooy-waitlist--ff .ff-el-is-error .error {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: #B00020;
}

.jooy-waitlist--ff .error.text-danger::before {
	content: "⚠ ";
}

.jooy-waitlist--ff .ff-el-is-error .ff-el-form-control {
	border-color: #B00020;
	box-shadow: 0 0 0 2px rgba(176, 0, 32, 0.28);
}

/* ---- opções de vínculo: o cartão branco do formulário próprio ---- */

.jooy-waitlist--ff .ff-el-input--content:has(input.ff-el-form-check-radio) {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* A linha é `.ff-el-form-check`; `ff-el-form-check-radio` fica no input. */
.jooy-waitlist--ff .ff-el-input--content:has(input.ff-el-form-check-radio) .ff-el-form-check {
	margin: 0;
	padding: 0;
}

.jooy-waitlist--ff .ff-el-input--content:has(input.ff-el-form-check-radio) .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 52px;
	margin: 0;
	padding: 0.75rem 1.25rem;
	border: 1px solid rgba(0, 54, 255, 0.45);
	border-radius: var(--jooy-raio);
	background: var(--jooy-branco);
	color: var(--jooy-azul);
	cursor: pointer;
	font-weight: 500;
	transition: border-color var(--jooy-transicao), background-color var(--jooy-transicao);
}

.jooy-waitlist--ff .ff-el-input--content:has(input.ff-el-form-check-radio) .ff-el-form-check-label > span {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

/*
 * O rádio nativo é substituído pelo mesmo círculo desenhado do outro motor: 20
 * por 20, borda de 2px, miolo cheio quando marcado. `appearance: none` é o que
 * permite desenhá-lo; sem ela o navegador pinta o controle do sistema por cima.
 */
.jooy-waitlist--ff input.ff-el-form-check-radio {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--jooy-azul);
	border-radius: 50%;
	background: transparent;
	position: relative;
}

.jooy-waitlist--ff input.ff-el-form-check-radio:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--jooy-azul);
}

.jooy-waitlist--ff input.ff-el-form-check-radio:focus-visible {
	outline: 2px solid var(--jooy-azul);
	outline-offset: 2px;
}

.jooy-waitlist--ff .ff-el-form-check:hover .ff-el-form-check-label,
.jooy-waitlist--ff .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
	border-color: var(--jooy-azul);
	background: var(--jooy-branco);
}

/* ---- nota da condição especial ---- */

.jooy-waitlist--ff .jooy-ff-nota .jooy-form__nota-associado {
	margin: 0;
}

/* ---- consentimento ---- */

/*
 * O plugin desenha o consentimento como tabela (`display: table-row` no rótulo,
 * `table-cell` na caixinha). Trocar por flex é o que alinha a caixa com a
 * primeira linha do texto e faz o `gap` valer. O seletor inclui
 * `.frm-fluent-form` só para somar uma classe e passar à frente do CSS do
 * plugin — é aritmética de especificidade, não `!important`.
 */
.jooy-waitlist--ff .frm-fluent-form .ff-el-tc .ff_tc_label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	cursor: pointer;
}

/* `.ff_tc_checkbox` é um <span> que embrulha o input — quem vira caixinha
   desenhada é o input dentro dele, não o span. */
.jooy-waitlist--ff .frm-fluent-form .ff_tc_checkbox {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	line-height: 1;
}

.jooy-waitlist--ff .ff_tc_checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid var(--jooy-azul);
	border-radius: 4px;
	background: var(--jooy-branco);
	position: relative;
	cursor: pointer;
}

.jooy-waitlist--ff .ff_tc_checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 7px;
	height: 12px;
	border: solid var(--jooy-azul);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.jooy-waitlist--ff .ff_tc_checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--jooy-azul);
	outline-offset: 2px;
}

.jooy-waitlist--ff .frm-fluent-form .ff_t_c {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--jooy-azul);
}

.jooy-waitlist--ff .ff_t_c a {
	color: inherit;
	text-decoration: underline;
}

/* ---- botão ---- */

.jooy-waitlist--ff .ff_submit_btn_wrapper {
	margin: 0;
}

/* Mesma medida do outro motor: ocupa a largura até um teto de 22rem. Botão de
   1120px de largura não lê como botão, lê como faixa. */
.jooy-waitlist--ff .ff-btn-submit {
	width: 100%;
	max-width: 22rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0.9rem 2rem;
	border: 0;
	border-radius: var(--jooy-raio);
	background: var(--jooy-azul);
	color: var(--jooy-branco);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--jooy-transicao), transform var(--jooy-transicao);
}

.jooy-waitlist--ff .ff-btn-submit:hover,
.jooy-waitlist--ff .ff-btn-submit:focus-visible {
	background: var(--jooy-azul-escuro, #0022A8);
	color: var(--jooy-branco);
	transform: translateY(-2px);
}

.jooy-waitlist--branco.jooy-waitlist--ff .ff-btn-submit {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

@media (prefers-reduced-motion: reduce) {
	.jooy-waitlist--ff .ff-btn-submit:hover { transform: none; }
}

/* ---- mensagem de sucesso: a mesma caixa azul do outro motor ---- */

.jooy-waitlist--ff .ff-message-success {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 0;
	background: var(--jooy-azul);
	border-radius: 6px;
	color: var(--jooy-branco);
	font-size: var(--wp--preset--font-size--corpo-grande, 1.375rem);
	font-weight: 500;
	line-height: 1.5;
}

.jooy-waitlist--ff .ff-message-success p:last-child { margin-bottom: 0; }

/* ---------- logo de apoiador ---------- */

.jooy-apoio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2rem);
	margin-top: 0.75rem;
}

/*
 * O logo do Ibis é um quadrado vermelho cheio: sobre o azul da seção ele
 * precisa de um respiro branco para não brigar com o fundo.
 *
 * A placa cresce e o logo dentro dela encolhe. Com o respiro anterior (8px numa
 * placa de 64px) a marca encostava nas quatro bordas e lia como uma logo
 * ampliada além da conta, e não como uma marca apoiando o evento. Aqui a placa
 * tem altura própria e o logo ocupa pouco mais da metade dela.
 */
.jooy-apoio img {
	display: block;
	box-sizing: content-box;
	height: clamp(36px, 4vw, 46px);
	width: auto;
	padding: clamp(0.6rem, 1.4vw, 0.9rem) clamp(0.9rem, 2vw, 1.35rem);
	border-radius: 8px;
	background: var(--jooy-branco);
}