/*
 * CSS principal do tema RDK.
 * Design system global: tokens, tipografia base, botões, grid utilitário,
 * Header e footer. A Home está zerada, pronta para reconstrução seção
 * por seção — os estilos de cada seção entram aqui conforme forem criadas.
 */

/* ==========================================================================
   1. Variáveis globais (design tokens)
   ========================================================================== */

:root {
	/* Cores de marca */
	--color-navy: #111087;
	--color-blue: #2323FD;
	--color-yellow: #FCD704;
	--color-silver: #EFEFEF;

	/* Neutros derivados */
	--color-white: #FFFFFF;
	--color-text: #1A1A1A;
	--color-text-muted: #55585E;
	--color-border: #DCDCDC;
	--color-navy-dark: #0B0A5E;

	/* Estados (derivados do azul vibrante / navy) */
	--color-blue-hover: #1A1AD1;
	--color-navy-hover: #0D0C6E;

	/*
	 * Tipografia
	 * Fonte Texar ainda não disponível (licença/arquivo web pendentes).
	 * Fallback sans-serif do sistema até a fonte oficial ser adicionada
	 * em assets/fonts/ e referenciada via @font-face.
	 */
	--font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* Escala tipográfica (fluida, com clamp) */
	--fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
	--fs-xl: clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);
	--fs-2xl: clamp(1.75rem, 1.6rem + 0.7vw, 2.25rem);
	--fs-3xl: clamp(2.25rem, 2rem + 1.2vw, 3rem);
	--fs-4xl: clamp(2.75rem, 2.3rem + 2vw, 4rem);

	/* Escala de espaçamento (base 4px) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4rem;
	--space-12: 6rem;

	/* Layout */
	--container-max: 1200px;
	--container-padding: var(--space-5);
	--header-height: 80px;
	--header-height-mobile: 72px;

	/* Raios e sombras (estética industrial: retas, raio discreto) */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--shadow-metal: 0 1px 2px rgba(17, 16, 135, 0.06), 0 4px 12px rgba(17, 16, 135, 0.06);

	/* Transições */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Breakpoints de referência (uso apenas documental — media queries usam valores fixos) */
	--bp-sm: 600px;
	--bp-md: 900px;
	--bp-lg: 1200px;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: var(--header-height-mobile);
}

@media (min-width: 900px) {
	body {
		padding-top: var(--header-height);
	}
}

/* Na Home, o Header fica transparente sobre a primeira seção (ver
   site-header--transparent em header.php); essa seção é quem deve
   controlar o próprio respiro no topo, em vez do body. */
body.rdk-transparent-header {
	padding-top: 0;
}

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

/* ==========================================================================
   3. Container principal
   ========================================================================== */

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

/* ==========================================================================
   4. Tipografia base e headings
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-navy);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--space-4);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p {
	margin: 0 0 var(--space-4);
	color: var(--color-text);
}

small {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

strong {
	font-weight: 700;
}

/* Rótulo técnico reutilizável: microtipografia em caixa alta, tipo "spec sheet". */
.label-technical {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. Links
   ========================================================================== */

a {
	color: var(--color-blue);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-navy);
	text-decoration: underline;
}

a:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}

/* ==========================================================================
   6. Botões
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}

.btn-primary {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
	color: var(--color-white);
}

.btn-primary:hover {
	background-color: var(--color-navy-hover);
	border-color: var(--color-navy-hover);
	color: var(--color-white);
	text-decoration: none;
}

.btn-secondary {
	background-color: transparent;
	border-color: var(--color-navy);
	color: var(--color-navy);
}

.btn-secondary:hover {
	background-color: var(--color-navy);
	color: var(--color-white);
	text-decoration: none;
}

/* Ênfase extra para o CTA primário do Hero. */
.btn-lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--fs-lg);
}

/* ==========================================================================
   7. Grid utilitário
   ========================================================================== */

.grid {
	display: grid;
	gap: var(--space-6);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 899px) {
	.grid-cols-3,
	.grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.grid-cols-2,
	.grid-cols-3,
	.grid-cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   8. Header
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	transition: background-color var(--transition-base), border-color var(--transition-base), top var(--transition-fast);
}

/* Com o usuário logado, o WordPress injeta a #wpadminbar (fixa) no topo.
   O Header precisa começar logo abaixo dela, usando os mesmos breakpoints
   de altura que o próprio WordPress usa para a admin bar. */
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-inline: var(--container-padding);
	padding-block: 16px;
	min-height: var(--header-height-mobile);
}

@media (min-width: 900px) {
	.site-header__inner {
		padding-block: 20px;
		min-height: var(--header-height);
	}
}

/* Estado inicial na Home: header transparente sobre o Hero (apenas com JS
   confirmado — ver script inline em header.php). Sem JS, o fallback abaixo
   mantém o header sempre sólido com o logo colorido. */
.js .site-header--transparent {
	background-color: transparent;
	border-bottom-color: transparent;
}

.js .site-header--transparent.is-scrolled {
	background-color: var(--color-white);
	border-bottom-color: var(--color-border);
}

/* Logos oficiais: nunca recriados, apenas alternados conforme o fundo. */
.site-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-logo {
	width: auto;
	height: 32px;
}

@media (min-width: 900px) {
	.site-logo {
		height: 40px;
	}
}

.site-logo--white {
	display: none;
}

.js .site-header--transparent:not(.is-scrolled) .site-logo--color {
	display: none;
}

.js .site-header--transparent:not(.is-scrolled) .site-logo--white {
	display: block;
}

/* Texto visível apenas para leitores de tela (padrão WordPress). */
.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;
}

