/*
Theme Name: Bio Costa - Controle de Pragas
Theme URI: https://biocosta.com.br/
Author: Bio Costa
Author URI: https://wa.me/5511949176498
Description: Tema WordPress oficial da Bio Costa Controle de Pragas. Design institucional moderno em azul e verde, com hero animado, servicos (CPT), paginas de residencias e empresas, integracao com WhatsApp e opcoes editaveis pelo Personalizador.
Version: 1.5.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bio-costa
Tags: business, pest-control, one-column, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Tokens de design
   ========================================================================== */
:root {
	/* Identidade da marca (preservada) */
	--bc-navy: #1A364D;
	--bc-navy-deep: #12293B;
	--bc-navy-ink: #0C2030;
	--bc-navy-soft: #24506E;
	--bc-green: #2D5A46;
	--bc-green-deep: #224537;
	--bc-green-soft: #4A7A63;
	--bc-mint: #6ee7a8;
	--bc-whatsapp: #25D366;
	--bc-whatsapp-deep: #189A4A;
	--bc-whatsapp-hover: #12793A;

	/* Neutros */
	--bc-bg: #F5F7FA;
	--bc-surface: #FFFFFF;
	--bc-surface-2: #EDF1F5;
	--bc-border: #E3E8EE;
	--bc-text: #1B2A37;
	--bc-text-soft: #4D5E6B;
	--bc-text-muted: #6E7E8A;

	/* Tipografia */
	--bc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Raio de borda */
	--bc-radius-sm: 10px;
	--bc-radius: 14px;
	--bc-radius-lg: 20px;
	--bc-pill: 999px;

	/* Sombras (suaves e consistentes) */
	--bc-shadow-sm: 0 1px 2px rgba(12, 32, 48, .06), 0 1px 3px rgba(12, 32, 48, .08);
	--bc-shadow-md: 0 8px 20px -8px rgba(12, 32, 48, .18);
	--bc-shadow-lg: 0 24px 48px -24px rgba(12, 32, 48, .32);
	--bc-shadow-green: 0 10px 24px -10px rgba(37, 211, 102, .55);

	/* Movimento */
	--bc-ease: cubic-bezier(.2, .7, .3, 1);
	--bc-speed: .22s;

	/* Layout */
	--bc-container: 1140px;
	--bc-gutter: 1.25rem;
	--bc-gutter-lg: 2rem;
	--bc-header-h: 84px;
}

/* ==========================================================================
   2. Reset e base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bc-header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--bc-font);
	font-size: 1rem;
	line-height: 1.68;
	color: var(--bc-text);
	background-color: var(--bc-bg);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

main,
.site-main {
	flex: 1 1 auto;
	display: block;
	width: 100%;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--bc-green);
	text-decoration: none;
	transition: color var(--bc-speed) var(--bc-ease);
}

a:hover {
	color: var(--bc-green-deep);
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   3. Tipografia
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--bc-navy);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.022em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4.8vw, 3.5rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.3rem); letter-spacing: -.015em; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

li { text-wrap: pretty; }

.bc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bc-green);
}

.bc-eyebrow::before {
	content: '';
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--bc-whatsapp);
}

.bc-lead {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.7;
	color: var(--bc-text-soft);
	text-wrap: pretty;
}

.bc-section-title {
	margin: .5rem 0 0;
	letter-spacing: -.026em;
}

.bc-section-lead {
	max-width: 620px;
	margin: .85rem auto 0;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.bc-container {
	width: 100%;
	max-width: var(--bc-container);
	margin-inline: auto;
	padding-inline: var(--bc-gutter);
}

.bc-section {
	padding-block: clamp(2.5rem, 4.5vw, 3.5rem);
}

.bc-section--tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.bc-section--flush { padding-bottom: 0; }

.bc-section-head {
	max-width: 720px;
	margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
	text-align: center;
}

.bc-section-head--left {
	margin-inline: 0;
	text-align: left;
}

.bc-grid {
	display: grid;
	gap: var(--bc-gutter-lg);
}

.bc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bc-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   5. Botões
   ========================================================================== */
