/**
 * Vile Design – Landing Pages Locais
 * Front-end. Prefixo .vdlp- em tudo, para não colidir com o tema nem com
 * outros plugins.
 *
 * Contraste: todas as combinações de texto/fundo daqui foram medidas contra
 * WCAG 2.1 AA (4.5:1 texto normal, 3:1 texto grande e componentes de UI).
 */

.vdlp-lp {
	/* Escala de espaçamento — múltiplos de 4, para o ritmo vertical não variar. */
	--vdlp-s1: 4px;
	--vdlp-s2: 8px;
	--vdlp-s3: 12px;
	--vdlp-s4: 16px;
	--vdlp-s5: 24px;
	--vdlp-s6: 32px;
	--vdlp-s7: 48px;
	--vdlp-s8: 64px;
	--vdlp-s9: 88px;

	--vdlp-radius: 14px;
	--vdlp-radius-sm: 10px;
	--vdlp-max: 1200px;

	/* Neutros derivados, não cinzas aleatórios. */
	--vdlp-tinta: var(--vdlp-texto, #16202c);
	--vdlp-tinta-2: #4a5462;
	--vdlp-tinta-3: #667286;
	--vdlp-linha: #e2e6ec;
	--vdlp-superficie: #f6f8fb;
	--vdlp-escuro: #071e4a;

	--vdlp-sombra-1: 0 1px 2px rgba(7, 30, 74, 0.06), 0 2px 8px rgba(7, 30, 74, 0.06);
	--vdlp-sombra-2: 0 4px 12px rgba(7, 30, 74, 0.08), 0 12px 32px rgba(7, 30, 74, 0.10);
	--vdlp-sombra-3: 0 18px 50px rgba(7, 30, 74, 0.22);

	color: var(--vdlp-tinta);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;

	/*
	 * Largura total dentro do container do tema.
	 *
	 * Alguns temas (Astra, entre outros) usam display:flex no wrapper do
	 * conteúdo. Como item flex, o <main> sem estas regras encolhe para a
	 * largura máxima do conteúdo (1200px do .vdlp-container) e deixa uma
	 * faixa vazia à direita — o retângulo branco. flex-basis 100% + width
	 * 100% forçam a ocupação total, e min-width 0 evita estouro horizontal.
	 * Em temas com display:block as regras são inócuas.
	 */
	width: 100%;
	flex: 1 1 100%;
	min-width: 0;
	align-self: stretch;
}

/* ---------- Tema escuro (identidade Vile Design) ---------- */

/*
 * Só troca de tokens. Nenhuma regra de componente é duplicada aqui, então
 * não existe a possibilidade de o claro e o escuro divergirem em layout ao
 * longo do tempo — só em cor.
 *
 * Contrastes medidos contra o fundo #0a0a0a e contra os cards #171717:
 *
 *   texto principal  #f5f5f5   18.2:1 / 16.4:1   (mínimo AA 4.5)
 *   texto secundário #c9ccd1   12.3:1 / 11.1:1
 *   texto terciário  #9aa0a8    7.5:1 /  6.8:1
 *   vermelho da marca #e63946   4.8:1            (usado como texto/acento)
 *   borda de campo   #6b7078    3.6:1            (mínimo AA de UI 3:1)
 */
.vdlp-lp--escuro {
	--vdlp-tinta: #f5f5f5;
	--vdlp-tinta-2: #c9ccd1;
	--vdlp-tinta-3: #9aa0a8;
	--vdlp-linha: #2a2a2a;
	--vdlp-superficie: #141414;
	--vdlp-escuro: #000;
	--vdlp-fundo: #0a0a0a;
	--vdlp-cartao: #171717;

	/* Véu sobre a foto do topo. Preto no escuro, azul-marinho no claro. */
	--vdlp-veu-1: rgba(0, 0, 0, 0.84);
	--vdlp-veu-2: rgba(0, 0, 0, 0.66);

	--vdlp-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
	--vdlp-sombra-2: 0 4px 12px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.45);
	--vdlp-sombra-3: 0 18px 50px rgba(0, 0, 0, 0.7);

	background: var(--vdlp-fundo);
	color: var(--vdlp-tinta);
}

