/**
 * Tema Viver Bem — estilos do site.
 *
 * Fonte única dos tokens: theme.json (gera --wp--preset--* e --wp--custom--*).
 * Os aliases --vb-* abaixo só encurtam os nomes; não defina valores aqui.
 * Mobile primeiro. Pontos de quebra: 40em (640px), 60em (960px), 75em (1200px).
 * Seletores de uma classe só, para evitar disputas de especificidade.
 */

/* ---------- 1. Aliases dos tokens ---------- */
:root {
	--vb-tinta: var(--wp--preset--color--tinta);
	--vb-suave: var(--wp--preset--color--suave);
	--vb-petroleo: var(--wp--preset--color--petroleo);
	--vb-petroleo-escuro: var(--wp--preset--color--petroleo-escuro);
	--vb-turquesa: var(--wp--preset--color--turquesa);
	--vb-agua: var(--wp--preset--color--agua);
	--vb-branco: var(--wp--preset--color--branco);
	--vb-rodape: var(--wp--preset--color--rodape);
	--vb-borda: var(--wp--custom--cor--borda);
	--vb-borda-forte: var(--wp--custom--cor--borda-forte);
	--vb-whatsapp: var(--wp--custom--cor--whatsapp);
	--vb-whatsapp-escuro: var(--wp--custom--cor--whatsapp-escuro);
	--vb-erro: var(--wp--custom--cor--erro);
	--vb-foco: var(--wp--custom--cor--foco);
	--vb-foco-escuro: var(--wp--custom--cor--foco-escuro);
	--vb-rodape-texto: var(--wp--custom--cor--rodape-texto);
	--vb-rodape-link: var(--wp--custom--cor--rodape-link);

	--vb-raio-p: var(--wp--custom--raio--pequeno);
	--vb-raio-m: var(--wp--custom--raio--medio);
	--vb-raio-g: var(--wp--custom--raio--grande);
	--vb-raio-pilula: var(--wp--custom--raio--pilula);

	--vb-esp-1: var(--wp--preset--spacing--20);
	--vb-esp-2: var(--wp--preset--spacing--30);
	--vb-esp-3: var(--wp--preset--spacing--40);
	--vb-esp-4: var(--wp--preset--spacing--50);
	--vb-esp-5: var(--wp--preset--spacing--60);
	--vb-esp-6: var(--wp--preset--spacing--70);

	--vb-alvo: var(--wp--custom--alvo-toque);
	--vb-foco-largura: var(--wp--custom--foco--largura);
	--vb-foco-afastamento: var(--wp--custom--foco--afastamento);
	--vb-medida: var(--wp--custom--medida);
	--vb-largura: var(--wp--style--global--wide-size, 1200px);
	--vb-margem: clamp(1rem, 4vw, 2rem);
	--vb-barra-movel: 4.5rem;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: var(--vb-foco-largura) solid var(--vb-foco);
	outline-offset: var(--vb-foco-afastamento);
}

.vb-principal:focus {
	outline: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vb-pular {
	position: absolute;
	top: var(--vb-esp-1);
	left: var(--vb-esp-1);
	z-index: 100;
	padding: var(--vb-esp-2) var(--vb-esp-3);
	background: var(--vb-tinta);
	color: var(--vb-branco);
	border-radius: var(--vb-raio-p);
	transform: translateY(-200%);
}

.vb-pular:focus {
	transform: none;
	color: var(--vb-branco);
}

.vb-icone {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 3. Estrutura ---------- */
.vb-cabecalho__interno,
.vb-pagina,
.vb-rodape__interno,
.vb-hero__interno {
	width: 100%;
	max-width: var(--vb-largura);
	margin-inline: auto;
	padding-inline: var(--vb-margem);
}

.vb-pagina {
	padding-block: var(--vb-esp-4) var(--vb-esp-6);
}

.vb-pagina__titulo {
	margin: 0 0 var(--vb-esp-4);
	font-size: var(--wp--preset--font-size--titulo);
	letter-spacing: -0.01em;
}

.vb-texto {
	max-width: var(--vb-medida);
}

.vb-texto > * + * {
	margin-top: var(--vb-esp-3);
}

.vb-secao {
	padding-block: var(--vb-esp-5);
}

.vb-secao + .vb-secao {
	border-top: 1px solid var(--vb-borda);
}

.vb-secao--agua {
	background: var(--vb-agua);
	border-radius: var(--vb-raio-g);
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.vb-secao--agua + .vb-secao {
	border-top: 0;
}

.vb-secao__cabecalho {
	max-width: var(--vb-medida);
	margin-bottom: var(--vb-esp-4);
}

.vb-secao__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--grande);
}

.vb-secao__intro {
	margin: var(--vb-esp-2) 0 0;
	color: var(--vb-suave);
}

/* ---------- 4. Botões ---------- */
.vb-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vb-esp-2);
	align-items: center;
}

.vb-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--vb-alvo);
	padding: 0.625rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--vb-raio-pilula);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vb-botao--primario {
	background: var(--vb-petroleo);
	color: var(--vb-branco);
}

.vb-botao--primario:hover {
	background: var(--vb-petroleo-escuro);
	color: var(--vb-branco);
}

.vb-botao--secundario {
	background: var(--vb-branco);
	border-color: var(--vb-petroleo);
	color: var(--vb-petroleo);
}

.vb-botao--secundario:hover {
	background: var(--vb-agua);
	color: var(--vb-petroleo-escuro);
}

.vb-botao--whatsapp {
	background: var(--vb-whatsapp);
	color: var(--vb-branco);
}

.vb-botao--whatsapp:hover {
	background: var(--vb-whatsapp-escuro);
	color: var(--vb-branco);
}

