/* ==========================================================================
   Rosa dos Ventos Climatizacao — Design System (ETAPA B)
   Tokens, reset, tipografia, botoes, topbar, header, hero, footer.
   Mobile-first ate 360px. Sem bibliotecas pesadas.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	/* Paleta da marca */
	--rv-marinho: #2B4C6F;
	--rv-azul: #3E8FC1;
	--rv-ciano: #8FCBE8;
	--rv-profundo: #16304A;
	--rv-ambar: #E8743B;
	--rv-ambar-esc: #C6351F;
	--rv-aco: #5A6B7B;
	--rv-aco-claro: #9AA7B4;
	--rv-nevoa: #F4F7FA;
	--rv-gelo: #E4EBF2;
	--rv-branco: #FFFFFF;
	--rv-tinta: #14212E;
	--rv-wa: #25D366;
	--rv-wa-esc: #1EBE5B;

	/* Papeis semanticos */
	--rv-bg: var(--rv-nevoa);
	--rv-surface: var(--rv-branco);
	--rv-text: var(--rv-tinta);
	--rv-text-2: var(--rv-aco);
	--rv-border: var(--rv-gelo);
	--rv-primary: var(--rv-marinho);
	--rv-accent: var(--rv-azul);
	--rv-action: var(--rv-ambar);

	/* Tipografia */
	--rv-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--rv-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rv-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Layout */
	--rv-container: 1200px;
	--rv-gutter: clamp(1rem, 4vw, 2rem);
	--rv-radius: 14px;
	--rv-radius-sm: 8px;
	--rv-radius-pill: 999px;
	--rv-shadow-sm: 0 1px 2px rgba(20, 33, 46, .06), 0 1px 3px rgba(20, 33, 46, .08);
	--rv-shadow-md: 0 10px 30px -12px rgba(20, 33, 46, .25);
	--rv-shadow-lg: 0 24px 60px -20px rgba(22, 48, 74, .35);
	--rv-ring: 0 0 0 3px rgba(62, 143, 193, .45);
	--rv-transition: .25s ease;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	font-family: var(--rv-font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--rv-text);
	background: var(--rv-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--rv-accent);
	text-decoration: none;
	transition: color var(--rv-transition);
}

a:hover {
	color: var(--rv-primary);
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: none;
}

/* ---------- 3. Tipografia ---------- */
h1,
h2,
h3 {
	font-family: var(--rv-font-display);
	font-weight: 600;
	line-height: 1.12;
	color: var(--rv-primary);
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}

h1 {
	font-size: clamp(2.4rem, 6vw, 3.8rem);
}

h2 {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
}

h3 {
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

p {
	margin: 0 0 1rem;
}

.rv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--rv-font-mono);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rv-accent);
	margin: 0 0 1rem;
}

.rv-prose p {
	color: var(--rv-text-2);
}

/* ---------- 4. Layout ---------- */
.rv-container {
	width: min(100% - (var(--rv-gutter) * 2), var(--rv-container));
	margin-inline: auto;
}

.rv-section {
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

.rv-main {
	display: block;
}

/* ---------- 5. Acessibilidade ---------- */
.rv-sr,
.rv-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rv-skip:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--rv-primary);
	color: #fff;
	border-radius: var(--rv-radius-sm);
}

:focus-visible {
	outline: none;
	box-shadow: var(--rv-ring);
	border-radius: var(--rv-radius-sm);
}

/* ---------- 6. Botoes ---------- */
.rv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .85rem 1.5rem;
	font-family: var(--rv-font-sans);
	font-weight: 600;
	font-size: .98rem;
	line-height: 1;
	border-radius: var(--rv-radius-pill);
	transition: transform var(--rv-transition), background var(--rv-transition), color var(--rv-transition), box-shadow var(--rv-transition);
	white-space: nowrap;
}

.rv-btn i {
	font-size: 1.2em;
}

.rv-btn:active {
	transform: translateY(1px) scale(.99);
}

.rv-btn--acao {
	background: var(--rv-action);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(232, 116, 59, .7);
}

.rv-btn--acao:hover {
	background: var(--rv-ambar-esc);
	color: #fff;
}

.rv-btn--primario {
	background: var(--rv-primary);
	color: #fff;
}

.rv-btn--primario:hover {
	background: var(--rv-profundo);
	color: #fff;
}

.rv-btn--fantasma {
	background: transparent;
	color: var(--rv-primary);
	border: 1.5px solid var(--rv-border);
}

.rv-btn--fantasma:hover {
	border-color: var(--rv-accent);
	color: var(--rv-accent);
}

.rv-btn--wa {
	background: var(--rv-wa);
	color: #0a3d20;
}

.rv-btn--wa:hover {
	background: var(--rv-wa-esc);
	color: #0a3d20;
}