/* Botão de menu mobile (hambúrguer em CSS puro, sem ícone/imagem externa). */
.menu-toggle {
	display: none;
	position: relative;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.menu-toggle:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
	position: absolute;
	left: 8px;
	width: 24px;
	height: 2px;
	background-color: var(--color-navy);
	transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.menu-toggle-icon {
	top: 19px;
}

.menu-toggle-icon::before {
	content: "";
	top: -7px;
}

.menu-toggle-icon::after {
	content: "";
	top: 7px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
	transform: translateY(-7px) rotate(-45deg);
}

.js .site-header--transparent:not(.is-scrolled) .menu-toggle-icon,
.js .site-header--transparent:not(.is-scrolled) .menu-toggle-icon::before,
.js .site-header--transparent:not(.is-scrolled) .menu-toggle-icon::after {
	background-color: var(--color-white);
}

.site-navigation {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.site-nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-menu li {
	position: relative;
}

.site-nav-menu a {
	position: relative;
	display: inline-block;
	padding-block: var(--space-1);
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.site-nav-menu a:hover {
	color: var(--color-blue);
}

.site-nav-menu a.is-active {
	color: var(--color-blue);
}

.site-nav-menu a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background-color: var(--color-blue);
}

.btn-cta {
	padding: var(--space-2) var(--space-5);
	font-size: var(--fs-sm);
	white-space: nowrap;
	background-color: var(--color-yellow);
	border-color: var(--color-yellow);
	color: var(--color-navy);
}

.btn-cta:hover {
	background-color: var(--color-yellow);
	border-color: var(--color-yellow);
	color: var(--color-navy);
	filter: brightness(0.92);
}

.btn-cta:focus-visible {
	outline-color: var(--color-navy);
}

/* Menu horizontal só a partir de 1200px (com "Certificados e Políticas" o
   menu precisa de ~1.210px); abaixo disso, hambúrguer. Altura do header e
   tamanho do logo continuam mudando em 900px. */
@media (min-width: 1200px) {
	.js .site-header--transparent:not(.is-scrolled) .site-nav-menu a,
	.js .site-header--transparent:not(.is-scrolled) .rdk-nav-dropdown__toggle {
		color: var(--color-white);
	}

	.js .site-header--transparent:not(.is-scrolled) .site-nav-menu a.is-active,
	.js .site-header--transparent:not(.is-scrolled) .site-nav-menu a:hover,
	.js .site-header--transparent:not(.is-scrolled) .rdk-nav-dropdown__toggle:hover {
		color: var(--color-yellow);
	}

	.js .site-header--transparent:not(.is-scrolled) .site-nav-menu a.is-active::after {
		background-color: var(--color-yellow);
	}
}

@media (max-width: 1199px) {
	.site-header__inner {
		gap: var(--space-3);
	}

	.menu-toggle {
		display: block;
	}

	.site-branding {
		flex-shrink: 0;
	}

	.site-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-4);
		background-color: var(--color-white);
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-5) var(--container-padding);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height var(--transition-base), opacity var(--transition-base);
	}

	/* Altura relativa à tela + rolagem interna: com o submenu aberto, a
	   lista pode passar da altura antiga de 480px. */
	.site-navigation.is-open {
		max-height: 80vh;
		overflow-y: auto;
		opacity: 1;
	}

	.site-nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		width: 100%;
	}

	.site-nav-menu a {
		color: var(--color-text);
	}

	.btn-cta {
		flex-shrink: 1;
		justify-content: center;
		padding: var(--space-2) var(--space-4);
		font-size: var(--fs-xs);
		max-width: 42vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Celular: só logo centralizado + hambúrguer à direita (grid 1fr auto 1fr
   centraliza o logo na largura da tela). O "Fale Conosco" sai do header
   apenas aqui; o menu aberto (absoluto) não ocupa célula do grid. As três
   barras do hambúrguer ficam com 28px e alinhadas (os pseudo-elementos são
   posicionados dentro da barra do meio, então left: 0). */
@media (max-width: 599px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-branding {
		grid-column: 2;
		justify-self: center;
	}

	.menu-toggle {
		grid-column: 3;
		justify-self: end;
	}

	.btn-cta {
		display: none;
	}

	.menu-toggle-icon,
	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		width: 28px;
	}

	.menu-toggle-icon {
		left: 6px;
	}

	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		left: 0;
	}
}

/* -- Submenu "Certificados e Políticas" ---------------------------------
   Item pai é um <button> (sem página própria). Desktop: painel branco
   alinhado ao item, abre no hover ou clique (.is-open via main.js).
   Mobile: expande/recolhe dentro do menu hambúrguer. */

.rdk-nav-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) 0;
	font: inherit;
	font-weight: 600;
	color: var(--color-text);
	background: none;
	border: none;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.rdk-nav-dropdown__toggle::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--transition-fast);
}

.rdk-nav-dropdown__toggle[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
}

.rdk-nav-dropdown__toggle:hover {
	color: var(--color-blue);
}

.rdk-nav-dropdown__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.rdk-nav-dropdown__menu {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rdk-nav-dropdown.is-open > .rdk-nav-dropdown__menu {
	display: block;
}

/* Links do submenu: sobrescreve o estilo geral dos links do menu (e o
   branco do header transparente, já que o painel é sempre claro). */
.site-nav-menu .rdk-nav-dropdown__menu a,
.js .site-header--transparent:not(.is-scrolled) .site-nav-menu .rdk-nav-dropdown__menu a,
.rdk-nav-dropdown__pending {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--space-2) 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-navy);
}

.site-nav-menu .rdk-nav-dropdown__menu a:hover {
	color: var(--color-blue);
}

.site-nav-menu .rdk-nav-dropdown__menu a:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: -2px;
}

/* PDF ainda sem URL: mesmo visual, sem link. */
.rdk-nav-dropdown__pending {
	color: var(--color-text-muted);
	cursor: default;
}

@media (max-width: 1199px) {
	.rdk-nav-dropdown {
		width: 100%;
	}

	.rdk-nav-dropdown__toggle {
		min-height: 44px;
	}

	.rdk-nav-dropdown__menu {
		margin-top: var(--space-1);
		padding-left: var(--space-4);
		border-left: 2px solid var(--color-border);
	}
}

@media (min-width: 1200px) {
	/* Hover abre só no desktop; ::before cobre o vão até o painel para o
	   hover não se perder no caminho. */
	.rdk-nav-dropdown:hover > .rdk-nav-dropdown__menu {
		display: block;
	}

	.rdk-nav-dropdown__menu {
		position: absolute;
		top: calc(100% + 14px);
		left: 0;
		z-index: 10;
		min-width: 300px;
		padding: var(--space-2) 0;
		background:
			linear-gradient(var(--color-yellow), var(--color-yellow)) var(--space-4) 0 / 28px 2px no-repeat,
			var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
	}

	.rdk-nav-dropdown__menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 15px;
	}

	.rdk-nav-dropdown__menu li + li {
		border-top: 1px solid var(--color-border);
	}

	.site-nav-menu .rdk-nav-dropdown__menu a,
	.js .site-header--transparent:not(.is-scrolled) .site-nav-menu .rdk-nav-dropdown__menu a,
	.rdk-nav-dropdown__pending {
		padding: var(--space-2) var(--space-4);
		white-space: nowrap;
	}

	.site-nav-menu .rdk-nav-dropdown__menu a:hover,
	.js .site-header--transparent:not(.is-scrolled) .site-nav-menu .rdk-nav-dropdown__menu a:hover {
		color: var(--color-blue);
		background-color: var(--color-silver);
	}
}

/* Rede de segurança para telas muito estreitas: reduz ainda mais o CTA
   em vez de deixá-lo disputar espaço com logo e hambúrguer. */
@media (max-width: 360px) {
	.btn-cta {
		padding: var(--space-1) var(--space-3);
	}
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-navy);
	color: var(--color-white);
	padding-block: var(--space-8);
	padding-inline: var(--container-padding);
	text-align: center;
}

.site-footer-inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Celular: faixa do footer mais curta (24px em vez de 48px). */
@media (max-width: 599px) {
	.site-footer {
		padding-block: var(--space-5);
	}
}

.site-footer a {
	color: var(--color-silver);
}

.site-footer a:hover {
	color: var(--color-yellow);
}

.site-footer p {
	color: inherit;
	margin: 0;
	font-size: var(--fs-sm);
}

/* ==========================================================================
   10. Tratamento sutil de prata/metálico
   ========================================================================== */

/*
 * Uso opcional em cards, seções alternadas ou blocos de destaque.
 * Efeito discreto — apenas leve profundidade, sem brilho exagerado.
 */
.surface-metal {
	background: linear-gradient(180deg, var(--color-white) 0%, var(--color-silver) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-metal);
}

.divider-metal {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent 0%, var(--color-border) 20%, var(--color-border) 80%, transparent 100%);
}

/*
 * Placeholder estrutural para fotografia real da RDK (a inserir futuramente:
 * máquinas Bihler, peças/molas, linha de montagem, controle por câmera,
 * fachada da fábrica, material histórico da Durre). Fundo neutro/prata e
 * borda sutil enquanto vazio; quando a imagem real existir, basta colocar
 * um <img>/<video> dentro — o object-fit:cover já está pronto, sem precisar
 * mexer neste CSS.
 */
