/* ==========================================================================
   Quatro4Rodas - folha principal

   As cores e as famílias de fonte NÃO estão aqui: são CSS custom properties
   emitidas pelo PHP a partir do Customizer (inc/tokens.php), no bloco :root
   logo acima deste arquivo. Aqui ficam a escala tipográfica, o espaçamento e
   os raios - decisões de layout, que o cliente não edita.

   Mobile-first: o padrão é o mobile; @media (min-width: 1024px) sobe pro desktop.
   Valores extraídos do mock aprovado (1280px e 390px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Escala - valores fixos, não editáveis pelo painel
   -------------------------------------------------------------------------- */

:root {
	/* Tipografia (mobile). 1rem = 16px, mas respeita o ajuste do navegador. */
	--fs-h1: 2.125rem;      /* 34px */
	--fs-h2: 1.6875rem;     /* 27px - seção com subtítulo */
	--fs-h2-sec: 1.5625rem; /* 25px - demais seções */
	--fs-h3: 1.125rem;      /* 18px */
	--fs-h4: 0.875rem;      /* 14px */
	--fs-lead: 1rem;        /* 16px - parágrafo de apoio do hero */
	--fs-body: 0.9375rem;   /* 15px */
	--fs-sm: 0.875rem;      /* 14px */
	--fs-xs: 0.78125rem;    /* 12.5px */

	--lh-h1: 1.08;
	--lh-tight: 1.2;
	--lh-body: 1.6;

	--ls-h1: -0.03em;
	--ls-h2: -0.02em;

	/* Espaçamento */
	--sp-secao: 44px;
	--sp-gutter: 18px;
	--sp-hero: 26px;

	/* Raios */
	--r-lg: 14px;
	--r-md: 11px;
	--r-sm: 10px;
	--r-pill: 100px;

	/* Estrutura */
	--container: 1120px;
	--container-narrow: 820px;
	--tap: 44px; /* alvo mínimo de toque exigido pelo Google Ads */

	/* Banner inteiro (hero--full), no desktop.

	   Estes três números são o contrato com quem desenha a arte. Enquanto a
	   arte for exportada nesta proporção, ela aparece inteira em qualquer
	   largura de tela — nada de corte.

	   2.6667 = 8/3, ou seja 1920x720. Escolhido para o banner não tomar a tela
	   toda: em monitor de 1920 ele para em 720px e sobra o começo da próxima
	   seção, que é o que convida a rolar. O piso de 460px evita banner raso em
	   notebook estreito. */
	--hero-razao: 2.6667;
	--hero-alt-min: 460px;
	--hero-alt-max: 720px;

	/* Neutros derivados, não editáveis */
	--c-texto: #2b2b2b;
	--c-texto-suave: rgba(0, 0, 0, 0.6);
	--c-texto-fraco: rgba(0, 0, 0, 0.55);
	--c-borda: rgba(0, 0, 0, 0.08);
	--c-branco: #fff;
	--c-sobre-marca: #1f1f1f; /* texto sobre a cor da marca */
}

@media (min-width: 1024px) {
	:root {
		--fs-h1: 3.25rem;      /* 52px */
		--fs-h2: 2.25rem;      /* 36px */
		--fs-h2-sec: 2rem;     /* 32px */
		--fs-h3: 1.25rem;      /* 20px */
		--fs-h4: 1rem;         /* 16px */
		--fs-lead: 1.125rem;   /* 18px */
		--fs-body: 1rem;       /* 16px */
		--fs-sm: 0.96875rem;   /* 15.5px */
		--fs-xs: 0.875rem;     /* 14px */

		--lh-h1: 1.05;

		--sp-secao: 72px;
		--sp-gutter: 44px;
		--sp-hero: 56px;

		--r-md: 12px;
		--r-sm: 9px;
	}
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Âncoras do menu rolam em vez de pular. O bloco prefers-reduced-motion
	   mais abaixo devolve o pulo instantâneo a quem pediu menos movimento. */
	scroll-behavior: smooth;
}

/* A barra fixa cobriria o começo da seção sem esta folga. */
[id] {
	scroll-margin-top: 90px;
}