/* ---------- 7. Topbar ---------- */
.rv-topbar {
	background: var(--rv-profundo);
	color: #cfe0ee;
	font-size: .82rem;
}

.rv-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-block: .5rem;
}

.rv-topbar__contatos {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
}

.rv-topbar__contatos a,
.rv-topbar__local {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: #cfe0ee;
}

.rv-topbar__contatos a:hover {
	color: #fff;
}

.rv-topbar i {
	color: var(--rv-ciano);
	font-size: 1rem;
}

.rv-topbar__selo {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--rv-ciano);
	font-weight: 500;
}

/* ---------- 8. Header ---------- */
.rv-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--rv-border);
}

.rv-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .75rem;
}

/* Logo */
.rv-logo {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
}

.rv-logo__mark {
	color: var(--rv-azul);
	display: inline-flex;
}

.rv-logo--footer .rv-logo__mark {
	color: var(--rv-ciano);
}

.rv-logo__wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.rv-logo__nome {
	font-family: var(--rv-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--rv-primary);
	letter-spacing: .01em;
}

.rv-logo--footer .rv-logo__nome {
	color: #fff;
}

.rv-logo__segmento {
	font-family: var(--rv-font-mono);
	font-size: .62rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--rv-accent);
	margin-top: .25rem;
}

/* Custom logo (Customizer) */
.custom-logo-link {
	display: inline-flex;
}

.custom-logo {
	max-height: 60px;
	width: auto;
}

/* Nav */
.rv-nav {
	display: flex;
	align-items: center;
}

.rv-menu {
	display: flex;
	align-items: center;
	gap: .35rem;
}

.rv-menu__link,
.rv-menu a {
	display: inline-block;
	padding: .5rem .85rem;
	font-weight: 500;
	font-size: .95rem;
	color: var(--rv-text);
	border-radius: var(--rv-radius-sm);
}

.rv-menu__link:hover,
.rv-menu a:hover {
	color: var(--rv-accent);
	background: var(--rv-nevoa);
}

.rv-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: var(--rv-primary);
	border-radius: var(--rv-radius-sm);
}

.rv-header__cta .rv-btn {
	padding: .7rem 1.15rem;
	font-size: .9rem;
}

/* ---------- 9. Hero (banner full-width) ----------
   Fundo em degrade e o fallback: vale quando .rv-hero--com-banner esta ausente
   (nenhuma das imagens existe). Com banner, a <picture> cobre a seccao. */
.rv-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* prende o z-index do overlay a este contexto */
	background:
		radial-gradient(120% 80% at 85% -10%, rgba(143, 203, 232, .35), transparent 60%),
		linear-gradient(180deg, #fff 0%, var(--rv-nevoa) 100%);
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
}

.rv-hero--com-banner {
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--rv-profundo); /* cor de espera enquanto a imagem carrega */
}

.rv-hero__banner {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
}

.rv-hero__banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right; /* mantem o assunto a direita, sob o texto claro */
	display: block;
}

/* Overlay da marca. Sem banner nao ha o que escurecer: fica inerte. */
.rv-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Mobile: texto em cima, imagem embaixo -> degrade vertical. */
.rv-hero--com-banner .rv-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(22, 48, 74, .93) 0%,
		rgba(22, 48, 74, .82) 42%,
		rgba(43, 76, 111, .45) 72%,
		rgba(43, 76, 111, .28) 100%
	);
}

.rv-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.rv-hero__titulo {
	font-size: clamp(2.6rem, 7vw, 4.4rem);
	margin-bottom: 1rem;
}

.rv-hero__lead {
	font-size: 1.15rem;
	color: var(--rv-text-2);
	max-width: 34ch;
}

.rv-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin: 1.75rem 0 1.5rem;
}

.rv-hero__marcas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rv-border);
}

.rv-hero__marcas-rotulo {
	font-family: var(--rv-font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rv-aco-claro);
}

.rv-hero__marcas-lista {
	font-weight: 600;
	color: var(--rv-primary);
}

/* ---------- 9b. Hero sobre imagem: texto claro ----------
   Escopado em .rv-hero--com-banner para nao vazar para o resto do site
   (o .rv-btn--fantasma e usado em fundos claros noutras seccoes). */
.rv-hero--com-banner .rv-hero__titulo,
.rv-hero--com-banner .rv-hero__marcas-lista {
	color: var(--rv-branco);
}

.rv-hero--com-banner .rv-hero__lead {
	color: rgba(255, 255, 255, .88);
	max-width: 46ch;
}

/* Ciano puro cai a ~4.35:1 na base do overlay mobile sobre areas claras da foto.
   Clareado, fica acima de 4.5:1 em toda a coluna de texto e segue lendo como ciano. */
.rv-hero--com-banner .rv-eyebrow {
	color: color-mix(in srgb, var(--rv-ciano) 55%, var(--rv-branco));
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.rv-hero--com-banner .rv-eyebrow {
		color: #c1e2f2; /* == color-mix(in srgb, #8FCBE8 55%, #FFFFFF) */
	}
}

