/* ==========================================================================
   Scale Up Recursos — Servicios interactivos
   Mobile first. El color del cuadro elegido llega desde PHP como
   --sur-sv-acento, y el de su texto como --sur-sv-sobre.
   ========================================================================== */

.sur-sv {
	--sur-sv-texto: var(--prb-color-text, #14123a);
	--sur-sv-suave: #4a4760;
	--sur-sv-cuadro: var(--prb-color-bg, #ffffff);
	--sur-sv-borde: var(--prb-color-border, #e3e0f0);
	--sur-sv-marca: #ff8a4c;

	padding-block: clamp(2rem, 5vw, 3rem);
	background: var(--prb-color-surface, #f7f6fb);
	color: var(--sur-sv-texto);
	font-family: var(--prb-font-body, inherit);
}

.sur-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sur-sv-inner {
	width: min(100% - 2 * var(--prb-gutter, 1rem), 75rem);
	margin-inline: auto;
}

/* Dos secciones de servicios seguidas comparten fondo: el aire entre ellas
   se contaria dos veces. */
.sur-sv + .sur-sv {
	padding-top: 0;
}

/* ---------- Cabecera ---------- */

.sur-sv-cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	text-align: center;
}

.sur-sv-ante {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #c2410c;
}

.sur-sv-titulo {
	max-width: 47.5rem;
	margin: 0;
	font-family: var(--prb-font-heading, inherit);
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	color: var(--sur-sv-texto);
}

/* ---------- Cuerpo ---------- */

.sur-sv-cuerpo {
	display: grid;
	gap: 2.25rem;
}

/* ---------- Rejilla de cuadros: tres columnas siempre, como la referencia ---------- */

.sur-sv-rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.625rem 0.5rem;
	padding-block: 0.75rem;
}

.sur-sv-cuadro {
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 8rem;
	margin: 0;
	padding: 1rem 0.375rem 0.75rem;
	border: 1px solid var(--sur-sv-borde);
	border-radius: 0.875rem;
	background: var(--sur-sv-cuadro);
	box-shadow: 0 1px 2px rgba(20, 18, 58, 0.04);
	color: var(--sur-sv-texto);
	font: inherit;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.sur-sv-cuadro:hover:not(.is-activo) {
	border-color: #cfc6fa;
	border-color: color-mix(in srgb, var(--sur-sv-acento) 35%, var(--sur-sv-borde));
	background: #f1eeff;
	background: color-mix(in srgb, var(--sur-sv-acento) 7%, var(--sur-sv-cuadro));
}

/* El cuadro elegido se pinta entero, no solo un borde o el numero. */
.sur-sv-cuadro.is-activo {
	border-color: var(--sur-sv-acento);
	background: var(--sur-sv-acento);
	box-shadow: 0 14px 30px -6px rgba(90, 61, 230, 0.35);
	box-shadow: 0 14px 30px -6px color-mix(in srgb, var(--sur-sv-acento) 45%, transparent);
	color: var(--sur-sv-sobre, #ffffff);
}

.sur-sv-cuadro:focus-visible {
	outline: 2px solid var(--sur-sv-acento);
	outline-offset: 3px;
}

.sur-sv-num {
	position: absolute;
	left: 50%;
	top: -11px;
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 1.375rem;
	box-sizing: border-box;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--sur-sv-texto);
	color: var(--sur-sv-cuadro);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	transform: translateX(-50%);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.sur-sv-cuadro[data-fila="abajo"] .sur-sv-num {
	top: auto;
	bottom: -11px;
}

.sur-sv-cuadro.is-activo .sur-sv-num {
	background: var(--sur-sv-marca);
	color: #0b0c1f;
}

.sur-sv-ico {
	display: block;
	flex-shrink: 0;
	width: 1.875rem;
	height: 1.875rem;
}

.sur-sv-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Icono subido: se usa como mascara para que tome el color del texto. */
.sur-sv-ico--propio {
	background: currentColor;
	-webkit-mask: var(--sur-ico) center / contain no-repeat;
	mask: var(--sur-ico) center / contain no-repeat;
}

.sur-sv-nombre {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ---------- Explicacion ampliada ---------- */

.sur-sv-detalles {
	display: grid;
	gap: 2.5rem;
	padding: 1.75rem 1.375rem;
	border: 1px solid var(--sur-sv-borde);
	border-radius: 1.375rem;
	background: var(--sur-sv-cuadro);
	scroll-margin-top: calc(var(--prb-header-height, 4.25rem) + 1rem);
}

.sur-sv-detalle {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

/* Con JavaScript las explicaciones se apilan en la misma celda y solo se ve
   la elegida. Sin el, se leen todas una detras de otra. */
.sur-sv.is-lista .sur-sv-detalle {
	grid-area: 1 / 1;
}

.sur-sv.is-lista .sur-sv-detalle:not(.is-activo) {
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.45s;
}

.sur-sv.is-lista .sur-sv-detalle > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.sur-sv.is-lista .sur-sv-detalle.is-activo > * {
	opacity: 1;
	transform: none;
}

.sur-sv.is-lista .sur-sv-detalle.is-activo > :nth-child(2) { transition-delay: 0.08s; }
.sur-sv.is-lista .sur-sv-detalle.is-activo > :nth-child(3) { transition-delay: 0.16s; }
.sur-sv.is-lista .sur-sv-detalle.is-activo > :nth-child(4) { transition-delay: 0.24s; }

.sur-sv-visual {
	display: grid;
	place-items: center;
	width: 5.25rem;
	height: 5.25rem;
	border-radius: 1.375rem;
	background: #efeaff;
	background: color-mix(in srgb, var(--sur-sv-acento) 12%, var(--sur-sv-cuadro));
	color: var(--sur-sv-acento);
}

.sur-sv-visual .sur-sv-ico {
	width: 2.75rem;
	height: 2.75rem;
}

.sur-sv-visual--img {
	display: block;
	width: auto;
	height: auto;
	background: none;
}

.sur-sv-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 15rem;
	border-radius: 1rem;
}

.sur-sv-detalle-titulo {
	margin: 0.25rem 0 0;
	font-family: var(--prb-font-heading, inherit);
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.12;
	color: var(--sur-sv-texto);
}

.sur-sv-texto {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--sur-sv-suave);
}

.sur-sv-texto p {
	margin: 0;
}

/* ---------- Boton del detalle ---------- */

.sur-sv-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.125rem;
	box-sizing: border-box;
	margin-top: 0.25rem;
	padding: 0.375rem 0.375rem 0.375rem 1.375rem;
	border-radius: 999px;
	background: #14123a;
	color: #f4f2ff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.sur-sv-btn:hover,
.sur-sv-btn:focus-visible {
	color: #f4f2ff;
	text-decoration: none;
}

.sur-sv-btn:focus-visible {
	outline: 2px solid var(--sur-sv-acento);
	outline-offset: 3px;
}

.sur-sv-btn-ico {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--sur-sv-marca);
	color: #0b0c1f;
	transition: transform 0.25s ease;
}

.sur-sv-btn:hover .sur-sv-btn-ico {
	transform: translateX(3px);
}

/* ---------- Escritorio: cuadros a la izquierda, detalle a la derecha ---------- */

@media (min-width: 960px) {

	.sur-sv-cuerpo {
		grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr);
		align-items: start;
		gap: 4.5rem;
	}

	.sur-sv-rejilla {
		gap: 1.875rem 0.875rem;
		padding-block: 0.875rem;
	}

	.sur-sv-cuadro {
		gap: 0.875rem;
		min-height: 11.75rem;
		padding: 1.25rem 0.875rem;
		border-radius: 1.125rem;
	}

	.sur-sv-cuadro.is-activo {
		transform: translateY(-4px);
	}

	.sur-sv-num {
		top: -13px;
		min-width: 2.75rem;
		height: 1.625rem;
		font-size: 0.8125rem;
	}

	.sur-sv-cuadro[data-fila="abajo"] .sur-sv-num {
		bottom: -13px;
	}

	.sur-sv-ico {
		width: 2.375rem;
		height: 2.375rem;
	}

	.sur-sv-nombre {
		font-size: 1.0625rem;
	}

	.sur-sv-detalles {
		padding: 0.375rem 0 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.sur-sv-detalle {
		gap: 1.125rem;
	}

	.sur-sv-visual {
		width: 7rem;
		height: 7rem;
		border-radius: 1.75rem;
	}

	.sur-sv-visual .sur-sv-ico {
		width: 3.625rem;
		height: 3.625rem;
	}

	.sur-sv-visual--img {
		width: auto;
		height: auto;
	}

	.sur-sv-img {
		max-height: 17rem;
	}

	.sur-sv-texto {
		font-size: 1.0625rem;
	}

	.sur-sv-btn {
		min-height: 3.375rem;
		padding: 0.5rem 0.5rem 0.5rem 1.5rem;
		font-size: 1rem;
	}

	.sur-sv-btn-ico {
		width: 2.375rem;
		height: 2.375rem;
	}
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {

	.sur-sv-cuadro,
	.sur-sv.is-lista .sur-sv-detalle > * {
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
	}

	.sur-sv-cuadro.is-activo {
		transform: none;
	}
}