.vb-botao--texto {
	padding-inline: 0.25rem;
	color: var(--vb-petroleo);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	border-radius: var(--vb-raio-p);
}

.vb-botao--texto:hover {
	color: var(--vb-petroleo-escuro);
}

/* ---------- 5. Cabeçalho e navegação ---------- */
.vb-cabecalho {
	position: relative;
	z-index: 20;
	background: var(--vb-branco);
	border-bottom: 1px solid var(--vb-borda);
}

.vb-cabecalho__interno {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vb-esp-2);
	min-height: 4.5rem;
	padding-block: var(--vb-esp-2);
}

.vb-logo,
.custom-logo-link {
	display: inline-flex;
	border-radius: var(--vb-raio-p);
}

.vb-logo img,
.custom-logo {
	display: block;
	width: auto;
	height: 2.75rem;
}

.vb-cabecalho__menu {
	display: none;
	align-items: center;
	gap: 0.4em;
	min-height: var(--vb-alvo);
	padding: 0.5rem 0.875rem;
	border: 2px solid var(--vb-petroleo);
	border-radius: var(--vb-raio-pilula);
	background: var(--vb-branco);
	color: var(--vb-petroleo);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.vb-cabecalho__menu > span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.vb-cabecalho__menu-fechar {
	display: none !important;
}

.vb-cabecalho__menu[aria-expanded="true"] .vb-cabecalho__menu-abrir {
	display: none !important;
}

.vb-cabecalho__menu[aria-expanded="true"] .vb-cabecalho__menu-fechar {
	display: inline-flex !important;
}

.js .vb-cabecalho__menu {
	display: inline-flex;
}

.vb-navegacao {
	flex-basis: 100%;
}

.js .vb-navegacao {
	display: none;
}

.js .vb-navegacao.esta-aberta {
	display: block;
}

.vb-navegacao__lista {
	margin: 0;
	padding: var(--vb-esp-2) 0;
	list-style: none;
}

.vb-navegacao__lista a {
	display: flex;
	align-items: center;
	min-height: var(--vb-alvo);
	padding: 0.5rem 0.25rem;
	color: var(--vb-tinta);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--vb-borda);
}

.vb-navegacao__lista a:hover,
.vb-navegacao__lista .current-menu-item > a,
.vb-navegacao__lista a[aria-current="page"] {
	color: var(--vb-petroleo);
	text-decoration: underline;
}

.vb-navegacao__contato {
	padding-block: var(--vb-esp-3);
}

.vb-navegacao__contato .vb-botao {
	width: 100%;
}

/* Menu horizontal só a partir de 75em (R3): com os 7 itens de navegação e o
   WhatsApp, abaixo disso vale o menu recolhível. */
@media (min-width: 75em) {
	.js .vb-cabecalho__menu {
		display: none;
	}

	.vb-navegacao,
	.js .vb-navegacao {
		display: flex;
		flex-basis: auto;
		align-items: center;
		gap: var(--vb-esp-3);
	}

	.vb-navegacao__lista {
		display: flex;
		align-items: center;
		gap: var(--vb-esp-3);
		padding: 0;
	}

	.vb-navegacao__lista a {
		border-bottom: 0;
		padding-inline: 0;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	.vb-navegacao__contato {
		padding: 0;
	}

	.vb-navegacao__contato .vb-botao {
		width: auto;
	}
}

@media (min-width: 60em) {
	.vb-logo img,
	.custom-logo {
		height: 3.25rem;
	}
}

/* ---------- 6. Trilha ---------- */
.vb-trilha {
	margin-bottom: var(--vb-esp-3);
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--vb-suave);
}

.vb-trilha ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-trilha li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--vb-borda-forte);
}

/* ---------- 7. Hero ---------- */
.vb-hero {
	overflow: hidden;
	background: var(--vb-branco);
}

.vb-hero__interno {
	display: grid;
	gap: var(--vb-esp-4);
	align-items: center;
	padding-block: var(--vb-esp-5);
}

.vb-hero__titulo {
	margin: 0;
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--destaque);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--vb-petroleo-escuro);
}

.vb-hero__apoio {
	max-width: 46ch;
	margin: var(--vb-esp-3) 0 var(--vb-esp-4);
	font-size: var(--wp--preset--font-size--medio);
	color: var(--vb-suave);
}

.vb-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
}

/* A forma "abraço": o arco do símbolo da marca, ampliado e recortado. */
.vb-hero__forma {
	position: relative;
	display: grid;
	place-items: center;
	/* Celular: símbolo menor para a busca aparecer mais cedo (homologação da Fase 5). */
	width: min(40vw, 10rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--vb-agua);
}

@media (min-width: 40em) {
	.vb-hero__forma {
		width: min(56vw, 16rem);
	}
}

.vb-hero__forma::before {
	content: "";
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	border: clamp(10px, 2.4vw, 18px) solid var(--vb-turquesa);
	border-top-color: transparent;
	border-left-color: transparent;
	transform: rotate(-20deg);
}

.vb-hero__forma img {
	width: 52%;
}

.vb-hero__imagem {
	display: block;
	width: 100%;
	border-radius: var(--vb-raio-g);
	object-fit: cover;
}

@media (min-width: 60em) {
	.vb-hero__interno {
		grid-template-columns: 1.15fr 0.85fr;
		padding-block: var(--vb-esp-6);
	}

	.vb-hero__visual {
		justify-content: flex-end;
	}

	.vb-hero__forma {
		width: min(32vw, 26rem);
		margin-right: -4vw;
	}
}

/* ---------- 8. Formulários e filtros ---------- */
.vb-filtros__titulo {
	margin: 0 0 var(--vb-esp-3);
	font-size: var(--wp--preset--font-size--medio);
}

