/* Reset básico */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Scroll suave e transições só pra quem não pediu movimento reduzido no SO
   (prefers-reduced-motion) — requisito de acessibilidade (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Compensa o header sticky ao rolar pra uma âncora do sumário do post */
.entry-content h2,
.entry-content h3 {
	scroll-margin-top: 96px;
}

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

/* Header sticky — o position:sticky precisa ficar no wrapper <header
   class="wp-block-template-part"> gerado pelo próprio wp:template-part, não
   no .site-header interno. O sticky só "flutua" dentro da altura do seu pai
   direto; como esse wrapper tem exatamente a mesma altura do header (é um
   wrapper 1:1, sem folga), aplicar sticky no filho não tem espaço pra
   funcionar e o header simplesmente rola com a página. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* z-index proprio pra que o veu de desfoque do mega menu (um ::after com
   z-index negativo, portanto atras do header mas dentro do contexto dele)
   fique acima de toda a pagina. */
.site-header {
	position: relative;
	z-index: 30;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
}

/* Divisor com curvas na base da faixa de título de página (.page-header,
   .nv-busca-banner — o "header" vermelho/preto com o título, em
   index/page/search) — não a barra de navegação. Fundo branco cobrindo o
   preto em forma de onda suave, ecoando o contorno arredondado da logo.
   SVG referenciado como <img>, não inline — vetor escala sem pixelizar em
   qualquer largura (width:100% + height:auto), sem depender de wp:html. */
.page-header,
.nv-busca-banner,
.single-hero {
	position: relative;
}

/* Faixas de largura cheia cujo CONTEUDO precisa cair na mesma vertical do
   cabecalho. `contentSize: 1440px` poe max-width:1440px nos FILHOS: acima de
   1488px de viewport eles centram em 1440 e comecam 24px antes do logo, porque
   o padding lateral da faixa deixa de valer quando sobra espaco de fora. O
   cabecalho tem caixa de 1440 COM 24 de padding, ou seja 1392 de conteudo — e
   essa a medida. (.wave-divider ja tem max-width:none !important e continua
   sangrando de borda a borda.) */
.page-header > *,
.nv-busca-banner > *,
.nv-busca-conteudo > * {
	max-width: calc(1440px - var(--wp--preset--spacing--3) * 2);
	margin-inline: auto;
}

/* A secao logo abaixo da faixa de busca e `surface`, entao a onda tambem e. */
.nv-busca-banner {
	--nv-onda-cor: var(--wp--preset--color--surface);
}

/* O blockGap do WordPress poe margin-block-start em todo filho de <main>, e
   entre as duas faixas isso virava uma tira branca do fundo do body — bem
   embaixo da onda, que e justamente onde ela nao pode existir. */
.nv-busca-banner + .nv-busca-conteudo {
	margin-block-start: 0;
}

/* Simbolo da marca no canto superior direito de toda faixa de titulo — mesma
   marca d'agua do rodape, mesma opacidade. Fecha o par: a marca abre a pagina
   no canto de cima e fecha no de baixo. */
.page-header::before,
.nv-busca-banner::before,
.single-hero::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--4);
	right: var(--wp--preset--spacing--3);
	width: clamp(80px, 9vw, 130px);
	aspect-ratio: 1;
	background: url("../images/simbolo-bigmais.png") center / contain no-repeat;
	/* Mais forte que a do rodape (0,16) porque aqui o fundo e preto puro e nao ha
	   nada por cima disputando — no rodape ela passa por tras dos icones sociais,
	   e la quem cede e a decoracao. */
	opacity: 0.38;
	pointer-events: none;
}

.wave-divider {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	/* O layout "constrained" do grupo pai limita todo filho que não seja
	   .alignfull a max-width:780px + margin:auto — sem align:full (tirado de
	   propósito, ver comentário abaixo) essa regra ainda bate no
	   wave-divider e cancela o bleed. !important pra vencer o rule
	   gerado pelo WordPress por instância (especificidade/ordem imprevisível). */
	max-width: none !important;
	margin: 0 !important;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

/* Sem align:full de propósito: o wave-divider já é posicionado absoluto
   (left:0/right:0) contra .page-header, que ocupa a largura cheia — align:full
   faria o WordPress injetar width/margin extra de "escape" pra fora do
   .wp-container pai, e isso somava com o position:absolute e criava um
   scroll horizontal (a faixa vazava alguns pixels além da viewport). */
/* A onda e pintada pela figura, com o SVG virando MASCARA, e nao pelo <img>:
   um <img> tem a cor fixa dentro do arquivo, e o divisor precisa ser sempre da
   cor da secao logo ABAIXO dele — branco no arquivo de receitas, cinza na busca.
   O <img> continua no DOM porque e ele que da altura a figura; so o pixel dele
   e escondido. */
.wave-divider {
	background: var(--nv-onda-cor, var(--wp--preset--color--background));
	-webkit-mask: url("../images/header-wave.svg") center / 100% 100% no-repeat;
	mask: url("../images/header-wave.svg") center / 100% 100% no-repeat;
}

.wp-block-image.wave-divider img {
	display: block;
	width: 100%;
	height: 28px;
	visibility: hidden;
}

@media (min-width: 782px) {
	.wp-block-image.wave-divider img {
		height: 44px;
	}
}

/* <main> e <footer> são o 2º e o 3º filho direto de .wp-site-blocks (depois
   do header) e herdam o blockGap padrão do WordPress (margin-block-start)
   como uma faixa vazia revelando a cor de fundo do body entre as seções —
   zerar nos dois. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-top: 0;
	margin-bottom: 0;
}

.site-header__inner {
	position: relative;
	flex-wrap: nowrap;
}

.site-header__logo,
.site-header__nav {
	flex-shrink: 0;
}

/* Campo de busca — base compartilhada pelo cabecalho e pela toolbar da pagina
   de resultados. Os dois usam o mesmo bloco core/search com o botao por dentro,
   entao a capsula e uma so; muda apenas onde ela mora. */
.site-busca,
.nv-campo-busca {
	--nv-busca-fundo: var(--wp--preset--color--white);
	--nv-busca-contorno: transparent;
}

.site-busca .wp-block-search__inside-wrapper,
.nv-campo-busca .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 4px 4px 4px 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--nv-busca-fundo);
	box-shadow: inset 0 0 0 1px var(--nv-busca-contorno);
}

.site-busca .wp-block-search__input,
.nv-campo-busca .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
}

.site-busca .wp-block-search__input::placeholder,
.nv-campo-busca .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

.site-busca .wp-block-search__input:focus,
.nv-campo-busca .wp-block-search__input:focus {
	outline: 0;
}

.site-busca .wp-block-search__inside-wrapper:focus-within,
.nv-campo-busca .wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.site-busca .wp-block-search__button,
.nv-campo-busca .wp-block-search__button {
	flex-shrink: 0;
	margin: 0;
	padding: 0.6rem 1.15rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-busca .wp-block-search__button:hover,
.site-busca .wp-block-search__button:focus-visible,
.nv-campo-busca .wp-block-search__button:hover,
.nv-campo-busca .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--secondary);
}

/* Sobre fundo claro a capsula branca some: ganha um contorno de 1px. */
.nv-campo-busca--claro {
	--nv-busca-contorno: var(--nv-borda);
}

.nv-campo-busca {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.site-busca .wp-block-search__button,
	.nv-campo-busca .wp-block-search__button {
		transition: none;
	}
}

/* Busca do cabecalho.
   Centrada por posicionamento absoluto, e nao por flex: o logo e o menu tem
   larguras diferentes, entao um filho do meio com margin auto ficaria centrado
   entre eles — e nao no meio da pagina, que e onde o olho procura. Fora do
   fluxo ela tambem nao entra na conta de largura do header-nav.js, que troca
   pro menu compacto quando a linha estoura. */
.site-busca {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: clamp(240px, 30vw, 420px);
	margin: 0;
	transform: translate(-50%, -50%);
}

/* Sem espaco pra tres coisas na mesma linha: a busca desce pra uma segunda
   linha de largura cheia, que tambem e um alvo de toque bem maior. */
@media (max-width: 900px) {
	.site-header__inner {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--2);
	}

	.site-busca {
		position: static;
		order: 3;
		width: 100%;
		flex-basis: 100%;
		transform: none;
	}
}



/* Alvo de toque dos itens do menu (WCAG 2.5.8 exige 24x24 no mínimo; o padrão
   Navival é 40-44px). O bloco de Navegação herda só o font-size `sm` do
   theme.json e não tem padding próprio: sem isso os links saem com ~23px de
   altura e reprovam o critério por 1px — fácil de não notar, porque o link
   continua clicável no mouse.
   Os dois seletores são necessários: .wp-block-navigation-item__content é o
   item de um menu de verdade, .wp-block-pages-list__item__link é o fallback
   que o bloco renderiza quando nenhum menu foi atribuído ainda (caso do tema
   recém-instalado). */
.site-header .wp-block-navigation-item__content,
.site-header .wp-block-pages-list__item__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

/* Botão hambúrguer — escondido por padrão, só aparece quando o JS detecta
   que o menu não cabe mais numa linha (ou em telas mobile). Sem JS, o menu
   flat continua visível e funcional (progressive enhancement). */
.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* Tres tracos posicionados em absoluto pra que possam convergir no X. Em flex
   com gap eles nao teriam um centro comum pra girar em volta. */
.site-header__toggle span {
	position: absolute;
	left: 3px;
	right: 3px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header__toggle span:nth-child(1) { top: 9px; }
.site-header__toggle span:nth-child(2) { top: 15px; }
.site-header__toggle span:nth-child(3) { top: 21px; }

/* O traco do meio some primeiro e os de fora giram depois: virar X e um gesto
   em dois tempos, nao tres linhas rodando juntas. */
.site-header.is-open .site-header__toggle span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
	transition-delay: 80ms;
}

.site-header.is-open .site-header__toggle span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.site-header.is-open .site-header__toggle span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
	transition-delay: 80ms;
}

/* O mega menu e sempre acionado pelo botao, em qualquer largura: o painel e um
   bloco de quatro colunas, nao uma barra horizontal que as vezes cabe e as
   vezes nao. Com a barra inline o mesmo menu teria dois desenhos diferentes
   dependendo da largura da tela — e do tamanho dos rotulos que alguem escrever
   amanha no admin. O `is-compact` do header-nav.js continua sem efeito aqui,
   e so o `is-open` importa. */
/* O painel fica no DOM o tempo todo e se esconde por `visibility`, e nao por
   `display:none`: display nao transiciona, e sem ele nao ha abertura nem
   fechamento pra animar. `visibility: hidden` tira o painel do foco por teclado
   e da arvore de acessibilidade do mesmo jeito. */
.site-header .site-header__nav {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: block;
	overflow-y: auto;
	padding: calc(80px + var(--wp--preset--spacing--6)) var(--wp--preset--spacing--3) var(--wp--preset--spacing--7);
	/* Quase opaco, o suficiente pra sentir a pagina se mexendo atras do desfoque
	   sem que o texto perca contraste: no pior caso (conteudo branco atras) o
	   fundo efetivo fica em #303030, e o link mais apagado do painel ainda faz
	   7,9:1. */
	background: rgba(40, 40, 40, 0.96);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 380ms;
}

/* O botao vem antes do painel no HTML pra que o proximo Tab depois de abrir
   caia dentro do menu; `order` devolve ele pra direita da barra. */
.site-header__toggle {
	position: relative;
	display: block;
	order: 3;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Mega menu

   O painel monta as colunas a partir da PROPRIA estrutura do menu do
   WordPress: cada submenu de primeiro nivel vira uma coluna, o rotulo dele
   vira o titulo, e os filhos viram a lista. Assim o cliente reorganiza o mega
   menu em Aparencia > Menus, sem tocar em codigo — uma coluna nova e um
   submenu novo.
   --------------------------------------------------------------------------- */
.site-header.is-open .site-header__nav {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s;
}

/* O <header> e um grupo `constrained` de 1440 e passa max-width pros filhos
   diretos; o painel e de tela cheia. O `margin-block` zerado e pelo blockGap:
   mesmo em `position: fixed` o elemento respeita a propria margem, e os 24px
   que o WordPress injeta empurravam o painel 24px pra baixo do topo da tela. */
.site-header .site-header__nav {
	max-width: none;
	margin: 0;
}

/* A barra do topo sobe acima do painel: e o mesmo logo e o mesmo botao, agora
   sobre o fundo do menu. Duplicar os dois dentro do painel daria dois logos no
   DOM e um segundo botao pra ligar no mesmo JS. */
.site-header.is-open .site-header__inner {
	position: relative;
	z-index: 25;
}

/* Com o menu aberto o topo mostra logo e X, e mais nada. */
.site-header.is-open .site-busca {
	opacity: 0;
	visibility: hidden;
	transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 160ms;
}

/* A pagina atras nao rola junto com o painel. */
html:has(.site-header.is-open) {
	overflow: hidden;
}

/* Conteudo do painel na mesma vertical do logo e do resto da pagina. */
.site-header.is-open .site-header__nav .wp-block-navigation {
	max-width: calc(1440px - var(--wp--preset--spacing--3) * 2);
	margin-inline: auto;
}

.site-header.is-open .site-header__nav .wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	width: 100%;
}

/* As colunas entram escalonadas, da esquerda pra direita, na mesma curva do
   painel. Na saida o atraso e zero: fechar tem que parecer instantaneo — quem
   fecha um menu ja decidiu, e esperar uma cascata de volta lê como travamento. */
.site-header li.nv-mega__coluna {
	display: block;
	width: 100%;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-open li.nv-mega__coluna {
	opacity: 1;
	transform: none;
}

.site-header.is-open li.nv-mega__coluna:nth-child(1) { transition-delay: 60ms; }
.site-header.is-open li.nv-mega__coluna:nth-child(2) { transition-delay: 110ms; }
.site-header.is-open li.nv-mega__coluna:nth-child(3) { transition-delay: 160ms; }
.site-header.is-open li.nv-mega__coluna:nth-child(4) { transition-delay: 210ms; }

/* O titulo da coluna e o link do submenu, so que sem cara de item de menu: e
   uma placa. O core poe um botao de seta ao lado — no painel aberto nao ha
   nada pra abrir ou fechar, entao ele sai. */
.site-header.is-open li.nv-mega__coluna > .wp-block-navigation-item__content {
	display: block;
	padding: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.site-header.is-open li.nv-mega__coluna > .wp-block-navigation-item__content:hover,
.site-header.is-open li.nv-mega__coluna > .wp-block-navigation-item__content:focus-visible {
	color: var(--nv-vermelho-escuro-ok);
}

.site-header.is-open li.nv-mega__coluna > .wp-block-navigation__submenu-icon {
	display: none;
}

/* O core renderiza o submenu como flyout branco absoluto, pensado pra barra
   horizontal. No painel ele e a propria lista da coluna. */
.site-header.is-open li.nv-mega__coluna .wp-block-navigation__submenu-container {
	position: static !important;
	display: flex !important;
	flex-direction: column;
	opacity: 1 !important;
	visibility: visible !important;
	/* O core mantem o submenu com height:0 + overflow:hidden ate abrir. No
	   painel ele ja nasce aberto: sem estes dois, os links existem no DOM, tem
	   44px de altura cada, e ficam recortados dentro de uma caixa de altura
	   zero — a coluna aparece so com o titulo. */
	height: auto !important;
	overflow: visible !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: var(--wp--preset--spacing--2) 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Seis lojas empilhadas deixavam a coluna com o dobro da altura das outras tres
   e um vao morto embaixo delas. Em duas colunas de tres o painel encolhe e as
   quatro colunas terminam mais perto da mesma linha.
   `grid-auto-flow: column` com tres linhas fixas preenche de cima pra baixo e
   so depois passa pra direita — com o fluxo padrao a ordem alfabetica sairia
   lendo na horizontal, que nao e como se le uma lista de lojas. */
.site-header.is-open li.nv-mega__coluna--duplo .wp-block-navigation__submenu-container {
	display: grid !important;
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	column-gap: var(--wp--preset--spacing--3);
}

.site-header.is-open li.nv-mega__coluna .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	/* Os 8px laterais recuam a lista em relacao ao titulo da coluna e ao filete
	   dele: e o degrau que diz que estes itens pertencem aquela placa. */
	padding: 0.45em var(--wp--preset--spacing--1);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--base);
	text-decoration: none;
	transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-open li.nv-mega__coluna .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header.is-open li.nv-mega__coluna .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Sem anel proprio, o foco por teclado some dentro do painel: o anel global do
   tema e vermelho e faz 2,87:1 sobre este cinza, e aqui nem chegava a aparecer.
   Branco faz 14,7:1. */
.site-header.is-open li.nv-mega__coluna a:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Link que sai do site avisa antes do clique, e o aviso vem do proprio
   target="_blank" — nao de uma classe que alguem precisa lembrar de por. */
.site-header.is-open li.nv-mega__coluna a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.45em;
	vertical-align: baseline;
	background: currentColor;
	-webkit-mask: var(--nv-icone-externo) center / contain no-repeat;
	mask: var(--nv-icone-externo) center / contain no-repeat;
}

@media (max-width: 900px) {
	.site-header.is-open .site-header__nav .wp-block-navigation__container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Aqui a busca esta no fluxo (no desktop ela e absoluta). So esconder por
	   `visibility` deixava a linha dela ocupando espaco, o header ficava com tres
	   linhas e o X descia pra terceira — caindo em cima da primeira coluna do
	   menu. Aberto, ela sai do fluxo. */
	.site-header.is-open .site-busca {
		display: none;
	}
}

/* Numa coluna so, o painel vira uma lista longa que rola dentro de si mesmo.
   O `max-height: calc(100vh - 100%)` que existia aqui era do modelo antigo, em
   que o painel descia ABAIXO do header; agora que ele e de tela cheia, aquele
   calculo o achatava pra 80px de altura. */
@media (max-width: 600px) {
	.site-header.is-open .site-header__nav .wp-block-navigation__container {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .site-header__nav,
	.site-header li.nv-mega__coluna,
	.site-header__toggle span,
	.site-header.is-open .site-busca,
	.site-header.is-open li.nv-mega__coluna .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		transition: none;
	}

	.site-header li.nv-mega__coluna,
	.site-header .site-header__nav {
		transform: none;
	}

	.site-header.is-open li.nv-mega__coluna {
		transition-delay: 0s;
	}
}

/* CTA global — usar sempre estas duas classes, nunca criar botão por seção.
   Contexto padrão: fundo escuro. Envolver seções de fundo claro com .on-light
   pra inverter as cores automaticamente.
   Estiliza só o elemento que é a superfície real do botão: o <button>/<a> cru
   (filtro de busca) ou o .wp-block-button__link dentro de um wp:button — o
   <div class="wp-block-button"> é apenas wrapper de layout, sem padding nem
   borda própria (evita o efeito "caixa dentro de caixa"). */
button.btn-primary,
button.btn-secondary,
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-secondary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.5em;
	border-radius: 6px;
	border: 1px solid transparent;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

button.btn-primary,
.wp-block-button.btn-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
}

