/*
Theme Name: PEMAH Premium
Theme URI: https://pemah.com.br
Author: Pemah Nutrição e Bem-Estar
Description: Tema sob medida para a Pemah — nutrição e bem-estar. Landing page com produtos em destaque, reels, guia de suplementos e blog.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pemah
Tags: nutricao, suplementos, landing-page, responsivo
*/

/* ==========================================================================
   1. Fontes
   ========================================================================== */

/* Fontes variáveis: um arquivo cobre toda a faixa de peso.
   Hospedadas aqui mesmo — nada é pedido ao Google. */

@font-face {
	font-family: 'Playfair Display';
	src: url('assets/fonts/playfair.woff2') format('woff2-variations'),
		url('assets/fonts/playfair.woff2') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Jost';
	src: url('assets/fonts/jost.woff2') format('woff2-variations'),
		url('assets/fonts/jost.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Variáveis
   ========================================================================== */

:root {
	/* Paleta extraída do logo */
	--verde-900: #12351f;
	--verde-800: #1c4a2b;
	--verde-700: #235c34;
	--verde-600: #2f7442;
	--verde-100: #e8f0e9;

	--dourado: #d2a02c;
	--dourado-claro: #e3bd63;
	--dourado-fundo: #faf3e2;

	--creme: #f6f2e8;
	--areia: #fbf8f2;
	--branco: #ffffff;

	--grafite: #22241f;
	--cinza-700: #4e534b;
	--cinza-500: #767c73;
	--cinza-300: #c3c8c0;
	--cinza-100: #e9ece7;

	/* Tipografia
	   Playfair Display nos títulos editoriais (peso e contraste altos),
	   Jost no texto e nos rótulos em caixa alta (geométrica, boa em tracking). */
	--fonte-titulo: 'Playfair Display', 'Times New Roman', Georgia, serif;
	--fonte-texto: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Medidas */
	--largura: 1200px;
	--largura-texto: 720px;
	--raio: 16px;
	--raio-sm: 10px;
	--raio-lg: 24px;

	/* Sombras */
	--sombra-sm: 0 2px 8px rgba(18, 53, 31, 0.06);
	--sombra: 0 8px 30px rgba(18, 53, 31, 0.08);
	--sombra-lg: 0 20px 50px rgba(18, 53, 31, 0.12);

	/* Transições */
	--transicao: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

	/* Altura do cabeçalho, usada para âncoras */
	--altura-header: 128px;
}

/* ==========================================================================
   3. Reset e base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--altura-header);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--branco);
	color: var(--grafite);
	font-family: var(--fonte-texto);
	/* Jost tem altura-x menor que a Inter: compensa no corpo do texto. */
	font-size: 1.045rem;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--verde-700);
	text-decoration: none;
	transition: color var(--transicao);
}

a:hover {
	color: var(--dourado);
}

button {
	font-family: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	font-family: var(--fonte-titulo);
	font-weight: 700;
	line-height: 1.14;
	/* Playfair já é larga e pesada: dispensa o aperto que a Cormorant pedia. */
	letter-spacing: -0.005em;
	color: var(--verde-900);
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.35rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
h4 { font-size: 1.1rem; }

p {
	margin: 0 0 1.2em;
}

ul,
ol {
	padding-left: 1.2em;
}

:focus-visible {
	outline: 3px solid var(--dourado);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Acessibilidade: link de pular para o conteúdo */
.pular-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--verde-800);
	color: var(--branco);
	padding: 12px 20px;
	border-radius: 0 0 var(--raio-sm) 0;
}

.pular-conteudo:focus {
	left: 0;
	color: var(--branco);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0 24px;
}

.secao {
	padding: clamp(64px, 9vw, 112px) 0;
	position: relative;
}

.secao--creme { background: var(--creme); }
.secao--areia { background: var(--areia); }
.secao--verde { background: var(--verde-800); color: var(--creme); }

/* Faixa verde suave da seção de qualidade, como na referência. */
.secao--sage {
	background: linear-gradient(100deg, #e6efdd 0%, #eef3e6 48%, #f7f8f1 100%);
}

.secao--verde h2,
.secao--verde h3 { color: var(--branco); }

.secao-cabecalho {
	text-align: center;
	max-width: var(--largura-texto);
	margin: 0 auto clamp(36px, 5vw, 60px);
}

/* Títulos de seção centralizados: caixa alta, sem serifa, com tracking.
   Os títulos editoriais das seções em duas colunas (Sobre, Qualidade)
   continuam em serifada — é o contraste que dá ritmo à página. */
.secao-cabecalho h2 {
	font-family: var(--fonte-texto);
	font-size: clamp(1.1rem, 2vw, 1.45rem);
	font-weight: 500;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--verde-900);
	margin-bottom: 0.7em;
}

.secao--verde .secao-cabecalho h2 {
	color: var(--branco);
}

.secao-cabecalho p {
	color: var(--cinza-700);
	font-size: 1.02rem;
	margin: 0;
}

.rotulo {
	display: inline-block;
	font-family: var(--fonte-texto);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dourado);
	margin-bottom: 14px;
}

.secao--verde .rotulo { color: var(--dourado-claro); }

/* ==========================================================================
   5. Botões
   ========================================================================== */

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 32px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--fonte-texto);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: all var(--transicao);
	position: relative;
	overflow: hidden;
}

.botao svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform var(--transicao);
}

.botao:hover svg {
	transform: translateX(4px);
}

.botao--primario {
	background: var(--verde-800);
	color: var(--branco);
	box-shadow: var(--sombra-sm);
}

.botao--primario:hover {
	background: var(--verde-700);
	color: var(--branco);
	transform: translateY(-2px);
	box-shadow: var(--sombra);
}

.botao--dourado {
	background: var(--dourado);
	color: var(--verde-900);
}

.botao--dourado:hover {
	background: var(--dourado-claro);
	color: var(--verde-900);
	transform: translateY(-2px);
	box-shadow: var(--sombra);
}

.botao--contorno {
	background: transparent;
	color: var(--verde-800);
	border-color: var(--cinza-300);
}

.botao--contorno:hover {
	border-color: var(--verde-800);
	background: var(--verde-800);
	color: var(--branco);
	transform: translateY(-2px);
}

.botao--claro {
	background: var(--branco);
	color: var(--verde-800);
}

.botao--claro:hover {
	background: var(--creme);
	color: var(--verde-900);
	transform: translateY(-2px);
}

.botao--bloco {
	width: 100%;
}

/* ==========================================================================
   6. Barra superior
   ========================================================================== */