.rdk-media-frame {
	position: relative;
	width: 100%;
	background-color: var(--color-silver);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.rdk-media-frame--4-3 { aspect-ratio: 4 / 3; }
.rdk-media-frame--3-2 { aspect-ratio: 3 / 2; }
.rdk-media-frame--16-9 { aspect-ratio: 16 / 9; }

.rdk-media-frame img,
.rdk-media-frame video,
.rdk-media-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rdk-media-frame iframe {
	border: 0;
}

/*
 * Moldura padrão das caixas grandes de mídia da Home que já têm conteúdo
 * real (padrão aprovado em Mercados). O overflow:hidden do .rdk-media-frame
 * recorta imagem/mapa na mesma curva. Aplicar só quando houver mídia real.
 */
.rdk-media-frame--accent {
	border: 2px solid var(--color-yellow);
	border-radius: 14px;
}

/* Variante azul da mesma moldura, para seções de fundo claro. */
.rdk-media-frame--accent-blue {
	border-color: var(--color-blue);
}

/* ==========================================================================
   11. Breakpoints de referência
   ========================================================================== */

/*
 * mobile:  até 599px  (estilo base, mobile-first)
 * tablet:  a partir de 600px  → @media (min-width: 600px)
 * desktop: a partir de 900px  → @media (min-width: 900px)
 * wide:    a partir de 1200px → @media (min-width: 1200px)
 */

/* ==========================================================================
   12. Seções institucionais (Home)
   ========================================================================== */

.section {
	padding-block: var(--space-12);
}

/* Celular (só Home): seções com 56px em cima/embaixo em vez de 96px. */
@media (max-width: 599px) {
	.home .section {
		padding-block: 3.5rem;
	}
}

.section-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-blue);
	margin-bottom: var(--space-4);
}

.section-kicker::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background-color: var(--color-blue);
}

.section-lead {
	font-size: var(--fs-lg);
	color: var(--color-text-muted);
	max-width: 70ch;
}

/* Entrada suave ao rolar (apenas com JS; sem JS, os elementos ficam sempre visíveis). */
.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   12b. Hero (construído do zero — classes rdk-hero__*)
   ========================================================================== */

.rdk-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(620px, 60vh, 720px);
	padding-block: calc(var(--header-height-mobile) + var(--space-8)) var(--space-8);
	background-color: var(--color-navy);
	/* Banner institucional: área limpa à esquerda (texto), produtos à direita.
	   Arquivo único (~77 KB): no mobile o cover amplia a imagem, então uma
	   variação menor perderia nitidez sem ganho real de peso. */
	background-image: url("../../../../uploads/2026/10/banner.webp");
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	color: var(--color-white);
	overflow: hidden;
}

/* Overlay azul uniforme só para garantir contraste do texto branco:
   bem leve no desktop, mais presente onde o produto fica atrás do texto. */
.rdk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(17, 16, 135, 0.52);
	pointer-events: none;
}

@media (min-width: 900px) {
	.rdk-hero::before {
		background-color: rgba(17, 16, 135, 0.12);
	}
}

/* Mobile: enquadra a mola principal em vez da borda direita da imagem. */
@media (max-width: 599px) {
	.rdk-hero {
		background-position: 75% center;
	}
}

@media (min-width: 900px) {
	.rdk-hero {
		padding-block: calc(var(--header-height) + var(--space-10)) var(--space-10);
	}
}

@media (max-width: 599px) {
	.rdk-hero {
		min-height: 0;
	}
}

.rdk-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: center;
}

@media (min-width: 900px) {
	.rdk-hero__inner {
		grid-template-columns: 1.1fr 1fr;
	}
}

.rdk-hero__title {
	color: var(--color-white);
	max-width: 620px;
	line-height: 1.1;
	margin-bottom: var(--space-6);
	font-size: clamp(2rem, 1.85rem + 1vw, 2.375rem);
}

@media (min-width: 600px) {
	.rdk-hero__title {
		font-size: clamp(2.625rem, 2.3rem + 1.2vw, 3rem);
	}
}

@media (min-width: 900px) {
	.rdk-hero__title {
		font-size: clamp(3rem, 2.6rem + 1.2vw, 3.5rem);
	}
}

.rdk-hero__subtitle {
	font-size: var(--fs-lg);
	color: var(--color-silver);
	max-width: 42ch;
	margin-bottom: var(--space-8);
}

.rdk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

.rdk-hero__cta-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-8);
	background-color: var(--color-yellow);
	color: var(--color-navy);
	font-weight: 600;
	font-size: var(--fs-lg);
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.rdk-hero__cta-primary:hover {
	background-color: var(--color-blue);
	color: var(--color-white);
	text-decoration: none;
}

.rdk-hero__cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-6);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	font-weight: 600;
}

.rdk-hero__cta-secondary:hover {
	border-color: var(--color-yellow);
	background-color: rgba(252, 215, 4, 0.08);
	color: var(--color-white);
	text-decoration: none;
}

.rdk-hero__indicators {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.rdk-hero__indicator {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-silver);
}

.rdk-hero__indicator-divider {
	width: 1px;
	height: 14px;
	background-color: rgba(252, 215, 4, 0.45);
}

@media (max-width: 599px) {
	.rdk-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.rdk-hero__cta-primary,
	.rdk-hero__cta-secondary {
		text-align: center;
	}

	/* H1/subtítulo menores e sem largura fixa; CTAs em largura total,
	   com quebra permitida (sem nowrap) para nunca passar da tela. */
	.rdk-hero__title {
		max-width: 100%;
		font-size: 1.875rem;
		line-height: 1.08;
	}

	.rdk-hero__subtitle {
		max-width: 100%;
		font-size: 1.0625rem;
		line-height: 1.45;
	}

	.rdk-hero__actions {
		gap: var(--space-4);
	}

	.rdk-hero__cta-primary,
	.rdk-hero__cta-secondary {
		width: 100%;
		max-width: 100%;
		padding: var(--space-3) var(--space-5);
		font-size: var(--fs-base);
		line-height: 1.3;
		white-space: normal;
	}
}

/* ==========================================================================
   12c. Quem Somos (reformulado — módulo imagem+conteúdo na linguagem da
   Seção 03. Classes rdk-quem-somos__*, rdk-timeline__*, rdk-durre-band__*)
   ========================================================================== */

.rdk-quem-somos {
	background-color: var(--color-white);
}

.rdk-quem-somos__module {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.rdk-quem-somos__title {
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	line-height: 1.15;
	max-width: 16ch;
}

@media (min-width: 900px) {
	.rdk-quem-somos__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

.rdk-quem-somos__content {
	max-width: 56ch;
}

.rdk-quem-somos__closing {
	margin: var(--space-6) 0 0;
	padding-left: var(--space-5);
	border-left: 3px solid var(--color-yellow);
}

.rdk-quem-somos__closing p {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-navy);
}

/* -- Timeline (1985 / 1996 / 2026) — compacta, vertical no mobile e
   horizontal no desktop -------------------------------------------------- */

.rdk-timeline {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--space-4);
}

.rdk-timeline__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.rdk-timeline__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* Acento pontual no marco mais recente (2026): marca em ::before,
   posicionada de forma absoluta para não deslocar o texto nem entrar em
   conflito com a divisória removida pela regra de :last-child acima. */
.rdk-timeline__item--accent {
	position: relative;
}

.rdk-timeline__item--accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 2px;
	background-color: var(--color-yellow);
}

.rdk-timeline__year {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-navy);
}

.rdk-timeline__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

