/* =============================================================================
 * Home — estilos específicos da front page (prefixo rvb-home-*).
 * Carregado só na home (inc/enqueue.php), depois de style.css, cases.css e
 * theme-refinements.css. Reaproveita os tokens --rvb* e as classes
 * .rvb-cases-hero-* (marquee do hero), .rvb-cases-trust (trust band) e
 * .rvb-cases-depo-* (cards de depoimento) de cases.css.
 * ========================================================================== */

/* ----- Fundo suave de seção (azul claríssimo da marca) ----- */
.rvb-home-soft {
	background: var(--rvbMainColorLight);
}

/* Par de CTAs de seção (.rvb-home-cta-pair): movido para theme-refinements.css
   (global) — usado também na single de produto. */

/* ============================================== HERO ====================== */
/* Selo de avaliações Google — badge entre o subtítulo e o CTA */
.rvb-home-selo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1rem 0 1.5rem;
	color: rgba(255, 255, 255, .9);
}
.rvb-home-selo-stars i {
	color: var(--rvbMainColorYellow);
	font-size: .95rem;
}
.rvb-home-selo strong { color: #fff; }
.rvb-home-selo a {
	color: rgba(255, 255, 255, .9);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.rvb-home-selo a:hover { color: var(--rvbMainColorYellow); }

/* Hero no formato do hero de Cases (marquee vertical, métricas) — as classes
 * .rvb-cases-hero-* vêm de cases.css; aqui só os ajustes próprios da home. */

/* Texto do hero maior (a base .rvb-section-h1 é 42px) */
.rvb-home-hero .rvb-section-h1 { line-height: 1.05; }
@media (min-width: 992px) {
	.rvb-home-hero .rvb-section-h1 { font-size: 54px; }
	/* Um respiro a mais no topo (a base .pt-160px é 160px) */
	.rvb-home-hero.pt-160px { padding-top: 180px; }
}
/* Mobile: limita a largura da headline pra quebrar em mais linhas
 * (sem isso sobra uma palavra/letra órfã na última linha) */
@media (max-width: 991.98px) {
	.rvb-home-hero .rvb-section-h1 {
		max-width: 20rem;
		margin-left: auto;
		margin-right: auto;
	}
}
/* Mobile: +20px de respiro embaixo (a base .pb-80px cai pra 40px aqui)
 * e um respiro a mais no topo, longe do header sticky */
@media (max-width: 767.98px) {
	.rvb-home-hero.pb-80px { padding-bottom: 60px; }
	.rvb-home-hero.pt-160px { padding-top: 130px; }
}

/* Descrição um pouco maior que o padrão do hero de Cases (16px) */
.rvb-home-hero .rvb-hero-subtitle { font-size: 1.25rem; }
@media (max-width: 767.98px) {
	.rvb-home-hero .rvb-hero-subtitle { font-size: 1.1rem; }
}

/* Selo de avaliações: alinhado à esquerda no desktop e um pouco maior */
.rvb-home-hero .rvb-home-selo {
	justify-content: flex-start;
	font-size: 1.08rem;
	margin: .75rem 0 1.5rem;
}
.rvb-home-hero .rvb-home-selo-stars i { font-size: 1.05rem; }
@media (max-width: 991.98px) {
	/* no mobile o hero de Cases centraliza a coluna de texto */
	.rvb-home-hero .rvb-home-selo { justify-content: center; }
}

/* Dois painéis de foto lado a lado (também 2 colunas no mobile), sem
 * carrossel — as fotos de cada painel alternam com cross-fade (js/main.js) */
.rvb-home-hero-fotos {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.rvb-home-hero-foto {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: .75rem;
	overflow: hidden;
	background: rgba(255, 255, 255, .08);
}
.rvb-home-hero-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.rvb-home-hero-foto img.is-on { opacity: 1; }

/* Badges flutuantes de prova social sobre as fotos (pill com ícone) */
.rvb-home-hero-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #fff;
	color: var(--rvbTextColor);
	font-weight: 600;
	font-size: .88rem;
	line-height: 1;
	padding: .4rem .95rem .4rem .45rem;
	border-radius: 50rem;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
	white-space: nowrap;
	animation: rvbBadgeFloat 5s ease-in-out infinite alternate;
}
.rvb-home-hero-badge--a {
	top: 12%;
	left: 50%;
	transform: translateX(-50%);
}
.rvb-home-hero-badge--b {
	bottom: 9%;
	left: 5%;
	animation-delay: 2.5s;
}
.rvb-home-hero-badge-ico {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #e7f3ff;
	color: var(--rvbMainColorBlue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	flex: 0 0 30px;
}
/* anima a propriedade `translate` (compõe com o transform da badge --a) */
@keyframes rvbBadgeFloat {
	to { translate: 0 -8px; }
}
@media (max-width: 767.98px) {
	.rvb-home-hero-fotos { gap: .75rem; }
	.rvb-home-hero-badge { font-size: .75rem; }
	.rvb-home-hero-badge-ico { width: 24px; height: 24px; flex-basis: 24px; font-size: .7rem; }
	.rvb-home-hero-badge--b { left: 3%; }
}
@media (prefers-reduced-motion: reduce) {
	.rvb-home-hero-badge { animation: none; }
	.rvb-home-hero-foto img { transition: none; }
}

/* ============================================== PROCESSO (3 passos) ======= */
/* 3 colunas SÓ no desktop — abaixo de 992px valem as regras responsivas do
 * inflaveis-fixo.css (2 colunas ≤991px, 1 coluna/empilhado ≤767px). */
@media (min-width: 992px) {
	.rvb-home-processo .rvb-fixo-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* Steps em formato de card (referência Heylink: mídia grande no topo,
 * rótulo "Passo 0X" colorido, título e texto à esquerda).
 * Linha conectora não combina com cards — some. */
.rvb-home-processo .rvb-fixo-steps::before {
	display: none;
}
.rvb-home-processo .rvb-fixo-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: 0 0 0 .05rem rgba(8, 60, 130, .06), 0 .5rem 1.5rem rgba(30, 34, 40, .05);
	transition: var(--rvbHoverTransition);
	transition-property: transform, box-shadow;
}
.rvb-home-processo .rvb-fixo-step:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 .05rem rgba(8, 60, 130, .1), 0 .9rem 2rem rgba(30, 34, 40, .1);
}
/* "Passo 0X" — de círculo numerado para rótulo colorido (padrão da referência) */
.rvb-home-processo .rvb-fixo-step-num {
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	display: inline;
	color: var(--rvbMainColorBlue);
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: .35rem;
}
.rvb-home-processo .rvb-fixo-step h3 {
	font-size: 1.3rem;
	margin-bottom: .5rem;
}
.rvb-home-processo .rvb-fixo-step p {
	text-align: left;
}

/* Mídia por passo no TOPO do card, largura total (order: -1 reordena) */
.rvb-home-processo .rvb-processo-step-media {
	order: -1;
	width: 100%;
	aspect-ratio: 16 / 11;
	margin: 0 0 1.25rem;
	border-radius: .6rem;
	overflow: hidden;
	background: var(--rvbMainColorLight);
	box-shadow: none;
}
.rvb-home-processo .rvb-processo-step-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
}
.rvb-home-processo .rvb-processo-step-media--ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	border: 2px dashed var(--rvbLightGrayColor);
	background: var(--rvbMainColorLight);
	box-shadow: none;
	color: var(--rvbDarkGrayColor);
}
.rvb-home-processo .rvb-processo-step-media--ph i { font-size: 1.5rem; }
.rvb-home-processo .rvb-processo-step-media--ph span { font-size: .8rem; }

