/* ════════════════════════════════════════════════
   bpc-sales-hero — Hero de anúncio (vitrine) + barra de estatísticas
   Paleta: creme + verde + coral, alinhada ao portal.
   ════════════════════════════════════════════════ */
.bpc-shero {
	--bpc-cream:    #f4ecdd;
	--bpc-ink:      #2b2018;
	--bpc-muted:    #6f6453;
	--bpc-green:    #2f6b46;
	--bpc-coral:    #e0623d;
	--bpc-line:     #e4d8c4;
	--bpc-stats-bg: #1f5236;

	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	border-radius: 18px;
}
.bpc-shero *, .bpc-shero *::before, .bpc-shero *::after { box-sizing: border-box; }

/* ── Área creme ────────────────────────────────── */
.bpc-shero__main {
	padding: 64px 48px;
	background:
		radial-gradient(120% 120% at 100% 0%, #fbf5e9 0%, transparent 55%),
		linear-gradient(180deg, #f6eede 0%, #efe5d3 100%);
	background-color: var(--bpc-cream);
}
.bpc-shero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 56px;
	max-width: 1180px;
	margin-inline: auto;
}

/* ── Conteúdo (texto) ──────────────────────────── */
.bpc-shero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 18px;
	margin-bottom: 26px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--bpc-line);
	box-shadow: 0 4px 14px rgba(43, 32, 24, 0.06);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--bpc-ink);
}
.bpc-shero__eyebrow-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--bpc-coral);
}

.bpc-shero__title {
	margin: 0 0 22px;
	font-family: Georgia, "Times New Roman", "Playfair Display", serif;
	font-size: clamp(2.2rem, 4.4vw, 3.4rem);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--bpc-ink);
}
.bpc-shero__subtitle {
	margin: 0 0 34px;
	max-width: 480px;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--bpc-muted);
}

/* ── Botões ────────────────────────────────────── */
.bpc-shero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin-bottom: 22px;
}
.bpc-shero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-weight: 700;
	transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.bpc-shero__cta--primary {
	padding: 16px 30px;
	border-radius: 999px;
	background: var(--bpc-coral);
	color: #fff;
	font-size: 1.04rem;
	box-shadow: 0 12px 28px rgba(224, 98, 61, 0.34);
}
.bpc-shero__cta--primary:hover {
	transform: translateY(-2px);
	background: #d4542f;
	box-shadow: 0 16px 34px rgba(224, 98, 61, 0.42);
}
.bpc-shero__cta-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: #fff;
}
.bpc-shero__cta--link {
	color: var(--bpc-green);
	font-size: 1.04rem;
}
.bpc-shero__cta--link:hover { color: #234f34; }
.bpc-shero__arrow-down { transition: transform 0.18s ease; }
.bpc-shero__cta--link:hover .bpc-shero__arrow-down { transform: translateY(2px); }
.bpc-shero__cta:focus-visible { outline: 3px solid var(--bpc-coral); outline-offset: 3px; border-radius: 999px; }

/* ── Reforço ───────────────────────────────────── */
.bpc-shero__reassure {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--bpc-muted);
}
.bpc-shero__check { flex-shrink: 0; color: var(--bpc-green); }