/* Superfícies que no tema claro eram brancas. */
.vdlp-lp--escuro .vdlp-servico,
.vdlp-lp--escuro .vdlp-area__bloco,
.vdlp-lp--escuro .vdlp-faq__item,
.vdlp-lp--escuro .vdlp-form,
.vdlp-lp--escuro .vdlp-card-contato,
.vdlp-lp--escuro .vdlp-carrossel__figura,
.vdlp-lp--escuro .vdlp-carrossel__legenda,
.vdlp-lp--escuro .vdlp-difs,
.vdlp-lp--escuro .vdlp-carrossel__seta {
	background: var(--vdlp-cartao);
	border-color: var(--vdlp-linha);
	color: var(--vdlp-tinta);
}

.vdlp-lp--escuro .vdlp-secao--clara {
	background: var(--vdlp-superficie);
}

/*
 * O fio entre duas seções de mesma cor precisa clarear no escuro: a linha
 * de #2a2a2a que separa bem no claro some contra o preto.
 */
.vdlp-lp--escuro .vdlp-secao--clara + .vdlp-secao--clara::before,
.vdlp-lp--escuro .vdlp-secao:not(.vdlp-secao--clara) + .vdlp-secao:not(.vdlp-secao--clara)::before {
	background: #333;
}

/*
 * Botão primário. Branco sobre o vermelho da marca dá 4.17:1 e reprova no
 * AA — é o que o site usa hoje. Em vez de alterar o vermelho da identidade,
 * troca-se a cor do rótulo: quase-preto sobre #e63946 dá 4.75:1 e passa,
 * mantendo a cor da marca intacta.
 */
.vdlp-lp--escuro .vdlp-btn--orcamento {
	background: var(--vdlp-primaria, #e63946);
	color: #0a0a0a;
}

.vdlp-lp--escuro .vdlp-btn--ghost {
	border-color: #5a5a5a;
	color: var(--vdlp-tinta);
}

.vdlp-lp--escuro .vdlp-tag {
	background: #202020;
	border-color: #333;
	color: var(--vdlp-tinta-2);
}

/* Bordas de campo precisam de 3:1 como componente de UI. #6b7078 = 3.6:1. */
.vdlp-lp--escuro .vdlp-form input,
.vdlp-lp--escuro .vdlp-form select,
.vdlp-lp--escuro .vdlp-form textarea {
	background: #101010;
	border-color: #6b7078;
	color: var(--vdlp-tinta);
}

.vdlp-lp--escuro .vdlp-form input::placeholder,
.vdlp-lp--escuro .vdlp-form textarea::placeholder {
	color: var(--vdlp-tinta-3);
}

/*
 * Topo. O gradiente azul do módulo original não existe na identidade da
 * Vile Design: aqui é preto com uma brasa vermelha no canto, que é o
 * tratamento usado em /manutencao-wordpress-campinas/.
 */
.vdlp-lp--escuro .vdlp-hero {
	background:
		radial-gradient(1000px 500px at 8% -10%, rgba(230, 57, 70, 0.28), transparent 62%),
		radial-gradient(700px 420px at 96% 4%, rgba(230, 57, 70, 0.10), transparent 58%),
		linear-gradient(160deg, #140708 0%, #0a0a0a 100%);
}

.vdlp-lp--escuro .vdlp-eyebrow--claro {
	color: #ff8b95;
}

.vdlp-lp *,
.vdlp-lp *::before,
.vdlp-lp *::after {
	box-sizing: border-box;
}

.vdlp-container {
	width: 100%;
	max-width: var(--vdlp-max);
	margin: 0 auto;
	padding: 0 var(--vdlp-s5);
}

.vdlp-lp h1,
.vdlp-lp h2,
.vdlp-lp h3 {
	line-height: 1.15;
	margin: 0 0 0.5em;
	font-weight: 800;
	letter-spacing: -0.018em;
}

.vdlp-secao {
	/*
	 * 88px fixos abafavam o celular, onde a mesma folga custa quase meia
	 * tela de rolagem. O clamp mantém o respiro no desktop e devolve a
	 * altura no telefone.
	 */
	padding: clamp(48px, 7vw, 88px) 0;
}

.vdlp-secao--clara {
	background: var(--vdlp-superficie);
}

/*
 * Duas seções da mesma cor encostadas viram um bloco único sem divisão —
 * era o caso de "O que oferecemos" + "Onde atendemos", 1.600px de cinza
 * contínuo. Como o carrossel muda de posição a cada página, a vizinhança
 * não é previsível no PHP; resolver no CSS cobre todas as combinações.
 *
 * A separação é um fio na largura do conteúdo, não a troca da cor de
 * fundo: inverter o fundo obrigaria a inverter também os cards e as tags
 * de dentro, e cada combinação nova de vizinhança abriria um caso de
 * contraste para conferir.
 */
.vdlp-secao--clara + .vdlp-secao--clara,
.vdlp-secao:not(.vdlp-secao--clara) + .vdlp-secao:not(.vdlp-secao--clara) {
	position: relative;
}

.vdlp-secao--clara + .vdlp-secao--clara::before,
.vdlp-secao:not(.vdlp-secao--clara) + .vdlp-secao:not(.vdlp-secao--clara)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--vdlp-max), calc(100% - var(--vdlp-s9)));
	height: 1px;
	background: var(--vdlp-linha);
}