.bc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .72rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--bc-radius);
	font-family: var(--bc-font);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--bc-speed) var(--bc-ease),
		border-color var(--bc-speed) var(--bc-ease),
		color var(--bc-speed) var(--bc-ease),
		transform var(--bc-speed) var(--bc-ease),
		box-shadow var(--bc-speed) var(--bc-ease);
}

.bc-btn:active { transform: translateY(1px); }

.bc-btn--primary {
	background-color: var(--bc-navy);
	color: #fff;
}

.bc-btn--primary:hover {
	background-color: var(--bc-navy-soft);
	color: #fff;
}

.bc-btn--green,
.bc-btn--verde {
	background-color: var(--bc-green);
	color: #fff;
}

.bc-btn--green:hover,
.bc-btn--verde:hover {
	background-color: var(--bc-green-deep);
	color: #fff;
}

.bc-btn--whatsapp,
.bc-btn--wpp {
	background-color: var(--bc-whatsapp-deep);
	color: #fff;
	box-shadow: var(--bc-shadow-green);
}

.bc-btn--whatsapp:hover,
.bc-btn--wpp:hover {
	background-color: var(--bc-whatsapp-hover);
	color: #fff;
	transform: translateY(-1px);
}

.bc-btn--white {
	background-color: #fff;
	color: var(--bc-navy);
}

.bc-btn--white:hover {
	background-color: #f1f5f9;
	color: var(--bc-navy);
}

.bc-btn--outline {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

.bc-btn--outline:hover {
	background-color: rgba(255, 255, 255, .08);
}

.bc-btn--ghost {
	background-color: transparent;
	color: var(--bc-green);
}

.bc-btn--ghost:hover {
	background-color: rgba(45, 90, 70, .08);
	color: var(--bc-green-deep);
}

.bc-btn--pill { border-radius: var(--bc-pill); }
.bc-btn--lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.bc-btn--sm { padding: .55rem 1rem; font-size: .875rem; }
.bc-btn--block { width: 100%; }

.bc-btn svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

/* ==========================================================================
   6. Ícones
   ========================================================================== */
.bc-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	flex: none;
	vertical-align: -.125em;
}

/* ==========================================================================
   7. Barra superior
   ========================================================================== */
.bc-topbar {
	display: none;
	background: var(--bc-navy-ink);
	color: rgba(255, 255, 255, .82);
	font-size: .82rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.bc-topbar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 38px;
}

.bc-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: rgba(255, 255, 255, .82);
}

.bc-topbar__item:hover { color: #fff; }

.bc-topbar__item .bc-icon { color: var(--bc-whatsapp); }
.bc-topbar__spacer { margin-left: auto; }

/* ==========================================================================
   8. Cabeçalho e navegação
   ========================================================================== */
.bc-header {
	position: sticky;
	top: 0;
	z-index: 80;
	background: var(--bc-navy);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: box-shadow var(--bc-speed) var(--bc-ease);
}

.bc-header.is-scrolled {
	box-shadow: 0 12px 30px -18px rgba(12, 32, 48, .7);
}

.bc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--bc-header-h);
}

.bc-brand {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	color: #fff;
}

.bc-brand:hover { color: #fff; }

.bc-brand__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: var(--bc-radius-sm);
	padding: 6px;
	box-shadow: var(--bc-shadow-md);
	line-height: 0;
}

.bc-brand__logo img {
	height: 52px;
	width: auto;
	object-fit: contain;
}

.bc-brand__text {
	display: none;
	line-height: 1.1;
}

.bc-brand__name {
	display: block;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: .01em;
}

.bc-brand__tagline {
	display: block;
	margin-top: .2rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bc-mint);
}

.bc-nav {
	display: none;
	align-items: center;
	gap: 1.4rem;
}

.bc-nav.is-open {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--bc-navy-deep);
	padding: .5rem var(--bc-gutter) 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	box-shadow: var(--bc-shadow-lg);
}