.rv-hero--com-banner .rv-hero__marcas {
	border-top-color: rgba(255, 255, 255, .22);
}

.rv-hero--com-banner .rv-hero__marcas-rotulo {
	color: rgba(255, 255, 255, .65);
}

.rv-hero--com-banner .rv-btn--fantasma {
	color: var(--rv-branco);
	border-color: rgba(255, 255, 255, .55);
}

.rv-hero--com-banner .rv-btn--fantasma:hover {
	color: var(--rv-profundo);
	background: var(--rv-branco);
	border-color: var(--rv-branco);
}

/* ---------- 10. Media (imagem + fallback) ---------- */
.rv-media {
	margin: 0;
	border-radius: var(--rv-radius);
	overflow: hidden;
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	box-shadow: var(--rv-shadow-md);
}

.rv-media__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.rv-media__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg, var(--rv-marinho), var(--rv-profundo));
	color: rgba(255, 255, 255, .55);
	font-size: clamp(3rem, 10vw, 5rem);
}

.rv-media__legenda {
	padding: .75rem 1rem;
	font-size: .85rem;
	color: var(--rv-text-2);
	background: var(--rv-surface);
	border-top: 1px solid var(--rv-border);
}

/* ---------- 11. Stats ---------- */
.rv-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: 1.5rem;
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	box-shadow: var(--rv-shadow-sm);
}

.rv-stat {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .5rem 1rem;
	position: relative;
}

.rv-stat__numero {
	font-family: var(--rv-font-mono);
	font-weight: 500;
	font-size: clamp(2rem, 5vw, 2.6rem);
	color: var(--rv-primary);
	line-height: 1;
}

.rv-stat:first-child .rv-stat__numero {
	color: var(--rv-ambar);
}

.rv-stat__rotulo {
	font-weight: 600;
	color: var(--rv-text);
}

.rv-stat__apoio {
	font-size: .85rem;
	color: var(--rv-text-2);
}

/* ---------- 12. Footer ---------- */
.rv-footer {
	background: var(--rv-profundo);
	color: #b9cadd;
	margin-top: clamp(3.5rem, 8vw, 6rem);
}

.rv-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.rv-footer__sobre {
	color: #9fb4c9;
	max-width: 42ch;
}

.rv-footer__selo {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--rv-ciano);
	font-weight: 500;
	font-size: .9rem;
}

.rv-footer__titulo {
	font-family: var(--rv-font-sans);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rv-ciano);
	margin: 0 0 1rem;
}

.rv-footer__lista li {
	margin-bottom: .6rem;
}

.rv-footer__lista a,
.rv-footer__lista span {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: #b9cadd;
}

.rv-footer__lista a:hover {
	color: #fff;
}

.rv-footer__lista i {
	color: var(--rv-ciano);
}

.rv-footer__base {
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.rv-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding-block: 1.25rem;
	font-size: .82rem;
	color: #8fa5bb;
}

.rv-footer__slogan {
	font-family: var(--rv-font-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--rv-ciano);
	margin: 0;
}

/* ---------- 13. Botao WhatsApp flutuante ---------- */
.rv-wa-float {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 200;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .9rem 1.15rem;
	background: var(--rv-wa);
	color: #0a3d20;
	font-weight: 600;
	border-radius: var(--rv-radius-pill);
	box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6);
	transition: transform var(--rv-transition), background var(--rv-transition);
}

.rv-wa-float:hover {
	background: var(--rv-wa-esc);
	color: #0a3d20;
	transform: translateY(-2px);
}

.rv-wa-float i {
	font-size: 1.5rem;
}