/* Escurece a própria cor primária no hover (em vez de trocar pra "secondary")
   pra não colidir com seções que já usam "secondary" como fundo — nesse caso
   o botão ficaria com a mesma cor do fundo ao redor e "sumiria" no hover. */
button.btn-primary:hover,
.wp-block-button.btn-primary .wp-block-button__link:hover {
	filter: brightness(0.87);
}

button.btn-secondary,
.wp-block-button.btn-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

button.btn-secondary:hover,
.wp-block-button.btn-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

button.btn-secondary.is-ativo {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.on-light button.btn-primary,
.on-light .wp-block-button.btn-primary .wp-block-button__link {
	color: var(--wp--preset--color--white);
}

.on-light button.btn-secondary,
.on-light .wp-block-button.btn-secondary .wp-block-button__link {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.on-light button.btn-secondary:hover,
.on-light .wp-block-button.btn-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Busca — total de resultados no banner */
.nv-busca-total {
	margin: var(--wp--preset--spacing--1) 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--wp--preset--font-size--sm);
}

/* Toolbar: filtro por tipo (à esquerda) + busca (à direita), na mesma linha */
.nv-busca-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--3);
	/* Era `surface` sobre fundo branco: 1,06:1, um filete invisivel. */
	border-bottom: 1px solid var(--nv-borda);
}

.nv-busca-toolbar--sem-filtro {
	justify-content: flex-end;
}

.nv-busca-filtro {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.nv-busca-filtro__item {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.3em 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1), border-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nv-busca-filtro__item:hover,
.nv-busca-filtro__item:focus-visible {
	color: var(--wp--preset--color--ink);
}

.nv-busca-filtro__item.is-ativo {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

.nv-busca-form {
	flex: 0 1 320px;
}

/* Cards de resultado. Fundo branco sobre a faixa `surface`: e a diferenca de
   plano que separa um card do outro, e nao um filete. Antes eram caixas
   brancas sobre branco com borda em #F5F5F5 — nada separava nada. */
.nv-busca-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--3);
}

/* Grade de tres faixas com a do meio elastica: o titulo mais longo da linha
   define a altura, e a data fica ancorada na base em todos os cards. Com flex e
   `margin-top:auto` a sobra nao era distribuida e a data ficava boiando no meio
   dos cards de titulo curto. */
.nv-busca-card {
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: start;
	gap: 0.5em;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--nv-borda);
	border-radius: 12px;
	/* Em repouso o card e so o contorno sobre a faixa cinza; o branco entra no
	   hover. Assim a lista inteira le como uma grade calma e o card sob o cursor
	   e o unico que sobe de plano. */
	background: transparent;
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nv-busca-card:hover,
.nv-busca-card:focus-within {
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--primary);
}

.nv-busca-card__tipo {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Tres por linha em ~440px de coluna: no tamanho de h2 do tema (36px) um titulo
   de receita ocupava quatro linhas e o card virava um bloco de texto. */
.nv-busca-card__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-5);
	line-height: 1.25;
}

.nv-busca-card__titulo a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.nv-busca-card__titulo a:hover,
.nv-busca-card__titulo a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.nv-busca-card__data {
	display: block;
	align-self: end;
	padding-top: 0.3em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}

.nv-busca-vazio {
	max-width: 60ch;
}

.nv-busca-vazio ul {
	margin: var(--wp--preset--spacing--2) 0 0;
	padding-left: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
	.nv-busca-filtro__item,
	.nv-busca-card {
		transition: none;
	}
}

.nv-busca-resultados .is-oculto {
	display: none !important;
}

@media (max-width: 900px) {
	.nv-busca-lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.nv-busca-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.nv-busca-lista {
		grid-template-columns: 1fr;
	}
}

/* Banner escuro com o H1 (página interna e archive do blog) */
.page-header {
	text-align: center;
}

/* Titulo alinhado com o conteudo logo abaixo, nao com o centro optico da
   faixa: sao o mesmo bloco de leitura. Padrao das paginas por tipo. */
.page-header--esquerda {
	text-align: left;
}

/* O padding lateral mora no titulo, nao na faixa: a faixa e o grupo
   constrained de 1440px (a medida do menu), e por o padding nela encolheria a
   area centralizada antes de posiciona-la — mesmo motivo documentado no
   .recipe-layout. Assim o H1 nasce na mesma vertical do logo. */
.page-header--esquerda .wp-block-post-title {
	padding-inline: var(--wp--preset--spacing--3);
}

/* ---------------------------------------------------------------------------
   Páginas do tipo "Ofertas da TV"
   --------------------------------------------------------------------------- */

/* Fachada do player: a pagina mostra uma capa da marca e so carrega o YouTube
   quando alguem pede. Um iframe de playlist no load custa ~1MB de terceiro e
   marca cookie antes de qualquer clique — caro numa audiencia majoritariamente
   mobile, e cobrado de todo mundo por um player que talvez ninguem aperte.
   O elemento nasce como <a> pro YouTube: sem JS o link abre a playlist la,
   com JS o clique troca a capa pelo player aqui. */
.tv-player {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	background: var(--wp--preset--color--ink);
	text-decoration: none;
	z-index: 2;
}

.tv-player img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tv-player:hover img,
.tv-player:focus-visible img {
	transform: scale(1.03);
}

/* Escurece a capa o suficiente pro botao e o rotulo terem contraste sobre
   qualquer foto, sem apagar a imagem. */
.tv-player::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.05));
	pointer-events: none;
}

.tv-player__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 88px;
	height: 88px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 1;
}

/* Triangulo desenhado por clip-path: geometria exata, sem glifo unicode e sem
   arquivo extra pra um simbolo de tres pontos. */
.tv-player__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 26px;
	height: 30px;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--white);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tv-player:hover .tv-player__play,
.tv-player:focus-visible .tv-player__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--wp--preset--color--secondary);
}

.tv-player__rotulo {
	position: absolute;
	left: var(--wp--preset--spacing--3);
	bottom: var(--wp--preset--spacing--3);
	z-index: 1;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.tv-player iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Ja tocando: a capa saiu, entao nada de escurecer nem de cursor de link. */
.tv-player.is-tocando {
	cursor: default;
}

.tv-player.is-tocando::after {
	content: none;
}

@media (max-width: 600px) {
	.tv-player__play {
		width: 64px;
		height: 64px;
	}

	.tv-player__play::before {
		width: 19px;
		height: 22px;
	}
}

.tv-abrir {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Big Receitas — uma receita por linha (archive de blog) + sidebar de filtro.
   .recipe-layout carrega o padding horizontal (não o wrapper pai, que fica
   full-bleed) de propósito: é o mesmo nível em que .site-header__inner
   carrega o dele, depois de já centralizado em 1440px — só assim as duas
   larguras batem de verdade (testado: aplicar o padding no wrapper externo
   "encolhe" a área centralizada antes dela ser posicionada, deslocando o
   conteúdo ~24px pra dentro em relação ao menu). */
.recipe-layout {
	align-items: flex-start !important;
	gap: var(--wp--preset--spacing--5) !important;
}

.recipe-main {
	flex: 65 1 0%;
	min-width: 0;
}

.recipe-sidebar {
	flex: 35 1 0%;
	min-width: 0;
	border-left: 1px solid var(--wp--preset--color--surface);
	padding-left: var(--wp--preset--spacing--4);
}

.recipe-list {
	display: flex;
	flex-direction: column;
}

/* O post-template gera blockGap como margin-top em cada <li> (layout
   "default", não é flex — o gap não vem de CSS gap ali), somando com o
   padding-block do .recipe-card e dobrando o respiro entre as linhas. A
   única fonte de espaçamento entre cards deve ser o padding do card. */
.recipe-list > li {
	margin-top: 0;
}

.recipe-card {
	position: relative;
	align-items: stretch;
	gap: var(--wp--preset--spacing--4) !important;
	padding-block: var(--wp--preset--spacing--3);
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

/* Card inteiro clicável ("stretched link") sem aninhar <a> dentro de <a> —
   inválido em HTML e a imagem/título já são links próprios. O link do
   título vira uma camada invisível cobrindo o card inteiro (::after
   absoluto); a categoria, que deve continuar levando pra outro lugar (o
   arquivo da categoria, não a receita), sobe de camada com z-index pra
   ficar clicável por cima dessa camada esticada. */
/* Ubuntu só tem os dois arquivos estáticos (400 e 700) registrados — pedir
   um peso intermediário (500/600) cai pro 700 mais próximo, não afina nada.
   O único jeito de aliviar o peso de verdade é ir pro 400 puro; a cor
   (primary) já basta pra diferenciar o título do resto do card. */
.recipe-card__body h3 a {
	position: static;
	font-weight: 400;
}

/* O :hover do tema (global, styles.elements.link) sublinha qualquer link —
   como o link do título agora cobre o card inteiro (::after abaixo), passar
   o mouse em qualquer parte do card "ativa" esse :hover, sublinhando o
   título sem o cursor estar nem perto dele. Sem sentido aqui — desligado. */
.recipe-card__body h3 a:hover {
	text-decoration: none;
}

.recipe-card__body h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.recipe-card__category {
	position: relative;
	z-index: 2;
}

.recipe-list > li:first-child .recipe-card {
	padding-top: 0;
}

.recipe-list > li:last-child .recipe-card {
	border-bottom: none;
	padding-bottom: 0;
}

/* Imagem maior que o conteúdo de propósito: a margem negativa deixa a
   imagem "vazar" um pouco pra cima e pra baixo do bloco de texto — pequena
   de propósito, pra sobrar clareza igual (ou perto disso) entre a borda da
   imagem e o divisor de baixo e o texto e o divisor de baixo. A altura vem
   de aspect-ratio, não de esticar pra bater com a coluna de texto (isso já foi
   tentado — com align-items:stretch + height:100%, uma foto de origem
   retrato ficava sem altura definida pra resolver o % e caía pro tamanho
   natural da imagem, ignorando a proporção. Com aspect-ratio a largura
   sempre manda e o corte (object-fit:cover) garante 16:9 em qualquer foto,
   não importa a proporção original.) */
.recipe-card__image {
	position: relative;
	flex-shrink: 0;
	align-self: center;
	width: 340px;
	aspect-ratio: 16 / 9;
	margin-block: calc(var(--wp--preset--spacing--1) * -1);
	border-radius: 1rem;
	overflow: hidden;
}

.recipe-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover — a identidade da marca é o vermelho, não um cinza genérico: a
   imagem ganha um leve zoom e uma barra vermelha "acende" na base, como um
   sublinhado revelado. Nada de tingir o fundo do card inteiro. */
.recipe-card__image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.recipe-card:hover .recipe-card__image img {
	transform: scale(1.06);
}

.recipe-card:hover .recipe-card__image::after {
	transform: scaleX(1);
}

.recipe-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--1);
	padding-block: var(--wp--preset--spacing--2);
	min-width: 0;
}

/* O blockGap padrão do WordPress soma com o gap do flex acima, dobrando o
   espaço entre categoria/título/resumo/info — zerar e deixar só o gap. */
.recipe-card__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Categoria como tag: fundo preto, letra branca, uma "pilula" por termo.
   O separador do bloco fica vazio (separator:"" no block markup) pra não
   sobrar vírgula entre os links — o espaço entre as tags vem do gap do
   flex aqui, não de texto solto entre os <a>. */
.recipe-card__category {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.recipe-card__category a {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.01em;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.recipe-card:hover .recipe-card__category a {
	background: rgba(214, 38, 49, 0.1);
	color: var(--wp--preset--color--primary);
}

.recipe-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--wp--preset--color--text-muted);
}

.recipe-card__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--1);
}

.recipe-card__info-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}

.recipe-card__info-item svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

/* Entrada em scroll — opacidade + leve subida + desfoque, disparada por
   IntersectionObserver (assets/js/receitas-filtro.js) marcando .is-visivel.
   Sem JS ou com reduced-motion, .recipe-card já nasce com opacity:1 (ver
   guarda de acessibilidade abaixo) — nunca esconde conteúdo de quem não
   recebe o script. */
.recipe-card.reveal {
	opacity: 0;
	transform: translateY(16px);
	filter: blur(4px);
	transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1), transform 550ms cubic-bezier(0.16, 1, 0.3, 1), filter 550ms cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

.recipe-card.reveal.is-visivel {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* Filtro da sidebar — pills de categoria e dificuldade */
.recipe-filtro__grupo + .recipe-filtro__grupo {
	margin-top: var(--wp--preset--spacing--4);
}

.recipe-filtro__titulo {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--2);
}

.recipe-filtro__opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
}

.recipe-filtro__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 36px;
	padding: 0.4em 0.9em;
	border: 1.5px solid var(--wp--preset--color--surface);
	border-radius: var(--wp--preset--spacing--1);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
	transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.recipe-filtro__pill:hover {
	border-color: var(--wp--preset--color--ink);
}

.recipe-filtro__pill:active {
	transform: scale(0.96);
}

.recipe-filtro__pill.is-ativo {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.recipe-filtro__count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75em;
	color: var(--wp--preset--color--text-muted);
}

.recipe-filtro__pill.is-ativo .recipe-filtro__count {
	color: rgba(255, 255, 255, 0.75);
}

.recipe-filtro__pill[hidden] {
	display: none;
}

.recipe-filtro__mais {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: var(--wp--preset--spacing--1);
	padding: 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	cursor: pointer;
}

.recipe-filtro__mais svg {
	width: 14px;
	height: 14px;
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.recipe-filtro__mais.is-aberto svg {
	transform: rotate(180deg);
}

.recipe-list > li.is-oculto {
	display: none !important;
}

/* "Carregar mais" — reaproveita o wp:query-pagination-next nativo (link real
   pra /page/2/, funciona sem JS) só estilizado como botão; o clique é
   interceptado em receitas-filtro.js pra buscar a próxima página e
   acrescentar os cards na lista atual, sem recarregar. */
.recipe-loadmore .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 48px;
	padding: 0.85em 1.8em;
	border-radius: var(--wp--preset--spacing--1);
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.recipe-loadmore .wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--primary);
}

.recipe-loadmore .wp-block-query-pagination-next:active {
	transform: scale(0.97);
}

.recipe-loadmore.is-carregando .wp-block-query-pagination-next {
	opacity: 0.6;
	pointer-events: none;
}

.recipe-loadmore.is-fim {
	display: none;
}

.recipe-loadmore__aviso {
	width: 100%;
	text-align: center;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 900px) {
	.recipe-layout {
		flex-direction: column;
	}

	.recipe-sidebar {
		width: 100%;
		flex-basis: auto;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--surface);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--4);
	}
}

@media (max-width: 600px) {
	.recipe-card {
		flex-direction: column;
		align-items: stretch;
	}

	.recipe-card__image {
		width: 100%;
		margin-block: 0;
	}

	.recipe-card__image img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.recipe-card__body {
		padding-block: 0;
		/* Imagem fica full-width da coluna; o conteúdo de texto entra com
		   respiro lateral pra ficar visivelmente mais estreito que a
		   imagem — o mesmo princípio de "imagem maior que o conteúdo" do
		   desktop, adaptado pro empilhado. */
		padding-inline: var(--wp--preset--spacing--2);
	}

	.recipe-card__excerpt {
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* A entrada em scroll é puramente decorativa (não carrega informação — ver
   critério de acessibilidade: remover não muda o que o card comunica), então
   quem pede menos movimento não fica esperando um scroll pra ver o card: ele
   já nasce totalmente visível, sem o estado escondido inicial. */
@media (prefers-reduced-motion: reduce) {
	.recipe-card.reveal {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	.recipe-card__image img,
	.recipe-card__image::after {
		transition: none;
	}

	.recipe-card:hover .recipe-card__image img {
		transform: none;
	}
}

/* Paginação — números em pill, atual destacado, anterior/próxima discretos */
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25em;
	height: 2.25em;
	padding: 0 0.5em;
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.wp-block-query-pagination a.page-numbers:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	padding: 0 0.75em;
	height: 2.25em;
	display: inline-flex;
	align-items: center;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* Breadcrumb (fallback sem Rank Math — com o plugin ativo, o estilo dele prevalece) */
.nv-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}

.nv-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 0.4em;
	color: var(--wp--preset--color--surface);
}

.nv-breadcrumb a {
	color: var(--wp--preset--color--text-muted);
}

/* Single post — kicker, meta do autor */
.single-kicker {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--1);
}

.single-kicker a {
	color: inherit;
}

.single-meta {
	align-items: center;
	gap: var(--wp--preset--spacing--1) !important;
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.single-meta__dot {
	margin: 0;
	color: var(--wp--preset--color--surface);
}

/* .single-hero é a única faixa com fundo escuro que usa kicker/meta — o
   vermelho e o cinza-texto padrão (pensados pra fundo branco) caem abaixo de
   4.5:1 em cima do preto e reprovam WCAG AA. Vermelho um pouco mais claro
   (ainda claramente "vermelho da marca") e branco a 70% resolvem sem trocar
   a paleta do resto do site. */
.single-hero .single-kicker {
	color: #dc4750;
}

.single-hero .single-meta {
	color: rgba(255, 255, 255, 0.7);
}

.single-hero .single-meta__dot {
	color: rgba(255, 255, 255, 0.3);
}

.single-hero .nv-breadcrumb {
	margin-bottom: var(--wp--preset--spacing--2);
}

.single-hero .nv-breadcrumb ol,
.single-hero .nv-breadcrumb a {
	color: rgba(255, 255, 255, 0.6);
}

/* Sem max-width próprio e sem mexer nas margens laterais: é o margin-inline:auto
   do layout "constrained" que posiciona o bloco na coluna de conteúdo (780px).
   Um max-width menor faz o WordPress centralizar o resumo dentro da coluna
   (fica recuado em relação ao título); zerar a margem joga o bloco pro limite
   do padding do grupo (fica colado na borda). Herdar a coluna é o que alinha. */
.single-hero__excerpt {
	margin-top: var(--wp--preset--spacing--2) !important;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--lg);
}

