@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* O tema do WordPress normalmente desenha o conteúdo da página dentro de
   uma coluna central com largura máxima (pra texto normal não ficar
   esticado a tela toda) — o que é ótimo pra post/página comum, mas fazia
   o fundo da nossa página de vendas ficar só nessa coluna estreita, com a
   cor de fundo do tema sobrando dos dois lados. O truque abaixo ("full
   bleed breakout") estica esse container pra ocupar a largura inteira da
   janela, não importa a largura da coluna do tema por fora dele.
   overflow-x:hidden evita que isso crie uma barra de rolagem horizontal
   indesejada quando 100vw não bate exatamente com a largura visível. */
.po-vendas {
	--po-bg: #f5f1e8;
	--po-ink: #17140f;
	--po-ink-soft: #4a453c;
	--po-orange: #ea4e1b;
	--po-orange-dark: #c73f13;
	--po-linha: #e2dccc;

	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow-x: hidden;

	background: var(--po-bg);
	color: var(--po-ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
}

/* O respiro branco em cima/embaixo não vinha de padding no wrapper do
   conteúdo (isso aqui embaixo já zerava certo) — vinha do PRÓPRIO
   cabeçalho/rodapé do tema (.site-header/.site-footer, do tema Hello
   Elementor), que ficam ao lado do conteúdo, não dentro dele. Mesmo vazios
   (sem logo/menu configurado) eles têm padding-block de 1rem cada. Como a
   página de vendas já tem seu próprio cabeçalho (.po-vendas-nav) e não
   precisa do rodapé genérico do tema, a solução é esconder os dois — só
   nas páginas que têm [portal_vendas] (o body:has() abaixo garante isso,
   sem mexer em mais nenhuma página do site). */
body:has(.po-vendas) .site-header,
body:has(.po-vendas) .site-footer,
body:has(.po-vendas) .page-header {
	display: none !important;
}

article:has(.po-vendas),
.entry-content:has(.po-vendas),
.page-content:has(.po-vendas),
.wp-block-post-content:has(.po-vendas),
main:has(.po-vendas),
#content:has(.po-vendas),
.site-content:has(.po-vendas),
.content-area:has(.po-vendas) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.po-vendas-container {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
}

.po-vendas section {
	margin-bottom: 64px;
}

.po-vendas h1 {
	font-family: 'Archivo Black', 'Inter', sans-serif;
	font-size: 40px;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: var(--po-ink);
}

.po-vendas h2 {
	font-family: 'Archivo Black', 'Inter', sans-serif;
	font-size: 22px;
	text-transform: uppercase;
	margin: 0 0 20px;
	color: var(--po-ink);
}

.po-vendas-laranja {
	color: var(--po-orange);
}

/* ---- Nav ---- */

.po-vendas-nav {
	background: var(--po-bg);
	border-bottom: 1px solid var(--po-linha);
	padding: 16px 20px;
	margin-bottom: 48px;
}

.po-vendas-nav-inner {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.po-vendas-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Archivo Black', 'Inter', sans-serif;
	font-size: 18px;
	color: var(--po-ink);
}

.po-vendas-logo-tick {
	display: inline-block;
	width: 8px;
	height: 20px;
	background: var(--po-orange);
	transform: skewX(-12deg);
}

.po-vendas-nav-links {
	display: flex;
	align-items: center;
	gap: 10px;
}

.po-vendas-btn-nav {
	padding: 9px 18px !important;
	font-size: 13px !important;
}

/* ---- Botões (fundo/cor/borda travados em !important pra nenhum CSS de
   tema conseguir sobrescrever — mesmo problema já resolvido no resto do
   plugin: temas do WordPress costumam ter uma cor padrão de botão/borda
   que vence regras sem !important). ---- */

.po-vendas-btn-primario,
.po-vendas-btn-primario:hover,
.po-vendas-btn-primario:focus,
.po-vendas-btn-primario:active,
.po-vendas-btn-primario:visited {
	background: var(--po-orange) !important;
	color: #fff !important;
	border: 2px solid var(--po-orange) !important;
	outline: none !important;
	box-shadow: none !important;
}

.po-vendas-btn-primario:hover {
	background: var(--po-orange-dark) !important;
	border-color: var(--po-orange-dark) !important;
}

.po-vendas-btn-secundario,
.po-vendas-btn-secundario:hover,
.po-vendas-btn-secundario:focus,
.po-vendas-btn-secundario:active,
.po-vendas-btn-secundario:visited {
	background: var(--po-bg) !important;
	color: var(--po-ink) !important;
	border: 2px solid var(--po-ink) !important;
	outline: none !important;
	box-shadow: none !important;
}

.po-vendas-btn-secundario:hover {
	background: var(--po-ink) !important;
	color: var(--po-bg) !important;
}

.po-vendas-btn-primario,
.po-vendas-btn-secundario {
	display: inline-block;
	font-weight: 700;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: 6px;
	text-decoration: none !important;
	cursor: pointer;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	font-family: 'Inter', sans-serif;
}

.po-vendas-btn-full {
	width: 100%;
	box-sizing: border-box;
}

.po-vendas-microtexto {
	font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
	font-size: 13px;
	color: var(--po-ink-soft);
	margin: 14px 0 0;
	text-align: center;
}

/* ---- Hero ---- */

.po-vendas-hero {
	text-align: left;
}

.po-vendas-badge {
	font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
	display: inline-block;
	color: var(--po-orange);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.po-vendas-sub {
	font-size: 17px;
	color: var(--po-ink-soft);
	max-width: 560px;
	margin: 0 0 28px;
}

.po-vendas-hero-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.po-vendas-hero .po-vendas-microtexto {
	text-align: left;
}

/* ---- Carrossel de fabricantes ---- */

.po-vendas-carrossel-secao {
	margin-bottom: 64px;
}

.po-vendas-carrossel {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	padding: 14px 0;
	border-top: 1px solid var(--po-linha);
	border-bottom: 1px solid var(--po-linha);
}

.po-vendas-carrossel-trilho {
	display: flex;
	gap: 8px;
	width: max-content;
	animation: po-vendas-scroll 32s linear infinite;
}

@keyframes po-vendas-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.po-vendas-chip-fabricante {
	background: #fff;
	border: 1px solid var(--po-linha);
	color: var(--po-ink);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.po-vendas-nota-fabricantes {
	text-align: center;
	color: var(--po-ink-soft);
	font-size: 13px;
	margin: 18px 20px 0;
}

/* ---- Dores ---- */

.po-vendas-dor h2,
.po-vendas-como-funciona h2,
.po-vendas-confianca h2,
.po-vendas-preco h2,
.po-vendas-bio h2,
.po-vendas-faq h2,
.po-vendas-cta-final h2 {
	text-align: center;
}

.po-vendas-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.po-vendas-card-dor {
	background: #fff;
	border: 1px solid var(--po-linha);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(23, 20, 15, 0.04);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.po-vendas-card-dor:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(23, 20, 15, 0.08);
}

.po-vendas-icone-dor {
	display: block;
	font-size: 24px;
	margin-bottom: 10px;
}

.po-vendas-card-dor p {
	margin: 0;
	font-size: 14px;
	color: var(--po-ink-soft);
}

/* ---- Como funciona ---- */

.po-vendas-passos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.po-vendas-passo {
	text-align: center;
}

.po-vendas-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--po-ink);
	color: var(--po-bg);
	font-weight: 700;
	border-radius: 999px;
	margin-bottom: 12px;
	font-family: 'Archivo Black', sans-serif;
}

.po-vendas-passo p {
	margin: 0;
	font-size: 14px;
	color: var(--po-ink-soft);
}

/* ---- Confiança ---- */

.po-vendas-confianca {
	background: #fff;
	border: 1px solid var(--po-linha);
	border-left: 5px solid var(--po-orange);
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 4px 18px rgba(23, 20, 15, 0.05);
}

.po-vendas-confianca-intro {
	text-align: center;
	color: var(--po-ink-soft);
	margin: 0 0 18px;
}

.po-vendas-lista-confianca {
	margin: 0;
	padding: 0 0 0 20px;
}

.po-vendas-lista-confianca li {
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--po-ink-soft);
}

.po-vendas-lista-confianca li:last-child {
	margin-bottom: 0;
}

/* ---- Preço / cadastro ---- */

.po-vendas-preco {
	background: #fff;
	border: 2px solid var(--po-ink);
	border-radius: 16px;
	padding: 40px 28px;
	text-align: center;
	box-shadow: 0 14px 34px rgba(23, 20, 15, 0.1);
	position: relative;
}

.po-vendas-preco::before {
	content: "ASSINATURA MENSAL";
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--po-orange);
	color: #fff;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 5px 16px;
	border-radius: 999px;
}

