/* RH Gestão — acabamento sobre theme.json. Todos os valores rastreiam DESIGN.md. */

html {
	scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- Foco visível ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
	border-radius: 4px;
}

.rh-footer a:focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* ---------- Cabeçalho ---------- */
/* A navbar acompanha o scroll: o sticky precisa ficar no WRAPPER do template-part.
   O .rh-header interno tem a mesma altura do wrapper, então sozinho não teria por onde
   "viajar" e rolava junto com a página. O wrapper é filho de .wp-site-blocks (altura da
   página inteira), então aqui o sticky pina no topo durante todo o scroll. Vale para
   todas as páginas (todas usam este mesmo template-part de cabeçalho). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--paper);
}

.rh-header {
	z-index: 100;
	border-bottom: 1px solid var(--wp--custom--color--ink-border);
}

.rh-header-logo img {
	height: auto;
}

.rh-header-actions {
	gap: var(--wp--preset--spacing--30);
}

.rh-login-link {
	margin: 0;
}

.rh-login-link a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
}

.rh-login-link a:hover {
	color: var(--wp--preset--color--azul);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 260px;
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: 12px;
	box-shadow: var(--wp--custom--shadow--card);
	padding: 8px;
}

/* ---------- Mega-menu de funcionalidades ---------- */
.rh-nav-cluster {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.rh-mega-toggle {
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
}

.rh-mega-toggle:hover {
	color: var(--wp--preset--color--azul);
}

.rh-nav-home {
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
}

.rh-nav-home:hover {
	color: var(--wp--preset--color--azul);
}

/* Hover consistente nos itens do bloco de navegação (Sobre nós, Blog): o theme.json
   define azul, mas com seletor :where() de especificidade zero não estava pegando. */
.rh-nav-cluster .wp-block-navigation a:hover,
.rh-nav-cluster .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--azul);
}

.rh-mega-caret {
	transition: transform 150ms ease-out;
}

.rh-mega-toggle[aria-expanded="true"] .rh-mega-caret {
	transform: rotate(180deg);
}

.rh-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.rh-mega[hidden] {
	display: none;
}

.rh-mega-inner {
	pointer-events: auto;
	margin-top: 8px;
	width: min(1240px, calc(100vw - 32px));
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px var(--wp--preset--spacing--30);
}

/* rodapé do mega: reconecta o índice plano à narrativa da jornada */
.rh-mega-foot {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--wp--custom--color--ink-border);
}

.rh-mega-foot a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s);
}

.rh-mega-foot a:hover {
	color: var(--wp--custom--color--primary-dark);
}

.rh-mega-cat {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--custom--color--muted);
	margin: 0 0 12px;
}

.rh-mega-cat a {
	color: inherit;
	text-decoration: none;
}

.rh-mega-cat a:hover {
	color: var(--wp--preset--color--azul);
}

.rh-mega ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.rh-mega li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s);
}

.rh-mega li a:hover {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--azul);
}

.rh-mega li a .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
}

@media (max-width: 781px) {
	.rh-mega-nav,
	.rh-nav-home {
		display: none;
	}
}

@media (min-width: 782px) {
	.wp-block-navigation .rh-nav-func-mobile,
	.wp-block-navigation .rh-nav-home-mobile {
		display: none;
	}
}

/* ---------- Hero + linha da jornada ---------- */
.rh-hero {
	position: relative;
	overflow: hidden;
}

.rh-hero::before {
	content: "";
	position: absolute;
	inset: auto 40% 0 0;
	height: 300px;
	pointer-events: none;
	opacity: 0.8;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1240' height='380' viewBox='0 0 1240 380' fill='none'%3E%3Cpath d='M-20 340 L180 340 Q220 340 220 300 L220 220 Q220 180 260 180 Q300 180 300 220 L300 300 Q300 340 340 340 L520 340 Q560 340 560 300 L560 140 Q560 100 600 100 Q640 100 640 140 L640 300 Q640 340 680 340 L900 340 Q940 340 940 300 L940 200 Q940 160 980 160 Q1020 160 1020 200 L1020 300 Q1020 340 1060 340 L1260 340' stroke='%23005DF5' stroke-opacity='0.10' stroke-width='26' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left bottom;
}

.rh-hero > * {
	position: relative;
}

.rh-hero-lead {
	color: var(--wp--custom--color--muted);
	margin-bottom: var(--wp--preset--spacing--20);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.rh-hero h1 {
	text-wrap: balance;
}

/* destaque do H1 (modelo do cliente: parte da headline em azul) */
.rh-hl {
	color: var(--wp--preset--color--azul);
}

.rh-hero-sub {
	max-width: 58ch;
	color: var(--wp--custom--color--muted);
}

.rh-hero-trust {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
}

.rh-hero-trust .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
}

/* ---------- Botões outline (CTAs de navegação) ---------- */
.rh-cta-outline {
	margin-top: var(--wp--preset--spacing--40);
}

.rh-hero .rh-cta-outline {
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--azul);
	border: 1.5px solid var(--wp--preset--color--azul);
	padding-top: 12px;
	padding-bottom: 12px;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--paper);
}

/* ---------- Formulário do hero ---------- */
.rh-form-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	padding: 26px;
}

/* O card tem 6 campos + aceite + botão: sem apertar o miolo ele sozinho definia a
   altura do hero (918px contra 457px da coluna de texto). */
/* Tamanho de fonte vem do pattern (as classes has-*-font-size do WP saem com
   !important, então sobrescrever aqui não funcionaria). */
.rh-form-card h2 {
	margin-top: 0;
	margin-bottom: 0;
}

.rh-form-card > p {
	margin-top: 4px;
	margin-bottom: 0;
}

.rh-form {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

/* Reunião 17/08: cada campo do formulário ocupa a linha inteira (coluna única). */
.rh-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.rh-field {
	display: grid;
	gap: 4px;
}

.rh-field label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.rh-form input,
.rh-form select,
.rh-form button {
	box-sizing: border-box;
}

.rh-field input,
.rh-field select {
	font: inherit;
	font-size: 16px;
	line-height: normal;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--custom--color--ink-border);
	border-radius: 12px;
	padding: 0 14px;
	height: 44px;
	width: 100%;
}

.rh-field input::placeholder {
	color: var(--wp--custom--color--muted);
	opacity: 0.7;
}

.rh-field input:focus-visible,
.rh-field select:focus-visible {
	border-color: var(--wp--preset--color--azul);
	outline-offset: 0;
}

.rh-field-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wp--preset--font-size--xs);
}

.rh-field-check input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--teal);
	flex: none;
}

.rh-submit {
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--teal);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 28px;
	min-height: 46px;
	cursor: pointer;
	transition: background-color 150ms ease-out;
}

.rh-submit:hover {
	background: var(--wp--custom--color--teal-hover);
}

/* Retorno do envio (16/09): destacado, já que é a confirmação de que o lead chegou. */
.rh-form-note {
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	color: var(--wp--preset--color--teal);
	margin: 0;
}

.rh-form-note.is-erro {
	color: var(--wp--preset--color--ink);
}

/* Campo-isca antispam: fora da tela para humanos e leitores de tela. */
.rh-isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Abas dos pilares ---------- */
.rh-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* inline-flex: o ícone e o texto eram inline e o SVG alinhava pela linha de base da
   fonte, ficando fora de esquadro com a palavra ao lado. */
.rh-tablist button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 1.5px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 10px 22px;
	min-height: 44px;
	cursor: pointer;
	transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.rh-tablist button:hover {
	border-color: var(--wp--preset--color--ink);
}

.rh-tablist button[aria-selected="true"] {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.rh-tabs:not(.rh-tabs-ready) .rh-tablist {
	display: none;
}

.rh-tabs-ready .rh-tab-panel {
	display: none;
}

.rh-tabs-ready .rh-tab-panel.is-active {
	display: block;
	animation: rh-fade 200ms ease-out;
}

.rh-tabs-ready .rh-tab-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.rh-tab-desc {
	max-width: 62ch;
}

.rh-tab-panel:not(:last-child) {
	margin-bottom: var(--wp--preset--spacing--40);
}

.rh-tabs-ready .rh-tab-panel:not(:last-child) {
	margin-bottom: 0;
}

@keyframes rh-fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Estatísticas ---------- */
.rh-stats {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
}

.rh-stat-num {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* teto no xl (32px): 36px estava fora da escala */
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--azul);
	margin: 0 0 4px;
	line-height: 1.1;
}

