/*
 * Jooy CBPE — base.
 *
 * Cor, tipografia e espaçamento vêm de theme.json como variáveis
 * --wp--preset--*. Aqui ficam só o que theme.json não expressa: reset,
 * utilitários, componentes de chrome (header, rodapé) e acessibilidade.
 */

/* ---------- atalhos de token ---------- */

:root {
	--jooy-azul: var(--wp--preset--color--azul, #0036FF);
	--jooy-amarelo: var(--wp--preset--color--amarelo, #DEDC00);
	--jooy-branco: var(--wp--preset--color--branco, #FFFFFF);
	--jooy-menta: var(--wp--preset--color--menta, #5DFFE1);
	--jooy-verde: var(--wp--preset--color--verde, #00D758);
	--jooy-preto: var(--wp--preset--color--preto, #000000);
	--jooy-prese-verde: var(--wp--preset--color--prese-verde, #00782E);

	--jooy-header-h: 80px;
	--jooy-max: 1320px;
	--jooy-estreito: 800px;
	--jooy-raio: 4px;
	--jooy-transicao: 240ms cubic-bezier(0.22, 1, 0.36, 1);
	--jooy-erro: #FF5A5A;
}

@media (max-width: 781px) {
	:root {
		--jooy-header-h: 64px;
	}
}

/* ---------- reset pontual ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Sem isto a âncora do menu para debaixo do header fixo. */
	scroll-padding-top: calc(var(--jooy-header-h) + 1.5rem);
}

body {
	margin: 0;
	overflow-x: hidden;
	background-color: var(--jooy-azul);
	color: var(--jooy-branco);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

img {
	display: block;
}

/* Números sempre tabulares: sem isto o cronômetro "pula" a cada segundo. */
.jooy-countdown__valor,
.jooy-stat__valor,
.jooy-tarifas td,
.jooy-timeline__ano {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ---------- foco visível ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--jooy-amarelo);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Sobre amarelo o contorno amarelo desaparece — inverte para branco. */
.jooy-section--fundo-amarelo :where(a, button, input, summary):focus-visible,
.jooy-waitlist--amarelo :where(a, button, input, summary):focus-visible {
	outline-color: var(--jooy-azul);
}

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

/* ---------- tipografia ---------- */

.jooy-sobretitulo {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--sobretitulo, 0.8125rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jooy-amarelo);
}

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

.jooy-section--fundo-prese .jooy-sobretitulo {
	color: var(--wp--preset--color--prese-limao, #B1D110);
}

/* Destaque que traduz a ênfase em CAIXA-ALTA do texto do cliente. */
.jooy-marca {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
	padding: 0.05em 0.28em;
	border-radius: 2px;
}

.jooy-section--fundo-amarelo .jooy-marca,
.jooy-waitlist--amarelo .jooy-marca {
	background: var(--jooy-azul);
	color: var(--jooy-amarelo);
}

/* ---------- listas com o asterisco do kit no lugar do bullet ---------- */

.jooy-section ul:not(.jooy-lista-limpa):not([class*="wp-block"]),
.jooy-section .wp-block-list:not(.jooy-lista-limpa) {
	list-style: none;
	padding-left: 0;
}

.jooy-section ul:not(.jooy-lista-limpa) > li,
.jooy-section .wp-block-list:not(.jooy-lista-limpa) > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

.jooy-section ul:not(.jooy-lista-limpa) > li::before,
.jooy-section .wp-block-list:not(.jooy-lista-limpa) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.85em;
	height: 0.85em;
	background-color: var(--jooy-amarelo);
	/* Asterisco geométrico do kit, como máscara: recolore por background. */
	-webkit-mask: var(--jooy-asterisco) center / contain no-repeat;
	mask: var(--jooy-asterisco) center / contain no-repeat;
}

/*
 * Inversão do marcador sobre fundo claro. A especificidade tem de igualar a da
 * regra base (`.jooy-section .wp-block-list:not(...) > li::before`): com um
 * seletor mais curto o amarelo da base vencia e o asterisco saía amarelo sobre
 * amarelo — marcador invisível na seção "O mercado se reúne aqui" e na
 * Academia. Regra 3.2 do documento de design: sobre amarelo e branco, escreva
 * azul.
 */
.jooy-section--fundo-amarelo ul:not(.jooy-lista-limpa) > li::before,
.jooy-section--fundo-amarelo .wp-block-list:not(.jooy-lista-limpa) > li::before,
.jooy-section--fundo-branco ul:not(.jooy-lista-limpa) > li::before,
.jooy-section--fundo-branco .wp-block-list:not(.jooy-lista-limpa) > li::before,
.jooy-section--fundo-menta ul:not(.jooy-lista-limpa) > li::before,
.jooy-section--fundo-menta .wp-block-list:not(.jooy-lista-limpa) > li::before {
	background-color: var(--jooy-azul);
}

:root {
	--jooy-asterisco: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="black"><rect x="42" y="0" width="16" height="100" rx="2"/><rect x="42" y="0" width="16" height="100" rx="2" transform="rotate(60 50 50)"/><rect x="42" y="0" width="16" height="100" rx="2" transform="rotate(120 50 50)"/></g></svg>');
}

/* ---------- botões ---------- */

.jooy-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.9rem 1.75rem;
	border: 0;
	border-radius: var(--jooy-raio);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--jooy-transicao), color var(--jooy-transicao), transform var(--jooy-transicao);
}

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

.jooy-botao--primario:hover {
	background: var(--wp--preset--color--amarelo-escuro, #BFBD00);
	color: var(--jooy-azul);
	transform: translateY(-2px);
}

.jooy-botao--secundario {
	background: transparent;
	color: var(--jooy-branco);
	box-shadow: inset 0 0 0 2px var(--jooy-branco);
}

.jooy-botao--secundario:hover {
	background: var(--jooy-branco);
	color: var(--jooy-azul);
	transform: translateY(-2px);
}

/* ---- inversão do botão primário sobre fundo claro ----
   Regra única, e ela vale para os DOIS tipos de botão da página: o do tema
   (.jooy-botao--primario) e o do core (.wp-element-button, usado pelos padrões).
   Sobre amarelo, branco ou menta o amarelo padrão vira botão invisível e o
   branco reprova em contraste (1,46:1) — então o botão passa a ser azul.
   O contorno (is-style-outline) tem tratamento próprio e fica de fora. */
:is(
	.jooy-section--fundo-amarelo,
	.jooy-section--fundo-branco,
	.jooy-section--fundo-menta,
	.jooy-waitlist--amarelo,
	.jooy-waitlist--branco
) :is(
	.jooy-botao--primario,
	.wp-block-button:not(.is-style-outline) > .wp-element-button
) {
	background-color: var(--jooy-azul);
	color: var(--jooy-branco);
}

:is(
	.jooy-section--fundo-amarelo,
	.jooy-section--fundo-branco,
	.jooy-section--fundo-menta,
	.jooy-waitlist--amarelo,
	.jooy-waitlist--branco
) :is(
	.jooy-botao--primario,
	.wp-block-button:not(.is-style-outline) > .wp-element-button
):hover {
	background-color: var(--wp--preset--color--azul-escuro, #0022A8);
	color: var(--jooy-branco);
}

	color: var(--jooy-branco);
}

/* Sobre amarelo, o botão secundário de contorno branco também desaparece. */
.jooy-section--fundo-amarelo .jooy-botao--secundario,
.jooy-section--fundo-branco .jooy-botao--secundario {
	color: var(--jooy-azul);
	box-shadow: inset 0 0 0 2px var(--jooy-azul);
}

.jooy-section--fundo-amarelo .jooy-botao--secundario:hover,
.jooy-section--fundo-branco .jooy-botao--secundario:hover {
	background: var(--jooy-azul);
	color: var(--jooy-branco);
}

.jooy-botao[disabled],
.jooy-botao[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Alvo de toque mínimo de 44px em qualquer coisa clicável. */
@media (pointer: coarse) {
	.jooy-botao,
	.jooy-header__link,
	.jooy-rodape a {
		min-height: 44px;
	}
}

/* ---------- seções ---------- */

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

/*
 * A faixa de 32px no topo da página.
 *
 * O WordPress aplica o block gap como `margin-block-start` em todo filho de
 * `.wp-site-blocks`, e o `<main>` levava 32px. Nada existe acima dele no fluxo
 * — o header é `position: fixed` e flutua por cima —, então essa margem só
 * empurrava a página para baixo e deixava aparecer uma tira do azul chapado
 * antes do vídeo começar.
 *
 * Ficou dez meses invisível porque a cúpula recortava os primeiros 340px do
 * vídeo: ali em cima aparecia o mesmo azul da seção, e a tira se dissolvia
 * nele. Tirado o arco, o vídeo passou a encostar na borda de cima da seção e a
 * emenda apareceu.
 */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/*
 * Em troca, a primeira seção precisa do espaço que a margem dava por acidente:
 * o header é fixo e cobre os primeiros 80px da tela. O respiro próprio da seção
 * (60px no desktop) não alcançava — o sobretítulo nascia 12px abaixo da barra,
 * e sem os 32px nasceria por baixo dela.
 *
 * `:first-child` leva o seletor a (0,2,0) e vence `.jooy-section--respiro-*`,
 * que é (0,1,0) — a conta é o que faz esta regra valer sem `!important`.
 */
.jooy-section:first-child {
	padding-block-start: calc(var(--jooy-header-h) + clamp(1.5rem, 3vw, 2.5rem));
}

/*
 * Rede de segurança para uma página que não comece com uma seção do tema
 * (política de privacidade, por exemplo): sem isto o primeiro parágrafo nasce
 * debaixo do header fixo.
 */
.wp-site-blocks > main .entry-content > :first-child:not(.jooy-section) {
	margin-block-start: calc(var(--jooy-header-h) + 1rem);
}

/* O respiro pedido é de 120px ENTRE blocos (72px no mobile). Como duas seções
   vizinhas somam o padding de baixo com o de cima, cada uma leva metade — do
   contrário o intervalo dobra e a página fica com buracos de 240px. */
.jooy-section--respiro-padrao {
	padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
}

.jooy-section--respiro-curto {
	padding-block: clamp(1.25rem, 2.5vw, 2rem);
}

.jooy-section--respiro-nenhum {
	padding-block: 0;
}

/* ---------- costura entre seções ---------- */

/*
 * O código de barras do kit como emenda entre duas faixas de cor chapada. O
 * documento de design pede exatamente isto: "divisor horizontal entre blocos,
 * ótimo animado no scroll".
 *
 * As 25 barras penduram da borda de cima da seção e descem. Saem do servidor
 * na altura cheia: sem JS a peça continua sendo um divisor legítimo, e o
 * scrub só a põe em movimento.
 */
.jooy-costura {
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(2.25rem, 4vw, 3.5rem);
	display: flex;
	pointer-events: none;
	z-index: 1;
}

.jooy-costura__copia {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

.jooy-costura svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Numa tela estreita uma cópia já preenche: três deixariam as barras finas
   demais para registrar como peça. */
@media (max-width: 781px) {
	.jooy-costura__copia:nth-child(n + 2) {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1199px) {
	.jooy-costura__copia:nth-child(3) {
		display: none;
	}
}

.jooy-costura .jooy-kit__barra {
	/* Em SVG, transform-origin resolve contra o viewBox por padrão. Sem
	   fill-box todas as barras encolheriam em torno do mesmo ponto. */
	transform-box: fill-box;
	transform-origin: 50% 0;
}

/* `--jooy-barra` aqui é a COR das barras do código de barras. Nome parecido
   com `--jooy-barra-rolagem` (a largura da barra de rolagem, escrita pelo
   app.js e usada pelas fitas para sangrar em 100vw) — e por isso os dois
   nomes precisam continuar distintos: uma fita dentro de um elemento com
   `.jooy-costura--*` herdaria uma cor onde espera pixels. */
.jooy-costura--verde  { --jooy-barra: var(--jooy-verde); }
.jooy-costura--azul   { --jooy-barra: var(--jooy-azul); }
.jooy-costura--branco { --jooy-barra: var(--jooy-branco); }

/* O respiro precisa render espaço para a emenda não cair sobre o texto. */
.jooy-section--respiro-padrao:has(> .jooy-costura),
.jooy-section--respiro-curto:has(> .jooy-costura) {
	padding-top: clamp(3.75rem, 7vw, 5.5rem);
}

.jooy-section__interno {
	position: relative;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	width: 100%;
}

.jooy-section__interno--conteudo {
	max-width: var(--jooy-max);
}

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

.jooy-section__interno--total {
	max-width: none;
	padding-inline: 0;
}

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

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

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

.jooy-section--fundo-menta {
	background-color: var(--jooy-menta);
	color: var(--jooy-azul);
}

.jooy-section--fundo-prese {
	background-color: var(--jooy-prese-verde);
	color: var(--jooy-branco);
}

.jooy-section--fundo-transparente {
	background-color: transparent;
}

/* Sobre amarelo, branco ou menta, o texto e os títulos viram azuis. */
.jooy-section--fundo-amarelo :is(h1, h2, h3, h4, h5, h6),
.jooy-section--fundo-branco :is(h1, h2, h3, h4, h5, h6),
.jooy-section--fundo-menta :is(h1, h2, h3, h4, h5, h6) {
	color: var(--jooy-azul);
}

.jooy-section--fundo-amarelo a:not(.jooy-botao):not(.wp-element-button),
.jooy-section--fundo-branco a:not(.jooy-botao):not(.wp-element-button),
.jooy-section--fundo-menta a:not(.jooy-botao):not(.wp-element-button) {
	color: var(--jooy-azul);
}

/* Foto de fundo: sem véu o contraste do texto não fecha em nenhuma foto de
   evento — luz de palco, estouro e sombra. */
.jooy-section--com-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--jooy-section-foto);
	background-size: cover;
	background-position: center;
}

.jooy-section--com-veu::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 54, 255, 0.62) 0%, rgba(0, 54, 255, 0.88) 100%);
}

/* ---------- vídeo de fundo ---------- */

/*
 * O vídeo entra pelo vão em arco do kit, não como retângulo cheio: as duas
 * quinas de cima ficam no azul chapado e a cúpula assina a cena. É o mesmo
 * gesto da faixa de imagens e da galeria, na maior escala da página.
 *
 * Fica em z-index -2, atrás do véu (-1) — o véu é o que fecha o contraste do
 * texto sobre cena de evento, e não pode ser atropelado.
 */
/*
 * Sem máscara: o vídeo de fundo vai de borda a borda.
 *
 * Havia aqui uma cúpula em duas camadas recortando o topo do vídeo. Saiu por
 * pedido do cliente em 02/09/2026 — o arco cortava um terço da altura da cena
 * justamente na primeira dobra, onde o vídeo é o argumento. O motivo do arco
 * era de marca, não de leitura: o vão da cúpula é a peça do kit, e ela continua
 * nos cartões de trilha, nos ladrilhos de números e na faixa de imagens, onde
 * recorta foto parada e não vídeo em movimento.
 *
 * O contraste do texto não depende disso: quem fecha o contraste é o véu, que
 * mora em z-index -1 e cobre a seção inteira desde sempre — o arco só deixava
 * aparecer o azul do fundo por cima dele.
 */
.jooy-section__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/*
 * O véu do vídeo, ao contrário do da foto, é mais LEVE — e isso é medido, não
 * palpite. O vídeo do hero sai da edição com as altas-luzes comprimidas (nada
 * passa de 70% de luminância), então o ponto mais claro atrás do texto fica em
 * L=0,159 com este véu, já contando o grão que vem por cima. Daí saem 3,5:1
 * no subtítulo amarelo (AA grande pede 3:1) e 5,2:1 no corpo branco (AA normal
 * pede 4,5:1) — e mesmo medindo pelo 1% de pixels mais claros, que é o critério
 * mais severo possível, ainda sobra 3,2:1 e 4,7:1.
 *
 * Com o véu antigo, de 0,78 a 0,92, o vídeo entrava com 15% da imagem final e
 * virava borrão azul: era a razão de o hero parecer parado mesmo com vídeo.
 *
 * Cuidado ao trocar o arquivo do vídeo: a folga acima é deste material. Um
 * vídeo com estouro de branco reprova o contraste sem mudar uma linha de CSS.
 */
.jooy-section--com-video.jooy-section--com-veu::after {
	background: linear-gradient(180deg, rgba(0, 54, 255, 0.56) 0%, rgba(0, 54, 255, 0.78) 100%);
}

/*
 * Grão de filme por cima do véu. Precisa ficar aqui, e não gravado no vídeo:
 * debaixo do véu ele sumiria. Fica em z-index 0, à frente do véu (-1) e atrás
 * do conteúdo, que vem depois no DOM — grão sobre o texto derrubaria o
 * contraste que as linhas acima acabaram de garantir.
 */
.jooy-section__grao {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.6;
	mix-blend-mode: screen;
	background-image: var(--jooy-grao);
	background-size: 190px 190px;
	animation: jooy-grao 0.8s steps(1) infinite;
}

/* Dez saltos por segundo. Cinema tem 24, mas a diferença não se vê e o custo
   de repintura cai pela metade. */
@keyframes jooy-grao {
	0%    { background-position:    0     0; }
	12.5% { background-position: -37px  22px; }
	25%   { background-position:  44px -31px; }
	37.5% { background-position: -19px -48px; }
	50%   { background-position:  28px  39px; }
	62.5% { background-position: -52px  -7px; }
	75%   { background-position:  15px  53px; }
	87.5% { background-position:  49px -20px; }
}

/*
 * No telefone o grão fica parado. A animação é repintura de uma camada do
 * tamanho da dobra dez vezes por segundo, e é justamente no aparelho com menos
 * folga de CPU que o ganho é menor: em tela pequena, grão parado e grão vivo
 * são praticamente indistinguíveis.
 */
@media (max-width: 781px) {
	.jooy-section__grao {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jooy-section__grao {
		animation: none;
		opacity: 0.18;
	}
}

/* ---------- elementos do kit ---------- */

.jooy-kit {
	display: inline-block;
	line-height: 0;
	pointer-events: none;
}

.jooy-kit svg {
	display: block;
	width: var(--jooy-kit-tamanho, 100%);
	height: auto;
}

.jooy-kit-bloco {
	line-height: 0;
	color: var(--jooy-branco);
}

.jooy-kit-bloco--cor-branco   { color: var(--jooy-branco); }
.jooy-kit-bloco--cor-amarelo  { color: var(--jooy-amarelo); }
.jooy-kit-bloco--cor-azul     { color: var(--jooy-azul); }
.jooy-kit-bloco--cor-menta    { color: var(--jooy-menta); }
.jooy-kit-bloco--cor-verde    { color: var(--jooy-verde); }
.jooy-kit-bloco--cor-preto    { color: var(--jooy-preto); }

/* ---------- header fixo ---------- */

.jooy-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	display: flex;
	align-items: center;
	height: var(--jooy-header-h);
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	background: transparent;
	color: var(--jooy-branco);
	transition: background-color var(--jooy-transicao), box-shadow var(--jooy-transicao),
		color var(--jooy-transicao), border-color var(--jooy-transicao);
}

.jooy-header.esta-rolado {
	background: var(--jooy-azul);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

/* ---------- vidro do cabeçalho ---------- */

/*
 * O vidro é progressivo: quem não tem backdrop-filter continua recebendo o
 * azul chapado acima. Onde há suporte, a barra fica translúcida e desfoca o
 * que passa por baixo.
 *
 * `will-change: transform` não é firula: sem uma camada de GPU própria o
 * backdrop-filter recompõe a página inteira a cada quadro e derruba o
 * framerate no celular.
 */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.jooy-header.esta-rolado {
		-webkit-backdrop-filter: blur(16px) saturate(165%);
		backdrop-filter: blur(16px) saturate(165%);
		background: color-mix(in srgb, var(--jooy-azul) 52%, transparent);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
		border-bottom: 1px solid color-mix(in srgb, var(--jooy-branco) 26%, transparent);
		will-change: transform;
		transform: translateZ(0);
	}
}

/*
 * A página alterna faixas azul, amarela, branca e menta. Um vidro azul fixo
 * sobre faixa amarela fica sujo, e texto branco sobre vidro claro some. O
 * atributo data-sob é escrito pelo app.js com o fundo da seção que está
 * passando sob a barra; daí cada estado veste a cor certa e inverte o texto.
 *
 * Regra de contraste do documento de design: sobre azul escreve-se branco;
 * sobre amarelo, branco e menta escreve-se azul.
 */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.jooy-header.esta-rolado[data-sob="amarelo"] {
		background: color-mix(in srgb, var(--jooy-amarelo) 58%, transparent);
		border-bottom-color: color-mix(in srgb, var(--jooy-azul) 28%, transparent);
		color: var(--jooy-azul);
	}

	.jooy-header.esta-rolado[data-sob="branco"] {
		background: color-mix(in srgb, var(--jooy-branco) 62%, transparent);
		border-bottom-color: color-mix(in srgb, var(--jooy-azul) 20%, transparent);
		color: var(--jooy-azul);
	}

	.jooy-header.esta-rolado[data-sob="menta"] {
		background: color-mix(in srgb, var(--jooy-menta) 55%, transparent);
		border-bottom-color: color-mix(in srgb, var(--jooy-azul) 24%, transparent);
		color: var(--jooy-azul);
	}

	.jooy-header.esta-rolado[data-sob="prese"] {
		background: color-mix(in srgb, var(--jooy-prese-verde) 58%, transparent);
		border-bottom-color: color-mix(in srgb, var(--jooy-branco) 24%, transparent);
		color: var(--jooy-branco);
	}
}

/* Sobre vidro claro, os links e a marca acompanham a inversão. */
.jooy-header[data-sob="amarelo"] .jooy-header__link,
.jooy-header[data-sob="branco"] .jooy-header__link,
.jooy-header[data-sob="menta"] .jooy-header__link {
	color: var(--jooy-azul);
}

.jooy-header[data-sob="amarelo"] .jooy-header__link:hover,
.jooy-header[data-sob="amarelo"] .jooy-header__link[aria-current="true"],
.jooy-header[data-sob="branco"] .jooy-header__link:hover,
.jooy-header[data-sob="branco"] .jooy-header__link[aria-current="true"],
.jooy-header[data-sob="menta"] .jooy-header__link:hover,
.jooy-header[data-sob="menta"] .jooy-header__link[aria-current="true"] {
	color: var(--jooy-azul);
	border-bottom-color: var(--jooy-azul);
}

.jooy-header[data-sob="amarelo"] .jooy-header__marca,
.jooy-header[data-sob="branco"] .jooy-header__marca,
.jooy-header[data-sob="menta"] .jooy-header__marca {
	color: var(--jooy-azul);
}

/* ---------- filete de progresso ---------- */

.jooy-header__progresso {
	position: absolute;
	inset: auto 0 -1px 0;
	height: 2px;
	background: var(--jooy-amarelo);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

.jooy-header[data-sob="amarelo"] .jooy-header__progresso,
.jooy-header[data-sob="branco"] .jooy-header__progresso,
.jooy-header[data-sob="menta"] .jooy-header__progresso {
	background: var(--jooy-azul);
}

/* Sem JS o filete nunca sai de zero: melhor não desenhar nada. */
html:not(.jooy-js) .jooy-header__progresso {
	display: none;
}

.jooy-header__interno {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	width: 100%;
	max-width: var(--jooy-max);
	margin-inline: auto;
}

.jooy-header__marca {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.jooy-header__nav {
	flex: 1 1 auto;
}

.jooy-header__lista {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jooy-header__link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.25rem;
	color: var(--jooy-branco);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--jooy-transicao), border-color var(--jooy-transicao);
}

.jooy-header__link:hover,
.jooy-header__link[aria-current="true"] {
	color: var(--jooy-amarelo);
	border-bottom-color: var(--jooy-amarelo);
}

.jooy-header__acao {
	flex: 0 0 auto;
}

.jooy-header__hamburguer {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.jooy-header__hamburguer span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 5px auto;
	background: var(--jooy-branco);
	transition: transform var(--jooy-transicao), opacity var(--jooy-transicao);
}

.jooy-header__hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jooy-header__hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.jooy-header__hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
	.jooy-header__hamburguer {
		display: block;
		order: 3;
	}

	.jooy-header__acao {
		order: 2;
		margin-left: auto;
	}

	/* O botão continua na barra: não pode ficar escondido no hambúrguer. */
	.jooy-header__acao .jooy-botao {
		min-height: 44px;
		padding: 0.6rem 1rem;
		font-size: 0.8125rem;
	}

	.jooy-header__nav {
		position: fixed;
		inset: var(--jooy-header-h) 0 auto;
		max-height: calc(100dvh - var(--jooy-header-h));
		overflow-y: auto;
		background: var(--jooy-azul);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--jooy-transicao), transform var(--jooy-transicao), visibility var(--jooy-transicao);
	}

	.jooy-header__nav.esta-aberto {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.jooy-header__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem clamp(1rem, 5vw, 2rem) 1.5rem;
	}

	.jooy-header__link {
		padding: 0.9rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}
}

/* ---------- barra inferior do mobile ---------- */

.jooy-barra-mobile {
	position: fixed;
	inset: auto 0 0;
	z-index: 99;
	display: none;
	gap: 1px;
	background: rgba(0, 0, 0, 0.2);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.jooy-barra-mobile__alvo {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 56px;
	padding: 0.75rem 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.jooy-barra-mobile__alvo--lista {
	background: var(--jooy-amarelo);
	color: var(--jooy-azul);
}

.jooy-barra-mobile__alvo--whatsapp {
	background: var(--jooy-branco);
	color: var(--jooy-azul);
}

@media (max-width: 781px) {
	.jooy-barra-mobile {
		display: flex;
	}

	body.jooy-onepage {
		/* Espaço para a barra não cobrir o fim do rodapé. */
		padding-bottom: 56px;
	}
}

/* ---------- rodapé ---------- */

.jooy-rodape {
	background: var(--jooy-azul);
	color: var(--jooy-branco);
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem);
}

.jooy-rodape__interno {
	max-width: var(--jooy-max);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.jooy-rodape__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

.jooy-rodape h2,
.jooy-rodape h3 {
	font-size: var(--wp--preset--font-size--sobretitulo, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jooy-amarelo);
	margin: 0 0 1rem;
}

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

.jooy-rodape li {
	margin-bottom: 0.6rem;
}

.jooy-rodape a {
	color: var(--jooy-branco);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	transition: color var(--jooy-transicao), border-color var(--jooy-transicao);
}

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

.jooy-rodape__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.jooy-rodape__redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 50%;
}

.jooy-rodape__redes svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.jooy-rodape__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: var(--wp--preset--font-size--nota, 0.875rem);
	color: rgba(255, 255, 255, 0.76);
}

/* ---------- movimento reduzido ---------- */

/* Quem tem movimento reduzido ativado recebe a página inteira sem animação —
   sem exceção. É a regra do documento de design. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	/*
	 * O vídeo de fundo cede lugar ao pôster — mas por não tocar, não por
	 * sumir: `display:none` levaria o pôster junto e deixaria o azul chapado
	 * no lugar da cena. O elemento fica, parado no primeiro quadro, e quem
	 * decide não dar play é o app.js.
	 */

	/* O filete de progresso acompanha o scroll o tempo todo: é movimento
	   contínuo, e some junto com o resto. */
	.jooy-header__progresso {
		display: none;
	}
}