/* Serviços hub — Korean Desk / USA Desk (teal). 2 colunas, título + chevron.
   A capa (raz_servico_banner) preenche o card inteiro e é revelada no hover. */
.raz-srv-desks { background: var(--raz-primary); color: var(--raz-cream); }
.raz-srv-desks__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-block: 60px;            /* mobile */
}
.raz-srv-desk {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 320px;             /* mobile — espaço p/ a capa */
	padding: 36px;
	text-decoration: none;
	color: var(--raz-cream);
	overflow: hidden;
	background-color: var(--raz-primary);
	isolation: isolate;
}
/* Capa do serviço (atrás; revelada no hover) — preenche o card todo. */
.raz-srv-desk.has-img {
	background-image: var(--desk-img);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Gradiente teal p/ legibilidade do título sobre a capa. */
.raz-srv-desk::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(5, 91, 108, 0.9) 0%, rgba(5, 91, 108, 0.12) 100%);
	opacity: 0;
	transition: opacity 0.45s ease;
}
/* Cortina teal sólida: esconde a capa por padrão. */
.raz-srv-desk::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--raz-primary);
	transition: opacity 0.45s ease;
}
.raz-srv-desk.has-img:hover::after,
.raz-srv-desk.has-img:focus-visible::after { opacity: 0; }
.raz-srv-desk.has-img:hover::before,
.raz-srv-desk.has-img:focus-visible::before { opacity: 1; }

.raz-srv-desk__title { position: relative; z-index: 2; }
.raz-srv-desk__title {
	font-family: var(--raz-font-light);
	font-weight: 300;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -1.08px;
	color: var(--raz-cream);
}
.raz-srv-desk__title strong { font-family: var(--raz-font-display); font-weight: 600; }
/* Chevron no canto INFERIOR DIREITO do card. */
.raz-srv-desk .raz-srv-circle {
	position: absolute;
	z-index: 2;
	right: 36px;
	bottom: 36px;
	margin-top: 0;
}
@media (min-width: 740px) {
	.raz-srv-desks__grid { grid-template-columns: 1fr 1fr; gap: 0; padding-block: 80px; min-height: 419px; grid-auto-rows: 1fr; }
	.raz-srv-desk { min-height: 419px; }   /* preenche a altura da seção → capa cobre tudo */
	.raz-srv-desk__title { font-size: 48px; }
}