body {
	margin: 0;
	font-family: var(--f-corpo, system-ui, sans-serif);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-texto);
	background: var(--c-fundo, #fff);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--f-titulo, system-ui, sans-serif);
	color: var(--c-titulo, #252525);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
	font-weight: 900;
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

h2 {
	font-size: var(--fs-h2-sec);
	font-weight: 900;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-h2);
}

h3 {
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1.3;
}

h4 {
	font-size: var(--fs-h4);
	font-weight: 800;
	line-height: 1.25;
}

p {
	margin: 0;
	text-wrap: pretty;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

img,
picture,
video,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
}

a:hover {
	color: var(--c-marca-sombra, #a88400);
}

/* --------------------------------------------------------------------------
   3. Acessibilidade
   -------------------------------------------------------------------------- */

/* Foco visível sempre: nunca remover sem substituir. */
:focus-visible {
	outline: 3px solid var(--c-sobre-marca);
	outline-offset: 2px;
}

/*
 * Superfícies escuras precisam do contorno claro. O padrão é quase preto
 * (--c-sobre-marca, #1f1f1f): sobre o grafite do rodapé e do aviso de cookies
 * ele existe no código e não existe para os olhos de quem navega por teclado.
 */
.rodape :focus-visible,
.consentimento :focus-visible,
.card-serv--destaque :focus-visible,
.hero__slide--full :focus-visible {
	outline-color: var(--c-branco);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 12px 20px;
	font-weight: 700;
	text-decoration: none;
	color: var(--c-sobre-marca);
	background: var(--c-botao, #f5c400);
	transform: translateY(-120%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   4. Layout base
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.secao {
	padding-block: var(--sp-secao);
}

.secao--alt {
	background: var(--c-secao, #f7f5f0);
	border-top: 1px solid var(--c-borda);
}

/* --------------------------------------------------------------------------
   5. Marca - lockup "Quatro (4 rodas) Rodas" do mock, desenhado em CSS
   -------------------------------------------------------------------------- */

.marca {
	display: inline-flex;
	align-items: center;
	/* O texto tem 21px de altura; o alvo de toque precisa de 44px. */
	min-height: var(--tap);
	gap: 0.3em;
	font-family: var(--f-titulo, system-ui, sans-serif);
	font-size: 1.25rem; /* 20px */
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--c-escuro, #333);
	text-decoration: none;
}

.marca:hover {
	color: var(--c-escuro, #333);
}

.marca__rodas {
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.1em;
	width: 1.05em;
	height: 1.05em;
	color: var(--c-marca, #f5c400);
}

.marca__rodas i {
	border: 0.2em solid currentColor;
	border-radius: 50%;
}

.marca--claro,
.marca--claro:hover {
	color: var(--c-branco);
}

.marca--claro .marca__rodas {
	color: var(--c-marca-clara, #ffd62e);
}

@media (min-width: 1024px) {
	.marca {
		font-size: 1.6875rem; /* 27px */
	}
}

/* --------------------------------------------------------------------------
   6. Topbar
   -------------------------------------------------------------------------- */

.topbar {
	background: var(--c-escuro, #333);
	color: rgba(255, 255, 255, 0.8);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding-block: 9px;
	/* O mock traz 11.5px aqui; 12px é o piso de legibilidade que o Google
	   verifica, e a diferença é imperceptível. */
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
}

.topbar__contato {
	display: none;
}

@media (min-width: 1024px) {
	.topbar {
		background: var(--c-fundo, #fff);
		color: var(--c-texto-fraco);
		border-bottom: 1px solid rgba(0, 0, 0, 0.09);
	}

	.topbar__inner {
		justify-content: space-between;
		padding-block: 14px;
		font-size: 0.8125rem; /* 13px */
		text-align: left;
	}

	.topbar__contato {
		display: flex;
		align-items: center;
		gap: 18px;
	}

	.topbar__tel {
		font-weight: 800;
		color: var(--c-sobre-marca);
		text-decoration: none;
	}
}

/* --------------------------------------------------------------------------
   7. Navbar e menu mobile
   -------------------------------------------------------------------------- */

/*
 * A barra acompanha a rolagem e se esconde ao descer, para devolver a tela ao
 * conteúdo, e volta ao subir — que é quando a pessoa está procurando o menu.
 *
 * O transform só existe no estado escondido, nunca no normal: transform cria
 * bloco de contenção, e o drawer do menu (position: fixed) passaria a se
 * posicionar em relação à barra em vez da tela.
 */
.navbar {
	position: sticky;
	top: 0;
	z-index: 95;
	background: var(--c-fundo, #fff);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.is-oculta {
	transform: translateY(-100%);
}

.navbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-block: 14px;
}

.navbar__logo img {
	width: auto;
	max-height: 44px;
}

.navbar__acoes {
	display: flex;
	align-items: center;
	gap: 10px;
}

.navbar__tel,
.navbar__toggle {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	border: 0;
	border-radius: var(--r-sm);
	text-decoration: none;
}

.navbar__tel {
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--c-escuro, #333);
	background: var(--c-secao, #f7f5f0);
}

.navbar__toggle {
	background: var(--c-botao, #f5c400);
}

.navbar__toggle-barras {
	display: grid;
	gap: 4px;
	width: 20px;
}

.navbar__toggle-barras i {
	display: block;
	height: 2px;
	background: var(--c-sobre-marca);
	border-radius: 2px;
}

/* Base (e fallback sem JS): o menu ocupa a linha inteira abaixo da navbar. */
.navbar__nav {
	order: 3;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	width: 100%;
	padding-top: 12px;
}

/* Botão de fechar e overlay só existem no drawer. */
.navbar__fechar,
.navbar__overlay {
	display: none;
}

.navbar__lista {
	display: flex;
	flex-direction: column;
	list-style: none;
}

.navbar__lista a {
	display: block;
	padding: 12px 4px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-escuro, #333);
	text-decoration: none;
}

/* Mobile com JS: drawer lateral deslizando pela direita.
   Usa visibility em vez de display para poder animar - e, de quebra, o
   visibility:hidden tira os links da ordem de tabulacao com o menu fechado. */
@media (max-width: 1023px) {
	.js .navbar__nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 100;
		order: 0;
		gap: 2px;
		width: min(320px, 84vw);
		padding: 16px var(--sp-gutter) 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--c-fundo, #fff);
		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
	}

	.js .navbar__nav.is-aberto {
		visibility: visible;
		transform: translateX(0);
		transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.js .navbar__fechar {
		display: grid;
		place-items: center;
		align-self: flex-end;
		width: var(--tap);
		height: var(--tap);
		margin-bottom: 4px;
		padding: 0;
		border: 0;
		border-radius: var(--r-sm);
		font-size: 1.5rem;
		line-height: 1;
		color: var(--c-escuro, #333);
		background: var(--c-secao, #f7f5f0);
	}

	.js .navbar__lista a {
		padding: 14px 6px;
		font-size: 1.0625rem;
		border-bottom: 1px solid var(--c-borda);
	}

	.js .navbar__nav .btn {
		margin-top: 16px;
	}

	.js .navbar__overlay {
		position: fixed;
		inset: 0;
		z-index: 99;
		display: block;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s ease, visibility 0s linear 0.28s;
	}

	.js .navbar__overlay.is-visivel {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.28s ease;
	}

	/* Trava o scroll do fundo enquanto o drawer esta aberto. */
	body.q4r-travado {
		overflow: hidden;
	}
}

@media (min-width: 1024px) {
	.navbar__inner {
		flex-wrap: nowrap;
		padding-block: 18px;
	}

	.navbar__acoes {
		display: none;
	}

	.navbar__nav,
	.js .navbar__nav {
		order: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 28px;
		width: auto;
		padding-top: 0;
	}

	.navbar__lista {
		flex-direction: row;
		align-items: center;
		gap: 28px;
	}

	.navbar__lista a {
		padding: 0;
		font-size: 0.9375rem;
	}

	.navbar__lista a {
		position: relative;
		transition: color 0.15s ease;
	}

	/* Sublinhado que cresce do centro — sem deslocar o texto ao redor. */
	.navbar__lista a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -6px;
		left: 0;
		height: 2px;
		border-radius: 2px;
		background: var(--c-marca, #f5c400);
		transform: scaleX(0);
		transition: transform 0.18s ease;
	}

	.navbar__lista a:hover,
	.navbar__lista a:focus-visible {
		color: var(--c-marca-sombra, #a88400);
	}

	.navbar__lista a:hover::after,
	.navbar__lista a:focus-visible::after {
		transform: scaleX(1);
	}
}

/* --------------------------------------------------------------------------
   8. Botões
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--tap);
	padding: 15px 24px;
	border: 0;
	border-radius: var(--r-sm);
	font-family: var(--f-corpo, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

/* Resposta ao mouse e ao toque: o botão sobe e a sombra cresce; ao clicar,
   afunda contra a própria sombra. */
.btn {
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn:active {
	transform: translateY(2px);
}

.btn--primario,
.btn--primario:hover {
	color: var(--c-sobre-marca);
	background: var(--c-botao, #f5c400);
	box-shadow: 0 3px 0 var(--c-marca-sombra, #c79f00);
}

.btn--primario:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 var(--c-marca-sombra, #c79f00);
}

.btn--primario:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--c-marca-sombra, #c79f00);
}

.btn--escuro,
.btn--escuro:hover {
	color: var(--c-branco);
	background: var(--c-escuro, #333);
}

.btn--escuro:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* .btn--claro fica na seção 10b, junto do aviso de cookies onde é usado. */

/*
 * Texto escuro sobre o verde, e não branco.
 *
 * Branco sobre #25d366 dá 1,98:1 — reprova na WCAG com folga e é genuinamente
 * difícil de ler no sol. O texto escuro sobe para 8,3:1, mantém o verde que as
 * pessoas reconhecem como WhatsApp, e ainda fica coerente com o botão amarelo
 * ao lado, que também usa texto escuro.
 */
.btn--whatsapp,
.btn--whatsapp:hover {
	color: var(--c-sobre-marca);
	background: #25d366;
}

.btn--whatsapp:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

/* Variante compacta usada dentro da navbar. */
.btn--navbar {
	padding: 13px 22px;
	font-size: 0.9375rem;
	border-radius: 8px;
	box-shadow: 0 2px 0 var(--c-marca-sombra, #c79f00);
}

/* --------------------------------------------------------------------------
   9. Rodapé
   -------------------------------------------------------------------------- */

.rodape {
	padding-top: 36px;
	padding-bottom: 84px; /* espaço para a barra fixa mobile */
	color: var(--c-branco);
	background: var(--c-escuro, #333);
}

.rodape__grid {
	display: grid;
	gap: 26px;
	padding-bottom: 28px;
}

.rodape__bloco {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rodape__logo img {
	width: auto;
	max-height: 40px;
}

.rodape__titulo {
	font-family: var(--f-corpo, system-ui, sans-serif);
	font-size: 0.75rem; /* piso de legibilidade: 12px */
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* .45 dava 3.9:1 sobre o grafite; .62 sobe para ~5.9:1 (WCAG AA pede 4.5). */
	color: rgba(255, 255, 255, 0.62);
}

.rodape__endereco {
	font-size: 0.90625rem; /* 14.5px */
	font-style: normal;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.65);
}

/* Mesma técnica dos serviços: alvo de 44px sem alterar o espaçamento. */
.rodape__tel,
.rodape__rota {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding-block: 10px;
	margin-block: -10px;
	font-weight: 700;
	color: var(--c-marca-clara, #ffd62e);
	text-decoration: none;
}

.rodape__tel {
	font-size: 1rem;
	font-weight: 800;
}

.rodape__rota {
	font-size: 0.9375rem;
}

.rodape__tel:hover,
.rodape__rota:hover {
	color: var(--c-marca-clara, #ffd62e);
	text-decoration: underline;
}

.rodape__horarios {
	margin: 0;
	font-size: 0.90625rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.75);
}

.rodape__horario {
	display: flex;
	gap: 6px;
}

.rodape__horario dt::after {
	content: " -";
}

.rodape__horario dd {
	margin: 0;
}

.rodape__mapa {
	width: 100%;
	height: 160px;
	border: 0;
	border-radius: var(--r-md);
}

.rodape__base {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.75rem;
	/* .4 dava 3.42:1 sobre o grafite; .62 sobe para ~5.9:1. */
	color: rgba(255, 255, 255, 0.62);
}

.rodape__lista-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
}

.rodape__lista-legal a {
	display: inline-flex;
	align-items: center;
	padding-block: 15px;
	margin-block: -15px;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.rodape__lista-legal a:hover {
	color: var(--c-branco);
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.rodape {
		padding-top: 52px;
		padding-bottom: 0;
	}

	/*
	 * Duas linhas: a marca ocupa a primeira sozinha, e endereço e horários
	 * começam juntos na segunda. Antes o "Horário de atendimento" nascia na
	 * altura da logo e o rodapé parecia torto.
	 */
	.rodape__grid {
		grid-template-columns: 1fr 1fr 1.3fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"marca .        mapa"
			"nap   horarios mapa";
		gap: 18px 40px;
		padding-bottom: 40px;
	}

	.rodape__marca {
		grid-area: marca;
	}

	.rodape__bloco--nap {
		grid-area: nap;
	}

	.rodape__bloco--horarios {
		grid-area: horarios;
	}

	.rodape__bloco--mapa {
		grid-area: mapa;
	}

	.rodape__bloco {
		gap: 14px;
	}

	.rodape__endereco,
	.rodape__horarios {
		font-size: 0.9375rem;
	}

	.rodape__mapa {
		height: 180px;
	}

	.rodape__base {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-block: 18px;
		font-size: 0.8125rem;
	}
}

/* --------------------------------------------------------------------------
   10. Barra fixa mobile
   -------------------------------------------------------------------------- */

.barra-mobile {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 12px var(--sp-gutter);
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--c-fundo, #fff);
	border-top: 1px solid var(--c-borda);
}

/* Sem o WhatsApp, o botão principal ocupa a barra inteira. */
.barra-mobile--solo {
	grid-template-columns: 1fr;
	box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}

.barra-mobile .btn {
	padding: 15px 10px;
	font-size: 0.9375rem;
}

@media (min-width: 1024px) {
	.barra-mobile {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   10b. Aviso de cookies

   Cobre a barra fixa enquanto está na tela: dois blocos empilhados no rodapé
   do celular esconderiam os botões de conversão.
   -------------------------------------------------------------------------- */

.consentimento {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px var(--sp-gutter);
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	color: var(--c-branco);
	background: var(--c-escuro, #333);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}

/*
 * O display:flex das partes internas passa por cima do atributo [hidden], que
 * só vale enquanto o display for o padrão. Sem esta regra o aviso continuava
 * na tela ao lado do painel de preferências, oferecendo "Aceitar tudo" duas
 * vezes na mesma decisão.
 */
.consentimento [hidden] {
	display: none;
}

.consentimento__aviso {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.consentimento__texto {
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.consentimento__texto strong {
	display: block;
	margin-bottom: 4px;
	font-size: 1rem;
	color: var(--c-branco);
}

.consentimento__texto a {
	color: var(--c-marca-clara, #ffd62e);
}

.consentimento__acoes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

/* ------------------------------------------------ painel de preferências */

.consentimento__preferencias {
	max-height: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	/*
	 * A folga existe por causa do overflow: ele recorta tudo que encosta na
	 * borda da caixa. Sem ela, o fundo do "Voltar" no hover e os 2px que os
	 * botões sobem ao clicar apareciam cortados — e a barra de rolagem piscava
	 * a cada clique. Não é caso de z-index: recorte de overflow não se resolve
	 * com empilhamento.
	 */
	padding: 6px 8px;
	scrollbar-gutter: stable;
}

.consentimento__cabecalho {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.consentimento__subtitulo {
	font-size: 1.0625rem;
	color: var(--c-branco);
}

.consentimento__voltar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/*
	 * Alvo de 44px sem margem negativa. A margem negativa puxava o botão para
	 * fora da caixa do painel, e o overflow recortava o fundo do hover na
	 * borda de cima — o mesmo recorte de antes, só que 12px acima.
	 */
	padding: 12px;
	margin: 0;
	border: 0;
	border-radius: var(--r-sm);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.75);
	background: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/*
 * O hover clareia e ganha fundo, em vez de deslocar o botão: deslocar levava a
 * seta para fora do padding e ela aparecia cortada na borda do painel.
 */
.consentimento__voltar:hover {
	color: var(--c-branco);
	background: rgba(255, 255, 255, 0.14);
}

/* Só a seta anda, e ela tem espaço de sobra para isso. */
.consentimento__voltar span {
	transition: transform 0.15s ease;
}

.consentimento__voltar:hover span {
	transform: translateX(-3px);
}

.consentimento__categoria {
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.consentimento__switch {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.consentimento__switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.consentimento__trilho {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.25);
	transition: background 0.15s ease;
}

.consentimento__trilho::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--c-branco);
	transition: transform 0.15s ease;
}

.consentimento__switch input:checked + .consentimento__trilho {
	background: var(--c-marca, #f5c400);
}

.consentimento__switch input:checked + .consentimento__trilho::after {
	transform: translateX(16px);
}

.consentimento__switch input:disabled + .consentimento__trilho {
	opacity: 0.55;
	cursor: not-allowed;
}

.consentimento__switch input:focus-visible + .consentimento__trilho {
	outline: 2px solid var(--c-marca-clara, #ffd62e);
	outline-offset: 2px;
}

.consentimento__nome {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--c-branco);
}

.consentimento__nome em {
	margin-left: 6px;
	font-size: 0.75rem;
	font-weight: 400;
	font-style: normal;
	color: rgba(255, 255, 255, 0.55);
}

.consentimento__desc {
	margin-top: 4px;
	padding-left: 48px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

.consentimento__preferencias .consentimento__acoes {
	margin-top: 16px;
}

/* Link discreto para rever a escolha. */
.consentimento__reabrir {
	position: fixed;
	bottom: 12px;
	left: 12px;
	z-index: 80;
	padding: 8px 14px;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	color: var(--c-texto-fraco);
	background: var(--c-branco);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.consentimento .btn {
	padding: 13px 16px;
	font-size: 0.9375rem;
}

/* O aviso é renderizado depois da barra no HTML, então o seletor precisa
   olhar do body para baixo em vez de usar irmão adjacente. */
body:has(.consentimento) .barra-mobile {
	display: none;
}

/*
 * O hover morava numa lista junto com o estado base (".btn--claro, .btn--claro:hover"),
 * de mesma especificidade e mais abaixo no arquivo — o que anulava o hover
 * declarado antes. Os botões secundários do aviso de cookies ficavam inertes.
 *
 * O contorno vai em inset box-shadow, e não em border: borda mudaria a altura
 * e o botão secundário ficaria 2px maior que o "Aceitar tudo" ao lado.
 */
.btn--claro {
	color: var(--c-branco);
	background: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.btn--claro:hover {
	color: var(--c-branco);
	background: rgba(255, 255, 255, 0.34);
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 6px 16px rgba(0, 0, 0, 0.32);
}

.btn--claro:active {
	transform: translateY(1px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

@media (min-width: 1024px) {
	.consentimento {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 24px;
		padding: 18px var(--sp-gutter);
	}

	.consentimento__texto {
		max-width: 70ch;
	}

	.consentimento__aviso {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 24px;
	}

	.consentimento__acoes {
		flex: none;
		grid-auto-flow: column;
		grid-template-columns: none;
	}

	.consentimento__preferencias {
		max-width: 640px;
		margin-inline: auto;
	}

	.consentimento__reabrir {
		bottom: 16px;
		left: 16px;
	}
}

/* --------------------------------------------------------------------------
   11. Cabeçalho das seções
   -------------------------------------------------------------------------- */

.secao__titulo {
	font-size: var(--fs-h2-sec);
}

.secao__titulo--grande {
	font-size: var(--fs-h2);
}

.secao__sub {
	margin-top: 6px;
	font-size: var(--fs-body);
	color: var(--c-texto-fraco);
}

/* Botão opcional ao fim de uma seção. */
.secao__cta {
	margin-top: 28px;
}

.secao__cta .btn {
	width: 100%;
}

@media (min-width: 1024px) {
	.secao__cta {
		margin-top: 36px;
		text-align: center;
	}

	.secao__cta .btn {
		width: auto;
		min-width: 240px;
	}
}

.secao__titulo + .diferenciais__grid,
.secao__titulo + .servicos__grid,
.secao__sub + .diferenciais__grid {
	margin-top: 24px;
}

@media (min-width: 1024px) {
	.secao__titulo + .diferenciais__grid,
	.secao__titulo + .servicos__grid,
	.secao__sub + .diferenciais__grid {
		margin-top: 36px;
	}
}

/* --------------------------------------------------------------------------
   12. Hero - carrossel
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
}

.hero__viewport {
	position: relative;
	overflow: hidden;
	background: var(--c-secao, #f7f5f0);
}

/* Com JS os slides ficam lado a lado e a trilha desliza.
   Sem JS eles empilham em coluna e todos continuam visíveis. */
.hero__trilha {
	display: grid;
	grid-auto-flow: row;
}

.js .hero__trilha {
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	/* Deixa a rolagem vertical passar; só o arrasto horizontal e nosso. */
	touch-action: pan-y;
}

.hero__slide {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* O 56px embaixo reserva a faixa dos pontinhos e do botão de pausar. */
	padding: var(--sp-hero) var(--sp-gutter) 56px;
}

.hero__slide--claro {
	background: transparent;
}

.hero__slide--escuro {
	color: var(--c-branco);
	background: var(--c-escuro, #333);
}

.hero__texto {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hero__selo {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--c-sobre-marca);
	background: var(--c-branco);
}

.hero__slide--escuro .hero__selo {
	border-color: transparent;
	color: var(--c-marca-clara, #ffd62e);
	background: rgba(255, 255, 255, 0.12);
}

/* Vale para o h1 do primeiro slide e para os h2 dos demais. */
.hero__titulo {
	font-size: var(--fs-h1);
	font-weight: 900;
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

.hero__slide--escuro .hero__titulo {
	color: var(--c-branco);
}

.hero__desc {
	max-width: 44ch;
	font-size: var(--fs-lead);
	color: var(--c-texto-suave);
}

.hero__slide--escuro .hero__desc {
	color: rgba(255, 255, 255, 0.7);
}

.hero__botoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hero__slide--escuro .btn--primario {
	background: var(--c-marca-clara, #ffd62e);
	box-shadow: none;
}

/* No celular os dois botões tem o mesmo peso e a mesma largura: um link
   sublinhado ao lado de um botão cheio fica desequilibrado e some no toque.
   No desktop volta a ser o link discreto do mock. */
.hero__link-sec {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	padding: 15px 24px;
	border: 1.5px solid rgba(0, 0, 0, 0.18);
	border-radius: var(--r-sm);
	font-weight: 700;
	text-decoration: none;
}

.hero__slide--escuro .hero__link-sec {
	color: var(--c-branco);
	border-color: rgba(255, 255, 255, 0.35);
}

/* Altura fixa reserva o espaço antes da imagem chegar: zero CLS. */
.hero__img,
.hero__video,
.hero__placeholder {
	width: 100%;
	height: 180px;
	object-fit: cover;
	/* O ponto de enquadramento escolhido no painel. */
	object-position: var(--foco, 50% 50%);
	border-radius: var(--r-md);
}

/* Escurecimento sólido, quando o painel define uma intensidade. */
.hero__slide--tingido .hero__midia {
	position: relative;
}

.hero__slide--tingido .hero__midia::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--r-md);
	background: var(--overlay, #000);
	opacity: var(--overlay-alpha, 0.45);
	pointer-events: none;
}

/* Banner inteiro clicável, no modo "só a mídia". */
.hero__link-total {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.hero__placeholder {
	display: block;
	background: rgba(0, 0, 0, 0.06);
}

.hero__fachada {
	position: relative;
	display: block;
}

.hero__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: auto;
	border-radius: 50%;
	font-size: 22px;
	color: var(--c-branco);
	background: rgba(0, 0, 0, 0.62);
}

/* Controles */
.hero__controles {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.no-js .hero__controles {
	display: none;
}

.hero__dots {
	display: flex;
	align-items: center;
}

/* O ponto tem 7px, mas o botão tem 44px: alvo de toque do Google Ads. */
.hero__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: var(--tap);
	padding: 0;
	border: 0;
	background: none;
}

.hero__dot::before {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-radius: var(--r-pill);
	background: rgba(0, 0, 0, 0.28);
	transition: width 0.25s ease, background 0.25s ease;
}

.hero__dot[aria-selected="true"] {
	width: 44px;
}

.hero__dot[aria-selected="true"]::before {
	width: 26px;
	background: var(--c-marca, #f5c400);
}

.hero__pausar {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 12px;
	color: var(--c-sobre-marca);
	background: none;
}

/* aria-pressed="true" significa "pausado": o icone vira play. */
.hero__pausar-icone::before {
	content: "\275A\275A";
}

.hero__pausar[aria-pressed="true"] .hero__pausar-icone::before {
	content: "\25B6";
	font-size: 13px;
}

/* Setas.

   Escondidas no celular de propósito: ali o gesto de arrastar já existe e é o
   natural, e a seta pousaria bem em cima do título do banner. No desktop não
   há gesto nenhum aparente - é lá que a seta faz falta. */
.hero__seta {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: none;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--c-branco);
	/* Disco escuro com seta branca funciona sobre foto clara, foto escura e
	   sobre o fundo da seção: uma regra só, sem depender do tema do slide. */
	background: rgba(0, 0, 0, 0.42);
	transition: background 0.2s ease;
	transform: translateY(-50%);
}

.hero__seta:hover {
	background: rgba(0, 0, 0, 0.72);
}

/* O contorno padrão é quase preto e sumiria neste disco. Anel branco por
   dentro, halo escuro por fora: sobrevive a qualquer fundo atrás. */
.hero__seta:focus-visible {
	outline-color: var(--c-branco);
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.55);
}

.hero__seta--anterior {
	left: 12px;
}

.hero__seta--proximo {
	right: 12px;
}

/* Duas bordas giradas 45 graus - nada de fonte de ícone nem SVG externo, e
   acompanha a cor do texto. O deslocamento negativo devolve ao centro óptico
   o que a rotação tirou. */
.hero__seta-icone {
	width: 10px;
	height: 10px;
	border-top: 2.5px solid currentColor;
	border-right: 2.5px solid currentColor;
}

.hero__seta--proximo .hero__seta-icone {
	margin-left: -3px;
	transform: rotate(45deg);
}

.hero__seta--anterior .hero__seta-icone {
	margin-right: -3px;
	transform: rotate(-135deg);
}

/* Sem JS a seta não teria o que fazer: quem troca o slide é o script. */
.no-js .hero__seta {
	display: none;
}

@media (min-width: 768px) {
	.hero__seta {
		display: grid;
	}
}

@media (min-width: 1280px) {
	.hero__seta--anterior {
		left: 20px;
	}

	.hero__seta--proximo {
		right: 20px;
	}
}

@media (min-width: 1024px) {
	.hero__slide {
		display: grid;
		grid-template-columns: 1fr 0.85fr;
		grid-template-areas:
			"texto midia"
			"botoes midia";
		align-content: center;
		gap: 0 40px;
		min-height: 480px;
		padding: var(--sp-hero) var(--sp-gutter);
	}

	.hero__texto {
		grid-area: texto;
		gap: 20px;
	}

	.hero__midia {
		grid-area: midia;
	}

	.hero__botoes {
		grid-area: botoes;
		flex-direction: row;
		align-items: center;
		margin-top: 26px;
	}

	.hero__link-sec {
		min-height: 0;
		padding: 16px 6px;
		border: 0;
		border-bottom: 2px solid rgba(0, 0, 0, 0.15);
		border-radius: 0;
	}

	.hero__slide--escuro .hero__link-sec {
		border-bottom-color: rgba(255, 255, 255, 0.3);
	}

	.hero__slide--img-esquerda {
		grid-template-columns: 0.85fr 1fr;
		grid-template-areas:
			"midia texto"
			"midia botoes";
	}

	.hero__img,
	.hero__video,
	.hero__placeholder {
		height: 320px;
		border-radius: var(--r-lg);
	}

	.hero__controles {
		bottom: 14px;
	}
}

/* Banner inteiro: a mídia ocupa o slide todo e o texto fica por cima.
   Vem depois do bloco desktop de propósito - mesma especificidade, ganha
   quem vier por último, então estas regras sobrescrevem o grid dividido. */
.hero__slide--full {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto auto;
	grid-template-areas:
		"vazio"
		"texto"
		"botoes";
	gap: 0;
	min-height: 420px;
	padding: 0;
}

.hero__slide--full .hero__midia {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__slide--full .hero__img,
.hero__slide--full .hero__video,
.hero__slide--full .hero__placeholder,
.hero__slide--full .hero__fachada,
.hero__slide--full .hero__iframe {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.hero__slide--full.hero__slide--tingido .hero__midia::before {
	border-radius: 0;
}

/* Escurece de baixo para cima: garante contraste do texto sobre qualquer foto.
   Só quando não há escurecimento sólido configurado. */
.hero__slide--full:not(.hero__slide--sem-texto):not(.hero__slide--tingido) .hero__midia::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.35) 55%,
		rgba(0, 0, 0, 0.05) 100%
	);
}

.hero__slide--full .hero__texto {
	grid-area: texto;
	z-index: 2;
	padding-inline: var(--sp-gutter);
}

.hero__slide--full .hero__botoes {
	grid-area: botoes;
	z-index: 2;
	padding: 16px var(--sp-gutter) 56px;
	margin-top: 0;
}

.hero__slide--full .hero__titulo {
	color: var(--c-branco);
}

.hero__slide--full .hero__desc {
	color: rgba(255, 255, 255, 0.85);
}

.hero__slide--full .hero__selo {
	border-color: transparent;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
}

.hero__slide--full .hero__link-sec {
	color: var(--c-branco);
	border-color: rgba(255, 255, 255, 0.45);
}

/* Só a mídia: o texto vira sr-only no PHP, então nem ocupa espaço aqui. */
.hero__slide--sem-texto {
	min-height: 300px;
}

.hero__iframe {
	width: 100%;
	height: 180px;
	border: 0;
	border-radius: var(--r-md);
}

@media (min-width: 1024px) {
	.hero__slide--full {
		grid-template-columns: 1fr;
		/* O slide segue a proporção da arte, para ela aparecer inteira em vez
		   de a altura fixa de antes comer o topo e o pé.

		   min-height, e não height nem aspect-ratio: se um título longo pedir
		   mais espaço, o slide cresce em vez de derramar o texto para fora. */
		min-height: clamp(var(--hero-alt-min), calc(100vw / var(--hero-razao)), var(--hero-alt-max));
	}

	.hero__slide--full .hero__texto,
	.hero__slide--full .hero__botoes {
		max-width: var(--container);
		width: 100%;
		margin-inline: auto;
	}

	.hero__slide--full .hero__botoes {
		flex-direction: row;
		align-items: center;
		padding-bottom: 64px;
	}

	/* Só a mídia: aqui a proporção pesa ainda mais, porque a arte é a única
	   coisa que existe no slide. */
	.hero__slide--sem-texto {
		min-height: clamp(var(--hero-alt-min), calc(100vw / var(--hero-razao)), var(--hero-alt-max));
	}

	.hero__iframe {
		height: 320px;
	}
}

/* --------------------------------------------------------------------------
   13. Diferenciais
   -------------------------------------------------------------------------- */

.diferenciais__grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
}

.card-dif {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border-radius: var(--r-lg);
	background: var(--c-secao, #f7f5f0);
}

.card-dif__num {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	font-family: var(--f-titulo, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 900;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
}

.card-dif__desc {
	font-size: var(--fs-sm);
	color: var(--c-texto-suave);
}

@media (min-width: 1024px) {
	.diferenciais__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}

	/* subgrid alinha número, título e descrição entre os três cards:
	   título de duas linhas num card empurra o topo das descrições de todos. */
	.card-dif {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		gap: 12px;
		padding: 28px;
	}

	.card-dif__titulo,
	.card-dif__desc {
		align-self: start;
	}

	.card-dif__num {
		width: 42px;
		height: 42px;
		border-radius: 11px;
		font-size: 1.0625rem;
	}
}

@supports not (grid-template-rows: subgrid) {
	@media (min-width: 1024px) {
		.card-dif {
			display: flex;
			flex-direction: column;
		}
	}
}

/* --------------------------------------------------------------------------
   14. Serviços
   -------------------------------------------------------------------------- */

.servicos__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	list-style: none;
}

.card-serv {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-md);
	background: var(--c-branco);
}

.card-serv__titulo {
	font-size: var(--fs-h4);
	line-height: 1.25;
}

.card-serv__titulo a {
	text-decoration: none;
}

.card-serv__desc {
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-texto-fraco);
}

.card-serv--destaque {
	border-color: transparent;
	background: var(--c-escuro, #333);
}

.card-serv--destaque .card-serv__titulo {
	color: var(--c-branco);
}

/* Link solto de 20px de altura vira alvo de 44px sem mexer no layout:
   o padding cresce a área clicável e a margem negativa devolve o espaço. */
.card-serv__cta {
	display: inline-flex;
	align-items: center;
	padding-block: 12px;
	margin-block: -12px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--c-marca-clara, #ffd62e);
	text-decoration: none;
}

.card-serv__cta:hover {
	color: var(--c-marca-clara, #ffd62e);
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.servicos__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
	}

	.card-serv {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		gap: 6px;
		padding: 22px;
	}

	.card-serv__titulo,
	.card-serv__desc,
	.card-serv__cta {
		align-self: start;
	}
}

@supports not (grid-template-rows: subgrid) {
	@media (min-width: 1024px) {
		.card-serv {
			display: flex;
			flex-direction: column;
		}
	}
}

/* --------------------------------------------------------------------------
   15. Avaliações
   -------------------------------------------------------------------------- */

.avaliacoes__head {
	margin-bottom: 20px;
}

.avaliacoes__nota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-texto-fraco);
}

.estrelas {
	color: var(--c-marca, #f5c400);
	letter-spacing: 0.05em;
}

.avaliacoes__qtd {
	font-weight: 400;
}

.avaliacoes__grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
}

/* No celular mostramos 3 depoimentos e o link "ver todas", como no mock.
   Os demais continuam no HTML - só não aparecem nesta largura. */
.avaliacoes__grid > li:nth-child(n + 4) {
	display: none;
}

.card-aval {
	display: flex;
	gap: 13px;
	padding: 20px;
	border-radius: 13px;
	background: var(--c-secao, #f7f5f0);
}

.card-aval__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 0.9375rem;
	font-weight: 800;
	background: var(--c-branco);
}

.card-aval__avatar--azul {
	color: #4285f4;
}

.card-aval__avatar--vermelho {
	color: #ea4335;
}

.card-aval__avatar--verde {
	color: #34a853;
}

.card-aval__avatar--amarelo {
	color: #b98b00;
}

.card-aval__estrelas {
	font-size: 0.8125rem;
	font-weight: 800;
}

.card-aval__texto {
	margin: 7px 0 8px;
	font-size: var(--fs-body);
	color: #2b2b2b;
}

.card-aval__meta {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--c-texto-fraco);
}

.avaliacoes__link {
	display: block;
	margin-top: 12px;
	padding: 10px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	color: var(--c-marca-sombra, #a88400);
}

@media (min-width: 1024px) {
	.avaliacoes__head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 14px;
		margin-bottom: 28px;
	}

	.avaliacoes__nota {
		margin-top: 0;
	}

	.avaliacoes__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.avaliacoes__grid > li:nth-child(n + 4) {
		display: flex;
	}

	.card-aval {
		gap: 16px;
		padding: 26px;
		border-radius: var(--r-lg);
	}

	.card-aval__avatar {
		width: 44px;
		height: 44px;
		font-size: 1rem;
	}

	.card-aval__texto {
		margin: 8px 0 10px;
		font-size: 1rem;
	}

	.avaliacoes__link {
		margin-top: 20px;
	}
}

/* --------------------------------------------------------------------------
   15b. Formulário
   -------------------------------------------------------------------------- */

.formulario__form {
	margin-top: 24px;
}

.formulario__campos {
	display: grid;
	gap: 16px;
}

.formulario__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.formulario__rotulo {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-titulo, #252525);
}

.formulario__obrigatorio {
	color: #d63638;
}

.formulario__campo input,
.formulario__campo select,
.formulario__campo textarea {
	width: 100%;
	min-height: var(--tap);
	padding: 12px 14px;
	border: 1.5px solid rgba(0, 0, 0, 0.18);
	border-radius: var(--r-sm);
	font-family: inherit;
	font-size: 1rem; /* 16px evita o zoom automático do iOS ao focar */
	background: var(--c-branco);
}

.formulario__campo textarea {
	min-height: 110px;
	resize: vertical;
}

.formulario__campo.tem-erro input,
.formulario__campo.tem-erro select,
.formulario__campo.tem-erro textarea {
	border-color: #d63638;
}

.formulario__ajuda {
	font-size: var(--fs-xs);
	color: var(--c-texto-fraco);
}

.formulario__erro {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: #b32d2e;
}

.formulario__consentimento,
.formulario__radios label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fs-body);
	line-height: 1.5;
	cursor: pointer;
}

.formulario__consentimento input,
.formulario__radios input {
	width: 20px;
	min-height: 20px;
	height: 20px;
	margin-top: 2px;
	flex: none;
	accent-color: var(--c-marca-sombra, #a88400);
}

.formulario__radios {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Honeypot: fora da tela, sem display:none — robô ignora campo escondido
   por display e preenche este. */
.formulario__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario__enviar {
	width: 100%;
	margin-top: 20px;
}

.formulario__sucesso,
.formulario__aviso {
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: var(--r-md);
	font-size: var(--fs-body);
}

.formulario__sucesso {
	color: #14532d;
	background: #dcfce7;
	border: 1.5px solid #22c55e;
	font-weight: 700;
}

.formulario__aviso {
	color: #7a1c1d;
	background: #fdecec;
	border: 1.5px solid #d63638;
}

.formulario__aviso ul {
	margin: 8px 0 0;
	padding-left: 18px;
	list-style: disc;
}

.cf-turnstile {
	margin-top: 20px;
}

@media (min-width: 1024px) {
	.formulario__campos {
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}

	.formulario__campo--inteira {
		grid-column: 1 / -1;
	}

	.formulario__enviar {
		width: auto;
		min-width: 220px;
	}
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.faq__lista {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 18px;
}

.faq__item {
	border: 1px solid var(--c-borda);
	border-radius: var(--r-md);
	background: var(--c-branco);
}

.faq__cabecalho {
	margin: 0;
	font-size: inherit;
}

.faq__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 17px 18px;
	border: 0;
	font-family: var(--f-corpo, system-ui, sans-serif);
	font-size: 0.96875rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	color: var(--c-titulo, #252525);
	background: none;
}

.faq__icone {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
	transition: transform 0.25s ease;
}

.faq__item.is-aberta .faq__icone {
	transform: rotate(45deg);
}

.faq__resposta-corpo {
	padding: 0 18px 18px;
	font-size: var(--fs-body);
	line-height: 1.65;
	color: rgba(0, 0, 0, 0.62);
}

.faq__resposta-corpo p {
	margin: 0 0 10px;
}

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

.faq__resposta-corpo ul,
.faq__resposta-corpo ol {
	margin: 0 0 10px;
	padding-left: 20px;
}

/*
 * Sem JS todas as respostas ficam abertas (regra acima). Com JS elas colapsam.
 *
 * A animação usa grid-template-rows de 0fr para 1fr: é o único jeito de animar
 * até a altura real do conteúdo sem medir nada em JavaScript e sem max-height
 * chutado. A classe is-aberta vem do PHP, entao não ha piscada no carregamento.
 */
.js .faq__resposta {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.js .faq__item.is-aberta .faq__resposta {
	grid-template-rows: 1fr;
}

.js .faq__resposta-corpo {
	min-height: 0;
	overflow: hidden;
	padding-bottom: 0;
	/* visibility tira a resposta fechada do leitor de tela e da tabulacao;
	   o atraso deixa a animação terminar antes de sumir de vez. */
	visibility: hidden;
	transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}

.js .faq__item.is-aberta .faq__resposta-corpo {
	visibility: visible;
	padding-bottom: 18px;
	transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
	.faq__lista {
		gap: 10px;
		margin-top: 26px;
	}

	.faq__pergunta {
		padding: 20px 22px;
		font-size: 1.0625rem;
	}

	.faq__resposta-corpo {
		padding: 0 22px 22px;
		font-size: 1rem;
	}

	.js .faq__resposta-corpo {
		padding-bottom: 0;
	}

	.js .faq__item.is-aberta .faq__resposta-corpo {
		padding-bottom: 22px;
	}
}


/* --------------------------------------------------------------------------
   17. Seção promocional de planos

   Valores do mock (opções 2a/2b). A seção tem cor de fundo própria, escolhida
   no painel: as regras --escura e --clara ajustam o texto conforme o contraste,
   sem depender de qual cor foi escolhida.
   -------------------------------------------------------------------------- */

/*
 * align-items: flex-start encolhia o título e o subtítulo até o tamanho do
 * texto, e a frase quebrava no meio com meia tela sobrando ao lado. Agora só o
 * selo encolhe; o resto ocupa a largura toda.
 */
.promocao__topo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}

.promocao__selo {
	align-self: flex-start;
}

.promocao__selo {
	display: inline-block;
	margin-bottom: 6px;
	padding: 8px 12px;
	border-radius: 6px;
	font-family: var(--f-corpo, system-ui, sans-serif);
	/* O mock usava 11.5px; 12px é o piso de legibilidade do projeto. */
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
}

.promocao__sub {
	font-size: var(--fs-body);
	line-height: 1.6;
	text-wrap: pretty;
	color: var(--c-texto-suave);
}

/* --------------------------------------------- a seção com cor própria */

.promocao--escura .secao__titulo {
	color: var(--c-branco);
}

.promocao--escura .promocao__sub,
.promocao--escura .promocao__nota {
	color: rgba(255, 255, 255, 0.65);
}

.promocao--escura :focus-visible {
	outline-color: var(--c-branco);
}

/*
 * Dentro do card o anel volta a ser escuro.
 *
 * A seção é escura, mas os cards são claros: o contorno branco herdado ficava
 * branco sobre branco — 1:1, ou seja, invisível justamente para quem navega
 * por teclado e depende dele.
 */
.promocao--escura .plano :focus-visible {
	outline-color: var(--c-sobre-marca);
}

/*
 * O carrossel é do navegador: scroll-snap. Sem biblioteca, sem JS obrigatório,
 * e o dedo já sabe o que fazer com ele.
 */
.promocao__trilha {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 82%; /* o pedaço do próximo card avisa que há mais */
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.promocao__trilha::-webkit-scrollbar {
	display: none;
}

/*
 * A mão só aparece quando há o que arrastar. O JS acrescenta a classe --puxavel
 * depois de medir; sem JS o cursor continua o normal, porque ali a rolagem é
 * pela barra e pela roda do mouse.
 */
.promocao__trilha--puxavel {
	cursor: grab;
}

.promocao__trilha.is-arrastando {
	cursor: grabbing;
	user-select: none;
}

.promocao__trilha:focus-visible {
	outline: 3px solid var(--c-sobre-marca);
	outline-offset: 4px;
}

.promocao--escura .promocao__trilha:focus-visible {
	outline-color: var(--c-branco);
}

/*
 * O position: relative aqui não é enfeite.
 *
 * Os textos .sr-only dentro do card são position:absolute. Sem um ancestral
 * posicionado DENTRO da faixa, o bloco de contenção deles vira a página — e um
 * absoluto assim não é recortado pelo overflow da faixa. Eles ficavam parados
 * lá pelos 1300px e faziam a PÁGINA INTEIRA rolar na horizontal no celular:
 * invisível na tela, evidente no dedo.
 */
.plano {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	border-radius: 16px;
	background: var(--c-branco);
	scroll-snap-align: start;
}

.plano--destaque {
	background: var(--c-marca, #f5c400);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/*
 * Cards alinhados entre si, como nos diferenciais e nos serviços.
 *
 * Sem isto, um título de duas linhas num card empurrava preço, lista e botão
 * para baixo só naquele card — e lado a lado o conjunto parecia quebrado. Com
 * subgrid, cada parte tem a sua linha na grade da faixa, e essa linha vale
 * para todos os cards.
 */
@supports (grid-template-rows: subgrid) {
	.promocao__trilha {
		grid-template-rows: repeat(6, auto);
	}

	.plano {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
	}

	/*
	 * Linha fixa por parte, e não colocação automática: card sem categoria ou
	 * sem preço riscado deixaria a linha vazia e puxaria todo o resto dele uma
	 * linha acima, desalinhando dos vizinhos.
	 */
	.plano__categoria {
		grid-row: 1;
	}

	.plano__titulo {
		grid-row: 2;
	}

	.plano__de {
		grid-row: 3;
	}

	.plano__precos {
		grid-row: 4;
	}

	.plano__itens {
		grid-row: 5;
	}

	.plano__botao {
		grid-row: 6;
		align-self: end;
		margin-top: 0;
	}

	.plano__categoria,
	.plano__titulo,
	.plano__de,
	.plano__precos,
	.plano__itens {
		align-self: start;
	}
}

@supports not (grid-template-rows: subgrid) {
	.plano {
		display: flex;
		flex-direction: column;
	}
}

/*
 * O âmbar do mock dava 2,5:1 sobre o branco — reprova na WCAG com folga.
 * A prioridade do projeto é acessibilidade antes de fidelidade visual, então
 * a cor escurece: o color-mix mantém o tom preso à cor da marca escolhida no
 * painel, e a cor fixa antes dele é a rede para navegador antigo.
 */
.plano__categoria {
	font-size: 0.75rem; /* 12px */
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7b6300;
	color: color-mix(in srgb, var(--c-marca-sombra, #c79f00) 62%, #000);
}

.plano--destaque .plano__categoria {
	color: rgba(31, 31, 31, 0.82);
}

.plano__titulo {
	font-size: 1.375rem; /* 22px */
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--c-titulo, #252525);
}

.plano--destaque .plano__titulo {
	color: var(--c-sobre-marca);
}

.plano__precos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* Riscado, mas ainda legível: o mock usava .42, que dá 3:1 e reprova. */
.plano__de {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
}

/*
 * Marcador do plano sem preço riscado. Não tem conteúdo, mas ocupa a linha —
 * é o que mantém o "Por" dos cards vizinhos na mesma altura.
 */
.plano__de--vazio {
	display: block;
	min-height: 0;
}

.plano--destaque .plano__de {
	color: rgba(31, 31, 31, 0.78);
}

/*
 * Etiqueta, e não texto colorido.
 *
 * "Economize R$ 900" em amarelo escuro sobre branco dava 2,5:1 — reprova na
 * WCAG e é genuinamente difícil de ler. Com fundo, o contraste sobra e a frase
 * ganha o destaque que merece.
 */
.plano__economia {
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 0.78125rem; /* 12.5px */
	font-weight: 800;
	color: var(--c-sobre-marca);
	background: var(--c-secao, #f7f5f0);
}

/* No card destacado o fundo já é amarelo: a etiqueta clareia. */
.plano--destaque .plano__economia {
	background: rgba(255, 255, 255, 0.55);
}

.plano__linha-por {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.plano__por-rotulo {
	font-size: 1rem;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.6);
}

.plano--destaque .plano__por-rotulo {
	color: rgba(31, 31, 31, 0.82);
}

.plano__por {
	font-family: var(--f-titulo, system-ui, sans-serif);
	font-size: 2.125rem; /* 34px */
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--c-titulo, #252525);
}

.plano--destaque .plano__por {
	color: var(--c-sobre-marca);
}

.plano__parcela {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
}

.plano--destaque .plano__parcela {
	color: rgba(31, 31, 31, 0.78);
}

.plano__itens {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.09);
	list-style: none;
	font-size: 0.84375rem; /* 13.5px */
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.58);
}

.plano--destaque .plano__itens {
	border-top-color: rgba(31, 31, 31, 0.18);
	font-weight: 500;
	color: rgba(31, 31, 31, 0.72);
}

.plano__itens li {
	position: relative;
	padding-left: 17px;
}

/* Marcador discreto: 5px, como no mock. */
.plano__itens li::before {
	content: "";
	position: absolute;
	top: 0.52em;
	left: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-marca, #f5c400);
}

.plano--destaque .plano__itens li::before {
	background: rgba(31, 31, 31, 0.5);
}

/* O botão encosta na base para os cards ficarem alinhados entre si. */
.plano__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	margin-top: auto;
	padding: 15px 16px;
	border-radius: 10px;
	font-family: var(--f-corpo, system-ui, sans-serif);
	font-size: 0.9375rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

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

.plano__botao:active {
	transform: translateY(1px);
}

/* Card comum: botão claro com contorno. */
.plano__botao--claro,
.plano__botao--claro:hover {
	color: var(--c-sobre-marca);
	background: var(--c-secao, #f7f5f0);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12);
}

.plano__botao--claro:hover {
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.14);
}

/*
 * Card destacado: botão escuro.
 *
 * Amarelo sobre amarelo fazia o botão sumir dentro do próprio card — que é
 * justamente o card em que ele mais precisa aparecer.
 */
.plano__botao--escuro,
.plano__botao--escuro:hover {
	color: var(--c-branco);
	background: var(--c-sobre-marca);
}

.plano__botao--escuro:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}

/* ------------------------------------------------ pontinhos do carrossel */

.promocao__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
}

.promocao__ponto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	background: none;
}

.promocao__ponto::before {
	content: "";
	display: block;
	width: 22px;
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.18);
	transition: background-color 0.15s ease;
}

.promocao--escura .promocao__ponto::before {
	background: rgba(255, 255, 255, 0.28);
}

.promocao__ponto[aria-current="true"]::before,
.promocao--escura .promocao__ponto[aria-current="true"]::before {
	background: var(--c-marca, #f5c400);
}

/* A nota legal usa a largura toda e fica centrada, encerrando a seção. */
.promocao__nota {
	margin-top: 20px;
	font-size: var(--fs-xs);
	line-height: 1.55;
	text-align: center;
	text-wrap: pretty;
	color: var(--c-texto-fraco);
}

@media (min-width: 1024px) {
	.promocao__topo {
		margin-bottom: 32px;
	}

	.promocao__sub {
		font-size: 1.0625rem;
	}

	.promocao__trilha {
		/* Três cards visíveis, com a mesma distância entre eles. */
		grid-auto-columns: calc((100% - 2 * 18px) / 3);
		gap: 18px;
	}

	/* Até três planos cabem: vira grade e não há o que rolar. */
	.promocao__trilha--estatica {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		overflow-x: visible;
	}

	.plano {
		gap: 14px;
		padding: 30px 28px;
	}

	.plano__titulo {
		font-size: 1.625rem; /* 26px */
	}

	.plano__por {
		font-size: 2.625rem; /* 42px */
	}

	.plano__botao {
		font-size: 1rem;
		padding: 16px;
	}
}