@media (min-width: 900px) {
	.rdk-timeline {
		flex-direction: row;
		gap: var(--space-6);
	}

	.rdk-timeline__item {
		flex: 1;
		padding-bottom: 0;
		padding-right: var(--space-6);
		border-bottom: none;
		border-right: 1px solid var(--color-border);
	}

	.rdk-timeline__item:last-child {
		padding-right: 0;
		border-right: none;
	}
}

/* -- Grid desktop: imagem grande ocupando a altura de conteúdo+timeline -- */

@media (min-width: 900px) {
	.rdk-quem-somos__module {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"media content"
			"media timeline";
		gap: var(--space-10);
		align-items: center;
	}

	.rdk-quem-somos__media {
		grid-area: media;
	}

	.rdk-quem-somos__content {
		grid-area: content;
	}

	.rdk-timeline {
		grid-area: timeline;
		align-self: start;
	}
}

/* Celular: imagem primeiro, depois conteúdo e timeline. */
@media (max-width: 599px) {
	.rdk-quem-somos__module {
		gap: var(--space-6);
	}

	.rdk-quem-somos__media {
		order: -1;
	}

	/* Título da seção abaixo do H1 do Hero (30px); destaque claramente
	   abaixo do título. */
	.rdk-quem-somos__title {
		font-size: 1.6875rem;
	}

	.rdk-quem-somos__closing p {
		font-size: 1.25rem;
		line-height: 1.35;
	}
}

/* -- Faixa Durre: compacta, largura total do container ------------------- */

.rdk-durre-band {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-10);
	padding: var(--space-5) var(--space-6);
	overflow: hidden;
	/* Azul próximo da borda esquerda da arte: preenche a sobra à esquerda
	   no tablet/desktop e serve de fallback enquanto a imagem carrega. */
	background-color: #0D1F8A;
	background-image: url("../../../../uploads/2026/10/bg_s2.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border-left: 4px solid var(--color-yellow);
	border-radius: var(--radius-sm);
	color: var(--color-white);
}

/* Véu azul sobre o bg_s2 (abaixo do conteúdo): forte até ~46% da largura,
   atrás do texto e sobre os retângulos técnicos do canto esquerdo da arte;
   cai suavemente até ficar leve sobre as molas à direita. */
.rdk-durre-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(7, 24, 110, 0.88) 0%, rgba(7, 24, 110, 0.85) 34%, rgba(7, 24, 110, 0.78) 46%, rgba(7, 24, 110, 0.42) 58%, rgba(7, 24, 110, 0.20) 72%, rgba(7, 24, 110, 0.14) 100%);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	pointer-events: none;
}

.rdk-durre-band:hover {
	text-decoration: none;
}

.rdk-durre-band:hover .rdk-durre-band__cta span {
	transform: translateX(4px);
}

.rdk-durre-band__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.rdk-durre-band__kicker {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-silver);
}

.rdk-durre-band__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-white);
}

.rdk-durre-band__cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-5);
	background-color: var(--color-yellow);
	color: var(--color-navy);
	font-weight: 700;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.rdk-durre-band:hover .rdk-durre-band__cta {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.rdk-durre-band__cta span {
	display: inline-block;
	transition: transform var(--transition-fast);
}

/* Altura mínima maior para mostrar mais do bg_s2 (imagem 3:1); o conteúdo
   continua centralizado na vertical pelo align-items do flex. */
.rdk-durre-band {
	min-height: 200px;
}

/* Tablet/desktop: escala menor que o cover, arte ancorada à direita
   (a sobra à esquerda fica no background-color #0D1F8A, sob o véu). */
@media (min-width: 600px) {
	.rdk-durre-band {
		background-size: auto 105%;
		background-position: right center;
	}
}

@media (max-width: 599px) {
	.rdk-durre-band {
		padding: var(--space-5);
		min-height: 220px;
		/* Desloca o enquadramento para as molas no mobile. */
		background-position: 75% center;
	}
}

/* ==========================================================================
   12d. Soluções (sequência editorial única — abertura sem imagem, faixa
   técnica de prova e três módulos idênticos imagem+texto, sem alternância.
   Classes rdk-solucoes__*, rdk-solution-module__*)
   ========================================================================== */

.rdk-solucoes {
	background-color: var(--color-white);
	border-top: 1px solid var(--color-border);
}

/* -- Abertura: sem imagem, alinhada à esquerda, largura de leitura
   controlada -------------------------------------------------------------- */

.rdk-solucoes__intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 900px) {
	.rdk-solucoes__intro {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10);
		align-items: center;
	}
}

.rdk-solucoes__intro-content {
	max-width: 640px;
}

.rdk-solucoes__intro h2 {
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
	.rdk-solucoes__intro h2 {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

/* -- Faixa técnica: costura a abertura à sequência dos módulos ----------- */

.rdk-solucoes__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-8);
	margin-top: var(--space-8);
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.rdk-solucoes__stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-top: var(--space-3);
}

.rdk-solucoes__stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 2px;
	background-color: var(--color-yellow);
}

.rdk-solucoes__stat-value {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.1;
}

.rdk-solucoes__stat-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.rdk-solucoes__stats-divider {
	width: 1px;
	align-self: stretch;
	background-color: var(--color-border);
}

@media (max-width: 599px) {
	.rdk-solucoes__stats {
		flex-direction: column;
		gap: var(--space-6);
	}

	.rdk-solucoes__stats-divider {
		display: none;
	}
}

/* -- Módulos: estrutura idêntica nos três, sem alternância, sem cards
   fechados ----------------------------------------------------------------- */

.rdk-solucoes__modules {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin-top: var(--space-10);
}

.rdk-solution-module {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.rdk-solucoes__modules > .rdk-solution-module:first-child {
	padding-top: 0;
	border-top: none;
}

@media (min-width: 900px) {
	.rdk-solution-module {
		grid-template-columns: 1fr 1.1fr;
		grid-template-areas: "media content";
		gap: var(--space-10);
		align-items: center;
	}

	.rdk-solution-module__media {
		grid-area: media;
	}

	.rdk-solution-module__content {
		grid-area: content;
	}
}

.rdk-solution-module__index {
	display: inline-block;
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-navy);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-yellow);
}

.rdk-solution-module__title {
	font-size: clamp(1.625rem, 1.45rem + 0.8vw, 2rem);
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: var(--space-3);
}

@media (min-width: 900px) {
	.rdk-solution-module__title {
		font-size: clamp(1.875rem, 1.6rem + 1vw, 2.25rem);
	}
}

.rdk-solution-module__body {
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0;
	max-width: 48ch;
}

/* -- CTA: fechamento natural da sequência ---------------------------------- */

.rdk-solucoes__cta {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.rdk-btn-accent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-8);
	background-color: var(--color-yellow);
	color: var(--color-navy);
	font-weight: 600;
	font-size: var(--fs-lg);
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.rdk-btn-accent:hover {
	background-color: var(--color-blue);
	color: var(--color-white);
	text-decoration: none;
}

.rdk-btn-accent:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

/* Celular: imagem primeiro na abertura e nos três módulos; ritmo vertical
   mais curto; CTA sem nowrap (em 360px ele passava da largura). */
@media (max-width: 599px) {
	.rdk-solucoes__intro {
		gap: var(--space-6);
	}

	.rdk-solucoes__intro h2 {
		font-size: 1.6875rem;
	}

	.rdk-solution-module__title {
		font-size: 1.5rem;
	}

	.rdk-solucoes__intro-media,
	.rdk-solution-module__media {
		order: -1;
	}

	.rdk-solucoes__modules {
		gap: var(--space-6);
		margin-top: var(--space-8);
	}

	.rdk-solution-module {
		padding-top: var(--space-6);
	}

	.rdk-solucoes__cta {
		margin-top: var(--space-6);
		padding-top: var(--space-6);
	}

	.rdk-solucoes__cta .rdk-btn-accent {
		max-width: 100%;
		padding: var(--space-3) var(--space-6);
		font-size: var(--fs-base);
		white-space: normal;
	}
}

