/* 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);
}

/* Depois de rolar um pouco a página (JS em header-nav.js alterna a classe),
   o cabeçalho encolhe e o preto sólido vira vidro/blur — o mesmo efeito do
   painel do mega menu e da faixa fixa mobile, só que translúcido em vez de
   quase opaco, porque aqui tem conteúdo passando por baixo o tempo todo.
   O blur mora num ::before, NÃO em background/backdrop-filter do próprio
   .site-header: backdrop-filter cria um novo containing block pra
   descendente `position: fixed`, e o .site-dock (a faixa fixa mobile) é
   filho direto daqui — com o filtro no pai, o "fixed" do .site-dock parava
   de mirar a viewport e passava a mirar este header pequeno lá no topo,
   arrancando a faixa do rodapé da tela. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: rgba(20, 20, 20, 0.8);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-scrolled::before {
	opacity: 1;
}

.site-header.is-scrolled {
	background: transparent;
}

.site-header.is-scrolled .site-header__inner {
	padding-top: var(--wp--preset--spacing--1) !important;
	padding-bottom: var(--wp--preset--spacing--1) !important;
}

.site-header.is-scrolled .site-header__logo img {
	width: 70px;
	height: auto;
}

/* 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;
	/* O padrão do WordPress pra bloco com fundo colorido (:where(.has-background),
	   especificidade zero) aplica 2.375em (38px) de padding lateral — 14px a mais
	   do que os 24px que o resto deste arquivo já assume (ver cálculo do
	   max-width logo abaixo). Sem essa sobrescrita o título de página fica 24px
	   fora de esquadro com o logo e o conteúdo abaixo dele. */
	padding-inline: var(--wp--preset--spacing--3);
}