.bc-menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.bc-menu li { margin: 0; }

.bc-menu a {
	display: block;
	padding: .8rem .25rem;
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.bc-menu a:hover { color: var(--bc-mint); }

.bc-menu .current-menu-item > a,
.bc-menu .current_page_item > a {
	color: var(--bc-mint);
}

.bc-menu .sub-menu {
	list-style: none;
	padding-left: .9rem;
}

.bc-nav__cta {
	margin-top: .9rem;
}

.bc-nav__cta .bc-btn {
	width: 100%;
}

/* Botão hambúrguer */
.bc-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--bc-radius-sm);
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color var(--bc-speed) var(--bc-ease);
}

.bc-nav-toggle:hover { background: rgba(255, 255, 255, .1); }

.bc-nav-toggle .bc-icon--close { display: none; }
.bc-nav-toggle[aria-expanded="true"] .bc-icon--menu { display: none; }
.bc-nav-toggle[aria-expanded="true"] .bc-icon--close { display: block; }

@media (min-width: 768px) {
	.bc-topbar { display: block; }
	.bc-brand__text { display: block; }
	.bc-nav-toggle { display: none; }

	.bc-nav {
		display: flex;
		position: static;
		flex-direction: row;
		align-items: center;
		background: transparent;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.bc-nav.is-open {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 1.4rem;
		background: transparent;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.bc-menu {
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
	}

	.bc-menu a {
		padding: .4rem 0;
		border: 0;
		font-size: .9rem;
		position: relative;
	}

	.bc-menu a::after {
		content: '';
		position: absolute;
		left: 0;
		right: 100%;
		bottom: 0;
		height: 2px;
		border-radius: 2px;
		background: var(--bc-whatsapp);
		transition: right var(--bc-speed) var(--bc-ease);
	}

	.bc-menu a:hover::after,
	.bc-menu .current-menu-item > a::after,
	.bc-menu .current_page_item > a::after {
		right: 0;
	}

	.bc-menu .sub-menu {
		position: absolute;
		top: 100%;
		min-width: 220px;
		background: var(--bc-navy-deep);
		border-radius: var(--bc-radius-sm);
		padding: .5rem;
		box-shadow: var(--bc-shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: all var(--bc-speed) var(--bc-ease);
	}

	.bc-menu li { position: relative; }

	.bc-menu li:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.bc-nav__cta { margin-top: 0; }
	.bc-nav__cta .bc-btn { width: auto; }
}

/* ==========================================================================
   9. Hero
   ========================================================================== */
.hero-bg,
.bc-hero {
	position: relative;
	color: #fff;
	background-color: var(--bc-navy);
	background-image:
		radial-gradient(70% 90% at 88% 0%, rgba(45, 90, 70, .42), transparent 62%),
		radial-gradient(55% 70% at 6% 100%, rgba(37, 211, 102, .12), transparent 62%);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Fotos de fundo rotativas (opcional — definidas no Personalizador). */
.bc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bc-hero__bg-item {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: bc-hero-fade 28s infinite;
}

.bc-hero__bg-item:only-child {
	opacity: 1;
	animation: none;
}

.bc-hero__bg-item:nth-child(1) { animation-delay: 0s; }
.bc-hero__bg-item:nth-child(2) { animation-delay: 7s; }
.bc-hero__bg-item:nth-child(3) { animation-delay: 14s; }
.bc-hero__bg-item:nth-child(4) { animation-delay: 21s; }

@keyframes bc-hero-fade {
	0% { opacity: 0; }
	5% { opacity: 1; }
	25% { opacity: 1; }
	30% { opacity: 0; }
	100% { opacity: 0; }
}

/* Escurece a foto para o texto continuar legível. */
.bc-hero--foto::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(16, 38, 55, .72), rgba(11, 28, 42, .88));
}

.bc-hero--foto .bc-hero__title,
.bc-hero--foto .bc-hero__lead {
	text-shadow: 0 2px 12px rgba(8, 22, 34, .55);
}

.bc-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 5.25rem);
	text-align: center;
}