.vb-filtros__campos {
	display: grid;
	gap: var(--vb-esp-3);
}

.vb-campo {
	display: grid;
	gap: 0.375rem;
	margin: 0;
}

.vb-campo label {
	font-weight: 600;
}

.vb-campo input,
.vb-campo select {
	width: 100%;
	min-height: var(--vb-alvo);
	padding: 0.5rem 0.75rem;
	border: 1.5px solid var(--vb-borda-forte);
	border-radius: var(--vb-raio-p);
	background: var(--vb-branco);
	color: var(--vb-tinta);
	font: inherit;
}

.vb-campo input::placeholder {
	color: var(--vb-suave);
	opacity: 1;
}

.vb-filtros__enviar {
	margin: var(--vb-esp-3) 0 0;
}

@media (min-width: 40em) {
	.vb-filtros__campos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vb-campo--busca {
		grid-column: 1 / -1;
	}
}

@media (min-width: 60em) {
	.vb-filtros__campos {
		grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	}

	.vb-campo--busca {
		grid-column: auto;
	}
}

/* ---------- 9. Rede parceira ---------- */
.vb-grade-parceiros {
	display: grid;
	gap: var(--vb-esp-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.vb-parceiro {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	/* Card esticado pela grade: a sobra fica no corpo, não nas ações. */
	grid-template-rows: 1fr auto;
	gap: var(--vb-esp-3);
	padding: var(--vb-esp-4);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-m);
	background: var(--vb-branco);
}

.vb-parceiro:hover {
	border-color: var(--vb-petroleo);
}

.vb-parceiro__marca {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--vb-raio-m);
	background: var(--vb-agua);
	overflow: hidden;
}

.vb-parceiro__marca img {
	max-height: 100%;
	object-fit: contain;
}

.vb-parceiro__inicial {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--vb-petroleo);
}

.vb-parceiro__nome {
	margin: 0;
	font-size: var(--wp--preset--font-size--medio);
	overflow-wrap: anywhere;
}

.vb-parceiro__nome a {
	color: var(--vb-tinta);
	text-decoration: none;
}

.vb-parceiro__nome a:hover {
	color: var(--vb-petroleo);
	text-decoration: underline;
}

.vb-parceiro__tipo {
	margin: 0.25rem 0 0;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-parceiro__revisao {
	margin: var(--vb-esp-2) 0 0;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-parceiro__acoes {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vb-esp-2);
	padding-top: var(--vb-esp-3);
	border-top: 1px solid var(--vb-borda);
}

.vb-dados {
	display: grid;
	gap: 0.375rem;
	margin: var(--vb-esp-2) 0 0;
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-dados div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* O rótulo vai ao lado do valor só quando o próprio card tem largura para isso. */
.vb-parceiro__corpo {
	container-type: inline-size;
}

@container (min-width: 22rem) {
	.vb-dados div {
		grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
		gap: var(--vb-esp-2);
	}
}

.vb-dados dt {
	color: var(--vb-suave);
}

.vb-dados dd {
	margin: 0;
}

/* ---------- 10. Serviços e especialidades ---------- */
.vb-servicos {
	display: grid;
	gap: var(--vb-esp-4);
}

.vb-servicos__tipo {
	margin: 0 0 var(--vb-esp-2);
	font-size: var(--wp--preset--font-size--medio);
	color: var(--vb-petroleo-escuro);
}

.vb-servicos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vb-borda);
}

.vb-servico {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem var(--vb-esp-3);
	padding-block: var(--vb-esp-2);
	border-bottom: 1px solid var(--vb-borda);
}

.vb-servico__nome {
	font-weight: 600;
}

.vb-servico__local {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-especialidades {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2 12rem;
	column-gap: var(--vb-esp-4);
}

.vb-especialidades li {
	break-inside: avoid;
}

.vb-especialidades a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vb-alvo);
}

@media (min-width: 60em) {
	.vb-especialidades {
		columns: 4 12rem;
	}
}

/* ---------- 11. Estado vazio e listas de conteúdo ---------- */
.vb-vazio {
	max-width: 40rem;
	padding: var(--vb-esp-5) clamp(1rem, 4vw, 2.5rem);
	border-radius: var(--vb-raio-g);
	background: var(--vb-agua);
}

.vb-vazio__titulo {
	margin: 0 0 var(--vb-esp-2);
	font-size: var(--wp--preset--font-size--grande);
}

.vb-vazio p {
	margin: 0 0 var(--vb-esp-4);
	color: var(--vb-suave);
}

.vb-lista-conteudos {
	display: grid;
	gap: var(--vb-esp-4);
	max-width: var(--vb-medida);
}

.vb-resumo__titulo {
	margin: 0 0 var(--vb-esp-1);
	font-size: var(--wp--preset--font-size--medio);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vb-esp-1);
	margin-top: var(--vb-esp-5);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--vb-alvo);
	min-height: var(--vb-alvo);
	padding-inline: 0.75rem;
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-pilula);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--vb-petroleo);
	border-color: var(--vb-petroleo);
	color: var(--vb-branco);
}

/* ---------- 12. Rodapé ---------- */
.vb-rodape {
	margin-top: var(--vb-esp-6);
	background: var(--vb-rodape);
	color: var(--vb-branco);
}

.vb-rodape :focus-visible {
	outline-color: var(--vb-foco-escuro);
}

.vb-rodape a {
	color: var(--vb-rodape-link);
}

.vb-rodape a:hover {
	color: var(--vb-branco);
}

.vb-rodape__interno {
	display: grid;
	gap: var(--vb-esp-5);
	padding-block: var(--vb-esp-6) var(--vb-esp-5);
}