.topbar {
	background: var(--verde-900);
	color: var(--creme);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 42px;
	padding: 7px 24px;
	max-width: var(--largura);
	margin: 0 auto;
}

.topbar__grupo {
	display: flex;
	align-items: center;
	gap: 26px;
	min-width: 0;
}

.topbar__grupo--centro {
	flex-wrap: wrap;
	justify-content: center;
}

.topbar__separador {
	opacity: 0.35;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.topbar__conta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--creme);
	white-space: nowrap;
}

.topbar__conta:hover {
	color: var(--dourado-claro);
}

.topbar__conta svg {
	width: 17px;
	height: 17px;
}

.topbar__item svg {
	width: 15px;
	height: 15px;
	color: var(--dourado-claro);
	flex-shrink: 0;
}

.topbar__item strong {
	font-weight: 600;
	color: var(--dourado-claro);
}

/* ==========================================================================
   7. Cabeçalho
   ========================================================================== */

.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--cinza-100);
	transition: box-shadow var(--transicao), background var(--transicao);
}

.header.is-scrolled {
	box-shadow: var(--sombra-sm);
	background: rgba(255, 255, 255, 0.98);
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 88px;
	transition: min-height var(--transicao);
}

.header.is-scrolled .header__inner {
	min-height: 70px;
}

.header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.header__logo img,
.header__logo svg {
	height: 56px;
	width: auto;
	transition: height var(--transicao);
}

.header.is-scrolled .header__logo img,
.header.is-scrolled .header__logo svg {
	height: 44px;
}

.header__logo-texto {
	font-family: var(--fonte-titulo);
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--verde-800);
	letter-spacing: 0.06em;
	line-height: 1;
}

.header__logo-texto span {
	display: block;
	font-family: var(--fonte-texto);
	font-size: 0.52rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: var(--dourado);
	margin-top: 4px;
}

/* Navegação */
.nav__lista {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__lista a {
	display: block;
	padding: 10px 16px;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--cinza-700);
	border-radius: var(--raio-sm);
	position: relative;
}

.nav__lista a::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 4px;
	height: 2px;
	background: var(--dourado);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transicao);
}

.nav__lista a:hover,
.nav__lista .current-menu-item > a {
	color: var(--verde-800);
}

.nav__lista a:hover::after,
.nav__lista .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Submenu */
.nav__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--branco);
	border-radius: var(--raio-sm);
	box-shadow: var(--sombra);
	padding: 8px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--transicao);
}

.nav__lista li {
	position: relative;
}

.nav__lista li:hover > .sub-menu,
.nav__lista li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header__acoes {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.header__acoes .botao {
	padding: 13px 26px;
	font-size: 0.76rem;
}

/* Botão do menu mobile */
.menu-toggle {
	display: none;
	width: 46px;
	height: 46px;
	border: 1px solid var(--cinza-300);
	background: transparent;
	border-radius: var(--raio-sm);
	padding: 0;
	position: relative;
}

.menu-toggle span {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--verde-800);
	transform: translateX(-50%);
	transition: all var(--transicao);
}

.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-toggle span:nth-child(3) { top: 28px; }

.menu-toggle[aria-expanded='true'] span:nth-child(1) {
	top: 22px;
	transform: translateX(-50%) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded='true'] span:nth-child(3) {
	top: 22px;
	transform: translateX(-50%) rotate(-45deg);
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.hero {
	position: relative;
	background: linear-gradient(115deg, var(--areia) 0%, var(--areia) 42%, var(--verde-100) 100%);
	overflow: hidden;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1.12fr;
	align-items: center;
	gap: 48px;
	padding: clamp(48px, 6vw, 76px) 0;
	position: relative;
	z-index: 1;
}

/* A imagem do hero sangra até a borda direita da janela, como na referência.
 *
 * A conta precisa da largura útil da janela SEM a barra de rolagem — usar
 * 100vw puro faz a imagem passar da borda pela largura da barra. Como .hero
 * é um bloco que ocupa a largura do documento, "100vw - 100%" dá exatamente
 * a largura da barra, e daí sai a medida exata.
 *
 * Os seletores abaixo levam .hero na frente de propósito: sem isso perdem
 * na cascata para as regras de .hero__midia img que vêm mais adiante. */
@media (min-width: 900px) {
	.hero .hero__inner {
		align-items: stretch;
		padding-right: 0;
	}

	.hero .hero__texto-bloco {
		align-self: center;
		padding: clamp(40px, 5vw, 72px) 0;
	}

	.hero .hero__midia {
		/* --barra é a largura da barra de rolagem, medida pelo JavaScript.
		   Sem JS o valor cai em 0 e a imagem encosta um pouco antes da
		   borda — degrada bem, não quebra.
		   Não há "+24px" aqui porque o padding direito do container já
		   foi zerado acima; somar os dois estouraria a borda. */
		margin-right: calc(-1 * max(0px, (100vw - var(--barra, 0px) - var(--largura)) / 2));
		align-self: stretch;
		display: flex;
	}

	.hero .hero__midia img,
	.hero .hero__midia--vazio {
		width: 100%;
		height: 100%;
		min-height: 520px;
		object-fit: cover;
		border-radius: 0;
		box-shadow: none;
		aspect-ratio: auto;
	}
}

.hero__selo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(210, 160, 44, 0.4);
	color: var(--verde-800);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 9px 20px;
	border-radius: 999px;
	margin-bottom: 26px;
}

.hero__titulo {
	margin-bottom: 22px;
}

.hero__titulo em {
	font-style: normal;
	color: var(--dourado);
	display: block;
}

.hero__texto {
	font-size: 1.12rem;
	color: var(--cinza-700);
	max-width: 460px;
	margin-bottom: 34px;
}

.hero__valores {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 38px;
	max-width: 480px;
}

.hero__valor {
	text-align: center;
}

.hero__valor-icone {
	width: 46px;
	height: 46px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(210, 160, 44, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--verde-700);
	transition: all var(--transicao);
}

.hero__valor:hover .hero__valor-icone {
	background: var(--verde-800);
	color: var(--dourado-claro);
	transform: translateY(-4px);
}

.hero__valor-icone svg {
	width: 21px;
	height: 21px;
}

.hero__valor span {
	display: block;
	font-size: 0.63rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cinza-700);
	line-height: 1.4;
}

.hero__acoes {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.hero__midia {
	position: relative;
}

.hero__midia img {
	width: 100%;
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-lg);
}

.hero__midia--vazio {
	aspect-ratio: 4 / 3;
	border-radius: var(--raio-lg);
	background: rgba(255, 255, 255, 0.6);
	border: 2px dashed rgba(35, 92, 52, 0.25);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--verde-700);
	text-align: center;
	padding: 32px;
}