/* Imagem destacada do post — altura fixa em pixels (não aspect-ratio):
   aspect-ratio + max-height juntos fazem o navegador recalcular a LARGURA a
   partir da altura restringida, encolhendo a imagem também na horizontal.
   Controlando a altura direto no container, sem aspect-ratio no <figure>,
   evita esse conflito.
   margin-top:0 porque, sem isso, o blockGap padrão do WordPress (margin-top
   no bloco seguinte, mesmo mecanismo já zerado entre main/footer em
   .wp-site-blocks) deixa uma tarja branca entre o preto do header e a foto.
   overflow:hidden + a <img> propositalmente mais alta que o container (ver
   assets/js/single-parallax.js) é o que sustenta o efeito parallax: o JS só
   desloca a <img> verticalmente por transform (GPU, sem reflow), nunca
   mexe no tamanho do container — por isso a moldura fica sempre cheia
   mesmo com a imagem "andando" por dentro dela. */
.single-featured-image {
	position: relative;
	overflow: hidden;
	height: 480px;
	margin-top: 0 !important;
}

.single-featured-image img {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	/* Folga de 280px (bem acima do alcance máximo de ±120px que o JS usa)
	   pra nunca revelar a borda da moldura, em qualquer altura de tela. */
	height: calc(100% + 280px);
	object-fit: cover;
	transform: translateY(calc(-50% + var(--parallax-y, 0px)));
	will-change: transform;
}

@media (max-width: 600px) {
	.single-featured-image {
		height: 260px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-featured-image img {
		transform: translateY(-50%);
	}
}

/* Compartilhar — ícones monocromáticos, mesma linguagem visual do sumário.
   flex-wrap:wrap de propósito: rótulo + 5 ícones + gaps passam de 240px
   (a coluna do sumário) numa linha só — sem quebra, o item de grid estourava
   a track e vazava pra fora do layout inteiro (grid não encolhe conteúdo
   por padrão, min-width implícito é "auto"). */
.nv-compartilhar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin-top: var(--wp--preset--spacing--2);
}

.nv-compartilhar__label {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
	margin-right: 0.2em;
}

.nv-compartilhar__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--surface);
	background: none;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.nv-compartilhar__icone svg {
	width: 15px;
	height: 15px;
}

.nv-compartilhar__icone:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.nv-compartilhar__icone.is-copiado {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Layout de duas colunas: conteúdo + sumário fixo à direita. O <aside> vem
   DEPOIS do conteúdo no HTML de propósito (leitor de tela chega no artigo
   antes de uma lista de âncoras) — o grid só reordena visualmente, sem
   precisar de `order`, já que a coluna 2 cai onde o <aside> já está no DOM. */
/* A coluna do sumário é fixa e encosta na borda direita do container, então o
   que desloca o bloco pra esquerda é alargar a track (a borda-guia da esquerda
   anda junto), não mexer no gap — o gap só encolhe a coluna do texto e deixa o
   sumário onde estava. */
.single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--wp--preset--spacing--5);
	align-items: start;
}

.single-toc {
	/* min-width:0 — sem isso, um item de grid nunca encolhe abaixo do
	   tamanho do seu próprio conteúdo (min-width implícito é "auto"), então
	   qualquer coisa mais larga que a coluna (era o caso do .nv-compartilhar
	   antes do flex-wrap acima) estourava a track e vazava pra fora do
	   layout — daí a sensação de "colado na borda". */
	min-width: 0;
	position: sticky;
	top: calc(var(--wp--preset--spacing--3) + 88px);
	border-left: 2px solid var(--wp--preset--color--surface);
	padding-left: var(--wp--preset--spacing--3);
}

.single-toc__label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: var(--wp--preset--spacing--1);
}

.single-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.single-toc__list a {
	display: block;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s ease;
}

.single-toc__list a:hover {
	color: var(--wp--preset--color--ink);
}

.single-toc__list .is-active > a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.single-toc__list .single-toc__sub {
	padding-left: 1em;
}

.single-toc__toc.is-empty {
	display: none;
}

.single-toc .nv-compartilhar {
	margin-top: var(--wp--preset--spacing--3);
	padding-top: var(--wp--preset--spacing--2);
	border-top: 1px solid var(--wp--preset--color--surface);
}

.single-toc__toc.is-empty + .nv-compartilhar {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

@media (max-width: 900px) {
	.single-layout {
		grid-template-columns: 1fr;
	}

	.single-toc {
		position: static;
		border-left: none;
		border: 1px solid var(--wp--preset--color--surface);
		border-radius: 8px;
		padding: var(--wp--preset--spacing--2);
	}
}

/* Posts relacionados */
.nv-relacionados__eyebrow {
	display: block;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nv-relacionados__titulo {
	margin: 0.2em 0 0;
}

/* O card aqui é o mesmo .recipe-card do archive de Big Receitas (ver bloco lá
   em cima) — só muda o contexto: dois por linha em vez de lista, então a
   imagem é mais estreita e as linhas divisórias saem de cena (quem separa os
   cards é o gap do grid, e um divisor sob cada card deixaria a última linha
   com um traço solto embaixo). O !important no gap é pra ganhar do
   `gap: ... !important` da regra base do .recipe-card. */
.nv-relacionados__grid {
	gap: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4) !important;
}

.nv-relacionados .recipe-card,
.nv-carrossel .recipe-card {
	gap: var(--wp--preset--spacing--3) !important;
	padding-block: 0;
	border-bottom: none;
}

/* min-width:601px porque abaixo disso o .recipe-card empilha (imagem em cima,
   ocupando 100% da coluna) — uma largura fixa aqui, mais específica que a do
   media query de 600px, cancelaria o empilhamento e deixaria a imagem presa
   em 280px na tela do celular. */
@media (min-width: 601px) {
	.nv-relacionados .recipe-card__image,
	.nv-carrossel .recipe-card__image {
		width: 280px;
		margin-block: 0;
	}
}

/* Abaixo disso a coluna fica estreita demais pro card deitado (sobrariam ~160px
   pro texto ao lado da imagem): volta pra uma coluna, com o card ocupando a
   largura inteira igual ao archive. Abaixo de 600px o próprio .recipe-card já
   empilha imagem em cima do texto, sem precisar de nada aqui. */
@media (max-width: 1100px) {
	.nv-relacionados__grid {
		grid-template-columns: 1fr !important;
	}
}

/* Blocos nativos de conteúdo (post-content, páginas) — sem isso ficam no
   estilo cru do navegador assim que um post usar citação, tabela ou lista. */
.entry-content blockquote,
.wp-block-post-content blockquote {
	margin: var(--wp--preset--spacing--3) 0;
	padding-left: var(--wp--preset--spacing--2);
	border-left: 3px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-style: normal;
	color: var(--wp--preset--color--ink);
}

.entry-content blockquote cite,
.wp-block-post-content blockquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--1);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	color: var(--wp--preset--color--text-muted);
}

.entry-content table,
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--wp--preset--spacing--3) 0;
	font-size: var(--wp--preset--font-size--sm);
}

.entry-content th,
.entry-content td,
.wp-block-post-content th,
.wp-block-post-content td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--wp--preset--color--surface);
	text-align: left;
}

.entry-content th,
.wp-block-post-content th {
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.4em;
	margin: var(--wp--preset--spacing--2) 0;
}

.entry-content li,
.wp-block-post-content li {
	margin-bottom: 0.4em;
}

.entry-content code,
.wp-block-post-content code {
	background: var(--wp--preset--color--surface);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

.entry-content pre,
.wp-block-post-content pre {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--2);
	border-radius: 8px;
	overflow-x: auto;
	margin: var(--wp--preset--spacing--3) 0;
}

.entry-content pre code,
.wp-block-post-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}

/* Alvos de toque — pills de paginação e abas de filtro um pouco pequenos
   pra toque confortável em mobile (recomendação Google: ~44px mínimo). */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	min-height: 40px;
}

.nv-busca-filtro__item {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

/* Superfícies que o navegador desenha por conta própria e chegam sem
   identidade nenhuma: seleção de texto e anel de foco. */
::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

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

/* Ícones como máscara e não como background-image: assim herdam currentColor e
   acompanham a inversão de cor no hover sem precisar de um segundo SVG. */
:root {
	/* surface (#F5F5F5) sobre branco da 1,09:1 — a borda existia no codigo e
	   nao na tela. Este token e um cinza que de fato desenha o limite. */
	--nv-borda: rgba(40, 40, 40, 0.16);
	/* Azul do Bigmais Voce. Nao entra na paleta do theme.json de proposito: e cor
	   da sub-marca, usada so na forma daquele bloco, e nao uma cor de texto ou de
	   fundo que alguem deva poder escolher no editor. */
	--nv-voce-azul: #31B5E4;
	/* Vermelho da marca so alcanca 2,94:1 sobre o preto do rodape e 4,18:1 sobre
	   preto puro — reprova em texto normal nos dois casos. Este e o tom mais
	   proximo do #D62631 que passa em 4,5:1 sobre o fundo do rodape (6,4:1 sobre
	   preto). Vale so pra texto pequeno em fundo escuro. */
	--nv-vermelho-escuro-ok: #FF5C66;
	--nv-rodape-filete: rgba(255, 255, 255, 0.14);
	--nv-icone-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4L10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
	--nv-icone-telefone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
	--nv-icone-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--nv-icone-folheto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
	--nv-icone-carrinho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h2.6l2.6 12.1a1.6 1.6 0 0 0 1.6 1.3h8.8a1.6 1.6 0 0 0 1.6-1.3L21 7H6'/%3E%3C/svg%3E");
	--nv-icone-pessoas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--nv-icone-loja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.5 4h13L20 9.5'/%3E%3Cpath d='M4 9.5a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0'/%3E%3Cpath d='M5.5 11.6V20h13v-8.4'/%3E%3Cpath d='M10 20v-4.6h4V20'/%3E%3C/svg%3E");
	--nv-icone-seta-esq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
	--nv-icone-zoom-mais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3Cpath d='M8 11h6'/%3E%3Cpath d='M11 8v6'/%3E%3C/svg%3E");
	--nv-icone-zoom-menos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
	--nv-icone-tela-cheia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5'/%3E%3Cpath d='M20 9V4h-5'/%3E%3Cpath d='M4 15v5h5'/%3E%3Cpath d='M20 15v5h-5'/%3E%3C/svg%3E");
	--nv-icone-baixar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
	--nv-icone-tv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13' rx='2'/%3E%3Cpath d='m8 3 4 4 4-4'/%3E%3Cpath d='m10.7 11 4 2.5-4 2.5z'/%3E%3C/svg%3E");
	--nv-icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	--nv-icone-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Páginas do tipo "Lojas" (taxonomia tipo_de_pagina — ver inc/tipos-de-pagina.php)

   A ordem da coluna de informação é a ordem da pergunta de quem chega aqui:
   está aberto agora → como chego / como ligo → onde fica → e nos outros dias?
   --------------------------------------------------------------------------- */

/* A medida da pagina e a do menu: o wrapper de fora e o constrained de 1440px
   e o padding lateral mora AQUI, no elemento interno — exatamente o arranjo do
   .site-header__inner e do .recipe-layout. Foi por nao seguir isso que o
   conteudo desta pagina escapava 240px a esquerda do logo em telas largas: com
   o padding no proprio grupo constrained, a area centralizada encolhe antes de
   ser posicionada. A 1440 as duas medidas coincidem por acaso, e foi essa
   coincidencia que passou na primeira verificacao.
   Colunas de largura fixa com space-between: a foto encosta na direita (mesma
   borda dos cards abaixo), a informacao na esquerda, e a folga vira respiro
   entre as duas em vez de largura extra de imagem. */
.loja-topo {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 760px);
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	/* start, nao center: a coluna de informacao e mais baixa que a foto, e
	   centralizada ela flutuava com folga morta em cima e embaixo. Alinhada
	   pelo topo, o selo de status nasce na mesma linha da borda da foto. */
	align-items: start;
}

/* O gap base e curto de proposito: endereco, telefone e horario formam UM
   grupo de leitura, nao tres blocos soltos. O respiro grande fica so em volta
   do par de acoes, que e o que separa "a resposta" de "os detalhes". */
.loja-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-top: var(--wp--preset--spacing--4);
}

.loja-acoes {
	margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

/* Selo de status — preenchido pelo JS (ver assets/js/loja-status.js). Nasce
   vazio e escondido: sem script, a página mostra o quadro de horários e não
   promete um "agora" que ninguém calculou. */
.loja-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.5em 1em 0.5em 0.85em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.2;
}

.loja-status:empty {
	display: none;
}

.loja-status__ponto {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: currentColor;
}

.loja-status__texto {
	font-weight: 700;
}

.loja-status.is-aberto {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* O ponto vermelho é o único movimento autoral da página: sinal de "ao vivo",
   na cor da marca, e só quando a loja está de fato aberta. Batida lenta, só
   opacidade — nada que force layout. */
.loja-status.is-aberto .loja-status__ponto {
	background: var(--wp--preset--color--primary);
}

/* Escopado ao selo do topo: o seletor sem escopo fazia o ponto pulsar
   tambem em cada card das outras lojas — seis pulsos simultaneos, o oposto
   de "um unico momento de movimento". */
@media (prefers-reduced-motion: no-preference) {
	.loja-topo .loja-status.is-aberto .loja-status__ponto {
		animation: loja-pulso 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	}
}

@keyframes loja-pulso {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* Separador entre o estado e o detalhe. Ponto medio em vez de barra: le-se
   como pausa, nao como divisao de campos. */
.loja-status__detalhe::before {
	content: "·";
	margin-right: 0.5em;
	opacity: 0.55;
}

.loja-status.is-aberto .loja-status__detalhe {
	color: rgba(255, 255, 255, 0.75);
}

/* Fechado e a resposta em metade das horas do dia: precisa de contorno e de
   texto em ink pra ter o mesmo peso de leitura do aberto, sem roubar o
   preto solido nem o ponto vermelho, que sinalizam "em funcionamento". */
.loja-status.is-fechado {
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--nv-borda);
	color: var(--wp--preset--color--ink);
}

.loja-status.is-fechado .loja-status__ponto {
	background: var(--wp--preset--color--text-muted);
}

.loja-status.is-fechado .loja-status__detalhe {
	color: var(--wp--preset--color--text-muted);
}

.loja-acoes {
	gap: var(--wp--preset--spacing--2) !important;
}

/* "Como chegar" é o CTA da página e usa o botão da marca como está. O telefone
   é a ação secundária: mesmo corpo, contorno em vez de preenchimento, pra não
   competir com ela. */
.loja-acao .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 48px;
}

.loja-acao--ligar .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

.loja-acao--ligar .wp-block-button__link:hover,
.loja-acao--ligar .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.loja-endereco,
.loja-telefone {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
}

.loja-endereco:empty,
.loja-telefone:empty {
	display: none;
}

.loja-endereco::before,
.loja-telefone::before {
	content: "";
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 0.15em;
	background: var(--wp--preset--color--primary);
	-webkit-mask: var(--nv-icone-pin) center / contain no-repeat;
	mask: var(--nv-icone-pin) center / contain no-repeat;
}

.loja-telefone::before {
	-webkit-mask-image: var(--nv-icone-telefone);
	mask-image: var(--nv-icone-telefone);
}

/* Quadro de horários — a linha que vale hoje ganha peso e a etiqueta "hoje".
   O destaque é aplicado pelo JS junto com o selo: "hoje" também depende do
   relógio e, gravado no HTML cacheado, envelheceria igual. */
.loja-horarios {
	position: relative;
	width: 100%;
	margin: 0;
	padding-left: 2.05rem;
	display: flex;
	flex-direction: column;
}

.loja-horarios::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--primary);
	-webkit-mask: var(--nv-icone-relogio) center / contain no-repeat;
	mask: var(--nv-icone-relogio) center / contain no-repeat;
}

.loja-horarios__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em var(--wp--preset--spacing--3);
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--nv-borda);
}

.loja-horarios__linha:first-child {
	padding-top: 0;
}

.loja-horarios__linha:last-child {
	border-bottom: none;
}

.loja-horarios__dia,
.loja-horarios__hora {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--base);
}

.loja-horarios__hora,
.loja-telefone,
.loja-status__detalhe {
	font-variant-numeric: tabular-nums;
}

.loja-horarios__linha.is-hoje .loja-horarios__dia,
.loja-horarios__linha.is-hoje .loja-horarios__hora {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* A proporcao mora aqui, e nao no atributo aspectRatio do bloco, porque o
   WordPress escreve a proporcao na <figure> e width/height:100% na <img>: com
   um teto de altura na imagem, a figura continuava com a altura da proporcao e
   sobrava figura vazia embaixo da foto. Uma fonte so de verdade resolve.
   A proporcao serve o assunto, nao a aritmetica da coluna: 16/9 no desktop
   preserva a frente da loja inteira (2,4:1 casava a altura da coluna mas
   cortava acima da linha das portas), e 4/3 no mobile da corpo a fachada.
   A sobra de altura ao lado da informacao e barata; o corte nao. */
.loja-foto {
	margin: 0;
	position: relative;
	z-index: 2;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
}

/* A foto sobe pra dentro da faixa preta — so onde ela e coluna. Empilhada no
   mobile, a mesma margem negativa a jogaria por cima do quadro de horarios,
   que e o irmao logo acima. O z-index acima e o que faz a imagem passar por
   cima do preto em vez de sumir atras do recorte da onda. */
@media (min-width: 901px) {
	.loja-foto {
		margin-top: calc(var(--wp--preset--spacing--7) * -1);
	}
}

.loja-foto img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

@media (max-width: 900px) {
	.loja-foto {
		aspect-ratio: 4 / 3;
	}
}

/* O corpo da pagina e opcional neste tipo: quase toda loja tem so os campos.
   Vazio, o grupo continuaria cobrando o proprio padding e abrindo um vao morto
   antes de "Nossas outras lojas". :not(:has(> *)) e o que enxerga isso — o
   grupo tem quebras de linha dentro, entao :empty nunca casaria. */
.loja-conteudo:not(:has(> *)) {
	display: none;
}

.loja-outras__titulo {
	margin: 0 0 var(--wp--preset--spacing--4);
}

/* Cinco colunas fixas em vez de auto-fill: a rede tem 6 lojas, entao a pagina
   de cada uma lista exatamente as 5 irmas numa linha so. Contagem fixa ligada
   ao inventario real, nao ao que o auto-fill decidir caber. */
.loja-grid {
	gap: var(--wp--preset--spacing--3) !important;
}

@media (max-width: 1200px) {
	.loja-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 900px) {
	.loja-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.loja-grid {
		grid-template-columns: 1fr !important;
	}
}

.loja-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--2);
	border: 1px solid var(--nv-borda);
	border-radius: 16px;
	transition: border-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.loja-card:hover,
.loja-card:focus-within {
	border-color: var(--wp--preset--color--ink);
}

.loja-card > * {
	margin-block: 0;
}

.loja-card .loja-status {
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.35em 0.8em 0.35em 0.7em;
}

.loja-card h3 a {
	text-decoration: none;
}

.loja-card h3 {
	line-height: 1.25;
}