.bc-hero__eyebrow { color: var(--bc-mint); }

.bc-hero__eyebrow::before { background: var(--bc-whatsapp); }

.bc-hero__title {
	max-width: 860px;
	margin: .65rem auto .9rem;
	color: #fff;
	font-size: clamp(2.3rem, 5.4vw, 3.7rem);
	line-height: 1.08;
	letter-spacing: -.03em;
}

.bc-hero__lead {
	max-width: 640px;
	margin: 0 auto 1.85rem;
	font-size: clamp(1.05rem, 1.7vw, 1.2rem);
	line-height: 1.68;
	color: rgba(255, 255, 255, .85);
}

.bc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .85rem;
}

.bc-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .55rem 1.7rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.bc-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .92rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
}

.bc-hero__trust .bc-icon { color: var(--bc-whatsapp); }

@media (prefers-reduced-motion: reduce) {
	.bc-hero__bg-item { animation: none; }
	.bc-hero__bg-item:first-child { opacity: 1; }
}

/* ==========================================================================
   10. Como funciona
   ========================================================================== */
.bc-steps {
	display: grid;
	gap: var(--bc-gutter-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.bc-steps { grid-template-columns: repeat(3, 1fr); }
}

.bc-step {
	height: 100%;
	padding: 1.6rem 1.5rem;
	background: var(--bc-surface);
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	box-shadow: var(--bc-shadow-sm);
}

.bc-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--bc-navy);
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
}

.bc-step__titulo {
	margin: 0 0 .45rem;
	font-size: 1.1rem;
}

.bc-step__texto {
	margin: 0;
	font-size: .92rem;
	line-height: 1.65;
	color: var(--bc-text-soft);
}

/* Alterna o fundo das seções para dar ritmo à página. */
.bc-section--branca { background: var(--bc-surface); }

/* ==========================================================================
   11. Cards de serviço
   ========================================================================== */
.bc-card-servico {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	background: var(--bc-surface);
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius-lg);
	overflow: hidden;
	box-shadow: var(--bc-shadow-sm);
	transition:
		transform var(--bc-speed) var(--bc-ease),
		box-shadow var(--bc-speed) var(--bc-ease),
		border-color var(--bc-speed) var(--bc-ease);
}

a.bc-card-servico:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--bc-shadow-lg);
	color: inherit;
}

/* Foto com o nome do serviço por cima. O azul aparece só se faltar imagem. */
.bc-card-servico__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bc-navy);
}

.bc-card-servico__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--bc-ease);
}

a.bc-card-servico:hover .bc-card-servico__media img {
	transform: scale(1.05);
}

.bc-card-servico__veu {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(12, 32, 48, .92) 0%,
		rgba(12, 32, 48, .45) 45%,
		rgba(12, 32, 48, 0) 80%
	);
}

.bc-card-servico__chip {
	position: absolute;
	top: .9rem;
	left: .9rem;
	display: inline-flex;
	align-items: center;
	padding: .3rem .7rem;
	border-radius: var(--bc-pill);
	background: rgba(255, 255, 255, .93);
	color: var(--bc-navy);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bc-card-servico__titulo {
	position: absolute;
	left: 1.35rem;
	right: 1.35rem;
	bottom: 1.1rem;
	margin: 0;
	color: #fff;
	font-size: clamp(1.2rem, 1.7vw, 1.4rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-shadow: 0 2px 10px rgba(8, 22, 34, .5);
}

.bc-card-servico__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.35rem 1.35rem;
}

.bc-card-servico__texto {
	margin: 0 0 1rem;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--bc-text-soft);
	text-wrap: pretty;
}

/*
 * Parece um link, mas o clique é do card inteiro (o título cobre toda a área).
 * Por isso é um <span> e não um <a> — link dentro de link não é válido.
 */
.bc-mais {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	font-size: .88rem;
	font-weight: 700;
	color: var(--bc-green);
}