.rh-stat > p:last-child {
	color: var(--wp--custom--color--muted);
	max-width: 24ch;
	margin: 0;
}

/* faixa de números centralizada (prova social / sobre) */
.rh-stats-center {
	justify-content: center;
	gap: var(--wp--preset--spacing--40) clamp(40px, 6vw, 96px);
	text-align: center;
}

.rh-stats-center .rh-stat {
	text-align: center;
}

.rh-stats-center .rh-stat > p:last-child {
	max-width: 20ch;
	margin-inline: auto;
}

/* ---------- Proposição de valor ---------- */
.rh-points {
	margin-top: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.rh-point {
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
}

.rh-point .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
	margin-top: 2px;
}

.rh-point p {
	margin: 0;
	max-width: 52ch;
}

/* ---------- Blocos de features ---------- */
.rh-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.rh-feature-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.rh-feature-item {
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
}

/* título de card: 18px (H5 do manual). Em 28px empatava com o h2 da seção (32px),
   quebrava em 2 linhas e inflava a altura do card. */
.rh-feature-item h3 {
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.3;
	margin: 12px 0 6px;
}

.rh-feature-item p {
	margin: 0;
}

.rh-features.has-paper-background-color .rh-feature-item {
	background: var(--wp--preset--color--mist);
	border-color: transparent;
}

.rh-feature-item .rhg-icon {
	color: var(--wp--preset--color--azul);
}

.rh-feature-item h3 {
	margin: 10px 0 6px;
}

.rh-feature-item p {
	margin: 0;
	color: var(--wp--custom--color--muted);
}

.rh-shot img {
	border: 1px solid var(--wp--custom--color--ink-border);
	box-shadow: var(--wp--custom--shadow--card);
	height: auto;
	width: 100%;
}

.rh-shot-panel {
	background: linear-gradient(160deg, rgba(0, 93, 245, 0.10), rgba(33, 37, 41, 0.05));
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(12px, 1.8vw, 24px);
	margin: 0;
}

.rh-shot-panel img {
	border-radius: 12px;
	display: block;
}

.rh-shot-phone-col {
	background: linear-gradient(160deg, rgba(0, 93, 245, 0.10), rgba(33, 37, 41, 0.05));
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.rh-shot-phone {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.rh-shot-phone img {
	border-radius: 24px;
}

/* ---------- Prova social ---------- */
.rh-prova h2,
.rh-prova p {
	margin-left: auto;
	margin-right: auto;
}

.rh-logos {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.rh-logo-cliente {
	margin: 0;
}

.rh-logo-cliente img {
	height: 44px;
	width: auto;
}

/* ---------- Rodapé ---------- */
.rh-footer a {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.rh-footer a:hover {
	text-decoration: underline;
}

.rh-footer h2 {
	color: rgba(255, 255, 255, 0.66);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.rh-footer-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.rh-footer-links li {
	margin: 0 0 10px;
}

.rh-footer-links-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 10px;
	align-items: start;
}

.rh-footer-links-2col li {
	margin: 0;
}

.rh-footer-contato li,
.rh-footer-selos li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rh-footer-contato .rhg-icon,
.rh-footer-selos .rhg-icon {
	opacity: 0.8;
	flex: none;
}

.rh-footer-selos {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.rh-footer-social {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rh-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.rh-hero::before {
		display: none;
	}

	.rh-hero {
		padding-top: var(--wp--preset--spacing--40);
	}

	.rh-form-card {
		padding: var(--wp--preset--spacing--30);
	}

	.rh-field-row {
		grid-template-columns: 1fr;
	}

	.rh-feature-grid {
		grid-template-columns: 1fr;
	}

	.rh-footer-links-2col {
		columns: 1;
	}

	.rh-logo-cliente img {
		height: 36px;
	}
}

@media (max-width: 600px) {
	body {
		padding-bottom: 84px;
	}

	.rh-btn-header {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		z-index: 90;
	}

	.rh-btn-header .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		box-shadow: 0 8px 24px rgba(33, 37, 41, 0.24);
	}
}

/* ---------- Accordion (estrela + FAQ) ---------- */
.rh-acc details {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	margin-bottom: 12px;
	overflow: hidden;
}

.rh-faq-acc details {
	background: var(--wp--preset--color--mist);
	border-color: transparent;
}

.rh-acc summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--m);
}

.rh-acc summary::-webkit-details-marker {
	display: none;
}

.rh-acc summary::after {
	content: "+";
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--azul);
	flex: none;
}

.rh-acc details[open] summary::after {
	content: "\2212";
}

.rh-acc details > p {
	padding: 0 22px 20px;
	margin: 0;
	color: var(--wp--custom--color--muted);
	max-width: 60ch;
}

/* ---------- Feature-estrela ---------- */
.rh-estrela-shots {
	position: relative;
	aspect-ratio: 1200 / 660;
	background: var(--wp--preset--color--paper);
}

.rh-estrela-shots img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	opacity: 0;
	transition: opacity 200ms ease-out;
}

.rh-estrela-shots img.is-active {
	opacity: 1;
}

/* ---------- Integrações ---------- */
.rh-int-grid {
	gap: var(--wp--preset--spacing--20);
}

.rh-int-tile {
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
	padding: 18px 26px;
	gap: 14px;
	align-items: center;
}

.rh-int-tile .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
}

.rh-int-tile p {
	margin: 0;
	line-height: 1.4;
}

.rh-pendente {
	color: var(--wp--custom--color--muted);
	margin-top: var(--wp--preset--spacing--30);
}

/* ---------- Funcionalidades completas ---------- */
.rh-func-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--20);
}

.rh-func-item {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	padding: 20px 22px;
}

.rh-func-item h4 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--m);
}

.rh-func-item h4 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.rh-func-item h4 a:hover {
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
}

.rh-func-item p {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--custom--color--muted);
}

/* ---------- Depoimentos ---------- */
.rh-depo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

/* Card branco sobre a seção mist: como o card também era mist, ele sumia no fundo. */
.rh-depo-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	padding: 28px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rh-depo-card blockquote {
	margin: 0;
	font-size: var(--wp--preset--font-size--m);
}

.rh-depo-card blockquote p {
	margin: 0;
}

.rh-depo-card figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rh-depo-avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mist); /* invertido junto com o card */
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--azul);
	flex: none;
}

.rh-depo-quem {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

.rh-depo-quem strong {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s);
}

.rh-depo-metrica {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--wp--custom--color--ink-border);
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--azul);
}

/* ---------- Case ---------- */
.rh-video-ph {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.rh-video-ph p {
	margin: 0;
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--s);
}

/* ---------- Planos ---------- */
.rh-planos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.rh-plano {
	position: relative;
	border: 1.5px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rh-plano-destaque {
	border-color: var(--wp--preset--color--azul);
	box-shadow: var(--wp--custom--shadow--card);
}

.rh-plano-badge {
	position: absolute;
	top: -13px;
	left: 28px;
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	padding: 4px 14px;
	border-radius: var(--wp--custom--radius--pill);
}

.rh-plano h3 {
	margin: 0;
}

.rh-plano-para {
	margin: 0;
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--s);
}

.rh-plano ul {
	list-style: none;
	margin: 8px 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: var(--wp--preset--font-size--s);
}

.rh-plano ul li {
	display: flex;
	gap: 10px;
}

.rh-plano ul li::before {
	content: "\2713";
	color: var(--wp--preset--color--teal);
	font-weight: 700;
	flex: none;
}

.rh-plano-cta {
	margin-top: auto;
	text-align: center;
	padding: 12px 24px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1.5px solid var(--wp--preset--color--azul);
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.rh-plano-cta:hover {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--paper);
}

.rh-plano-cta-teal {
	background: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
}

.rh-plano-cta-teal:hover {
	background: var(--wp--custom--color--teal-hover);
	border-color: var(--wp--custom--color--teal-hover);
	color: var(--wp--preset--color--paper);
}

/* utilitário: texto só para leitor de tela */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Planos: tabela comparativa ---------- */
.rh-planos-tablewrap {
	margin-top: var(--wp--preset--spacing--50);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.rh-planos-table {
	width: 100%;
	min-width: 660px;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--s);
}

.rh-planos-table th,
.rh-planos-table td {
	padding: 14px 16px;
	text-align: center;
	border-bottom: 1px solid var(--wp--custom--color--ink-border);
	vertical-align: middle;
}

.rh-planos-table thead th {
	border-bottom-width: 2px;
	vertical-align: bottom;
}

.rh-planos-table th[scope="row"] {
	text-align: left;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	width: 40%;
}