.loja-card__endereco {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 900px) {
	.loja-topo {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--4);
	}

	/* A foto vai pro fim no mobile: quem abre no celular quer a resposta
	   (aberto? como chego?) antes da fachada — a fachada só passa a importar
	   na hora de reconhecer o lugar ao chegar. */
	.loja-info {
		order: 1;
	}

	.loja-foto {
		order: 2;
	}
}

@media (max-width: 480px) {
	.loja-acoes {
		width: 100%;
	}

	.loja-acao {
		flex: 1 1 100%;
	}

	.loja-acao .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* Duas colunas: o vídeo lidera (60%) e a coluna de atalhos (40%) recolhe quem
   já assistiu — ou quem nem veio pelo vídeo. A calha larga com um fio de 1px no
   meio separa sem criar duas caixas: o divisor é uma linha, não uma moldura. */
.tv-palco {
	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	/* stretch, nao start: com start a coluna de atalhos so ocupa a altura do
	   proprio conteudo e o fio para no ultimo botao, virando um traco solto no
	   meio da pagina em vez de separar as colunas. */
	align-items: stretch;
}

/* O blockGap do grupo entra como margin-block-start no segundo filho — numa
   grid isso empurra a coluna inteira 24px pra baixo e encurta o fio na mesma
   medida. A calha aqui vem do padding das colunas, nao do gap. */
.tv-palco > * {
	margin-block-start: 0;
}

/* A calha e o padding das duas colunas, nao um gap: assim o fio nasce
   exatamente no meio dela. A coluna de atalhos cede a largura — os botoes nao
   precisam de corpo, a respiracao entre as colunas precisa. */
.tv-coluna-video {
	padding-right: var(--wp--preset--spacing--7);
}

.tv-atalhos {
	border-left: 1px solid var(--nv-borda);
	padding-left: var(--wp--preset--spacing--7);
}

/* O blockGap do WordPress poe margin-block-start no primeiro filho do grupo e
   descia o titulo 24px em relacao ao topo do video. */
.tv-atalhos > :first-child {
	margin-top: 0;
}

.tv-atalhos__titulo {
	margin: 0 0 var(--wp--preset--spacing--3);
	line-height: 1.2;
}

.tv-atalhos .wp-block-buttons {
	gap: var(--wp--preset--spacing--2) !important;
}

/* Linhas de largura cheia, não CTAs empilhados: quatro botões vermelhos
   disputariam a atenção entre si e com o play, que é o único destino
   preenchido da página. Aqui a cor mora no ícone e o contorno faz o corpo. */
.tv-atalho .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 0.8em;
	width: 100%;
	padding: 1rem 1.15rem;
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--nv-borda);
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	transition: box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1), background-color 250ms cubic-bezier(0.16, 1, 0.3, 1), color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tv-atalho .wp-block-button__link::before {
	content: "";
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background: var(--wp--preset--color--primary);
	-webkit-mask: var(--nv-atalho-icone) center / contain no-repeat;
	mask: var(--nv-atalho-icone) center / contain no-repeat;
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Seta à direita: diz que a linha leva pra outro lugar, o que quatro rótulos
   sozinhos não dizem. Anda um passo no hover, sem mexer no resto da linha. */
.tv-atalho .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-left: auto;
	background: var(--wp--preset--color--text-muted);
	-webkit-mask: var(--nv-icone-seta) center / contain no-repeat;
	mask: var(--nv-icone-seta) center / contain no-repeat;
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), background-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tv-atalho .wp-block-button__link:hover,
.tv-atalho .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

.tv-atalho .wp-block-button__link:hover::after,
.tv-atalho .wp-block-button__link:focus-visible::after {
	transform: translateX(3px);
	background: var(--wp--preset--color--ink);
}

.tv-atalho--folheto .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-folheto);
}

.tv-atalho--compra .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-carrinho);
}

.tv-atalho--relacionamento .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-pessoas);
}

.tv-atalho--lojas .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-loja);
}

.tv-atalho--baixar .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-baixar);
}

.tv-atalho--tv .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-tv);
}

@media (max-width: 900px) {
	.tv-palco {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--5);
	}

	.tv-coluna-video {
		padding-right: 0;
	}

	/* Empilhado, o fio vira régua horizontal: mesma função de separar, na
	   direção em que as colunas agora se encontram. */
	.tv-atalhos {
		border-left: none;
		border-top: 1px solid var(--nv-borda);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--5);
	}
}

/* ---------------------------------------------------------------------------
   Visualizador do folheto (tipo "ofertas") — pdf.js, sem plugin de flipbook
   --------------------------------------------------------------------------- */

.folheto {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.folheto:focus {
	outline: none;
}

.folheto:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 16px;
}

/* O palco tem proporção fixa antes de qualquer página existir: sem isso a
   página salta de altura quando o primeiro render chega, e o salto acontece
   exatamente onde a pessoa está olhando. */
/* A proporcao vem do tamanho real da pagina do PDF (o JS grava
   --folheto-proporcao depois de abrir o documento). O valor inicial e so um
   palpite pra reservar espaco antes disso e evitar salto de layout.
   overflow:hidden no zoom normal: a vista e calculada pra caber inteira, entao
   barra de rolagem ali seria sintoma de erro de conta, nao recurso. */
.folheto__palco {
	position: relative;
	aspect-ratio: var(--folheto-proporcao, 3 / 4);
	overflow: hidden;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	touch-action: pan-y pinch-zoom;
	overscroll-behavior: contain;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 901px) {
	.folheto__palco {
		aspect-ratio: var(--folheto-proporcao, 3 / 2);
	}
}

/* Ampliado, a rolagem passa a ser a ferramenta de passear pela pagina. */
.folheto.is-ampliado .folheto__palco {
	overflow: auto;
	align-items: flex-start;
}

/* As duas paginas encostam uma na outra: e uma folha aberta, nao dois cards. */
.folheto__vista {
	display: flex;
	align-items: flex-start;
	margin: auto;
}

.folheto.is-ampliado .folheto__palco {
	cursor: grab;
	touch-action: none;
}

.folheto__pagina {
	display: block;
}

.folheto__capa {
	display: block;
	width: 100%;
	height: auto;
}

.folheto__capa {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* O canvas nasce vazio: mostrá-lo antes do primeiro render deixaria um
   retângulo em branco por cima da capa. */
.folheto__vista {
	opacity: 0;
	transition: opacity 250ms ease-out;
}

.folheto.is-pronto .folheto__vista {
	opacity: 1;
}

.folheto__aviso {
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--3);
	transform: translateX(-50%);
	margin: 0;
	max-width: 90%;
	padding: 0.55em 1em;
	border-radius: 999px;
	background: rgba(40, 40, 40, 0.88);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

.folheto__aviso:empty {
	display: none;
}

.folheto.is-erro .folheto__aviso {
	background: var(--wp--preset--color--primary);
}

.folheto__barra {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.4rem;
	border: 1px solid var(--nv-borda);
	border-radius: 999px;
	align-self: center;
}

.folheto__botao {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folheto__botao::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	background: var(--wp--preset--color--ink);
	-webkit-mask: var(--nv-botao-icone) center / contain no-repeat;
	mask: var(--nv-botao-icone) center / contain no-repeat;
}

.folheto__botao:hover:not(:disabled),
.folheto__botao:focus-visible:not(:disabled) {
	background: var(--wp--preset--color--surface);
}

.folheto__botao:disabled {
	cursor: default;
	opacity: 0.3;
}

.folheto__botao--anterior { --nv-botao-icone: var(--nv-icone-seta-esq); }
.folheto__botao--proxima  { --nv-botao-icone: var(--nv-icone-seta); }
.folheto__botao--menos    { --nv-botao-icone: var(--nv-icone-zoom-menos); }
.folheto__botao--mais     { --nv-botao-icone: var(--nv-icone-zoom-mais); }
.folheto__botao--tela     { --nv-botao-icone: var(--nv-icone-tela-cheia); }

.folheto__contador {
	min-width: 6.5em;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.folheto__divisor {
	width: 1px;
	height: 20px;
	margin: 0 0.2rem;
	background: var(--nv-borda);
}

/* Tela cheia: o palco toma a altura da tela e a barra flutua sobre ele, que é
   como um leitor de PDF se comporta — a barra fixa embaixo comeria altura útil
   justamente onde ela é mais escassa. */
.folheto.is-tela-cheia {
	background: var(--wp--preset--color--dark);
	padding: 0;
}

.folheto.is-tela-cheia .folheto__palco {
	aspect-ratio: auto !important;
	height: 100vh;
	border-radius: 0;
	background: var(--wp--preset--color--dark);
}

.folheto.is-tela-cheia .folheto__barra {
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--3);
	transform: translateX(-50%);
	background: var(--wp--preset--color--white);
	border-color: transparent;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* A barra e um item flex e nao encolhe abaixo do proprio conteudo: com os
   tamanhos de desktop ela media 367px e empurrava a coluna inteira para fora
   da tela de 390. Aperta os controles em vez de deixar a pagina rolar de lado.
   44px continua sendo o alvo de toque no que importa (as setas); o zoom e a
   tela cheia cedem 4px. */
@media (max-width: 600px) {
	.folheto__barra {
		gap: 0.15rem;
		padding: 0.3rem;
	}

	.folheto__botao {
		width: 40px;
		height: 40px;
	}

	.folheto__botao--anterior,
	.folheto__botao--proxima {
		width: 44px;
		height: 44px;
	}

	.folheto__contador {
		min-width: 4.6em;
		font-size: var(--wp--preset--font-size--xs);
	}

	.folheto__divisor {
		margin: 0;
	}
}

/* ---------------------------------------------------------------------------
   Programa de Relacionamento (tipo "relacionamento")

   A produção resolve o hero numa faixa azul que não existe em nenhuma outra
   página do site. Aqui ele mora no preto do tema: a arte do programa já é
   vermelha e ganha força sobre fundo escuro, e o programa segue reconhecível
   pela arte, não por uma cor órfã.
   --------------------------------------------------------------------------- */

/* Faixa do Bigmais Você — replicando a referência de produção. O azul e a
   sangria da arte são o que dá identidade ao programa; a onda fecha a faixa,
   como no resto do site.
   Cor em variável e não solta no meio da regra: se a faixa for aprovada, ela
   sobe pro theme.json como token de paleta e passa a valer no editor também. */
:root {
	--nv-bigmais-voce: #0dade1;
}

/* O blockGap do <main> entra como margin-block-start no segundo filho, e como
   as duas faixas são coloridas esse vão de 24px virava uma tira branca entre o
   preto e o azul. As bandas têm que se encostar. */
.rel-faixa {
	margin-block-start: 0 !important;
	position: relative;
	/* overflow:hidden é o que recorta a arte na base da faixa, do mesmo jeito
	   que a referência: a modelo é cortada pela onda, não redimensionada até
	   caber. */
	overflow: hidden;
	background: var(--nv-bigmais-voce);
}

.rel-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
	gap: var(--wp--preset--spacing--5);
	align-items: end;
}

.rel-hero > * {
	margin-block-start: 0;
}

.rel-hero__texto {
	padding-bottom: var(--wp--preset--spacing--5);
}

.rel-hero__texto > * {
	margin-block: 0;
}

.rel-hero__chamada {
	max-width: 18ch;
}

.rel-hero__apoio {
	margin-top: var(--wp--preset--spacing--2) !important;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--lg);
	max-width: 42ch;
}

.rel-hero__acao {
	margin-top: var(--wp--preset--spacing--4) !important;
}

/* A margem negativa cancela o padding de baixo da faixa: a arte desce até a
   borda e o que passar disso é cortado pelo overflow. É essa sangria que faz a
   modelo encostar na onda em vez de flutuar num quadrado.
   !important porque o WordPress zera margin-block dos filhos diretos de um
   grupo com blockGap, num rule inline no head que ganha do stylesheet do tema
   por ordem de carregamento. */
.rel-hero__arte {
	margin: 0 !important;
	margin-bottom: calc(var(--wp--preset--spacing--7) * -1) !important;
	align-self: end;
	justify-self: end;
}

.rel-hero__arte img {
	display: block;
	width: 100%;
	height: auto;
}

/* A onda passa por cima da arte — é ela que faz o corte. */
.rel-faixa .wave-divider {
	z-index: 2;
}

.rel-video {
	max-width: 860px;
	margin: 0 auto;
}

.rel-titulo {
	margin: var(--wp--preset--spacing--7) 0 var(--wp--preset--spacing--5);
	max-width: 24ch;
}

/* Quatro passos como sequência, não como quatro caixas iguais: o número e o
   fio contam a ordem, que é a informação que esse bloco carrega. Cartão aqui
   só acrescentaria moldura em volta de conteúdo que não precisa ser separado. */
.rel-passos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
}

/* O fio começa e termina no centro do primeiro e do último número — daí os
   22px de recuo (metade do círculo) em vez de correr de borda a borda. */
.rel-passos::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 22px;
	right: 22px;
	height: 1px;
	background: var(--nv-borda);
}

/* Sem isso o blockGap do grupo entra como margin-block-start nos passos 2, 3 e
   4 e so o primeiro numero fica na altura do fio — o conector passa a cortar o
   nada. Mesmo mecanismo ja documentado no .tv-palco. */
.rel-passos > * {
	margin-block-start: 0;
}

.rel-passo {
	position: relative;
}

.rel-passo > * {
	margin-block: 0;
}

.rel-passo__numero {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--wp--preset--spacing--2) !important;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.rel-passo h3 {
	margin-bottom: 0.35em !important;
}

.rel-passo p:not(.rel-passo__numero) {
	color: var(--wp--preset--color--text-muted);
}

/* Fecho em caixa estreita e centralizada, sobre fundo claro. E a unica quebra
   do alinhamento a esquerda da pagina, e e proposital: a medida curta e a
   centralizacao isolam a ultima chamada do fluxo de leitura que vem de cima,
   em vez de deixa-la parecer mais um paragrafo da sequencia. */
.rel-fechamento__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.rel-fechamento__inner > * {
	margin-block: 0;
}

.rel-fechamento__texto {
	color: var(--wp--preset--color--text-muted);
}

.rel-fechamento .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--2);
}