.bc-mais .bc-icon {
	transition: transform var(--bc-speed) var(--bc-ease);
}

a.bc-card-servico:hover .bc-mais {
	color: var(--bc-green-deep);
}

a.bc-card-servico:hover .bc-mais .bc-icon {
	transform: translateX(3px);
}

/* ==========================================================================
   12. Segmentos (página empresarial)
   ========================================================================== */
.bc-segmentos {
	display: grid;
	gap: var(--bc-gutter-lg);
}

@media (min-width: 700px) {
	.bc-segmentos { grid-template-columns: repeat(2, 1fr); }
}

/*
 * O card inteiro é o link quando o segmento tem página própria.
 * Por isso ele pode ser <a> ou <div> — o visual é o mesmo.
 */
.bc-card-segmento {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	background: var(--bc-surface);
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius-lg);
	overflow: hidden;
	box-shadow: var(--bc-shadow-sm);
	transition:
		transform var(--bc-speed) var(--bc-ease),
		box-shadow var(--bc-speed) var(--bc-ease),
		border-color var(--bc-speed) var(--bc-ease);
}

a.bc-card-segmento:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--bc-shadow-lg);
	color: inherit;
}

/* Foto com o nome do segmento por cima. O azul aparece só se faltar imagem. */
.bc-card-segmento__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bc-navy);
}

.bc-card-segmento__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--bc-ease);
}

a.bc-card-segmento:hover .bc-card-segmento__media img {
	transform: scale(1.05);
}

.bc-card-segmento__veu {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(12, 32, 48, .92) 0%,
		rgba(12, 32, 48, .45) 42%,
		rgba(12, 32, 48, 0) 78%
	);
}

.bc-card-segmento__titulo {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.15rem;
	margin: 0;
	color: #fff;
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-shadow: 0 2px 10px rgba(8, 22, 34, .5);
}

.bc-card-segmento__body {
	flex: 1;
	padding: 1.4rem 1.5rem 1.5rem;
}

/* Lista de tópicos do segmento. */
.bc-list-check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.bc-list-check li {
	position: relative;
	padding-left: 1.75rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--bc-text-soft);
	text-wrap: pretty;
}

.bc-list-check li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .18rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background-color: rgba(45, 90, 70, .12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D5A46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-size: .7rem;
	background-position: center;
	background-repeat: no-repeat;
}
/* ==========================================================================
   13. Card de post (blog)
   ========================================================================== */
.bc-card-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bc-surface);
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	overflow: hidden;
	box-shadow: var(--bc-shadow-sm);
	transition: transform var(--bc-speed) var(--bc-ease), box-shadow var(--bc-speed) var(--bc-ease);
}

.bc-card-post:hover {
	transform: translateY(-6px);
	box-shadow: var(--bc-shadow-lg);
}

.bc-card-post__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bc-surface-2);
}

.bc-card-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--bc-ease);
}

.bc-card-post:hover .bc-card-post__media img {
	transform: scale(1.05);
}

.bc-card-post__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.25rem 1.35rem;
}

.bc-card-post__meta {
	margin: 0 0 .5rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bc-text-muted);
}

.bc-card-post__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.12rem, 1.3vw, 1.22rem);
	letter-spacing: -.015em;
}

.bc-card-post__title a { color: var(--bc-navy); }
.bc-card-post__title a:hover { color: var(--bc-green); }

.bc-card-post__text {
	margin: 0 0 1.1rem;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--bc-text-soft);
}

.bc-card-post__foot { margin-top: auto; }

/* ==========================================================================
   14. Diferenciais
   ========================================================================== */
.bc-feature {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.4rem;
	background: var(--bc-bg);
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	height: 100%;
}

.bc-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--bc-radius-sm);
	background: var(--bc-navy);
	color: var(--bc-mint);
}

.bc-feature__icon .bc-icon {
	width: 1.4rem;
	height: 1.4rem;
}

.bc-feature__title {
	margin: 0;
	font-size: 1.06rem;
}