.hero__midia--vazio svg {
	width: 46px;
	height: 46px;
	opacity: 0.5;
}

.hero__midia--vazio span {
	font-size: 0.85rem;
	max-width: 260px;
}

/* ==========================================================================
   9. Categorias
   ========================================================================== */

.categorias__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
}

/* Na referência os cartões são creme sobre fundo branco, sem borda visível. */
.categoria {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 26px 14px;
	background: var(--creme);
	border: 1px solid transparent;
	border-radius: var(--raio-sm);
	text-align: center;
	transition: all var(--transicao);
	min-height: 132px;
}

.categoria:hover {
	transform: translateY(-5px);
	border-color: rgba(210, 160, 44, 0.55);
	box-shadow: var(--sombra);
}

.categoria svg {
	width: 32px;
	height: 32px;
	color: var(--verde-700);
	transition: all var(--transicao);
}

.categoria:hover svg {
	color: var(--dourado);
	transform: scale(1.12);
}

.categoria span {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cinza-700);
	line-height: 1.4;
}

.categoria--destaque {
	background: var(--verde-800);
	border-color: var(--verde-800);
}

.categoria--destaque svg,
.categoria--destaque span {
	color: var(--branco);
}

.categoria--destaque:hover {
	background: var(--verde-700);
}

.categoria--destaque:hover svg {
	color: var(--dourado-claro);
}

/* ==========================================================================
   10. Sobre
   ========================================================================== */

.sobre__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(40px, 6vw, 72px);
}

.sobre__pilares {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	margin: 30px 0 34px;
}

.sobre__pilar {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sobre__pilar svg {
	width: 26px;
	height: 26px;
	color: var(--dourado);
	flex-shrink: 0;
	margin-top: 2px;
}

.sobre__pilar strong {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--verde-800);
}

.sobre__pilar small {
	font-size: 0.74rem;
	color: var(--cinza-500);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sobre__midia {
	position: relative;
}

.sobre__midia img {
	width: 100%;
	border-radius: 50% 50% var(--raio-lg) var(--raio-lg) / 30% 30% var(--raio-lg) var(--raio-lg);
	box-shadow: var(--sombra);
}

.sobre__midia--vazio {
	aspect-ratio: 1 / 1;
	border-radius: 50% 50% var(--raio-lg) var(--raio-lg) / 30% 30% var(--raio-lg) var(--raio-lg);
	background: var(--verde-100);
	border: 2px dashed rgba(35, 92, 52, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
	color: var(--verde-700);
	font-size: 0.85rem;
}

/* ==========================================================================
   11. Produtos
   ========================================================================== */

.produtos__carrossel {
	position: relative;
}

.produtos__trilho {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px 4px 28px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.produtos__trilho::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.produtos__trilho {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr));
		overflow: visible;
	}
}

.produto {
	scroll-snap-align: start;
	background: var(--branco);
	border: 1px solid var(--cinza-100);
	border-radius: var(--raio);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all var(--transicao);
}

.produto:hover {
	transform: translateY(-8px);
	box-shadow: var(--sombra-lg);
	border-color: rgba(210, 160, 44, 0.4);
}

.produto__figura {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--creme);
	overflow: hidden;
}

.produto__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.produto:hover .produto__figura img {
	transform: scale(1.06);
}

.produto__figura--vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--verde-700);
	opacity: 0.35;
}

.produto__figura--vazio svg {
	width: 64px;
	height: 64px;
}

.produto__etiqueta {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--dourado);
	color: var(--verde-900);
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
}

.produto__corpo {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.produto__nome {
	font-family: var(--fonte-texto);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--verde-900);
	margin: 0 0 6px;
	line-height: 1.35;
}

.produto__descricao {
	font-size: 0.86rem;
	color: var(--cinza-500);
	margin: 0 0 14px;
	line-height: 1.55;
	flex-grow: 1;
}

.produto__avaliacao {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}

.produto__estrelas {
	display: inline-flex;
	gap: 2px;
	color: var(--dourado);
}

.produto__estrelas svg {
	width: 14px;
	height: 14px;
}

.produto__estrelas .vazia {
	color: var(--cinza-300);
}

.produto__avaliacao small {
	font-size: 0.76rem;
	color: var(--cinza-500);
}

.produto__preco {
	font-family: var(--fonte-titulo);
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--verde-800);
	margin-bottom: 16px;
	line-height: 1;
}

.produto__preco small {
	display: block;
	font-family: var(--fonte-texto);
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--cinza-500);
	margin-top: 5px;
}

/* Setas nas laterais, sobrepondo a faixa de cartões, como na referência. */
.carrossel__controles {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

.carrossel__botao {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--verde-800);
	background: var(--verde-800);
	color: var(--branco);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transicao);
	flex-shrink: 0;
}

.carrossel__botao:hover:not(:disabled) {
	background: var(--verde-700);
	border-color: var(--verde-700);
	transform: scale(1.08);
}

.carrossel__botao:disabled {
	opacity: 0.28;
	cursor: not-allowed;
}

@media (min-width: 1100px) {
	.produtos__carrossel {
		position: relative;
	}

	.carrossel__controles {
		position: absolute;
		top: 50%;
		left: -22px;
		right: -22px;
		margin: 0;
		transform: translateY(-50%);
		justify-content: space-between;
		pointer-events: none;
		z-index: 3;
	}

	.carrossel__botao {
		pointer-events: auto;
		box-shadow: var(--sombra);
	}
}

/* Bolinhas de paginação */
.carrossel__pontos {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.carrossel__ponto {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cinza-300);
	transition: all var(--transicao);
}

.carrossel__ponto.is-ativo {
	background: var(--verde-700);
	width: 26px;
	border-radius: 999px;
}

.carrossel__botao svg {
	width: 18px;
	height: 18px;
}

.secao__rodape {
	text-align: center;
	margin-top: 36px;
}

/* ==========================================================================
   12. Qualidade
   ========================================================================== */

.qualidade__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(40px, 6vw, 72px);
}

.qualidade__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 24px;
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
}

.qualidade__lista li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.92rem;
	color: var(--cinza-700);
}

.qualidade__lista svg {
	width: 21px;
	height: 21px;
	color: var(--verde-600);
	flex-shrink: 0;
}

.qualidade__midia img {
	width: 100%;
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra);
}