/* Setas flutuantes entre os cards — reforçam a sequência dos passos.
 * Desktop (3 colunas): seta horizontal no vão entre os cards.
 * Mobile (1 coluna): seta vertical (rotacionada) no vão entre os cards.
 * Tablet (2 colunas): oculta — a grade 2+1 não forma linha de leitura.
 * Anel no tom do fundo da seção (bg-light) — mesmo padrão do .rvb-fixo-step-num. */
.rvb-home-processo .rvb-fixo-step:not(:first-child)::before {
	content: '';
	position: absolute;
	z-index: 2;
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rvbMainColorBlue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	box-shadow: 0 0 0 6px #f8f9fa;
}
@media (min-width: 992px) {
	.rvb-home-processo .rvb-fixo-step:not(:first-child)::before {
		display: block;
		top: 50%;
		left: -32px; /* centro do gap de 24px entre as colunas */
		transform: translateY(-50%);
	}
}
@media (max-width: 767.98px) {
	.rvb-home-processo .rvb-fixo-step:not(:first-child)::before {
		display: block;
		top: -36px; /* centro do gap de 32px entre as linhas */
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
}

/* ============================================== SPECS (faixa azul) ======== */
.rvb-home-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin: 0;
}
/* Mobile: vira carrossel por swipe (scroll-snap nativo, sem dots/setas) —
 * 1 card + um pedaço do próximo visível para dar noção de continuidade. */