/* ==========================================================================
   12e. Mercados Atendidos (fundo navy — muda a atmosfera em relação às
   Seções 02/03. Classes rdk-mercados__*)
   ========================================================================== */

.rdk-mercados {
	background-color: var(--color-navy);
	color: var(--color-white);
}

.rdk-mercados .section-kicker {
	color: var(--color-yellow);
}

.rdk-mercados .section-kicker::before {
	background-color: var(--color-yellow);
}

.rdk-mercados .section-lead {
	color: rgba(255, 255, 255, 0.75);
}

/* -- Abertura: texto à esquerda / imagem à direita (mesma lógica da
   Seção 03) -------------------------------------------------------------- */

.rdk-mercados__intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 900px) {
	.rdk-mercados__intro {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10);
		align-items: center;
	}
}

.rdk-mercados__intro-content {
	max-width: 640px;
}

.rdk-mercados__title {
	color: var(--color-white);
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
	.rdk-mercados__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

/* -- Indicador editorial "+500 part numbers ativos" ---------------------- */

.rdk-mercados__stat {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-top: var(--space-6);
	padding-top: var(--space-3);
}

.rdk-mercados__stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 2px;
	background-color: var(--color-yellow);
}

.rdk-mercados__stat-value {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 700;
	color: var(--color-yellow);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.rdk-mercados__stat-counter {
	color: var(--color-yellow);
}

.rdk-mercados__stat-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-silver);
}

/* -- Setores: grade modular única (4 + 3 no desktop, 2 colunas abaixo de
   900px, 1 coluna em telas muito estreitas). Todos os módulos seguem a
   mesma lógica: divisórias finas, fundo transparente e traço curto de
   acento. Médico-Hospitalar/Aeroespacial só trocam o traço para amarelo e
   o peso para 800 — mesmo tamanho, mesmo módulo. ---------------------------- */

.rdk-mercados__sectors {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: var(--space-10) 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.rdk-mercados__sectors li {
	position: relative;
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-white);
	padding: var(--space-6) var(--space-5) var(--space-6) var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	transition: background-color var(--transition-fast);
}

.rdk-mercados__sectors li::before {
	content: "";
	display: block;
	width: 16px;
	height: 2px;
	margin-bottom: var(--space-3);
	background-color: rgba(239, 239, 239, 0.35);
	transition: background-color var(--transition-fast);
}

.rdk-mercados__sectors li:hover {
	background-color: rgba(255, 255, 255, 0.03);
}

.rdk-mercados__sectors li:hover::before {
	background-color: var(--color-yellow);
}

.rdk-mercados__sectors .rdk-mercados__sector--featured {
	font-weight: 800;
}

.rdk-mercados__sectors .rdk-mercados__sector--featured::before {
	background-color: var(--color-yellow);
}

/* Abaixo de 900px: 2 colunas; divisória vertical antes da 2ª coluna e
   Aeroespacial (último) ocupando a linha final inteira. */
@media (max-width: 899px) {
	.rdk-mercados__sectors li:nth-child(even) {
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}

	.rdk-mercados__sectors li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Telas muito estreitas: 1 coluna. */
@media (max-width: 379px) {
	.rdk-mercados__sectors {
		grid-template-columns: 1fr;
	}

	.rdk-mercados__sectors li:nth-child(even) {
		border-left: none;
	}
}

/* Desktop: 12 colunas — 4 módulos de 3 na 1ª linha, 3 módulos de 4 na 2ª. */
@media (min-width: 900px) {
	.rdk-mercados__sectors {
		grid-template-columns: repeat(12, 1fr);
	}

	.rdk-mercados__sectors li {
		grid-column: span 3;
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}

	.rdk-mercados__sectors li:nth-child(n+5) {
		grid-column: span 4;
	}

	.rdk-mercados__sectors li:nth-child(1),
	.rdk-mercados__sectors li:nth-child(5) {
		border-left: none;
	}
}

/* Celular: imagem primeiro, depois o conteúdo. */
@media (max-width: 599px) {
	.rdk-mercados__intro {
		gap: var(--space-6);
	}

	.rdk-mercados__title {
		font-size: 1.6875rem;
	}

	.rdk-mercados__intro-media {
		order: -1;
	}
}

/* ==========================================================================
   12f. Prova de Confiabilidade (fundo prata claro — retoma o claro após a
   Seção 04 navy. Faixa única de credenciais técnicas, sem cards.
   Classes rdk-confiabilidade__*)
   ========================================================================== */

.rdk-confiabilidade {
	background-color: var(--color-silver);
}

/* -- Abertura editorial: label + H2 à esquerda / parágrafo à direita ------ */

.rdk-confiabilidade__intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 900px) {
	.rdk-confiabilidade__intro {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10);
		align-items: end;
	}
}

.rdk-confiabilidade__title {
	color: var(--color-navy);
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.rdk-confiabilidade__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

.rdk-confiabilidade__lead {
	margin-bottom: 0;
}

/* -- Credenciais: régua navy no topo, divisórias finas, traço amarelo
   curto. 1 coluna no mobile, 2x2 no tablet, 4 em linha no desktop. ------- */

.rdk-confiabilidade__credentials {
	display: grid;
	grid-template-columns: 1fr;
	margin: var(--space-10) 0 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--color-navy);
	border-bottom: 1px solid rgba(17, 16, 135, 0.15);
}

.rdk-confiabilidade__credential {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5) 0;
}

.rdk-confiabilidade__credential + .rdk-confiabilidade__credential {
	border-top: 1px solid rgba(17, 16, 135, 0.15);
}

.rdk-confiabilidade__credential::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-bottom: var(--space-2);
	background-color: var(--color-yellow);
}

.rdk-confiabilidade__value {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.65rem + 0.3vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rdk-confiabilidade__label {
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.45;
	color: var(--color-text-muted);
	max-width: 22ch;
}

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

	.rdk-confiabilidade__credential {
		padding: var(--space-6) var(--space-5) var(--space-6) 0;
	}

	.rdk-confiabilidade__credential + .rdk-confiabilidade__credential {
		border-top: none;
	}

	.rdk-confiabilidade__credential:nth-child(n+3) {
		border-top: 1px solid rgba(17, 16, 135, 0.15);
	}

	.rdk-confiabilidade__credential:nth-child(even) {
		padding-left: var(--space-5);
		border-left: 1px solid rgba(17, 16, 135, 0.15);
	}
}

/* 4 em linha só a partir de 1100px: abaixo disso "ISO 9001:2015" não cabe
   numa coluna sem quebrar. A 2ª coluna é levemente mais larga pelo mesmo
   motivo. */
@media (min-width: 1100px) {
	.rdk-confiabilidade__credentials {
		grid-template-columns: 1fr 1.3fr 1fr 1fr;
		margin-top: var(--space-12);
	}

	.rdk-confiabilidade__credential {
		padding: var(--space-8) var(--space-5);
		border-left: 1px solid rgba(17, 16, 135, 0.15);
	}

	.rdk-confiabilidade__credential:first-child {
		padding-left: 0;
		border-left: none;
	}

	.rdk-confiabilidade__credential:nth-child(n+3) {
		border-top: none;
	}

	.rdk-confiabilidade__credential:nth-child(even) {
		padding-left: var(--space-5);
	}
}