.po-vendas-preco-valor {
	font-family: 'Archivo Black', sans-serif;
	font-size: 40px;
	color: var(--po-ink);
	margin: 0 0 20px;
}

.po-vendas-preco-valor span {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--po-ink-soft);
}

.po-vendas-checklist {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	text-align: left;
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

.po-vendas-checklist li {
	padding: 6px 0 6px 26px;
	position: relative;
	font-size: 14px;
	color: var(--po-ink-soft);
}

.po-vendas-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--po-orange);
	font-weight: 700;
}

.po-vendas-form {
	text-align: left;
	max-width: 380px;
	margin: 0 auto;
}

.po-vendas-form label {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: var(--po-ink-soft);
}

.po-vendas-form input,
.po-vendas-form input:focus {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--po-linha) !important;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
	margin-bottom: 14px;
	background: #fff !important;
	color: var(--po-ink) !important;
	outline: none !important;
	font-family: 'Inter', sans-serif;
}

.po-vendas-form input:focus {
	border-color: var(--po-orange) !important;
	box-shadow: 0 0 0 3px rgba(234, 78, 27, 0.15) !important;
}

.po-vendas-form-erro {
	background: #fdecec;
	border: 1px solid #f4b8b8;
	color: #9c2b2b;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	margin: 0 0 16px;
	text-align: left;
}