.rh-pt-rec {
	text-align: left;
	width: 40%;
}

.rh-pt-nome {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.rh-pt-tag {
	display: block;
	margin: 4px auto 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	color: var(--wp--custom--color--muted);
	max-width: 22ch;
}

.rh-pt-destaque {
	background: var(--wp--preset--color--paper);
}

.rh-planos-table thead .rh-pt-destaque {
	border-top: 2px solid var(--wp--preset--color--azul);
	border-radius: 12px 12px 0 0;
}

.rh-planos-table tfoot .rh-pt-destaque {
	border-radius: 0 0 12px 12px;
	border-bottom: 0;
}

.rh-pt-plano .rh-plano-badge {
	position: static;
	display: inline-block;
	margin: 0 0 8px;
}

.rh-plan-sim {
	display: inline-flex;
	color: var(--wp--preset--color--teal);
}

.rh-plan-nao {
	color: var(--wp--custom--color--ink-border);
	font-weight: 700;
	font-size: 1.1rem;
}

.rh-pt-cta .rh-plano-cta {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 20px;
	font-size: var(--wp--preset--font-size--xs);
}

/* Planos em cards por plano — só no mobile (alterna com a tabela) */
.rh-planos-cards {
	display: none;
}

.rh-planos-cards .rh-plano-cta {
	display: block;
}

/* ---------- CTA final ---------- */
.rh-btn-paper .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.rh-btn-paper .wp-block-button__link:hover {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 991px) {
	.rh-func-grid {
		grid-template-columns: 1fr 1fr;
	}

	.rh-depo-grid,
	.rh-planos-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.rh-func-grid {
		grid-template-columns: 1fr;
	}

	/* Planos: troca a tabela larga por cards empilhados por plano */
	.rh-planos-tablewrap {
		display: none;
	}

	.rh-planos-cards {
		display: grid;
		gap: var(--wp--preset--spacing--40);
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* ================================================================
   Molduras de screenshot (fix de qualidade jul/2026)
   ================================================================ */

/* garante que nenhum <img> cru em bloco HTML estique na vertical */
.rh-frame img,
.rh-phone-screen img,
.rh-dash-shot img,
.rh-device img {
	display: block;
	height: auto;
}

/* Backdrop: era um gradiente azul com até 34px de padding em volta, ou seja, 68px de
   largura gastos em fundo. Agora é um bloco azul-claro DESLOCADO atrás da moldura
   (referência: Cardápio Web), que dá profundidade sem comer o espaço da tela. */
.rh-panel {
	position: relative;
	padding: 0;
	background: none;
}

/* Azul translúcido, não mist: o bloco precisa aparecer tanto sobre seção branca quanto
   sobre seção mist — pintado de mist, sumia na seção da home, que é mist. */
.rh-panel::before {
	content: "";
	position: absolute;
	inset: 18px -14px -18px 14px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--azul);
	opacity: 0.12;
	z-index: 0;
}

/* moldura de browser */
.rh-frame {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	/* sombra curta: os 44px de desfoque de antes deixavam a tela com ar borrado */
	box-shadow: 0 2px 8px rgba(33, 37, 41, 0.08);
}

.rh-frame-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 15px;
	background: var(--wp--custom--color--surface);
	border-bottom: 1px solid var(--wp--custom--color--ink-border);
}

.rh-frame-bar i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wp--custom--color--ink-border);
}

.rh-frame img {
	width: 100%;
}

/* showcase com moldura de celular (App do Colaborador) */
.rh-showcase-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(24px, 3.5vw, 52px);
}

.rh-showcase-phone .rh-phone {
	width: 250px;
	box-shadow: 0 22px 48px rgba(33, 37, 41, 0.20);
}

/* moldura placeholder (print pendente do app de teste) */
.rh-frame-ph {
	aspect-ratio: 16 / 10;
	display: flex;
	flex-direction: column;
}

.rh-frame-ph-txt {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* ---------- Vitrine do hero: notebook + celular ----------
   Mora DENTRO da coluna de texto (~696px), não abaixo do hero inteiro: é ali que sobrava
   o vazio, porque o formulário é bem mais alto que o texto. */
.rh-vitrine {
	display: flex;
	align-items: flex-end;
	gap: 0;
	margin-top: var(--wp--preset--spacing--40);
}

/* moldura de notebook: tampo com a tela e uma base afunilada embaixo */
.rh-notebook {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 470px;
}

.rh-notebook-tampo {
	background: var(--wp--preset--color--ink);
	border-radius: 14px 14px 4px 4px;
	padding: 10px 10px 12px;
	box-shadow: 0 22px 48px rgba(33, 37, 41, 0.20);
}

.rh-notebook-tela {
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
	display: block;
}

.rh-notebook-tela img {
	display: block;
	width: 100%;
	height: auto;
}

/* a base é um trapézio: mais larga que o tampo e afunilando para baixo.
   display:block porque o elemento é um <span> — sem isso a altura não se aplica. */
.rh-notebook-base {
	display: block;
	height: 14px;
	margin: 0 -4%;
	background: var(--wp--custom--color--ink-border);
	clip-path: polygon(0 0, 100% 0, 97.5% 100%, 2.5% 100%);
}

.rh-vitrine .rh-phone {
	flex: none;
	width: 132px;
	padding: 6px;
	border-radius: 22px;
	position: relative;
	z-index: 1;
	margin: 0 0 0 -22px; /* encosta no notebook, como um conjunto */
}

.rh-vitrine .rh-phone-screen {
	border-radius: 16px;
}

/* o notch precisa encolher junto, senão fica desproporcional no aparelho menor */
.rh-vitrine .rh-phone-notch {
	top: 6px;
	width: 58px;
	height: 12px;
	border-radius: 0 0 8px 8px;
}

@media (max-width: 900px) {
	.rh-vitrine {
		justify-content: center;
	}

	.rh-notebook {
		max-width: 380px;
	}
}

/* ---------- Vídeos da seção de IA ---------- */
/* 820px: em largura cheia (1240px) o quadro ficava com 842px de altura e dominava a
   seção, tirando a atenção dos recursos listados acima dele.
   Seletor precisa ser mais específico que `.is-layout-constrained > .alignwide`, a regra
   do WP que define a largura do alignwide e que vencia a versão simples desta. */
.rh-ia .rh-ia-visual.alignwide {
	max-width: 820px;
	margin: var(--wp--preset--spacing--50) auto 0;
}

/* Enquanto está só a nota de pendência, a moldura não precisa reservar a proporção do
   vídeo: vazia em 16/10 ela virava um retângulo de 569px de altura. */
.rh-ia-visual .rh-frame-ph {
	aspect-ratio: auto;
	min-height: 150px;
}

/* Vídeo único desde 08/09 (os dois foram concatenados), então não há mais o que
   esconder: a regra de display que existia aqui dependia de um atributo que o JS nunca
   aplicava e deixava os dois vídeos visíveis, empilhados. */
.rh-ia-video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--wp--preset--color--ink);
}

/* moldura de celular */
.rh-phone {
	width: 264px;
	max-width: 100%;
	margin: 0 auto;
	background: var(--wp--preset--color--ink);
	border-radius: 40px;
	padding: 12px;
	box-shadow: 0 24px 50px rgba(33, 37, 41, 0.24);
	position: relative;
}

.rh-phone-notch {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 118px;
	height: 24px;
	background: var(--wp--preset--color--ink);
	border-radius: 0 0 16px 16px;
	z-index: 2;
}

.rh-phone-screen {
	border-radius: 28px;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
}

.rh-phone-screen img {
	width: 100%;
}

/* ================================================================
   Lote 1 — variedade de primitivos (auditoria jul/2026)
   ================================================================ */

/* ---------- 03 Antes / Depois (modelo v4: faixa de cabeçalho + seta central) ---------- */
.rh-ba {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

.rh-ba-col {
	align-self: stretch;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.rh-ba-head {
	margin: 0;
	padding: 14px 20px;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--m);
	color: var(--wp--preset--color--paper);
}

.rh-ba-antes .rh-ba-head {
	background: var(--wp--preset--color--ink);
}

.rh-ba-depois .rh-ba-head {
	background: var(--wp--preset--color--teal);
}

.rh-ba-col ul {
	list-style: none;
	margin: 0;
	padding: 6px var(--wp--preset--spacing--30) 10px;
	display: grid;
}

.rh-ba-col li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	line-height: 1.35;
	border-bottom: 1px solid var(--wp--custom--color--ink-border);
}