.vb-rodape__marca .vb-logo img {
	height: 3rem;
}

.vb-rodape__slogan {
	margin: var(--vb-esp-2) 0 0;
	color: var(--vb-rodape-texto);
}

.vb-rodape__titulo {
	margin: 0 0 var(--vb-esp-3);
	color: var(--vb-branco);
	font-size: var(--wp--preset--font-size--base);
}

.vb-rodape__lista {
	display: grid;
	gap: var(--vb-esp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--vb-rodape-texto);
}

.vb-rodape__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
}

.vb-rodape__lista--icones li,
.vb-rodape__endereco {
	display: flex;
	gap: var(--vb-esp-2);
	align-items: flex-start;
}

.vb-rodape__lista--icones .vb-icone,
.vb-rodape__endereco .vb-icone {
	margin-top: 0.3em;
	color: var(--vb-rodape-link);
}

.vb-rodape__lista--icones a {
	min-height: auto;
}

.vb-rodape__endereco {
	font-style: normal;
	color: var(--vb-rodape-texto);
}

.vb-rodape__base {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--vb-rodape-texto);
}

.vb-rodape__interno--base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--vb-esp-2);
	padding-block: var(--vb-esp-4);
}

.vb-rodape__interno--base p {
	margin: 0;
}

@media (min-width: 40em) {
	.vb-rodape__interno {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vb-rodape__interno--base {
		display: flex;
	}
}

@media (min-width: 60em) {
	.vb-rodape__interno {
		grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr;
	}
}

/* ---------- 13. Barra de atalhos no celular ---------- */
.vb-barra-movel {
	position: fixed;
	inset: auto 0 0;
	z-index: 30;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vb-esp-2);
	padding: var(--vb-esp-2) var(--vb-margem) calc(var(--vb-esp-2) + env(safe-area-inset-bottom, 0px));
	background: var(--vb-branco);
	border-top: 1px solid var(--vb-borda);
}

.vb-barra-movel .vb-botao {
	padding-inline: 0.5rem;
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-com-barra {
	/* A barra soma a área segura do aparelho; o conteúdo nunca fica atrás dela. */
	padding-bottom: calc(var(--vb-barra-movel) + env(safe-area-inset-bottom, 0px));
}

/* A-4: rótulo curto só onde o espaço exige (barra fixa em telas estreitas). */
.vb-rotulo-curto {
	display: none;
}

@media (max-width: 29.99em) {
	.vb-barra-movel .vb-rotulo-longo {
		display: none;
	}

	.vb-barra-movel .vb-rotulo-curto {
		display: inline;
	}
}

@media (min-width: 60em) {
	.vb-barra-movel {
		display: none;
	}

	.vb-com-barra {
		padding-bottom: 0;
	}

	/* Cabeçalho fixo só no computador (no celular preserva a área útil). */
	.vb-cabecalho-fixo .vb-cabecalho {
		position: sticky;
		top: 0;
	}

	.admin-bar.vb-cabecalho-fixo .vb-cabecalho {
		top: 32px;
	}
}

/* ---------- 14. Guia de componentes (somente local) ---------- */
.vb-guia__aviso {
	padding: var(--vb-esp-2) var(--vb-esp-3);
	border-left: 4px solid var(--vb-foco);
	background: var(--vb-agua);
}

.vb-guia__cores {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: var(--vb-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-guia__amostra {
	display: block;
	height: 4rem;
	margin-bottom: var(--vb-esp-1);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-m);
}

/* ---------- 15. Catálogo público (Fase 4) ---------- */
.vb-pagina__cabecalho {
	max-width: var(--vb-medida);
	margin-bottom: var(--vb-esp-4);
}

.vb-pagina__intro {
	margin: 0;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--medio);
}

.vb-catalogo__filtros {
	padding: var(--vb-esp-4) clamp(1rem, 4vw, 2rem);
	border-radius: var(--vb-raio-g);
	background: var(--vb-agua);
}

.vb-filtros__enviar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vb-esp-3);
}

.vb-chips__limpar {
	display: inline-flex;
	align-items: center;
	min-height: var(--vb-alvo);
	font-weight: 600;
}

.vb-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vb-esp-2);
	margin-top: var(--vb-esp-3);
}

.vb-chips__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	color: var(--vb-suave);
}

.vb-chips__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vb-esp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: var(--vb-alvo);
	padding: 0.375rem 0.75rem 0.375rem 1rem;
	border: 1.5px solid var(--vb-petroleo);
	border-radius: var(--vb-raio-pilula);
	background: var(--vb-branco);
	color: var(--vb-petroleo-escuro);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	text-decoration: none;
}

.vb-chip:hover {
	background: var(--vb-agua);
}

.vb-catalogo__resultados {
	margin-top: var(--vb-esp-4);
}

.vb-contagem {
	margin: 0 0 var(--vb-esp-3);
	font-weight: 600;
	color: var(--vb-tinta);
}

.vb-servico__info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem var(--vb-esp-3);
	min-width: 0;
}

.vb-servico .vb-botao--texto {
	min-height: var(--vb-alvo);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* Ficha de parceiro e serviço */
.vb-ficha__cabecalho {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--vb-esp-3);
	align-items: start;
	margin-bottom: var(--vb-esp-4);
}

.vb-ficha__cabecalho--sem-marca {
	display: block;
}

.vb-ficha__cabecalho .vb-pagina__titulo {
	margin-bottom: var(--vb-esp-1);
}

.vb-ficha__tipo {
	margin: 0 0 var(--vb-esp-1);
	color: var(--vb-suave);
	font-weight: 600;
}