.bc-feature__text {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--bc-text-soft);
}

/* ==========================================================================
   15. Faixa de conversão (CTA)
   ========================================================================== */
.bc-cta-band {
	background-color: var(--bc-navy-deep);
	background-image: radial-gradient(80% 120% at 90% 0%, rgba(45, 90, 70, .55), transparent 60%);
	color: #fff;
	padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

.bc-cta-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
	text-align: center;
}

.bc-cta-band__title {
	margin: 0 0 .5rem;
	color: #fff;
}

.bc-cta-band__text {
	margin: 0;
	max-width: 560px;
	color: rgba(255, 255, 255, .8);
}

/* ==========================================================================
   16. Rodapé
   ========================================================================== */
.bc-footer {
	background: var(--bc-navy-ink);
	color: rgba(255, 255, 255, .78);
}

.bc-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
	padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
}

.bc-footer__brand img {
	height: 60px;
	width: auto;
	object-fit: contain;
	background: #fff;
	border-radius: var(--bc-radius-sm);
	padding: 7px;
	margin-bottom: 1rem;
}

.bc-footer__brand-name {
	margin: 0 0 .2rem;
	color: #fff;
	font-size: 1.15rem;
}

.bc-footer__tagline {
	margin: 0 0 .9rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bc-mint);
}

.bc-footer__about {
	margin: 0 0 1rem;
	max-width: 320px;
	font-size: .9rem;
	line-height: 1.6;
}

.bc-footer__heading {
	margin: 0 0 .9rem;
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.bc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}

.bc-footer__links a {
	color: rgba(255, 255, 255, .72);
	font-size: .92rem;
}

.bc-footer__links a:hover { color: #fff; }

.bc-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.bc-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .9rem;
}

.bc-footer__contact .bc-icon {
	margin-top: .2rem;
	color: var(--bc-whatsapp);
}

.bc-footer__social {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
}

.bc-footer__social a {
	color: rgba(255, 255, 255, .78);
	font-size: .9rem;
	font-weight: 600;
}

.bc-footer__social a:hover {
	color: #fff;
}

.bc-footer__widgets {
	margin-top: 1.4rem;
}

.bc-footer__widgets .widget {
	margin-bottom: 1rem;
}

.bc-footer__widgets .bc-footer__heading {
	margin-bottom: .5rem;
}

.bc-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 1.25rem;
}

.bc-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	align-items: center;
	justify-content: space-between;
	font-size: .82rem;
	text-align: center;
}

.bc-footer__bottom p { margin: 0; }

@media (min-width: 768px) {
	.bc-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
		gap: 2rem;
	}

	.bc-footer__bottom-inner {
		flex-direction: row;
		text-align: left;
	}
}

/* ==========================================================================
   17. Conteúdo (páginas e posts)
   ========================================================================== */
.entry-content {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--bc-text);
}

.entry-content > * + * { margin-top: 1.15em; }

.entry-content > *:first-child { margin-top: 0; }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--bc-navy);
	font-weight: 800;
	line-height: 1.2;
	margin-top: 1.6em;
}

.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.25rem; }
.entry-content h4 { font-size: 1.05rem; }