.rh-ba-col li:last-child {
	border-bottom: 0;
}

.rh-ba-ico {
	display: inline-flex;
	flex: none;
}

.rh-ba-antes li {
	color: var(--wp--custom--color--muted);
}

.rh-ba-antes .rh-ba-ico {
	color: var(--wp--custom--color--muted-disabled);
}

.rh-ba-depois li {
	font-weight: 500;
}

.rh-ba-depois .rh-ba-ico {
	color: var(--wp--preset--color--teal);
}

.rh-ba-seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--paper);
}

@media (max-width: 781px) {
	.rh-ba-seta {
		transform: rotate(90deg);
		margin: 0 auto;
	}
}

/* ---------- 04 Trilha / stepper ---------- */
.rh-stepper {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
	position: relative;
}

.rh-stepper::before {
	content: "";
	position: absolute;
	top: 33px;
	left: 10%;
	right: 10%;
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--azul) 0 14px, transparent 14px 22px);
	opacity: 0.35;
}

.rh-step {
	text-align: center;
	position: relative;
}

.rh-step-node {
	width: 66px;
	height: 66px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--azul);
	color: var(--wp--preset--color--azul);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	position: relative;
	z-index: 1;
}

/* Em seções claras (ex.: home "Automação"), o nó ganha um leve fill mist para não
   sumir no branco; em seções mist (ex.: Sobre "Como implantamos") mantém o branco. */
.has-paper-background-color .rh-step-node {
	background: var(--wp--preset--color--mist);
}

.rh-step h3 {
	font-size: var(--wp--preset--font-size--m);
	margin: 0 0 6px;
}

.rh-step p {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--custom--color--muted);
}

/* ---------- 05 Device-centric ---------- */
.rh-device {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

.rh-device-phone {
	display: flex;
	justify-content: center;
}

.rh-callout {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
	padding: 18px 20px;
}

.rh-device-esq .rh-callout {
	flex-direction: row-reverse;
	text-align: right;
}

.rh-device-col {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.rh-callout-ico {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--azul);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rh-callout h3 {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--m);
}

.rh-callout p {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--custom--color--muted);
}

/* ---------- 06 Dashboard + tiles ---------- */
.rh-dash {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.rh-dash-shot .rh-frame {
	border-radius: 12px;
}

.rh-dash-side h2 {
	margin: 0 0 8px;
}

.rh-dash-lead {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--m);
}

.rh-dash-tiles {
	display: grid;
	gap: 12px;
}

.rh-dash-tile {
	display: flex;
	gap: 14px;
	align-items: center;
	background: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--card);
	padding: 14px 18px;
}

.rh-dash-ico {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--azul);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rh-dash-tile strong {
	display: block;
	font-size: var(--wp--preset--font-size--s);
}

.rh-dash-tile span {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

.rh-dash-cta {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	padding: 12px 24px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1.5px solid var(--wp--preset--color--azul);
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.rh-dash-cta:hover {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--paper);
}

/* ---------- 09 Hub de integrações ---------- */
.rh-hub {
	margin-top: var(--wp--preset--spacing--50);
	text-align: center;
}

.rh-hub-node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radius--pill);
	padding: 16px 32px;
	box-shadow: var(--wp--custom--shadow--card);
	position: relative;
}

.rh-hub-node img {
	width: 150px;
	height: auto;
}

.rh-hub-node::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 2px;
	height: 28px;
	background: var(--wp--custom--color--ink-border);
}

.rh-hub-branches {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
	position: relative;
	margin-top: 30px;
	padding-top: 28px;
}

.rh-hub-branches::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: var(--wp--custom--color--ink-border);
}

.rh-hub-cat {
	position: relative;
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.rh-hub-cat::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 2px;
	height: 28px;
	background: var(--wp--custom--color--ink-border);
}

.rh-hub-ico {
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--azul);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.rh-hub-cat strong {
	font-size: var(--wp--preset--font-size--s);
}

.rh-hub-desc {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

.rh-hub-fluxo {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

.rh-hub-passo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s);
}

.rh-hub-passo em {
	font-style: normal;
	width: 26px;
	height: 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--xs);
	font-family: var(--wp--preset--font-family--utility);
}

.rh-hub-passo:not(:last-child)::after {
	content: "\2192";
	margin-left: var(--wp--preset--spacing--20);
	color: var(--wp--custom--color--muted);
}

.rh-hub-garantia {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: var(--wp--preset--spacing--40) auto 0;
	padding: 14px 22px;
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--s);
}

.rh-hub-garantia .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
}

/* ---------- 10 Mapa completo ---------- */
.rh-mapa {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

.rh-mapa-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wp--preset--color--azul);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--m);
	color: var(--wp--preset--color--ink);
}

.rh-mapa-cat span {
	flex: none;
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--xs);
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radius--pill);
	padding: 2px 10px;
}

.rh-mapa-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.rh-mapa-col li a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
}

.rh-mapa-col li a:hover {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--azul);
}

/* ---------- 15 FAQ em 2 colunas ---------- */
.rh-faq-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.rh-faq-aside {
	position: sticky;
	top: 96px;
}

.rh-faq-aside h2 {
	margin: 0 0 12px;
}

.rh-faq-aside > p {
	color: var(--wp--custom--color--muted);
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 34ch;
}

.rh-faq-cta {
	display: inline-block;
	padding: 13px 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 150ms ease-out;
}

.rh-faq-cta:hover {
	background: var(--wp--custom--color--teal-hover);
	color: var(--wp--preset--color--paper);
}

.rh-faq-reasseguro {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

.rh-faq-reasseguro .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
}

.rh-faq .rh-faq-acc details {
	margin-bottom: 10px;
}