/* ---------- 14. Responsivo ---------- */
@media (min-width: 640px) {
	.rv-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.rv-stat:not(:last-child)::after {
		content: "";
		position: absolute;
		right: 0;
		top: 15%;
		height: 70%;
		width: 1px;
		background: var(--rv-border);
	}

	.rv-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

/* Desktop do hero: casa com o breakpoint do <source media="(max-width: 767px)">,
   senao 768-959px receberia a imagem de desktop com o overlay de mobile. */
@media (min-width: 768px) {
	.rv-hero--com-banner {
		min-height: 78vh;
	}

	/* Mais opaco a esquerda (texto), abrindo para a imagem a direita.
	   O patamar opaco vai ate ~50%: e ate onde a coluna de texto chega
	   (max-width 34rem num container de 1200px). Afrouxar antes disso
	   derruba o contraste do lead abaixo de 4.5:1 sobre areas claras da foto. */
	.rv-hero--com-banner .rv-hero__overlay {
		background: linear-gradient(
			90deg,
			rgba(22, 48, 74, .93) 0%,
			rgba(22, 48, 74, .90) 38%,
			rgba(22, 48, 74, .82) 52%,
			rgba(43, 76, 111, .45) 76%,
			rgba(43, 76, 111, .28) 100%
		);
	}

	/* Uma coluna: o texto ocupa a metade esquerda e a imagem respira a direita. */
	.rv-hero--com-banner .rv-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-hero--com-banner .rv-hero__conteudo {
		max-width: 34rem;
	}

	/* Sem banner, mantem o layout antigo de duas colunas. */
	.rv-hero:not(.rv-hero--com-banner) .rv-hero__inner {
		grid-template-columns: 1.05fr .95fr;
	}
}

@media (max-width: 959px) {
	.rv-nav__toggle {
		display: inline-flex;
	}

	.rv-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: .5rem var(--rv-gutter) 1rem;
		background: #fff;
		border-bottom: 1px solid var(--rv-border);
		box-shadow: var(--rv-shadow-md);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--rv-transition), transform var(--rv-transition), visibility var(--rv-transition);
	}

	.rv-nav.is-open .rv-menu {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.rv-menu__link,
	.rv-menu a {
		padding: .85rem .5rem;
		border-bottom: 1px solid var(--rv-border);
	}

	.rv-nav {
		position: static;
	}
}

@media (max-width: 720px) {
	.rv-topbar__selo {
		display: none;
	}

	.rv-header__cta .rv-btn span {
		display: none;
	}

	.rv-header__cta .rv-btn {
		padding: .7rem;
	}
}

@media (max-width: 420px) {
	.rv-topbar__contatos .rv-topbar__local {
		display: none;
	}

	.rv-wa-float__texto {
		display: none;
	}

	.rv-wa-float {
		padding: .9rem;
	}
}

/* ---------- 15. Secao: cabecalho generico ---------- */
.rv-section__cabecalho {
	max-width: 60ch;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rv-section__titulo {
	margin-bottom: .75rem;
}

.rv-section__lead {
	font-size: 1.1rem;
	color: var(--rv-text-2);
	margin: 0;
}

/* ---------- 16. Secao: Servicos ---------- */
.rv-servicos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.rv-servico {
	--rv-servico-pad: 1.75rem;

	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: var(--rv-servico-pad);
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	box-shadow: var(--rv-shadow-sm);
	transition: transform var(--rv-transition), box-shadow var(--rv-transition), border-color var(--rv-transition);
}

/* Com foto, o card recorta a imagem no raio da borda. Seguro aqui:
   nada do card vive fora dele (ao contrario das setas do Processo). */
.rv-servico--com-foto {
	overflow: hidden;
}

.rv-servico:hover {
	transform: translateY(-4px);
	box-shadow: var(--rv-shadow-md);
	border-color: var(--rv-ciano);
}

/* Foto sangrando ate as bordas do card: anula o padding nos tres lados do topo
   e recompoe o respiro abaixo com a gap do flex. Sem width explicito: o item
   estica sozinho (align-self: stretch) ate as margens negativas, evitando a
   sobra que "100% + 2*pad" deixava por nao contar a borda do card. */
.rv-servico__foto {
	align-self: stretch;
	width: auto;
	max-width: none;
	margin: calc( var(--rv-servico-pad) * -1 ) calc( var(--rv-servico-pad) * -1 ) .35rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--rv-nevoa); /* cor de espera enquanto carrega */
}

/* Micro-efeito no hover, coerente com o scale dos icones dos outros cards. */
@media (hover: hover) {
	.rv-servico__foto {
		transition: transform var(--rv-transition);
	}

	.rv-servico--com-foto:hover .rv-servico__foto {
		transform: scale(1.03);
	}
}

.rv-servico__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--rv-ciano), #cfe8f6);
	color: var(--rv-marinho);
	font-size: 1.7rem;
	margin-bottom: .35rem;
}

.rv-servico__titulo {
	font-family: var(--rv-font-sans);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--rv-primary);
	margin: 0;
	letter-spacing: 0;
}

.rv-servico__descricao {
	color: var(--rv-text-2);
	font-size: .96rem;
	margin: 0;
	flex-grow: 1;
}

.rv-servico__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .35rem;
	font-weight: 600;
	font-size: .92rem;
	color: var(--rv-accent);
}

.rv-servico__link i {
	transition: transform var(--rv-transition);
}

.rv-servico:hover .rv-servico__link i {
	transform: translateX(3px);
}

.rv-servicos__rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.rv-servicos__rodape p {
	margin: 0;
	font-family: var(--rv-font-display);
	font-size: 1.35rem;
	color: var(--rv-primary);
}