.vb-ficha__descricao {
	margin-bottom: var(--vb-esp-5);
}

.vb-locais {
	margin-top: var(--vb-esp-4);
}

.vb-local {
	margin-bottom: var(--vb-esp-4);
	padding: var(--vb-esp-4);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-m);
}

.vb-local__cidade {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 var(--vb-esp-3);
	font-size: var(--wp--preset--font-size--medio);
	color: var(--vb-petroleo-escuro);
}

.vb-unidade + .vb-unidade {
	margin-top: var(--vb-esp-3);
	padding-top: var(--vb-esp-3);
	border-top: 1px solid var(--vb-borda);
}

.vb-unidade__nome {
	margin: 0;
	font-weight: 700;
}

.vb-unidade__endereco {
	margin: 0.25rem 0 0;
	font-style: normal;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-unidade__tipo {
	margin: var(--vb-esp-2) 0 0.25rem;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	color: var(--vb-suave);
}

.vb-unidade__servicos,
.vb-local__parceiros {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-unidade__servicos a,
.vb-local__parceiros a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	font-weight: 600;
}

.vb-local__parceiros li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--vb-esp-2);
}

.vb-local__unidade {
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-local__acao {
	margin-top: var(--vb-esp-3);
}

.vb-filtro-cidade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vb-esp-2);
	margin-bottom: var(--vb-esp-4);
}

.vb-filtro-cidade label {
	font-weight: 600;
}

.vb-filtro-cidade select {
	min-height: var(--vb-alvo);
	padding: 0.5rem 0.75rem;
	border: 1.5px solid var(--vb-borda-forte);
	border-radius: var(--vb-raio-p);
	background: var(--vb-branco);
	color: var(--vb-tinta);
	font: inherit;
}

.vb-especialidades--indice {
	margin-top: var(--vb-esp-4);
}

.vb-especialidades__qtd {
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-indisponivel {
	max-width: 46rem;
}

@media (min-width: 60em) {
	.vb-ficha__cabecalho {
		grid-template-columns: 6rem minmax(0, 1fr);
	}

	.vb-ficha__marca {
		width: 6rem;
		height: 6rem;
	}
}

/* ---------- 16. Chamada para contato e rodapé (Fase 5) ---------- */
.vb-cta {
	margin-top: var(--vb-esp-5);
	padding: var(--vb-esp-4) clamp(1rem, 4vw, 2rem);
	border-left: 6px solid var(--vb-turquesa);
	border-radius: var(--vb-raio-m);
	background: var(--vb-agua);
}

.vb-cta__titulo {
	margin: 0 0 var(--vb-esp-1);
	font-size: var(--wp--preset--font-size--medio);
}

.vb-cta p {
	margin: 0 0 var(--vb-esp-3);
	color: var(--vb-suave);
}

.vb-rodape__mapa {
	margin: var(--vb-esp-2) 0 0;
	padding-left: 1.85rem;
}

/* ---------- 17. Contato e artigos (Fase 5) ---------- */
.vb-contato__grade {
	display: grid;
	gap: var(--vb-esp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-top: var(--vb-esp-3);
}

.vb-contato__item {
	padding: var(--vb-esp-4);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-m);
	background: var(--vb-branco);
}

.vb-contato__item--destaque {
	border-color: var(--vb-whatsapp);
}

.vb-contato__rotulo {
	margin: 0 0 0.25rem;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
}

.vb-contato__valor {
	margin: 0 0 var(--vb-esp-2);
	font-style: normal;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.vb-contato__obs {
	color: var(--vb-suave);
	font-weight: 400;
}

.vb-contato__aviso {
	max-width: var(--vb-medida);
	margin-top: var(--vb-esp-4);
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-artigos {
	display: grid;
	gap: var(--vb-esp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.vb-artigo__imagem {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--vb-raio-m);
	margin-bottom: var(--vb-esp-2);
}

.vb-artigo__titulo {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--medio);
}

.vb-artigo__data {
	margin: 0 0 var(--vb-esp-1);
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-artigo__resumo {
	margin: 0;
}

/* ---------- 18. Página inicial (Fase 5) ---------- */
.vb-inicio-secao {
	padding-block: var(--vb-esp-6);
}

.vb-inicio-secao__interno {
	width: 100%;
	max-width: var(--vb-largura);
	margin-inline: auto;
	padding-inline: var(--vb-margem);
}

.vb-inicio-secao + .vb-inicio-secao {
	border-top: 1px solid var(--vb-borda);
}

/* Faixas em água: consulta guiada e busca logo abaixo do destaque, e o "Como funciona". */
.vb-inicio-secao--consulta,
.vb-inicio-secao--busca,
.vb-inicio-secao--como-funciona {
	background: var(--vb-agua);
}

.vb-inicio-secao--consulta + .vb-inicio-secao,
.vb-inicio-secao--busca + .vb-inicio-secao,
.vb-inicio-secao--como-funciona + .vb-inicio-secao,
.vb-inicio-secao + .vb-inicio-secao--como-funciona {
	border-top: 0;
}

.vb-inicio-secao--busca {
	padding-block: var(--vb-esp-5);
}

.vb-inicio-secao__mais {
	margin: var(--vb-esp-4) 0 0;
}

/* Campanhas: sem rotação automática; sem JS, aparecem empilhadas. */
.vb-campanhas {
	background: var(--vb-branco);
}

.vb-campanha {
	display: grid;
	gap: var(--vb-esp-4);
	align-items: center;
	width: 100%;
	max-width: var(--vb-largura);
	margin-inline: auto;
	padding: var(--vb-esp-5) var(--vb-margem);
}

.vb-campanha + .vb-campanha {
	border-top: 1px solid var(--vb-borda);
}

.vb-campanhas--js .vb-campanha + .vb-campanha {
	border-top: 0;
}

.vb-campanha[hidden] {
	display: none;
}

.vb-campanha__titulo {
	margin: 0;
	max-width: 20ch;
	font-size: var(--wp--preset--font-size--destaque);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--vb-petroleo-escuro);
}

.vb-campanha__apoio {
	max-width: 46ch;
	margin: var(--vb-esp-3) 0 var(--vb-esp-4);
	font-size: var(--wp--preset--font-size--medio);
	color: var(--vb-suave);
}

.vb-campanha__visual {
	display: flex;
	justify-content: center;
}

.vb-campanha__visual picture {
	display: block;
	width: 100%;
}

/* Proporção fixa (16:10 no celular, 4:3 no desktop): a troca de campanha não
   desloca o conteúdo abaixo. */
.vb-campanha__imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--vb-raio-g);
}

.vb-campanhas__controles {
	display: none;
}

.vb-campanhas--js .vb-campanhas__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vb-esp-3);
	padding: 0 var(--vb-margem) var(--vb-esp-4);
}