/* ---------- Responsivo Lote 1 ---------- */
@media (max-width: 991px) {
	.rh-dash {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.rh-dash-shot {
		max-height: none;
		order: 2;
	}
}

@media (max-width: 991px) {
	/* Experiência: colapsa o grid app+callouts já no tablet (evita estouro ~820px) */
	.rh-device {
		grid-template-columns: 1fr;
	}

	.rh-device-esq .rh-callout {
		flex-direction: row;
		text-align: left;
	}

	.rh-device-phone {
		order: -1;
		max-width: 300px;
		margin: 0 auto;
	}
}

@media (max-width: 781px) {
	.rh-ba {
		grid-template-columns: 1fr;
	}

	.rh-stepper {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	.rh-stepper::before {
		top: 10%;
		bottom: 10%;
		left: 32px;
		right: auto;
		width: 3px;
		height: auto;
		background: repeating-linear-gradient(180deg, var(--wp--preset--color--azul) 0 14px, transparent 14px 22px);
	}

	.rh-step {
		display: grid;
		grid-template-columns: 66px 1fr;
		gap: 16px;
		text-align: left;
		align-items: center;
	}

	.rh-step-node {
		margin: 0;
	}

	.rh-step h3 {
		grid-column: 2;
	}

	.rh-step p {
		grid-column: 2;
	}

	.rh-hub-branches {
		grid-template-columns: 1fr 1fr;
	}

	.rh-hub-branches::before,
	.rh-hub-cat::before {
		display: none;
	}

	.rh-mapa {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.rh-faq-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.rh-faq-aside {
		position: static;
	}
}

/* ================================================================
   Página de funcionalidade
   ================================================================ */
.rh-func-hero .rh-breadcrumb {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
	margin: 0 0 14px;
}

.rh-func-hero .rh-breadcrumb a {
	color: var(--wp--custom--color--muted);
	text-decoration: none;
}

.rh-func-hero .rh-breadcrumb a:hover {
	color: var(--wp--preset--color--azul);
}

.rh-func-hero .rh-breadcrumb span {
	margin: 0 6px;
}

.rh-beneficios-grid {
	grid-template-columns: repeat(4, 1fr);
}

/* Showcases alternados */
.rh-showcases {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

/* 0.8fr / 1.2fr: mesma estrutura de duas colunas alternadas, só com mais peso para a
   tela. Antes a imagem saía em 523px, ilegível para telas de tabela. */
.rh-showcase {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* Container das seções de showcase um pouco mais largo que o alignwide padrão. */
.rh-showcases-sec .rh-showcases,
.rh-exp-tabs {
	max-width: 1360px;
	margin-inline: auto;
	width: 100%;
}

/* ---------- Experiência completa: abas com a tela grande (mockup de 26/08) ---------- */
.rh-exp-tabs .rh-tablist {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

.rh-exp-panel {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* .rh-tabs-ready .rh-tab-panel.is-active vem com display:block do componente de abas;
   aqui o painel precisa continuar sendo grid de duas colunas. */
.rh-tabs-ready .rh-exp-panel.is-active {
	display: grid;
}

.rh-exp-titulo {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.rh-exp-desc {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--custom--color--muted);
	max-width: 46ch;
}

.rh-exp-cta {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--40);
	padding: 13px 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 150ms ease-out;
}

.rh-exp-cta:hover {
	background: var(--wp--custom--color--teal-hover);
	color: var(--wp--preset--color--paper);
}

@media (max-width: 900px) {
	.rh-exp-panel {
		grid-template-columns: 1fr;
	}

	/* a tela vai para cima do texto: é ela que o cliente quer ver primeiro */
	.rh-exp-media {
		order: -1;
	}

	.rh-exp-tabs .rh-tablist {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}

	.rh-exp-tabs .rh-tablist button {
		flex: none;
	}
}

.rh-showcase-rev .rh-showcase-text {
	order: 2;
}

/* O 'order' troca os elementos de lugar, mas as colunas do grid seguem na ordem
   declarada — sem inverter as proporções, a tela caía na coluna estreita nos blocos
   invertidos (515px contra 774px dos demais). */
.rh-showcase-rev {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.rh-showcase-text h3 {
	font-size: var(--wp--preset--font-size--l);
	margin: 0 0 12px;
}

.rh-showcase-text > p {
	color: var(--wp--custom--color--muted);
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 46ch;
}

.rh-showcase-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.rh-showcase-list li {
	position: relative;
	padding-left: 30px;
	font-weight: 500;
}

.rh-showcase-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mist);
}

.rh-showcase-list li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 7px;
	width: 5px;
	height: 9px;
	border: solid var(--wp--preset--color--teal);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.rh-showcases-sec .rh-showcase-list li::before {
	background: var(--wp--preset--color--mist);
}

/* Soluções relacionadas */
.rh-rel-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.rh-rel-card {
	display: block;
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: transform 150ms ease-out;
}

.rh-rel-card:hover {
	transform: translateY(-3px);
}

.rh-rel-ico {
	display: inline-flex;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--azul);
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.rh-rel-card h3 {
	font-size: var(--wp--preset--font-size--m);
	margin: 0 0 6px;
}

.rh-rel-card p {
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--custom--color--muted);
	margin: 0 0 14px;
}

.rh-rel-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--azul);
}

.rh-func-prova .rh-pendente {
	max-width: 56ch;
	margin: var(--wp--preset--spacing--20) auto 0;
}

/* FAQ da funcionalidade: itens com largura limitada p/ aproximar o "+" da pergunta,
   mantendo o accordion no trilho esquerdo (alinhado ao título) */
.rh-func-faq .rh-faq-acc details {
	max-width: 880px;
}

/* Imagem do hero (CW-style) — preenche a coluna abaixo do conteúdo */
.rh-hero-img {
	margin-top: var(--wp--preset--spacing--40);
}

.rh-hero-phone .rh-phone {
	margin: 0;
	width: 240px;
}

.rh-hero-plain img {
	display: block;
	width: 100%;
	height: auto;
}

/* TOTVS como badge/chip no hero da funcionalidade */
.rh-func-hero .rh-hero-trust {
	display: inline-flex;
	background: var(--wp--preset--color--mist);
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 600;
	margin-top: var(--wp--preset--spacing--20);
}

/* Linha de confiança (LGPD) sob o botão do formulário */
.rh-form-trust {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

.rh-form-trust .rhg-icon {
	color: var(--wp--preset--color--teal);
	flex: none;
}

/* CTA intermediário (após os showcases) */
.rh-cta-mid-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
}

.rh-cta-mid-inner p {
	margin: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--m);
}

.rh-cta-mid-btn {
	flex: none;
	box-sizing: border-box;
	display: inline-block;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-weight: 600;
	padding: 13px 28px;
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color 150ms ease-out;
}

.rh-cta-mid-btn:hover {
	background: var(--wp--custom--color--teal-hover);
	color: var(--wp--preset--color--paper);
}

@media (max-width: 600px) {
	.rh-cta-mid-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.rh-cta-mid-btn {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 991px) {
	.rh-beneficios-grid {
		grid-template-columns: 1fr 1fr;
	}

	.rh-rel-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.rh-beneficios-grid {
		grid-template-columns: 1fr;
	}

	.rh-showcase {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.rh-showcase-rev .rh-showcase-text {
		order: 0;
	}

	.rh-showcase-media {
		order: -1;
	}
}

/* ================================================================
   Sobre nós
   ================================================================ */
.rh-sobre-hero {
	text-align: center;
}

.rh-sobre-hero h1 {
	max-width: 24ch;
	margin-inline: auto;
}

.rh-sobre-hero .rh-hero-sub {
	max-width: 60ch;
	margin-inline: auto;
}

.rh-sobre-hero-cta {
	margin-top: var(--wp--preset--spacing--40);
}

.rh-missao {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-align: center;
	text-wrap: balance;
	color: var(--wp--preset--color--ink);
	max-width: 30ch;
	margin: var(--wp--preset--spacing--30) auto 0;
}

.rh-missao-sub {
	text-align: center;
	max-width: 62ch;
	margin: var(--wp--preset--spacing--30) auto 0;
}

.rh-vv-visao {
	text-align: center;
	max-width: 62ch;
	margin: 0 auto var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 500;
	line-height: 1.35;
}

.rh-duo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	max-width: 880px;
	margin: var(--wp--preset--spacing--40) auto 0;
}

.rh-duo-card {
	box-sizing: border-box;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(24px, 3vw, 36px);
	text-align: center;
}

.rh-duo-card h3 {
	margin: 0 0 10px;
}

.rh-duo-card p {
	margin: 0 0 20px;
}

.rh-duo-card p:last-child {
	margin-bottom: 0;
}

.rh-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rh-btn-outline-pill {
	box-sizing: border-box;
	display: inline-block;
	background: transparent;
	color: var(--wp--preset--color--azul);
	border: 1.5px solid var(--wp--preset--color--azul);
	text-decoration: none;
	font-weight: 600;
	padding: 11.5px 28px;
	border-radius: 999px;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.rh-btn-outline-pill:hover {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--paper);
}

@media (max-width: 781px) {
	.rh-duo-grid,
	.rh-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* ================================================================
   Blog — listagem
   ================================================================ */
.rh-blog-cols {
	gap: var(--wp--preset--spacing--50);
}

.rh-blog-card {
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--paper);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.rh-blog-card:hover {
	border-color: var(--wp--preset--color--azul);
	box-shadow: var(--wp--custom--shadow--card);
}

.rh-blog-card .wp-block-post-title {
	margin: 12px 0 4px;
}

.rh-blog-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.rh-blog-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--azul);
}

.rh-blog-card .wp-block-post-date {
	color: var(--wp--custom--color--muted);
}

.rh-blog-card .wp-block-post-featured-image img {
	border-radius: 12px;
}

.rh-blog-card .wp-block-read-more {
	display: inline-block;
	margin-top: 10px;
	font-weight: 600;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
}

.rh-blog-lista {
	margin-top: var(--wp--preset--spacing--40);
}

.rh-blog-lista .wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--30);
}

.rh-blog-vazio {
	text-align: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
}

.rh-blog-vazio h2 {
	margin: 0 0 10px;
}

.rh-blog-vazio-cta {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.rh-blog-sec .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
}

.rh-blog-side .rh-side-card {
	box-sizing: border-box;
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--30);
}

.rh-blog-side .rh-side-card + .rh-side-card {
	margin-top: var(--wp--preset--spacing--30);
}

.rh-blog-side .rh-side-card h3 {
	margin: 0 0 8px;
}

.rh-blog-side .rh-side-card p {
	margin: 0 0 14px;
}

.rh-news-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rh-news-form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: 10px;
	font: inherit;
	background: var(--wp--preset--color--paper);
}

.rh-news-form .rh-cta-mid-btn {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}

.rh-news-pendente {
	margin: 10px 0 0 !important;
	font-size: 0.8rem;
}

.rh-side-cta .rh-cta-mid-btn {
	display: inline-block;
}