/* Faixas de largura cheia cujo CONTEUDO precisa cair na mesma vertical do
   resto do conteudo da pagina/archive (contentSize: 1200px, ver templates) —
   NAO do cabecalho, que continua em 1440 (site-header__inner, sozinho). Acima
   de 1248px de viewport os filhos centram em 1200 e comecam 24px antes da
   margem, porque o padding lateral da faixa deixa de valer quando sobra
   espaco de fora. 1200 de caixa COM 24 de padding = 1176 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(1200px - 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;
	transition: padding 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.site-header__logo img {
	transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 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.4rem 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;
		justify-content: center !important;
		row-gap: var(--wp--preset--spacing--2);
	}

	/* O botão de menu inline some daqui: em telas estreitas ele mora na faixa
	   fixa (.site-dock), não faz sentido repetir o gatilho duas vezes. */
	.site-header__inner .site-header__toggle {
		display: none;
	}

	/* A busca inline some do cabeçalho: em telas estreitas quem busca é o
	   painel acionado pela faixa fixa (.site-dock__item--busca), e sem essa
	   faixa de 44px+ sobra mais primeira dobra pro banner. */
	.site-busca {
		display: 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 do mega menu. Em telas largas fica sozinho na barra do
   cabeçalho; abaixo de 900px ele vira só mais um item da faixa fixa
   (.site-dock, ver seção logo abaixo) — mesma marcação e mesmo JS, o layout
   muda por CSS. */
.site-header__toggle {
	position: relative;
	display: flex;
	align-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
}

.site-header__toggle-icone {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
}

/* 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-icone 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-icone span:nth-child(1) { top: 9px; }
.site-header__toggle-icone span:nth-child(2) { top: 15px; }
.site-header__toggle-icone 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-icone span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
	transition-delay: 80ms;
}

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

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

/* ---------------------------------------------------------------------------
   Faixa fixa mobile — carrinho, atendimento, busca, menu

   Em telas largas o botão do menu já mora inline no cabeçalho; recriar uma
   barra ali seria redundante. Abaixo de 900px os 4 atalhos saem do fluxo e
   viram uma faixa fixa no rodapé da tela — mesmo efeito de vidro do painel
   do mega menu (.site-header__nav logo abaixo), sempre alcançável com o
   polegar mesmo depois de rolar a página.
   --------------------------------------------------------------------------- */
/* Duas classes de propósito: o global-styles do WP casa ".is-layout-flex" com
   "body .is-layout-flex" (0,1,1) pra dar display:flex a todo wp:group em
   layout flex — mais específico que uma classe solta (0,1,0), então
   "display:none" sozinho perdia a queda de braço e a faixa nascia visível
   até no desktop (mesmo problema já resolvido em .lp-menu .lp-menu__lista). */
.site-header .site-dock {
	display: none;
}

@media (max-width: 900px) {
	/* Mesma especificidade do "display:none" acima (duas classes) — senão a
	   regra de esconder, sendo mais específica, venceria mesmo dentro da
	   media query. */
	.site-header .site-dock {
		display: flex;
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		overflow: hidden;
		border-radius: 16px 16px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: rgba(40, 40, 40, 0.96);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		/* Some no primeiro instante (a página inteira ainda não respirou) e só
		   entra depois de 3s ou no primeiro scroll — o que vier primeiro (JS em
		   header-nav.js). `visibility` tira a faixa do foco por teclado enquanto
		   escondida; sem ela um Tab cedo cairia num botão fora da tela. */
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.site-header .site-dock.is-visivel {
		transform: translateY(0);
		visibility: visible;
	}

	/* Dentro da faixa o botão do menu deixa de ser o quadrado 32px inline: vira
	   só mais um item da fila, do mesmo tamanho de alvo de toque dos outros
	   três. Ícone um pouco maior que o .lp-menu__toggle-icone original pra
	   acompanhar os 24px dos ícones mascarados ao lado. */
	.site-dock .site-header__toggle {
		width: auto;
		height: auto;
	}

	.site-dock .site-header__toggle-icone {
		width: 24px;
		height: 18px;
	}

	.site-dock .site-header__toggle-icone span {
		left: 0;
		right: 0;
	}

	.site-dock .site-header__toggle-icone span:nth-child(1) { top: 0; }
	.site-dock .site-header__toggle-icone span:nth-child(2) { top: 8px; }
	.site-dock .site-header__toggle-icone span:nth-child(3) { top: 16px; }

	.site-header.is-open .site-dock .site-header__toggle-icone span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.site-header.is-open .site-dock .site-header__toggle-icone span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}

/* Só ícone, sem rótulo embaixo — os quatro têm alvo de toque generoso
   (padding, não largura fixa) pra continuar fácil de acertar mesmo sem o
   texto ajudando a mirar. */
.site-dock__item {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 0.3rem;
	background: none;
	border: 0;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	cursor: pointer;
}

/* Só os três itens com ícone via máscara (o menu já traz o próprio ícone de
   três traços) — content só nasce em quem declara --nv-dock-icone, então o
   botão de menu não herda um ::before mascarado sem imagem nenhuma. */
.site-dock__item--carrinho::before,
.site-dock__item--atendimento::before,
.site-dock__item--busca::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--nv-dock-icone) center / contain no-repeat;
	mask: var(--nv-dock-icone) center / contain no-repeat;
}

/* O do WhatsApp é a única forma sólida da fileira — os outros três são
   traço fino (stroke-width:2), então no mesmo tamanho de caixa ele lê mais
   pesado/maior que os vizinhos mesmo pesando os mesmos 24px. Reduzido só
   ele pra equilibrar o peso visual. */
.site-dock__item--atendimento::before {
	width: 20px;
	height: 20px;
}

.site-dock__item--carrinho    { --nv-dock-icone: var(--nv-icone-carrinho); }
.site-dock__item--atendimento { --nv-dock-icone: var(--nv-icone-whatsapp); }
.site-dock__item--busca       { --nv-dock-icone: var(--nv-icone-busca); }