@media (min-width: 600px) {
	.rv-servicos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.rv-servicos {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- 17. Secao: Diferenciais (contraste) ---------- */
.rv-section--diferenciais {
	background:
		radial-gradient(90% 120% at 12% 0%, rgba(62, 143, 193, .28), transparent 55%),
		linear-gradient(160deg, var(--rv-profundo) 0%, #10263c 100%);
	color: #cfe0ee;
}

.rv-section__cabecalho--claro {
	max-width: 62ch;
}

.rv-eyebrow--claro {
	color: var(--rv-ciano);
}

.rv-section__titulo--claro {
	color: #fff;
}

.rv-section__lead--claro {
	color: #b9cadd;
}

.rv-difs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

.rv-dif {
	display: flex;
	gap: 1rem;
	padding: 1.4rem;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--rv-radius);
}

.rv-dif__icone {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(143, 203, 232, .16);
	color: var(--rv-ciano);
	font-size: 1.5rem;
}

.rv-dif__titulo {
	font-family: var(--rv-font-sans);
	font-weight: 600;
	font-size: 1.12rem;
	color: #fff;
	margin: .1rem 0 .35rem;
	letter-spacing: 0;
}

.rv-dif__descricao {
	color: #aebfd1;
	font-size: .94rem;
	margin: 0;
}

.rv-marcas {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: clamp(1.75rem, 4vw, 2.5rem);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.rv-marcas__rotulo {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--rv-font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rv-ciano);
	margin: 0 0 1.25rem;
}

.rv-marcas__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2x2 ja no mobile */
	gap: 1rem;
}

.rv-marca {
	padding: 1rem 1.15rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--rv-radius-sm);
}

/* Chip claro: as logos das marcas sao coloridas e ilegiveis sobre o navy.
   Altura fixa + object-fit:contain normaliza logos de proporcoes diferentes. */
.rv-marca__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	/* Padding lateral enxuto: com muito padding o chip fica estreito demais
	   e a logo mais larga (Komeco, 6.09:1) e limitada pela largura, ficando
	   mais baixa que as outras. Ver .rv-marca__logo. */
	padding: .7rem .5rem;
	margin-bottom: .75rem;
	background: var(--rv-branco);
	border-radius: var(--rv-radius-sm);
}

/* As 4 logos tem a mesma altura nativa (140px) e razoes de 4.76:1 a 6.09:1.
   Fixar so a altura faria a largura estourar em chips estreitos, e o contain
   reduziria a altura de cada uma de forma diferente (Komeco cairia a ~25px
   enquanto Agratto ficaria em 32px). Escalonar a altura por cqw ate o teto de
   32px mantem as quatro sempre com a MESMA altura renderizada. */
.rv-marca__logo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 32px;
	/* aspect-ratio da logo mais larga: garante que nenhuma exceda a largura
	   do chip antes de atingir 32px de altura. */
	aspect-ratio: 853 / 140;
	object-fit: contain;
	object-position: center;
}

/* Fallback sem logo: o nome ocupa o mesmo chip, mantendo a altura da grade. */
.rv-marca__nome {
	font-family: var(--rv-font-display);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--rv-marinho);
	text-align: center;
}

.rv-marca__descricao {
	display: block;
	font-size: .86rem;
	color: #9fb4c9;
}

@media (min-width: 700px) {
	.rv-difs {
		grid-template-columns: repeat(2, 1fr);
	}
	/* .rv-marcas__lista ja e 2 colunas na base (2x2 no mobile). */
}

@media (min-width: 1000px) {
	.rv-marcas__lista {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- 18. Fundos alternados ---------- */
.rv-section--preditiva,
.rv-section--processo,
.rv-section--contato {
	background: var(--rv-surface);
}

/* ---------- 19. Escala termografica (assinatura) ---------- */
.rv-escala {
	display: flex;
	width: min(260px, 80%);
	height: 12px;
	border-radius: var(--rv-radius-pill);
	overflow: hidden;
	margin: 1.5rem 0 .4rem;
	box-shadow: var(--rv-shadow-sm);
}

.rv-escala__seg {
	flex: 1;
}

.rv-escala__seg--1 { background: var(--rv-profundo); }
.rv-escala__seg--2 { background: var(--rv-azul); }
.rv-escala__seg--3 { background: var(--rv-ciano); }
.rv-escala__seg--4 { background: #EBC46B; }
.rv-escala__seg--5 { background: var(--rv-ambar); }
.rv-escala__seg--6 { background: var(--rv-ambar-esc); }

.rv-escala__legenda {
	display: flex;
	justify-content: space-between;
	width: min(260px, 80%);
	margin: 0 0 1.5rem;
	font-family: var(--rv-font-mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rv-aco-claro);
}

/* ---------- 20. Preditiva ---------- */
.rv-preditiva__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.rv-preditiva__itens {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.5rem 0;
}

.rv-preditiva__item {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
}

.rv-preditiva__icone {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--rv-nevoa);
	color: var(--rv-ambar);
	font-size: 1.4rem;
}

.rv-preditiva__titulo {
	font-family: var(--rv-font-sans);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--rv-primary);
	margin: 0 0 .15rem;
	letter-spacing: 0;
}

.rv-preditiva__descricao {
	margin: 0;
	color: var(--rv-text-2);
	font-size: .94rem;
}

.rv-preditiva__midias {
	display: grid;
	gap: 1rem;
}

@media (min-width: 960px) {
	.rv-preditiva__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- 21. Sobre / responsavel / MV / valores ---------- */
.rv-sobre__topo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.rv-sobre__texto p {
	color: var(--rv-text-2);
}

/* Card institucional de credenciais (substitui o antigo card de pessoa).
   Mantem a moldura dos demais cartoes: surface, borda, raio e sombra. */
.rv-credenciais {
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	padding: 1.75rem;
	box-shadow: var(--rv-shadow-sm);
	text-align: center;
}

/* Motivo assinatura: a rosa dos ventos no lugar do antigo avatar. */
.rv-credenciais__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	margin-bottom: .75rem;
}

.rv-credenciais__bussola {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rv-marinho), var(--rv-profundo));
	color: var(--rv-ciano); /* o SVG usa currentColor */
}