@media (max-width: 900px) {
	.rel-hero {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--5);
	}

	.rel-hero__arte {
		justify-self: start;
	}

	/* Empilhado, o fio vira uma linha vertical passando pelos números, e cada
	   passo abre espaço à esquerda pra ela. */
	.rel-passos {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--4);
	}

	.rel-passos::before {
		top: 22px;
		bottom: 22px;
		left: 22px;
		right: auto;
		width: 1px;
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
   Nossa História (tipo "historia")

   A cronologia É o esqueleto da página: cada década é uma faixa de largura
   total com fundo próprio, e a alternância preto / branco / preto com o
   vermelho na chegada dá o ritmo que a versão anterior não tinha (tudo espremido
   na metade esquerda de um quadro branco).

   Os fundos foram escolhidos por contraste medido, não por gosto: o cinza
   escuro #282828 daria 2.94:1 com o vermelho da marca e reprova até para texto
   grande, então ficou de fora. Sobre preto o vermelho da paleta dá 4.18:1 —
   serve para o ano, que é display, mas não para texto corrido; por isso os
   rótulos usam o vermelho clareado (#dc4750, 5.06:1), o mesmo já usado no hero
   do single de receita.
   --------------------------------------------------------------------------- */

.hist-faixa {
	margin-block-start: 0 !important;
}

/* O corpo da pagina e opcional neste tipo. Vazio, o grupo cobraria o
   proprio padding e abriria uma faixa branca morta antes do rodape. */
.hist-conteudo:not(:has(> *)) {
	display: none;
}

.hist-faixa__inner {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}

.hist-faixa__inner > * {
	margin-block-start: 0;
}

/* Rótulo da década: é ele que ocupa a coluna da esquerda e impede a página de
   se amontoar num canto. Corpo display, sem caixa. */
.hist-decada {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.hist-marcos {
	display: flex;
	flex-direction: column;
}

.hist-marcos > * {
	margin-block-start: 0;
}

.hist-marco {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--4);
	align-items: baseline;
	padding: var(--wp--preset--spacing--3) 0;
}

.hist-marco > * {
	margin-block: 0;
}

/* Filete embaixo de cada marco — é ele que ganha o movimento (ver bloco de
   motion adiante): risca da esquerda pra direita quando o marco entra. */
.hist-marco::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	transform-origin: left center;
}

.hist-marco:last-child::after {
	content: none;
}

/* --h-2 e nao --h2: o WordPress passa o slug do preset por kebab-case, entao
   "h2" vira "h-2" na variavel (a classe correspondente, has-h-2-font-size, ja
   nasce com o hifen e denuncia isso). Escrito --h2 a declaracao e invalida e
   descartada em silencio: o texto cai pro tamanho de corpo sem nenhum aviso. */
.hist-marco__ano {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.hist-marco__nome {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.3;
}

/* --- os quatro fundos --- */

.hist-faixa--escura {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
}

.hist-faixa--escura .hist-decada,
.hist-faixa--escura .hist-marco__ano {
	color: #dc4750;
}

.hist-faixa--escura .hist-marco::after {
	background: rgba(255, 255, 255, 0.18);
}

.hist-faixa--clara .hist-decada,
.hist-faixa--clara .hist-marco__ano {
	color: var(--wp--preset--color--primary);
}

.hist-faixa--clara .hist-marco::after {
	background: var(--nv-borda);
}

.hist-faixa--marca {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.hist-faixa--marca .hist-decada,
.hist-faixa--marca .hist-marco__ano {
	color: var(--wp--preset--color--white);
}

.hist-faixa--marca .hist-marco__nome {
	color: rgba(255, 255, 255, 0.88);
}

.hist-faixa--marca .hist-marco::after {
	background: rgba(255, 255, 255, 0.28);
}

/* --- abertura: missao e visao a esquerda, valores a direita --- */

.hist-abertura {
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}

.hist-abertura > * {
	margin-block-start: 0;
}

.hist-manifesto {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}

.hist-manifesto > * {
	margin-block-start: 0;
}

.hist-manifesto__item > * {
	margin-block: 0;
}

.hist-manifesto__rotulo {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* h-2 e nao h-1: a coluna passou a ter 40% da largura, e o corpo maior
   quebrava a visao em quatro linhas curtas. */
.hist-manifesto__frase {
	margin-top: var(--wp--preset--spacing--2) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
	line-height: 1.15;
}

/* --- valores --- */

.hist-valores {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
}

.hist-valores > * {
	margin-block-start: 0;
}

.hist-valor {
	padding-top: var(--wp--preset--spacing--2);
	border-top: 2px solid var(--wp--preset--color--primary);
}

.hist-valor > * {
	margin-block: 0;
}

.hist-valor h3 {
	margin-bottom: 0.3em !important;
}

.hist-valor p {
	color: var(--wp--preset--color--text-muted);
}

.hist-secao {
	margin: 0 0 var(--wp--preset--spacing--5);
}

/* ---------------------------------------------------------------------------
   Movimento

   Uma receita só: opacidade + subida curta + desfoque saindo. O desfoque faz o
   elemento materializar em vez de só piscar. Curva e duração são as mesmas que
   o tema já usa nos cards de receita — motion novo com outra curva lê como
   enxerto, não como acabamento.

   O estado escondido é aplicado pelo JS (classe .reveal), nunca no CSS
   entregue: sem script a página nasce inteira, e quem pede movimento reduzido
   no sistema não recebe nem o estado escondido.
   --------------------------------------------------------------------------- */

[data-nv-revelar].reveal {
	opacity: 0;
	transform: translateY(14px);
	filter: blur(6px);
	transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 550ms cubic-bezier(0.16, 1, 0.3, 1),
		filter 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-nv-revelar].reveal.is-visivel {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* O filete risca da esquerda pra direita depois do texto chegar: marca a
   entrada do marco sem competir com ele. scaleX não recalcula layout. */
.hist-marco.reveal::after {
	transform: scaleX(0);
	transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
}

.hist-marco.reveal.is-visivel::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	[data-nv-revelar].reveal,
	[data-nv-revelar].reveal.is-visivel {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	.hist-marco.reveal::after,
	.hist-marco.reveal.is-visivel::after {
		transform: none;
		transition: none;
	}
}

@media (max-width: 900px) {
	.hist-faixa__inner,
	.hist-abertura,
	.hist-valores {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--4);
	}

	.hist-marco {
		grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--3);
	}
}

/* ---------------------------------------------------------------------------
   Institucional — a home do site (a raiz da produção redireciona pra loja
   online, então esta página é a home de fato).
   --------------------------------------------------------------------------- */

/* Banner do topo — uma foto sorteada por carregamento (o sorteio e no
   servidor, ver inc/tipos-de-pagina.php). Sem setas, sem pontos, sem JS. */
.banner-faixa {
	/* O blockGap do <main> entra como margin-block-start no primeiro filho e
	   abre uma tira branca entre o cabecalho preto e a faixa preta. Terceira
	   vez que esse mecanismo morde neste tema. */
	margin-block-start: 0 !important;
	position: relative;
	/* A foto desce e vaza pra fora da faixa; sem isso o recorte da faixa
	   cortaria justamente a parte que deve sobrar. */
	overflow: visible;
}

/* Zerar a margem dos filhos e o que fecha a tira branca entre o cabecalho e a
   faixa. Com o padding da faixa em zero, nada bloqueia o colapso de margem: o
   blockGap que o WordPress poe no segundo filho atravessa a faixa E o <main>,
   e empurra os dois pra baixo. A margem aparece como 0 no computed de ambos,
   porque quem colapsa nao e quem desloca — foi o que despistou o diagnostico. */
.banner-faixa > * {
	margin-block-start: 0;
}

/* A curva de sorriso: branco subindo no meio, descendo nas pontas. E o inverso
   da onda usada no resto do site (que desce no meio), e por isso mora num SVG
   proprio em vez de reaproveitar header-wave.svg. */
.banner-curva {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	max-width: none !important;
	margin: 0 !important;
	line-height: 0;
	pointer-events: none;
}

.wp-block-image.banner-curva img {
	display: block;
	width: 100%;
	height: 40px;
}

@media (min-width: 782px) {
	.wp-block-image.banner-curva img {
		height: 72px;
	}
}

/* A foto sobe de camada e desce pra fora da faixa: e ela que passa por cima da
   curva, e nao o contrario. E o vao que ela ocupa la embaixo e devolvido pela
   secao seguinte (.banner-faixa + * ganha padding-top). */
.banner {
	position: relative;
	z-index: 2;
	/* translateY e nao margin-bottom negativa: margem negativa no ultimo filho
	   encolhe a altura do pai, entao a foto nunca chega a sair da faixa — ela
	   so puxa a faixa junto. O transform desloca sem tocar no layout, que e
	   exatamente o que "sair da hero" pede. */
	transform: translateY(36px);
}

@media (min-width: 782px) {
	.banner {
		transform: translateY(72px);
	}
}

.banner .wp-block-query,
.banner__trilho {
	margin-block: 0 !important;
}

.banner__trilho > li {
	margin-block-start: 0;
}

/* Mascara escura em degrade: a foto muda a cada carregamento, entao o contraste
   do titulo nao pode depender do que estiver nela. O degrade escurece so a
   faixa de baixo, onde o texto vive, e deixa o resto da imagem limpo. */
.banner__foto {
	position: relative;
	margin: 0 !important;
	overflow: hidden;
	border-radius: 16px;
}

.banner__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 26%, rgba(0, 0, 0, 0.06) 52%, transparent 70%);
	pointer-events: none;
}

.banner__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner__chamada {
	position: absolute;
	left: var(--wp--preset--spacing--6);
	bottom: var(--wp--preset--spacing--5);
	right: var(--wp--preset--spacing--6);
	z-index: 3;
	pointer-events: none;
}

.banner__titulo {
	margin: 0;
	max-width: 20ch;
	color: var(--wp--preset--color--white);
}

.banner__titulo em {
	display: block;
	font-style: italic;
}

/* Como o deslocamento e por transform, ele nao ocupa espaco no fluxo: a secao
   seguinte precisa abrir o vao correspondente pra foto nao cobrir o conteudo. */
.banner-faixa + .wp-block-group {
	padding-top: calc(var(--wp--preset--spacing--6) + 36px) !important;
}

@media (min-width: 782px) {
	.banner-faixa + .wp-block-group {
		padding-top: calc(var(--wp--preset--spacing--6) + 72px) !important;
	}
}

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

.inst-titulo {
	margin: 0 0 var(--wp--preset--spacing--4);
}

/* Ofertas: dois blocos de naturezas diferentes, e o layout assume isso em vez
   de forcar simetria. O folheto e um cartao — capa e rotulo colados, o cartao
   inteiro clicavel. O video e a fachada do player: a superficie toda e o botao,
   e o clique abre o video ali mesmo (mesmo modulo da pagina de Ofertas da TV). */
/* As colunas nao sao 50/50 nem arbitrarias: sao a proporcao que faz os dois
   blocos terminarem na mesma linha SEM recortar nenhum dos dois. A capa do
   folheto e retrato (~0,72) mais a barra do rotulo; o video e 16:9. Nessas
   larguras as duas alturas naturais batem em ~567px.
   O stretch e a garantia: se o folheto da semana vier com outra proporcao, o
   video acompanha a altura do cartao em vez de deixar um degrau. */
.inst-ofertas {
	display: grid;
	/* 25/75 e nao 26/74: a barra do rotulo tem altura fixa, entao a proporcao
	   que iguala as alturas muda junto com a largura da secao. Recalculada pra
	   1100px. */
	grid-template-columns: minmax(0, 25fr) minmax(0, 75fr);
	gap: var(--wp--preset--spacing--6);
	align-items: stretch;
}

/* Secao mais estreita que a medida da pagina e centralizada. O titulo entra na
   mesma caixa: centralizar so a grade deixaria o "Ofertas" alinhado com uma
   borda que nao existe mais. */
.inst-secao--centrada > * {
	max-width: 1100px;
	margin-inline: auto;
}

.inst-ofertas > * {
	margin-block-start: 0;
}

/* --- cartao do folheto --- */

.oferta-cartao {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	text-decoration: none;
	background: var(--wp--preset--color--surface);
}

/* A capa absorve a sobra de altura do cartao esticado pela linha do grid. Sem
   isso restavam 13px do fundo do cartao aparecendo ABAIXO da barra vermelha —
   e como a barra nao encostava na base, o raio do cartao nao a alcancava e os
   cantos de baixo saiam retos. */
.oferta-cartao__capa {
	display: block;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.oferta-cartao__capa img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.oferta-cartao:hover .oferta-cartao__capa img,
.oferta-cartao:focus-visible .oferta-cartao__capa img {
	transform: scale(1.03);
}

/* O rotulo e uma barra colada na base da capa, sem respiro entre os dois: e o
   que faz capa e botao lerem como uma peca so, e nao como imagem + botao. */
.oferta-cartao__rotulo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	padding: 1.05rem var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.oferta-cartao:hover .oferta-cartao__rotulo,
.oferta-cartao:focus-visible .oferta-cartao__rotulo {
	background: var(--wp--preset--color--secondary);
}

.oferta-cartao__icone {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--nv-icone-folheto) center / contain no-repeat;
	mask: var(--nv-icone-folheto) center / contain no-repeat;
}

/* --- fachada do video --- */

.inst-ofertas .tv-player {
	margin: 0;
	/* height em vez da proporcao 16/9 herdada: quem manda na altura aqui e a
	   linha do grid, pra fechar com o cartao ao lado. */
	height: 100%;
	aspect-ratio: auto;
}

.inst-ofertas .tv-player img {
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.oferta-cartao__capa img,
	.oferta-cartao:hover .oferta-cartao__capa img {
		transition: none;
		transform: none;
	}
}

/* --- blocos de serviço (Bigmais em casa / Bigmais Você) --- */

/* A faixa não tem respiro vertical próprio: quem define a altura de cada bloco
   é a forma colorida, que encosta no topo e na base. É isso que ancora a
   composição. Com padding na faixa as duas formas ficam boiando no meio de um
   retângulo cinza, sem nada a que se prender — que era o efeito de "solto" da
   versão anterior. */
.inst-servicos {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* O padding lateral tambem vai a zero, e por um motivo separado: o proprio
	   WordPress aplica `:where(.wp-block-group.has-background){padding:2.375em}`
	   em QUALQUER grupo com fundo. Como esta e a unica faixa da pagina com cor
	   de fundo, era a unica empurrada 38px pra dentro — as formas comecavam em
	   62px enquanto o cabecalho, o titulo "Big receitas" e os cards comecam em
	   24px. Era dai que vinha a sensacao de desalinhamento da secao inteira. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.inst-servicos .inst-secao > * {
	margin-block-start: 0;
}

.inst-servico {
	/* Vermelho da marca no Bigmais em Casa; a variante troca o token. */
	--nv-forma: var(--wp--preset--color--primary);
	/* Largura da coluna da arte e quanto dela o recorte ocupa. A sobra é a cor
	   que aparece atrás da foto — em porcentagem e não em px, pra faixa de cor
	   continuar visível em qualquer largura de tela. */
	--nv-arte-col: clamp(300px, 34vw, 480px);
	--nv-arte-foto: 66%;
	display: grid;
	grid-template-columns: minmax(0, var(--nv-arte-col)) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: center;
}

/* Medida menor que a espinha e centralizada. A forma deixa de encostar na
   aresta do conteudo, entao o canto reto perde a aresta em que se apoiava — o
   que ancora o bloco agora e a propria centralizacao. */
.inst-servico {
	max-width: 1080px;
	margin-inline: auto;
}

.inst-servico > * {
	margin-block-start: 0;
}

.inst-servico + .inst-servico {
	margin-top: 0;
}

/* Inverter só a ORDEM visual jogava a arte na coluna de 1fr e o texto na coluna
   estreita de 480px: o segundo bloco ficava com um terço da medida do primeiro
   e a foto solta no meio da coluna larga. Era daí que vinha o desalinhamento
   entre os dois. A variante troca as PISTAS, não só a ordem. */
.inst-servico--invertido {
	--nv-forma: var(--nv-voce-azul);
	--nv-arte-foto: 92%;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--nv-arte-col));
}

/* A ordem do documento continua arte → texto nos dois: leitor de tela e teclado
   leem igual, só a coluna muda. */
.inst-servico--invertido .inst-servico__arte {
	order: 2;
}

/* A forma tem um canto reto e tres arredondados. Nao e um circulo: o canto reto
   e a assinatura da peca, e e o de fora — topo a esquerda no bloco vermelho,
   base a direita no azul.
   O `aspect-ratio` e o que iguala os dois blocos: sem ele a altura vinha da
   foto, entao o vermelho (retrato) nascia mais alto que o azul (paisagem). */
.inst-servico__arte {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--nv-forma);
	border-radius: 0 50% 50% 50%;
}

.inst-servico--invertido .inst-servico__arte {
	border-radius: 50% 50% 0 50%;
}

/* A foto sai do fluxo pra que a altura da forma venha SO do aspect-ratio: no
   fluxo, um recorte mais alto que a forma a esticava junto e o vermelho voltava
   a nascer maior que o azul. O `overflow: hidden` da forma e a garantia de que
   nada escapa dela, mesmo se alguem trocar a imagem por uma de outra proporcao. */
.inst-servico__arte img {
	position: absolute;
	left: 50%;
	/* Encostada na base da forma. Nos cantos mais baixos a curva recorta o
	   recorte, e e assim mesmo: e o que faz a foto pertencer a forma em vez de
	   flutuar dentro dela. */
	bottom: 0;
	display: block;
	width: var(--nv-arte-foto);
	height: auto;
	transform: translateX(-50%);
}

.inst-servico__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Ritmo, e não um espaçamento só: logo e chamada são uma unidade (16px), e o
   botão é outra coisa, com o dobro de respiro. Com 16px entre os três, os três
   pesavam igual e nada liderava. */
.inst-servico__logo {
	margin: 0 0 var(--wp--preset--spacing--2);
}

.inst-servico__logo img {
	display: block;
	width: auto;
	max-height: 56px;
}

.inst-servico__chamada {
	margin: 0;
	max-width: 24em;
	line-height: 1.2;
	text-wrap: balance;
}

.inst-servico .wp-block-buttons {
	margin: var(--wp--preset--spacing--4) 0 0;
}

/* CTA sólido: é o único destino do bloco, então ele é preenchido. O contorno da
   /ofertas-da-tv/ existe porque lá são quatro linhas disputando entre si — aqui
   é um botão só, e contorná-lo o fazia sumir dentro do cinza da faixa. */
.inst-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.85em;
	padding: 0.95rem 1.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ícone à direita, do lado pra onde o botão leva. */
.inst-cta .wp-block-button__link::after {
	content: "";
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--nv-atalho-icone) center / contain no-repeat;
	mask: var(--nv-atalho-icone) center / contain no-repeat;
	transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inst-cta .wp-block-button__link:hover,
.inst-cta .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--secondary);
}

/* O anel de foco global do tema e vermelho: em cima de um botao vermelho ele
   vira um halo da mesma cor e some. Aqui ele fica escuro pra se separar do
   proprio botao. */
.inst-cta .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--ink);
}

.inst-cta .wp-block-button__link:hover::after,
.inst-cta .wp-block-button__link:focus-visible::after {
	transform: translateX(3px);
}

.inst-cta--compra .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-carrinho);
}

.inst-cta--relacionamento .wp-block-button__link {
	--nv-atalho-icone: var(--nv-icone-pessoas);
}

@media (prefers-reduced-motion: reduce) {
	.inst-cta .wp-block-button__link,
	.inst-cta .wp-block-button__link::after {
		transition: none;
	}

	.inst-cta .wp-block-button__link:hover::after,
	.inst-cta .wp-block-button__link:focus-visible::after {
		transform: none;
	}
}

/* --- carrosséis de receitas e notícias --- */

/* Título e setas na mesma linha. As setas são injetadas pelo JS aqui dentro:
   sem script não existe botão morto na tela, e a trilha continua rolável no
   dedo e no trackpad. */
/* Titulo, link e setas na mesma linha. O `margin-right: auto` no titulo e o
   que empurra os outros dois pro fim — com `space-between` e tres filhos, o
   link cairia no meio da linha, longe das setas a que pertence. */
.inst-secao__topo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--4);
}

.inst-secao__topo > * {
	margin-block: 0;
}

.inst-secao__topo .inst-titulo {
	margin-right: auto;
}

/* CTA secundario: so texto. O destino primario da secao sao os proprios cards
   — um pill vermelho embaixo deles competia com quatro receitas pela mesma
   atencao e ainda mandava o olho de volta pro comeco da linha. */
.inst-secao__link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

/* Sublinhado permanente no lugar da seta: aqui o link ja mora ao lado das
   setas de navegacao, e uma terceira seta na linha so somava ruido. O
   sublinhado tambem e o que sinaliza "link" quando a cor sozinha nao basta. */
.inst-secao__link a {
	display: inline-block;
	/* Alvo de toque de 40px num link que mede 20px de texto (WCAG 2.5.8). */
	padding: 0.6em 0;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inst-secao__link a:hover,
.inst-secao__link a:focus-visible {
	color: var(--wp--preset--color--secondary);
}

/* Dois cards por vista, e o resto rola. As colunas são `auto-columns` e não
   `template-columns` porque a quantidade de cards vem do loop: com template,
   uma consulta que voltasse 6 posts espremia os seis na largura de dois. */
.nv-carrossel__trilho {
	display: grid;
	/* Duas linhas, e o fluxo por COLUNA: cada coluna vira uma unidade de
	   rolagem, entao uma "pagina" do carrossel e um bloco 2x2 igual ao dos posts
	   relacionados. Com fluxo por linha, o snap cairia no meio de uma dupla. */
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-auto-flow: column;
	grid-auto-columns: calc(50% - var(--wp--preset--spacing--4) / 2);
	gap: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.nv-carrossel__trilho::-webkit-scrollbar {
	display: none;
}

.nv-carrossel__trilho > li {
	margin: 0;
	scroll-snap-align: start;
}

/* A trilha é uma região rolável e o JS lhe dá tabindex — sem isso quem navega
   por teclado não alcança os cards escondidos. O anel precisa de respiro pra
   não encostar no card. */
.nv-carrossel__trilho:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
	border-radius: 4px;
}

.nv-carrossel__controles {
	display: flex;
	gap: var(--wp--preset--spacing--1);
	flex-shrink: 0;
}

/* Alvo de 44px mesmo com o ícone em 20: quem toca na tela não mira em ícone. */
.nv-carrossel__seta {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nv-carrossel__seta::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	background: var(--wp--preset--color--ink);
	-webkit-mask: var(--nv-seta-carrossel) center / contain no-repeat;
	mask: var(--nv-seta-carrossel) center / contain no-repeat;
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nv-carrossel__seta--anterior {
	--nv-seta-carrossel: var(--nv-icone-seta-esq);
}

.nv-carrossel__seta--proxima {
	--nv-seta-carrossel: var(--nv-icone-seta);
}

.nv-carrossel__seta:hover:not(:disabled),
.nv-carrossel__seta:focus-visible {
	background: var(--wp--preset--color--primary);
}

.nv-carrossel__seta:hover:not(:disabled)::before,
.nv-carrossel__seta:focus-visible::before {
	background: var(--wp--preset--color--white);
}

/* Na ponta da trilha a seta continua no lugar — esconder desloca o par inteiro
   a cada rolagem — e só perde contraste e clique. */
.nv-carrossel__seta:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.nv-carrossel__trilho {
		scroll-behavior: auto !important;
	}

	.inst-secao__link a {
		transition: none;
	}

	.nv-carrossel__seta,
	.nv-carrossel__seta::before {
		transition: none;
	}
}

/* Abaixo disso sobrariam ~160px de texto ao lado da imagem: um card por vista,
   o mesmo corte que os relacionados já fazem nessa largura. */
@media (max-width: 1100px) {
	.nv-carrossel__trilho {
		grid-auto-columns: 100%;
	}
}

@media (max-width: 900px) {
	.inst-ofertas {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--4);
	}

	/* Empilhado, a forma vira um cartaz no topo do bloco: o canto reto perde a
	   aresta em que se apoiar, então a faixa recupera o respiro vertical e os
	   dois blocos voltam a se separar por espaço. */
	.inst-servicos {
		padding-top: var(--wp--preset--spacing--6) !important;
		padding-bottom: var(--wp--preset--spacing--6) !important;
	}

	.inst-servico,
	.inst-servico--invertido {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--4);
	}

	.inst-servico + .inst-servico {
		margin-top: var(--wp--preset--spacing--6);
	}

	.inst-servico--invertido .inst-servico__arte {
		order: 0;
	}

	.inst-servico__arte {
		width: 100%;
		max-width: 420px;
	}

	/* Sem a coluna de texto ao lado, a forma pode dar mais espaco pro recorte:
	   a 72% o entregador ficava pequeno demais num cartaz de tela cheia. */
	.inst-servico {
		--nv-arte-foto: 88%;
	}

	/* Botao de largura cheia e rotulo numa linha so. Com o tamanho de desktop,
	   "Conheca o Bigmais em casa" quebrava em duas linhas e o icone ficava
	   pendurado no canto, longe do texto que ele acompanha. */
	.inst-servico .wp-block-buttons {
		align-self: stretch;
	}

	.inst-cta.wp-block-button {
		width: 100%;
	}

	.inst-cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
		gap: 0.7em;
		padding: 0.95rem 1rem;
		font-size: var(--wp--preset--font-size--sm);
	}

	.banner__chamada {
		left: var(--wp--preset--spacing--3);
		right: var(--wp--preset--spacing--3);
		bottom: var(--wp--preset--spacing--3);
	}

}