.vdlp-secao__cabecalho {
	max-width: 760px;
	margin: 0 auto var(--vdlp-s7);
	text-align: center;
}

.vdlp-secao__titulo {
	font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.35rem);
	margin: 0 0 var(--vdlp-s3);
	text-wrap: balance;
}

.vdlp-secao__sub {
	font-size: 1.05rem;
	color: var(--vdlp-tinta-2);
	margin: 0;
}

/* Etiqueta pequena acima dos títulos — dá hierarquia sem pesar. */
.vdlp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--vdlp-s2);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: var(--vdlp-s4);
	color: var(--vdlp-primaria, #0b3d91);
}

.vdlp-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--vdlp-secundaria, #f5a623);
	border-radius: 2px;
}

.vdlp-eyebrow--claro {
	color: #ffd88a;
}

/* ---------- Breadcrumb ---------- */

.vdlp-breadcrumb {
	background: var(--vdlp-superficie);
	border-bottom: 1px solid var(--vdlp-linha);
	font-size: 0.86rem;
	padding: var(--vdlp-s3) 0;
}

.vdlp-breadcrumb__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vdlp-s2);
	color: var(--vdlp-tinta-3);
}

.vdlp-breadcrumb a {
	color: var(--vdlp-primaria, #0b3d91);
	text-decoration: none;
	font-weight: 600;
}

.vdlp-breadcrumb a:hover {
	text-decoration: underline;
}

.vdlp-breadcrumb__sep {
	opacity: 0.5;
}

/* ---------- Botões ---------- */

.vdlp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vdlp-s2);
	padding: 16px 28px;
	min-height: 52px;
	border: 2px solid transparent;
	border-radius: var(--vdlp-radius-sm);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, background-color 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.vdlp-btn svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.vdlp-btn:hover {
	transform: translateY(-2px);
}

.vdlp-btn:active {
	transform: translateY(0);
}

.vdlp-btn:focus-visible {
	outline: 3px solid #ffd88a;
	outline-offset: 3px;
}

.vdlp-btn--orcamento {
	background: var(--vdlp-secundaria, #f5a623);
	color: #12232e;
	box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}

.vdlp-btn--orcamento:hover {
	box-shadow: 0 10px 26px rgba(245, 166, 35, 0.45);
}

.vdlp-btn--whatsapp {
	background: #15803d;
	color: #fff;
	box-shadow: 0 4px 14px rgba(21, 128, 61, 0.3);
}

.vdlp-btn--whatsapp:hover {
	box-shadow: 0 10px 26px rgba(21, 128, 61, 0.4);
}

.vdlp-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	backdrop-filter: blur(4px);
}