@media (max-width: 781px) {
	.rh-blog-side {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* ================================================================
   Alvos de toque ≥44px (auditoria P5)
   ================================================================ */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

@media (max-width: 781px) {
	footer li a,
	footer .has-xs-font-size a {
		display: inline-block;
		padding-block: 13px;
	}
}

/* ================================================================
   Jornada do colaborador (página /funcionalidades + teaser da home)
   ================================================================ */
/* mapeia os tokens de categoria (theme.json) para vars locais por etapa */
.rh-etapa--admissao        { --rh-cat-text: var(--wp--custom--categoria--admissao-text);        --rh-cat-bg: var(--wp--custom--categoria--admissao-bg); }
.rh-etapa--onboarding      { --rh-cat-text: var(--wp--custom--categoria--onboarding-text);      --rh-cat-bg: var(--wp--custom--categoria--onboarding-bg); }
.rh-etapa--operacao        { --rh-cat-text: var(--wp--custom--categoria--operacao-text);        --rh-cat-bg: var(--wp--custom--categoria--operacao-bg); }
.rh-etapa--desenvolvimento { --rh-cat-text: var(--wp--custom--categoria--desenvolvimento-text); --rh-cat-bg: var(--wp--custom--categoria--desenvolvimento-bg); }
.rh-etapa--cultura         { --rh-cat-text: var(--wp--custom--categoria--cultura-text);         --rh-cat-bg: var(--wp--custom--categoria--cultura-bg); }
.rh-etapa--recrutamento    { --rh-cat-text: var(--wp--custom--categoria--recrutamento-text);    --rh-cat-bg: var(--wp--custom--categoria--recrutamento-bg); }
.rh-etapa--desligamento    { --rh-cat-text: var(--wp--custom--categoria--desligamento-text);    --rh-cat-bg: var(--wp--custom--categoria--desligamento-bg); }

/* etapa sem soluções confirmadas (estrutura v4: Recrutamento) */
.rh-etapa-pendente {
	margin: 0;
	padding: 18px 20px;
	border: 1px dashed var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--s);
}
.rh-feature-item .rh-pendente { margin-top: 10px; font-size: var(--wp--preset--font-size--xs); }
.rh-ia-tag {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--secondary-light);
	color: var(--wp--custom--color--teal-hover);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}
.rh-ia-destaque { margin-bottom: var(--wp--preset--spacing--30); }
/* logo do cliente no card de depoimento: altura fixa, sem distorcer (o card força
   width:100% nas imagens, então object-fit segura a proporção). */
/* Presa a .rh-depoimentos até 26/08, a regra deixou de valer quando o card mudou de
   seção e a logo da Santana esticou de 151x167 para 310x342. Agora vale pela classe. */
/* 46px de altura porque as logos têm proporções muito diferentes: a da Santana é retrato
   (151x167) e a 32px ficava ilegível, enquanto as deitadas travam na largura máxima. */
.rh-depo-logo {
	display: block;
	height: 46px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	object-position: left center;
	margin: 0 0 16px;
	/* Sem filtro: é aqui que a cor da marca aparece. A faixa de clientes fica em tom
	   único (ritmo de fundo) e o destaque de cor mora no depoimento. */
}

/* Título de seção centralizado nunca deve deixar uma palavra órfã na última linha. */
main h2.has-text-align-center {
	text-wrap: balance;
}

/* hero da página */
.rh-jornada-hero { text-align: center; }
.rh-jornada-hero h1 { margin-inline: auto; }
.rh-jornada-hero .rh-hero-sub { max-width: 60ch; margin-inline: auto; }
.rh-jornada-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--wp--preset--spacing--40); }
.rh-jn-pill {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--rh-cat-text);
	background: var(--rh-cat-bg);
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	transition: filter 150ms ease-out;
}
.rh-jn-pill:hover { filter: brightness(0.96); }

/* espinha da jornada + etapas */
.rh-jornada { display: grid; gap: var(--wp--preset--spacing--50); }
.rh-etapa { position: relative; padding-left: 68px; }
.rh-etapa::before {
	content: "";
	position: absolute;
	left: 25px;
	top: 8px;
	bottom: calc(-1 * var(--wp--preset--spacing--50));
	width: 3px;
	background: repeating-linear-gradient(var(--rh-cat-text) 0 12px, transparent 12px 20px);
	opacity: 0.35;
}
.rh-etapa:last-child::before { display: none; }
.rh-etapa-node {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	color: var(--rh-cat-text);
	background: var(--rh-cat-bg);
	border: 2px solid var(--rh-cat-text);
}
.rh-etapa-head { margin-bottom: var(--wp--preset--spacing--30); }
.rh-etapa-num {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rh-cat-text);
}
.rh-etapa-head h2 { margin: 2px 0 4px; }
.rh-etapa-frase { margin: 0; color: var(--wp--custom--color--muted); max-width: 60ch; }

/* cards de módulo */
.rh-etapa-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
.rh-mod-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.rh-mod-card:hover { border-color: var(--rh-cat-text); box-shadow: var(--wp--custom--shadow--card); }
.rh-mod-card:focus-visible { outline: 2px solid var(--rh-cat-text); outline-offset: 2px; }
.rh-mod-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	color: var(--rh-cat-text);
	background: var(--rh-cat-bg);
}
.rh-mod-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rh-mod-nome { margin: 0; font-size: var(--wp--preset--font-size--m); font-weight: 700; }
.rh-mod-desc { color: var(--wp--custom--color--muted); font-size: var(--wp--preset--font-size--s); }
.rh-mod-seta { flex: none; color: var(--rh-cat-text); display: inline-flex; transition: transform 150ms ease-out; }
.rh-mod-card:hover .rh-mod-seta { transform: translateX(3px); }

/* teaser da home */
.rh-jornada-teaser { text-align: center; }
.rh-jt-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 1240px;
}
.rh-jt-step {
	flex: 1 1 140px;
	max-width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 16px;
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--paper);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
/* 16/09: a etapa voltou a ser link para /solucoes/#etapa-<key>; o realce indica o clique. */
.rh-jt-step:hover { border-color: var(--rh-cat-text); box-shadow: var(--wp--custom--shadow--card); }
.rh-jt-step .rh-mod-ico { width: 48px; height: 48px; }
.rh-jt-nome { font-weight: 700; font-size: var(--wp--preset--font-size--s); line-height: 1.25; }
.rh-jt-count { font-size: var(--wp--preset--font-size--xs); color: var(--wp--custom--color--muted); }
.rh-jt-cta { margin-top: var(--wp--preset--spacing--40); }

/* 7 etapas numa linha só no desktop (evita o 7º card órfão); abaixo disso volta ao wrap */
@media (min-width: 1100px) {
	.rh-jt-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
	.rh-jt-step { max-width: none; padding: 20px 10px; }
	/* 15px: em 13px o nome empatava com a descrição e a etapa perdia hierarquia. */
	.rh-jt-nome { font-size: var(--wp--preset--font-size--s); }
}

@media (max-width: 781px) {
	.rh-etapa-cards { grid-template-columns: 1fr; }
	.rh-etapa { padding-left: 56px; }
	.rh-etapa-node { width: 46px; height: 46px; }
	.rh-etapa::before { left: 22px; }
}

/* ================================================================
   Páginas legais (Política de Privacidade, Termos de Uso)
   ================================================================ */
.rh-legal {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

.rh-legal h1 {
	font-size: var(--wp--preset--font-size--xl);
	margin: 0;
}

.rh-legal-body .rh-legal-lead {
	font-size: var(--wp--preset--font-size--m);
	margin-bottom: var(--wp--preset--spacing--30);
}

.rh-legal-eyebrow {
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.rh-legal-updated {
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--s);
	margin: 12px 0 0;
}

.rh-legal-body {
	max-width: 720px;
	margin-top: var(--wp--preset--spacing--40);
}

.rh-legal-body h2 {
	font-size: var(--wp--preset--font-size--l);
	margin: var(--wp--preset--spacing--40) 0 12px;
}

.rh-legal-body h3 {
	font-size: var(--wp--preset--font-size--m);
	margin: var(--wp--preset--spacing--30) 0 8px;
}

.rh-legal-body p {
	margin: 0 0 16px;
}

.rh-legal-body ul {
	margin: 0 0 16px;
	padding-left: 22px;
	display: grid;
	gap: 8px;
}

.rh-legal-body li {
	line-height: 1.6;
}

.rh-legal-body a {
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
}

.rh-legal-body a:hover {
	color: var(--wp--preset--color--ink);
}

/* ================================================================
   Layout do modelo v4 (ago/2026) — hero chips, prova em faixa,
   jornada numerada, IA leve, integrações em faixa, CTA horizontal
   ================================================================ */

/* chips do hero */
.rh-hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--wp--preset--spacing--30);
}