.vb-campanhas__anterior,
.vb-campanhas__proxima {
	display: inline-grid;
	place-items: center;
	width: var(--vb-alvo);
	height: var(--vb-alvo);
	padding: 0;
	border: 1px solid var(--vb-borda-forte);
	border-radius: 50%;
	background: var(--vb-branco);
	color: var(--vb-petroleo-escuro);
	cursor: pointer;
}

.vb-campanhas__anterior:hover,
.vb-campanhas__proxima:hover {
	border-color: var(--vb-petroleo);
	background: var(--vb-agua);
}

.vb-campanhas__posicao {
	min-width: 9rem;
	margin: 0;
	text-align: center;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-previa {
	margin: 0;
	padding: var(--vb-esp-2) var(--vb-margem);
	background: var(--vb-petroleo-escuro);
	color: var(--vb-branco);
	text-align: center;
	font-weight: 600;
}

/* Especialidades em destaque */
.vb-cartoes-especialidades {
	display: grid;
	gap: var(--vb-esp-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-cartao-especialidade {
	display: grid;
	align-content: start;
	gap: 0.35rem;
	height: 100%;
	padding: var(--vb-esp-3);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-m);
	background: var(--vb-branco);
	color: var(--vb-tinta);
	text-decoration: none;
}

.vb-cartao-especialidade:hover {
	border-color: var(--vb-turquesa);
}

.vb-cartao-especialidade__icone {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--vb-esp-1);
	border-radius: 50%;
	background: var(--vb-agua);
	color: var(--vb-petroleo);
}

.vb-cartao-especialidade__imagem {
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--vb-esp-1);
	border-radius: 50%;
	object-fit: cover;
}

.vb-cartao-especialidade__nome {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.vb-cartao-especialidade__qtd {
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* Consultas, exames e procedimentos */
.vb-tipos {
	display: grid;
	gap: var(--vb-esp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.vb-tipo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--vb-esp-3);
	border-top: 4px solid var(--vb-turquesa);
}

.vb-tipo__nome {
	margin: 0;
	font-size: var(--wp--preset--font-size--medio);
	color: var(--vb-petroleo-escuro);
}

.vb-tipo__qtd {
	margin: 0.25rem 0 var(--vb-esp-2);
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-tipo__lista {
	flex: 1;
	margin: 0 0 var(--vb-esp-2);
	padding: 0;
	list-style: none;
}

.vb-tipo__lista a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vb-alvo);
}

/* Como funciona: etapas em sequência real (por isso numeradas). */
.vb-etapas {
	display: grid;
	gap: var(--vb-esp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0 0 var(--vb-esp-4);
	padding: 0;
	list-style: none;
	counter-reset: vb-etapa;
}

.vb-etapa {
	counter-increment: vb-etapa;
}

.vb-etapa::before {
	content: counter(vb-etapa);
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--vb-esp-2);
	border-radius: 50%;
	background: var(--vb-petroleo);
	color: var(--vb-branco);
	font-weight: 700;
}

.vb-etapa__titulo {
	margin: 0 0 var(--vb-esp-1);
	font-size: var(--wp--preset--font-size--medio);
	color: var(--vb-petroleo-escuro);
}

.vb-etapa p {
	margin: 0;
	max-width: 34ch;
}

/* Quem somos */
.vb-sobre {
	display: grid;
	gap: var(--vb-esp-4);
	align-items: center;
}

.vb-sobre .vb-texto > .vb-botao {
	margin-top: var(--vb-esp-3);
}

.vb-sobre__imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--vb-raio-g);
}