.vdlp-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
}

.vdlp-btn--full {
	width: 100%;
}

.vdlp-btn[disabled],
.vdlp-btn[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

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

.vdlp-hero {
	position: relative;
	background:
		radial-gradient(1100px 520px at 12% -10%, rgba(58, 122, 224, 0.5), transparent 60%),
		radial-gradient(800px 420px at 95% 0%, rgba(245, 166, 35, 0.2), transparent 55%),
		linear-gradient(160deg, var(--vdlp-primaria, #0b3d91) 0%, var(--vdlp-escuro) 100%);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: var(--vdlp-s9) 0 var(--vdlp-s8);
	overflow: hidden;
	isolation: isolate;
}

/*
 * Textura de fundo do topo. Trocada da silhueta de tenda do módulo original
 * por uma malha de nós e conexões — a metáfora que serve para agência é
 * rede/integração, não estrutura física.
 */
.vdlp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.09;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M30 30 L110 70 L30 120 M110 70 L200 40 M110 70 L190 130 M200 40 L190 130'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='110' cy='70' r='4.5'/%3E%3Ccircle cx='30' cy='120' r='3'/%3E%3Ccircle cx='200' cy='40' r='3'/%3E%3Ccircle cx='190' cy='130' r='3'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 240px 160px;
}

.vdlp-hero--img::after {
	opacity: 0;
}

.vdlp-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--vdlp-s8);
	align-items: start;
}

.vdlp-hero__h1 {
	font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
	margin-bottom: var(--vdlp-s4);
	text-wrap: balance;
}

.vdlp-hero__sub {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
	font-weight: 600;
	color: #cfe0ff;
	margin: 0 0 var(--vdlp-s4);
}

.vdlp-hero__desc {
	font-size: 1.06rem;
	margin: 0 0 var(--vdlp-s6);
	color: rgba(255, 255, 255, 0.94);
	max-width: 54ch;
}

.vdlp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vdlp-s3);
	margin-bottom: var(--vdlp-s6);
}

/* Provas rápidas embaixo do hero */
.vdlp-hero__provas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vdlp-s5) var(--vdlp-s7);
	padding-top: var(--vdlp-s5);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
	margin: 0;
}

.vdlp-prova {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vdlp-prova__valor {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: #ffd88a;
}

.vdlp-prova__rotulo {
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.86);
}

/* ---------- Formulário ---------- */

.vdlp-form-wrap {
	background: #fff;
	color: var(--vdlp-tinta);
	border-radius: var(--vdlp-radius);
	padding: var(--vdlp-s6);
	box-shadow: var(--vdlp-sombra-3);
	scroll-margin-top: 100px;
	position: relative;
}

.vdlp-form-wrap::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	border-radius: var(--vdlp-radius) var(--vdlp-radius) 0 0;
	background: linear-gradient(90deg, var(--vdlp-secundaria, #f5a623), #ffcf7a);
}

.vdlp-form__titulo {
	font-size: 1.4rem;
	margin: var(--vdlp-s2) 0 var(--vdlp-s1);
}

.vdlp-form__sub {
	font-size: 0.92rem;
	color: var(--vdlp-tinta-2);
	margin: 0 0 var(--vdlp-s5);
}

.vdlp-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vdlp-s4);
	margin-bottom: var(--vdlp-s5);
}

.vdlp-field--full {
	grid-column: 1 / -1;
}

.vdlp-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--vdlp-tinta);
}

.vdlp-field input,
.vdlp-field select,
.vdlp-field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid #7a8492;
	border-radius: var(--vdlp-radius-sm);
	font: inherit;
	font-size: 0.98rem;
	background: #fff;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vdlp-field input::placeholder,
.vdlp-field textarea::placeholder {
	color: var(--vdlp-tinta-3);
}

.vdlp-field input:focus,
.vdlp-field select:focus,
.vdlp-field textarea:focus {
	outline: none;
	border-color: var(--vdlp-primaria, #0b3d91);
	box-shadow: 0 0 0 4px rgba(11, 61, 145, 0.14);
}

.vdlp-field input[aria-invalid="true"] {
	border-color: #b3261e;
	box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.12);
}