.rh-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.25;
}

.rh-chip .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
}

/* prova social: números em cima, logos embaixo (o lado a lado do mockup só funciona
   com o texto muito enxuto; empilhado respira melhor com a nossa cópia). */
.rh-prova-faixa {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

.rh-prova-nums {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
	max-width: 860px;
	margin-inline: auto;
	width: 100%;
}

.rh-prova-nums .rh-stat + .rh-stat {
	border-left: 1px solid var(--wp--custom--color--ink-border);
}

.rh-prova-nums .rh-stat > p:last-child {
	margin: 0;
	color: var(--wp--custom--color--muted);
	max-width: 18ch;
	margin-inline: auto;
}

.rh-prova-faixa .rh-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--color--ink-border);
}

.rh-prova-faixa .rh-logo-cliente {
	height: 30px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

/* jornada: número em círculo, descrição e chip de contagem */
.rh-jt-step {
	position: relative;
	margin-top: 14px;
}

.rh-jt-num {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--rh-cat-text, var(--wp--preset--color--azul));
	color: var(--wp--preset--color--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

.rh-jt-desc {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
	line-height: 1.35;
}

.rh-jt-count {
	/* auto: descrições de 2 e 3 linhas deixavam os chips em alturas diferentes. */
	margin-top: auto;
	padding-top: 10px;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--rh-cat-bg, var(--wp--custom--color--primary-light));
	color: var(--rh-cat-text, var(--wp--preset--color--azul));
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

@media (min-width: 1100px) {
	.rh-jt-steps {
		align-items: stretch;
	}

	.rh-jt-step:not(:last-child)::after {
		content: "";
		position: absolute;
		right: -10px;
		top: 50%;
		width: 7px;
		height: 7px;
		border-top: 1.5px solid var(--wp--custom--color--ink-border);
		border-right: 1.5px solid var(--wp--custom--color--ink-border);
		transform: translateY(-50%) rotate(45deg);
	}
}

/* IA: itens leves em linha, sem card */
/* Flex em vez de grade de 6 colunas fixas: quando "Alertas preditivos" saiu, sobraram 5
   itens numa grade de 6 e a linha ficou torta, com uma coluna vazia à direita. Assim a
   faixa se centraliza sozinha com qualquer quantidade de recursos. */
.rh-ia-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
	text-align: center;
}

.rh-ia-item {
	flex: 0 1 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.rh-ia-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--primary-light);
	color: var(--wp--preset--color--azul);
}

.rh-ia-item strong {
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.3;
}

/* auto: alinha a categoria na base do item, senão ela sobe nos títulos de uma linha só
   e desce nos de duas, deixando a fileira irregular. */
.rh-ia-cat {
	margin-top: auto;
	padding-top: 4px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

.rh-ia-nota {
	margin: var(--wp--preset--spacing--30) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

@media (max-width: 600px) {
	/* base menor: em telas estreitas cabem dois por linha em vez de um só */
	.rh-ia-item { flex-basis: 140px; }
	.rh-prova-faixa { grid-template-columns: 1fr; }
	.rh-prova-nums { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
	.rh-prova-nums .rh-stat + .rh-stat { border-left: 0; }
}

/* integrações: título em cima, 4 categorias em linha embaixo */
.rh-integra-faixa {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* Centralizado: em 26/08 os donos pediram título e subtítulo centralizados em todas as
   seções. (Esteve alinhado à esquerda por um dia, seguindo o modelo.) */
.rh-integra-intro {
	text-align: center;
	margin-inline: auto;
}

.rh-integra-intro h2 {
	margin: 0 0 8px;
}

/* 18px: mesmo tamanho dos subtítulos das outras seções (estava em 15). */
/* Medida no parágrafo, não no container: no container o título quebrava em duas linhas. */
.rh-integra-intro p {
	margin: 0 auto;
	/* 16/09: texto do cliente é longo (~210 caracteres). Em 72ch ia a 3 linhas desiguais;
	   com a medida alargada e balance, fica em 2 linhas de tamanho parecido no desktop. */
	max-width: 940px;
	text-wrap: balance;
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--m);
}

/* 16/09: 3 cards (eram 4); largura limitada para não esticar cards de texto curto. */
.rh-integra-itens {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	max-width: 960px;
	width: 100%;
	margin-inline: auto;
}

/* Card com borda, como no modelo do cliente: os itens soltos não tinham delimitação. */
/* 16/09: conteúdo empilhado e centralizado. Com ícone ao lado e texto à esquerda, os
   3 cards (mais largos que os 4 de antes) ficavam com o conteúdo colado à esquerda. */
.rh-integra-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 24px 18px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--color--ink-border);
	border-radius: var(--wp--custom--radius--card);
}

.rh-integra-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--azul);
}

.rh-integra-txt {
	display: grid;
	gap: 2px;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.35;
}

/* Título do item precisa se destacar da descrição — antes ambos saíam em 13px. */
.rh-integra-txt strong {
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.25;
}

.rh-integra-txt span {
	color: var(--wp--custom--color--muted);
}

/* Título à esquerda, ação à direita — como o "ver todas as integrações" do modelo.
   Uma primeira versão pôs a nota "Não usa TOTVS?" aqui dentro de uma caixa cinza com
   botão teal: pesado demais, competia com o próprio título. A nota voltou ao rodapé. */
/* Empilhado e centralizado desde 26/08 (antes era título à esquerda, botão à direita). */
.rh-integra-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	/* sem margin-bottom: o gap do grid .rh-integra-faixa já separa dos cards */
}

.rh-integra-nota {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--color--ink-border);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
	text-align: center;
}

.rh-integra-nota .rhg-icon {
	color: var(--wp--preset--color--azul);
	flex: none;
}

/* Outline azul (mesmo do "Ver as soluções" no hero): é ação secundária de contato,
   não a conversão principal — preenchido de teal roubava a atenção da seção. */
.rh-integra-cta {
	display: inline-block;
	flex: none;
	padding: 11px 22px;
	border: 1.5px solid var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.rh-integra-cta:hover {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--paper);
}

/* CTA final horizontal */
.rh-cta-faixa {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.rh-cta-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px; /* acompanha o raio de card menor (12px) */
	background: rgba(255, 255, 255, 0.16);
	color: var(--wp--preset--color--paper);
	flex: none;
}

.rh-cta-texto h2 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--l);
	color: var(--wp--preset--color--paper);
	text-wrap: balance;
}

.rh-cta-texto p {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
}

.rh-cta-btn {
	display: inline-block;
	flex: none;
	padding: 14px 28px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 150ms ease-out;
}

.rh-cta-btn:hover {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ink);
}

/* CTA final colado no rodapé (o footer é irmão do main e ganhava blockGap de 24px) */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* O blockGap do WP punha 24px entre cada seção full-width, e como o <main> é
   transparente isso virava uma faixa branca em toda troca de seção — visível sobretudo
   antes do CTA final, onde a seção anterior é mist. Cada seção já tem padding próprio,
   então o gap era só sobra. */
main > .wp-block-group.alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 991px) {
	.rh-integra-faixa { grid-template-columns: 1fr; }
	.rh-cta-faixa { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.rh-cta-texto h2 { text-align: center; }
}

@media (max-width: 600px) {
	.rh-integra-itens { grid-template-columns: 1fr; }
}

/* ---------- "Por que empresas escolhem o RHGestão" (mockup de 31/08) ---------- */
/* Eyebrow em pill, como no mockup (o .rh-hero-lead das outras seções é texto solto). */
.rh-eyebrow-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	margin: 0 auto var(--wp--preset--spacing--30);
	padding: 8px 18px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--azul);
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-align: center;
}

.rh-porque-cards {
	margin-top: var(--wp--preset--spacing--50);
}

/* Logo do cliente em destaque no carrossel: é a assinatura do depoimento.
   Caixa fixa em vez de altura fixa: as marcas têm proporções muito diferentes (a Usibras
   é 5,7:1 e a Santana é retrato), e com altura fixa a retrato saía com 49px de largura,
   ilegível. Assim cada uma ocupa o máximo dentro da mesma área. */
.rh-carrossel-slide .rh-depo-logo {
	/* 16/09: 90px de altura pesava mais que a fala. A altura real vem inline do pattern
	   (área visual constante entre logos horizontais e verticais); 52px é o fallback. */
	width: auto;
	max-width: 170px;
	height: 52px;
	object-fit: contain;
	object-position: left center;
	margin-bottom: var(--wp--preset--spacing--30);
}