@media (min-width: 60em) {
	.vb-campanha {
		grid-template-columns: 1.15fr 0.85fr;
		padding-block: var(--vb-esp-6);
	}

	.vb-campanha__visual {
		justify-content: flex-end;
	}

	.vb-campanha__imagem {
		aspect-ratio: 4 / 3;
	}

	.vb-sobre--imagem {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vb-campanhas *,
	.vb-inicio * {
		scroll-behavior: auto;
		transition: none;
		animation: none;
	}
}

/* ---------- 19. Conversão (Fase 6A) ---------- */
.vb-aviso-privacidade {
	max-width: var(--vb-medida);
	margin: var(--vb-esp-2) 0 0;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* ---------- 20. Serviços de Saúde, Onde Atendemos e consulta guiada (R2) ---------- */
.vb-grupos {
	display: grid;
	gap: var(--vb-esp-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-grupo {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--vb-esp-1);
	padding: var(--vb-esp-4);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-g);
	background: var(--vb-branco);
}

.vb-grupo:hover {
	border-color: var(--vb-turquesa);
}

.vb-grupo__icone,
.vb-area__icone {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--vb-esp-1);
	border-radius: 50%;
	background: var(--vb-agua);
	color: var(--vb-petroleo);
}

.vb-grupo__icone .vb-icone {
	width: 1.5rem;
	height: 1.5rem;
}

.vb-grupo__nome {
	margin: 0;
	font-size: var(--wp--preset--font-size--medio);
}

.vb-grupo__link {
	color: var(--vb-tinta);
	text-decoration: none;
}

/* O card inteiro é clicável; o nome continua sendo o link (um só alvo para leitores de tela). */
.vb-grupo__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.vb-grupo__texto {
	margin: 0;
	color: var(--vb-suave);
}

.vb-areas {
	display: grid;
	gap: var(--vb-esp-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-area {
	display: grid;
	align-content: start;
	gap: 0.35rem;
	padding: var(--vb-esp-3);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-m);
	background: var(--vb-branco);
	scroll-margin-top: 7rem;
}

.vb-area:target {
	border-color: var(--vb-turquesa);
	box-shadow: 0 0 0 2px var(--vb-turquesa);
}

.vb-area__nome {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	overflow-wrap: anywhere;
}

.vb-area__texto {
	margin: 0;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-area__selo {
	justify-self: start;
	margin: var(--vb-esp-1) 0 0;
	padding: 0.2rem 0.6rem;
	border-radius: var(--vb-raio-p);
	line-height: 1.35;
	background: var(--vb-agua);
	color: var(--vb-petroleo-escuro);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-lista-areas {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2 14rem;
	column-gap: var(--vb-esp-4);
}

.vb-lista-areas li {
	break-inside: avoid;
	padding-block: 0.65rem;
	border-bottom: 1px solid var(--vb-borda);
	scroll-margin-top: 7rem;
}

.vb-lista-areas li:target {
	color: var(--vb-petroleo);
}

.vb-lista-areas__nome {
	font-weight: 600;
}

.vb-lista-areas__texto {
	display: block;
	color: var(--vb-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.vb-municipios {
	display: grid;
	gap: var(--vb-esp-2);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-municipios li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.35rem 0.6rem;
	line-height: 1.25;
	border-radius: var(--vb-raio-p);
	background: var(--vb-agua);
}

.vb-municipios .vb-icone {
	flex: none;
	color: var(--vb-petroleo);
}

.vb-consulta__campos {
	display: grid;
	gap: var(--vb-esp-3);
}

.vb-consulta__situacao {
	margin: var(--vb-esp-3) 0;
	padding-left: 0.85rem;
	border-left: 4px solid var(--vb-turquesa);
	font-weight: 600;
}

.vb-consulta__intro {
	margin: 0 0 var(--vb-esp-4);
}

/* Sem JavaScript os seletores não teriam efeito: fica só o botão com a mensagem institucional. */
.no-js .vb-consulta__campos,
.no-js .vb-consulta__situacao {
	display: none;
}

.vb-editorial .vb-cta + .vb-secao,
.vb-editorial .vb-secao + .vb-secao--agua {
	margin-top: var(--vb-esp-5);
}

.vb-editorial__voltar {
	margin: var(--vb-esp-5) 0 0;
}

@media (min-width: 40em) {
	.vb-consulta__campos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60em) {
	.vb-lista-areas {
		columns: 3 14rem;
	}
}

/* ---------- 21. Página inicial editorial e submenu (R3) ---------- */
/* Entre 1200 e 1299 px os 7 itens não cabem com o rótulo do WhatsApp no
   cabeçalho: fica só o ícone; o nome acessível continua completo. */
@media (min-width: 75em) and (max-width: 81.24em) {
	.vb-botao--cabecalho > span:not(.screen-reader-text) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.vb-botao--cabecalho {
		padding-inline: 0.75rem;
	}
}

.vb-navegacao__item-sub {
	position: relative;
}

/* Celular e tablet: os grupos ficam sempre visíveis, recuados sob "Serviços de Saúde". */
.vb-submenu {
	margin: 0;
	padding: 0 0 0 var(--vb-esp-3);
	list-style: none;
}

.vb-submenu a {
	font-weight: 400;
}

.vb-submenu__botao {
	display: none;
}

.vb-exemplos-grade {
	display: grid;
	gap: var(--vb-esp-4);
}

.vb-exemplos {
	padding: var(--vb-esp-4);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-g);
	background: var(--vb-branco);
}

.vb-exemplos__titulo {
	margin: var(--vb-esp-1) 0 var(--vb-esp-2);
	font-size: var(--wp--preset--font-size--medio);
}

.vb-exemplos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2 10rem;
	column-gap: var(--vb-esp-3);
}

.vb-exemplos__lista li {
	break-inside: avoid;
	padding-block: 0.35rem;
}

.vb-municipios--compacta li {
	min-height: 2.25rem;
	padding-block: 0.25rem;
}

.vb-municipios__aviso {
	margin: 0 0 var(--vb-esp-3);
}

@media (min-width: 60em) {
	.vb-exemplos-grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 75em) {
	.vb-navegacao__item-sub {
		display: flex;
		align-items: center;
		gap: 0.15rem;
	}

	.js .vb-submenu__botao {
		display: inline-grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border: 0;
		border-radius: var(--vb-raio-p);
		background: transparent;
		color: var(--vb-tinta);
		cursor: pointer;
	}

	.vb-submenu__botao .vb-icone {
		transition: transform 0.15s ease;
	}

	.vb-submenu__botao[aria-expanded="true"] .vb-icone {
		transform: rotate(180deg);
	}

	.vb-navegacao__item-sub.esta-atual > a {
		color: var(--vb-petroleo);
	}

	/* Computador: lista suspensa aberta pelo botão (Esc e clique fora fecham). */
	.vb-submenu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 16rem;
		padding: var(--vb-esp-2);
		border: 1px solid var(--vb-borda);
		border-radius: var(--vb-raio-m);
		background: var(--vb-branco);
		box-shadow: 0 0.75rem 2rem rgb(9 59 72 / 12%);
	}

	.vb-navegacao__item-sub.esta-aberto > .vb-submenu {
		display: block;
	}

	.vb-submenu a {
		padding-inline: var(--vb-esp-2);
		border-radius: var(--vb-raio-p);
	}

	.vb-submenu a:hover {
		background: var(--vb-agua);
	}
}

/* ---------- 22. Páginas comerciais (R4) ---------- */
.vb-nota-fixa {
	max-width: var(--vb-medida);
	margin: var(--vb-esp-5) 0 0;
	padding: var(--vb-esp-3) var(--vb-esp-4);
	border: 1px solid var(--vb-borda-forte);
	border-radius: var(--vb-raio-m);
	font-weight: 600;
}

/* Segurança extra: o plugin já remove os avisos internos do HTML público. */
.vb-nota-interna {
	display: none;
}

.vb-cta .vb-aviso-privacidade {
	margin: var(--vb-esp-2) 0 0;
}

.vb-texto .wp-block-details {
	padding: var(--vb-esp-2) var(--vb-esp-3);
	border: 1px solid var(--vb-borda);
	border-radius: var(--vb-raio-m);
}

.vb-texto .wp-block-details summary {
	min-height: var(--vb-alvo);
	font-weight: 600;
	cursor: pointer;
}

/* ---------- 23. Banners de destaque: campanhas "arte completa" e carrossel ---------- */
/* Com JavaScript, as campanhas ficam na mesma área (a maior define a altura):
   trocar de campanha não desloca o restante da página. */
.vb-campanhas--js .vb-campanhas__slides {
	display: grid;
}

.vb-campanhas--js .vb-campanha {
	grid-area: 1 / 1;
	transition: opacity 0.35s ease, visibility 0.35s;
}

.vb-campanhas--js .vb-campanha:not(.esta-ativa) {
	visibility: hidden;
	opacity: 0;
}

.vb-campanha--arte {
	gap: 0;
	align-items: stretch;
	max-width: none;
	padding: 0;
}

.vb-campanha__arte {
	display: none;
}

.vb-campanha__foto {
	order: -1;
}

.vb-campanha__foto picture {
	display: block;
}

.vb-campanha__foto-imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.vb-campanha--arte .vb-campanha__texto {
	padding: var(--vb-esp-4) var(--vb-margem);
	background: linear-gradient(180deg, var(--vb-agua), var(--vb-branco));
}

.vb-campanha--arte .vb-campanha__titulo {
	max-width: 22ch;
	font-size: clamp(1.75rem, 6vw, 2.5rem);
}

.vb-campanha--arte .vb-campanha__apoio {
	margin: var(--vb-esp-2) 0 var(--vb-esp-3);
	font-size: var(--wp--preset--font-size--base);
}

.vb-campanhas__pontos {
	display: flex;
	gap: 0.25rem;
}

/* Alvo de 24 px (WCAG 2.5.8) com o ponto desenhado dentro. */
.vb-campanhas__ponto {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--vb-raio-pilula);
	background: transparent;
	cursor: pointer;
}

.vb-campanhas__ponto::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-radius: var(--vb-raio-pilula);
	background: var(--vb-borda-forte);
	transition: width 0.2s ease, background-color 0.2s ease;
}

.vb-campanhas__ponto[aria-current="true"]::before {
	width: 1.375rem;
	background: var(--vb-petroleo);
}

/* Os indicadores já mostram a posição; o texto fica para leitores de tela. */
.vb-campanhas__pontos + .vb-campanhas__posicao {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.vb-campanhas__controles {
	position: relative;
}

.vb-campanhas--js .vb-campanhas__controles {
	padding-top: var(--vb-esp-3);
}

@media (min-width: 40em) and (max-width: 59.99em) {
	.vb-campanha--arte {
		grid-template-columns: 1.1fr 0.9fr;
	}

	.vb-campanha--arte .vb-campanha__foto {
		order: 1;
	}

	.vb-campanha--arte .vb-campanha__foto {
		align-self: center;
	}

	.vb-campanha--arte .vb-campanha__foto-imagem {
		aspect-ratio: 4 / 3;
	}

	.vb-campanha--arte .vb-campanha__texto {
		align-self: center;
		background: none;
	}
}

/* Computador: a arte inteira, de ponta a ponta (até 1920 px), sem cortes. */
@media (min-width: 60em) {
	.vb-campanha--arte {
		display: block;
		max-width: 120rem;
		margin-inline: auto;
	}

	.vb-campanha--arte .vb-campanha__arte {
		display: block;
	}

	.vb-campanha__arte-imagem {
		display: block;
		width: 100%;
		height: auto;
	}

	.vb-campanha__arte:focus-visible {
		outline: var(--vb-foco-largura) solid var(--vb-foco);
		outline-offset: calc(-2 * var(--vb-foco-largura));
	}

	/* Título e descrição da arte seguem disponíveis para leitores de tela. */
	.vb-campanha--arte .vb-campanha__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* A arte já é o link do botão desenhado: sem segundo link. */
	.vb-campanha--arte .vb-campanha__acoes-movel,
	.vb-campanha--arte .vb-campanha__foto {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vb-campanhas--js .vb-campanha,
	.vb-campanhas__ponto::before {
		transition: none;
	}
}