/**
 * Seguros Pro — estilos del frente.
 *
 * Criterios del documento de marca:
 * - Base clara y mucho aire: cada bloque dice una sola cosa.
 * - El celeste ordena; el naranja y el verde entran sólo como corte.
 * - La línea de gama de celestes con remate naranja y verde es el sello visual.
 */

/* ------------------------------------------------------------------ *
 * 1. Base
 * ------------------------------------------------------------------ */

/* La navegación es por anclas dentro de la misma página: el salto seco
   desorienta, el desplazamiento suave deja ver de dónde a dónde se fue. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

/* El navegador oculta lo que lleva [hidden], pero esa regla suya pierde contra
   cualquier clase que fije display. Varias piezas del plugin son flex, así que
   quedaban visibles aunque el guion las marcara como ocultas: los filtros de
   planes no filtraban nada y el aviso de "plan elegido" se veía siempre. */
.sp-root [hidden] {
	display: none;
}

.sp-root {
	color: var(--sp-texto, #3a4a52);
	font-family: var(--sp-fuente, system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.sp-wrap {
	margin: 0 auto;
	max-width: var(--sp-ancho, 1160px);
	padding: 0 24px;
	width: 100%;
}

.sp-section {
	padding: 88px 0;
}

.sp-section + .sp-section {
	padding-top: 0;
}

/* ------------------------------------------------------------------ *
 * Secciones con foto de fondo
 *
 * La foto va a sangre completa con un velo oscuro encima; el texto pasa a
 * blanco. Es el recurso que da respiro entre bloques de información.
 * ------------------------------------------------------------------ */

/* Doble clase a propósito: algunas secciones traen su propio fondo de color
   con la propiedad abreviada, y sin esta especificidad se comerían la foto. */
.sp-section.sp-section--foto {
	background-color: var(--sp-oscuro, #0d3b52);
	background-image: linear-gradient(rgba(8, 40, 58, var(--sp-velo, 0.62)), rgba(8, 40, 58, var(--sp-velo, 0.62))), var(--sp-foto);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	padding-bottom: 104px;
	padding-top: 104px;
}

/* La foto queda quieta mientras el contenido pasa por encima. */
.sp-section--fija {
	background-attachment: fixed;
}

.sp-section--foto + .sp-section {
	padding-top: 88px;
}

.sp-section--foto .sp-head__title,
.sp-section--foto .sp-card__titulo,
.sp-section--foto .sp-beneficios__grupo,
.sp-section--foto .sp-cifra__etiqueta,
.sp-section--foto .sp-cifra__numero,
.sp-section--foto .sp-autogestion__titulo,
.sp-section--foto .sp-cotizador__titulo,
.sp-section--foto .sp-logos__texto {
	color: #fff;
}

.sp-section--foto .sp-head__text,
.sp-section--foto .sp-card__texto,
.sp-section--foto .sp-cifra__aclaracion,
.sp-section--foto .sp-cotizador__texto,
.sp-section--foto .sp-autogestion__texto {
	color: rgba(255, 255, 255, 0.82);
}

/* Las tarjetas necesitan cuerpo propio para no perderse sobre la foto. */
.sp-section--foto .sp-card {
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(6px);
	border-color: rgba(255, 255, 255, 0.22);
}

.sp-section--foto .sp-card:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
}

.sp-section--foto .sp-autogestion__inner,
.sp-section--foto .sp-autogestion__item {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.sp-section--foto .sp-autogestion__item .sp-icon {
	color: #fff;
}

/* La línea conserva sus colores también sobre foto: es un elemento de marca
   y tiene que verse igual en toda la página. Pintarla de blanco sobre los
   fondos oscuros la convertía en otra cosa. */

/* Acordeón, precios y listados también tienen que pasar a claro: si no,
   quedan en azul oscuro sobre una foto oscura y no se leen. */
.sp-section--foto .sp-faq__pregunta,
.sp-section--foto .sp-plan__importe,
.sp-section--foto .sp-plan__lista li,
.sp-section--foto .sp-sucursal__datos,
.sp-section--foto .sp-sucursal__datos a,
.sp-section--foto .sp-cotizador__contacto,
.sp-section--foto .sp-cotizador__contacto a,
.sp-section--foto .sp-testimonio__texto,
.sp-section--foto .sp-tip__etiqueta {
	color: #fff;
}

/* El formulario sigue siendo una tarjeta blanca: sobre la foto necesita sombra
   para no quedar pegado al fondo. */
.sp-section--foto .sp-form {
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 18px 44px rgba(8, 40, 58, 0.3);
}

.sp-section--foto .sp-faq__respuesta,
.sp-section--foto .sp-plan__periodo,
.sp-section--foto .sp-plan__desde,
.sp-section--foto .sp-testimonio__cargo,
.sp-section--foto .sp-beneficio__condiciones {
	color: rgba(255, 255, 255, 0.78);
}

.sp-section--foto .sp-faq__lista,
.sp-section--foto .sp-faq__item,
.sp-section--foto .sp-plan__precio {
	border-color: rgba(255, 255, 255, 0.22);
}

.sp-section--foto .sp-tip__etiqueta {
	background: rgba(255, 255, 255, 0.18);
}

.sp-section--foto .sp-filtros__btn,
.sp-section--foto .sp-tabs__btn {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.sp-section--foto .sp-filtros__btn.is-activo,
.sp-section--foto .sp-tabs__btn.is-activo {
	background: #fff;
	border-color: #fff;
	color: var(--sp-titulo, #08557a);
}

.sp-section--foto .sp-more--celeste {
	color: #fff;
}

/* Una sola foto vertical no puede estirar la columna hasta el infinito. */
.sp-nosotros__aparte .sp-nosotros__foto {
	max-height: 540px;
	object-fit: cover;
}

@media (max-width: 820px) {
	/* En móvil el fondo fijo tiembla o se recorta: mejor que acompañe. */
	.sp-section--fija {
		background-attachment: scroll;
	}

	.sp-section--foto {
		padding-bottom: 72px;
		padding-top: 72px;
	}
}

/* Si la sección anterior tiene fondo propio, la siguiente recupera su aire. */
.sp-section.sp-cifras--suave + .sp-section,
.sp-section.sp-cotizador--suave + .sp-section,
.sp-section.sp-cotizador--oscuro + .sp-section,
.sp-contacto + .sp-section,
.sp-cta + .sp-section,
.sp-frases + .sp-section,
.sp-hero + .sp-section {
	padding-top: 88px;
}

.sp-root p {
	margin: 0 0 1em;
}

/* :where() no suma especificidad: así los botones y enlaces con clase propia
   mandan sobre este color de base sin necesidad de encadenar selectores. */
.sp-root :where(a) {
	color: var(--sp-celeste, #0a9bd4);
}

.sp-icon {
	display: block;
	height: 1.35em;
	width: 1.35em;
}

/* ------------------------------------------------------------------ *
 * 2. La línea de corte
 * ------------------------------------------------------------------ */

/* Una sola línea continua: los tramos se tocan y el color va del celeste
   claro al fuerte, con el remate naranja y verde. Antes iban separados y se
   leía como una línea punteada. */
.sp-rule {
	align-items: center;
	border-radius: 3px;
	display: flex;
	gap: 0;
	margin: 18px 0 22px;
	overflow: hidden;
	width: fit-content;
}

.sp-rule i {
	display: block;
	height: 5px;
}

/* Los primeros tramos eran celestes casi blancos: sobre fondo blanco
   desaparecían y la línea se leía como guiones sueltos aunque estuviera
   pegada. Ahora todos tienen cuerpo y se ve una sola línea corrida. */
.sp-rule__c1 { background: var(--sp-celeste-55, #7fcbec); width: 24px; }
.sp-rule__c2 { background: var(--sp-celeste-75, #4bb6e2); width: 24px; }
.sp-rule__c3 { background: var(--sp-celeste, #0a9bd4); width: 24px; }
.sp-rule__c4 { background: var(--sp-celeste, #0a9bd4); width: 48px; }
.sp-rule__naranja { background: var(--sp-naranja, #ef7d00); width: 20px; }
.sp-rule__verde { background: var(--sp-verde, #4ea72e); width: 14px; }

.sp-head--center .sp-rule {
	margin-left: auto;
	margin-right: auto;
}

.sp-linea {
	padding: 12px 0;
}

.sp-linea--center .sp-rule {
	margin-left: auto;
	margin-right: auto;
}

.sp-linea--largo .sp-rule i {
	flex: 1 1 auto;
}

.sp-linea--largo .sp-rule__naranja,
.sp-linea--largo .sp-rule__verde {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * 3. Cabeceras de sección
 * ------------------------------------------------------------------ */

.sp-head {
	margin-bottom: 44px;
	max-width: 720px;
}

.sp-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.sp-head__title {
	color: var(--sp-titulo, #08557a);
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.25;
	margin: 0;
	text-transform: uppercase;
}

.sp-head__text {
	color: var(--sp-suave, #7b8c95);
	font-size: 1.05rem;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Botones y enlaces
 * ------------------------------------------------------------------ */

.sp-root .sp-btn {
	border: 2px solid transparent;
	border-radius: var(--sp-radio, 4px);
	cursor: pointer;
	display: inline-block;
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 13px 26px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sp-root .sp-btn:hover {
	transform: translateY(-1px);
}

.sp-btn--celeste { background: var(--sp-celeste, #0a9bd4); color: #fff; }
.sp-btn--celeste:hover { background: var(--sp-titulo, #08557a); color: #fff; }

.sp-btn--naranja { background: var(--sp-naranja, #ef7d00); color: #fff; }
.sp-btn--naranja:hover { background: #d76f00; color: #fff; }

.sp-btn--verde { background: var(--sp-verde, #4ea72e); color: #fff; }
.sp-btn--verde:hover { background: #438f27; color: #fff; }

.sp-btn--claro { background: #fff; color: var(--sp-titulo, #08557a); }

.sp-btn--linea {
	background: transparent;
	border-color: var(--sp-celeste-35, #b0dff3);
	color: var(--sp-titulo, #08557a);
}

.sp-btn--linea:hover {
	border-color: var(--sp-celeste, #0a9bd4);
}

.sp-btn--grande {
	font-size: 0.95rem;
	padding: 16px 34px;
}

.sp-more {
	align-items: center;
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 800;
	gap: 8px;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.sp-more__arrow {
	display: inline-flex;
	transition: transform 0.15s ease;
}

.sp-more:hover .sp-more__arrow {
	transform: translateX(4px);
}

.sp-more--celeste { color: var(--sp-celeste, #0a9bd4); }
.sp-more--naranja { color: var(--sp-naranja, #ef7d00); }
.sp-more--verde { color: var(--sp-verde, #4ea72e); }

.sp-more .sp-icon {
	height: 1.05em;
	width: 1.05em;
}

/* ------------------------------------------------------------------ *
 * 5. Accesos rápidos
 * ------------------------------------------------------------------ */

.sp-accesos {
	background: #fff;
	border-bottom: 1px solid var(--sp-celeste-20, #cfeaf7);
	padding: 14px 0;
}

.sp-accesos__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: flex-end;
}

.sp-accesos__item {
	color: var(--sp-titulo, #08557a);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.sp-accesos__item:hover {
	color: var(--sp-naranja, #ef7d00);
}

/* ------------------------------------------------------------------ *
 * 6. Portada
 * ------------------------------------------------------------------ */

.sp-hero {
	align-items: stretch;
	background: var(--sp-fondo, #f2f9fd);
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	position: relative;
}

.sp-hero__panel {
	display: flex;
	align-items: center;
	padding: 96px 0 96px 24px;
}

.sp-hero__contenido {
	margin-left: auto;
	max-width: calc(var(--sp-ancho, 1160px) / 2 - 24px);
	padding-right: 56px;
	width: 100%;
}

/* Antetítulo: ubica al visitante en una línea, sin robarle peso al título. */
.sp-kicker {
	color: var(--sp-celeste, #0a9bd4);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

/* El sello de los años: lo primero que encuentra la vista al entrar. Va antes
   del título y no compite con él porque ocupa otro registro visual. */
.sp-sello {
	align-items: center;
	display: inline-flex;
	gap: 18px;
	margin: 0 0 26px;
}

.sp-sello__numero {
	color: var(--sp-celeste, #0a9bd4);
	font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.9;
}

.sp-sello__texto {
	border-left: 4px solid var(--sp-naranja, #ef7d00);
	color: var(--sp-titulo, #08557a);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	max-width: 21ch;
	padding-left: 14px;
	text-align: left;
	text-transform: uppercase;
}

.sp-hero--sin-imagen .sp-sello {
	justify-content: center;
}

@media (max-width: 640px) {
	.sp-sello {
		gap: 14px;
	}

	.sp-sello__texto {
		font-size: 0.76rem;
		max-width: 13ch;
	}
}

.sp-hero__titulo {
	color: var(--sp-titulo, #08557a);
	text-wrap: balance;
	font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin: 0 0 24px;
}

.sp-hero__texto {
	color: var(--sp-suave, #7b8c95);
	font-size: 1.08rem;
	margin-bottom: 32px;
	max-width: 34em;
}

.sp-hero__acciones {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	margin: 0;
}

.sp-hero__figura {
	position: relative;
	min-height: 520px;
}

.sp-hero__figura img {
	display: block;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	width: 100%;
	/* El corte diagonal es la firma de la portada. */
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.sp-hero--invertido {
	direction: rtl;
}

.sp-hero--invertido > * {
	direction: ltr;
}

.sp-hero--invertido .sp-hero__figura img {
	clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

.sp-hero--sin-imagen {
	grid-template-columns: 1fr;
}

.sp-hero--sin-imagen .sp-hero__panel {
	justify-content: center;
	padding: 96px 24px;
}

.sp-hero--sin-imagen .sp-hero__contenido {
	margin: 0 auto;
	max-width: var(--sp-ancho, 1160px);
	padding-right: 0;
	text-align: center;
}

.sp-hero--sin-imagen .sp-hero__acciones {
	justify-content: center;
}

/* El párrafo tiene ancho máximo propio: sin márgenes automáticos quedaría
   pegado a la izquierda mientras el título y los botones van centrados. */
.sp-hero--sin-imagen .sp-hero__texto {
	margin-left: auto;
	margin-right: auto;
	max-width: 46ch;
}

/* Centrado, un título a todo el ancho se vuelve ilegible: lo acotamos. */
.sp-hero--sin-imagen .sp-hero__titulo {
	margin-left: auto;
	margin-right: auto;
	max-width: 20ch;
}

/* ------------------------------------------------------------------ *
 * 7. Frases transversales
 * ------------------------------------------------------------------ */

.sp-frases {
	overflow: hidden;
	padding: 26px 0;
}

.sp-frases--celeste { background: var(--sp-celeste, #0a9bd4); color: #fff; }
.sp-frases--oscuro { background: var(--sp-oscuro, #0d3b52); color: #fff; }
.sp-frases--claro { background: var(--sp-fondo, #f2f9fd); color: var(--sp-titulo, #08557a); }

.sp-frases__destacada {
	font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 auto 18px;
	max-width: var(--sp-ancho, 1160px);
	padding: 0 24px;
	text-align: center;
	text-transform: uppercase;
}

.sp-frases__pista {
	display: flex;
	width: max-content;
	animation: sp-desfile 42s linear infinite;
}

.sp-frases:hover .sp-frases__pista {
	animation-play-state: paused;
}

.sp-frases__grupo {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-frases__item {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	padding: 0 28px;
	position: relative;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Los separadores alternan naranja y verde: el "corte" pedido. */
.sp-frases__item::after {
	background: var(--sp-naranja, #ef7d00);
	border-radius: 50%;
	content: "";
	height: 7px;
	position: absolute;
	right: -3px;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
}

.sp-frases__item:nth-child(even)::after {
	background: var(--sp-verde, #4ea72e);
}

@keyframes sp-desfile {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Frases verticales en los bordes: sólo cuando hay margen libre. */
.sp-borde {
	display: none;
}

@media (min-width: 1560px) {
	.sp-borde {
		display: block;
	}

	.sp-borde__frase {
		color: var(--sp-celeste-55, #7fcbec);
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.36em;
		position: fixed;
		text-transform: uppercase;
		top: 50%;
		white-space: nowrap;
		writing-mode: vertical-rl;
		z-index: 5;
		pointer-events: none;
	}

	.sp-borde__frase--izq {
		left: 22px;
		transform: translateY(-50%) rotate(180deg);
	}

	.sp-borde__frase--der {
		right: 22px;
		transform: translateY(-50%);
	}
}

/* ------------------------------------------------------------------ *
 * 8. Cifras
 * ------------------------------------------------------------------ */

.sp-cifras--suave {
	background: var(--sp-fondo, #f2f9fd);
}



.sp-cifras__lista {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	text-align: center;
}

/* El hito principal de la agencia: más grande y con el corte naranja debajo. */
.sp-cifra--hito {
	grid-column: 1 / -1;
	padding-bottom: 28px;
	position: relative;
}

.sp-cifra--hito::after {
	background: var(--sp-naranja, #ef7d00);
	border-radius: 2px;
	bottom: 8px;
	content: "";
	height: 4px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 56px;
}

.sp-cifra--hito .sp-cifra__numero {
	font-size: clamp(3.4rem, 2.2rem + 5vw, 6rem);
}

.sp-cifra--hito .sp-cifra__etiqueta {
	font-size: 1.05rem;
	letter-spacing: 0.1em;
}

.sp-cifra--hito .sp-cifra__aclaracion {
	font-size: 0.95rem;
}

.sp-section--foto .sp-cifra--hito::after {
	background: var(--sp-naranja, #ef7d00);
}

.sp-cifra__numero {
	align-items: baseline;
	color: var(--sp-celeste, #0a9bd4);
	display: flex;
	font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
	font-weight: 800;
	gap: 2px;
	justify-content: center;
	line-height: 1;
	margin: 0 0 10px;
}

.sp-cifra__prefijo {
	color: var(--sp-naranja, #ef7d00);
	font-size: 0.6em;
}

.sp-cifra__sufijo {
	font-size: 0.5em;
	margin-left: 4px;
}

.sp-cifra__etiqueta {
	color: var(--sp-titulo, #08557a);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.sp-cifra__aclaracion {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.85rem;
	margin: 4px 0 0;
}

/* ------------------------------------------------------------------ *
 * 9. Grillas y tarjetas
 * ------------------------------------------------------------------ */

.sp-grid {
	display: grid;
	gap: 32px;
}

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

.sp-grid + .sp-beneficios__grupo {
	margin-top: 48px;
}

.sp-card {
	background: #fff;
	border: 1px solid var(--sp-celeste-20, #cfeaf7);
	border-radius: var(--sp-radio, 4px);
	display: flex;
	flex-direction: column;
	padding: 30px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sp-card:hover {
	border-color: var(--sp-celeste-55, #7fcbec);
	box-shadow: 0 14px 34px rgba(10, 85, 122, 0.08);
	transform: translateY(-2px);
}

.sp-card__titulo {
	color: var(--sp-titulo, #08557a);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 12px;
}

.sp-card__titulo a {
	color: inherit;
	text-decoration: none;
}

.sp-card__titulo a:hover {
	color: var(--sp-celeste, #0a9bd4);
}

.sp-card__texto {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.98rem;
	margin-bottom: 20px;
}

.sp-card .sp-more {
	margin-top: auto;
}

/* Servicios y beneficios */
.sp-servicio__icono,
.sp-beneficio__icono {
	align-items: center;
	background: var(--sp-celeste-10, #e7f5fc);
	border-radius: 50%;
	color: var(--sp-celeste, #0a9bd4);
	display: inline-flex;
	height: 54px;
	justify-content: center;
	margin-bottom: 20px;
	width: 54px;
}

.sp-servicio__icono .sp-icon,
.sp-beneficio__icono .sp-icon {
	height: 26px;
	width: 26px;
}

.sp-beneficio--destacado {
	border-color: var(--sp-naranja, #ef7d00);
}

.sp-beneficio--destacado .sp-beneficio__icono {
	background: var(--sp-naranja, #ef7d00);
	color: #fff;
}

.sp-beneficio__condiciones {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.82rem;
	margin-bottom: 16px;
}

.sp-beneficios__grupo {
	color: var(--sp-titulo, #08557a);
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin: 0 0 24px;
	text-transform: uppercase;
}

.sp-beneficios__grupo::after {
	background: var(--sp-verde, #4ea72e);
	content: "";
	display: block;
	height: 3px;
	margin-top: 10px;
	width: 34px;
}

/* Planes */
.sp-plan {
	position: relative;
}

.sp-plan--destacado {
	border-color: var(--sp-celeste, #0a9bd4);
	box-shadow: 0 18px 40px rgba(10, 85, 122, 0.12);
}

.sp-plan__etiqueta {
	background: var(--sp-naranja, #ef7d00);
	border-radius: 999px;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	left: 30px;
	letter-spacing: 0.1em;
	padding: 5px 14px;
	position: absolute;
	text-transform: uppercase;
	top: -13px;
}

.sp-plan__icono {
	color: var(--sp-celeste, #0a9bd4);
	display: block;
	margin-bottom: 16px;
}

.sp-plan__icono .sp-icon {
	height: 32px;
	width: 32px;
}

.sp-plan__precio {
	align-items: baseline;
	border-bottom: 1px solid var(--sp-celeste-20, #cfeaf7);
	border-top: 1px solid var(--sp-celeste-20, #cfeaf7);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 22px;
	padding: 18px 0;
}

.sp-plan__desde {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.82rem;
	text-transform: uppercase;
}

.sp-plan__importe {
	color: var(--sp-titulo, #08557a);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
}

.sp-plan__importe--consultar {
	font-size: 1.15rem;
}

.sp-plan__periodo {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.85rem;
}

.sp-plan__lista {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.sp-plan__lista li {
	align-items: flex-start;
	display: flex;
	font-size: 0.96rem;
	gap: 10px;
	margin-bottom: 10px;
}

.sp-icon--check {
	color: var(--sp-verde, #4ea72e);
	flex: 0 0 auto;
	height: 1.15em;
	margin-top: 0.2em;
	width: 1.15em;
}

.sp-plan__excluye {
	font-size: 0.9rem;
	margin-bottom: 22px;
}

.sp-plan__excluye summary {
	color: var(--sp-suave, #7b8c95);
	cursor: pointer;
	font-weight: 700;
}

.sp-plan__excluye ul {
	color: var(--sp-suave, #7b8c95);
	margin: 10px 0 0;
	padding-left: 20px;
}

.sp-plan__accion {
	margin: auto 0 0;
}

.sp-plan__accion .sp-btn {
	width: 100%;
}

/* Noticias y tips */
.sp-noticia__figura,
.sp-tip__figura {
	display: block;
	margin: -30px -30px 22px;
	overflow: hidden;
}

.sp-noticia__figura img,
.sp-tip__figura img {
	display: block;
	height: 200px;
	object-fit: cover;
	transition: transform 0.4s ease;
	width: 100%;
}

.sp-card:hover .sp-noticia__figura img,
.sp-card:hover .sp-tip__figura img {
	transform: scale(1.04);
}

/* El tip se despliega dentro de su tarjeta: nada de saltar a otra pantalla
   por tres renglones de texto. */
.sp-tip__abrir {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	margin-top: auto;
	padding: 0;
	text-align: left;
}

.sp-tip.is-abierto .sp-more__arrow {
	transform: rotate(90deg);
}

.sp-tip__panel {
	border-top: 1px solid var(--sp-celeste-20, #ceebf6);
	color: var(--sp-texto, #3a4a52);
	font-size: 0.98rem;
	margin-top: 16px;
	padding-top: 16px;
}

.sp-tip__panel p:last-child {
	margin-bottom: 0;
}

.sp-section--foto .sp-tip__panel {
	border-top-color: rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.85);
}

.sp-tip__etiqueta {
	align-self: flex-start;
	background: var(--sp-celeste-10, #e7f5fc);
	border-radius: 999px;
	color: var(--sp-titulo, #08557a);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	margin-bottom: 12px;
	padding: 4px 12px;
	text-transform: uppercase;
}

/* Sucursales */
.sp-sucursal__datos {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.sp-sucursal__datos li {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.sp-sucursal__datos .sp-icon {
	color: var(--sp-celeste, #0a9bd4);
	flex: 0 0 auto;
	margin-top: 0.2em;
}

.sp-sucursal__franja {
	display: block;
}

.sp-sucursal__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: auto 0 0;
}

/* Testimonios */
/* Testimonios.

   Altura pareja para que la fila quede prolija, pero con el contenido
   centrado: así el aire sobrante de una opinión corta se reparte arriba y
   abajo en vez de acumularse al pie, que era lo que estiraba las tarjetas. */
.sp-testimonios .sp-grid {
	gap: 24px;
}

.sp-testimonio {
	justify-content: center;
	overflow: hidden;
	padding: 26px 26px 22px;
	position: relative;
}

/* La comilla va detrás del texto, en serif para que se lea como comilla y no
   como dos barras, y abajo a la derecha para no chocar con las estrellas. */
.sp-testimonio::before {
	bottom: -34px;
	color: var(--sp-celeste-10, #e7f5fb);
	content: "\201D";
	font-family: Georgia, "Times New Roman", serif;
	font-size: 8rem;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	right: 12px;
}

.sp-testimonio__puntaje {
	color: var(--sp-naranja, #ef7d00);
	display: flex;
	gap: 3px;
	margin-bottom: 16px;
	position: relative;
}

.sp-testimonio__puntaje .sp-icon {
	height: 0.95em;
	width: 0.95em;
}

.sp-testimonio__texto {
	border: 0;
	color: var(--sp-texto, #3a4a52);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0 0 18px;
	padding: 0;
	position: relative;
	quotes: none;
}

.sp-testimonio__texto p:last-child {
	margin-bottom: 0;
}

/* El pie va pegado al texto, no empujado al fondo de la tarjeta. */
.sp-testimonio__pie {
	align-items: center;
	border-top: 1px solid var(--sp-celeste-20, #ceebf6);
	display: flex;
	gap: 12px;
	margin-top: 0;
	padding-top: 16px;
	position: relative;
}

.sp-testimonio__pie > span:last-child {
	line-height: 1.3;
	min-width: 0;
}

.sp-testimonio__pie strong {
	display: block;
	font-size: 0.95rem;
}

.sp-testimonio__pie strong {
	color: var(--sp-titulo, #08557a);
}

/* Sin foto, las iniciales evitan el hueco raro al costado del nombre. */
.sp-testimonio__inicial {
	align-items: center;
	background: var(--sp-celeste-10, #e7f5fb);
	border-radius: 50%;
	color: var(--sp-titulo, #08557a);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.95rem;
	font-weight: 800;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.sp-testimonios--vacia {
	padding: 32px 0;
}

.sp-section--foto .sp-testimonio::before {
	color: rgba(255, 255, 255, 0.14);
}

.sp-section--foto .sp-testimonio__pie {
	border-top-color: rgba(255, 255, 255, 0.22);
}

.sp-section--foto .sp-testimonio__pie strong,
.sp-section--foto .sp-testimonio__inicial {
	color: #fff;
}

.sp-section--foto .sp-testimonio__inicial {
	background: rgba(255, 255, 255, 0.16);
}

.sp-testimonio__foto img {
	border-radius: 50%;
	display: block;
	height: 48px;
	object-fit: cover;
	width: 48px;
}

.sp-testimonio__cargo {
	color: var(--sp-suave, #7b8c95);
	display: block;
	font-size: 0.8rem;
}

/* ------------------------------------------------------------------ *
 * 10. Autogestión
 * ------------------------------------------------------------------ */

.sp-autogestion__inner {
	background: var(--sp-fondo, #f2f9fd);
	border-radius: var(--sp-radio, 4px);
	display: grid;
	gap: 48px;
	grid-template-columns: 5fr 7fr;
	padding: 56px;
}

.sp-autogestion__titulo {
	color: var(--sp-titulo, #08557a);
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}

.sp-autogestion__texto {
	color: var(--sp-suave, #7b8c95);
	margin-bottom: 26px;
}

.sp-autogestion__lista {
	align-content: start;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Los trámites son un listado, no botones: sin enlace tampoco va el efecto al
   pasar por encima, que prometía algo para tocar. */
.sp-autogestion__item {
	align-items: center;
	background: #fff;
	border: 1px solid var(--sp-celeste-20, #cfeaf7);
	border-radius: var(--sp-radio, 4px);
	color: var(--sp-titulo, #08557a);
	display: flex;
	font-size: 0.95rem;
	font-weight: 600;
	gap: 14px;
	padding: 16px 18px;
}

.sp-autogestion__item .sp-icon {
	color: var(--sp-celeste, #0a9bd4);
	flex: 0 0 auto;
	height: 22px;
	width: 22px;
}

/* ------------------------------------------------------------------ *
 * 11. Cotizador
 * ------------------------------------------------------------------ */

.sp-cotizador--suave {
	background: var(--sp-fondo, #f2f9fd);
}

.sp-cotizador--oscuro {
	background: var(--sp-oscuro, #0d3b52);
	color: #fff;
}

.sp-cotizador__inner {
	display: grid;
	gap: 56px;
	grid-template-columns: 5fr 7fr;
}

.sp-cotizador--compacto .sp-cotizador__inner {
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: 720px;
}

.sp-cotizador__titulo {
	color: var(--sp-titulo, #08557a);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 300;
	line-height: 1.15;
	margin: 0;
}

.sp-cotizador__frase {
	color: var(--sp-naranja, #ef7d00);
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sp-cotizador__texto {
	color: var(--sp-suave, #7b8c95);
}

.sp-cotizador__contacto {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.sp-cotizador__contacto li {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}

.sp-cotizador__contacto .sp-icon {
	color: var(--sp-verde, #4ea72e);
}

.sp-form {
	background: #fff;
	border: 1px solid var(--sp-celeste-20, #cfeaf7);
	border-radius: var(--sp-radio, 4px);
	padding: 36px;
}

/* Aviso del plan elegido, arriba del formulario. */
.sp-form__plan {
	align-items: center;
	background: var(--sp-celeste-10, #e7f5fb);
	border-radius: var(--sp-radio, 4px);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	padding: 12px 16px;
}

.sp-form__plan-etiqueta {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sp-form__plan [data-sp-plan-nombre] {
	color: var(--sp-titulo, #08557a);
	font-weight: 700;
}

.sp-form__plan-quitar {
	background: none;
	border: 0;
	color: var(--sp-suave, #7b8c95);
	cursor: pointer;
	font: inherit;
	font-size: 0.8rem;
	margin-left: auto;
	padding: 0;
	text-decoration: underline;
}

.sp-form__plan-quitar:hover {
	color: var(--sp-naranja, #ef7d00);
}

.sp-form__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}

.sp-form__campo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}

.sp-form__campo--ancho {
	grid-column: 1 / -1;
}

.sp-form__campo label {
	color: var(--sp-titulo, #08557a);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sp-form__campo input,
.sp-form__campo select,
.sp-form__campo textarea {
	background: #fff;
	border: 1px solid var(--sp-celeste-20, #cfeaf7);
	border-radius: var(--sp-radio, 4px);
	/* Color explícito, no heredado: el formulario es una tarjeta blanca y puede
	   caer dentro de una sección sobre foto, donde el texto va en blanco. Ahí
	   heredar dejaba lo que escribías en blanco sobre blanco. */
	color: var(--sp-texto, #3a4a52);
	font: inherit;
	padding: 12px 14px;
	width: 100%;
}

.sp-form__campo input:focus,
.sp-form__campo select:focus,
.sp-form__campo textarea:focus {
	border-color: var(--sp-celeste, #0a9bd4);
	outline: 2px solid var(--sp-celeste-35, #b0dff3);
	outline-offset: 1px;
}

.sp-form__campo .is-invalido {
	border-color: #c0392b;
}

.sp-form__consentimiento {
	font-size: 0.88rem;
	margin: 22px 0 0;
}

.sp-form__consentimiento label {
	align-items: flex-start;
	color: var(--sp-suave, #7b8c95);
	display: flex;
	gap: 10px;
}

.sp-form__consentimiento input {
	margin-top: 4px;
}

/* La trampa de miel no se ve, pero sigue existiendo para los bots. */
.sp-form__trampa {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.sp-form__enviar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 26px 0 0;
}

.sp-form__nota {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.85rem;
}

.sp-form__aviso {
	font-size: 0.95rem;
	margin: 16px 0 0;
	min-height: 1.2em;
}

.sp-form.is-ok .sp-form__aviso {
	color: var(--sp-verde, #4ea72e);
	font-weight: 700;
}

.sp-form.is-error .sp-form__aviso {
	color: #c0392b;
	font-weight: 700;
}

.sp-form.is-enviando {
	opacity: 0.75;
}

/* ------------------------------------------------------------------ *
 * 12. Filtros, pestañas y acordeón
 * ------------------------------------------------------------------ */

.sp-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.sp-filtros__btn,
.sp-tabs__btn {
	background: transparent;
	border: 1px solid var(--sp-celeste-20, #cfeaf7);
	border-radius: 999px;
	color: var(--sp-titulo, #08557a);
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 9px 20px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sp-filtros__btn:hover,
.sp-tabs__btn:hover {
	border-color: var(--sp-celeste, #0a9bd4);
}

.sp-filtros__btn.is-activo,
.sp-tabs__btn.is-activo {
	background: var(--sp-celeste, #0a9bd4);
	border-color: var(--sp-celeste, #0a9bd4);
	color: #fff;
}

.sp-tabs__lista {
	border-bottom: 2px solid var(--sp-celeste-10, #e7f5fc);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
	padding-bottom: 14px;
}

.sp-faq__lista {
	border-top: 1px solid var(--sp-celeste-20, #cfeaf7);
	max-width: 860px;
}

.sp-faq__item {
	border-bottom: 1px solid var(--sp-celeste-20, #cfeaf7);
}

.sp-faq__pregunta {
	align-items: center;
	background: none;
	border: 0;
	color: var(--sp-titulo, #08557a);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	gap: 20px;
	justify-content: space-between;
	padding: 22px 0;
	text-align: left;
	width: 100%;
}

.sp-faq__mas {
	flex: 0 0 auto;
	height: 14px;
	position: relative;
	width: 14px;
}

.sp-faq__mas::before,
.sp-faq__mas::after {
	background: var(--sp-naranja, #ef7d00);
	content: "";
	position: absolute;
	transition: transform 0.2s ease;
}

.sp-faq__mas::before {
	height: 2px;
	left: 0;
	top: 6px;
	width: 14px;
}

.sp-faq__mas::after {
	height: 14px;
	left: 6px;
	top: 0;
	width: 2px;
}

.sp-faq__item.is-abierto .sp-faq__mas::after {
	transform: scaleY(0);
}

.sp-faq__respuesta {
	color: var(--sp-suave, #7b8c95);
	padding: 0 0 24px;
	max-width: 68ch;
}

.sp-faq__respuesta p:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------------------ *
 * 13. Nosotros
 * ------------------------------------------------------------------ */

.sp-nosotros--suave {
	background: var(--sp-fondo, #f2f9fd);
}

.sp-nosotros__inner {
	align-items: start;
	display: grid;
	gap: 56px;
	grid-template-columns: 7fr 5fr;
}

.sp-nosotros__titulo {
	color: var(--sp-titulo, #08557a);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
	font-weight: 300;
	line-height: 1.15;
	margin: 0;
}

.sp-nosotros__cuerpo {
	color: var(--sp-texto, #3a4a52);
	max-width: 62ch;
}

.sp-nosotros__cuerpo p:last-child {
	margin-bottom: 0;
}

.sp-nosotros__hitos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.sp-nosotros__hitos li {
	border-left: 3px solid var(--sp-celeste-35, #a9dcf0);
	padding-left: 16px;
}

.sp-nosotros__hitos li:nth-child(2n) {
	border-left-color: var(--sp-naranja, #ef7d00);
}

.sp-nosotros__hitos li:nth-child(3n) {
	border-left-color: var(--sp-verde, #4ea72e);
}

.sp-nosotros__hito-dato {
	color: var(--sp-titulo, #08557a);
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
}

.sp-nosotros__hito-texto {
	color: var(--sp-suave, #7b8c95);
	font-size: 0.88rem;
}

.sp-nosotros__aparte {
	position: sticky;
	top: 24px;
}

.sp-nosotros__foto {
	border-radius: var(--sp-radio, 4px);
	display: block;
	height: auto;
	margin-bottom: 20px;
	width: 100%;
}

.sp-nosotros__foto:last-child {
	margin-bottom: 0;
}

/* Con varias fotos la columna pasa a ser una galería: se cruzan solas cada
   tantos segundos y quien quiera mirar una en particular tiene flechas y
   puntos. El marco es fijo para que la sección no salte de alto al cambiar. */
.sp-galeria {
	margin-bottom: 20px;
}

.sp-galeria__marco {
	aspect-ratio: 4 / 5;
	border-radius: var(--sp-radio, 4px);
	overflow: hidden;
	position: relative;
}

.sp-galeria__foto {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 700ms ease;
}

.sp-galeria__foto.is-activa {
	opacity: 1;
}

.sp-galeria__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Las flechas se ven siempre: en el teléfono no hay hover que las descubra. */
.sp-galeria__flecha {
	align-items: center;
	background: rgba(255, 255, 255, 0.82);
	border: 0;
	border-radius: 50%;
	color: var(--sp-titulo, #08557a);
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background 160ms ease;
	width: 40px;
}

.sp-galeria__flecha:hover {
	background: #fff;
}

.sp-galeria__flecha svg {
	height: 22px;
	width: 22px;
}

.sp-galeria__flecha--antes {
	left: 12px;
}

.sp-galeria__flecha--despues {
	right: 12px;
}

.sp-galeria__puntos {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 14px;
}

.sp-galeria__punto {
	background: var(--sp-celeste-35, #a9dcf0);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 8px;
	padding: 0;
	position: relative;
	transition: background 160ms ease, width 160ms ease;
	width: 8px;
}

/* El punto se ve chico pero se toca cómodo. */
.sp-galeria__punto::after {
	content: "";
	inset: -14px -6px;
	position: absolute;
}

.sp-galeria__punto.is-activo {
	background: var(--sp-celeste, #0a9bd4);
	width: 22px;
}

.sp-galeria__flecha:focus-visible,
.sp-galeria__punto:focus-visible {
	outline: 2px solid var(--sp-celeste, #0a9bd4);
	outline-offset: 3px;
}

/* Si el sistema pide menos movimiento, la foto cambia sin cruzarse. */
@media (prefers-reduced-motion: reduce) {
	.sp-galeria__foto {
		transition: none;
	}
}

/* Acceso directo al chat: un solo destino, sin pasos intermedios. */
.sp-root .sp-wa {
	align-items: center;
	background: #25d366;
	border-radius: var(--sp-radio, 4px);
	color: #fff;
	display: flex;
	gap: 16px;
	padding: 20px 24px;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.sp-root .sp-wa:hover {
	background: #1eb455;
	transform: translateY(-2px);
}

.sp-wa--telefono {
	background: var(--sp-celeste, #0a9bd4);
}

.sp-root .sp-wa--telefono:hover {
	background: var(--sp-titulo, #08557a);
}

.sp-wa__icono {
	align-items: center;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 auto;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.sp-wa__icono .sp-icon {
	height: 26px;
	width: 26px;
}

.sp-wa__texto strong {
	display: block;
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.sp-wa__texto small {
	display: block;
	font-size: 0.85rem;
	opacity: 0.9;
}

/* Aviso reservado a quien administra el sitio. */
.sp-aviso-admin {
	background: #fff8e5;
	border: 1px dashed #e0b64a;
	border-radius: var(--sp-radio, 4px);
	color: #7a5b12;
	font-size: 0.9rem;
	margin: 0;
	padding: 16px 18px;
}

.sp-aviso-admin--chico {
	font-size: 0.8rem;
	margin-top: 12px;
	max-width: 42ch;
}

.sp-contacto--vacio {
	padding: 32px 0;
}

/* ------------------------------------------------------------------ *
 * 14. Logos, contacto y CTA
 * ------------------------------------------------------------------ */

.sp-logos__lista {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 36px 16px;
	justify-content: center;
}

/* Cada logo ocupa un espacio igual, sin importar cuán ancho sea su archivo:
   si no, el más apaisado empuja su centro más lejos y el ritmo se rompe. */
.sp-logos__item {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	width: calc(var(--sp-logo-alto, 96px) * 2.6);
}

/* Los logos van a color: son la prueba del respaldo, no un adorno.
   Altura fija y ancho automático: cada archivo viene con su propio tamaño y
   así todos quedan ópticamente parejos, sin deformarse. */
.sp-logos__item img {
	display: block;
	height: calc(var(--sp-logo-alto, 96px) * var(--sp-logo-escala, 1));
	max-width: 100%;
	object-fit: contain;
	transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	width: auto;
}

.sp-logos__item:hover img {
	transform: scale(1.03);
}

/* Con grises="si" se apagan y sólo reviven al pasar por encima. */
.sp-logos--grises .sp-logos__item img {
	filter: grayscale(1);
	opacity: 0.65;
}

.sp-logos--grises .sp-logos__item:hover img {
	filter: none;
	opacity: 1;
}

.sp-logos__texto {
	color: var(--sp-titulo, #08557a);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sp-contacto {
	padding: 64px 0 28px;
}

.sp-contacto--oscuro {
	background: var(--sp-oscuro, #0d3b52);
	color: rgba(255, 255, 255, 0.78);
}

.sp-contacto--claro {
	background: var(--sp-fondo, #f2f9fd);
}

.sp-contacto__inner {
	align-items: start;
	display: grid;
	gap: 40px 56px;
	grid-template-columns: 4fr 5fr auto;
}

/* Logo del cierre de página. */
.sp-contacto__logo {
	display: inline-block;
	margin-bottom: 6px;
}

.sp-contacto__logo img {
	display: block;
	height: auto;
	max-height: 56px;
	max-width: 220px;
	object-fit: contain;
	width: auto;
}

/* El logo de la firma sólo existe a color sobre blanco: no hay versión en una
   tinta para fondo oscuro. La placa blanca lo deja verse igual que arriba, que
   es lo que importa. Cuando llegue el logo plano, se saca la placa. */
.sp-contacto--oscuro .sp-contacto__logo {
	background: #fff;
	border-radius: var(--sp-radio, 4px);
	padding: 12px 18px;
}

.sp-contacto__nombre {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin: 0;
}

.sp-contacto--oscuro .sp-contacto__nombre {
	color: #fff;
}

.sp-contacto--claro .sp-contacto__nombre {
	color: var(--sp-titulo, #08557a);
}

.sp-contacto__lema {
	font-size: 0.95rem;
	margin: 6px 0 0;
	max-width: 32ch;
}

.sp-contacto__marca .sp-rule {
	margin-bottom: 0;
}

.sp-contacto__datos {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-contacto__datos li {
	align-items: flex-start;
	display: flex;
	font-size: 0.95rem;
	gap: 12px;
}

.sp-contacto__datos .sp-icon {
	flex: 0 0 auto;
	margin-top: 0.15em;
	opacity: 0.75;
}

.sp-contacto__franja {
	display: block;
}

.sp-contacto--oscuro .sp-contacto__datos a {
	color: rgba(255, 255, 255, 0.9);
}

.sp-contacto--oscuro .sp-contacto__datos a:hover {
	color: #fff;
}

.sp-contacto__accion {
	align-self: center;
}

/* El mapa cierra la página: ancho completo de la columna, sin marco. */
.sp-mapa {
	border-radius: var(--sp-radio, 4px);
	margin-top: 40px;
	overflow: hidden;
}

.sp-mapa__marco {
	border: 0;
	display: block;
	height: 340px;
	width: 100%;
	/* Sobre el azul oscuro, un mapa a plena luz encandila. */
	filter: saturate(0.9);
}

@media (max-width: 640px) {
	.sp-mapa__marco {
		height: 260px;
	}
}

.sp-contacto__pie {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	gap: 8px 24px;
	justify-content: space-between;
	margin-top: 40px;
	opacity: 0.7;
	padding-top: 20px;
}

.sp-contacto--claro .sp-contacto__pie {
	border-top-color: var(--sp-celeste-20, #ceebf6);
}

.sp-contacto__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sp-cta {
	padding: 56px 0;
}

.sp-cta--celeste { background: var(--sp-celeste, #0a9bd4); }
.sp-cta--naranja { background: var(--sp-naranja, #ef7d00); }
.sp-cta--verde { background: var(--sp-verde, #4ea72e); }
.sp-cta--oscuro { background: var(--sp-oscuro, #0d3b52); }

.sp-cta__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	justify-content: space-between;
}

.sp-cta__titulo {
	color: #fff;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
	font-weight: 800;
	margin: 0;
}

.sp-cta__texto {
	color: rgba(255, 255, 255, 0.9);
	margin: 8px 0 0;
}

/* ------------------------------------------------------------------ *
 * 14. Botón flotante
 * ------------------------------------------------------------------ */

/* Botón flotante de WhatsApp.

   Círculo con el glifo de la marca; la etiqueta se despliega al pasar por
   encima, así no ocupa lugar de más mientras la persona lee la página.
   El verde es el oficial de WhatsApp: cualquier otro verde lo vuelve
   irreconocible, que es justo lo que se busca evitar en un botón así. */

/* Los dos accesos viven en la misma columna, abajo a la derecha: el de
   WhatsApp abajo del todo, donde cae el pulgar, y el de llamar arriba. */
.sp-root.sp-flotantes {
	align-items: flex-end;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: fixed;
	right: 24px;
	z-index: 60;
}

.sp-root .sp-flotante {
	--sp-whatsapp: #25d366;

	align-items: center;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	gap: 0;
	height: 60px;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-decoration: none;
	transition: gap 0.25s ease, padding 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	width: 60px;
}

.sp-root .sp-flotante--wa {
	background: var(--sp-whatsapp);
	box-shadow: 0 6px 16px rgba(37, 211, 102, 0.32), 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Llamar va en el azul de la casa: se distingue de WhatsApp de un vistazo. */
.sp-root .sp-flotante--tel {
	background: var(--sp-titulo, #08557a);
	box-shadow: 0 6px 16px rgba(8, 85, 122, 0.32), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.sp-flotante .sp-icon {
	flex: 0 0 auto;
	height: 30px;
	width: 30px;
}

.sp-flotante__texto {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 0.25s ease, opacity 0.2s ease;
	white-space: nowrap;
}

/* Al acercarse, el botón se abre y dice qué hace. */
.sp-root .sp-flotante:hover,
.sp-root .sp-flotante:focus-visible {
	color: #fff;
	gap: 12px;
	padding: 0 24px 0 20px;
	width: auto;
}

.sp-root .sp-flotante--wa:hover,
.sp-root .sp-flotante--wa:focus-visible {
	background: #1eb455;
	box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4), 0 3px 8px rgba(0, 0, 0, 0.16);
}

.sp-root .sp-flotante--tel:hover,
.sp-root .sp-flotante--tel:focus-visible {
	background: #0a9bd4;
	box-shadow: 0 10px 24px rgba(10, 155, 212, 0.4), 0 3px 8px rgba(0, 0, 0, 0.16);
}

.sp-root .sp-flotante:hover .sp-flotante__texto,
.sp-root .sp-flotante:focus-visible .sp-flotante__texto {
	max-width: 220px;
	opacity: 1;
}

/* Un latido suave al entrar, tres veces y para: llama la atención sin acosar.
   Sólo en WhatsApp: dos círculos latiendo a la vez es demasiado. */
.sp-flotante--wa::before {
	animation: sp-latido 2.4s ease-out 3;
	border: 2px solid var(--sp-whatsapp);
	border-radius: 999px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

@keyframes sp-latido {
	0% { opacity: 0.7; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
	.sp-flotante::before {
		animation: none;
	}
}

@media (max-width: 820px) {
	.sp-root.sp-flotantes {
		bottom: 18px;
		gap: 10px;
		right: 18px;
	}

	.sp-root .sp-flotante {
		height: 56px;
		width: 56px;
	}

	/* En pantalla táctil no hay "pasar por encima": el círculo se queda solo. */
	.sp-root .sp-flotante:hover {
		gap: 0;
		padding: 0;
		width: 56px;
	}

	.sp-root .sp-flotante:hover .sp-flotante__texto {
		max-width: 0;
		opacity: 0;
	}
}

/* ------------------------------------------------------------------ *
 * 15. Fichas y archivos
 * ------------------------------------------------------------------ */

.sp-single__cabecera,
.sp-archive__cabecera {
	background: var(--sp-fondo, #f2f9fd);
	padding: 64px 0;
}

/* Salida visible: nadie debería quedar encerrado en una pantalla interna. */
.sp-root .sp-volver {
	align-items: center;
	color: var(--sp-suave, #7b8c95);
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.08em;
	margin-bottom: 20px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.15s ease;
}

.sp-root .sp-volver:hover {
	color: var(--sp-celeste, #0a9bd4);
}

.sp-volver__flecha {
	display: inline-flex;
	transform: rotate(180deg);
	transition: transform 0.15s ease;
}

.sp-volver__flecha .sp-icon {
	height: 1.05em;
	width: 1.05em;
}

.sp-root .sp-volver:hover .sp-volver__flecha {
	transform: rotate(180deg) translateX(3px);
}

.sp-single__icono {
	color: var(--sp-celeste, #0a9bd4);
	display: block;
	margin-bottom: 16px;
}

.sp-single__icono .sp-icon {
	height: 38px;
	width: 38px;
}

.sp-single__titulo,
.sp-archive__titulo {
	color: var(--sp-titulo, #08557a);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
	font-weight: 300;
	line-height: 1.1;
	margin: 0;
}

.sp-single__resumen {
	color: var(--sp-suave, #7b8c95);
	font-size: 1.08rem;
	margin: 0;
	max-width: 46em;
}

.sp-single__cuerpo {
	display: grid;
	gap: 56px;
	grid-template-columns: 7fr 5fr;
	padding-bottom: 72px;
	padding-top: 64px;
}

.sp-single__subtitulo {
	color: var(--sp-titulo, #08557a);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	margin: 36px 0 18px;
	text-transform: uppercase;
}

.sp-single__excluye {
	color: var(--sp-suave, #7b8c95);
	padding-left: 20px;
}

/* Fichas sin columna lateral: el texto solo, centrado y con medida cómoda. */
.sp-single__cuerpo--simple {
	grid-template-columns: 1fr;
	max-width: 780px;
}

.sp-single__foto {
	border-radius: var(--sp-radio, 4px);
	height: auto;
	margin-bottom: 28px;
	width: 100%;
}

.sp-single__lateral {
	align-self: start;
	position: sticky;
	top: 24px;
}

.sp-archive {
	padding-bottom: 72px;
}

.sp-archive .sp-grid {
	margin-top: 56px;
}

/* ------------------------------------------------------------------ *
 * 16. Adaptación a pantallas chicas
 * ------------------------------------------------------------------ */

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

	.sp-autogestion__inner,
	.sp-cotizador__inner,
	.sp-nosotros__inner,
	.sp-single__cuerpo {
		grid-template-columns: 1fr;
	}

	.sp-nosotros__aparte {
		position: static;
	}

	.sp-contacto__inner {
		grid-template-columns: 1fr 1fr;
	}

	.sp-contacto__accion {
		grid-column: 1 / -1;
	}

	.sp-single__lateral {
		position: static;
	}
}

@media (max-width: 820px) {
	.sp-section {
		padding: 60px 0;
	}

	.sp-hero {
		grid-template-columns: 1fr;
	}

	.sp-hero__panel {
		padding: 56px 24px;
	}

	.sp-hero__contenido {
		margin: 0;
		max-width: none;
		padding-right: 0;
	}

	.sp-hero__figura {
		min-height: 300px;
		order: -1;
	}

	.sp-hero__figura img,
	.sp-hero--invertido .sp-hero__figura img {
		clip-path: none;
	}

	.sp-accesos__lista {
		justify-content: flex-start;
	}

	.sp-autogestion__inner {
		padding: 36px 24px;
	}

	/* En pantalla chica los botones son sólo el círculo con el ícono. */
	.sp-flotante__texto {
		display: none;
	}
}

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

	.sp-form__grid,
	.sp-contacto__inner {
		grid-template-columns: 1fr;
	}

	.sp-contacto__pie {
		justify-content: flex-start;
	}

	.sp-form {
		padding: 26px 22px;
	}

	.sp-card {
		padding: 26px 22px;
	}

	.sp-noticia__figura,
	.sp-tip__figura {
		margin: -26px -22px 20px;
	}

	.sp-logos__item img {
		height: auto;
		max-height: calc(var(--sp-logo-alto, 96px) * var(--sp-logo-escala, 1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-root *,
	.sp-root *::before,
	.sp-root *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.sp-frases__pista {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}

	.sp-frases__grupo[aria-hidden="true"] {
		display: none;
	}
}