.rv-credenciais__logo {
	max-width: 180px;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.rv-credenciais__nome {
	font-family: var(--rv-font-display);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--rv-primary);
	margin: 0;
}

.rv-credenciais__rotulo {
	font-family: var(--rv-font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--rv-accent);
	margin: .25rem 0 1.15rem;
}

/* Selo de assistencia autorizada. */
.rv-credenciais__selo {
	padding: .9rem 1rem;
	background: var(--rv-nevoa);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-sm);
}

.rv-credenciais__selo-titulo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	font-family: var(--rv-font-mono);
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--rv-text-2);
	margin: 0 0 .35rem;
}

.rv-credenciais__selo-titulo i {
	color: var(--rv-azul);
	font-size: 1.1em;
}

.rv-credenciais__marcas {
	margin: 0;
	font-weight: 600;
	font-size: .95rem;
	color: var(--rv-marinho);
	line-height: 1.4;
}

/* Credenciais numericas (vindas de rv_stats()). */
.rv-credenciais__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 1.15rem 0 0;
	padding: 1.15rem 0 0;
	border-top: 1px solid var(--rv-border);
	list-style: none;
}

.rv-credencial {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

/* Marinho, como .rv-stat__numero: 8.88:1 sobre o card branco
   (o azul daria 3.56:1, que so passa como texto grande). */
.rv-credencial__numero {
	font-family: var(--rv-font-mono);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--rv-primary);
}

.rv-credencial__rotulo {
	font-size: .78rem;
	line-height: 1.3;
	color: var(--rv-text-2);
}

.rv-mv {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.rv-mv__card {
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-left: 4px solid var(--rv-accent);
	border-radius: 0 var(--rv-radius) var(--rv-radius) 0;
	padding: 1.75rem;
}

.rv-mv__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--rv-nevoa);
	color: var(--rv-accent);
	font-size: 1.5rem;
	margin-bottom: .6rem;
}

.rv-mv__titulo {
	font-family: var(--rv-font-display);
	color: var(--rv-primary);
	margin: 0 0 .5rem;
}

.rv-mv__card p {
	margin: 0;
	color: var(--rv-text-2);
}

.rv-valores__titulo {
	text-align: center;
	margin-bottom: 1.5rem;
}

.rv-valores__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

/* Variacao azul: diferencia os valores fundamentais dos demais cartoes do site.
   Apenas cor/borda mudam — grid, padding e breakpoints seguem intactos. */
.rv-valor {
	/* Fallback para navegadores sem color-mix(). */
	background: var(--rv-nevoa);
	border: 1px solid var(--rv-ciano);
	border-top: 3px solid var(--rv-azul);
	border-radius: var(--rv-radius);
	padding: 1.5rem;
}

@supports (background: color-mix(in srgb, red, blue)) {
	.rv-valor {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--rv-ciano) 22%, var(--rv-branco)) 0%,
			var(--rv-branco) 100%
		);
		border-color: color-mix(in srgb, var(--rv-azul) 32%, var(--rv-gelo));
		border-top-color: var(--rv-azul);
	}
}

.rv-valor__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	/* Marinho solido + icone branco: contraste 8.9:1. */
	background: var(--rv-marinho);
	color: var(--rv-branco);
	font-size: 1.4rem;
	margin-bottom: .5rem;
}

.rv-valor__titulo {
	font-family: var(--rv-font-sans);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--rv-marinho);
	margin: 0 0 .3rem;
}

.rv-valor__descricao {
	margin: 0;
	/* Tinta em vez de aco: mantem legibilidade sobre o fundo azulado. */
	color: var(--rv-tinta);
	font-size: .92rem;
}

@media (min-width: 700px) {
	.rv-mv {
		grid-template-columns: 1fr 1fr;
	}

	.rv-valores__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.rv-sobre__topo {
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
	}
}