@media (max-width: 767.98px) {
	.rvb-home-specs {
		display: flex;
		overflow-x: auto;
		gap: .75rem;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: .25rem;
	}
	.rvb-home-specs::-webkit-scrollbar { display: none; }
	.rvb-home-spec {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}
.rvb-home-spec {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: .75rem;
	padding: 1.5rem 1.25rem;
}
.rvb-home-spec-ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #fff;
	color: var(--rvbMainColorBlue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	margin-bottom: .5rem;
}
.rvb-home-spec-titulo {
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
}
.rvb-home-spec-desc {
	color: rgba(255, 255, 255, .78);
	font-size: .92rem;
	line-height: 1.45;
}

/* ============================================== CASES EM DESTAQUE ========= */
/* Carrossel com 3 cards por linha no desktop (2 no tablet, 1 no mobile):
 * foto em destaque no topo, conteúdo (logo + título + descrição) abaixo. */
.rvb-home-case-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 0 0 .05rem rgba(8, 60, 130, .06), 0 .5rem 1.5rem rgba(30, 34, 40, .05);
	transition: var(--rvbHoverTransition);
	transition-property: transform, box-shadow;
}
.rvb-home-case-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 .05rem rgba(8, 60, 130, .1), 0 .9rem 2rem rgba(30, 34, 40, .1);
}
.rvb-home-case-card:hover .rvb-home-case-marca a {
	color: var(--rvbMainColorBlue);
}
.rvb-home-case-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: 1.75rem 1.75rem 2rem;
}
/* Agora é um <a> (a imagem é uma das duas áreas clicáveis do card) */
.rvb-home-case-media {
	order: -1;
	flex: none;
	display: block;
	background: var(--rvbMainColorLight);
}
.rvb-home-case-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center center;
	display: block;
	margin: 0;
}
.rvb-home-case-logo img {
	max-height: 48px;
	max-width: 190px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0;
}
.rvb-home-case-marca {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0;
}
/* Título é o link do card (stretched-link) — herda a cor e azula no hover */
.rvb-home-case-marca a {
	color: inherit;
	text-decoration: none;
	transition: var(--rvbHoverTransition);
	transition-property: color;
}
/* Filete amarelo de assinatura acima do título */
.rvb-home-case-marca::before {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: var(--rvbMainColorYellow);
	margin-bottom: .75rem;
}
@media (max-width: 991.98px) {
	.rvb-home-case-body { padding: 1.75rem 1.5rem; }
	.rvb-home-case-marca { font-size: 1.4rem; }
}

/* Owl: alturas iguais + folga p/ sombra não cortar.
 * align-items: stretch anula o `center` global do owl.carousel.min.css
 * (sem ele, os cards não esticam e cada um fica de um tamanho). */
.rvb-home-cases-carousel .owl-stage { display: flex; align-items: stretch; }
.rvb-home-cases-carousel .owl-item { display: flex; float: none; }
.rvb-home-cases-carousel .owl-stage-outer {
	padding: .5rem .25rem 1.5rem;
	margin: -.5rem -.25rem 0;
}