/* ---------------------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------------------- */

/* O WordPress joga `:where(.wp-block-group.has-background){padding:2.375em}` em
   qualquer grupo com fundo, e o rodapé tem fundo. Sem zerar, o conteúdo dele
   nasce 38px pra dentro enquanto o cabeçalho alinha em 24px — a mesma
   armadilha que desalinhava a faixa de serviços na institucional. */
/* Sem overflow:hidden: a curva do divisor precisa sair pra fora da aresta de
   cima do rodape. */
.site-footer {
	position: relative;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) !important;
}

/* Divisor de secao: a propria cor do rodape subindo num arco suave sobre a
   secao anterior.
   A forma vem de um SVG usado como MASCARA, e nao de border-radius: uma elipse
   por border-radius chega nas pontas com tangente vertical e vira um gancho
   visivel nos dois cantos da tela. O SVG e uma cubica com os mesmos pontos de
   controle do hero-sorriso, entao encosta nas bordas em angulo raso.
   Mascara e nao <img> porque assim a cor continua saindo do token: um SVG com
   fill fixo teria a cor do rodape escrita em dois lugares. E como quem sobe e o
   ESCURO (nao um branco por cima), funciona sobre qualquer secao anterior,
   inclusive as de fundo cinza. */
.site-footer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(16px, 2vw, 28px);
	background: var(--wp--preset--color--ink);
	-webkit-mask: url("../images/rodape-curva.svg") center / 100% 100% no-repeat;
	mask: url("../images/rodape-curva.svg") center / 100% 100% no-repeat;
	/* -99% e nao -100%: em zoom fracionario o arredondamento sub-pixel abria um
	   fio da cor de baixo entre o arco e o rodape. */
	transform: translateY(-99%);
	pointer-events: none;
}

/* A medida do rodape e a do cabecalho, e nao a do layout constrained.
   `contentSize: 1440px` poe max-width:1440px nos FILHOS, entao acima de 1488px
   de viewport eles centram em 1440 e comecam 24px antes do logo — o padding
   lateral daqui deixa de valer porque sobra espaco de fora. O cabecalho tem
   1440px de caixa COM 24px de padding, ou seja 1392px de conteudo: e essa a
   medida que o resto da pagina segue e que o rodape passa a seguir. */
.site-footer > * {
	max-width: calc(1440px - var(--wp--preset--spacing--3) * 2);
	margin-block-start: 0;
	margin-inline: auto;
}

.rodape-topo {
	align-items: flex-end;
	gap: var(--wp--preset--spacing--4) !important;
	margin-bottom: var(--wp--preset--spacing--6);
}

.rodape-logo {
	margin: 0;
}

.rodape-social {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.rodape-social > * {
	margin-block: 0;
}

/* Rótulo curto ao lado dos ícones: quem dá hierarquia é a cor e o peso, não o
   tamanho nem a caixa alta. */
.rodape-rotulo {
	margin: 0;
	color: var(--nv-vermelho-escuro-ok);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.rodape-social .wp-block-social-links {
	gap: 0.6rem !important;
	margin: 0;
	padding: 0;
}

/* O estilo "somente logos" do WordPress entrega o glifo cru. Aqui cada um vira
   um alvo circular de 40px com contorno de 1px — mesmo vocabulario das setas do
   carrossel, e um alvo de clique de verdade em vez de um desenho de 18px. */
.rodape-social .wp-block-social-link {
	margin: 0;
	padding: 0;
	background: none;
}

.rodape-social .wp-block-social-link .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--nv-rodape-filete);
	transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rodape-social .wp-block-social-link .wp-block-social-link-anchor svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.rodape-social .wp-block-social-link:hover .wp-block-social-link-anchor,
.rodape-social .wp-block-social-link .wp-block-social-link-anchor:focus-visible {
	background: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}

.rodape-social .wp-block-social-link:hover {
	transform: none;
}

.rodape-titulo {
	margin: 0 0 var(--wp--preset--spacing--4);
}

/* A produção desenha uma tabela de seis células com borda branca de 1px em
   volta de cada uma. Sobre preto isso vira planilha, e as células ainda sobram
   com espaço morto embaixo porque a altura é a da maior. Aqui quem separa é o
   espaço: sem caixa, cada loja ocupa exatamente o que tem. */
.rodape-lojas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Faixa elastica antes da linha de contato: quando um endereco quebra em duas
   linhas, sem isso so aquela loja descia e a fileira perdia a linha de base. A
   linha 3 fica vazia de proposito e absorve a sobra; o contato mora na 4. */
.rodape-loja {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	margin: 0;
	padding: var(--wp--preset--spacing--4);
	border-inline-start: 1px solid var(--nv-rodape-filete);
	border-block-start: 1px solid var(--nv-rodape-filete);
}

/* Nas bordas de fora nao ha filete nem recuo: isto e um conjunto de divisores
   internos, nao uma caixa em volta das seis lojas — e e o que mantem a primeira
   coluna na mesma vertical do titulo "Nossas lojas". */
.rodape-loja:nth-child(3n + 1) {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.rodape-loja:nth-child(3n) {
	padding-inline-end: 0;
}

.rodape-loja:nth-child(-n + 3) {
	padding-block-start: 0;
	border-block-start: 0;
}

.rodape-loja__nome {
	margin: 0 0 0.6em;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}

.rodape-loja__nome a {
	color: var(--nv-vermelho-escuro-ok);
	text-decoration: none;
	transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rodape-loja__nome a:hover,
.rodape-loja__nome a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Duas colunas de larguras diferentes: o dia é rótulo e o horário é o dado.
   Alinhar o horário numa vertical só deixa as seis lojas comparáveis de
   relance, que é pra isso que alguém vem ao rodapé. */
.rodape-loja__horarios {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15em 0.8em;
	margin: 0 0 0.7em;
	font-size: var(--wp--preset--font-size--sm);
}

.rodape-loja__faixa {
	display: contents;
}

.rodape-loja__horarios dt {
	color: rgba(255, 255, 255, 0.62);
}

.rodape-loja__horarios dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* Telefone e endereco lado a lado. Empilhados, a celula de 443px ficava com
   180px de conteudo e uma metade vazia — as seis lojas boiavam longe umas das
   outras. Em linha, cada celula usa a largura que tem. */
.rodape-loja__contato {
	grid-row: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em var(--wp--preset--spacing--3);
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.rodape-loja__endereco {
	color: rgba(255, 255, 255, 0.62);
}

.rodape-loja__tel a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rodape-loja__tel a:hover,
.rodape-loja__tel a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.rodape-legal {
	margin-top: var(--wp--preset--spacing--5);
}

.rodape-legal > * {
	margin-block: 0;
}

/* Ultima linha: quem assina o conteudo à esquerda, quem assina o codigo à
   direita. Sao dois créditos de naturezas diferentes — empilhados, o segundo
   lia como continuação do primeiro. */
.rodape-base {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	/* O filete separa a linha de assinatura do resto, e nao os links das lojas:
	   quem navega ainda esta lendo quando passa pelos links, e a divisao real e
	   entre o rodape util e o rodape juridico. */
	border-top: 1px solid var(--nv-rodape-filete);
}

.rodape-base > * {
	margin-block: 0;
}

.rodape-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
}

.rodape-links li {
	margin: 0;
}

/* Sublinhado que começa e termina no texto. Na produção ele é uma borda do
   bloco e sobra bem depois da última letra. */
.rodape-links a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 0.25em;
	transition: text-decoration-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rodape-links a:hover,
.rodape-links a:focus-visible {
	text-decoration-color: var(--wp--preset--color--white);
}

/* Copyright e CNPJ numa linha so, no mesmo corpo da assinatura da Navival: sao
   as duas letras midas da ultima linha e leem como um par. O wrap cobre a tela
   estreita, onde o CNPJ desce sozinho. */
.rodape-creditos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.4em;
	font-size: var(--wp--preset--font-size--xs);
	color: rgba(255, 255, 255, 0.62);
}

.rodape-creditos > * {
	margin-block: 0;
}

.rodape-assinatura {
	text-align: right;
	font-size: var(--wp--preset--font-size--xs);
	color: rgba(255, 255, 255, 0.5);
}

.rodape-assinatura > * {
	margin-block: 0;
}

.rodape-assinatura a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.rodape-assinatura a:hover,
.rodape-assinatura a:focus-visible {
	color: var(--wp--preset--color--white);
}

@media (max-width: 900px) {
	.rodape-lojas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Duas colunas mudam quem esta na borda: as regras de tres sao desfeitas
	   antes das novas valerem, porque tem a mesma especificidade. */
	.rodape-loja:nth-child(3n + 1) {
		padding-inline-start: var(--wp--preset--spacing--4);
		border-inline-start: 1px solid var(--nv-rodape-filete);
	}

	.rodape-loja:nth-child(3n) {
		padding-inline-end: var(--wp--preset--spacing--4);
	}

	.rodape-loja:nth-child(-n + 3) {
		padding-block-start: var(--wp--preset--spacing--4);
		border-block-start: 1px solid var(--nv-rodape-filete);
	}

	.rodape-loja:nth-child(2n + 1) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.rodape-loja:nth-child(2n) {
		padding-inline-end: 0;
	}

	.rodape-loja:nth-child(-n + 2) {
		padding-block-start: 0;
		border-block-start: 0;
	}
}

@media (max-width: 600px) {
	.rodape-lojas {
		grid-template-columns: 1fr;
	}

	/* Numa coluna so sobra o filete horizontal, e nenhuma loja tem recuo
	   lateral — as seis alinham na espinha. */
	.rodape-loja,
	.rodape-loja:nth-child(3n + 1),
	.rodape-loja:nth-child(3n),
	.rodape-loja:nth-child(2n + 1),
	.rodape-loja:nth-child(2n) {
		padding-inline: 0;
		border-inline-start: 0;
	}

	.rodape-loja,
	.rodape-loja:nth-child(-n + 3) {
		padding-block: var(--wp--preset--spacing--4);
		border-block-start: 1px solid var(--nv-rodape-filete);
	}

	.rodape-loja:first-child {
		padding-block-start: 0;
		border-block-start: 0;
	}

	/* Empilhada, a assinatura alinhada à direita ficaria órfã embaixo de um
	   bloco que começa na esquerda. */
	.rodape-assinatura {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rodape-social .wp-block-social-link .wp-block-social-link-anchor,
	.rodape-loja__nome a,
	.rodape-links a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Landing page — campanha "Fãs de Selinhos, Fãs de Descontos"
   (tipo "lp" — templates/page-tipo-lp.html)

   A campanha tem identidade PRÓPRIA, que não é a do site: azul-marinho do KV no
   lugar do vermelho Bigmais, Montserrat no lugar de Ubuntu, mármore claro no
   lugar do branco chapado. Por isso os tokens moram aqui, no escopo .lp, e não
   no theme.json — o vermelho da marca continua valendo em todo o resto do site,
   e a campanha some junto com a página quando terminar.

   Sem menu e sem rodapé de propósito: página de campanha vive de uma rota só, a
   única saída pretendida é a conversão. A navegação é a barra de âncoras da
   própria campanha (briefing, item 3).
   --------------------------------------------------------------------------- */

.lp {
	/* Amostrados do KV (kv aberto v2.pdf), não escolhidos a olho. */
	--lp-navy:         #393F56;
	--lp-navy-fundo:   #2F3446;
	--lp-cinza:        #B8B6B5;
	--lp-cinza-claro:  #E4E2E1;
	--lp-creme:        #D9D4CA;
	--lp-madeira:      #BF9F8F;
	--lp-marmore:      #F1EEEF;

	--lp-raio:         18px;
	--lp-conector:     2.6rem;
	--lp-medida:       1320px;

	position: relative;
	overflow-x: clip;
	color: var(--lp-navy);
	font-family: var(--wp--preset--font-family--campanha);
	font-weight: 500;
}

/* Cada seção é uma faixa de largura total que responde pelo próprio fundo, e
   dentro dela um .lp-secao segura a medida do conteúdo. A arte de mármore vive
   só no hero: espalhada pela página inteira ela viraria papel de parede atrás
   de tabela, FAQ e rodapé — que é justamente onde o texto precisa de fundo
   quieto. O branco abaixo é a base; quem quiser outra cor, pinta a sua. */
.lp {
	background-color: #fff;
}

.lp :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--campanha);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--lp-navy);
}

/* Faixa padrão de seção: a medida do conteúdo é a mesma do KV aberto, e o
   respiro lateral é responsabilidade da seção — o <main> não tem margem. */
.lp-secao {
	max-width: var(--lp-medida);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--3);
}

/* Destaque de informação relevante (briefing, item 2): ou tipografia em azul,
   ou box de fundo. Os dois nascem aqui pra não serem reinventados a cada seção. */
.lp-box {
	background: var(--lp-navy);
	color: #fff;
	border-radius: var(--lp-raio);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

.lp-box :is(h1, h2, h3, h4, h5, h6, p) {
	color: inherit;
}

.lp-box--cinza {
	background: var(--lp-cinza);
	color: var(--lp-navy);
}

/* ---------------------------------------------------------------------------
   Hero — o KV recomposto

   O KV é uma peça de 70 × 40 cm: colado como imagem chapada ele fica ilegível
   no telefone, que é onde a campanha vai ser aberta. Então o hero remonta as
   MESMAS peças do KV (logo, chamada, box, produtos, régua dos R$30) em três
   colunas que reempilham — o texto continua sendo texto, na fonte oficial, como
   o briefing pede, em vez de virar pixel dentro de um JPG.
   --------------------------------------------------------------------------- */

.lp-hero {
	padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	background: var(--lp-marmore) url(../images/selinhos/fundo-campanha.webp) top center / 1920px auto repeat;
}

.lp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr) minmax(0, 0.8fr);
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

/* --- coluna 1: marca e chamada ---
   Centrada, como no KV: logo, chamada e box compartilham o mesmo eixo. */

.lp .wp-block-image {
	margin: 0;
}

/* O layout flow do WordPress injeta margin-block-start em todo irmão a partir
   do segundo (é assim que o blockGap funciona). Numa grade isso desalinha as
   colunas — os cartões 2 e 3 dos passos nasciam 24px mais baixos que o 1. Na
   LP o espaçamento vertical vem sempre de gap ou padding, nunca de margem.

   :where() e não :is(): o seletor precisa vencer a regra do core (que também
   é :where, especificidade zero) sem passar por cima das margens que as
   próprias classes da campanha declaram logo abaixo. Com :is() ele zerava
   também o respiro dos títulos, das vitrines e dos blocos de pendência.

   O `.lp > *` é uma linha à parte porque o <main> É o .lp: ele não é
   descendente de si mesmo, então o seletor de baixo não alcançava os filhos
   diretos dele — e era ali que o blockGap abria a faixa branca entre o menu
   e o hero, e entre uma faixa de fundo e a seguinte. */
.lp > *,
.lp :where(.wp-block-group, .wp-block-buttons) > * {
	margin-block: 0;
}

.lp-hero__marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--3);
}

.lp-hero__logo {
	margin: 0;
}

.lp-hero__logo img {
	width: min(280px, 76%);
	height: auto;
}

.lp-hero__intro {
	margin: 0;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.35;
	max-width: 28ch;
}

.lp-hero__destaque {
	font-size: clamp(0.9375rem, 0.86rem + 0.33vw, 1.125rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}

.lp-hero__assinaturas {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--wp--preset--spacing--3);
	margin-block-start: var(--wp--preset--spacing--1);
}

.lp-hero__masterpro {
	margin: 0;
}

.lp-hero__masterpro img {
	width: 170px;
	height: auto;
}

.lp-hero__naturally {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.lp-hero__naturally img {
	width: 140px;
	height: auto;
}

.lp-hero__naturally-rotulo {
	margin: 0;
	font-size: 0.6875rem;
	opacity: 0.75;
}

/* --- coluna 2: a composição de produtos ---
   O cliente entregou a cena inteira montada numa peça só (arco, lockup do
   Bigmais Você, círculos de fundo e as cinco panelas em registro). Antes disso
   ela era remontada aqui: sete blocos posicionados em porcentagem, calculada
   a partir das coordenadas de cada peça no PDF do KV. A arte oficial substitui
   toda essa aritmética — e nenhum recorte meu vai bater melhor com o KV do que
   o arquivo que saiu dele.

   Custo assumido: o "Válido para clientes" virou pixel em vez de texto. É o
   formato em que a arte veio; o alt da imagem carrega a informação. */

.lp-hero__produtos {
	display: flex;
	justify-content: center;
}

.lp-hero__composicao {
	margin: 0;
	width: 100%;
}

.lp-hero__composicao img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- coluna 3: a régua dos R$30 --- */

.lp-hero__oferta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}