/* Honeypot: fora da tela, mas não display:none (bots ignoram display:none). */
.vdlp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vdlp-form__msg {
	margin: var(--vdlp-s4) 0 0;
	font-size: 0.92rem;
	min-height: 1.2em;
}

.vdlp-form__msg--ok {
	color: #146c37;
	font-weight: 700;
}

.vdlp-form__msg--erro {
	color: #b3261e;
	font-weight: 700;
}

.vdlp-form__seguranca {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--vdlp-tinta-3);
	margin: var(--vdlp-s4) 0 0;
}

/* ---------- Faixa de diferenciais ---------- */

.vdlp-difs {
	background: #fff;
	border-bottom: 1px solid var(--vdlp-linha);
	padding: var(--vdlp-s6) 0;
}

.vdlp-difs__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--vdlp-s4) var(--vdlp-s5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vdlp-difs__item {
	display: flex;
	align-items: flex-start;
	gap: var(--vdlp-s3);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

.vdlp-difs__item::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: rgba(21, 128, 61, 0.1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146c37' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 15px;
	background-position: center;
	background-repeat: no-repeat;
}

/* ---------- Sobre ---------- */

.vdlp-sobre__inner {
	display: grid;
	grid-template-columns: 1.55fr 0.95fr;
	gap: var(--vdlp-s8);
	align-items: start;
}

.vdlp-sobre__texto h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem);
	margin-bottom: var(--vdlp-s5);
}

.vdlp-sobre__texto p {
	margin: 0 0 1.15em;
	color: var(--vdlp-tinta-2);
	max-width: 68ch;
}

.vdlp-sobre__texto p:first-of-type {
	font-size: 1.1rem;
	color: var(--vdlp-tinta);
}

/* Card de contato */
.vdlp-card-contato {
	background: linear-gradient(165deg, #fff, var(--vdlp-superficie));
	border: 1px solid var(--vdlp-linha);
	border-radius: var(--vdlp-radius);
	padding: var(--vdlp-s6);
	position: sticky;
	top: var(--vdlp-s5);
	box-shadow: var(--vdlp-sombra-1);
	text-align: center;
}

.vdlp-card-contato h3 {
	font-size: 1.15rem;
	margin-bottom: var(--vdlp-s4);
}

.vdlp-card-contato__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--vdlp-s2);
	font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.45rem);
	font-weight: 800;
	color: var(--vdlp-primaria, #0b3d91);
	text-decoration: none;
	margin-bottom: var(--vdlp-s4);
	letter-spacing: -0.01em;
	/* Número de telefone quebrando em três linhas é o tipo de detalhe que
	   destrói a confiança justamente no ponto de contato. */
	white-space: nowrap;
}

.vdlp-card-contato__tel svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.vdlp-card-contato__tel:hover {
	text-decoration: underline;
}

.vdlp-card-contato__horario {
	font-size: 0.85rem;
	color: var(--vdlp-tinta-2);
	margin: var(--vdlp-s4) 0 0;
	padding-top: var(--vdlp-s4);
	border-top: 1px solid var(--vdlp-linha);
}

/* ---------- Serviços ---------- */

/*
 * Flex, não grid.
 *
 * Com grid, sete serviços em três colunas deixam um card órfão sozinho na
 * última linha, encostado à esquerda.
 * O número de serviços varia por cidade, então não dá para resolver com
 * regra fixa de contagem. No flex a última linha centraliza sozinha,
 * qualquer que seja o total.
 */
.vdlp-servicos__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vdlp-s5);
}

.vdlp-servicos__grid > .vdlp-servico {
	flex: 1 1 290px;
	/* Teto para que duas ou três sobrando não virem cards gigantes. */
	max-width: 420px;
}