.qualidade__midia--vazio {
	aspect-ratio: 4 / 3;
	border-radius: var(--raio-lg);
	background: var(--verde-100);
	border: 2px dashed rgba(35, 92, 52, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
	color: var(--verde-700);
	font-size: 0.85rem;
}

/* ==========================================================================
   13. Reels
   ========================================================================== */

.reels__trilho {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 235px;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px 4px 28px;
	scrollbar-width: none;
}

.reels__trilho::-webkit-scrollbar {
	display: none;
}

.reel {
	scroll-snap-align: start;
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: var(--raio);
	overflow: hidden;
	background: var(--verde-900);
	border: none;
	padding: 0;
	display: block;
	width: 100%;
	cursor: pointer;
	transition: transform var(--transicao), box-shadow var(--transicao);
}

.reel:hover {
	transform: translateY(-6px) scale(1.015);
	box-shadow: var(--sombra-lg);
}

.reel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reel:hover img {
	transform: scale(1.08);
}

.reel__vazio {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--verde-700) 0%, var(--verde-900) 100%);
}

.reel__vazio::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 20%, rgba(210, 160, 44, 0.25) 0%, transparent 60%);
}

.reel__sobreposicao {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 53, 31, 0.88) 0%, rgba(18, 53, 31, 0.1) 45%, transparent 70%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16px;
	text-align: left;
}

.reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transicao);
}

.reel:hover .reel__play {
	background: var(--dourado);
	border-color: var(--dourado);
	transform: translate(-50%, -50%) scale(1.1);
}

.reel__play svg {
	width: 22px;
	height: 22px;
	color: var(--branco);
	margin-left: 3px;
}

.reel:hover .reel__play svg {
	color: var(--verde-900);
}

.reel__rede {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--branco);
}

.reel__rede svg {
	width: 15px;
	height: 15px;
}

.reel__titulo {
	color: var(--branco);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.reel__meta {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.72rem;
	display: flex;
	align-items: center;
	gap: 5px;
}

.reel__meta svg {
	width: 12px;
	height: 12px;
}

/* Lightbox */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(9, 26, 15, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transicao), visibility var(--transicao);
}

.lightbox.is-aberto {
	opacity: 1;
	visibility: visible;
}

.lightbox__conteudo {
	position: relative;
	width: min(420px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	border-radius: var(--raio);
	background: var(--branco);
	transform: scale(0.94);
	transition: transform var(--transicao);
}

.lightbox.is-aberto .lightbox__conteudo {
	transform: scale(1);
}

.lightbox__fechar {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--branco);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transicao);
}

.lightbox__fechar:hover {
	background: var(--dourado);
	border-color: var(--dourado);
	color: var(--verde-900);
}

.lightbox__fechar svg {
	width: 18px;
	height: 18px;
}

.lightbox__aviso {
	padding: 40px 28px;
	text-align: center;
	color: var(--cinza-700);
}

.lightbox__aviso svg {
	width: 44px;
	height: 44px;
	color: var(--dourado);
	margin: 0 auto 16px;
}

/* ==========================================================================
   14. Guia dos suplementos
   ========================================================================== */

.guia__grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px;
}

.guia-item {
	background: var(--branco);
	border: 1px solid var(--cinza-100);
	border-radius: var(--raio);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all var(--transicao);
	height: 100%;
}

.guia-item:hover {
	transform: translateY(-6px);
	box-shadow: var(--sombra);
	border-color: rgba(210, 160, 44, 0.45);
}

.guia-item__figura {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--creme);
	position: relative;
}

.guia-item__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.guia-item:hover .guia-item__figura img {
	transform: scale(1.07);
}

.guia-item__figura--vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(140deg, var(--verde-100), var(--dourado-fundo));
	color: var(--verde-700);
	opacity: 0.5;
}

.guia-item__figura--vazio svg {
	width: 40px;
	height: 40px;
}

.guia-item__corpo {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.guia-item__titulo {
	font-family: var(--fonte-texto);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--verde-900);
	margin: 0 0 8px;
	line-height: 1.35;
}

.guia-item__resumo {
	font-size: 0.84rem;
	color: var(--cinza-500);
	line-height: 1.55;
	margin: 0 0 14px;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.guia-item__link {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dourado);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.guia-item__link svg {
	width: 14px;
	height: 14px;
	transition: transform var(--transicao);
}

.guia-item:hover .guia-item__link svg {
	transform: translateX(4px);
}

/* ==========================================================================
   15. Blog
   ========================================================================== */

.blog__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--branco);
	border-radius: var(--raio);
	overflow: hidden;
	border: 1px solid var(--cinza-100);
	transition: all var(--transicao);
	height: 100%;
}

.post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--sombra);
}

.post-card__figura {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--creme);
}

.post-card__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-card:hover .post-card__figura img {
	transform: scale(1.06);
}

.post-card__figura--vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(140deg, var(--verde-100), var(--dourado-fundo));
	color: var(--verde-700);
	opacity: 0.45;
	height: 100%;
}

.post-card__figura--vazio svg {
	width: 42px;
	height: 42px;
}

.post-card__corpo {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.post-card__meta {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dourado);
	font-weight: 600;
	margin-bottom: 10px;
}

.post-card__titulo {
	font-family: var(--fonte-titulo);
	font-size: 1.35rem;
	margin: 0 0 10px;
	line-height: 1.25;
}

.post-card__titulo a {
	color: var(--verde-900);
}

.post-card__titulo a:hover {
	color: var(--verde-600);
}

.post-card__resumo {
	font-size: 0.9rem;
	color: var(--cinza-500);
	line-height: 1.6;
	margin: 0 0 16px;
	flex-grow: 1;
}

/* ==========================================================================
   16. Depoimentos
   ========================================================================== */

.depoimentos__trilho {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(290px, 1fr);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px 4px 28px;
	scrollbar-width: none;
}

.depoimentos__trilho::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.depoimentos__trilho {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
	}
}

.depoimento {
	scroll-snap-align: start;
	background: var(--branco);
	border: 1px solid var(--cinza-100);
	border-radius: var(--raio);
	padding: 28px;
	display: flex;
	flex-direction: column;
	transition: all var(--transicao);
}

.depoimento:hover {
	box-shadow: var(--sombra);
	transform: translateY(-4px);
}

.depoimento__estrelas {
	display: inline-flex;
	gap: 3px;
	color: var(--dourado);
	margin-bottom: 16px;
}

.depoimento__estrelas svg {
	width: 16px;
	height: 16px;
}

.depoimento__texto {
	font-size: 0.95rem;
	color: var(--cinza-700);
	line-height: 1.7;
	font-style: italic;
	margin: 0 0 22px;
	flex-grow: 1;
}