/* Régua dos R$30 — uma peça em duas partes.

   No KV a condição e a ressalva não são dois blocos soltos empilhados: são um
   bloco só, costurado por um círculo de chevrons que cavalga a emenda entre a
   parte navy e a cinza. Por isso os dois moram dentro de .lp-hero__valor sem
   vão nenhum, e o círculo nasce como ::after da parte de cima, metade dentro de
   cada uma.

   O raio é generoso, mas não é pílula: em border-radius 999px a caixa vira uma
   elipse e o texto passa a nadar longe das bordas curvas — que é justamente o
   que o desenho do KV evita. */
.lp-hero__valor {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.lp-hero__regua {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: 28px;
	line-height: 1.1;
}

.lp-hero__regua::after {
	content: "";
	position: absolute;
	inset-block-end: calc(var(--lp-conector) / -2);
	inset-inline-start: 50%;
	translate: -50% 0;
	width: var(--lp-conector);
	height: var(--lp-conector);
	border-radius: 50%;
	background: var(--lp-navy-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7.5 12 12.5 17 7.5'/%3E%3Cpath d='M7 13.5 12 18.5 17 13.5'/%3E%3C/svg%3E") center / 58% no-repeat;
	z-index: 2;
}

.lp-hero__regua-chamada {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.625rem);
	letter-spacing: 0.02em;
}

.lp-hero__regua-valor {
	margin: 0;
	font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* O <sub>/<sup> aqui não é semântica de índice, é o desenho do preço do KV:
   "R$" pequeno à esquerda, na linha de base, e ",00" pequeno lá em cima. O
   vertical-align do navegador (sub desce, sup sobe) desmonta esse arranjo — o
   R$ caía embaixo do 30 —, então os dois são reancorados à mão. */
.lp-hero__regua-valor sub,
.lp-hero__regua-valor sup {
	font-size: 0.36em;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	bottom: auto;
	top: auto;
}

.lp-hero__regua-valor sub { vertical-align: baseline; margin-inline-end: 0.06em; }
.lp-hero__regua-valor sup { vertical-align: 0.9em; }

.lp-hero__regua-selo {
	margin: 0;
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.lp-hero__ressalva {
	width: min(100%, 300px);
	margin-inline: auto;
	margin-block: 0;
	/* O topo abre espaço para a metade do círculo que invade esta caixa; sem
	   isso a primeira linha correria por baixo dele. */
	padding: calc(var(--lp-conector) / 2 + 0.4rem) var(--wp--preset--spacing--3) var(--wp--preset--spacing--3);
	border-radius: 26px;
	font-size: 0.875rem;
	line-height: 1.35;
}

.lp-hero__ticket {
	/* Sobe por cima da caixa cinza, como no KV: o cupom sai de dentro da
	   condição, não é um terceiro item empilhado na fila. */
	margin-block: -2.4rem 0;
	position: relative;
	z-index: 3;
}

.lp-hero__ticket img {
	width: min(210px, 68%);
	height: auto;
}

/* Duas linhas com pesos diferentes entre dois filetes. O peso é o que separa
   a afirmação ("Seja um Big") do complemento ("colecionador!") sem precisar de
   duas cores ou dois tamanhos — e o h2 chega aqui em 700 por herança do
   theme.json, então quem precisa ser declarado é o peso LEVE, não o forte.

   width: fit-content faz os filetes pararem onde a linha mais longa para. Em
   largura total eles atravessariam a coluna inteira e virariam divisória de
   seção, que é outra coisa. */
/* O seletor é `.lp .lp-hero__convite`, e não a classe sozinha, por causa do
   peso: `.lp :is(h1,…,h6)` lá em cima já declara 700 com especificidade (0,2,0),
   e uma classe solta (0,1,0) perde para ela — o "colecionador!" continuava em
   negrito por mais que o font-weight estivesse escrito aqui. */
.lp .lp-hero__convite {
	margin-block-start: var(--wp--preset--spacing--3);
	font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
	line-height: 1.25;
	font-weight: 400;
	width: fit-content;
	margin-inline: auto;
	padding-block: 0.4em;
	border-block: 2px solid var(--lp-navy);
}

.lp-hero__convite strong {
	font-weight: 700;
}

/* --- régua legal do hero: período + realizadora --- */

.lp-hero__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-block-start: var(--wp--preset--spacing--4);
}

.lp-hero__periodo {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	max-width: 62ch;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.lp-hero__realizadora {
	margin: 0;
}

.lp-hero__realizadora img {
	width: 150px;
	height: auto;
}

/* --- reempilhamento ---------------------------------------------------------
   Duas quebras, não uma: entre 1180px e 900px o que estoura primeiro é a coluna
   da régua (o "R$30,00" não cabe ao lado dos produtos), e só depois disso a
   composição inteira precisa virar coluna única. */

@media (max-width: 1180px) {
	.lp-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.lp-hero__oferta {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--wp--preset--spacing--3);
	}

	.lp-hero__oferta { gap: var(--wp--preset--spacing--3); }
	.lp-hero__valor { flex: 1 1 300px; width: auto; }
	.lp-hero__ticket { flex: 0 0 auto; margin-block: 0; }
	.lp-hero__ticket img { width: 150px; }
	.lp-hero__convite { flex: 1 1 100%; }
}

@media (max-width: 900px) {
	.lp-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--3);
	}

	.lp-hero__logo img { width: min(240px, 60%); }
	.lp-hero__intro { max-width: 34ch; }

	/* Empilhado, a composição ganha a largura inteira — é a única forma de a
	   frigideira 18 continuar reconhecível num telefone. */
	.lp-hero__produtos {
		width: min(100%, 520px);
		margin-inline: auto;
	}

	.lp-hero__rodape {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

@media (max-width: 560px) {
	.lp-hero__oferta { flex-direction: column; gap: 0; }
	.lp-hero__valor { flex: 0 0 auto; width: 100%; }
	.lp-hero__ressalva { width: 100%; }
	.lp-hero__ticket { margin-block: -2.4rem 0; }
	.lp-hero__assinaturas { gap: var(--wp--preset--spacing--2); }
	.lp-hero__masterpro img { width: 130px; }
	.lp-hero__naturally img { width: 110px; }
}

/* ---------------------------------------------------------------------------
   Barra de âncoras (briefing, item 3)

   É a única navegação da página — o menu do site fica de fora de propósito. Os
   cinco primeiros botões rolam pra uma seção; o sexto sai pra página exclusiva
   do regulamento, e por isso é o único desenhado como link de saída.

   Fica grudada no topo porque a página é longa (tabela + duas ondas de
   aceleradores + FAQ): sem ela, quem desceu até as perguntas não tem como
   voltar pra tabela de preços sem rolar a página inteira.
   --------------------------------------------------------------------------- */

.lp-menu {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--lp-navy);
	padding-block: var(--wp--preset--spacing--2);
}

.lp-menu__lista {
	max-width: var(--lp-medida);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--3);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

.lp-menu .wp-block-button__link {
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--campanha);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.4rem 0.2rem;
	border-radius: 0;
	border-block-end: 2px solid transparent;
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

.lp-menu .wp-block-button__link:hover,
.lp-menu .wp-block-button__link:focus-visible {
	border-block-end-color: #fff;
}

/* O botão que sai da página não pode parecer igual aos cinco que só rolam. */
.lp-menu__saida .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding-inline: 0.9rem;
}

.lp-menu__saida .wp-block-button__link:hover,
.lp-menu__saida .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--lp-navy);
	border-color: #fff;
}

/* A barra grudada cobriria o título de quem chega por âncora. */
.lp [id] {
	scroll-margin-block-start: 5.5rem;
}

@media (max-width: 860px) {
	/* Em telefone a fila vira uma trilha que corre no dedo: quebrar seis rótulos
	   em quatro linhas comeria meia dobra logo na entrada da página. */
	.lp-menu__lista {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.lp-menu__lista::-webkit-scrollbar { display: none; }

	.lp-menu {
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
	}

	.lp-menu .wp-block-button {
		flex: 0 0 auto;
	}

	.lp-menu .wp-block-button__link {
		white-space: nowrap;
		font-size: 0.75rem;
	}
}

/* ---------------------------------------------------------------------------
   Veja como participar (briefing, item 5)

   Três passos numerados, na ordem em que a pessoa realmente age: cadastrar,
   comprar, trocar. O número é o que carrega a sequência, então ele é o elemento
   mais forte do cartão — não um marcador discreto ao lado do texto.
   --------------------------------------------------------------------------- */

.lp-participar {
	padding-block: var(--wp--preset--spacing--6);
	background: var(--lp-marmore) url(../images/selinhos/fundo-campanha.webp) top center / 1920px auto repeat;
}

.lp-titulo {
	margin: 0 0 var(--wp--preset--spacing--5);
	text-align: center;
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* CTA de regulamento (como-participar e fim do FAQ): .lp zera margin-block dos
   filhos de .wp-block-buttons (ver comentário acima de ".lp > *"), então o
   respiro em relação ao bloco anterior só existe se for padding. */
.lp-regulamento-cta {
	padding-top: var(--wp--preset--spacing--4);
}

.lp-passos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--4);
	align-items: stretch;
	padding-inline-start: var(--wp--preset--spacing--2);
}

.lp-passo {
	--lp-passo-numero: 2.75rem;

	position: relative;
	background: #fff;
	border: 1px solid rgba(57, 63, 86, 0.12);
	border-radius: var(--lp-raio);
	/* O topo recebe a metade do número que invade o cartão; sem essa folga a
	   primeira linha do texto correria por baixo do círculo. */
	padding: calc(var(--lp-passo-numero) / 2 + var(--wp--preset--spacing--2)) var(--wp--preset--spacing--3) var(--wp--preset--spacing--3);
}

/* O número monta na quina do cartão, metade dentro e metade fora. Encaixado no
   fluxo ele era só mais um elemento na linha e a sequência 1-2-3 se perdia entre
   três blocos idênticos; para fora, ele vira etiqueta do cartão e a ordem de
   leitura fica evidente antes de qualquer palavra. */
.lp-passo__numero {
	position: absolute;
	inset-block-start: calc(var(--lp-passo-numero) / -2.4);
	inset-inline-start: calc(var(--lp-passo-numero) / -2.4);
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--lp-passo-numero);
	height: var(--lp-passo-numero);
	border-radius: 50%;
	background: var(--lp-navy);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.lp-passo__texto {
	margin: 0;
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	line-height: 1.45;
}

.lp-passo__texto strong {
	font-weight: 700;
}

@media (max-width: 900px) {
	.lp-passos {
		grid-template-columns: 1fr;
		max-width: 34rem;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------------------
   Marcação de pendência (modo rascunho)

   A LP está montada inteira, mas parte do conteúdo depende de material que só
   o cliente tem (arte dos aceleradores, regulamento, logos dos parceiros). Em
   vez de deixar buraco silencioso, cada lacuna vira um bloco declarado: quem
   abre a página vê o que falta, de quem é e onde entra.

   Tudo isso pende da classe `lp--rascunho` no <main>. Tirar essa classe do
   templates/page-tipo-lp.html apaga TODAS as marcações de uma vez — é o que
   transforma a página de rascunho em página publicável, sem caçar sobra.
   --------------------------------------------------------------------------- */

.lp-pendente {
	display: none;
}

.lp--rascunho .lp-pendente {
	display: block;
	margin-block: var(--wp--preset--spacing--3);
	/* Recado de produção, não peça de campanha: borda de 1px, fundo quase
	   imperceptível e alinhamento à esquerda. Com 2px de tracejado e o texto
	   centrado, o bloco competia em atenção com a seção que ele apenas anota. */
	border: 1px dashed rgba(180, 131, 42, 0.55);
	border-radius: 12px;
	background: rgba(255, 214, 132, 0.10);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	text-align: start;
}

.lp-pendente__etiqueta {
	display: block;
	margin: 0 0 0.15rem;
	background: none;
	color: #8A6416;
	padding: 0;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lp-pendente__titulo {
	margin: 0 0 0.15rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #6E4E12;
}

.lp-pendente__texto {
	margin: 0;
	max-width: 78ch;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #6E4E12;
}

.lp-pendente__texto + .lp-pendente__texto {
	margin-block-start: var(--wp--preset--spacing--1);
}

/* ---------------------------------------------------------------------------
   Faixa de parceiros — o fecho do hero

   Fica FORA do mármore, em branco chapado: são ~40 marcas com paletas próprias
   e brigando entre si, e sobre a veia do mármore nenhuma delas se apoia. O
   branco também marca o fim da abertura e o começo do conteúdo da campanha.
   --------------------------------------------------------------------------- */

.lp-faixa-parceiros {
	background: #fff;
	padding-block: var(--wp--preset--spacing--4);
}

/* ---------------------------------------------------------------------------
   Coleção Naturally MasterPRO (briefing, item 5.1)

   O briefing pede produto ampliado e benefício com hierarquia clara. A seção
   resolve nessa ordem: a peça grande primeiro (é ela que dá vontade de
   colecionar), os quatro selos técnicos logo abaixo, e só então o texto de
   marca e os cuidados — que ninguém lê antes de querer a panela.
   --------------------------------------------------------------------------- */

.lp-colecao {
	padding-block: var(--wp--preset--spacing--6) 0;
}

/* Imagem e texto lado a lado: a peça ancora a coluna esquerda, o texto de
   marca ocupa a direita. Abaixo de 900px a vitrine empilha (ver media query).
   align-items: start porque a imagem vaza por baixo (margin negativo) — com
   "center" ou "end" essa sobra invisível puxava o texto junto para baixo dela.
   O texto ganha padding-block simétrico próprio em vez de depender do grid. */
.lp-colecao__vitrine {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--5);
}

/* Imagem-destaque grande, vazando por baixo do fim da seção (fundo branco)
   até dentro da faixa de mármore de .lp-comprar logo abaixo. z-index acima
   do mármore garante que a peça fica por cima da textura, não atrás dela.
   Especificidade .lp-colecao__vitrine + classe (2) para vencer o reset
   ".lp .wp-block-image { margin: 0 }" (também 2, mas declarado antes). */
.lp-colecao__vitrine .lp-colecao__destaque-img {
	position: relative;
	z-index: 1;
	margin: 0 0 calc(var(--wp--preset--spacing--6) * -1);
	max-width: 100%;
}

.lp-colecao__destaque-img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	object-position: left center;
}

/* Centralizado na altura VISÍVEL da imagem (a margin negativa que faz a peça
   vazar não conta como altura de row no grid), com o mesmo respiro do topo e
   da base — não colado na base como ficava com align-items: end. */
.lp-colecao__texto-bloco {
	align-self: center;
	max-width: 62ch;
}

.lp-colecao__texto {
	font-size: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
	line-height: 1.55;
	margin: 0;
}

.lp-colecao__texto + .lp-colecao__texto {
	margin-block-start: var(--wp--preset--spacing--2);
}

.lp-colecao__destaque {
	font-weight: 700;
}

/* Selos de benefício: reforço visual leve, agora dentro do item de cuidados
   no FAQ (ver .lp-faq mais abaixo), não mais na vitrine da coleção. */
.lp-beneficios {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-block-end: 0;
}

.lp-beneficio {
	margin: 0;
	width: min(30%, 96px);
}

.lp-beneficio img {
	width: 100%;
	height: auto;
	display: block;
}

/* Lista de cuidados: vive dentro de um item do FAQ (.lp-faq .wp-block-details
   já resolve caixa, summary e seta), então só o espaçamento entre itens é
   próprio daqui. */
.lp-cuidados__lista li + li {
	margin-block-start: 0.35rem;
}

@media (max-width: 900px) {
	.lp-colecao {
		padding-block-end: var(--wp--preset--spacing--6);
	}

	.lp-colecao__vitrine {
		grid-template-columns: 1fr;
	}

	/* Empilhado, o vazamento por baixo da imagem entraria em cima do texto
	   (que agora vem depois dela no fluxo) em vez de em cima do mármore da
	   próxima seção — por isso o recuo negativo só existe lado a lado. */
	.lp-colecao__vitrine .lp-colecao__destaque-img {
		z-index: auto;
		margin: 0 auto var(--wp--preset--spacing--5);
		max-width: min(100%, 480px);
	}

	.lp-beneficio {
		width: min(26%, 84px);
	}
}

/* ---------------------------------------------------------------------------
   Como comprar com e sem desconto (briefing, item 6)

   Cada produto tem DUAS trocas possíveis, e a diferença entre elas é o miolo da
   campanha: mais selinhos, menos dinheiro. Por isso a linha é lida da esquerda
   pra direita como uma frase — "esta peça custa X; com 65 selinhos você paga
   14,99; com 25, paga 39,99" — e não como uma tabela de colunas equivalentes.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Como comprar com e sem desconto (briefing, item 6)

   Cada peça tem TRÊS formas de sair da loja, e é essa escolha que a seção
   precisa deixar óbvia: pagar o preço cheio, ou entregar muitos selinhos e
   pouco dinheiro, ou poucos selinhos e mais dinheiro. Por isso a linha é lida
   como uma frase da esquerda para a direita, separada por "ou" — e não como
   uma tabela de colunas equivalentes, que sugeriria dados paralelos.

   As peças flutuam sobre o mármore em vez de morarem num cartão branco: o
   cartão criava uma moldura em volta de cada linha e a seção virava uma lista
   de cinco caixas iguais, quando o que se compara está DENTRO de cada linha.
   --------------------------------------------------------------------------- */

.lp-comprar {
	/* Topo maior que a base: a peça da coleção vaza por cima desta seção (ver
	   .lp-colecao__destaque-img), então o título precisa de respiro extra para
	   não nascer colado nela. */
	padding-block: calc(var(--wp--preset--spacing--6) * 2) var(--wp--preset--spacing--6);
	background: var(--lp-marmore) url(../images/selinhos/fundo-campanha.webp) top center / 1920px auto repeat;
}

.lp-produtos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.lp-produto {
	display: grid;
	grid-template-columns: minmax(0, 460px) auto minmax(0, 190px) auto minmax(0, 190px);
	align-items: stretch;
	justify-content: center;
	gap: 0;
	width: 100%;
	max-width: 980px;
	margin-inline: auto;
}

/* --- a peça: foto DENTRO do cartão, só o cabo escapando ---

   O produto mora no cartão navy, não ao lado dele: é o cartão que apresenta a
   peça, e a panela transbordando pela esquerda dá o respiro que impede o bloco
   de virar um retângulo fechado. Só o cabo sai — o corpo inteiro para fora
   descolaria a foto do rótulo e os dois virariam elementos separados. */

.lp-produto__peca {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Nome e preço são uma peça só, partida ao meio: sem vão entre eles, e cada
	   metade arredonda apenas a borda externa. Separados por um vão, viravam dois
	   rótulos soltos e o preço perdia o vínculo com o produto. */
	gap: 0;
	margin-inline-end: var(--wp--preset--spacing--2);
}

.lp-produto__foto {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -2rem;
	translate: 0 -50%;
	width: clamp(150px, 16vw, 200px);
	height: clamp(120px, 12.8vw, 160px);
	margin: 0;
	z-index: 2;
	pointer-events: none;
}

.lp-produto__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 8px 14px rgba(41, 45, 62, 0.24));
}