/* 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;
	/* Sem isso o wheel/teclado "vaza" pro fundo ao chegar no fim do painel
	   (achado da auditoria de 29/08) — o overflow:hidden do <html> impede o
	   scroll de fato, mas nao a tentativa de encadear pra fora do painel. */
	overscroll-behavior: contain;
	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. Só conta pro
   botao inline do cabecalho — em mobile ele some (ver media query acima) e
   quem aparece é o item do .site-dock, que nao e flex-child do
   .site-header__inner e por isso ignora este `order`. */
.site-header__toggle {
	order: 3;
}

/* ---------------------------------------------------------------------------
   Painel de busca (faixa fixa mobile)

   Mesmo mecanismo visual do painel do mega menu logo acima — vidro/blur,
   opacity+visibility pra poder animar — só que dedicado à busca e acionado
   por uma classe própria (.is-busca-aberta), pra abrir um sem fechar o outro
   sem querer. Mutuamente exclusivos por JS (header-nav.js).
   --------------------------------------------------------------------------- */
.site-busca-painel {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: calc(80px + var(--wp--preset--spacing--6)) var(--wp--preset--spacing--3) var(--wp--preset--spacing--7);
	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;
}

.site-header.is-busca-aberta .site-busca-painel {
	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;
}

.site-busca-painel__campo {
	width: 100%;
	max-width: 480px;
	margin: 0;
}

.site-busca-painel__campo .wp-block-search__inside-wrapper {
	padding: 4px 4px 4px 1.3rem;
}

.site-busca-painel__campo .wp-block-search__input {
	font-size: var(--wp--preset--font-size--base);
}

/* ---------------------------------------------------------------------------
   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),
html:has(.site-header.is-busca-aberta) {
	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;
}

/* ---------------------------------------------------------------------------
   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);
	opacity: 0.85;
	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), opacity 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);
	opacity: 1;
}

.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 :is(h2, 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 :is(h2, h3) a:hover {
	text-decoration: none;
}

.recipe-card__body :is(h2, 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: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--1);
}

/* Ícone em cima, texto embaixo — cada item vira uma pilha estreita em vez de
   ícone+texto lado a lado brigando por espaço horizontal, que quebrava a
   palavra ("min", "pessoas") no meio quando o card era estreito. Alinhado à
   esquerda com gap fixo (não space-between) pra o espaço entre os 3 itens
   ficar igual em todo card, independente do tamanho do texto de cada um. */
.recipe-card__info-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
	flex: 0 0 auto;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.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: 12px;
	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);
}

/* Rank Math está ativo em produção, então [nv_breadcrumb] sempre delega pra
   [rank_math_breadcrumb] (ver inc/blog.php) e as regras ".nv-breadcrumb"
   acima nunca chegam a valer — o markup real é ".rank-math-breadcrumb",
   sem font-size próprio (herdava os 16px do body). Vale em toda single que
   usa o recurso: página de loja (page-tipo-lojas.html) e post único
   (single.html, receitas e notícias). */
.rank-math-breadcrumb {
	font-size: 12px;
}

/* 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,
.page-header .nv-breadcrumb ol,
.page-header .nv-breadcrumb a {
	color: rgba(255, 255, 255, 0.6);
}

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

/* 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");
	--nv-icone-busca: 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%3C/svg%3E");
	/* Único ícone de marca da lista (os outros são line-art genéricos): o
	   contorno do WhatsApp precisa continuar reconhecível como "aquele
	   balãozinho", então é preenchido, não traço. Path oficial da simple-icons. */
	--nv-icone-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%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: 8px;
	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 {
	font-size: 16px;
	line-height: 1.25;
}

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

/* ---------------------------------------------------------------------------
   Grade de "/nossas-lojas/" — a página nunca teve conteúdo próprio (o design
   original só linkava a home). Cards com foto real de cada unidade (mesma
   imagem destacada de 2022, já correta) em vez do card so-texto de
   ".loja-card" (que existe pra "outras lojas", uma seção secundária).
   --------------------------------------------------------------------------- */