/* -- Destaque ISO 9001: painel branco entre a abertura e as credenciais.
   Logo à esquerda + texto à direita (divisória fina) a partir de 600px;
   empilhado, sem divisória, no mobile. Tudo alinhado à esquerda. -------- */

.rdk-confiabilidade__iso {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	margin-top: var(--space-10);
	padding: var(--space-6) var(--space-5);
	background-color: var(--color-white);
	border: 1px solid rgba(17, 16, 135, 0.12);
	border-radius: var(--radius-sm);
	/* Base para a arte decorativa (::before, só a partir de 600px). */
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Arte decorativa à direita do painel (tablet/desktop), atrás do conteúdo.
   Altura do painel, ancorada à direita; a borda esquerda da camada esmaece
   para não marcar emenda no branco. Oculta no mobile. */
@media (min-width: 600px) {
	.rdk-confiabilidade__iso::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 60%;
		z-index: -1;
		pointer-events: none;
		background-image: url("../../../../uploads/2026/10/bg_iso900i.webp");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: auto 100%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
	}
}

.rdk-confiabilidade__iso-logo {
	flex-shrink: 0;
	width: 96px;
}

.rdk-confiabilidade__iso-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.rdk-confiabilidade__iso-content::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-bottom: var(--space-3);
	background-color: var(--color-blue);
}

.rdk-confiabilidade__iso-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-navy);
}

.rdk-confiabilidade__iso-text {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* Botão "Consultar certificado": .btn .btn-primary do tema, em versão
   compacta para não competir com o logo. */
.rdk-confiabilidade__iso-btn {
	margin-top: var(--space-5);
	padding: var(--space-2) var(--space-5);
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.rdk-confiabilidade__iso-btn:focus-visible {
	outline-color: var(--color-navy);
}

@media (min-width: 600px) {
	.rdk-confiabilidade__iso {
		flex-direction: row;
		align-items: center;
		gap: var(--space-6);
		padding: var(--space-6) var(--space-8);
	}

	.rdk-confiabilidade__iso-logo {
		width: 100px;
	}

	.rdk-confiabilidade__iso-content {
		padding-left: var(--space-6);
		border-left: 1px solid rgba(17, 16, 135, 0.15);
	}
}

@media (min-width: 900px) {
	.rdk-confiabilidade__iso {
		gap: var(--space-8);
		padding: var(--space-8) var(--space-10);
	}

	.rdk-confiabilidade__iso-logo {
		width: 120px;
	}

	.rdk-confiabilidade__iso-content {
		padding-left: var(--space-8);
	}
}

/* Celular: respiros internos de 64px reduzidos para 48px. */
@media (max-width: 599px) {
	.rdk-confiabilidade__iso,
	.rdk-confiabilidade__credentials {
		margin-top: var(--space-8);
	}

	.rdk-confiabilidade__title {
		font-size: 1.6875rem;
	}
}

/* ==========================================================================
   12g. Localização Estratégica (fundo branco; texto + placeholder de
   imagem. Classes rdk-localizacao__*)
   ========================================================================== */

.rdk-localizacao {
	background-color: var(--color-white);
}

.rdk-localizacao__module {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 768px) {
	.rdk-localizacao__module {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
		align-items: center;
	}
}

@media (min-width: 900px) {
	.rdk-localizacao__module {
		gap: var(--space-10);
	}
}

.rdk-localizacao__content {
	max-width: 640px;
}

.rdk-localizacao__title {
	color: var(--color-navy);
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
	.rdk-localizacao__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

/* Legenda: pequeno ponto amarelo como marcador de localização. */
.rdk-localizacao__caption {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.45;
	color: var(--color-navy);
}

.rdk-localizacao__caption::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color-yellow);
	box-shadow: 0 0 0 2px var(--color-navy);
	transform: translateY(-1px);
}

/* Celular: título da seção abaixo do H1 do Hero. */
@media (max-width: 599px) {
	.rdk-localizacao__title {
		font-size: 1.6875rem;
	}
}

/* ==========================================================================
   12h. Contato / CTA Comercial (fundo navy — fechamento da Home. Formulário
   apenas estruturado; envio pendente. Classes rdk-contato__*)
   ========================================================================== */

.rdk-contato {
	background-color: var(--color-navy);
	color: var(--color-white);
}

.rdk-contato .section-kicker {
	color: var(--color-yellow);
}

.rdk-contato .section-kicker::before {
	background-color: var(--color-yellow);
}

.rdk-contato .section-lead {
	color: rgba(255, 255, 255, 0.75);
}

.rdk-contato__module {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 768px) {
	.rdk-contato__module {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--space-8);
		align-items: center;
	}
}

@media (min-width: 900px) {
	.rdk-contato__module {
		gap: var(--space-10);
	}
}

.rdk-contato__content {
	max-width: 560px;
}

.rdk-contato__title {
	color: var(--color-white);
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
	.rdk-contato__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

/* -- Informações de contato: lista simples, ícones lineares amarelos,
   separada do texto por divisória fina. --------------------------------- */

.rdk-contato__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: var(--space-8) 0 0;
	padding: var(--space-6) 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.rdk-contato__info li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-silver);
}

.rdk-contato__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--color-yellow);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rdk-contato__info a {
	color: var(--color-silver);
	transition: color var(--transition-fast);
}

.rdk-contato__info a:hover {
	color: var(--color-yellow);
	text-decoration: none;
}

.rdk-contato__info a:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}

/* -- Formulário: campos brancos direto sobre o navy, sem card. ----------- */

.rdk-contato__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

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

	.rdk-contato__field--full,
	.rdk-contato__actions {
		grid-column: 1 / -1;
	}
}

.rdk-contato__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.rdk-contato__field label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-silver);
}

.rdk-contato__required {
	color: var(--color-yellow);
}

.rdk-contato__field input,
.rdk-contato__field textarea {
	width: 100%;
	min-height: 52px;
	padding: var(--space-3) var(--space-4);
	font: inherit;
	color: var(--color-navy);
	background-color: var(--color-white);
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);
}

.rdk-contato__field textarea {
	min-height: 140px;
	resize: vertical;
}

.rdk-contato__field input:focus,
.rdk-contato__field textarea:focus {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
	border-color: var(--color-blue);
}

.rdk-contato__field [aria-invalid="true"] {
	border-color: var(--color-yellow);
}

.rdk-contato__error {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-yellow);
}

.rdk-contato__submit {
	border: none;
	font-family: inherit;
	cursor: pointer;
}

.rdk-contato__submit:focus-visible {
	outline-color: var(--color-yellow);
}

/* -- Sucesso: substitui o formulário (só após envio real). --------------- */

.rdk-contato__success {
	padding: var(--space-6) 0 var(--space-6) var(--space-5);
	border-left: 3px solid var(--color-yellow);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--color-white);
}

.rdk-contato__success:focus {
	outline: none;
}

.rdk-contato__success p {
	margin: 0;
}

/* Mobile: botão em largura total. */
@media (max-width: 767px) {
	.rdk-contato__submit {
		width: 100%;
		justify-content: center;
		white-space: normal;
	}
}

/* Celular: título da seção abaixo do H1 do Hero. */
@media (max-width: 599px) {
	.rdk-contato__title {
		font-size: 1.6875rem;
	}
}

/* ==========================================================================
   12i. Página "A Durre agora é RDK" — 1. Hero (navy; header transparente
   por cima, ver header.php. Classes rdk-durre-hero__*)
   ========================================================================== */