.depoimento__autor {
	display: flex;
	align-items: center;
	gap: 12px;
}

.depoimento__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--verde-100);
	color: var(--verde-800);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.95rem;
	flex-shrink: 0;
	overflow: hidden;
}

.depoimento__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.depoimento__autor strong {
	display: block;
	font-size: 0.92rem;
	color: var(--verde-900);
	font-weight: 600;
}

.depoimento__autor small {
	font-size: 0.8rem;
	color: var(--cinza-500);
}

/* ==========================================================================
   17. Garantias
   ========================================================================== */

.garantias {
	background: var(--verde-800);
	color: var(--creme);
	padding: 34px 0;
}

.garantias__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 26px;
}

.garantia {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: center;
}

.garantia svg {
	width: 32px;
	height: 32px;
	color: var(--dourado-claro);
	flex-shrink: 0;
}

.garantia strong {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--branco);
	line-height: 1.3;
}

.garantia small {
	font-size: 0.8rem;
	color: rgba(246, 242, 232, 0.72);
}

/* ==========================================================================
   18. Newsletter
   ========================================================================== */

.newsletter {
	background: linear-gradient(140deg, var(--creme) 0%, var(--dourado-fundo) 100%);
}

.newsletter__inner {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
}

.newsletter__form {
	display: flex;
	gap: 10px;
	margin-top: 26px;
}

.newsletter__form input[type='email'] {
	flex-grow: 1;
	padding: 15px 22px;
	border: 1px solid var(--cinza-300);
	border-radius: 999px;
	font-family: var(--fonte-texto);
	font-size: 0.95rem;
	background: var(--branco);
	color: var(--grafite);
	transition: border-color var(--transicao);
}

.newsletter__form input[type='email']:focus {
	outline: none;
	border-color: var(--dourado);
}

.newsletter__nota {
	font-size: 0.78rem;
	color: var(--cinza-500);
	margin-top: 14px;
}

/* ==========================================================================
   19. Rodapé
   ========================================================================== */

.footer {
	background: var(--verde-900);
	color: rgba(246, 242, 232, 0.78);
	padding-top: 64px;
	font-size: 0.9rem;
}

.footer__grade {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
	gap: 40px;
	padding-bottom: 48px;
}

.footer__logo {
	margin-bottom: 18px;
}

.footer__logo img {
	height: 62px;
	width: auto;
}

.footer__logo-texto {
	font-family: var(--fonte-titulo);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--branco);
	letter-spacing: 0.06em;
	line-height: 1;
}

.footer__logo-texto span {
	display: block;
	font-family: var(--fonte-texto);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: var(--dourado);
	margin-top: 5px;
}

.footer__sobre {
	max-width: 300px;
	line-height: 1.7;
	margin-bottom: 22px;
}

.footer h4 {
	color: var(--branco);
	font-family: var(--fonte-texto);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

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

.footer li {
	margin-bottom: 11px;
}

.footer a {
	color: rgba(246, 242, 232, 0.78);
}

.footer a:hover {
	color: var(--dourado-claro);
}

.footer__redes {
	display: flex;
	gap: 10px;
}

.footer__redes a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(246, 242, 232, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transicao);
}

.footer__redes a:hover {
	background: var(--dourado);
	border-color: var(--dourado);
	color: var(--verde-900);
	transform: translateY(-3px);
}

.footer__redes svg {
	width: 17px;
	height: 17px;
}

.footer__base {
	border-top: 1px solid rgba(246, 242, 232, 0.14);
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 0.8rem;
}

.footer__aviso {
	background: rgba(0, 0, 0, 0.22);
	padding: 20px 0;
	font-size: 0.76rem;
	line-height: 1.6;
	color: rgba(246, 242, 232, 0.6);
}

/* ==========================================================================
   20. Conteúdo interno (post, página, arquivo)
   ========================================================================== */

.pagina-topo {
	background: linear-gradient(150deg, var(--areia), var(--verde-100));
	padding: clamp(48px, 7vw, 84px) 0;
	text-align: center;
}

.pagina-topo p {
	max-width: var(--largura-texto);
	margin: 0 auto;
	color: var(--cinza-700);
}

.conteudo {
	max-width: var(--largura-texto);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 80px) 24px;
	font-size: 1.05rem;
	line-height: 1.8;
}

.conteudo h2 {
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	margin-top: 1.8em;
}

.conteudo h3 {
	margin-top: 1.6em;
}

.conteudo img {
	border-radius: var(--raio);
	margin: 1.8em 0;
}

.conteudo ul,
.conteudo ol {
	margin-bottom: 1.4em;
}

.conteudo li {
	margin-bottom: 0.5em;
}

.conteudo blockquote {
	margin: 1.8em 0;
	padding: 22px 28px;
	background: var(--creme);
	border-left: 4px solid var(--dourado);
	border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
	font-style: italic;
	color: var(--cinza-700);
}

.conteudo blockquote p:last-child {
	margin-bottom: 0;
}

.conteudo table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-size: 0.95rem;
}

.conteudo th,
.conteudo td {
	padding: 12px 16px;
	border: 1px solid var(--cinza-100);
	text-align: left;
}

.conteudo th {
	background: var(--creme);
	font-weight: 600;
	color: var(--verde-900);
}

.post-capa {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 24px;
	margin-top: -48px;
	position: relative;
	z-index: 2;
}

.post-capa img {
	width: 100%;
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-lg);
}

.aviso-legal {
	max-width: var(--largura-texto);
	margin: 0 auto 60px;
	padding: 22px 26px;
	background: var(--dourado-fundo);
	border: 1px solid rgba(210, 160, 44, 0.35);
	border-radius: var(--raio-sm);
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--cinza-700);
}

.aviso-legal strong {
	color: var(--verde-800);
}

.paginacao {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 40px 0 80px;
}

.paginacao .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: var(--raio-sm);
	border: 1px solid var(--cinza-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.92rem;
	color: var(--cinza-700);
	transition: all var(--transicao);
}

.paginacao .page-numbers:hover,
.paginacao .page-numbers.current {
	background: var(--verde-800);
	border-color: var(--verde-800);
	color: var(--branco);
}

/* ==========================================================================
   21. Animações
   ========================================================================== */