.nv-lojas-intro {
	max-width: 45ch;
	margin: 0 auto var(--wp--preset--spacing--5);
	text-align: center;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--lg);
}

.nv-lojas-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--wp--preset--spacing--4) !important;
}

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

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

.loja-card-nova {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--nv-borda);
	background: var(--wp--preset--color--white);
	transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.loja-card-nova:hover,
.loja-card-nova:focus-within {
	border-color: transparent;
	box-shadow: 0 20px 40px rgba(8, 21, 52, 0.16);
	transform: translateY(-4px);
}

.loja-card-nova__foto {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

.loja-card-nova:hover .loja-card-nova__foto img,
.loja-card-nova:focus-within .loja-card-nova__foto img {
	transform: scale(1.05);
}

.loja-card-nova__corpo {
	padding: var(--wp--preset--spacing--3) !important;
	gap: 0.4rem !important;
}

.loja-card-nova__corpo :is(h2, h3) {
	margin: 0;
	line-height: 1.25;
}

.loja-card-nova__corpo :is(h2, h3) a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.loja-card-nova__endereco {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin: 0 !important;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.loja-card-nova__endereco::before {
	content: "";
	width: 18px;
	height: 18px;
	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-card-nova__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0.15rem 0 0 !important;
	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;
}

.loja-card-nova__cta::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-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);
}

.loja-card-nova:hover .loja-card-nova__cta::after,
.loja-card-nova:focus-within .loja-card-nova__cta::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.loja-card-nova,
	.loja-card-nova__foto img,
	.loja-card-nova__cta::after {
		transition: none;
	}

	.loja-card-nova:hover,
	.loja-card-nova:focus-within {
		transform: none;
	}
}

@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;
	/* WP core deixa os botões em coluna se auto-ajustarem ao próprio conteúdo
	   (align-items: flex-start); aqui as cinco linhas precisam da mesma
	   largura, a da coluna inteira — quem decide isso é o stretch. */
	align-items: stretch;
}

/* 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-atalho-seta, var(--nv-icone-seta)) center / contain no-repeat;
	mask: var(--nv-atalho-seta, 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);
	/* Sai do site (bigmaisemcasa.com.br) — a seta de link externo avisa isso
	   antes do clique, em vez do chevron que promete "outra página aqui". */
	--nv-atalho-seta: var(--nv-icone-externo);
}

.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 {
	/* Ícone de arquivo (o mesmo do atalho "Folheto de ofertas" na página de TV)
	   em vez da seta genérica de download — aqui já é claramente um PDF. */
	--nv-atalho-icone: var(--nv-icone-folheto);
	/* A seta à direita é que carrega o sinal de download agora. */
	--nv-atalho-seta: 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;
	}

	/* O comentário acima já previa isso, só a regra nunca chegou a existir: o
	   número (44px) fica empilhado ACIMA do texto, não ao lado — sem esse
	   padding o título/parágrafo começa em x:0 e a linha (x:22px, o centro do
	   círculo) cortava bem no meio das primeiras letras. Só no texto, não em
	   .rel-passo inteiro: o número precisa continuar em x:0 pra ficar
	   centralizado na linha. */
	.rel-passo h3,
	.rel-passo p:not(.rel-passo__numero) {
		padding-left: var(--wp--preset--spacing--6);
	}
}

/* ---------------------------------------------------------------------------
   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);
}

/* Era rgba(255,255,255,0.88): media ~4,16:1 sobre o vermelho da marca, abaixo
   do AA de 4,5:1 (achado da auditoria de 29/08). Branco solido, como a faixa
   escura ja usa por heranca, resolve sem mudar a leitura visual da secao. */
.hist-faixa--marca .hist-marco__nome {
	color: var(--wp--preset--color--white);
}