.rdk-durre-hero {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: calc(var(--header-height-mobile) + var(--space-8)) var(--space-10);
	background-color: var(--color-navy);
	/* Background institucional: área limpa à esquerda (texto), arte à direita.
	   O navy acima fica como fallback enquanto a imagem carrega. */
	background-image: url("../../../../uploads/2026/10/bgdure.webp");
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	color: var(--color-white);
	overflow: hidden;
}

/* Overlay azul uniforme para o contraste do texto branco: bem leve no
   desktop, mais presente no tablet/mobile, onde a arte fica atrás do texto. */
.rdk-durre-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(17, 16, 135, 0.52);
	pointer-events: none;
}

@media (min-width: 900px) {
	.rdk-durre-hero::before {
		background-color: rgba(17, 16, 135, 0.12);
	}
}

/* Mobile: enquadra a mola/peças em vez da borda direita da arte.
   Tipografia igual à do Hero da Home no celular (H1 30px / 1.08;
   texto 1.0625rem / 1.45); respiro inferior igual ao da Home. */
@media (max-width: 599px) {
	.rdk-durre-hero {
		background-position: 75% center;
		padding-bottom: var(--space-8);
	}

	.rdk-durre-hero__title {
		font-size: 1.875rem;
		line-height: 1.08;
	}

	.rdk-durre-hero__intro {
		font-size: 1.0625rem;
		line-height: 1.45;
	}
}

@media (min-width: 900px) {
	.rdk-durre-hero {
		min-height: clamp(580px, 64vh, 680px);
		padding-block: calc(var(--header-height) + var(--space-8)) var(--space-8);
	}
}

.rdk-durre-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
	width: 100%;
}

@media (min-width: 900px) {
	.rdk-durre-hero__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-10);
	}
}

.rdk-durre-hero .section-kicker {
	color: var(--color-yellow);
}

.rdk-durre-hero .section-kicker::before {
	background-color: var(--color-yellow);
}

.rdk-durre-hero__title {
	color: var(--color-white);
	line-height: 1.1;
	margin-bottom: var(--space-5);
	font-size: clamp(2rem, 1.85rem + 1vw, 2.375rem);
}

@media (min-width: 600px) {
	.rdk-durre-hero__title {
		font-size: clamp(2.5rem, 2.2rem + 1vw, 3rem);
	}
}

@media (min-width: 900px) {
	.rdk-durre-hero__title {
		font-size: clamp(3rem, 2.6rem + 1.2vw, 3.5rem);
	}
}

.rdk-durre-hero__intro {
	max-width: 52ch;
	margin: 0;
	font-size: var(--fs-lg);
	color: rgba(255, 255, 255, 0.78);
}

/* Página Durre, mobile: as seções com .section (História, Integração,
   Transição) usam 64px de respiro vertical em vez dos 96px globais. Escopo
   .rdk-durre (o <main> da página) — não afeta o .section global nem a Home.
   Hero e Fechamento têm padding próprio e não mudam. */
@media (max-width: 767px) {
	.rdk-durre .section {
		padding-block: var(--space-10);
	}
}

@media (max-width: 599px) {
	.rdk-durre .section {
		padding-block: 3.5rem;
	}
}

/* ==========================================================================
   12j. Página "A Durre agora é RDK" — 2. História (fundo branco; mesmo
   esquema do "Quem Somos" da Home. Classes rdk-durre-historia__*; timeline
   reaproveita o componente .rdk-timeline sem alterá-lo)
   ========================================================================== */

.rdk-durre-historia {
	background-color: var(--color-white);
}

/* Mobile: texto -> imagem -> timeline com espaçamentos curtos e
   decrescentes, para lerem como um conjunto (a timeline funciona quase
   como legenda da imagem). */
.rdk-durre-historia__module {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.rdk-durre-historia__media + .rdk-durre-historia__timeline {
	margin-top: calc(var(--space-5) - var(--space-6));
}

.rdk-durre-historia__content {
	max-width: 56ch;
}

.rdk-durre-historia__title {
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	line-height: 1.15;
	max-width: 18ch;
	margin-bottom: var(--space-5);
}

.rdk-durre-historia__content p {
	margin: 0;
	font-size: var(--fs-lg);
}

@media (min-width: 900px) {
	.rdk-durre-historia__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}

	.rdk-durre-historia__module {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"media content"
			"media timeline";
		column-gap: var(--space-10);
		row-gap: var(--space-8);
		align-items: center;
	}

	.rdk-durre-historia__content {
		grid-area: content;
		align-self: end;
	}

	.rdk-durre-historia__media {
		grid-area: media;
	}

	/* No desktop a timeline fica sob o texto: divisória fina a separa. */
	.rdk-durre-historia__media + .rdk-durre-historia__timeline {
		grid-area: timeline;
		align-self: start;
		margin-top: 0;
		padding-top: var(--space-6);
		border-top: 1px solid var(--color-border);
	}
}

/* Celular: título abaixo do H1 do Hero; caixa de imagem no padrão das
   molduras da Home (azul 2px, raio 14px; overflow já vem do frame). */
@media (max-width: 599px) {
	.rdk-durre-historia__title {
		font-size: 1.6875rem;
	}

	.rdk-durre-historia__media {
		border: 2px solid var(--color-blue);
		border-radius: 14px;
	}
}

/* ==========================================================================
   12k. Página "A Durre agora é RDK" — 3. Integração (fundo navy; faixa
   2026 como marcador editorial. Classes rdk-durre-integracao__*)
   ========================================================================== */

.rdk-durre-integracao {
	background-color: var(--color-navy);
	color: var(--color-white);
}

.rdk-durre-integracao .section-kicker {
	color: var(--color-yellow);
}

.rdk-durre-integracao .section-kicker::before {
	background-color: var(--color-yellow);
}

.rdk-durre-integracao__module {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

/* Sem max-width no wrapper: a faixa 2026 precisa da largura total da
   coluna (no desktop, ela ainda avança sobre o gap). A largura de leitura
   fica nos próprios textos. */
.rdk-durre-integracao__title {
	color: var(--color-white);
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	line-height: 1.15;
	max-width: 18ch;
	margin-bottom: var(--space-5);
}

.rdk-durre-integracao__content p {
	max-width: 56ch;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

.rdk-durre-integracao__content p:last-of-type {
	margin-bottom: 0;
}

/* -- Faixa 2026: convergência (SVG fixo) + nó + ano + linha azul -------- */

.rdk-durre-integracao__marker {
	display: flex;
	align-items: center;
	margin-top: var(--space-8);
}

.rdk-durre-integracao__merge {
	flex: 0 0 auto;
	display: block;
}

.rdk-durre-integracao__merge path {
	fill: none;
	stroke: rgba(239, 239, 239, 0.55);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.rdk-durre-integracao__node {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--color-yellow);
}

.rdk-durre-integracao__year {
	flex: 0 0 auto;
	margin: 0 var(--space-4) 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1;
	color: var(--color-yellow);
	font-variant-numeric: tabular-nums;
}

.rdk-durre-integracao__line {
	flex: 1 1 auto;
	min-width: 32px;
	height: 2px;
	background-color: var(--color-blue);
}

@media (min-width: 900px) {
	.rdk-durre-integracao__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}

	/* Colunas alinhadas pela base; coluna de texto levemente mais larga
	   para a leitura respirar, sem a imagem dominar a composição. */
	.rdk-durre-integracao__module {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--space-10);
		align-items: end;
	}

	/* Desktop: linha azul como acento curto de comprimento fixo saindo do
	   2026 — não cresce com o grid nem chega à imagem. */
	.rdk-durre-integracao__line {
		flex: 0 0 140px;
	}

	/* Base da imagem na altura da linha do 2026: a faixa tem 40px (SVG) e
	   a linha de 2px fica centrada nela — (40 - 2) / 2 = 19px. */
	.rdk-durre-integracao__media {
		margin-bottom: 19px;
	}
}