/* ---- Faixas de fundo (dão ritmo visual à página, em vez de tudo na
   mesma cor do início ao fim) ---- */

.po-vendas-banda-branca {
	background: #fff;
	padding: 64px 0;
}

.po-vendas-banda-branca .po-vendas-container {
	padding: 0 20px;
}

.po-vendas-banda-escura {
	background: var(--po-ink);
	padding: 64px 0;
}

.po-vendas-banda-escura h2 {
	color: var(--po-bg);
}

/* ---- Bio ---- */

.po-vendas-bio {
	text-align: center;
	color: var(--po-ink-soft);
	font-size: 15px;
}

.po-vendas-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--po-orange);
	color: #fff;
	font-family: 'Archivo Black', sans-serif;
	font-size: 18px;
	margin-bottom: 16px;
}

/* ---- FAQ ---- */

.po-vendas-faq-item {
	background: var(--po-bg);
	border: 1px solid var(--po-linha);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 14px;
}

.po-vendas-faq-item:last-child {
	margin-bottom: 0;
}

.po-vendas-faq-pergunta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--po-ink);
}

.po-vendas-faq-marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--po-orange);
	color: #fff;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	font-weight: 700;
}

.po-vendas-faq-resposta {
	margin: 0 0 0 32px;
	color: var(--po-ink-soft);
	font-size: 14px;
}

/* ---- CTA final ---- */

.po-vendas-cta-final {
	text-align: center;
}

.po-vendas-cta-final h2 {
	font-size: 28px;
}

/* ---- Pagamento (Pix) ---- */

.po-vendas-pagamento {
	border-color: var(--po-orange);
}

.po-vendas-qr {
	display: block;
	margin: 0 auto 20px;
	border-radius: 12px;
	border: 1px solid var(--po-linha);
}

.po-vendas-copia-cola {
	background: var(--po-bg);
	border: 1px solid var(--po-linha);
	border-radius: 8px;
	padding: 12px;
	margin: 0 0 12px;
	word-break: break-all;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	color: var(--po-ink-soft);
	text-align: left;
	max-height: 100px;
	overflow-y: auto;
}

.po-vendas-btn-copiar,
.po-vendas-btn-copiar:hover,
.po-vendas-btn-copiar:focus,
.po-vendas-btn-copiar:active {
	background: var(--po-ink) !important;
	color: #fff !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.po-vendas-btn-copiar {
	padding: 11px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 24px;
	font-family: 'Inter', sans-serif;
}

.po-vendas-btn-copiar:hover {
	background: #2a2e37 !important;
}

.po-vendas-como-pagar {
	text-align: left;
	background: var(--po-bg);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 0 0 24px;
	font-size: 14px;
	color: var(--po-ink-soft);
}

.po-vendas-como-pagar ol {
	margin: 8px 0 0;
	padding-left: 18px;
}

.po-vendas-como-pagar li {
	margin-bottom: 4px;
}

.po-vendas-btn-whatsapp,
.po-vendas-btn-whatsapp:hover,
.po-vendas-btn-whatsapp:focus,
.po-vendas-btn-whatsapp:active {
	background: #25d366 !important;
	color: #fff !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.po-vendas-btn-whatsapp {
	display: inline-block;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 24px;
	border-radius: 10px;
	text-decoration: none !important;
	font-family: 'Inter', sans-serif;
}

.po-vendas-btn-whatsapp:hover {
	background: #1eb455 !important;
}

@media (max-width: 480px) {
	.po-vendas h1 {
		font-size: 28px;
	}
	.po-vendas-preco-valor {
		font-size: 32px;
	}
	.po-vendas-nav {
		margin-bottom: 32px;
	}
}