/* Blocos públicos da Primal+. O tema pode trocar as variáveis --pm-*. */
:root {
	--pm-primary: #F2B705;
	--pm-primary-2: #C98E00;
	--pm-on-primary: #111111;
	--pm-dark: #0D0D0D;
	--pm-gray: #6B7280;
	--pm-card: #FFFFFF;
	--pm-border: #E7E2D6;
	--pm-radius: 16px;
	--pm-shadow: 0 8px 24px rgba(17, 17, 17, .08);
}

.pm-beneficios { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-cols-1 { grid-template-columns: 1fr; }
.pm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .pm-beneficios, .pm-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pm-beneficios, .pm-cols-2, .pm-cols-4 { grid-template-columns: 1fr; } }

.pm-beneficio {
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
	padding: 24px; background: var(--pm-card); border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius); box-shadow: var(--pm-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pm-beneficio::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--pm-primary-2), var(--pm-primary));
}
.pm-beneficio:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17, 17, 17, .12); }
.pm-beneficio-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.pm-beneficio-pct {
	display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 14px; border-radius: 12px;
	background: var(--pm-dark); color: var(--pm-primary); font-weight: 800; font-size: 26px; line-height: 1;
}
.pm-beneficio-pct small { font-size: 11px; letter-spacing: .12em; color: #fff; }
.pm-beneficio-cat {
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis;
	color: var(--pm-gray); border: 1px solid var(--pm-border); padding: 6px 12px; border-radius: 999px;
}
.pm-beneficio .pm-beneficio-parceiro { margin: 0; font-size: 1.25rem; }
.pm-beneficio .pm-beneficio-desc { margin: 0; font-size: 1rem; }
.pm-beneficio .pm-beneficio-regra,
.pm-beneficio .pm-beneficio-end { margin: 4px 0 0; font-size: .85rem; color: var(--pm-gray); }

.pm-numeros { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.pm-numero strong { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.1; font-weight: 800; color: var(--pm-primary); }
.pm-numero span { display: block; margin-top: 6px; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }

.pm-categorias { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pm-categorias li {
	margin: 0; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .95rem;
	background: color-mix(in srgb, var(--pm-primary) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pm-primary) 45%, transparent);
}
.pm-vazio { color: var(--pm-gray); }

/* =====================================================================
 * Vitrine, logos, banner e planos  (class-pm-vitrine.php)
 * Troque as cores pelas variáveis --pm-* no topo deste arquivo
 * (o tema Primal Child faz isso sozinho pelo Personalizar).
 * ================================================================== */

:root {
	--pm-mel: linear-gradient(180deg, #FFE27A 0%, var(--pm-primary) 42%, var(--pm-primary-2) 100%);
	--pm-hex: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

/* ---- Logos em hexágono, rolando sem parar (pausa no hover) ---- */
.pm-logos {
	display: flex;
	overflow: hidden;
	padding: 10px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pm-logos-faixa { display: flex; gap: 18px; padding-right: 18px; flex: none; animation: pm-marquee var(--pm-vel, 40s) linear infinite; }
.pm-logos:hover .pm-logos-faixa { animation-play-state: paused; }
@keyframes pm-marquee { to { transform: translateX(-100%); } }
.pm-logo { display: block; flex: none; text-decoration: none; }
.pm-logo-hex {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 112px;
	aspect-ratio: .866;
	clip-path: var(--pm-hex);
	background: var(--pm-mel);
	transition: filter .3s ease;
}
/* Miolo branco dentro da borda de mel. */
.pm-logo-hex::before { content: ""; position: absolute; inset: 3px; clip-path: var(--pm-hex); background: #fff; }
.pm-logo-hex > * { position: relative; z-index: 1; }
.pm-logo-hex img { width: 80%; height: 62%; object-fit: contain; filter: grayscale(1) opacity(.75); transition: filter .3s ease; }
.pm-logo:hover .pm-logo-hex img { filter: none; }
.pm-logo:hover .pm-logo-hex { filter: drop-shadow(0 6px 14px rgba(180, 110, 0, .35)); }
.pm-logo-iniciais { font-weight: 800; font-size: 26px; color: var(--pm-dark); line-height: 1; }
.pm-logo-hex small { max-width: 80%; font-size: 10px; line-height: 1.1; text-align: center; color: var(--pm-gray); }

/* ---- Trilho com setas ---- */
.pm-trilho { position: relative; min-width: 0; }
.pm-trilho-faixa {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 2px 12px;
}
.pm-trilho-faixa::-webkit-scrollbar { display: none; }
.pm-trilho-seta {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 50px;
	border: 0;
	padding: 0;
	cursor: pointer;
	clip-path: var(--pm-hex);
	background: var(--pm-mel);
	color: var(--pm-dark);
	transform: translateY(-50%);
	transition: opacity .2s ease;
}
.pm-ant { left: -14px; }
.pm-prx { right: -14px; }
.pm-no-inicio .pm-ant, .pm-no-fim .pm-prx, .pm-sem-rolagem .pm-trilho-seta { opacity: 0; pointer-events: none; }

/* ---- Vitrine: banner vertical + ofertas ---- */
.pm-vitrines { display: grid; gap: 28px; }
.pm-vitrine { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pm-vitrine-banner { border-radius: var(--pm-radius); overflow: hidden; min-height: 340px; background: var(--pm-mel); }
.pm-vitrine-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-vitrine-banner-padrao {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	padding: 24px;
	text-align: center;
	color: var(--pm-dark);
}
.pm-vitrine-banner-padrao strong { font-size: 1.3rem; }
.pm-vitrine-banner-padrao small { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; opacity: .75; }
.pm-vitrine-logo { max-width: 70%; max-height: 90px; object-fit: contain; }
.pm-vitrine-banner-padrao .pm-logo-iniciais {
	display: flex; align-items: center; justify-content: center;
	width: 90px; aspect-ratio: .866; clip-path: var(--pm-hex); background: #fff;
}

.pm-oferta {
	/* Cresce para ocupar a linha toda quando a empresa tem poucas ofertas. */
	flex: 1 0 240px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius);
	background: var(--pm-card);
	color: var(--pm-dark);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
a.pm-oferta:hover { border-color: var(--pm-primary); box-shadow: var(--pm-shadow); }
.pm-oferta-foto { display: flex; align-items: center; justify-content: center; height: 170px; border-radius: 12px; overflow: hidden; background: #fff; }
.pm-oferta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.pm-oferta:hover .pm-oferta-foto img { transform: translateY(-4px); }
.pm-oferta-sem { font-size: 34px; font-weight: 800; color: var(--pm-primary-2); }
.pm-oferta-titulo { font-size: .98rem; line-height: 1.35; min-height: 2.7em; }
.pm-oferta-selos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.pm-oferta-selos b { padding: 5px 10px; border-radius: 6px; background: var(--pm-dark); color: var(--pm-primary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.pm-oferta-selos b.pm-selo-2 { background: var(--pm-mel); color: var(--pm-dark); }
.pm-oferta-de { color: var(--pm-gray); font-size: .85rem; }
.pm-oferta-por { font-size: 1.45rem; line-height: 1.1; }
.pm-oferta-empresa { margin-top: auto; font-size: .82rem; font-weight: 700; color: var(--pm-gray); }
@media (max-width: 760px) {
	.pm-vitrine { grid-template-columns: 1fr; }
	.pm-vitrine-banner { min-height: 180px; }
	.pm-oferta { flex-basis: 70%; }
	.pm-trilho-seta { display: none; }
}

/* ---- Banner largo ---- */
.pm-banner { position: relative; border-radius: calc(var(--pm-radius) + 8px); overflow: hidden; box-shadow: 0 18px 44px rgba(150, 95, 0, .16); }
.pm-banner-slide { display: none; position: relative; min-height: 240px; color: var(--pm-dark); text-decoration: none; background: var(--pm-mel); }
.pm-banner-slide.is-ativo { display: grid; grid-template-columns: 1fr 1fr; animation: pm-entra .6s ease; }
@keyframes pm-entra { from { opacity: 0; } to { opacity: 1; } }
.pm-banner-arte { grid-column: 1 / -1; width: 100%; height: auto; display: block; }
.pm-banner-texto { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 4vw, 48px); }
.pm-banner-texto strong { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.8rem); line-height: 1.05; font-weight: 800; }
.pm-banner-texto strong em { font-style: normal; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.pm-banner-texto > span { font-size: 1.05rem; max-width: 34ch; }
.pm-banner-botao { align-self: flex-start; padding: 12px 22px; border-radius: 999px; background: var(--pm-dark); color: #fff; font-weight: 700; font-size: .95rem; }
.pm-banner-foto { position: relative; overflow: hidden; }
/* Recorte curvo entre o texto e a foto, como uma gota de mel. */
.pm-banner-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: ellipse(92% 120% at 100% 50%); }
.pm-banner-slide::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 45%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent);
	pointer-events: none;
}
.pm-banner-pontos { position: absolute; left: 50%; bottom: 12px; z-index: 3; display: flex; gap: 8px; transform: translateX(-50%); }
.pm-banner-pontos button { width: 12px; height: 14px; padding: 0; border: 0; cursor: pointer; clip-path: var(--pm-hex); background: rgba(255, 255, 255, .6); }
.pm-banner-pontos button.is-ativo { background: var(--pm-dark); }
@media (max-width: 760px) {
	.pm-banner-slide.is-ativo { grid-template-columns: 1fr; }
	.pm-banner-foto { min-height: 180px; }
	.pm-banner-foto img { clip-path: ellipse(120% 95% at 50% 100%); }
}

/* ---- Planos para empresas ---- */
.pm-planos { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.pm-plano {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 34px 28px 28px;
	border: 1px solid var(--pm-border);
	border-radius: calc(var(--pm-radius) + 6px);
	background: #fff;
	box-shadow: var(--pm-shadow);
}
.pm-plano.is-destaque { border: 2px solid var(--pm-primary); box-shadow: 0 24px 60px rgba(150, 95, 0, .2); transform: translateY(-8px); }
.pm-plano-etiqueta {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--pm-mel);
	color: var(--pm-dark);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.pm-plano .pm-plano-nome { margin: 0; font-size: 1.5rem; }
.pm-plano .pm-plano-desc { margin: 0; color: var(--pm-gray); }
.pm-plano-preco { display: flex; align-items: baseline; gap: 4px; padding: 10px 0 14px; border-bottom: 1px solid var(--pm-border); }
.pm-plano-preco small { font-size: 1rem; font-weight: 700; }
.pm-plano-preco strong { font-size: 2.6rem; line-height: 1; font-weight: 800; }
.pm-plano-preco span { color: var(--pm-gray); }
.pm-plano-preco .pm-sob { font-size: 1.6rem; }
.pm-plano-itens { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; flex: 1; }
.pm-plano-itens li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.pm-plano-itens svg { flex: none; margin-top: 2px; color: var(--pm-primary-2); }
.pm-plano-botao {
	display: block;
	margin-top: 8px;
	padding: 15px;
	border-radius: 999px;
	background: var(--pm-dark);
	color: #fff;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
}
.pm-plano.is-destaque .pm-plano-botao { background: var(--pm-mel); color: var(--pm-dark); }

@media (prefers-reduced-motion: reduce) {
	.pm-logos-faixa { animation: none; }
	.pm-logos { overflow-x: auto; }
	.pm-plano.is-destaque { transform: none; }
}

/* Número único em destaque ([primal_numeros mostrar="beneficios"]). */
.pm-numeros-unico { grid-template-columns: 1fr; }
.pm-numeros-unico .pm-numero { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pm-numeros-unico .pm-numero strong { font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); }
.pm-numeros-unico .pm-numero span { margin: 0; font-size: 1.05rem; letter-spacing: .12em; }

/* =====================================================================
 * Logos de 5 em 5, bem maiores ([primal_logos]) — substitui a faixa rolando.
 * Quantos por vez: --pm-logos-por (5 no computador, 3 no tablet, 2 no celular).
 * ================================================================== */
.pm-logos.pm-logos-paginas {
	--pm-logos-por: 5;
	--pm-logos-gap: 22px;
	position: relative;
	display: block;
	overflow: visible;
	padding: 0 34px;
	-webkit-mask-image: none;
	mask-image: none;
}
.pm-logos-paginas .pm-logos-faixa {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--pm-logos-por) - 1) * var(--pm-logos-gap)) / var(--pm-logos-por));
	gap: var(--pm-logos-gap);
	padding: 14px 0 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	animation: none;
}
.pm-logos-paginas .pm-logos-faixa::-webkit-scrollbar { display: none; }
.pm-logos-paginas .pm-logo { scroll-snap-align: start; display: flex; justify-content: center; }
.pm-logos-paginas .pm-logo-hex { width: 100%; max-width: 210px; }
.pm-logos-paginas .pm-logo-hex::before { inset: 4px; }
.pm-logos-paginas .pm-logo-hex img { width: 72%; height: 56%; filter: none; }
.pm-logos-paginas .pm-logo:hover .pm-logo-hex { transform: translateY(-4px); }
.pm-logos-paginas .pm-logo-hex { transition: filter .3s ease, transform .3s ease; }
.pm-logos-paginas .pm-logo-iniciais { font-size: clamp(34px, 3vw, 48px); }
.pm-logos-paginas .pm-logo-hex small { font-size: 13px; }
.pm-logos-paginas .pm-ant { left: -6px; }
.pm-logos-paginas .pm-prx { right: -6px; }
@media (max-width: 960px) { .pm-logos.pm-logos-paginas { --pm-logos-por: 3; } }
@media (max-width: 560px) { .pm-logos.pm-logos-paginas { --pm-logos-por: 2; --pm-logos-gap: 14px; padding: 0 26px; } }

/* =====================================================================
 * Poucas empresas (até 5): fixas, centralizadas e maiores, sem slider.
 * Os lugares vazios são convites "Sua empresa aqui" (borda tracejada).
 * ================================================================== */
.pm-logos.pm-logos-poucos {
	display: block;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
	padding: 0;
}
.pm-logos-poucos .pm-logos-faixa {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
	padding: 14px 0 18px;
	animation: none;
}
.pm-logos-poucos .pm-logo { display: flex; justify-content: center; }
.pm-logos-poucos .pm-logo-hex { width: 200px; transition: filter .3s ease, transform .3s ease; }
.pm-logos-1 .pm-logo-hex, .pm-logos-2 .pm-logo-hex { width: 240px; }
.pm-logos-poucos .pm-logo-hex::before { inset: 4px; }
.pm-logos-poucos .pm-logo-hex img { width: 72%; height: 56%; filter: none; }
.pm-logos-poucos .pm-logo:hover .pm-logo-hex { transform: translateY(-4px); filter: drop-shadow(0 10px 20px rgba(180, 110, 0, .3)); }
.pm-logos-poucos .pm-logo-iniciais { font-size: 46px; }
.pm-logos-poucos .pm-logo-hex small { font-size: 13px; }

/* Convite "Sua empresa aqui". */
.pm-logo-convite { text-decoration: none; }
.pm-logo-convite .pm-logo-hex { background: color-mix(in srgb, var(--pm-primary) 55%, #fff); }
.pm-logo-convite .pm-logo-hex::before { background: color-mix(in srgb, var(--pm-primary) 7%, #fff); }
.pm-convite-mais {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px;
	background: var(--pm-mel); color: var(--pm-dark);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 14px rgba(180, 110, 0, .25);
	transition: transform .3s ease;
}
.pm-logo-convite strong { font-size: 15px; color: var(--pm-dark); line-height: 1.2; text-align: center; max-width: 76%; }
.pm-logo-convite small { color: var(--pm-primary-2) !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px !important; }
.pm-logo-convite:hover .pm-convite-mais { transform: rotate(90deg); }

@media (max-width: 760px) {
	.pm-logos-poucos .pm-logos-faixa { gap: 14px; }
	.pm-logos-poucos .pm-logo-hex,
	.pm-logos-1 .pm-logo-hex, .pm-logos-2 .pm-logo-hex { width: calc(50% - 7px); min-width: 140px; max-width: 200px; }
	.pm-logos-poucos .pm-logo { flex: 0 0 calc(50% - 7px); }
}

/* =====================================================================
 * O The7 pinta todo link de azul no hover e ganha na especificidade.
 * Nos blocos do clube a cor é sempre a nossa (!important de propósito).
 * ================================================================== */
body a.pm-banner-slide, body a.pm-banner-slide:hover, body a.pm-banner-slide:focus,
body a.pm-banner-slide *, body a.pm-banner-slide:hover * { color: var(--pm-dark) !important; text-decoration: none !important; }
body a.pm-banner-slide .pm-banner-texto strong em,
body a.pm-banner-slide:hover .pm-banner-texto strong em { color: #fff !important; }
body a.pm-banner-slide .pm-banner-botao, body a.pm-banner-slide:hover .pm-banner-botao { color: #fff !important; background: var(--pm-dark) !important; }
body a.pm-oferta, body a.pm-oferta:hover, body a.pm-oferta:hover * { color: var(--pm-dark) !important; text-decoration: none !important; }
body a.pm-oferta .pm-oferta-selos b, body a.pm-oferta:hover .pm-oferta-selos b { color: var(--pm-primary) !important; }
body a.pm-oferta .pm-oferta-selos b.pm-selo-2, body a.pm-oferta:hover .pm-oferta-selos b.pm-selo-2 { color: var(--pm-dark) !important; }
body a.pm-oferta .pm-oferta-empresa, body a.pm-oferta:hover .pm-oferta-empresa,
body a.pm-oferta .pm-oferta-de, body a.pm-oferta:hover .pm-oferta-de { color: var(--pm-gray) !important; }
body a.pm-logo, body a.pm-logo:hover, body a.pm-logo:hover * { color: var(--pm-dark) !important; text-decoration: none !important; }
body a.pm-logo-convite:hover small { color: var(--pm-primary-2) !important; }
body a.pm-plano-botao, body a.pm-plano-botao:hover { color: #fff !important; text-decoration: none !important; }
body .pm-plano.is-destaque a.pm-plano-botao, body .pm-plano.is-destaque a.pm-plano-botao:hover { color: var(--pm-dark) !important; }

/* Níveis de parceria: adesão gratuita no lugar do preço. */
.pm-plano-preco { flex-wrap: wrap; gap: 10px; }
.pm-plano-preco .pm-gratis { font-size: 2.2rem; background: var(--pm-mel, linear-gradient(180deg, #FFE27A, #FFC400 45%, #E89400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-plano-frase { margin: -4px 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-primary-2, #B86E00); }
.pm-plano-itens li:first-child span { font-weight: 700; }

/* Nível do parceiro nos logos: Rainha e Néctar ganham selo e brilho (Favo aparece normal). */
.pm-logo { position: relative; }
.pm-logo-selo {
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--pm-mel);
	color: #1a1204;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(120, 75, 0, .25);
	z-index: 2;
}
.pm-logo-nivel-rainha .pm-logo-selo { background: #111; color: var(--pm-primary); }
.pm-logo-nivel-rainha .pm-logo-hex { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pm-primary) 60%, transparent)); }
.pm-logo-nivel-nectar .pm-logo-hex { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pm-primary) 40%, transparent)); }
/* Selo em texto (Brinde, 2 por 1, selo personalizado): letra menor para caber. */
.pm-beneficio-pct.pm-selo-texto { font-size: 1rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; padding: 10px 14px; }

/* Níveis: todas as caixas com a mesma altura e o botão alinhado no pé de cada uma. */
.pm-planos { align-items: stretch; }
.pm-plano, .pm-plano.is-destaque { transform: none !important; height: 100%; box-sizing: border-box; }
.pm-plano .pm-plano-itens { flex: 1 1 auto; }
.pm-plano .pm-plano-botao { margin-top: auto; }

/* Níveis de parceria: leitura em blocos e vantagens zebradas. */
.pm-plano { gap: 10px; }
.pm-plano-frase {
	align-self: flex-start;
	margin: 0 0 2px;
	padding: 6px 11px;
	border: 1px solid color-mix(in srgb, var(--pm-primary) 42%, #fff);
	border-radius: 999px;
	background: color-mix(in srgb, var(--pm-primary) 13%, #fff);
	font-size: .69rem;
	line-height: 1.2;
}
.pm-plano .pm-plano-nome { font-size: 1.65rem; line-height: 1.15; }
.pm-plano .pm-plano-desc { line-height: 1.5; }
.pm-plano-preco {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin-top: 6px;
	padding: 15px 17px;
	border: 1px solid color-mix(in srgb, var(--pm-primary) 28%, #fff);
	border-radius: 15px;
	background: color-mix(in srgb, var(--pm-primary) 6%, #fff);
}
.pm-plano-preco .pm-gratis { display: block; line-height: 1.05; }
.pm-plano-preco span { display: block; font-size: .9rem; line-height: 1.35; font-weight: 700; }
.pm-plano .pm-plano-itens { gap: 0; align-content: start; margin-top: 7px; }
.pm-plano-itens li {
	padding: 11px 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--pm-primary) 13%, #fff);
	border-radius: 0;
	line-height: 1.45;
}
.pm-plano-itens li:nth-child(odd) { background: color-mix(in srgb, var(--pm-primary) 7%, #fff); }
.pm-plano-itens li:first-child { border-radius: 12px 12px 0 0; }
.pm-plano-itens li:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; }
.pm-plano-itens li.pm-plano-item-herdado { background: color-mix(in srgb, var(--pm-primary) 17%, #fff); }
.pm-plano-itens li.pm-plano-item-herdado span { font-weight: 800; color: var(--pm-dark); }
.pm-plano-botao { margin-top: 16px; }

/* Logos: hexágono mais "quadrado" (largura = altura, lados mais largos) — antes era alto e estreito. */
.pm-logo-hex { --pm-hex: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); aspect-ratio: 1; }
.pm-logos-paginas .pm-logo-hex { max-width: 190px; }
.pm-logos-poucos .pm-logo-hex { width: 190px; }
.pm-logos-1 .pm-logo-hex, .pm-logos-2 .pm-logo-hex { width: 220px; }
.pm-logos-paginas .pm-logo-hex img, .pm-logos-poucos .pm-logo-hex img { width: 66%; height: 50%; }

/* ===== Busca de benefícios (empresa, segmento ou benefício) + filtro por segmento ===== */
.pm-busca { display: grid; gap: 16px; justify-items: center; }
.pm-busca-campo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(100%, 680px);
	padding: 6px 8px 6px 20px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid color-mix(in srgb, var(--pm-primary) 55%, transparent);
	box-shadow: 0 14px 34px rgba(150, 95, 0, .14);
	transition: border-color .2s ease, box-shadow .2s ease;
	color: var(--pm-primary-2);
}
.pm-busca-campo:focus-within { border-color: var(--pm-primary); box-shadow: 0 16px 40px rgba(150, 95, 0, .22), 0 0 0 5px color-mix(in srgb, var(--pm-primary) 20%, transparent); }
.pm-busca-campo input { flex: 1; min-width: 0; height: 48px; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font-size: 1.05rem; color: var(--pm-dark); padding: 0 !important; }
.pm-busca-campo input::-webkit-search-cancel-button { display: none; }
.pm-busca-limpar { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--pm-primary) 18%, #fff); color: var(--pm-dark); font-size: 22px; line-height: 1; cursor: pointer; }
.pm-busca .pm-categorias { justify-content: center; list-style: none; }
.pm-busca .pm-categorias button {
	margin: 0;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--pm-primary) 45%, transparent);
	background: #fff;
	color: var(--pm-dark);
	font: inherit;
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pm-busca .pm-categorias button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(150, 95, 0, .15); }
.pm-busca .pm-categorias button.is-ativo { background: var(--pm-mel); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 18px rgba(150, 95, 0, .22); }
.pm-busca-info { margin: 0; min-height: 1.4em; font-weight: 700; color: var(--pm-gray); }
.pm-busca-info.is-vazio { color: #b3261e; }
.pm-beneficio[hidden] { display: none !important; }
/* O The7 pinta <button> de azul: aqui os botões do filtro seguem a marca. */
body .pm-busca .pm-categorias button { background-color: #fff !important; background-image: none !important; color: var(--pm-dark) !important; text-transform: none !important; letter-spacing: 0 !important; min-height: 0 !important; line-height: 1.2 !important; }
body .pm-busca .pm-categorias button.is-ativo { background-image: var(--pm-mel) !important; }
body .pm-busca .pm-busca-limpar { background: color-mix(in srgb, var(--pm-primary) 18%, #fff) !important; color: var(--pm-dark) !important; padding: 0 !important; min-height: 0 !important; }

/* Busca + segmento (combobox) numa barra só. */
.pm-busca-campo { width: min(100%, 860px); }
.pm-busca-divisor { flex: none; width: 1px; height: 30px; background: color-mix(in srgb, var(--pm-primary) 40%, transparent); }
body .pm-busca .pm-busca-segmento, body .pm-busca .pm-busca-ordem {
	flex: none;
	width: auto;
	max-width: 46%;
	height: 48px;
	margin: 0 !important;
	padding: 0 38px 0 14px !important;
	border: 0 !important;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pm-primary) 14%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B86E00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat !important;
	color: var(--pm-dark) !important;
	font: inherit;
	font-weight: 700;
	font-size: .95rem;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	box-shadow: none !important;
}
@media (max-width: 640px) {
	.pm-busca-campo { flex-wrap: wrap; border-radius: 22px; padding: 8px 12px; }
	.pm-busca-campo input { flex-basis: calc(100% - 70px); }
	.pm-busca-divisor { display: none; }
	body .pm-busca .pm-busca-segmento { max-width: none; width: 100%; }
}

/* Níveis: no lugar do "Grátis", o número de benefícios que a empresa oferece (é o que define o nível no cadastro). */
.pm-plano-preco { flex-direction: column; align-items: flex-start; gap: 2px; }
.pm-oferece-rotulo { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-gray); }
.pm-plano-preco .pm-oferece-num { font-size: 1.9rem; line-height: 1.1; font-weight: 900; background: var(--pm-mel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-oferece-sub { font-size: .85rem; color: var(--pm-gray); }

/* Níveis: itens mais nítidos (texto escuro, ✓ forte) e cada linha com cantos arredondados. */
.pm-plano .pm-plano-itens { gap: 6px; }
.pm-plano-itens li,
.pm-plano-itens li:first-child,
.pm-plano-itens li:last-child { border-bottom: 0; border-radius: 12px; }
.pm-plano-itens li { background: color-mix(in srgb, var(--pm-primary) 5%, #fff); border: 1px solid color-mix(in srgb, var(--pm-primary) 18%, #fff); }
.pm-plano-itens li:nth-child(odd) { background: color-mix(in srgb, var(--pm-primary) 11%, #fff); }
.pm-plano-itens li span { color: #2a2210; font-weight: 500; }
.pm-plano-itens li:first-child span { color: #1a1204; font-weight: 700; }
.pm-plano-itens li.pm-plano-item-herdado { background: color-mix(in srgb, var(--pm-primary) 24%, #fff); border-color: color-mix(in srgb, var(--pm-primary) 45%, #fff); }
.pm-plano-itens svg { color: #B86E00; stroke-width: 3; }
.pm-plano .pm-plano-desc { color: #3b3222; }
.pm-plano-preco { border-radius: 18px; }
.pm-plano { border-radius: 26px; }


/* ===== Benefício com fotos (capa + galeria) e link de afiliado ===== */
.pm-beneficio-fotos { margin: -4px 0 12px; }
body .pm-beneficio-capa { position: relative; display: block; width: 100%; padding: 0 !important; border: 0 !important; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: #f4efe2 !important; aspect-ratio: 16 / 9; }
/* A capa mostra a arte INTEIRA (sem cortar), em qualquer proporção; a sobra é preenchida
   com a própria imagem desfocada por trás. 16:9 (1600 × 900) é o que preenche sem sobra. */
.pm-beneficio-capa::before { content: ""; position: absolute; inset: -24px; background: var(--pm-capa, none) center / cover no-repeat; filter: blur(22px) saturate(1.15); opacity: .6; transform: scale(1.1); }
/* A capa segue a proporção da arte: 16:9 ocupa a largura toda; quadrada ou em pé cresce até 340 px de altura. */
body .pm-beneficio-capa { aspect-ratio: auto !important; }
.pm-beneficio-capa img { position: relative; z-index: 1; width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block; transition: transform .4s ease; }
.pm-beneficio-capa:hover img { transform: scale(1.03); }
.pm-beneficio-fotos-n { z-index: 2; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-weight: 700; }
body a.pm-beneficio-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; border-radius: 999px; background: #111 !important; color: var(--pm-primary) !important; font-weight: 800; font-size: .9rem; text-decoration: none !important; }
body a.pm-beneficio-link:hover { background: #000 !important; color: #fff !important; }
.pm-galeria-tela { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(10, 8, 2, .92); }
.pm-galeria-tela[hidden] { display: none; }
.pm-galeria-tela figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.pm-galeria-tela img { max-width: 100%; max-height: 80vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.pm-galeria-tela figcaption { margin-top: 12px; color: #fff; font-weight: 600; }
body .pm-galeria-tela button { flex: none; width: 48px; height: 48px; padding: 0 !important; border: 0 !important; border-radius: 50%; background: rgba(255, 255, 255, .14) !important; color: #fff !important; font-size: 30px; line-height: 1; cursor: pointer; }
body .pm-galeria-tela .pm-gt-fechar { position: absolute; top: 16px; right: 16px; }
.pm-gt-uma .pm-gt-ant, .pm-gt-uma .pm-gt-prx { visibility: hidden; }
@media (max-width: 640px) { .pm-galeria-tela { padding: 12px; } body .pm-galeria-tela .pm-gt-ant, body .pm-galeria-tela .pm-gt-prx { position: absolute; bottom: 20px; } .pm-gt-ant { left: 20px; } .pm-gt-prx { right: 20px; } }


/* Linhas do benefício no card (desconto, brinde, texto). */
.pm-beneficio-itens { display: grid; gap: 6px; margin: 4px 0 10px; padding: 0; list-style: none; }
.pm-beneficio-itens li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--pm-primary) 10%, #fff); color: #2a2210; font-size: .92rem; line-height: 1.35; }
.pm-beneficio-itens li strong { color: #1a1204; margin-right: 2px; }
.pm-item-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pm-mel); color: #1a1204; font-weight: 900; font-size: 13px; }
.pm-item-brinde { background: color-mix(in srgb, #ff7a9a 10%, #fff) !important; }

/* Foto própria de uma linha do benefício (brinde, produto): miniatura que abre em tela cheia. */
body .pm-item-foto { flex: none; margin-left: auto; width: 52px; height: 52px; padding: 0 !important; border: 2px solid #fff !important; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #f4efe2 !important; box-shadow: 0 4px 12px rgba(17, 17, 17, .14); transition: transform .2s ease; }
.pm-item-foto:hover { transform: scale(1.08); }
.pm-item-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Paginação dos cards de benefício. */
.pm-pagina { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 28px 0 0; }
.pm-pagina[hidden] { display: none !important; }
body .pm-pagina-btn { min-width: 44px; height: 44px; padding: 0 14px !important; border: 1px solid #f0dfa6 !important; border-radius: 12px !important; background: #fff !important; color: #1a1204 !important; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
body .pm-pagina-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(17,17,17,.1); }
body .pm-pagina-btn.is-atual { background: linear-gradient(180deg, #ffd23f, #ffc400) !important; border-color: #ffc400 !important; }
body .pm-pagina-btn:disabled { opacity: .35; cursor: default; }
body .pm-pagina-seta { font-size: 20px; }
.pm-pagina-reti { color: #8a7c55; padding: 0 2px; }

/* Ordenar (abaixo da busca). */
.pm-busca-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; width: min(100%, 860px); }
.pm-busca-ordem-lbl { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--pm-gray); }
body .pm-busca .pm-busca-ordem { height: 40px; max-width: none; background-color: #fff !important; border: 1px solid color-mix(in srgb, var(--pm-primary) 35%, transparent) !important; }