.entry-content ul,
.entry-content ol {
	padding-left: 1.4rem;
	margin-block: .9em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li { margin-bottom: .35rem; }

.entry-content a {
	color: var(--bc-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover { color: var(--bc-green-deep); }

.entry-content blockquote {
	margin: 1.4em 0;
	padding: .9rem 1.2rem;
	border-left: 4px solid var(--bc-green);
	background: var(--bc-surface-2);
	border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0;
	color: var(--bc-text-soft);
	font-style: italic;
}

.entry-content img,
.entry-content iframe {
	border-radius: var(--bc-radius);
}

.entry-content img { height: auto; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: .7rem;
	border: 1px solid var(--bc-border);
	text-align: left;
}

.entry-content th {
	background: var(--bc-surface-2);
	font-weight: 700;
}

.wp-caption { max-width: 100%; }

.wp-caption-text,
.wp-block-image figcaption {
	font-size: .85rem;
	color: var(--bc-text-muted);
	text-align: center;
	margin-top: .5rem;
}

.alignleft { float: left; margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }

/* Blocos de largura total respeitam o container */
.alignwide { max-width: 100%; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

/* ==========================================================================
   18. Cabeçalho de página (páginas internas)
   ========================================================================== */
.bc-page-hero {
	background:
		radial-gradient(70% 100% at 90% 0%, rgba(45, 90, 70, .4), transparent 60%),
		var(--bc-navy);
	color: #fff;
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.bc-page-hero__inner {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.bc-page-hero__title {
	margin: 0 0 .5rem;
	color: #fff;
}

.bc-page-hero__text {
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: 1.05rem;
}

/* Imagem destacada em páginas e posts */
.bc-single-media {
	max-width: 760px;
	margin: 0 auto 2.5rem;
	border-radius: var(--bc-radius);
	overflow: hidden;
	box-shadow: var(--bc-shadow-md);
}

.bc-single-media img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   19. Formulários
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: .72rem .9rem;
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius-sm);
	background: #fff;
	color: var(--bc-text);
	font-family: var(--bc-font);
	font-size: .95rem;
	line-height: 1.5;
	transition: border-color var(--bc-speed) var(--bc-ease), box-shadow var(--bc-speed) var(--bc-ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--bc-green);
	box-shadow: 0 0 0 3px rgba(45, 90, 70, .15);
}

.bc-search-form {
	display: flex;
	gap: .6rem;
}

.bc-search-form input {
	flex: 1;
	min-width: 0;
}

.bc-search-form .bc-btn {
	padding-inline: 1rem;
}

/* Botão nativo de submit do WordPress */
input[type="submit"],
button[type="submit"],
button[type="button"].bc-btn {
	cursor: pointer;
	background-color: var(--bc-green);
	color: #fff;
	font-weight: 700;
	border: 0;
	padding: .72rem 1.4rem;
	border-radius: var(--bc-radius);
	font-family: var(--bc-font);
	font-size: .95rem;
	transition: background-color var(--bc-speed) var(--bc-ease);
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--bc-green-deep);
}

/* ==========================================================================
   20. Comentários
   ========================================================================== */
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .comment-body {
	background: var(--bc-surface);
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	padding: 1.2rem 1.3rem;
	margin-bottom: 1rem;
}

.comment-list .comment-body .fn a { color: var(--bc-navy); font-weight: 700; }
.comment-list .comment-body .comment-metadata a { color: var(--bc-text-muted); font-size: .82rem; }

.comment-list .comment-body .reply a { font-weight: 700; }

.comment-list .children {
	list-style: none;
	margin: 1rem 0 0;
	padding-left: 1.5rem;
}

.comment-list .avatar {
	border-radius: 50%;
	float: left;
	margin-right: .9rem;
}

/* ==========================================================================
   21. Paginação
   ========================================================================== */
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-top: 2.75rem;
}

.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .7rem;
	border-radius: var(--bc-radius-sm);
	background: var(--bc-surface);
	border: 1px solid var(--bc-border);
	color: var(--bc-navy);
	font-weight: 600;
	font-size: .9rem;
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	border-color: var(--bc-green);
	color: var(--bc-green);
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--bc-navy);
	border-color: var(--bc-navy);
	color: #fff;
}

/* ==========================================================================
   22. Botão flutuante do WhatsApp
   ========================================================================== */
.bc-whats-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .85rem 1.15rem;
	border-radius: var(--bc-pill);
	background: var(--bc-whatsapp);
	color: #fff;
	font-weight: 700;
	font-size: .92rem;
	box-shadow: 0 16px 32px -12px rgba(37, 211, 102, .7);
	transition: transform var(--bc-speed) var(--bc-ease), background-color var(--bc-speed) var(--bc-ease);
}