/* ── Mockup (browser) ──────────────────────────── */
.bpc-shero__media { position: relative; }
.bpc-shero__browser {
	background: #efe6d6;
	border: 1px solid var(--bpc-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(43, 32, 24, 0.16);
	transform: perspective(1400px) rotateY(-4deg);
}
.bpc-shero__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 13px 16px;
	background: #e7ddcc;
}
.bpc-shero__traffic { width: 11px; height: 11px; border-radius: 50%; background: #cdbfa9; }
.bpc-shero__traffic:nth-child(1) { background: #e06d5e; }
.bpc-shero__traffic:nth-child(2) { background: #e3b341; }
.bpc-shero__traffic:nth-child(3) { background: #6cbf6c; }
.bpc-shero__urlbar {
	flex: 1;
	margin-left: 10px;
	padding: 6px 14px;
	border-radius: 7px;
	background: #fbf6ec;
	font-size: 0.74rem;
	color: #6f6453;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bpc-shero__screen {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
}
.bpc-shero__row { display: flex; gap: 14px; }
.bpc-shero__col { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.bpc-shero__block { border-radius: 10px; background: #e0d5c2; display: block; }
.bpc-shero__block--hero { flex: 1.6; height: 96px; background: linear-gradient(160deg, #2f5d44 0%, #213f30 100%); }
.bpc-shero__block--sm { height: 41px; }
.bpc-shero__block--md { flex: 1; height: 60px; }

/* Faixa do banner destacada em coral */
.bpc-shero__banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1.5px solid var(--bpc-coral);
	border-radius: 12px;
	background: #fbf2e9;
}
.bpc-shero__banner-label {
	position: absolute;
	top: -11px;
	left: 14px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--bpc-coral);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}
.bpc-shero__avatar {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 10px;
	display: grid; place-items: center;
	background: #3a2415;
	color: #f0c98a;
	font-size: 0.8rem;
	font-weight: 800;
}
.bpc-shero__banner-line {
	flex: 1;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, #d8c39c 0%, #e7dcc8 100%);
}

/* Cartão flutuante */
.bpc-shero__float {
	position: absolute;
	left: -18px;
	bottom: -22px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(43, 32, 24, 0.18);
}
.bpc-shero__float-ic {
	flex-shrink: 0;
	width: 38px; height: 38px;
	border-radius: 10px;
	display: grid; place-items: center;
	background: var(--bpc-green);
	color: #fff;
}
.bpc-shero__float-txt { display: flex; flex-direction: column; line-height: 1.2; }
.bpc-shero__float-txt strong { font-size: 1.12rem; font-weight: 800; color: var(--bpc-ink); }
.bpc-shero__float-txt span { font-size: 0.76rem; color: var(--bpc-muted); }

/* ── Barra verde de estatísticas ───────────────── */
.bpc-shero__stats {
	padding: 30px 48px;
	background: var(--bpc-stats-bg);
}
.bpc-shero__stats-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 1180px;
	margin-inline: auto;
}
.bpc-shero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	text-align: center;
}
.bpc-shero__stat + .bpc-shero__stat { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.bpc-shero__stat-num {
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}
.bpc-shero__stat-label {
	font-size: 0.84rem;
	line-height: 1.3;
	color: rgba(233, 244, 236, 0.72);
}

/* ── Responsivo ────────────────────────────────── */
@media (max-width: 920px) {
	.bpc-shero__inner { grid-template-columns: 1fr; gap: 48px; }
	.bpc-shero__browser { transform: none; }
	.bpc-shero__subtitle { max-width: none; }
}
@media (max-width: 700px) {
	.bpc-shero__main { padding: 44px 24px; }
	.bpc-shero__stats { padding: 24px; }
	.bpc-shero__stats-inner { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
	.bpc-shero__stat:nth-child(odd) { border-left: 0; }
	.bpc-shero__stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 480px) {
	.bpc-shero__main { padding: 34px 18px; }
	.bpc-shero__eyebrow { margin-bottom: 18px; }
	.bpc-shero__subtitle { margin-bottom: 26px; }
	/* Botões empilham e ocupam a largura toda */
	.bpc-shero__actions { gap: 12px; }
	.bpc-shero__cta { width: 100%; justify-content: center; }
	/* Cartão flutuante sai de cima do mockup para não cobrir/estourar */
	.bpc-shero__media { display: flex; flex-direction: column; align-items: stretch; }
	.bpc-shero__float { position: static; margin: 14px auto 0; }
	.bpc-shero__stat-num { font-size: 1.5rem; }
	.bpc-shero__stat-label { font-size: 0.78rem; }
}

/* ── Acessibilidade — sem animação ─────────────── */
@media (prefers-reduced-motion: reduce) {
	.bpc-shero__cta,
	.bpc-shero__arrow-down { transition: none; }
}