.vdlp-servico {
	background: #fff;
	border: 1px solid var(--vdlp-linha);
	border-radius: var(--vdlp-radius);
	padding: var(--vdlp-s6);
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.vdlp-servico:hover {
	transform: translateY(-4px);
	box-shadow: var(--vdlp-sombra-2);
	border-color: transparent;
}

.vdlp-servico__icone {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient(150deg, rgba(11, 61, 145, 0.1), rgba(11, 61, 145, 0.03));
	margin-bottom: var(--vdlp-s4);
}

.vdlp-servico__icone svg {
	width: 24px;
	height: 24px;
	stroke: var(--vdlp-primaria, #0b3d91);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vdlp-servico__nome {
	font-size: 1.1rem;
	margin-bottom: var(--vdlp-s2);
}

.vdlp-servico__desc {
	font-size: 0.95rem;
	color: var(--vdlp-tinta-2);
	margin: 0;
}

/* ---------- Carrossel de imagens ---------- */

/*
 * Rolagem nativa com scroll-snap, sem biblioteca.
 *
 * O motivo é peso: qualquer carrossel de prateleira traz 30–60 KB de JS
 * para fazer o que o navegador já faz sozinho, e esta página é otimizada
 * para Google Ads — cada KB no caminho crítico sai do orçamento de LCP.
 * Sem JS o carrossel continua funcionando: vira uma faixa que se arrasta
 * com o dedo ou com a barra de rolagem. O JS só acrescenta as setas.
 */
.vdlp-carrossel-secao {
	padding: var(--vdlp-s9) 0;
	overflow: hidden;
}

.vdlp-carrossel {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--vdlp-s3);
	padding: 0 var(--vdlp-s5);
	max-width: calc(var(--vdlp-max) + var(--vdlp-s9));
	margin: 0 auto;
}

.vdlp-carrossel__pista {
	display: flex;
	gap: var(--vdlp-s4);
	list-style: none;
	margin: 0;
	padding: 4px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.vdlp-carrossel__pista::-webkit-scrollbar {
	display: none;
}

/* O foco do teclado precisa aparecer: a pista é rolável por setas. */
.vdlp-carrossel__pista:focus-visible {
	outline: 3px solid var(--vdlp-primaria);
	outline-offset: 3px;
	border-radius: var(--vdlp-radius);
}

.vdlp-carrossel__item {
	flex: 0 0 auto;
	width: min(440px, 78vw);
	margin: 0;
	scroll-snap-align: center;
}

.vdlp-carrossel__figura {
	margin: 0;
	border-radius: var(--vdlp-radius);
	overflow: hidden;
	background: var(--vdlp-superficie);
	box-shadow: var(--vdlp-sombra-1);
}

.vdlp-carrossel__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vdlp-carrossel__figura:hover .vdlp-carrossel__img {
	transform: scale(1.04);
}

.vdlp-carrossel__legenda {
	padding: var(--vdlp-s3) var(--vdlp-s4);
	font-size: 14px;
	/* #4a5568 sobre #f6f8fb = 7.4:1. */
	color: var(--vdlp-tinta-2);
	background: #fff;
}

.vdlp-carrossel__seta {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--vdlp-linha);
	background: #fff;
	color: var(--vdlp-primaria);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--vdlp-sombra-1);
	transition: background 0.2s, transform 0.2s, opacity 0.2s;
}

.vdlp-carrossel__seta svg {
	width: 22px;
	height: 22px;
}

.vdlp-carrossel__seta:hover {
	background: var(--vdlp-superficie);
	transform: scale(1.06);
}

.vdlp-carrossel__seta:focus-visible {
	outline: 3px solid var(--vdlp-primaria);
	outline-offset: 2px;
}

.vdlp-carrossel__seta[disabled] {
	opacity: 0.35;
	cursor: default;
	transform: none;
}

/*
 * Sem JS as setas não teriam função. Elas só entram quando o script marca
 * o carrossel como pronto — assim ninguém clica num botão morto.
 */
.vdlp-carrossel:not(.is-pronto) .vdlp-carrossel__seta {
	display: none;
}

