/* Bairros Inteligentes – Captação de Leads */
:root {
	--bi-navy: #0b1a3a;
	--bi-navy-2: #13285a;
	--bi-ink: #1d2433;
	--bi-muted: #5d6678;
	--bi-line: #e3e6ec;
	--bi-field: #f1f2f5;
	--bi-orange: #f7941d;
	--bi-green: #3db54a;
	--bi-blue: #1c75bc;
	--bi-yellow: #ffc20e;
	--bi-red: #d93a3a;
	--bi-wa: #25d366;
	--bi-radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.bi-leads {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--bi-ink);
	background: #fff;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.bi-leads a { color: var(--bi-blue); }

/* Layout dividido, como o login */
.bi-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.bi-hero {
	position: relative;
	color: #fff;
	background:
		linear-gradient(160deg, rgba(11,26,58,.88), rgba(19,40,90,.92)),
		radial-gradient(circle at 15% 20%, var(--bi-orange) 0 9%, transparent 9.5%),
		radial-gradient(circle at 85% 30%, var(--bi-green) 0 7%, transparent 7.5%),
		radial-gradient(circle at 25% 85%, var(--bi-blue) 0 12%, transparent 12.5%),
		radial-gradient(circle at 80% 80%, var(--bi-yellow) 0 6%, transparent 6.5%),
		var(--bi-navy);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	padding: 56px;
}
.bi-hero[style*="background-image"]::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,26,58,.15) 0%, rgba(11,26,58,.92) 70%);
}
.bi-hero-inner { position: relative; max-width: 520px; }
.bi-kicker {
	display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
	opacity: .8; margin-bottom: 14px;
}
.bi-hero h2 { font-size: 30px; line-height: 1.25; font-weight: 600; margin: 0 0 28px; }
.bi-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bi-benefits li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; opacity: .95; }
.bi-benefits strong { display: block; font-size: 15px; font-weight: 600; }
.bi-dot { flex: 0 0 12px; height: 12px; border-radius: 3px; margin-top: 6px; transform: rotate(45deg); }
.bi-dot.o { background: var(--bi-orange); } .bi-dot.g { background: var(--bi-green); }
.bi-dot.b { background: var(--bi-blue); }   .bi-dot.y { background: var(--bi-yellow); }

.bi-panel { padding: 56px clamp(24px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; max-width: 720px; }
.bi-logo { display: inline-block; margin-bottom: 28px; text-decoration: none; }
.bi-logo img { max-height: 64px; width: auto; display: block; }
.bi-logo-text { font-size: 26px; color: var(--bi-navy); font-weight: 500; }
.bi-logo-text b { color: var(--bi-blue); font-weight: 600; }
.bi-badge {
	align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--bi-navy);
	background: #fff4e3; border: 1px solid #ffd9a3; padding: 4px 12px; border-radius: 99px; margin-bottom: 14px;
}
.bi-panel h1, .bi-thanks h1 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; color: var(--bi-navy); font-weight: 600; }
.bi-lead { color: var(--bi-muted); margin: 0 0 26px; font-size: 15px; }

.bi-form { display: grid; gap: 16px; }
.bi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bi-field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--bi-ink); }
.bi-field small { font-weight: 400; color: var(--bi-muted); }
.bi-field input, .bi-field select, .bi-field textarea {
	font: inherit; font-weight: 400; width: 100%;
	background: var(--bi-field); border: 1.5px solid transparent; border-radius: 26px;
	padding: 12px 18px; color: var(--bi-ink); outline: none; transition: border-color .15s, background .15s;
}
.bi-field textarea { border-radius: var(--bi-radius); resize: vertical; }
.bi-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.bi-field input:focus, .bi-field select:focus, .bi-field textarea:focus { border-color: var(--bi-blue); background: #fff; }
.bi-err { color: var(--bi-red); font-size: 12.5px; font-weight: 500; }
.bi-alert { background: #fdecec; color: var(--bi-red); padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; }

.bi-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--bi-muted); cursor: pointer; }
.bi-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--bi-navy); flex: 0 0 auto; }

.bi-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font: inherit; font-weight: 600; font-size: 16px; color: #fff !important; text-decoration: none;
	background: var(--bi-navy); border: 0; border-radius: 30px; padding: 14px 28px; cursor: pointer;
	transition: transform .15s, background .15s;
}
.bi-btn:hover { background: var(--bi-navy-2); transform: translateY(-1px); }
.bi-member { font-size: 14px; color: var(--bi-muted); margin: 22px 0 0; }

.bi-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Página de obrigado */
.bi-thanks-page { background: #f4f5f8; }
.bi-thanks { max-width: 620px; margin: 0 auto; padding: 56px 20px 64px; text-align: center; }
.bi-thanks .bi-logo { margin-bottom: 34px; }
.bi-thanks .bi-logo img { margin: 0 auto; }
.bi-check-icon {
	width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px;
	display: grid; place-items: center; color: #fff; background: var(--bi-green);
	box-shadow: 0 10px 24px rgba(61,181,74,.3);
}
.bi-wa-card { background: #fff; border-radius: 18px; padding: 34px 28px; box-shadow: 0 10px 30px rgba(11,26,58,.08); margin-top: 8px; }
.bi-wa-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; background: var(--bi-wa); }
.bi-wa-card h2 { font-size: 21px; color: var(--bi-navy); margin: 0 0 14px; font-weight: 600; }
.bi-wa-list { list-style: none; padding: 0; margin: 0 auto 24px; display: grid; gap: 8px; font-size: 14.5px; color: var(--bi-muted); max-width: 380px; }
.bi-wa-list li::before { content: "✓"; color: var(--bi-green); font-weight: 700; margin-right: 8px; }
.bi-btn-wa { background: var(--bi-wa); }
.bi-btn-wa:hover { background: #1fbd5a; }
.bi-wa-card small { display: block; margin-top: 10px; color: var(--bi-muted); font-size: 12.5px; }
.bi-back { display: inline-block; margin-top: 26px; font-size: 14px; }

@media (max-width: 900px) {
	.bi-wrap { grid-template-columns: 1fr; }
	.bi-hero { order: 2; padding: 40px 20px; }
	.bi-hero h2 { font-size: 23px; }
	.bi-panel { padding: 32px 16px 40px; max-width: none; }
	.bi-panel h1, .bi-thanks h1 { font-size: 25px; }
}
@media (max-width: 560px) {
	.bi-row { grid-template-columns: 1fr; }
	.bi-btn { width: 100%; }
}