/* ============================================== DEPOIMENTOS =============== */
/* Selo de avaliações — versão dark (sobre fundo claro), com logo do Google */
.rvb-home-selo--dark {
	justify-content: center;
	color: var(--rvbTextColor);
	margin-bottom: 0;
}
.rvb-home-selo--dark strong { color: var(--rvbTextColor); }
.rvb-home-selo--dark a {
	color: var(--rvbMainColorBlue);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.rvb-home-selo--dark a:hover { color: var(--rvbMainColorRed); }
.rvb-home-selo-google svg {
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: -2px;
}

/* Carrossel full-bleed: sangra a tela inteira (cards cortados nas bordas).
 * 100vw inclui a scrollbar — o clip na seção evita scroll horizontal no body. */
.rvb-home-depoimentos {
	overflow-x: clip;
}
.rvb-home-depo-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-left: 1rem;
}

/* Cards com altura igual dentro do Owl + folga p/ a sombra não cortar */
.rvb-home-depoimentos .rvb-depoimentos-carousel .owl-stage {
	display: flex;
	align-items: stretch; /* anula o `center` global do owl.carousel.min.css */
}
.rvb-home-depoimentos .rvb-depoimentos-carousel .owl-item {
	display: flex;
	float: none;
}
.rvb-home-depoimentos .rvb-cases-depo-card {
	height: 100%;
}
.rvb-home-depoimentos .rvb-depoimentos-carousel .owl-stage-outer {
	padding: .5rem .25rem 1.5rem;
	margin: -.5rem -.25rem 0;
}

/* ============================================ LOGOS DE CLIENTES =========== */
/* Faixa isolada logo abaixo do hero (prova social imediata, sem depoimentos) */
.rvb-home-clientes-band {
	background: #fff;
	border-bottom: 1px solid var(--rvbLightGrayColor);
}
/* Título usa .clientes-title (style.css), o mesmo da faixa de logos de Cases. */
.rvb-home-clientes-band .clientes-title { margin: 0; }

/* ================================================== SEGMENTOS ============= */
/* Cards de segmento (css/cases.css) em carrossel: alturas iguais + folga p/
   a sombra e o ícone flutuante não serem cortados pelo stage. */
.rvb-home-segmentos-carousel .owl-stage { display: flex; align-items: stretch; }
.rvb-home-segmentos-carousel .owl-item { display: flex; float: none; }
.rvb-home-segmentos-carousel .rvb-cases-seg-card { height: 100%; }
.rvb-home-segmentos-carousel .owl-stage-outer {
	padding: .5rem .25rem 1.5rem;
	margin: -.5rem -.25rem 0;
}
/* Dots — o style.css trata `button.owl-dot` como seta de navegação (caixa de
   50×50px); aqui devolvemos o formato de bolinha. */
.rvb-home-segmentos-carousel .owl-dots {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	gap: .5rem;
	line-height: 0;
}
.rvb-home-segmentos-carousel.owl-carousel button.owl-dot {
	width: 10px;
	height: 10px;
	border-radius: 50rem;
	background: var(--rvbMainColorBlue);
	opacity: .25;
	box-shadow: none;
	font-size: 0;
	transition: var(--rvbHoverTransition);
	transition-property: opacity, width, background;
}
.rvb-home-segmentos-carousel.owl-carousel button.owl-dot span { display: none; }
.rvb-home-segmentos-carousel.owl-carousel button.owl-dot:hover { opacity: .55; }
.rvb-home-segmentos-carousel.owl-carousel button.owl-dot.active {
	width: 28px;
	opacity: 1;
	background: var(--rvbMainColorBlue);
}
.rvb-home-segmentos-carousel.owl-carousel button.owl-dot:focus-visible {
	outline: 2px solid var(--rvbMainColorBlue);
	outline-offset: 3px;
}

/* Processo — agora vem depois de Depoimentos (bg-light): fundo branco para
   não emendar duas faixas cinza. */
.rvb-home-processo.bg-light { background: #fff !important; }