.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);
	/* Mesma variável do .recipe-card.reveal: default 0ms não muda nada em quem
	   já usa [data-nv-revelar] hoje, e quem quiser cascata (cartões lado a
	   lado, ex.: .lp-passo/.lp-produto) só declara --reveal-delay inline. */
	transition-delay: var(--reveal-delay, 0ms);
}

[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;
	/* Mesmo bug do :where(.has-background) documentado lá em cima (.page-header
	   e companhia): fundo colorido ganha 2.375em (38px) de padding lateral do
	   WordPress por padrão. Aqui o padding de verdade já vem do .banner (24px,
	   var:spacing|3) — os 38px daqui só somavam por cima e encolhiam a foto. */
	padding-left: 0;
	padding-right: 0;
}

/* 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: 24px;
}

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

/* 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. Deslocamento pequeno no mobile —
	   o mesmo transform que sangra a foto por baixo da curva também abre um
	   vão em cima, entre a logo e o banner. */
	transform: translateY(8px);
}

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

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

/* .banner__trilho é um <ul> (post-template do banner_home): sem isso o
   indent padrão de lista (padding-inline-start do user-agent) encolhia a
   foto por dentro do padding do .banner, sem nenhuma regra aqui explicando
   por quê — a largura "sobrava" pra esquerda. */
.banner__trilho {
	padding: 0;
	list-style: none;
}

.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%;
	/* Sem isso o aspect-ratio do bloco governa só pela largura: em telas baixas
	   (janela do navegador com barra de favoritos/abas, notebook em paisagem)
	   o banner passava da primeira dobra e a curva só aparecia rolando. */
	max-height: 56vh;
	object-fit: cover;
}

/* Em celular a lógica se inverte: o teto de 56vh (pensado pra tela baixa e
   larga) sobra pouca foto numa tela alta e estreita. Aqui o banner vira o
   protagonista da primeira dobra — svh, não vh, pra não pular quando a barra
   de endereço do navegador esconde/aparece durante o scroll. */
@media (max-width: 782px) {
	.banner__foto img {
		aspect-ratio: auto !important;
		height: 80svh;
		max-height: none;
	}
}

.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.
   Tem que acompanhar o translateY do .banner em cada breakpoint. */
.banner-faixa + .wp-block-group {
	padding-top: calc(var(--wp--preset--spacing--6) + 8px) !important;
}