@media (min-width: 960px) {
	.rv-valores__lista {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- 22. Processo / etapas ----------
   O numero e marca d'agua (Cormorant) atras do conteudo; as setas moram DENTRO
   do <li>, posicionadas na propria gap do grid — assim o <ol> continua com 5
   filhos e nada sobrepoe texto. */
.rv-etapas {
	--rv-etapa-gap: 1.25rem;

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rv-etapa-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Sem overflow:hidden aqui — as setas vivem fora do cartao (na gap do grid)
   e seriam recortadas. A marca d'agua e posicionada dentro dos limites. */
.rv-etapa {
	position: relative;
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	padding: 1.6rem 1.5rem 1.5rem;
}

/* Numero grande, em display, atras do conteudo. */
.rv-etapa__marca {
	position: absolute;
	top: .1rem;
	right: .75rem;
	z-index: 0;
	font-family: var(--rv-font-display);
	font-weight: 700;
	font-size: 5.5rem;
	line-height: .9;
	color: var(--rv-azul);
	opacity: .13;
	pointer-events: none;
	user-select: none;
}

.rv-etapa__conteudo {
	position: relative;
	z-index: 1; /* texto sempre acima da marca d'agua */
}

.rv-etapa__titulo {
	font-family: var(--rv-font-sans);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--rv-primary);
	margin: 0 0 .35rem;
}

.rv-etapa__descricao {
	margin: 0;
	color: var(--rv-text-2);
	font-size: .92rem;
}

/* ---- Setas de sequencia ----
   Ficam centradas na gap entre um cartao e o proximo. Por padrao (mobile,
   cartoes empilhados) apontam para baixo; no fluxo horizontal viram ti-arrow-right. */
.rv-etapa__seta {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rv-azul);
	font-size: 1.25rem;
	line-height: 1;
	pointer-events: none;
}

.rv-etapa__seta-h {
	display: none;
}

/* Empilhado: seta para baixo, centrada na gap inferior. */
.rv-etapa__seta {
	left: 50%;
	bottom: calc( var(--rv-etapa-gap) * -1 );
	width: var(--rv-etapa-gap);
	height: var(--rv-etapa-gap);
	transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
	.rv-etapa__seta-v {
		animation: rv-seta-v 1.8s ease-in-out infinite;
	}

	.rv-etapa__seta-h {
		animation: rv-seta-h 1.8s ease-in-out infinite;
	}
}

@keyframes rv-seta-v {
	0%, 100% { transform: translateY(-2px); opacity: .55; }
	50%      { transform: translateY(2px);  opacity: 1; }
}

@keyframes rv-seta-h {
	0%, 100% { transform: translateX(-2px); opacity: .55; }
	50%      { transform: translateX(2px);  opacity: 1; }
}

@media (min-width: 640px) {
	.rv-etapas {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Em 2 colunas (5 itens), os cartoes impares abrem a linha e os pares a fecham.
	   Nos impares a seta aponta para a direita, ligando o par ao lado.
	   Nos pares, a proxima etapa fica na linha de baixo A ESQUERDA (fluxo em "S"):
	   uma seta para baixo apontaria para o cartao errado, entao ela e omitida. */
	.rv-etapa:nth-child(odd) .rv-etapa__seta {
		left: auto;
		right: calc( var(--rv-etapa-gap) * -1 );
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	.rv-etapa:nth-child(odd) .rv-etapa__seta-h {
		display: block;
	}

	.rv-etapa:nth-child(odd) .rv-etapa__seta-v {
		display: none;
	}

	.rv-etapa:nth-child(even) .rv-etapa__seta {
		display: none;
	}
}

@media (min-width: 1040px) {
	.rv-etapas {
		grid-template-columns: repeat(5, 1fr);
	}

	/* Fluxo horizontal puro: todas as setas apontam para a direita.
	   O display:flex tem de ser reposto: em 640px os cartoes pares foram
	   escondidos (fluxo em "S") e aqui todos voltam a exibir a seta. */
	.rv-etapas .rv-etapa .rv-etapa__seta {
		display: flex;
		left: auto;
		right: calc( var(--rv-etapa-gap) * -1 );
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	.rv-etapas .rv-etapa .rv-etapa__seta-h {
		display: block;
	}

	.rv-etapas .rv-etapa .rv-etapa__seta-v {
		display: none;
	}
}

/* ---------- 23. Portfolio / galeria ---------- */
.rv-galeria {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.rv-galeria__item {
	display: flex;
}

.rv-galeria__item .rv-media {
	width: 100%;
}

.rv-galeria__vazio {
	text-align: center;
	max-width: 52ch;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	background: var(--rv-surface);
	border: 1px dashed var(--rv-aco-claro);
	border-radius: var(--rv-radius);
}

.rv-galeria__vazio-icone {
	display: block;
	font-size: 2.5rem;
	color: var(--rv-aco-claro);
	margin-bottom: .5rem;
}

.rv-galeria__vazio p {
	color: var(--rv-text-2);
	margin: 0 0 1.25rem;
}

@media (min-width: 600px) {
	.rv-galeria {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop: 3 fotos lado a lado, mesmo breakpoint da grade de servicos. */
@media (min-width: 960px) {
	.rv-galeria {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- 24. Contato / formulario ---------- */
.rv-contato__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

.rv-contato__lista {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	margin-top: 1.5rem;
}

.rv-contato__lista li {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
}

.rv-contato__ic {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--rv-nevoa);
	color: var(--rv-accent);
	font-size: 1.35rem;
}

.rv-contato__rot {
	display: block;
	font-family: var(--rv-font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--rv-aco-claro);
}

.rv-form {
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--rv-shadow-md);
}

.rv-campo {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-bottom: 1.1rem;
}

.rv-campo label {
	font-weight: 600;
	font-size: .9rem;
	color: var(--rv-text);
}

.rv-campo input,
.rv-campo select,
.rv-campo textarea {
	font: inherit;
	padding: .8rem .9rem;
	color: var(--rv-text);
	background: #fff;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-sm);
	transition: border-color var(--rv-transition), box-shadow var(--rv-transition);
}

.rv-campo input:focus,
.rv-campo select:focus,
.rv-campo textarea:focus {
	outline: none;
	border-color: var(--rv-accent);
	box-shadow: var(--rv-ring);
}

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

.rv-form__enviar {
	width: 100%;
	margin-top: .35rem;
}

.rv-form__erro {
	color: var(--rv-ambar-esc);
	font-weight: 500;
	font-size: .9rem;
	margin: .1rem 0 .75rem;
}

.rv-form__fallback {
	text-align: center;
	font-size: .88rem;
	color: var(--rv-text-2);
	margin: 1rem 0 0;
}

@media (min-width: 900px) {
	.rv-contato__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- 25. Reveal no scroll (com fallback sem JS) ----------
   Só esconde sob .rv-js (classe posta inline no <html> pelo header.php, antes da
   pintura). Sem JS, ou se o script falhar, o conteudo fica visivel por padrao.
   Anima apenas opacity/transform: ambos compostos na GPU, sem reflow. */
.rv-js .rv-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
	will-change: opacity, transform;
}

.rv-js .rv-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.rv-js .rv-reveal {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
}

/* ---------- 25b. Hover em cartoes e icones ----------
   Elevacao discreta + realce de borda; o icone recebe um micro-efeito.
   Sob prefers-reduced-motion, a secao 26 zera as transicoes e o :hover
   permanece como mudanca de estado instantanea (sem movimento continuo).
   Todos os hovers ficam sob (hover: hover) para nao "grudar" no toque. */
@media (hover: hover) {
	/* .rv-servico ja tem hover proprio (secao de servicos); aqui vao os demais. */
	.rv-mv__card,
	.rv-valor,
	.rv-etapa,
	.rv-marca {
		transition: transform var(--rv-transition), box-shadow var(--rv-transition), border-color var(--rv-transition);
	}

	.rv-mv__card:hover,
	.rv-valor:hover,
	.rv-etapa:hover,
	.rv-marca:hover {
		transform: translateY(-3px);
		box-shadow: var(--rv-shadow-md);
		border-color: var(--rv-azul);
	}

	/* Faixa escura: elevacao com sombra nao aparece, entao realca o vidro. */
	.rv-dif {
		transition: transform var(--rv-transition), background-color var(--rv-transition), border-color var(--rv-transition);
	}

	.rv-dif:hover {
		transform: translateY(-3px);
		background-color: rgba(255, 255, 255, .09);
		border-color: rgba(143, 203, 232, .45);
	}

	/* Micro-efeito nos icones, acionado pelo hover do cartao. */
	.rv-servico__icone,
	.rv-dif__icone,
	.rv-mv__icone,
	.rv-valor__icone {
		transition: transform var(--rv-transition), background-color var(--rv-transition), color var(--rv-transition);
	}

	.rv-servico:hover .rv-servico__icone,
	.rv-mv__card:hover .rv-mv__icone,
	.rv-valor:hover .rv-valor__icone,
	.rv-dif:hover .rv-dif__icone {
		transform: scale(1.06);
	}

	/* Realce de cor coerente com cada fundo. */
	.rv-valor:hover .rv-valor__icone {
		background-color: var(--rv-azul);
	}

	.rv-dif:hover .rv-dif__icone {
		background-color: rgba(143, 203, 232, .26);
	}

	.rv-galeria__item {
		transition: transform var(--rv-transition), box-shadow var(--rv-transition);
	}

	.rv-galeria__item:hover {
		transform: translateY(-3px);
		box-shadow: var(--rv-shadow-md);
	}
}

/* ---------- 26. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}