.revelar {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.revelar.is-visivel {
	opacity: 1;
	transform: none;
}

.revelar--atraso-1 { transition-delay: 0.08s; }
.revelar--atraso-2 { transition-delay: 0.16s; }
.revelar--atraso-3 { transition-delay: 0.24s; }
.revelar--atraso-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}

	.revelar {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   22. Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
	.footer__grade {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
}

@media (max-width: 900px) {
	:root {
		--altura-header: 76px;
	}

	.menu-toggle {
		display: block;
	}

	.nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 86vw);
		background: var(--branco);
		box-shadow: -12px 0 40px rgba(18, 53, 31, 0.16);
		padding: 88px 24px 32px;
		transform: translateX(100%);
		transition: transform var(--transicao);
		overflow-y: auto;
		z-index: 105;
	}

	.nav.is-aberto {
		transform: translateX(0);
	}

	.nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.nav__lista a {
		padding: 14px 12px;
		font-size: 1rem;
		border-bottom: 1px solid var(--cinza-100);
	}

	.nav__lista a::after {
		display: none;
	}

	.nav__lista .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 0 0 0 16px;
	}

	.nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba(18, 53, 31, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: all var(--transicao);
		z-index: 104;
	}

	.nav-overlay.is-ativo {
		opacity: 1;
		visibility: visible;
	}

	.header__acoes .botao--comprar {
		display: none;
	}

	.hero__inner,
	.sobre__inner,
	.qualidade__inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.hero__midia {
		order: -1;
	}

	.hero__texto {
		max-width: none;
	}

	.topbar__inner {
		gap: 20px;
		font-size: 0.74rem;
	}

	.topbar__item:nth-child(3) {
		display: none;
	}
}