@media (max-width: 782px) {
	.vdlp-carrossel {
		padding: 0 var(--vdlp-s4);
	}

	.vdlp-carrossel__seta {
		display: none !important;
	}

	.vdlp-carrossel__pista {
		/* No celular o dedo já resolve; o recuo evita corte na borda. */
		scroll-padding: 0 var(--vdlp-s4);
	}
}

/* ---------- Área de atendimento ---------- */

.vdlp-area__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vdlp-s7);
	max-width: 980px;
	margin: 0 auto;
}

.vdlp-area__bloco {
	background: #fff;
	border: 1px solid var(--vdlp-linha);
	border-radius: var(--vdlp-radius);
	padding: var(--vdlp-s6);
}

.vdlp-area__sub {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vdlp-tinta-3);
	margin: 0 0 var(--vdlp-s4);
}

.vdlp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vdlp-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vdlp-tag {
	background: var(--vdlp-superficie);
	border: 1px solid var(--vdlp-linha);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 0.88rem;
	color: var(--vdlp-tinta-2);
}

/* ---------- Conteúdo extra ---------- */

.vdlp-prosa {
	max-width: 720px;
	margin: 0 auto;
	color: var(--vdlp-tinta-2);
}

.vdlp-prosa h2,
.vdlp-prosa h3 {
	margin-top: 1.6em;
	color: var(--vdlp-tinta);
}

/*
 * O conteúdo complementar costuma ser uma sequência de "título curto +
 * parágrafo" — as regiões atendidas, por exemplo. Sem marcação visual isso
 * vira uma parede de 1.600px de texto corrido, que é o que a página de
 * galpões mostrava. O fio à esquerda dá ao olho onde pousar entre um
 * assunto e o próximo, sem precisar mudar o texto.
 */
.vdlp-prosa h3 {
	position: relative;
	padding-left: var(--vdlp-s4);
	font-size: 1.15rem;
	margin-bottom: 0.4em;
}

.vdlp-prosa h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 3px;
	border-radius: 3px;
	/*
	 * Fallback obrigatório: --vdlp-primaria é injetada em :root pelo PHP a
	 * partir das configurações. Sem o valor de reserva, qualquer contexto
	 * que carregue este CSS sem aquele bloco (um preview, um editor) fica
	 * com o fio invisível.
	 */
	background: var(--vdlp-primaria, #0b3d91);
}

.vdlp-prosa h3 + p {
	padding-left: var(--vdlp-s4);
}

/* ---------- Depoimentos ---------- */

/*
 * O HTML de dentro vem de um plugin externo (Trustindex), então não dá para
 * estilizar por classe — o markup pode mudar a qualquer atualização. O que
 * fazemos aqui é só dar o contêiner: largura, centralização e garantia de
 * que nada do widget estoure a página na horizontal.
 */
.vdlp-depoimentos__widget {
	max-width: 1000px;
	margin: 0 auto;
	overflow-x: clip;
}

.vdlp-depoimentos__widget img {
	max-width: 100%;
	height: auto;
}

/* Widgets de avaliação costumam abrir com margem própria; anula a de cima. */
.vdlp-depoimentos__widget > *:first-child {
	margin-top: 0;
}

.vdlp-depoimentos__widget > *:last-child {
	margin-bottom: 0;
}

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

.vdlp-faq__lista {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--vdlp-s3);
}

.vdlp-faq__item {
	background: #fff;
	border: 1px solid var(--vdlp-linha);
	border-radius: var(--vdlp-radius-sm);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vdlp-faq__item[open] {
	border-color: rgba(11, 61, 145, 0.3);
	box-shadow: var(--vdlp-sombra-1);
}

.vdlp-faq__pergunta {
	padding: 18px 56px 18px 22px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	list-style: none;
	position: relative;
}

.vdlp-faq__pergunta::-webkit-details-marker {
	display: none;
}

.vdlp-faq__pergunta::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background-color: rgba(11, 61, 145, 0.08);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d91' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-size: 13px;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.2s ease;
}

.vdlp-faq__item[open] .vdlp-faq__pergunta::after {
	transform: rotate(180deg);
}