/* Celular: título abaixo do H1 do Hero, faixa 2026 mais próxima do
   texto e caixa de imagem no padrão das molduras da Home (amarela sobre
   navy, como em Mercados). */
@media (max-width: 599px) {
	.rdk-durre-integracao__title {
		font-size: 1.6875rem;
	}

	.rdk-durre-integracao__marker {
		margin-top: var(--space-6);
	}

	.rdk-durre-integracao__media {
		border: 2px solid var(--color-yellow);
		border-radius: 14px;
	}
}

/* ==========================================================================
   12l. Página "A Durre agora é RDK" — 4. Transição para clientes e
   fornecedores (fundo prata; painel navy de ação na linguagem da Seção 07
   da Home — cada contato é uma linha inteira clicável. Classes
   rdk-durre-transicao__*)
   ========================================================================== */

.rdk-durre-transicao {
	background-color: var(--color-silver);
}

.rdk-durre-transicao__module {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 900px) {
	.rdk-durre-transicao__module {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--space-10);
		align-items: center;
	}
}

.rdk-durre-transicao__title {
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	line-height: 1.15;
	max-width: 18ch;
	margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
	.rdk-durre-transicao__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

.rdk-durre-transicao__content p {
	max-width: 44ch;
	margin: 0;
	font-size: var(--fs-lg);
	color: var(--color-text);
}

/* -- Painel navy: faixa amarela no topo, linhas de ação com divisórias
   finas. Sem sombra. ---------------------------------------------------- */

.rdk-durre-transicao__contacts {
	margin: 0;
	padding: var(--space-2) var(--space-4);
	list-style: none;
	background-color: var(--color-navy);
	border-top: 4px solid var(--color-yellow);
	border-radius: var(--radius-sm);
}

@media (min-width: 600px) {
	.rdk-durre-transicao__contacts {
		padding: var(--space-3) var(--space-5);
	}
}

.rdk-durre-transicao__contacts li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Linha inteira clicável (área de toque >= 72px). */
.rdk-durre-transicao__action {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 72px;
	padding: var(--space-4) var(--space-3);
	color: var(--color-white);
	transition: background-color var(--transition-fast);
}

.rdk-durre-transicao__action:hover {
	background-color: rgba(255, 255, 255, 0.04);
	text-decoration: none;
}

.rdk-durre-transicao__action:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}

.rdk-durre-transicao__icon-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(239, 239, 239, 0.25);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);
}

.rdk-durre-transicao__icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--color-yellow);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* min-width: 0 permite que o e-mail quebre sem empurrar a seta. */
.rdk-durre-transicao__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.rdk-durre-transicao__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-silver);
}

.rdk-durre-transicao__value {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-white);
	overflow-wrap: anywhere;
	transition: color var(--transition-fast);
}

.rdk-durre-transicao__arrow {
	flex: 0 0 auto;
	font-size: var(--fs-lg);
	color: var(--color-yellow);
	transition: transform var(--transition-fast);
}

.rdk-durre-transicao__action:hover .rdk-durre-transicao__value,
.rdk-durre-transicao__action:focus-visible .rdk-durre-transicao__value {
	color: var(--color-yellow);
}

.rdk-durre-transicao__action:hover .rdk-durre-transicao__icon-box,
.rdk-durre-transicao__action:focus-visible .rdk-durre-transicao__icon-box {
	border-color: var(--color-yellow);
}

.rdk-durre-transicao__action:hover .rdk-durre-transicao__arrow,
.rdk-durre-transicao__action:focus-visible .rdk-durre-transicao__arrow {
	transform: translateX(4px);
}

/* Celular: título, texto e card de contatos mais leves (ícone, gaps e
   paddings menores) para o e-mail caber em uma linha. Labels inalterados. */
@media (max-width: 599px) {
	.rdk-durre-transicao__title {
		font-size: 1.625rem;
	}

	.rdk-durre-transicao__content p {
		font-size: var(--fs-base);
	}

	.rdk-durre-transicao__contacts {
		padding: var(--space-1) var(--space-3);
	}

	.rdk-durre-transicao__module {
		gap: var(--space-6);
	}

	/* Divisórias entre os contatos: 2px e um pouco mais visíveis; linhas
	   mais baixas para aproximá-las dos ícones/textos. */
	.rdk-durre-transicao__contacts li + li {
		border-top: 2px solid rgba(255, 255, 255, 0.2);
	}

	.rdk-durre-transicao__action {
		gap: var(--space-3);
		min-height: 56px;
		padding: var(--space-2);
	}

	.rdk-durre-transicao__icon-box {
		width: 32px;
		height: 32px;
	}

	.rdk-durre-transicao__icon {
		width: 18px;
		height: 18px;
	}

	.rdk-durre-transicao__value {
		font-size: 1.0625rem;
	}

	.rdk-durre-transicao__arrow {
		font-size: var(--fs-base);
	}
}

/* ==========================================================================
   12m. Página "A Durre agora é RDK" — 5. Fechamento (navy; faixa curta com
   H2 + CTA para a Home. Classes rdk-durre-fechamento__*)
   ========================================================================== */

/* Navy mais profundo (token --color-navy-dark) que o footer (#111087): o
   fechamento lê como base da página e o footer como faixa separada; a
   linha fina na base reforça a junção. */
.rdk-durre-fechamento {
	position: relative;
	padding-block: var(--space-8);
	background-color: var(--color-navy-dark);
	/* Arte com peças nos dois cantos e centro limpo; o navy-dark acima fica
	   como fallback enquanto a imagem carrega. */
	background-image: url("../../../../uploads/2026/10/bg_cta.webp");
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	color: var(--color-white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

/* Overlay navy-dark: mais presente nas extremidades (título sobre as peças
   da esquerda, botão sobre as da direita) e leve no centro. */
.rdk-durre-fechamento::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11, 10, 94, 0.55) 0%, rgba(11, 10, 94, 0.35) 25%, rgba(11, 10, 94, 0.15) 50%, rgba(11, 10, 94, 0.35) 75%, rgba(11, 10, 94, 0.55) 100%);
	pointer-events: none;
}

@media (min-width: 768px) {
	.rdk-durre-fechamento {
		padding-block: var(--space-10);
	}
}

.rdk-durre-fechamento__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.rdk-durre-fechamento__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
	}
}

/* Traço amarelo curto acima do H2 (sem label: nenhum aprovado). */
.rdk-durre-fechamento__title {
	color: var(--color-white);
	font-size: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
	line-height: 1.15;
	margin: 0;
}

.rdk-durre-fechamento__title::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: var(--space-4);
	background-color: var(--color-yellow);
}

@media (min-width: 900px) {
	.rdk-durre-fechamento__title {
		font-size: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	}
}

/* Foco do .rdk-btn-accent é navy por padrão — invisível aqui. */
.rdk-durre-fechamento__cta:focus-visible {
	outline-color: var(--color-yellow);
}

@media (max-width: 767px) {
	.rdk-durre-fechamento__cta {
		width: 100%;
	}
}

/* Celular: título abaixo do H1 do Hero. */
@media (max-width: 599px) {
	.rdk-durre-fechamento__title {
		font-size: 1.6875rem;
	}
}

/* ==========================================================================
   13. Acessibilidade — prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}