/* =========================================================
   R45 Seguros — grelha de cards
   ========================================================= */

.sg-wrap {
	--sg-cols: 3;
	--sg-gap: 20px;
	--sg-radius: 16px;
	--sg-padding: 34px;
	--sg-min-altura: 400px;
	--sg-titulo: #001E62;
	--sg-texto: #001E62;
	--sg-icone: #001E62;
	--sg-cinza: var(--CINZA, #dedede);
	--sg-branco: var(--BRANCO, #fff);
	--sg-icone-tamanho: 40px;
}

.sg-grid {
	display: grid;
	grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
	gap: var(--sg-gap);
	align-items: stretch;
}

@media (max-width: 1000px) {
	.sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 690px) {
	.sg-grid { grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */

.sg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sg-padding);
	min-height: var(--sg-min-altura);
	border-radius: var(--sg-radius);
	background: linear-gradient(78deg, var(--sg-cinza) -3.04%, var(--sg-branco) 111.85%);
	box-sizing: border-box;
}

.sg-topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.sg-titulo {
	margin: 0 !important;
	color: var(--sg-titulo);
	flex: 1 1 auto;
}

.sg-texto {
	margin: 18px 0 0 !important;
	color: var(--sg-texto);
}

/* ---------- Ícone (40x40 sempre) ---------- */

.sg-icone {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sg-icone-tamanho);
	height: var(--sg-icone-tamanho);
	min-width: var(--sg-icone-tamanho);
	min-height: var(--sg-icone-tamanho);
	color: var(--sg-icone);
	margin-top: 2px;
}

.sg-icone img,
.sg-icone svg {
	position: relative;
	z-index: 1;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}

/* SVG inline segue a cor definida em --sg-icone */
.sg-icone--svg svg,
.sg-icone--svg svg path,
.sg-icone--svg svg circle,
.sg-icone--svg svg rect,
.sg-icone--svg svg polygon {
	fill: currentColor;
}

/* ---------- Hover: o card inteiro ---------- */

.sg-card {
	transition: transform .45s cubic-bezier(.25,.8,.25,1), box-shadow .45s ease;
}

/* gradiente invertido que entra por cima, em fade */
.sg-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(78deg, var(--sg-branco) -3.04%, var(--sg-cinza) 111.85%);
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
	z-index: 0;
}

.sg-card > * {
	position: relative;
	z-index: 1;
}

.sg-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -20px rgba(0, 30, 98, .35);
}

.sg-card:hover::before {
	opacity: 1;
}

/* ---------- Card clicável ---------- */

.sg-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--sg-radius);
	text-indent: -9999px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.sg-card,
	.sg-card::before {
		transition: none !important;
		transform: none !important;
	}
}