/*
 * FHG Nutrition — acabamento do site.
 *
 * Cores, fontes, textos e espaçamentos ficam no Elementor (Kit global e painel
 * de cada bloco). Aqui só o que o Elementor gratuito e o WooCommerce não
 * entregam prontos: cabeçalho fixo, gaveta do celular, faixa de vantagens,
 * cartão de produto, página de produto (dose, composição, advertências),
 * carrinho, checkout, formulário, WhatsApp e cookies.
 */

:root {
	--fhg-verde: var(--e-global-color-primary, #606F36);
	--fhg-claro: var(--e-global-color-secondary, #AFB755);
	--fhg-grafite: var(--e-global-color-text, #3C3C3B);
	--fhg-limao: var(--e-global-color-accent, #C0CC50);
	--fhg-profundo: var(--e-global-color-fhgprof, #2E3719);
	--fhg-off: var(--e-global-color-fhgoff, #FAFAF7);
	--fhg-areia: var(--e-global-color-fhgarcl, #F4F5F0);
	--fhg-num: var(--e-global-color-fhgnum, #E9EBDD);
	--fhg-suave: var(--e-global-color-fhgsuav, #71716B);
	--fhg-linha: rgba(60, 60, 59, 0.14);
	--fhg-conteudo: 1240px;
	--fhg-barra: 0px;
	--fhg-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

html { scroll-padding-top: 110px; }
html, body.fhg-site { overflow-x: clip; }
body.fhg-site { background: var(--fhg-off); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(192, 204, 80, 0.4); }
.fhg-site a { text-underline-offset: 3px; }

/* Marcador de dado a confirmar: impossível publicar sem ver. */
.fhg-confirmar {
	font-family: ui-monospace, Consolas, monospace !important;
	font-size: 0.82em;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	background: #FFE45C;
	color: #3C3C3B !important;
	padding: 1px 5px;
	white-space: nowrap;
}

/* ---------- Cabeçalho fixo: a barra superior rola, a principal fica ---------- */
body.fhg-site #masthead {
	position: sticky;
	top: calc(-1 * var(--fhg-barra));
	z-index: 90;
}
body.fhg-site.admin-bar #masthead { top: calc(32px - var(--fhg-barra)); }
@media (max-width: 782px) { body.fhg-site.admin-bar #masthead { top: calc(46px - var(--fhg-barra)); } }
@media (max-width: 767px) {
	body.fhg-site #masthead { top: 0; }
	body.fhg-site.admin-bar #masthead { top: 0; }
}
.fhg-cabecalho { transition: box-shadow 0.3s ease; }
.fhg-rolou .fhg-cabecalho { box-shadow: 0 10px 30px -18px rgba(60, 60, 59, 0.35); }
.fhg-barra-topo .elementor-icon-list-text { white-space: nowrap; }
.fhg-logo img { display: block; width: 100%; height: auto; }

/* Menu do Header Footer Elementor */
.fhg-menu .hfe-nav-menu > li > a { white-space: nowrap; }
.fhg-menu .sub-menu { box-shadow: 0 18px 40px -24px rgba(60, 60, 59, 0.45); }
.fhg-menu .hfe-nav-menu__toggle { cursor: pointer; }
@media (max-width: 1024px) {
	.fhg-menu { margin-left: auto; }
	.fhg-menu .hfe-nav-menu__layout-horizontal,
	.fhg-menu nav.hfe-dropdown { border-top: 1px solid var(--fhg-linha); }
	.fhg-menu nav.hfe-dropdown .menu-item a { font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0; }
}

/* ---------- Régua e centro ----------
 * Caixa estreita com texto centrado precisa de se centrar TAMBÉM na seção.
 * Sem isto ela encosta à esquerda e o título fica centrado no lugar errado —
 * era a causa de quase todo o desalinhamento da página. */
.fhg-centro {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---------- Topo de página interna ----------
 * Abre como landing: título no eixo, o símbolo da marca por trás e o fio das
 * três cores fechando a faixa. */
.fhg-topo-pagina { position: relative; overflow: hidden; isolation: isolate; }
.fhg-topo-pagina::before {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	/* O Elementor já usa o ::before do container como véu de fundo e manda um
	 * inset:0 — sem zerar o «left» o símbolo ia parar à esquerda. */
	inset: 50% -6% auto auto; transform: translateY(-50%);
	width: min(440px, 42vw); aspect-ratio: 1 / 1;
	background: url('../midia/simbolo-fhg.svg') center / contain no-repeat;
	opacity: 0.08;
}
.fhg-topo-pagina::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg,
		var(--fhg-verde) 0 34%, var(--fhg-claro) 34% 67%, var(--fhg-limao) 67% 100%);
}
@media (max-width: 767px) {
	.fhg-topo-pagina::before { inset: 50% -18% auto auto; width: 300px; opacity: 0.07; }
}

/* ---------- Fotos ---------- */
.fhg-foto img { display: block; width: 100%; }
.fhg-foto--moldura { position: relative; isolation: isolate; }
.fhg-foto--moldura::after {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	border: 1px solid var(--fhg-limao);
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 767px) {
	.fhg-foto--moldura::after { inset: 14px -10px -14px 10px; }
}
.fhg-heroi__foto { position: relative; }
.fhg-heroi__foto .fhg-foto { z-index: 1; }
.fhg-marca-dagua { opacity: 0.16; pointer-events: none; }
.fhg-marca-dagua img { width: 100%; height: auto; }

/* Frase com fio dourado à esquerda */
.fhg-frase--fio { border-left: 1px solid var(--fhg-limao); padding-left: 22px; }

/* ---------- Listas ---------- */
.fhg-pontos .elementor-icon-list-icon { align-self: flex-start; margin-top: 0.62em; }
.fhg-pontos .elementor-icon-list-icon i { font-size: 6px !important; }
.fhg-pontos--linhas .elementor-icon-list-item { padding-bottom: 13px; border-bottom: 1px solid var(--fhg-linha); }
.fhg-pontos--linhas .elementor-icon-list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fhg-pontos--escuro .elementor-icon-list-item { border-color: rgba(250, 250, 247, 0.16); }
@media (min-width: 768px) {
	.fhg-pontos--2col .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
	.fhg-pontos--2col .elementor-icon-list-item { align-items: flex-start !important; margin: 0 !important; padding: 11px 0 !important; border-bottom: 1px solid rgba(250, 250, 247, 0.16) !important; }
}
.fhg-canais .elementor-icon-list-icon { align-self: flex-start; margin-top: 0.28em; min-width: 18px; }
.fhg-canais .elementor-icon-list-text { word-break: break-word; }

/* ---------- Cartões de área ---------- */
.fhg-area { transition: transform 0.35s ease, box-shadow 0.35s ease; }
@media (hover: hover) {
	.fhg-area:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(60, 60, 59, 0.5); }
}

/* ---------- Botões ---------- */
.fhg-btn .elementor-button { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.fhg-btn--link .elementor-button { border-bottom: 1px solid currentColor !important; border-radius: 0; }
.fhg-btn--link .elementor-button-icon { transition: transform 0.25s ease; }
.fhg-btn--link .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.fhg-btn--link .elementor-button:hover .fa-whatsapp,
.fhg-btn--link .elementor-button:hover .fa-instagram,
.fhg-btn--link .elementor-button:hover .fa-map-marker-alt { transform: none; }
.elementor-button { white-space: normal; }

/* ---------- Faixa de provas (os quatro números sob o herói) ----------
 * Cada número num painel próprio, com o fio da marca em cima e o símbolo
 * atrás; a faixa inteira ganha o símbolo grande à direita. */
/* Sem símbolo atrás aqui: cortado pela borda da faixa ele lia como mancha.
 * A personalidade vem dos painéis e do fio da marca no hover. */
.fhg-faixa-prova { position: relative; }
.fhg-prova {
	position: relative; overflow: hidden; border-radius: 14px;
	background: rgba(250, 250, 247, 0.045);
	border: 1px solid rgba(250, 250, 247, 0.1);
	transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fhg-prova::before {
	content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px;
	transform: scaleX(0); transform-origin: left;
	background: linear-gradient(90deg, var(--fhg-claro), var(--fhg-limao));
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* O número grande; a legenda em versalete, como nos rótulos da marca. */
.fhg-prova .elementor-widget-heading .elementor-heading-title { line-height: 1; }
.fhg-prova p:not(.elementor-heading-title),
.fhg-prova .elementor-widget-text-editor p {
	font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.5;
}
@media (hover: hover) {
	.fhg-prova:hover {
		background: rgba(250, 250, 247, 0.08);
		border-color: rgba(192, 204, 80, 0.45);
		transform: translateY(-4px);
	}
	.fhg-prova:hover::before { transform: scaleX(1); }
}
/* ---------- Faixa de fatos ---------- */
.fhg-fato + .fhg-fato { border-left: 1px solid rgba(250, 250, 247, 0.18); }
@media (max-width: 767px) {
	.fhg-fato { border-left: 0 !important; padding-left: 0 !important; }
	.fhg-fato + .fhg-fato { border-top: 1px solid rgba(250, 250, 247, 0.16) !important; padding-top: 22px !important; }
}

/* ---------- Itens numerados ---------- */
.fhg-item { height: 100%; }

/* ---------- FAQ (acordeão aninhado) ---------- */
.fhg-faq .e-n-accordion-item { border-bottom: 1px solid var(--fhg-linha); }
.fhg-faq .e-n-accordion-item:first-child { border-top: 1px solid var(--fhg-linha); }
.fhg-faq .e-n-accordion-item-title { cursor: pointer; }
.fhg-faq .e-n-accordion-item-title-icon { color: var(--fhg-limao); }
.fhg-faq .e-n-accordion-item > .e-con { max-width: 760px; }

/* ---------- Links sobre fundo verde ---------- */
.fhg-escuro a:not(.elementor-button):not(.elementor-icon) { color: inherit; }
.fhg-link-claro a { color: var(--fhg-off) !important; text-decoration: none; border-bottom: 1px solid rgba(192, 204, 80, 0.6); }
.fhg-link-claro a:hover { color: var(--fhg-limao) !important; }
.fhg-quebra, .fhg-quebra a { word-break: break-all; }

/* ---------- Rodapé ---------- */
.fhg-rodape .elementor-icon-list-item a { transition: color 0.2s ease; }
.fhg-linha-final a { color: inherit; text-decoration: underline; text-decoration-color: rgba(192, 204, 80, 0.6); }
.fhg-linha-final a:hover { color: var(--fhg-limao); }
.fhg-credito { margin: 0; }
.fhg-credito a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; opacity: 0.8; transition: opacity 0.2s ease; }
.fhg-credito a:hover { opacity: 1; }
.fhg-credito img { display: inline-block; width: 96px; height: auto; }

/* ---------- Texto longo (política) ---------- */
.fhg-texto-longo h2 {
	font-family: Cinzel, serif;
	font-size: 22px;
	font-weight: 500;
	color: var(--fhg-verde);
	margin: 2.2em 0 0.6em;
	line-height: 1.3;
}
.fhg-texto-longo ul { padding-left: 1.2em; }
.fhg-texto-longo li { margin-bottom: 0.4em; }
.fhg-texto-longo li::marker { color: var(--fhg-limao); }

/* ---------- Formulário ---------- */
.fhg-form {
	--fhgf-campo: transparent;
	--fhgf-linha: rgba(60, 60, 59, 0.28);
	--fhgf-texto: var(--fhg-grafite);
	--fhgf-rot: #62655A;
	--fhgf-foco: var(--fhg-verde);
	--fhgf-botao: var(--fhg-verde);
	--fhgf-botao-txt: #FFFFFF;
	--fhgf-erro: #A33A2B;
	color: var(--fhgf-texto);
	font-family: 'Inter', sans-serif;
}
.fhg-form--escuro {
	--fhgf-linha: rgba(250, 250, 247, 0.32);
	--fhgf-texto: #FAFAF7;
	--fhgf-rot: rgba(250, 250, 247, 0.72);
	--fhgf-foco: var(--fhg-limao);
	--fhgf-botao: var(--fhg-limao);
	--fhgf-botao-txt: var(--fhg-profundo);
	--fhgf-erro: #F2B8A8;
}
.fhg-form__corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.fhg-form__campo--largo { grid-column: 1 / -1; }
@media (max-width: 600px) { .fhg-form__corpo { grid-template-columns: 1fr; gap: 22px; } }
.fhg-form__campo { position: relative; margin: 0; }
.fhg-form .fhg-form__campo input,
.fhg-form .fhg-form__campo select,
.fhg-form .fhg-form__campo textarea {
	display: block;
	width: 100%;
	background: var(--fhgf-campo);
	border: 0;
	border-bottom: 1px solid var(--fhgf-linha);
	border-radius: 0;
	color: var(--fhgf-texto);
	font: inherit;
	font-size: 16px;
	padding: 22px 0 9px;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
}
.fhg-form .fhg-form__campo textarea { resize: vertical; min-height: 104px; line-height: 1.55; }
.fhg-form .fhg-form__campo select { cursor: pointer; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 60%, calc(100% - 7px) 60%; background-size: 5px 5px; background-repeat: no-repeat; }
.fhg-form .fhg-form__campo select option { color: #3C3C3B; background: #fff; }
.fhg-form .fhg-form__campo select.is-vazio { color: var(--fhgf-rot); }
.fhg-form__rot {
	position: absolute;
	left: 0;
	top: 22px;
	font-size: 15px;
	color: var(--fhgf-rot);
	pointer-events: none;
	transform-origin: left top;
	transition: transform 0.2s ease, color 0.2s ease;
}
.fhg-form__campo input:focus + .fhg-form__rot,
.fhg-form__campo input:not(:placeholder-shown) + .fhg-form__rot,
.fhg-form__campo textarea:focus + .fhg-form__rot,
.fhg-form__campo textarea:not(:placeholder-shown) + .fhg-form__rot,
.fhg-form__campo--sel .fhg-form__rot {
	transform: translateY(-20px) scale(0.78);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.fhg-form .fhg-form__campo input:focus,
.fhg-form .fhg-form__campo select:focus,
.fhg-form .fhg-form__campo textarea:focus { border-bottom-color: var(--fhgf-foco); }
.fhg-form__campo input:focus + .fhg-form__rot,
.fhg-form__campo textarea:focus + .fhg-form__rot { color: var(--fhgf-foco); }
.fhg-form__campo.is-erro input,
.fhg-form__campo.is-erro select { border-bottom-color: var(--fhgf-erro); }
.fhg-form__campo.is-erro .fhg-form__rot { color: var(--fhgf-erro); }
.fhg-form__campo.is-erro, .fhg-form__consent.is-erro { animation: fhg-tremer 0.35s ease; }
@keyframes fhg-tremer { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.fhg-form__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; cursor: pointer; color: var(--fhgf-rot); }
.fhg-form__consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--fhgf-foco); cursor: pointer; }
.fhg-form__consent a { color: inherit; text-decoration: underline; }
.fhg-form__consent.is-erro span { color: var(--fhgf-erro); }
.fhg-form__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fhg-form__erro { margin: 0; color: var(--fhgf-erro); font-size: 14px; }
.fhg-form__base { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.fhg-form .fhg-form__enviar {
	background: var(--fhgf-botao);
	color: var(--fhgf-botao-txt);
	border: 1px solid var(--fhgf-botao);
	border-radius: 0;
	padding: 17px 34px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.fhg-form .fhg-form__enviar:hover,
.fhg-form .fhg-form__enviar:focus { background: transparent; color: var(--fhgf-botao); }
.fhg-form.is-enviando .fhg-form__enviar { opacity: 0.7; pointer-events: none; }
.fhg-form__sigilo { margin: 0; flex: 1 1 240px; font-size: 12.5px; line-height: 1.5; color: var(--fhgf-rot); }
@media (max-width: 600px) { .fhg-form .fhg-form__enviar { width: 100%; } }
.fhg-form__ok { padding: 12px 0; outline: none; }
.fhg-form__ok-t { font-family: Cinzel, serif; font-size: 26px; margin: 0 0 10px; color: var(--fhgf-foco); }
.fhg-form__ok-x { margin: 0 0 22px; }
.fhg-form__wa { display: inline-block; padding: 14px 26px; border: 1px solid var(--fhgf-foco); color: var(--fhgf-texto) !important; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.fhg-form__wa:hover { background: var(--fhgf-foco); color: var(--fhgf-botao-txt) !important; }

/* ---------- Menu lateral (celular e tablet) ---------- */
.fhg-abre-menu .elementor-icon { display: flex; }
.fhg-cabecalho__nav { margin-left: auto; }
@media (max-width: 1024px) {
	.fhg-cabecalho__nav { flex: 0 0 auto !important; width: auto !important; }
}
body.fhg-site .fhg-gaveta {
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(400px, 88vw) !important;
	max-width: none;
	z-index: 1001;
	overflow-y: auto;
	overflow-x: hidden;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	overscroll-behavior: contain;
	transform: translateX(105%);
	visibility: hidden;
	transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.38s;
	box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.5);
}
.fhg-menu-aberto body.fhg-site .fhg-gaveta { transform: none; visibility: visible; transition-delay: 0s; }
.fhg-gaveta-veu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(35, 38, 28, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.fhg-menu-aberto .fhg-gaveta-veu { opacity: 1; visibility: visible; transition-delay: 0s; }
.fhg-menu-aberto, .fhg-menu-aberto body { overflow: hidden; }
.fhg-menu-aberto body.fhg-site #masthead { z-index: 1000; }
@media (min-width: 1025px) {
	body.fhg-site .fhg-gaveta, .fhg-gaveta-veu { display: none !important; }
}
/* No editor do Elementor a gaveta aparece no fluxo, para editar. */
body.elementor-editor-active.single-elementor-hf .fhg-gaveta {
	position: relative !important;
	transform: none;
	visibility: visible;
	width: 400px !important;
	margin: 20px 0 20px auto;
	display: flex !important;
}
.fhg-gaveta__fechar .elementor-icon { display: flex; }
.fhg-menu--gaveta, .fhg-menu--gaveta .elementor-widget-container, .fhg-menu--gaveta nav, .fhg-menu--gaveta .hfe-nav-menu { width: 100% !important; max-width: 100%; }
.fhg-menu--gaveta .hfe-nav-menu { display: block !important; text-align: left; }
.fhg-menu--gaveta .hfe-has-submenu-container, .fhg-menu--gaveta .menu-item > a { justify-content: space-between !important; width: 100%; }
.fhg-menu--gaveta .hfe-nav-menu__layout-vertical,
.fhg-menu--gaveta nav { display: block !important; }
.fhg-menu--gaveta .menu-item { border-bottom: 1px solid rgba(250, 250, 247, 0.12); }
.fhg-menu--gaveta .menu-item:last-child { border-bottom: 0; }
.fhg-menu--gaveta .sub-menu {
	position: static !important;
	display: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 0 10px !important;
	width: auto !important;
}
.fhg-menu--gaveta .fhg-sub-aberto > .sub-menu,
.fhg-menu--gaveta .menu-item-has-children:focus-within > .sub-menu { display: block !important; }
.fhg-menu--gaveta .sub-menu .menu-item { border: 0; }
.fhg-menu--gaveta .sub-menu a { position: relative; padding-left: 18px !important; }
.fhg-menu--gaveta .sub-menu a::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--fhg-limao); }
.fhg-menu--gaveta .hfe-menu-toggle { transition: transform 0.25s ease; }
.fhg-menu--gaveta .fhg-sub-aberto > a .hfe-menu-toggle { transform: rotate(180deg); }
.fhg-menu--gaveta .hfe-pointer__none a { justify-content: space-between; }

/* ---------- WhatsApp flutuante ---------- */
.fhg-wa {
	position: fixed; right: 22px; bottom: 22px; z-index: 92;
	display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
	border-radius: 50%; background: var(--fhg-verde); color: #fff;
	box-shadow: 0 14px 30px -14px rgba(46, 55, 25, 0.7);
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.fhg-wa:hover { background: var(--fhg-profundo); color: #fff; transform: translateY(-2px); }
/* O ícone branco é forçado no path: o tema/Elementor pode injetar uma cor de
 * link que o `currentColor` do SVG herdaria, deixando o ícone escuro. */
.fhg-wa svg { display: block; }
.fhg-wa svg path { fill: #fff !important; }
/* Sobe quando a barra de compra do celular estiver à vista. */
.fhg-com-barra .fhg-wa { bottom: 92px; }
@media (max-width: 600px) { .fhg-wa { right: 16px; bottom: 16px; width: 52px; height: 52px; } }
@media print { .fhg-wa { display: none; } }

/* ---------- Aviso de cookies ---------- */
.fhg-cookies {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 96;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 620px;
	padding: 16px 18px 16px 22px;
	background: #fff;
	border-left: 2px solid var(--fhg-limao);
	box-shadow: 0 18px 40px -20px rgba(60, 60, 59, 0.45);
	font-family: 'Inter', sans-serif;
}
.fhg-cookies[hidden] { display: none; }
.fhg-cookies p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fhg-grafite); }
.fhg-cookies a { color: var(--fhg-verde); }
.fhg-cookies button { flex: none; background: var(--fhg-verde); color: #fff; border: 0; border-radius: 0; padding: 12px 20px; font: 600 11.5px/1 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.fhg-cookies button:hover { background: var(--fhg-profundo); }
@media (max-width: 767px) {
	.fhg-cookies { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
	.fhg-site *, .fhg-site *::before, .fhg-site *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.elementor-invisible { visibility: visible !important; }
}

/* No editor, nada escondido. */
.fhg-no-editor .fhg-cookies { display: none !important; }

/* Galeria do escritório (home): a foto principal ocupa a linha inteira; as vagas ficam lado a lado. */
@media (min-width: 768px) {
  .fhg-galeria__principal { grid-column: 1 / -1; }
}
.fhg-vaga-foto .elementor-heading-title { padding: 0 12px; }

/* Os três valores da marca, marcados com o símbolo da FHG. */
.fhg-lista-marca .elementor-icon-list-item { position: relative; padding-left: 28px !important; }
.fhg-lista-marca .elementor-icon-list-item::before {
	content: ''; position: absolute; left: 0; top: 0.35em; width: 14px; height: 14px;
	background: url('../midia/simbolo-fhg.svg') center / contain no-repeat;
}
.fhg-lista-marca .elementor-icon-list-text { line-height: 1.55; }

/* Rodapé: o símbolo grande, bem apagado, atrás das colunas. */
/* O rodapé ficava exatamente da cor da faixa de chamada logo acima e as duas
 * liam como um bloco só: aqui ele desce um tom e ganha um fio no topo. */
.fhg-rodape {
	position: relative; overflow: hidden; isolation: isolate;
	background-color: #1F2710 !important;
	border-top: 1px solid rgba(192, 204, 80, 0.22);
}
.fhg-rodape::after {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	inset: auto -60px -90px auto; width: 380px; height: 380px;
	background: url('../midia/simbolo-fhg.svg') center / contain no-repeat;
	opacity: 0.09;
}
@media (max-width: 767px) {
	.fhg-rodape::after { width: 240px; height: 240px; inset: auto -50px -60px auto; }
}

/* ---------- Cartões do «mercado de suplementos» ----------
 * Fundo em degradê da marca, símbolo por trás e acordeão: o cartão sob o
 * cursor cresce para o lado e os vizinhos cedem a largura. */
.fhg-grade-problemas {
	display: flex !important;
	align-items: stretch;
}
.fhg-problema {
	position: relative; overflow: hidden; isolation: isolate;
	/* O Elementor devolve flex-basis:auto aos containers; sem zerar a base, o
	 * flex-grow não tem espaço livre para repartir e o acordeão não mexe. */
	flex: 1 1 0 !important; flex-basis: 0 !important; min-width: 0;
	min-height: 420px; justify-content: flex-start;
	border-color: transparent !important;
	background-image: linear-gradient(155deg, #3F4A23 0%, var(--fhg-verde) 52%, #798A45 100%) !important;
	transition: flex-grow 0.55s cubic-bezier(0.22, 0.61, 0.24, 1),
		box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Cada cartão puxa o degradê para um canto diferente da paleta. */
.fhg-problema:nth-child(2) {
	background-image: linear-gradient(155deg, var(--fhg-verde) 0%, #7A8B44 55%, var(--fhg-claro) 100%) !important;
}
.fhg-problema:nth-child(3) {
	background-image: linear-gradient(155deg, #2E3719 0%, #4E5B2B 55%, var(--fhg-verde) 100%) !important;
}
/* A foto entra no hover, correndo da esquerda para a direita junto com o
 * cartão. O véu escuro por cima mantém o texto legível venha a foto que vier. */
.fhg-problema::after {
	/* -2px: o pseudo cobre o padding box e sobrava um fio do degradê na borda. */
	content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(150deg, rgba(31, 39, 16, 0.82) 0%, rgba(46, 55, 25, 0.72) 55%, rgba(96, 111, 54, 0.68) 100%),
		var(--fhg-foto, none);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	/* clip-path em vez de scaleX: a camada é recortada, não esticada, então
	 * acompanha o cartão enquanto ele cresce no acordeão (com scaleX sobrava
	 * uma faixa do degradê na borda direita). */
	opacity: 0; clip-path: inset(0 100% 0 0);
	transition: clip-path 0.6s cubic-bezier(0.22, 0.61, 0.24, 1), opacity 0.4s ease;
}
.fhg-problema:nth-child(1) { --fhg-foto: url('../midia/pre-treino-maca-verde-cena.webp'); }
.fhg-problema:nth-child(2) { --fhg-foto: url('../midia/creatina-monohidratada-cena.webp'); }
.fhg-problema:nth-child(3) { --fhg-foto: url('../midia/tirosina-teanina-cena.webp'); }
/* Símbolo da marca por trás, encostado no canto. */
.fhg-problema::before {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	inset: auto -46px -46px auto; width: 210px; height: 210px;
	background: url('../midia/simbolo-fhg.svg') center / contain no-repeat;
	opacity: 0.12;
	transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.24, 1);
}
/* Texto claro sobre o degradê. */
.fhg-problema .elementor-heading-title,
.fhg-problema .elementor-widget-text-editor,
.fhg-problema p { color: #F3F5E9 !important; }
.fhg-problema .elementor-widget-heading:first-child .elementor-heading-title {
	font-size: 34px !important; letter-spacing: -1px; line-height: 1;
	color: var(--fhg-limao) !important; transition: color 0.3s ease;
}
.fhg-problema .elementor-widget-text-editor p { color: rgba(243, 245, 233, 0.82) !important; }
.fhg-problema > .elementor-element:first-child { margin-bottom: 4px; }

@media (hover: hover) and (min-width: 901px) {
	.fhg-problema:hover {
		flex-grow: 1.75 !important;
		box-shadow: 0 32px 60px -34px rgba(20, 26, 8, 0.65);
	}
	.fhg-problema:hover::after { clip-path: inset(0 0 0 0); opacity: 1; }
	.fhg-problema:hover::before { opacity: 0.2; transform: translate(-14px, -10px) rotate(-8deg); }
}
@media (max-width: 900px) {
	/* Volta a ser grade: em coluna, o «flex: 1 1 0» do acordeão passa a valer
	 * para a ALTURA e os cartões colapsam em tiras. */
	.fhg-grade-problemas { display: grid !important; grid-template-columns: 1fr !important; }
	.fhg-problema {
		flex: 0 0 auto !important; flex-basis: auto !important;
		min-height: 0; width: auto;
	}
}

/* ---------- Herói no celular: a foto vira o fundo ----------
 * Em telas pequenas o herói era um bloco de texto e a foto só aparecia depois
 * de rolar. Agora a cena preenche a seção, o texto vem por cima e a primeira
 * tela mostra produto, promessa e botão juntos. */
@media (max-width: 767px) {
	.fhg-heroi {
		position: relative; overflow: hidden; isolation: isolate;
		background-image:
			linear-gradient(180deg, rgba(24, 30, 10, 0.86) 0%, rgba(31, 39, 16, 0.62) 42%, rgba(24, 30, 10, 0.88) 100%),
			url('../midia/whey-protein-chocolate-cena.webp') !important;
		background-size: cover, cover !important;
		background-position: center, center 30% !important;
		background-repeat: no-repeat, no-repeat !important;
	}
	.fhg-heroi .elementor-heading-title,
	.fhg-heroi .elementor-widget-text-editor,
	.fhg-heroi .elementor-widget-text-editor p { color: #F3F5E9 !important; }
	/* O rótulo do topo em limão: sobre a foto, o verde escuro sumia. */
	.fhg-heroi .fhgkick, .fhg-heroi p.fhgkick,
	.fhg-heroi .elementor-widget-heading:first-child .elementor-heading-title { color: var(--fhg-limao) !important; }
	.fhg-heroi .elementor-widget-text-editor p { text-shadow: 0 1px 14px rgba(12, 16, 4, 0.5); }
	.fhg-heroi .fhg-provas .elementor-heading-title { text-shadow: 0 1px 14px rgba(12, 16, 4, 0.5); }
	.fhg-heroi .fhg-provas { border-top-color: rgba(250, 250, 247, 0.22) !important; }
	.fhg-heroi .fhg-provas .elementor-heading-title { color: var(--fhg-limao) !important; }
	.fhg-heroi .fhg-provas .elementor-widget-text-editor p { color: rgba(243, 245, 233, 0.78) !important; }
	/* A foto sai do fluxo: ela já é o fundo. */
	.fhg-heroi .fhg-heroi-foto { display: none !important; }
	/* Botões: cheio em limão, contorno em claro. */
	.fhg-heroi .fhg-btn--cheio .elementor-button {
		background-color: var(--fhg-limao) !important; color: var(--fhg-profundo) !important;
	}
	.fhg-heroi .fhg-btn--contorno .elementor-button {
		border-color: rgba(243, 245, 233, 0.6) !important; color: #F3F5E9 !important;
		background-color: transparent !important;
	}
}

/* No celular os objetivos ficam em duas colunas e são cinco: o último ficava
 * sozinho, com metade da largura. Ele passa a ocupar a linha inteira. */
@media (max-width: 767px) {
	.fhg-objetivo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* No celular não há hover: a foto do cartão fica sempre à vista, encostada no
 * canto de baixo à direita e desvanecendo para o degradê. */
@media (max-width: 900px) {
	.fhg-problema::after {
		opacity: 1; clip-path: none;
		/* Véu sobre a foto: o texto do cartão passa por cima dela. */
		background-image:
			linear-gradient(to top left, rgba(24, 30, 10, 0.42), rgba(24, 30, 10, 0.16) 58%, transparent 82%),
			var(--fhg-foto, none);
		/* A foto preenche: quem faz o recorte é a máscara, e assim não fica a
		 * aresta reta de onde a imagem começava. */
		background-size: cover, cover;
		background-position: center, right bottom;
		background-repeat: no-repeat, no-repeat;
		/* Desvanece na diagonal, na direção do canto de cima à esquerda: sem
		 * isso a máscara horizontal deixava um retângulo visível no topo. */
		-webkit-mask-image: radial-gradient(120% 100% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.22) 58%, transparent 78%);
		mask-image: radial-gradient(120% 100% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.22) 58%, transparent 78%);
	}
	/* O símbolo sai de cena para não disputar com a foto. */
	.fhg-problema::before { opacity: 0.06; }
	.fhg-problema { padding-bottom: 96px !important; }
	.fhg-problema .elementor-widget-text-editor p { text-shadow: 0 1px 10px rgba(12, 16, 4, 0.55); }
	.fhg-problema .elementor-heading-title { text-shadow: 0 1px 10px rgba(12, 16, 4, 0.5); }
}

/* ---------- Ícones da marca ---------- */
.fhg-icone-bloco { display: inline-flex; align-items: center; justify-content: center; color: var(--fhg-verde); }
.fhg-icone-bloco--circulo,
.fhg-icone-bloco--quadrado {
	width: 46px; height: 46px; background: rgba(96, 111, 54, 0.1);
}
.fhg-icone-bloco--circulo { border-radius: 999px; }
.fhg-icone-bloco--quadrado { border-radius: 13px; }
.fhg-icone-svg { display: block; }
/* Nos cartões escuros o ícone acompanha o limão da marca. */
.fhg-escuro .fhg-icone-bloco, .fhg-problema .fhg-icone-bloco { color: var(--fhg-limao); }
.fhg-problema .fhg-icone-bloco--quadrado { background: rgba(243, 245, 233, 0.12); }
/* No cartão do problema, o ícone e o número ficam na mesma linha. */
.fhg-problema > .elementor-widget-fhg-icone { margin-bottom: 14px; }