.vdlp-faq__resposta {
	padding: 0 22px 20px;
	color: var(--vdlp-tinta-2);
}

.vdlp-faq__resposta p {
	margin: 0 0 0.8em;
}

.vdlp-faq__resposta p:last-child {
	margin-bottom: 0;
}

/* ---------- Relacionadas ---------- */

.vdlp-relacionadas__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vdlp-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vdlp-relacionadas__lista a {
	display: inline-block;
	padding: 10px 20px;
	background: #fff;
	border: 1px solid var(--vdlp-linha);
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--vdlp-primaria, #0b3d91);
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.vdlp-relacionadas__lista a:hover {
	background: var(--vdlp-primaria, #0b3d91);
	border-color: var(--vdlp-primaria, #0b3d91);
	color: #fff;
	transform: translateY(-2px);
}

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

.vdlp-cta-final {
	position: relative;
	background:
		radial-gradient(700px 340px at 20% 0%, rgba(58, 122, 224, 0.45), transparent 60%),
		linear-gradient(150deg, var(--vdlp-primaria, #0b3d91), var(--vdlp-escuro));
	color: #fff;
	padding: var(--vdlp-s9) 0;
	text-align: center;
	overflow: hidden;
}

.vdlp-cta-final h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

.vdlp-cta-final p {
	margin: 0 auto var(--vdlp-s6);
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.05rem;
}

.vdlp-cta-final__botoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vdlp-s3);
}

/* ---------- Barra fixa mobile ---------- */

.vdlp-barra-mobile {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9990;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--vdlp-linha);
	box-shadow: 0 -4px 20px rgba(7, 30, 74, 0.14);
	padding: var(--vdlp-s2) calc(var(--vdlp-s2) + env(safe-area-inset-right)) calc(var(--vdlp-s2) + env(safe-area-inset-bottom)) calc(var(--vdlp-s2) + env(safe-area-inset-left));
	gap: var(--vdlp-s2);
}

.vdlp-barra-mobile__btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 9px 4px;
	border-radius: var(--vdlp-radius-sm);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	min-height: 52px;
}

.vdlp-barra-mobile__btn svg {
	width: 19px;
	height: 19px;
}

.vdlp-barra-mobile__btn--orcamento {
	background: var(--vdlp-secundaria, #f5a623);
	color: #12232e;
}

.vdlp-barra-mobile__btn--whatsapp {
	background: #15803d;
	color: #fff;
}

.vdlp-barra-mobile__btn--tel {
	background: var(--vdlp-primaria, #0b3d91);
	color: #fff;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1024px) {
	.vdlp-hero__inner,
	.vdlp-sobre__inner {
		grid-template-columns: 1fr;
		gap: var(--vdlp-s7);
	}

	.vdlp-card-contato {
		position: static;
	}

	.vdlp-secao {
		padding: var(--vdlp-s8) 0;
	}
}

@media (max-width: 768px) {
	.vdlp-area__grid {
		grid-template-columns: 1fr;
		gap: var(--vdlp-s5);
	}
}

@media (max-width: 640px) {
	.vdlp-lp {
		font-size: 16px;
		padding-bottom: 76px;
	}

	.vdlp-container {
		padding: 0 var(--vdlp-s4);
	}

	.vdlp-hero {
		padding: var(--vdlp-s7) 0 var(--vdlp-s6);
	}

	.vdlp-secao {
		padding: var(--vdlp-s7) 0;
	}

	.vdlp-form__grid {
		grid-template-columns: 1fr;
	}

	.vdlp-form-wrap {
		padding: var(--vdlp-s5);
	}

	.vdlp-hero__ctas .vdlp-btn {
		width: 100%;
	}

	.vdlp-hero__provas {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--vdlp-s4) var(--vdlp-s3);
	}

	.vdlp-prova__valor {
		font-size: 1.3rem;
	}

	.vdlp-barra-mobile {
		display: flex;
	}
}

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

	.vdlp-btn:hover,
	.vdlp-servico:hover,
	.vdlp-relacionadas__lista a:hover {
		transform: none;
	}
}