/* O grill foi fotografado reto de cima (cabo vertical), enquanto as demais
   peças vêm em ângulo 3/4 de fábrica (cabo caindo para a esquerda). Sem
   rotação ele destoava da linha — CSS não recria a perspectiva das outras
   fotos, mas a inclinação já aproxima o "caimento" do cabo. object-fit:
   contain encolhe a peça rotacionada para caber na caixa (a diagonal é maior
   que os lados), então o scale compensa esse encolhimento. */
.lp-produto__foto--grill img {
	rotate: -60deg;
	scale: 1.25;
}

.lp-produto__cartao {
	background: var(--lp-navy);
	border-radius: 16px 16px 0 0;
	/* A esquerda abre a área em que a foto pousa; sem ela o rótulo passaria por
	   baixo da panela. */
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3) var(--wp--preset--spacing--2) clamp(150px, 17.5vw, 210px);
	display: grid;
	place-items: center;
	min-height: 100px;
}

.lp-produto__nome {
	margin: 0;
	color: #fff;
	font-size: clamp(0.8125rem, 0.77rem + 0.18vw, 0.9375rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	text-align: center;
}

.lp-produto__marca {
	font-weight: 400;
	opacity: 0.7;
}

.lp-produto__preco {
	margin: 0;
	background: var(--lp-cinza);
	color: var(--lp-navy);
	border-radius: 0 0 16px 16px;
	padding: 0.45rem var(--wp--preset--spacing--3) 0.45rem clamp(150px, 17.5vw, 210px);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

/* --- o "ou" que separa as três formas de aquisição --- */

.lp-produto__ou {
	align-self: center;
	margin: 0 -0.65rem;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #fff;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lp-navy);
	box-shadow: 0 1px 4px rgba(41, 45, 62, 0.16);
	position: relative;
	z-index: 3;
}

/* --- as duas trocas ---

   Contraste invertido entre elas de propósito: a primeira pede mais selinhos e
   menos dinheiro, a segunda o contrário. Vestidas iguais, o par vira uma tabela
   de duas colunas e a escolha se dissolve; em claro e escuro, a diferença entre
   as duas é a primeira coisa que se vê. */

.lp-opcao {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border-radius: 16px;
	padding: var(--wp--preset--spacing--2);
	text-align: center;
}

.lp-opcao--a {
	background: var(--lp-cinza-claro);
	color: var(--lp-navy);
}

.lp-opcao--b {
	background: var(--lp-navy);
	color: #fff;
}

.lp-opcao__selos {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
}

.lp-opcao__selos strong {
	font-size: clamp(1.75rem, 1.55rem + 0.8vw, 2.375rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.85;
}

.lp-opcao__selos span {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.1;
	text-align: start;
}

.lp-opcao__valor {
	margin: 0.1rem 0 0;
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.375rem);
	font-weight: 700;
	line-height: 1.1;
}

.lp-opcao__percentual {
	margin: 0;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.8;
}

.lp-nota {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

@media (max-width: 1080px) {
	/* A linha inteira não cabe: a peça sobe sozinha e as duas trocas ficam lado a
	   lado embaixo — é entre elas que está a comparação. */
	.lp-produto {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: var(--wp--preset--spacing--2) 0;
	}

	.lp-produto__peca {
		grid-column: 1 / -1;
		margin-inline-end: 0;
	}

	.lp-produto > .lp-produto__ou:first-of-type { display: none; }
}

@media (max-width: 560px) {
	.lp-produto__foto { width: 96px; inset-inline-start: -1rem; }

	.lp-produto__cartao,
	.lp-produto__preco { padding-inline-start: 96px; }

	.lp-produto__cartao { min-height: 72px; }
}



/* ---------------------------------------------------------------------------
   Produtos aceleradores (briefing, item 7)

   São ondas com data própria: o mesmo produto vale selo extra numa janela e não
   vale na seguinte. A data é, portanto, parte do dado — não legenda —, então
   cada onda abre com a própria vigência antes de mostrar qualquer produto.
   --------------------------------------------------------------------------- */

.lp-aceleradores {
	padding-block: var(--wp--preset--spacing--6);
	background: var(--lp-marmore) url(../images/selinhos/fundo-campanha.webp) top center / 1920px auto repeat;
}

/* 78ch em vez de 68ch: a largura anterior deixava "vigência." sozinho numa
   última linha — mais largura acomoda a frase inteira em menos linhas. */
.lp-aceleradores__intro {
	max-width: 78ch;
	margin: 0 auto var(--wp--preset--spacing--5);
	text-align: center;
	font-size: clamp(0.9375rem, 0.9rem + 0.24vw, 1.0625rem);
	line-height: 1.55;
}

.lp-onda + .lp-onda {
	margin-block-start: var(--wp--preset--spacing--5);
}

.lp-onda__cabecalho {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-block-end: var(--wp--preset--spacing--3);
}

.lp-onda__nome {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	font-weight: 700;
}

.lp-onda__vigencia {
	margin: 0;
	background: var(--lp-navy);
	color: #fff;
	border-radius: 999px;
	padding: 0.5rem 1.25rem;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.lp-onda__vigencia-data {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	font-weight: 800;
	letter-spacing: 0.01em;
}

/* Grade dos cards de produto acelerador. Cada imagem já chega pronta do
   cliente (foto + "compre X un." + selo "ganhe +N") — o grid só organiza,
   sem recriar nada do card. A fonte tem ~120px de largura original, então a
   coluna fica pequena de propósito: ampliar borraria o material.

   Colunas fixas (2 no mobile, 5 do tablet em diante) em vez de auto-fill:
   com auto-fill a contagem de colunas variava com a largura da tela e o
   card ora saía pequeno demais, ora grande demais para a nitidez da fonte. */
.lp-aceleradores__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--2);
}

@media (min-width: 600px) {
	.lp-aceleradores__grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.lp-acelerador {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--sm, 0 1px 3px rgba(57, 63, 86, 0.12));
}

.lp-acelerador img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------------------
   Perguntas frequentes (briefing, item 8)

   Abrem uma a uma, com <details> nativo: sem JavaScript, o conteúdo continua
   no HTML pro buscador e o teclado navega de graça.
   --------------------------------------------------------------------------- */

.lp-faq {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--6);
}

/* Peça decorativa que entra pela borda esquerda, cortada.

   Cortada de propósito: uma frigideira inteira flutuando ao lado do FAQ vira um
   segundo assunto e disputa a leitura com as perguntas. Entrando pela margem,
   ela é presença de campanha — o produto acompanha quem desceu a página até a
   letra miúda, sem pedir atenção.

   aria-hidden no bloco: quem usa leitor de tela não ganha nada em ouvir que há
   uma panela decorativa entre o título e a primeira pergunta.

   A revelação usa o [data-nv-revelar] do tema, com a mesma curva e duração; o
   que muda é só o eixo, porque uma peça que mora na margem esquerda tem que
   chegar de lá — subir seria um movimento sem origem. */
.lp-faq__peca {
	position: absolute;
	/* Ancorada logo abaixo do título, na altura das primeiras perguntas: presa
	   ao topo da seção ela sairia de vista nas primeiras linhas, e o FAQ tem
	   quinze. */
	inset-block-start: 9rem;
	inset-inline-start: 0;
	/* ~65% fora da tela — mais cortada que a peça anterior, de propósito: o
	   grill de cabo para baixo (ver rotate na img) precisa desse recuo maior
	   para não engolir o cabo, que é o que dá a direção do objeto. */
	translate: -65% 0;
	width: clamp(260px, 30vw, 420px);
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.lp-faq__peca img {
	width: 100%;
	height: auto;
	display: block;
	rotate: 180deg;
	filter: drop-shadow(0 18px 26px rgba(41, 45, 62, 0.16));
}

.lp-faq__peca[data-nv-revelar].reveal {
	transform: translateX(-40px);
}

.lp-faq__peca[data-nv-revelar].reveal.is-visivel {
	transform: none;
}

/* O conteúdo sobe acima da peça: ela é fundo, não camada de cima. */
.lp-faq > .lp-secao {
	position: relative;
	z-index: 1;
}

.lp-faq__lista {
	max-width: 60rem;
	margin-inline: auto;
}

/* position + z-index aqui, não só no pai: [data-nv-revelar] aplica um filter
   (mesmo blur(0) no estado visível) na peça decorativa, e filter cria contexto
   de empilhamento próprio — o z-index do .lp-secao sozinho não bastava para
   manter a peça atrás de cada card, ela vazava por cima do texto. */
.lp-faq .wp-block-details {
	position: relative;
	z-index: 2;
	background: #fff;
	border: 1px solid rgba(57, 63, 86, 0.12);
	border-radius: var(--lp-raio);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
}

.lp-faq .wp-block-details + .wp-block-details {
	margin-block-start: var(--wp--preset--spacing--1);
}

.lp-faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: clamp(0.9375rem, 0.9rem + 0.24vw, 1.0625rem);
	line-height: 1.35;
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	padding-block: 0.35rem;
}

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

/* O sinal é desenhado no CSS em vez de vir do marcador padrão: o triângulo do
   navegador não gira nem acompanha a cor da campanha. */
.lp-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	margin-block-start: 0.35rem;
	border-inline-end: 2px solid var(--lp-navy);
	border-block-end: 2px solid var(--lp-navy);
	rotate: 45deg;
	transition: rotate 0.2s ease;
}

.lp-faq details[open] summary::after {
	rotate: -135deg;
}

.lp-faq .wp-block-details > *:not(summary) {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-block: var(--wp--preset--spacing--1) 0;
}

.lp-faq .wp-block-details > ul,
.lp-faq .wp-block-details > ol {
	padding-inline-start: 1.15rem;
}

.lp-faq .wp-block-details li + li {
	margin-block-start: 0.3rem;
}

@media (max-width: 1180px) {
	.lp-faq__peca { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lp-faq summary::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Rodapé da campanha — parceiros, régua legal e realizadora

   Não é o rodapé do site (que está fora desta página de propósito): é o fecho
   obrigatório da ação, com as marcas participantes e o texto mínimo legal.
   --------------------------------------------------------------------------- */

.lp-rodape {
	padding-block: var(--wp--preset--spacing--5);
	background: var(--lp-marmore);
	border-block-start: 1px solid rgba(57, 63, 86, 0.12);
}

/* O rótulo abre a faixa pela esquerda, no mesmo eixo do resto do conteúdo.
   Centrado ele flutuava sobre a trilha sem se ancorar em nada — e, com os logos
   em movimento, um rótulo solto no meio parecia parte da fita. */
.lp-parceiros__rotulo {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Trilha de logos em rolagem contínua.

   O container é a janela e o trilho é a fita: o overflow fica aqui, a animação
   lá dentro. Enquanto o JavaScript não clonou o suficiente para a volta ficar
   invisível (classe --rolando), a faixa se comporta como uma lista rolável no
   dedo — nada depende do movimento para ser lido. */
.lp-parceiros {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	margin-block-end: var(--wp--preset--spacing--4);
}

.lp-parceiros__trilho {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--5);

	/* As pontas esmaecidas dizem que a fita continua além da borda, e evitam o
	   corte seco de um logo pela metade na entrada e na saída. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.lp-parceiros__trilho > * {
	flex: 0 0 auto;
}

.lp-parceiros__trilho--rolando {
	width: max-content;
	animation: lp-marquee var(--lp-marquee-duracao, 40s) linear infinite;
}

/* A segunda linha corre na direção oposta à primeira — é o que lê como duas
   fitas de verdade, e não uma só duplicada por engano. */
.lp-parceiros__trilho--2.lp-parceiros__trilho--rolando {
	animation-direction: reverse;
}

/* Parar sob o cursor é o único jeito de conseguir ler uma marca específica
   numa fita que não para sozinha. */
.lp-parceiros__trilho--rolando:hover,
.lp-parceiros__trilho--rolando:focus-within {
	animation-play-state: paused;
}

@keyframes lp-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(var(--lp-marquee-distancia, 0px) * -1), 0, 0); }
}

/* Movimento perpétuo no campo de visão é gatilho de desconforto vestibular, e
   esta fita roda o tempo todo. Quem pediu menos movimento recebe a lista
   parada, rolável no dedo. */
@media (prefers-reduced-motion: reduce) {
	.lp-parceiros__trilho--rolando {
		animation: none;
		width: auto;
	}

	.lp-parceiros__trilho {
		overflow-x: auto;
	}
}

.lp-parceiro {
	flex: 0 0 auto;
	margin: 0;
	width: 140px;
}

.lp-parceiro img {
	width: 100%;
	max-width: 110px;
	height: auto;
	display: block;
	margin-inline: auto;
	/* Marca de parceiro entra em escala e força visual diferentes umas das
	   outras; o teto de altura impede que a Tia Sônia (quadrada) apareça três
	   vezes maior que a Coca-Cola (deitada) na mesma fileira. */
	max-height: 56px;
	object-fit: contain;
}

.lp-avisos {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block-end: var(--wp--preset--spacing--3);
	text-align: center;
}

.lp-avisos p {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.lp-legal {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.5;
	text-align: justify;
	opacity: 0.8;
}

.lp-rodape__fecho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-block-start: var(--wp--preset--spacing--4);
	padding-block-start: var(--wp--preset--spacing--3);
	border-block-start: 1px solid rgba(57, 63, 86, 0.12);
}

.lp-rodape__copyright {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.lp-rodape__realizadora {
	margin: 0;
}

.lp-rodape__realizadora img {
	width: 140px;
	height: auto;
}

@media (max-width: 640px) {
	.lp-legal { text-align: start; }

	.lp-rodape__fecho {
		flex-direction: column;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
   Acabamento de superfície e leitura no telefone

   Reunidas aqui as correções que saíram da auditoria em 320 / 390 / 430 / 768.
   Nada disso é escala do desktop: são decisões que só existem porque o dedo, a
   distância de leitura e a largura mudaram.
   --------------------------------------------------------------------------- */

/* --- superfícies que o navegador desenha por padrão e não pertencem a design
   system nenhum: seleção, foco e numerais. --- */

.lp ::selection {
	background: var(--lp-navy);
	color: #fff;
}

.lp :is(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--lp-navy);
	outline-offset: 3px;
	border-radius: 4px;
}

.lp-menu :is(a, button):focus-visible {
	outline-color: #fff;
}

/* Valor e contagem são dados: em numerais proporcionais, "65" e "85" têm
   larguras diferentes e a coluna de trocas balança de linha para linha. */
.lp-opcao__selos,
.lp-opcao__valor,
.lp-opcao__percentual,
.lp-produto__preco,
.lp-hero__regua-valor {
	font-variant-numeric: tabular-nums;
}

/* --- alvos de toque ---
   O menu é a única navegação da página e vinha com 35px de altura. O mínimo de
   44px não é enfeite: abaixo disso o erro de toque sobe e a pessoa acerta o
   item vizinho — num menu de âncoras, isso a joga na seção errada. */

@media (pointer: coarse) {
	.lp-menu .wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.lp-faq summary {
		min-height: 44px;
	}

	/* Link dentro de parágrafo tem a altura da linha — 17px. O padding cresce a
	   área tocável sem alterar a entrelinha do texto em volta. */
	.lp-faq .wp-block-details a,
	.lp-legal a {
		display: inline-block;
		padding-block: 0.7rem;
		margin-block: -0.7rem;
	}
}

/* --- leitura em tela pequena --- */

@media (max-width: 900px) {
	/* Caixa alta é boa em rótulo curto e péssima em parágrafo: sem as ascendentes
	   e descendentes, a silhueta da palavra some e a leitura vira decifração —
	   letra por letra, em quatro linhas de texto legal. Vira caixa normal aqui, e
	   o peso passa a carregar o destaque. */
	.lp-hero__periodo,
	.lp-nota,
	.lp-avisos p {
		text-transform: none;
		letter-spacing: 0;
	}

	.lp-hero__periodo,
	.lp-nota {
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.lp-avisos p {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.lp-legal {
		font-size: 0.875rem;
		line-height: 1.6;
	}

	.lp-rodape__copyright {
		font-size: 0.875rem;
	}

	.lp-produto__nome {
		font-size: 0.875rem;
	}

	.lp-pendente__etiqueta {
		font-size: 0.6875rem;
	}

}

/* --- composição da linha de produto no telefone --- */

@media (max-width: 560px) {
	/* Metade da panela para fora era corte demais no espaço estreito: a peça
	   perde a silhueta e vira uma mancha clara na margem. */
	.lp-produto__foto {
		inset-inline-start: -0.6rem;
		width: 128px;
		height: 102px;
	}

	.lp-produto__cartao,
	.lp-produto__preco {
		padding-inline-start: 118px;
	}

	.lp-hero__ticket {
		margin-block: -3rem 0;
	}
}

/* Telefone pequeno de verdade: em 320px o par de trocas fica com 130px por
   coluna e o valor quebra em duas linhas. */
@media (max-width: 360px) {
	.lp-produto__opcoes,
	.lp-produto {
		grid-template-columns: 1fr;
	}

	.lp-produto > .lp-produto__ou {
		justify-self: center;
		margin-block: -0.5rem;
		margin-inline: 0;
	}

	.lp-produto > .lp-produto__ou:first-of-type {
		display: grid;
	}
}

/* ---------------------------------------------------------------------------
   Skip link

   O WordPress imprime o link em .screen-reader-text (1×1px, recortado) e conta
   com o tema para devolvê-lo ao receber foco. Sem essa regra ele fica de 1×1
   para sempre: quem navega por teclado é obrigado a percorrer os seis botões da
   barra de âncoras antes de chegar ao conteúdo, em toda página do site.

   Global de propósito — o link existe em todo template e estava mudo em todos.
   Só aparece durante o foco por teclado, então não muda nada do que se vê.
   --------------------------------------------------------------------------- */

.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	inset-block-start: var(--wp--preset--spacing--2);
	inset-inline-start: var(--wp--preset--spacing--2);
	z-index: 100000;
	display: block;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.9rem 1.2rem;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}