@media (min-width: 782px) {
	.banner-faixa + .wp-block-group {
		padding-top: calc(var(--wp--preset--spacing--6) + 40px) !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 --- */

.inst-secao__topo {
	margin-bottom: var(--wp--preset--spacing--4);
}

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

/* 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.
   Fica DEPOIS da trilha no HTML de propósito (ver comentário em
   nv-carrossel.js): empilhado, a ordem natural já joga link+setas pro rodapé
   da seção, sem CSS nenhum de reordenar. Em telas largas um grid devolve os
   dois pra mesma linha do título — ver .inst-secao:has(> .nv-carrossel) logo
   abaixo. Já nasce como flex porque é aqui que o JS encaixa as setas. */
.inst-secao__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

/* Em telas largas o link some do rodapé e volta pra mesma linha do título —
   layout original, só que agora montado por grid-area em vez de depender da
   ordem no HTML (que precisa ficar invertida pro empilhamento mobile
   funcionar sem JS extra). */
@media (min-width: 783px) {
	.inst-secao:has(> .nv-carrossel) {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		column-gap: var(--wp--preset--spacing--3);
	}

	.inst-secao:has(> .nv-carrossel) > .inst-secao__topo {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.inst-secao:has(> .nv-carrossel) > .inst-secao__link {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: var(--wp--preset--spacing--4);
	}

	.inst-secao:has(> .nv-carrossel) > .nv-carrossel {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* 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. `grid-template-rows`
   também precisa ir pra 1: só o `grid-auto-columns` a 100% ainda deixava DOIS
   cards por "página" (a grade continuava com 2 linhas, então cada coluna de
   100% carregava um par empilhado) — o comentário já dizia "um card por
   vista", só a grade não tinha acompanhado. */
@media (max-width: 1100px) {
	.nv-carrossel__trilho {
		grid-template-rows: minmax(0, 1fr);
		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. */
	.inst-servico {
		--nv-arte-foto: 88%;
	}

	/* ...exceto a foto do entregador (variante vermelha): é um retrato
	   342x480 (proporção 0,71), e a forma é um quadrado (aspect-ratio:1). Acima
	   de ~71% de largura a altura da imagem já ultrapassa a altura do quadrado
	   e o overflow:hidden corta o topo — bem onde fica o rosto. Volta pro
	   mesmo 66% do desktop, que já é seguro com essa foto. A variante azul
	   (retrato mais largo que alto) continua nos 88% de cima, sem esse risco. */
	.inst-servico:not(.inst-servico--invertido) {
		--nv-arte-foto: 66%;
	}

	/* 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--5);
		right: var(--wp--preset--spacing--5);
		bottom: var(--wp--preset--spacing--4);
	}

	/* Um pouco menor que o H1 padrão do site (32px em telas de celular): em 3
	   linhas dentro do padding acima, o tamanho normal encostava nas bordas
	   arredondadas do card. */
	.banner__titulo {
		font-size: clamp(1.5rem, 1.2rem + 3vw, 1.75rem);
	}

	/* Só no mobile — no desktop o padding-bottom de 120px (spacing|8) do
	   template continua valendo. `!important` porque o valor de base vem de
	   style inline (maior especificidade que qualquer seletor de classe).
	   `.page-header--esquerda` é compartilhada por todas as páginas "single"
	   de tipo (lojas, ofertas, ofertas da TV, história, relacionamento) — as
	   receitas e notícias usam `.page-header` sozinho, sem esse modificador,
	   então ficam de fora por não terem a classe, não por exceção manual.
	   Em .page-tipo-relacionamento.html o valor de base já é 48px em qualquer
	   largura, então aqui é um no-op pra ela — mesmo número, sem efeito. */
	.page-header--esquerda {
		padding-bottom: var(--wp--preset--spacing--5) !important;
	}

	/* Mesmo tamanho do .banner__titulo do hero — testado primeiro só na página
	   de ofertas, confirmado também grande demais em "Programa de
	   Relacionamento" (H1 padrão do tema fica ~32px aqui), e generalizado pra
	   toda a família (mesma classe do padding-bottom acima). */
	.page-header--esquerda h1 {
		font-size: 28px;
	}

}


/* ---------------------------------------------------------------------------
   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;
}

:root {
	--nv-icone-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z'/%3E%3C/svg%3E");
	--nv-icone-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z'/%3E%3C/svg%3E");
	--nv-icone-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z'/%3E%3C/svg%3E");
}

/* Lista simples no lugar do bloco core/social-links: o CSS do bloco (cerca de
   12 KB inline) ia em todas as páginas por causa de três ícones. Cada link vira um
   alvo circular de 40px com contorno de 1px (mesmo vocabulário das setas do
   carrossel). O texto do link fica no HTML, só fora da vista, e continua sendo o
   nome acessível. */
.rodape-social .rodape-redes {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rodape-social .rodape-redes li {
	margin: 0;
	padding: 0;
}

.rodape-social .rodape-redes a {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 0;
	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 .rodape-redes a::before {
	content: "";
	position: absolute;
	inset: 11px;
	background: currentColor;
	-webkit-mask: var(--nv-icone-rede) center / contain no-repeat;
	mask: var(--nv-icone-rede) center / contain no-repeat;
}

.rodape-social .rodape-redes a[href*="facebook.com"] { --nv-icone-rede: var(--nv-icone-facebook); }
.rodape-social .rodape-redes a[href*="instagram.com"] { --nv-icone-rede: var(--nv-icone-instagram); }
.rodape-social .rodape-redes a[href*="youtube.com"] { --nv-icone-rede: var(--nv-icone-youtube); }

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

.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) {
	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: 12px;
}

.rodape-links li {
	margin: 0;
}

.rodape-links a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	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: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
}

/* 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) {
		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 .rodape-redes a,
	.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:         #184056;
	--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. */
/* Briefing da campanha: "utilizar a fonte do KV em todos os textos" (Montserrat).
   O resto do site usa Ubuntu (tokens --body/--heading); só esta LP foge da
   regra, então a troca fica presa em .lp em vez de mexer no theme.json global.
   Reaproveita o token --campanha (Montserrat variável, já carregado pros
   títulos) em vez de subir os arquivos da pasta Fonts/ do briefing como um
   segundo @font-face da mesma família. */
.lp {
	background-color: #fff;
	font-family: var(--wp--preset--font-family--campanha-titulo);
}

/* theme.json força Ubuntu em todo bloco core/paragraph (styles.blocks.core/paragraph),
   regra que casa direto com a tag <p> e por isso vence a herança do .lp acima
   mesmo essa tendo mais especificidade — herança nunca disputa com casamento
   direto. Sem isso só os headings ficavam na fonte da campanha. */
.lp p {
	font-family: inherit;
}

.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);
}

/* Pedido da cliente (comparando com a cartela impressa): o título é Montserrat,
   quem usa a Benetton Heavy do KV é o corpo do texto — regra acima em .lp. */
.lp h2 {
	font-family: var(--wp--preset--font-family--campanha);
	font-weight: 700;
}

/* 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: 16px;
	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;
}

/* O tema define link global vermelho (theme.json > styles.elements.link),
   mas este é um heading, não uma chamada de link comum: mantém a cor padrão
   do texto (herda do .lp :is(h1…h6) acima) e só sinaliza "clicável" com
   escala + transition no hover/focus. */
.lp .lp-hero__convite a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.lp .lp-hero__convite a:hover,
.lp .lp-hero__convite a:focus-visible {
	transform: scale(1.05);
	text-decoration: none;
}

/* --- 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, 50%); }
	.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.75rem;
	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;
}

/* Botão de menu (hambúrguer + "Navegue"): existe só como alvo de clique em
   telona estreita — ver media query abaixo. Fora dela fica fora do fluxo e
   invisível, então não some layout nenhum em desktop. */
.lp-menu__toggle {
	display: none;
}

@media (max-width: 1024px) {
	/* A fila de seis rótulos + o botão de saída não cabe numa linha só entre o
	   fim do celular e o início do desktop largo — sobrava a quebra em duas
	   linhas torta que a cliente reportou. Em vez de caçar um breakpoint onde
	   ela "quase" cabe, a barra vira gaveta: some o sticky do topo inteiro e
	   entra um botão fixo no canto inferior esquerdo (fora do fluxo, não some
	   com a rolagem) que abre a mesma lista de links como painel flutuante. */
	.lp-menu {
		position: static;
		background: none;
		padding: 0;
	}

	/* Especificidade elevada de propósito: o global-styles do WP casa
	   ".is-layout-flex" com "body .is-layout-flex" (0,1,1) pra dar display:flex
	   a todo wp:buttons — mais específico que uma classe solta (0,1,0), então
	   "display:none" sozinho perdia a queda de braço e o painel nascia aberto. */
	.lp-menu .lp-menu__lista {
		display: none;
		position: fixed;
		z-index: 60;
		inset-inline-end: var(--wp--preset--spacing--2);
		inset-block-end: calc(3.5rem + var(--wp--preset--spacing--2));
		max-width: calc(100vw - 2 * var(--wp--preset--spacing--3));
		max-height: calc(100vh - 7rem);
		overflow-y: auto;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		background: var(--lp-navy);
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 14px;
		padding: var(--wp--preset--spacing--3);
		/* A sombra sozinha não separava o painel de fundos igualmente escuros
		   atrás dele (ex.: a caixa "2 caçarolas..." também é navy) — o traço
		   branco translúcido garante a borda mesmo quando a sombra some no
		   contraste. */
		box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
	}

	.lp-menu.is-open .lp-menu__lista {
		display: flex;
	}

	.lp-menu__lista .wp-block-button__link {
		font-size: 0.8125rem;
	}

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

	.lp-menu__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		position: fixed;
		z-index: 61;
		inset-inline-end: var(--wp--preset--spacing--2);
		inset-block-end: var(--wp--preset--spacing--2);
		background: var(--lp-navy);
		color: #fff;
		border: 0;
		border-radius: 999px;
		padding: 0.7rem 1.15rem;
		font-family: var(--wp--preset--font-family--campanha);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
		cursor: pointer;
	}

	/* Três traços que convergem num X — mesma curva e mesma lógica de
	   convergência do .site-header__toggle, pra não ler como um gesto novo ao
	   lado do resto do site. */
	.lp-menu__toggle-icone {
		position: relative;
		flex: 0 0 auto;
		width: 18px;
		height: 13px;
	}

	.lp-menu__toggle-icone span {
		position: absolute;
		inset-inline: 0;
		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);
	}

	.lp-menu__toggle-icone span:nth-child(1) { inset-block-start: 0; }
	.lp-menu__toggle-icone span:nth-child(2) { inset-block-start: 5.5px; }
	.lp-menu__toggle-icone span:nth-child(3) { inset-block-start: 11px; }

	.lp-menu.is-open .lp-menu__toggle-icone span:nth-child(1) {
		transform: translateY(5.5px) rotate(45deg);
	}

	.lp-menu.is-open .lp-menu__toggle-icone span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0.2);
	}

	.lp-menu.is-open .lp-menu__toggle-icone span:nth-child(3) {
		transform: translateY(-5.5px) rotate(-45deg);
	}
}