@media (max-width: 640px) {
	.container {
		padding: 0 18px;
	}

	.hero__valores {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.hero__acoes {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__acoes .botao {
		width: 100%;
	}

	.qualidade__lista {
		grid-template-columns: 1fr;
	}

	.sobre__pilares {
		gap: 20px;
	}

	.footer__grade {
		grid-template-columns: 1fr;
		gap: 32px;
	}

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

	.newsletter__form {
		flex-direction: column;
	}

	.newsletter__form .botao {
		width: 100%;
	}

	.topbar__item:nth-child(2) {
		display: none;
	}

	.reels__trilho {
		grid-auto-columns: 200px;
	}

	.guia__grade {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px;
	}
}

/* ========================================================================== 
   24. PEMAH Premium 2.0 — acabamento editorial
   ========================================================================== */

html,
body { overflow-x: clip; }

.header__logo img,
.footer__logo img { object-fit: contain; }
.header__logo img { width: 124px; height: 58px; }
.footer__logo img { width: 176px; height: 92px; object-position: left center; }
.hero { min-height: min(860px, 100svh); display: grid; align-items: center; background: #f8f4eb; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: radial-gradient(circle at 20% 20%, rgba(210,160,44,.12), transparent 34%), radial-gradient(circle at 80% 80%, rgba(35,92,52,.09), transparent 30%); }
.hero__titulo { max-width: 11ch; font-size: clamp(3rem, 6vw, 6.8rem); line-height: .94; letter-spacing: -.055em; text-wrap: balance; }
.hero__texto { max-width: 540px; font-size: clamp(1.05rem, 1.35vw, 1.25rem); }
.hero__selo { letter-spacing: .16em; font-size: .72rem; }
.hero__midia img { border-radius: 32px 0 0 32px; box-shadow: 0 30px 90px rgba(18,53,31,.15); }
.hero__assinatura { margin-top: 25px; color: var(--verde-700); font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero__assinatura span { color: var(--dourado); margin: 0 8px; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.botao { border-radius: 999px; }
.botao--claro { background: var(--branco); color: var(--verde-900); }
.botao--dourado { background: var(--dourado); color: var(--verde-900); }
.sobre__midia img,
.qualidade__midia img { border-radius: 26px; aspect-ratio: 16/11; object-fit: cover; box-shadow: 0 24px 70px rgba(18,53,31,.12); }
.sobre__inner, .qualidade__inner { gap: clamp(44px, 7vw, 110px); }
.secao h2, .numeros h2, .cta-premium h2, .comunidade h2 { letter-spacing: -.04em; text-wrap: balance; }
.numeros { padding: clamp(68px, 9vw, 130px) 0; background: var(--verde-900); color: var(--branco); }
.numeros .rotulo { color: var(--dourado-claro); }
.numeros h2 { max-width: 760px; color: var(--branco); }
.numeros__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 48px; background: rgba(255,255,255,.15); }
.numeros__item { display: grid; gap: 8px; padding: 26px; background: var(--verde-900); }
.numeros__item strong { color: var(--dourado-claro); font-family: 'Playfair Display', serif; font-size: clamp(2.7rem, 5vw, 5.5rem); font-weight: 500; line-height: 1; }
.numeros__item span { color: rgba(255,255,255,.74); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; }
.cta-premium { padding: 40px 0 clamp(80px, 10vw, 150px); }
.cta-premium__inner { display: grid; grid-template-columns: 1.35fr .65fr; gap: 50px; align-items: end; padding: clamp(40px, 7vw, 92px); border-radius: 28px; background: var(--verde-800); color: white; overflow: hidden; position: relative; }
.cta-premium__inner::after { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -160px; border: 1px solid rgba(227,189,99,.28); border-radius: 50%; }
.cta-premium h2 { color: white; max-width: 650px; }
.cta-premium p { max-width: 650px; color: rgba(255,255,255,.75); }
.cta-premium .rotulo { color: var(--dourado-claro); }
.cta-premium__acoes { display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: relative; z-index: 1; }
.comunidade { padding: clamp(70px, 9vw, 130px) 0; background: #ede6d7; }
.comunidade__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.comunidade__links { display: grid; }
.comunidade__links a { display: flex; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid rgba(18,53,31,.18); color: var(--verde-900); font-size: clamp(1.25rem, 2vw, 2rem); font-family: 'Playfair Display', serif; }
.comunidade__links a:hover { color: var(--dourado); padding-left: 8px; }
.produto-inline { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin: 48px 0; padding: 24px; border: 1px solid rgba(18,53,31,.12); border-radius: 20px; background: var(--areia); }
.produto-inline img { width: 180px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.produto-inline span { color: var(--dourado); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; }
.produto-inline h3 { margin: 5px 0 8px; }
@media (min-width: 901px) {
	.header { background: transparent; border-bottom-color: transparent; }
	.header.is-scrolled { background: rgba(248,244,235,.94); backdrop-filter: blur(18px); border-bottom-color: rgba(18,53,31,.08); }
	.hero__midia { transform: translateZ(0); animation: pemah-flutuar 7s ease-in-out infinite; }
}
@keyframes pemah-flutuar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 900px) {
	.hero { min-height: auto; padding-top: 120px; }
	.hero__titulo { max-width: 13ch; font-size: clamp(3rem, 13vw, 5rem); }
	.hero__midia img { border-radius: 22px; }
	.numeros__grade { grid-template-columns: repeat(2, 1fr); }
	.cta-premium__inner, .comunidade__inner { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
	.numeros__grade { grid-template-columns: 1fr; }
	.hero__assinatura { letter-spacing: .07em; }
	.produto-inline { grid-template-columns: 1fr; }
	.produto-inline img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hero__midia { animation: none !important; } }
.busca-toggle { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--verde-900); font-size: 1.7rem; cursor: pointer; }
.busca-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: rgba(18,53,31,.96); color: white; }
.busca-overlay[hidden] { display: none; }
.busca-overlay__inner { width: min(780px, 100%); }
.busca-overlay h2 { color: white; font-size: clamp(2.6rem, 6vw, 5rem); }
.busca-overlay form { display: flex; gap: 10px; }
.busca-overlay input[type="search"] { width: 100%; padding: 18px 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: white; font-size: 1.1rem; }
.busca-overlay__fechar { position: absolute; top: 24px; right: 28px; border: 0; background: transparent; color: white; font-size: 2.3rem; cursor: pointer; }
.cookie-banner { position: fixed; z-index: 9000; left: 24px; right: 24px; bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 30px; max-width: 1160px; margin: auto; padding: 22px 24px; border-radius: 18px; background: white; box-shadow: 0 20px 70px rgba(18,53,31,.25); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 4px 0 0; font-size: .88rem; }
.cookie-banner__acoes { display: flex; gap: 10px; flex-shrink: 0; }
.guia-hero { padding: 190px 0 90px; background: var(--creme); }
.guia-hero h1 { max-width: 850px; font-size: clamp(3.2rem, 7vw, 7rem); line-height: .94; letter-spacing: -.055em; }
.guia-hero p { max-width: 620px; font-size: 1.15rem; }
.guia-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.guia-filtros a { padding: 10px 18px; border: 1px solid rgba(18,53,31,.18); border-radius: 999px; color: var(--verde-900); }
.guia-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 700px) { .cookie-banner { align-items: stretch; flex-direction: column; } .cookie-banner__acoes { flex-direction: column; } .guia-grade { grid-template-columns: 1fr; } }

/* ========================================================================== 
   25. PEMAH Editorial 3.0 — direção aprovada
   ========================================================================== */
:root { --v3-cream:#f7f3ea; --v3-cream-2:#f1eadf; --v3-green:#073d2a; --v3-gold:#b98a2e; --v3-line:rgba(7,61,42,.14); }
body { background: var(--v3-cream); color: #153528; font-size: 15px; }
.revelar,
.revelar.is-visivel { opacity: 1 !important; transform: none !important; transition: none !important; }
.container { width: min(1160px, calc(100% - 48px)); }
.topbar { min-height: 31px; background: var(--v3-green); }
.topbar__inner { min-height: 31px; font-size: 10px; }
.header { position: sticky; top: 0; height: 78px; background: rgba(250,248,242,.97) !important; border-bottom: 1px solid var(--v3-line) !important; backdrop-filter: blur(12px); }
.header__inner { min-height: 78px; }
.header__logo img { width: 152px; height: 62px; }
.nav__lista { gap: 30px; }
.nav__lista a { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.header__acoes { gap: 12px; }
.header__acoes .botao { min-height: 39px; padding: 0 22px; font-size: 10px; text-transform: uppercase; }
.rotulo { color: var(--v3-gold); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1,h2,h3,.produto-v3 h3 { font-family: 'Playfair Display', Georgia, serif; color: #0c3324; }
.hero-v3 { position: relative; min-height: 520px; overflow: hidden; border-bottom: 1px solid var(--v3-line); background: var(--v3-cream); }
.hero-v3__imagem { position: absolute; inset: 0 0 0 35%; background: url('assets/images/hero-editorial-v3.webp') center/cover no-repeat; }
.hero-v3__imagem::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg,var(--v3-cream) 0%,rgba(247,243,234,.94) 10%,rgba(247,243,234,.28) 35%,transparent 60%); }
.hero-v3__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: 520px; }
.hero-v3__copy { width: 43%; padding: 58px 0 48px; }
.hero-v3 h1 { max-width: 560px; margin: 14px 0 18px; font-size: clamp(52px,5vw,76px); line-height: .93; letter-spacing: -.055em; }
.hero-v3 p { max-width: 380px; margin: 0 0 28px; font-size: 15px; line-height: 1.55; }
.hero-v3__acoes { display:flex; gap:13px; }
.hero-v3__acoes .botao { min-width: 162px; min-height: 44px; padding: 0 22px; border-radius: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.hero-v3__valores { display:flex; gap:18px; align-items:center; margin-top:30px; color:#254738; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.hero-v3__valores i { color:var(--v3-gold); font-style:normal; }
.sobre-v3 { position:relative; min-height:390px; overflow:hidden; border-bottom:1px solid var(--v3-line); background:var(--v3-cream); }
.sobre-v3__imagem { position:absolute; inset:0 43% 0 0; background:url('assets/images/family-editorial-v3.webp') left center/cover no-repeat; }
.sobre-v3__imagem::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 62%,var(--v3-cream) 100%); }
.sobre-v3__inner { display:flex; justify-content:flex-end; align-items:center; min-height:390px; }
.sobre-v3__copy { position:relative; z-index:1; width:43%; padding:45px 0; }
.sobre-v3 h2 { max-width:520px; margin:12px 0 18px; font-size:clamp(38px,4vw,55px); line-height:.98; letter-spacing:-.045em; }
.sobre-v3 p { max-width:500px; margin:0 0 10px; font-size:13px; line-height:1.55; }
.sobre-v3__assinatura { display:block; margin-top:22px; font-family:'Playfair Display',serif; font-size:19px; font-style:italic; }
.produtos-v3 { padding:54px 0 62px; border-bottom:1px solid var(--v3-line); background:#faf8f3; }
.v3-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }
.v3-heading h2 { margin:5px 0 0; font-size:42px; line-height:1; }
.v3-heading>a { color:var(--v3-green); font-size:10px; font-weight:700; text-transform:uppercase; }
.produtos-v3__grade { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.produto-v3__imagem { display:grid; place-items:center; min-height:245px; padding:12px; border:1px solid var(--v3-line); border-radius:7px; background:linear-gradient(145deg,#faf9f4,#eee8dd); }
.produto-v3__imagem img { width:100%; height:220px; object-fit:contain; transition:transform .35s ease; }
.produto-v3:hover .produto-v3__imagem img { transform:translateY(-4px) scale(1.02); }
.produto-v3 h3 { margin:13px 0 4px; font-size:18px; line-height:1.1; }
.produto-v3 p { min-height:32px; margin:0 0 5px; font-size:11px; line-height:1.4; color:#52665c; }
.produto-v3__estrelas { color:var(--v3-gold); font-size:11px; letter-spacing:1px; }
.produto-v3__link { display:inline-block; margin-top:8px; color:var(--v3-green); font-size:10px; font-weight:800; text-transform:uppercase; }
.qualidade-v3 { position:relative; min-height:350px; overflow:hidden; border-bottom:1px solid var(--v3-line); background:var(--v3-cream); }
.qualidade-v3__imagem { position:absolute; inset:0 0 0 34%; background:url('assets/images/quality-editorial-v3.webp') center/cover no-repeat; }
.qualidade-v3__imagem::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--v3-cream) 0%,rgba(247,243,234,.94) 13%,rgba(247,243,234,.25) 40%,transparent 64%); }
.qualidade-v3__inner { display:flex; align-items:center; min-height:350px; }
.qualidade-v3__copy { position:relative; z-index:1; width:43%; padding:42px 0; }
.qualidade-v3 h2 { max-width:380px; margin:10px 0 14px; font-size:43px; line-height:.98; letter-spacing:-.045em; }
.qualidade-v3 p { max-width:420px; font-size:12px; line-height:1.55; }
.qualidade-v3__pilares { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:28px; }
.qualidade-v3__pilares span { position:relative; padding-top:30px; font-size:9px; font-weight:700; line-height:1.25; text-align:center; }
.qualidade-v3__pilares span::before { content:'◇'; position:absolute; top:0; left:50%; transform:translateX(-50%); color:var(--v3-green); font-size:22px; }
.secao { padding:44px 0 !important; border-bottom:1px solid var(--v3-line); }
.secao--creme,.secao--areia { background:#faf8f3; }
.secao-cabecalho { margin-bottom:22px; }
.secao-cabecalho h2 { margin:5px 0 0; font-size:32px; line-height:1; }
.secao-cabecalho p { display:none; }
.reels__trilho { gap:14px; }
.reel { flex:0 0 180px; aspect-ratio:1.22/1; border-radius:6px; }
.guia__grade { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.guia-item { min-width:0; border:0; border-radius:6px; background:#e8e3d9; overflow:hidden; }
.guia-item__figura { aspect-ratio:1.65/1; }
.guia-item__corpo { margin-top:-62px; padding:20px 16px 14px; position:relative; color:white; background:linear-gradient(transparent,rgba(4,40,27,.82)); }
.guia-item__titulo { color:white; font-size:16px; }
.guia-item__resumo,.guia-item__link { display:none; }
.blog__grade { gap:18px; }
.post-card { border:1px solid var(--v3-line); border-radius:7px; box-shadow:none; overflow:hidden; }
.post-card__figura { aspect-ratio:2.1/1; }
.post-card__corpo { padding:14px 16px; }
.post-card__titulo { font-size:20px; line-height:1.08; }
.post-card__resumo,.post-card .guia-item__link { display:none; }
.secao__rodape { margin-top:18px; text-align:right; }
.secao__rodape .botao { min-height:auto; padding:0; border:0; background:none; color:var(--v3-green); font-size:10px; text-transform:uppercase; }
.newsletter { padding:0 !important; background:var(--v3-green); color:white; }
.newsletter .container { width:100%; max-width:none; }
.newsletter__inner { max-width:none; min-height:280px; padding:46px max(48px,calc((100vw - 1160px)/2)); border-radius:0; background:var(--v3-green); }
.newsletter h2 { max-width:560px; color:white; font-size:38px; }
.newsletter p { max-width:500px; color:rgba(255,255,255,.75); }
.garantias { border-bottom:1px solid var(--v3-line); background:#f6f1e8; }
.garantias__grade { min-height:75px; }
.garantia strong { font-size:10px; text-transform:uppercase; }
.garantia small { font-size:9px; }
.footer { padding-top:36px; }
.footer__grade { padding-bottom:28px; }
@media (max-width:900px) {
	.container { width:min(100% - 32px,1160px); }
	.topbar__grupo--centro,.topbar__grupo:last-child { display:none; }
	.header { height:68px; }.header__inner{min-height:68px}.header__logo img{width:122px;height:52px}
	.hero-v3 { min-height:auto; padding-bottom:0; }.hero-v3__imagem{position:relative; inset:auto; height:290px; background-position:center; order:2}.hero-v3__imagem::before{background:linear-gradient(0deg,var(--v3-cream),transparent 28%)}
	.hero-v3__inner{min-height:auto}.hero-v3__copy{width:100%; padding:46px 0 32px}.hero-v3 h1{font-size:52px}.hero-v3 p{max-width:330px}.hero-v3{display:flex;flex-direction:column}.hero-v3__inner{order:1}
	.sobre-v3{display:flex;flex-direction:column}.sobre-v3__imagem{position:relative;inset:auto;height:300px;background-position:left center}.sobre-v3__imagem::after{background:linear-gradient(0deg,var(--v3-cream),transparent 30%)}.sobre-v3__inner{min-height:auto}.sobre-v3__copy{width:100%;padding:35px 0 45px}.sobre-v3 h2{font-size:40px}
	.produtos-v3__grade{grid-template-columns:repeat(2,1fr)}
	.qualidade-v3{display:flex;flex-direction:column}.qualidade-v3__imagem{position:relative;inset:auto;height:280px;order:2;background-position:center}.qualidade-v3__imagem::before{background:linear-gradient(0deg,var(--v3-cream),transparent 30%)}.qualidade-v3__inner{min-height:auto;order:1}.qualidade-v3__copy{width:100%;padding:42px 0}.qualidade-v3 h2{font-size:40px}.qualidade-v3__pilares{max-width:520px}
	.guia__grade{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.guia-item{flex:0 0 220px;scroll-snap-align:start}
}
@media (max-width:540px) {
	.hero-v3__acoes{align-items:stretch}.hero-v3__acoes .botao{min-width:0;flex:1;padding:0 10px}.hero-v3__valores{gap:10px;font-size:8px}
	.produtos-v3__grade{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.produto-v3{flex:0 0 76vw;scroll-snap-align:start}.produto-v3__imagem{min-height:230px}
	.v3-heading h2{font-size:36px}.v3-heading>a{display:none}.qualidade-v3__pilares{grid-template-columns:repeat(2,1fr)}
}