.rh-porque-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"ico titulo"
		".   filete"
		".   texto";
	gap: 0 18px;
	align-items: start;
	text-align: left;
}

.rh-porque-ico {
	grid-area: ico;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--azul);
	flex: none;
}

.rh-porque-card h3 {
	grid-area: titulo;
	align-self: center;
	margin: 0;
}

/* filete azul sob o título, como no mockup */
.rh-porque-filete {
	grid-area: filete;
	width: 42px;
	height: 3px;
	margin: 12px 0 14px;
	border-radius: 2px;
	background: var(--wp--preset--color--azul);
}

.rh-porque-card p {
	grid-area: texto;
	margin: 0;
}

/* ---------- Carrossel de depoimentos ---------- */
.rh-depo-carrossel {
	margin-top: var(--wp--preset--spacing--50);
}

.rh-carrossel-trilha {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* o arrasto sai de graça do scroll-snap; o JS cuida só de setas e autoplay */
}

.rh-carrossel-trilha::-webkit-scrollbar {
	display: none;
}

.rh-carrossel-slide {
	flex: 0 0 100%;
	/* border-box: sem isso o padding soma aos 100% e o slide fica mais largo que a
	   trilha (423px numa trilha de 343px no celular), cortando o texto à direita. */
	box-sizing: border-box;
	scroll-snap-align: center;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
}

/* 16/09: coluna reorganizada. Logo, aspas, fala e assinatura partem da mesma margem
   esquerda (antes a fala e a pessoa recuavam 34px e a pessoa parecia começar no meio);
   logo menor e respiro maior entre os três blocos; a assinatura desce para o pé da
   coluna, separada por um filete. */
.rh-depo-lado {
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--wp--custom--color--ink-border);
	padding-right: var(--wp--preset--spacing--40);
}

.rh-depo-quote {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}

.rh-depo-aspas {
	display: block;
	height: 22px;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 56px;
	line-height: 1;
	color: var(--wp--preset--color--azul);
}

.rh-depo-quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.6;
}

.rh-depo-assina {
	display: flex;
	align-items: center;
	gap: 14px;
	/* 16/09 (2): sem margin-top:auto. Empurrar a assinatura ao pé esticava a coluna e
	   abria um vão sob os pontos da direita. */
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--custom--color--ink-border);
}

/* Pontos centralizados na altura do card: a coluna da fala costuma ser a mais alta, e
   ancorados no topo deixavam o vão todo embaixo. */
.rh-depo-pontos {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rh-depo-pontos-titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-weight: 700;
	color: var(--wp--preset--color--azul);
}

.rh-depo-ponto {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
	line-height: 1.5;
}

.rh-depo-ponto:last-child {
	margin-bottom: 0;
}

.rh-depo-ponto strong {
	display: block;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--ink);
	margin-bottom: 2px;
}

.rh-depo-ponto .rh-porque-ico {
	width: 44px;
	height: 44px;
	background: var(--wp--preset--color--paper);
}

/* Controles: só fazem sentido com o JS ativo. */
.rh-carrossel-nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: var(--wp--preset--spacing--30);
}

.rh-carrossel-ready .rh-carrossel-nav {
	display: flex;
}

.rh-carrossel-seta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1.5px solid var(--wp--custom--color--ink-border);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}

.rh-carrossel-seta:hover {
	border-color: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--azul);
}

.rh-carrossel-seta[data-rh-anterior] .rhg-icon {
	transform: rotate(180deg);
}

.rh-carrossel-bolinhas {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rh-carrossel-bolinha {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--ink-border);
	cursor: pointer;
	transition: background-color 150ms ease-out, width 150ms ease-out;
}

.rh-carrossel-bolinha[aria-selected="true"] {
	width: 26px;
	background: var(--wp--preset--color--azul);
}

/* ---------- Card de resultados ---------- */
.rh-resultados {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
}

.rh-resultados-titulo {
	margin: 0 0 var(--wp--preset--spacing--40);
	text-align: center;
	font-size: var(--wp--preset--font-size--m);
	font-weight: 700;
	color: var(--wp--preset--color--azul);
}

.rh-resultados-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.rh-resultado {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
	line-height: 1.4;
}

.rh-resultado + .rh-resultado {
	border-left: 1px solid var(--wp--custom--color--ink-border);
	padding-left: var(--wp--preset--spacing--30);
}

.rh-resultado .rh-porque-ico {
	width: 44px;
	height: 44px;
	background: var(--wp--preset--color--paper);
}

.rh-resultado-txt strong {
	display: block;
	font-size: var(--wp--preset--font-size--l);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	line-height: 1.1;
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}

.rh-resultados-nota {
	margin: var(--wp--preset--spacing--30) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--muted);
}

@media (max-width: 1100px) {
	.rh-resultados-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.rh-resultado + .rh-resultado {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 900px) {
	.rh-carrossel-slide {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.rh-depo-lado {
		border-right: 0;
		border-bottom: 1px solid var(--wp--custom--color--ink-border);
		padding-right: 0;
		padding-bottom: var(--wp--preset--spacing--30);
	}

	.rh-porque-card {
		grid-template-columns: 1fr;
		grid-template-areas: "ico" "titulo" "filete" "texto";
		gap: 0;
	}

	.rh-porque-card h3 {
		margin-top: 14px;
	}
}

@media (max-width: 600px) {
	.rh-resultados-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Proposta de valor + depoimentos (fusão de 26/08) ---------- */
.rh-valor-nums {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
	max-width: 900px;
	margin: var(--wp--preset--spacing--50) auto 0;
	width: 100%;
}

.rh-valor-nums .rh-stat + .rh-stat {
	border-left: 1px solid var(--wp--custom--color--ink-border);
}

.rh-valor-nums .rh-stat > p:last-child {
	margin: 0 auto;
	max-width: 22ch;
	color: var(--wp--custom--color--muted);
}

/* Número ainda não levantado: fica legível mas sem peso de dado real. */
.rh-stat-pendente {
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
}

.rh-valor .rh-depo-grid {
	margin-top: var(--wp--preset--spacing--50);
}

/* Espaço para a foto do depoente (pedido em 26/08). Enquanto a foto não chega, o ícone
   ocupa o lugar; quando chegar, basta trocar o span por <img> nesta mesma medida. */
.rh-depo-foto {
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mist);
	border: 1px dashed var(--wp--custom--color--ink-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--azul);
	flex: none;
	overflow: hidden;
}

.rh-depo-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Faixa de clientes em movimento ---------- */
.rh-marquee {
	overflow: hidden;
	margin-top: var(--wp--preset--spacing--40);
	/* esmaece nas pontas para o corte não parecer bug */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rh-marquee-trilha {
	display: flex;
	width: max-content;
	animation: rh-marquee 46s linear infinite;
}

.rh-marquee:hover .rh-marquee-trilha {
	animation-play-state: paused;
}

.rh-marquee-lista {
	display: flex;
	align-items: center;
	gap: clamp(40px, 6vw, 80px);
	margin: 0;
	padding: 0 clamp(20px, 3vw, 40px) 0 0;
	list-style: none;
}

/* 56px: a faixa estava pequena demais (40px). O teto de largura em 180px é o limite do
   menor arquivo (myblue, 159px) — acima disso ele começaria a suavizar.

   Tom único aqui de propósito (decisão de 31/08): esta faixa é ritmo de fundo, e a cor
   das marcas fica reservada ao carrossel de depoimentos, onde um cliente aparece por vez
   em destaque. brightness(0) zera para preto preservando o alpha; a opacidade sobre o
   fundo mist resulta em ~#222, o tom do ink. */
.rh-marquee-lista img {
	height: 56px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	filter: brightness(0);
	opacity: 0.86;
	transition: opacity 150ms ease-out;
}

.rh-marquee-lista img:hover {
	opacity: 1;
}

/* -50%: a trilha tem duas cópias da lista, então meia volta já emenda sem salto. */
@keyframes rh-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 781px) {
	.rh-valor-nums {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.rh-valor-nums .rh-stat + .rh-stat {
		border-left: 0;
		border-top: 1px solid var(--wp--custom--color--ink-border);
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	/* Faixa de clientes vira estática: sem rolagem automática, com quebra de linha. */
	.rh-marquee {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.rh-marquee-trilha {
		animation: none;
		width: 100%;
		justify-content: center;
	}

	.rh-marquee-trilha .rh-marquee-lista[aria-hidden="true"] {
		display: none;
	}

	.rh-marquee-lista {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}