/* ---------------------------------------------------------------------------
   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);
}

/* Fundo sólido só aqui — o .btn-secondary global fica transparente de
   propósito (é o CTA usado em cima de fundo escuro em outras seções do
   site); estas duas instâncias vivem sobre mármore e pediram um recorte
   branco mais firme, sem mexer na classe compartilhada. Especificidade
   igualada de propósito: ".on-light .wp-block-button.btn-secondary
   .wp-block-button__link" (4 classes) já fixa transparent — menos que isso
   perde a queda de braço, como já aconteceu com o display do menu acima. */
.lp-regulamento-cta .wp-block-button.btn-secondary .wp-block-button__link {
	background-color: #fff;
}

.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);
}

/* Variante direcional do reveal genérico (mesma ideia do .lp-faq__peca):
   imagem e texto entram de lados opostos em vez do translateY padrão. */
.lp-colecao__destaque-img[data-nv-revelar].reveal {
	transform: translateX(-40px);
}

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

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

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

/* 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;
}

/* Link pro catálogo de ofertas: escala só a imagem dentro do cartão que já
   corta em overflow:hidden, então o zoom fica contido no próprio quadro em
   vez de invadir a peça vizinha na grade. */
.lp-acelerador a {
	display: block;
	transition: transform 0.2s ease;
}

.lp-acelerador a:hover,
.lp-acelerador a:focus-visible {
	transform: scale(1.05);
}

/* ---------------------------------------------------------------------------
   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;
}

/* ---------------------------------------------------------------------------
   FAQ da institucional (patterns/faq-institucional.php): acordeão core/details
   --------------------------------------------------------------------------- */
.inst-faq .wp-block-details {
	margin: 0;
	padding: var(--wp--preset--spacing--3) 0;
	border-block-end: 1px solid var(--nv-borda);
}

.inst-faq .wp-block-details:first-of-type {
	border-block-start: 1px solid var(--nv-borda);
}

.inst-faq .wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}

.inst-faq .wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.inst-faq .wp-block-details p {
	max-width: 72ch;
	margin-block: var(--wp--preset--spacing--2) 0;
}