.bc-whats-float:hover {
	transform: translateY(-2px);
	background: var(--bc-whatsapp-hover);
	color: #fff;
}

.bc-whats-float .bc-icon {
	width: 1.4rem;
	height: 1.4rem;
}

@media (max-width: 640px) {
	.bc-whats-float span { display: none; }
	.bc-whats-float { padding: .9rem; }
}

/* ==========================================================================
   23. Navegação entre posts
   ========================================================================== */
.bc-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	max-width: 760px;
	margin: 2.5rem auto 0;
}

.bc-post-nav a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	max-width: 320px;
	font-weight: 600;
	color: var(--bc-navy);
}

.bc-post-nav a:hover {
	color: var(--bc-green);
}

.bc-post-nav .bc-icon {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
}

/* ==========================================================================
   24. Acessibilidade
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}

.skip-link:focus {
	left: 16px;
	top: 16px;
	background: #fff;
	color: var(--bc-navy);
	padding: .8rem 1.2rem;
	border-radius: var(--bc-radius-sm);
	box-shadow: var(--bc-shadow-lg);
	font-weight: 700;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
}

:focus-visible {
	outline: 3px solid var(--bc-whatsapp);
	outline-offset: 2px;
}

/* ==========================================================================
   25. Responsividade das grades
   ========================================================================== */
@media (max-width: 1023px) {
	.bc-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.bc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
	.bc-grid--4,
	.bc-grid--3,
	.bc-grid--2 { grid-template-columns: 1fr; }

	.bc-hero__actions .bc-btn { width: 100%; }
}

/* ==========================================================================
   26. Formulário de lead (modal)
   ========================================================================== */
.bc-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.bc-modal[hidden] { display: none; }

.bc-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(12, 32, 48, .62);
}

.bc-modal__caixa {
	position: relative;
	width: 100%;
	max-width: 470px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--bc-radius-lg);
	box-shadow: var(--bc-shadow-lg);
	padding: 1.75rem;
	animation: bc-modal-entra .2s var(--bc-ease);
}

@keyframes bc-modal-entra {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bc-modal__caixa { animation: none; }
}

.bc-modal__fechar {
	position: absolute;
	top: .85rem;
	right: .85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bc-surface-2);
	color: var(--bc-navy);
	cursor: pointer;
	transition: background-color var(--bc-speed) var(--bc-ease);
}

.bc-modal__fechar:hover { background: #e0e7ee; }

.bc-modal__titulo {
	margin: .35rem 0 .4rem;
	font-size: 1.5rem;
	line-height: 1.2;
}

.bc-modal__texto {
	margin: 0 0 1.1rem;
	font-size: .94rem;
	color: var(--bc-text-soft);
}

.bc-modal__erro {
	margin-bottom: 1rem;
	padding: .7rem .9rem;
	border: 1px solid #f2c2bc;
	border-radius: var(--bc-radius-sm);
	background: #fdecea;
	color: #8a1f14;
	font-size: .88rem;
}

/* Campos */
.bc-lead-form label {
	display: block;
	margin-bottom: .3rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--bc-navy);
}

.bc-lead-form .bc-field { margin: 0 0 .9rem; }

.bc-obrig { color: #c0392b; }

.bc-field-row { display: grid; gap: .9rem; }

@media (min-width: 520px) {
	.bc-field-row { grid-template-columns: 1fr 1fr; }
}

/* Isca anti-spam: fora da tela, nunca visível para pessoas. */
.bc-lead-isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bc-lead-aviso {
	margin: 0 0 1rem;
	font-size: .78rem;
	line-height: 1.55;
	color: var(--bc-text-muted);
}

.bc-lead-aviso a {
	text-decoration: underline;
}

/* No celular o modal vira uma folha inferior. */
@media (max-width: 519px) {
	.bc-modal {
		align-items: flex-end;
		padding: 0;
	}

	.bc-modal__caixa {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0;
	}
}

/* Trava a rolagem do fundo enquanto o modal está aberto. */
body.bc-modal-aberto { overflow: hidden; }
