/* ==========================================================================
   Servicios Polares — tokens y componentes compartidos
   --------------------------------------------------------------------------
   Valores tomados del sitio aprobado (docs/REFERENCIA-VISUAL.md), no de una
   paleta nueva. Los colores y tipografías editables por el cliente siguen
   viviendo en el kit global de Elementor; aquí solo hay tokens de los
   componentes que el kit no cubre y el CSS que antes estaba pegado en
   widgets. Todo selector va prefijado con sp- o acotado a su componente.
   ========================================================================== */

:root {
	/* Colores del kit (referencia; la fuente de verdad es el kit) */
	--sp-color-primario: var(--e-global-color-primary, #01B8D4);
	--sp-color-secundario: var(--e-global-color-secondary, #1686CB);
	--sp-color-texto: var(--e-global-color-text, #1F2933);
	--sp-color-acento: var(--e-global-color-accent, #02C2DC);
	--sp-color-cielo: var(--e-global-color-8de20ca, #0C87DA);

	/* Colores medidos fuera del kit */
	--sp-color-marino: #062B4F;
	--sp-color-marino-a88: rgba(6, 43, 79, 0.88);
	--sp-color-marino-a95: rgba(6, 43, 79, 0.95);
	--sp-color-cian-a14: rgba(1, 184, 212, 0.14);
	--sp-color-cian-a35: rgba(1, 184, 212, 0.35);
	--sp-color-marino-a08: rgba(6, 43, 79, 0.08);
	--sp-color-marino-a22: rgba(6, 43, 79, 0.22);

	/* Familias */
	--sp-font-display: "Boris", sans-serif;
	--sp-font-texto: "Dosis", sans-serif;
	--sp-font-ui: "Outfit", sans-serif;
	--sp-font-segoe: "Segoe UI", system-ui, sans-serif;
	/* Enlaces: sans-serif genérica del sistema (aspecto aprobado; ver
	   inc/assets.php → sp_kit_link_font). Cambiar aquí para todo el sitio. */
	--sp-font-enlace: sans-serif;
}

/* ==========================================================================
   Título con texto destacado (antes: JKit Heading)
   Migración «jkit-titulos». El título nativo lleva
   <span class="sp-destacado">…</span>; estos son los valores que JKit
   aplicaba al texto destacado en las 16 instancias que lo usan.
   ========================================================================== */
.sp-titulo .elementor-heading-title {
	/* Geometría medida del título JKit: margen superior 0.5rem del h2 y
	   20px inferiores (los 16px del h2 colapsaban con los 20px del
	   contenedor .heading-section-title). */
	margin: 0.5rem 0 20px;
}
.sp-destacado {
	display: inline-block;
	color: var(--sp-color-cielo);
	font-family: var(--sp-font-display);
	font-weight: 400;
	text-shadow: 3px 6px 3px rgba(0, 0, 0, 0.3);
}
.sp-destacado--sm {
	font-size: 0.9em;
}
/* Variantes usadas por otras instancias de JKit (página «testing» y
   plantillas): Outfit, pesos, sin sombra, tamaño grande. */
.sp-destacado--ui {
	font-family: var(--sp-font-ui);
}
.sp-destacado--w500 {
	font-weight: 500;
}
.sp-destacado--w600 {
	font-weight: 600;
}
.sp-destacado--w700 {
	font-weight: 700;
}
.sp-destacado--principal {
	color: var(--e-global-color-e57add8, #1686CB);
}
.sp-destacado--azul-intenso {
	color: #0063E1;
}
.sp-destacado--sin-sombra {
	text-shadow: none;
}
.sp-destacado--lg {
	font-size: 1.5em;
}
@media (max-width: 767px) {
	.sp-destacado--lg {
		font-size: 1.9em;
	}
	.sp-destacado--amarillo-movil {
		color: #FFCB00;
	}
}

/* ==========================================================================
   Píldoras (antes: CSS pegado en cada editor de texto)
   Migración «pildoras». Reproduce el resultado medido, incluida la
   colisión original de variantes (docs/REFERENCIA-VISUAL.md §3).
   ========================================================================== */
/* Todo acotado a .sp-pills--*: solo afecta a contenido ya migrado. */
[class*="sp-pills--"] .sp-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 14px;
}
[class*="sp-pills--"] .sp-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	color: var(--sp-color-marino) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

/* Cian: fondo cian translúcido; hover cian sólido (el texto sigue marino). */
.sp-pills--cian .sp-pill {
	background: var(--sp-color-cian-a14);
	border-color: var(--sp-color-cian-a35);
}
.sp-pills--cian .sp-pill:hover {
	background: #01B8D4;
	border-color: #01B8D4;
}

/* Marino: fondo marino translúcido; hover marino sólido. */
.sp-pills--marino .sp-pill {
	background: var(--sp-color-marino-a08);
	border-color: var(--sp-color-marino-a22);
}
.sp-pills--marino .sp-pill:hover {
	background: var(--sp-color-marino);
	border-color: var(--sp-color-marino);
}

@media (max-width: 767px) {
	[class*="sp-pills--"] .sp-pill-list {
		justify-content: center;
		margin-bottom: 18px;
	}
	.sp-pills--marino .sp-pill {
		font-size: 13px;
		padding: 8px 15px;
	}
}

/* ==========================================================================
   Texto en movimiento (antes: Qi Text Marquee)
   Widget sp-marquee. Valores base idénticos a Qi (main.css 1.10).
   ========================================================================== */
.sp-marquee {
	--sp-marquee-duracion: 20s;
	position: relative;
	display: inline-block;
	width: 100%;
	vertical-align: top;
	overflow: hidden;
}
.sp-marquee__content {
	display: flex;
	white-space: nowrap;
	font-size: 0;
	overflow: hidden;
}
.sp-marquee__text {
	display: flex;
	align-items: baseline;
}
.sp-marquee__text--original {
	animation: sp-marquee var(--sp-marquee-duracion) linear infinite;
}
.sp-marquee__text--copy {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
	backface-visibility: hidden;
	transform: translateX(100%) translateZ(0);
	animation: sp-marquee-copia var(--sp-marquee-duracion) linear infinite;
}
.sp-marquee--inversa .sp-marquee__text--original {
	animation-name: sp-marquee-inversa;
}
.sp-marquee--inversa .sp-marquee__text--copy {
	animation-name: sp-marquee-inversa-copia;
}
.sp-marquee__item {
	font-size: 100px;
	line-height: 1.1em;
	padding-right: 0.5em;
	padding-left: 0.5em;
}
.sp-marquee__icon {
	display: flex;
	font-size: 30px;
	align-self: center;
	align-items: center;
}
.sp-marquee__icon svg {
	fill: currentColor;
	stroke: currentColor;
	width: 1em;
	height: auto;
}
@keyframes sp-marquee {
	0% { transform: translateX(0) translateZ(0); }
	100% { transform: translateX(-100%) translateZ(0); }
}
@keyframes sp-marquee-copia {
	0% { transform: translateX(100%) translateZ(0); }
	100% { transform: translateX(0) translateZ(0); }
}
@keyframes sp-marquee-inversa {
	0% { transform: translateX(0) translateZ(0); }
	100% { transform: translateX(100%) translateZ(0); }
}
@keyframes sp-marquee-inversa-copia {
	0% { transform: translateX(-100%) translateZ(0); }
	100% { transform: translateX(0) translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sp-marquee__text--original,
	.sp-marquee__text--copy {
		animation: none;
	}
}

/* ==========================================================================
   Botón de video (antes: JKit Video Button)
   Widget sp-boton-video. Base y halo idénticos a JKit 3.1.2.
   ========================================================================== */
.sp-video-btn__link {
	display: inline-block;
	text-align: center;
	font-size: 18px;
	border-radius: 50%;
	position: relative;
	z-index: 6;
	transition: all 0.4s ease;
}
.sp-video-btn__link::before,
.sp-video-btn__link::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--sp-video-halo, currentColor);
	border-radius: 50%;
	box-shadow: 0 0 0 0 currentColor;
	animation: sp-video-halo 3s infinite;
	opacity: 0.6;
	z-index: -1;
}
/* En el sitio aprobado ambos halos laten sincronizados (la regla de JKit
   que retrasaba ::after 0,3 s quedaba anulada): se reproduce lo medido. */
.sp-video-btn__link i,
.sp-video-btn__link span {
	transition-duration: inherit;
}
@keyframes sp-video-halo {
	70% { box-shadow: 0 0 0 15px currentColor; opacity: 0; }
	100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-video-btn__link::before,
	.sp-video-btn__link::after {
		animation: none;
	}
}

/* Ventana emergente del video: medidas del original (SweetAlert2 + JKit):
   capa rgba(0,0,0,.4), margen 10px, caja de 900 × 399 px centrada y «×»
   blanca de 16px sobre la esquina superior derecha. */
.sp-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: rgba(0, 0, 0, 0.4);
}
.sp-video-modal[hidden] {
	display: none;
}
.sp-video-modal__box {
	position: relative;
	width: 100%;
	max-width: 900px;
}
.sp-video-modal__box iframe {
	display: block;
	width: 100%;
	height: 399px;
	border: 0;
}
.sp-video-modal .sp-video-modal__close,
.sp-video-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-100%);
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #fff;
	font: 400 16px/44px var(--sp-font-ui);
	cursor: pointer;
}
.sp-video-modal .sp-video-modal__close:hover,
.sp-video-modal .sp-video-modal__close:focus,
.sp-video-modal__close:hover,
.sp-video-modal__close:focus {
	background: none;
	color: #fff;
}

/* ==========================================================================
   Menú lateral (antes: ElementsKit Header Offcanvas + panel HTML 397)
   Widget sp-menu-lateral. Geometría, colores y transiciones medidos en el
   sitio aprobado (qa/baseline/menu-medidas.json) y CSS del panel original.
   ========================================================================== */
.sp-menu-lateral {
	--sp-ml-duracion: 0.5s;
}
.sp-menu-lateral__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 4px 7px 5px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.sp-menu-lateral__toggle:hover,
.sp-menu-lateral__toggle:focus {
	color: inherit;
}
.sp-menu-lateral__toggle i {
	line-height: 1;
}

/* Capa oscura */
.sp-menu-lateral__overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
	transition: all 0.4s ease-in var(--sp-ml-duracion);
}
.sp-menu-lateral.is-open .sp-menu-lateral__overlay {
	opacity: 1;
	visibility: visible;
	transition: all var(--sp-ml-duracion) ease-out 0s;
}

/* Panel */
.sp-menu-lateral__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	right: -100%;
	z-index: 999999;
	width: 100%;
	max-width: 360px;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: all var(--sp-ml-duracion) cubic-bezier(0.9, 0.03, 0, 0.96) var(--sp-ml-duracion);
}
.sp-menu-lateral.is-open .sp-menu-lateral__panel {
	right: 0;
	opacity: 1;
	visibility: visible;
	transition: all var(--sp-ml-duracion) cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}
.sp-menu-lateral__contenedor {
	position: relative;
	top: 150px;
	opacity: 0;
	visibility: hidden;
	backface-visibility: hidden;
	transition: all 0.3s ease-in 0.3s;
}
.sp-menu-lateral.is-open .sp-menu-lateral__contenedor {
	top: 0;
	opacity: 1;
	visibility: visible;
	transition: all 1s ease-out 1.2s;
}
.sp-menu-lateral__cabecera {
	float: right;
	padding: 20px;
}
.elementor-widget .sp-menu-lateral__close,
.sp-menu-lateral__close {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1;
	display: block;
	padding: 4px 7px 5px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.3s;
}
/* Especificidad 0,3,0: el kit estiliza todo button:hover con 0,2,1. */
.elementor-widget .sp-menu-lateral__close:hover,
.elementor-widget .sp-menu-lateral__close:focus {
	background: transparent;
	color: #fff;
}
.sp-menu-lateral__close svg {
	width: 100%;
	max-width: 20px;
	height: auto;
	vertical-align: middle;
	fill: currentColor;
}
.sp-menu-lateral__cuerpo {
	padding: 60px 20px 20px;
}
@media (prefers-reduced-motion: reduce) {
	.sp-menu-lateral__overlay,
	.sp-menu-lateral__panel,
	.sp-menu-lateral__contenedor {
		transition: none !important;
	}
}

/* Navegación del panel (valores del panel HTML original) */
.sp-nav {
	--sp-nav-texto: #EAF5FF;
	--sp-nav-suave: #BFDBFE;
	--sp-nav-icono: #7DD3FC;
	--sp-nav-hover: rgba(255, 255, 255, 0.11);
	--sp-nav-submenu: rgba(5, 24, 48, 0.48);
	--sp-nav-borde: rgba(219, 234, 254, 0.14);
	--sp-nav-azul: #2563EB;
	--sp-nav-cian: #0284C7;
	position: relative;
	z-index: 99;
	width: 100%;
	max-width: 350px;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.sp-nav__inner {
	width: 100%;
	padding: 15px;
	background: transparent;
}
.sp-nav__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 10px 20px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--sp-nav-borde);
}
.sp-nav__logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sp-nav__logo img {
	display: block;
	width: 100%;
	max-width: 235px;
	height: auto;
	object-fit: contain;
}
.sp-nav__menu,
.sp-nav__list {
	width: 100%;
}
.sp-nav__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sp-nav__item {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
.sp-nav__link,
.sp-nav__cta {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border-radius: 14px;
	color: var(--sp-nav-texto);
	font-size: 13.5px;
	font-weight: 750;
	letter-spacing: 0.025em;
	line-height: 1.25;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.sp-nav__item--sub > .sp-nav__link {
	padding-right: 52px;
}
.sp-nav__link > i:first-child,
.sp-nav__cta > i:first-child {
	width: 22px;
	min-width: 22px;
	text-align: center;
	font-size: 19px;
	color: var(--sp-nav-icono);
	transition: color 0.2s ease, transform 0.2s ease;
}
.sp-nav__link:hover,
.sp-nav__item:focus-within > .sp-nav__link {
	color: #fff;
	background: var(--sp-nav-hover);
	transform: translateX(3px);
}
.sp-nav__link:hover > i:first-child {
	color: #BAE6FD;
}
.sp-nav__link::before {
	content: "";
	position: absolute;
	left: 0;
	width: 3px;
	height: 0;
	border-radius: 10px;
	background: #38BDF8;
	transition: height 0.22s ease;
}
.sp-nav__link:hover::before {
	height: 24px;
}
.elementor-widget .sp-nav__toggle,
.sp-nav__toggle {
	position: absolute;
	top: 7px;
	right: 8px;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--sp-nav-suave);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.elementor-widget .sp-nav__toggle:hover,
.elementor-widget .sp-nav__toggle:focus,
.sp-nav__toggle:hover,
.sp-nav__toggle:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}
.sp-nav__toggle i {
	font-size: 17px;
	transition: transform 0.28s ease;
}
.sp-nav__item:hover > .sp-nav__toggle i,
.sp-nav__item:focus-within > .sp-nav__toggle i,
.sp-nav__item.is-open > .sp-nav__toggle i {
	transform: rotate(180deg);
}
.sp-nav__sub {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 5px 0 3px;
	padding: 0 7px;
	list-style: none;
	background: var(--sp-nav-submenu);
	border: 1px solid var(--sp-nav-borde);
	border-radius: 14px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-5px);
	transition: max-height 0.38s ease, opacity 0.22s ease, transform 0.25s ease, padding 0.3s ease, visibility 0.22s ease;
}
.sp-nav__item:hover > .sp-nav__sub,
.sp-nav__item:focus-within > .sp-nav__sub,
.sp-nav__item.is-open > .sp-nav__sub {
	max-height: 500px;
	opacity: 1;
	padding-top: 7px;
	padding-bottom: 7px;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.sp-nav__sub li {
	margin: 0;
	padding: 0;
}
.sp-nav__sub a {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	color: #DBEAFE;
	font-size: 12.7px;
	font-weight: 650;
	line-height: 1.35;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sp-nav__sub a i {
	width: 20px;
	min-width: 20px;
	font-size: 16px;
	text-align: center;
	color: var(--sp-nav-icono);
}
.sp-nav__sub a:hover {
	color: #fff;
	background: rgba(37, 99, 235, 0.25);
	transform: translateX(3px);
}
.sp-nav__sub a:hover i {
	color: #BAE6FD;
}
.sp-nav__cta {
	margin-top: 7px;
	justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, var(--sp-nav-azul) 0%, var(--sp-nav-cian) 100%);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 12px 28px rgba(37, 99, 235, 0.34);
}
.sp-nav__cta > i:first-child {
	color: #fff;
}
.sp-nav__cta:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 35px rgba(37, 99, 235, 0.5);
}
.sp-nav__vacio {
	color: #fff;
	font-size: 14px;
}
@media (max-width: 767px) {
	.sp-nav {
		max-width: 100%;
	}
	.sp-nav__inner {
		padding: 12px;
	}
	.sp-nav__logo {
		padding: 5px 8px 15px;
	}
	.sp-nav__logo img {
		max-width: 170px;
	}
	.sp-nav__link,
	.sp-nav__cta {
		min-height: 46px;
		padding: 11px 12px;
		font-size: 13px;
	}
	.sp-nav__item--sub > .sp-nav__link {
		padding-right: 50px;
	}
	.sp-nav__toggle {
		top: 5px;
	}
	.sp-nav__sub a {
		font-size: 12.5px;
		padding: 10px;
	}
}

/* ==========================================================================
   Header (antes: CSS pegado en el contenedor del header HFE)
   Migración «header-footer». Mismo CSS que tenía el contenedor .sp-header.
   ========================================================================== */
.sp-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	padding-block: 18px;
	background: linear-gradient(
		180deg,
		rgba(6, 43, 79, 0.88) 0%,
		rgba(6, 43, 79, 0.88) 55%,
		rgba(6, 43, 79, 0.55) 80%,
		rgba(6, 43, 79, 0) 100%
	) !important;
}
.sp-header .menu-label,
.sp-header .hamburger-icon {
	color: #FFFFFF;
}
.sp-header.elementor-sticky--effects {
	background: var(--sp-color-marino-a95) !important;
}

/* Copyright del footer: el enlace hereda la tipografía del título, como
   hacía el widget de Header Footer Elementor. */
.sp-copyright .elementor-heading-title a {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* ==========================================================================
   CTA «¿Listo para instalar tu aire acondicionado?»
   Migración «cta». Plantilla con widgets nativos; valores del HTML original
   (docs/data/fuentes-css/html-4388c32e.html) trasladados a la estructura de
   Elementor. Todo cuelga de .e-con.sp-cta (0,2,0) para ganar a los estilos
   por defecto de contenedores y de la Lista de iconos sin !important.
   Geometría verificada con tools/comparar-componente.js (qa/mapas/cta.json).
   ========================================================================== */
.e-con.sp-cta {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	min-height: 720px;
	padding: 185px 56px 72px;
	gap: 0;
	text-align: center;
	overflow: hidden;
	font-family: var(--sp-font-segoe);
}
.e-con.sp-cta .elementor-widget {
	margin: 0;
}
.e-con.sp-cta .e-con.sp-cta__inner {
	position: relative;
	z-index: 2;
	display: block;
	width: min(100%, 1080px);
	max-width: none;
	margin: 0 auto;
	padding: 26px 28px 30px;
	border-radius: 28px;
	background: rgba(6, 24, 48, 0.18);
	border: 1px solid rgba(191, 219, 254, 0.18);
	box-shadow: 0 24px 70px rgba(0, 25, 60, 0.22);
	backdrop-filter: blur(3px);
}

/* Lista de iconos: base común (insignia y sellos). En el original eran
   elementos en línea que heredaban el interlineado del body (1.1 × 16px). */
.e-con.sp-cta .elementor-icon-list-items,
.e-con.sp-cta .elementor-icon-list-items.elementor-inline-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}
.e-con.sp-cta .elementor-icon-list-items .elementor-icon-list-item,
.e-con.sp-cta .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	line-height: 1.1rem;
}
.e-con.sp-cta .elementor-icon-list-items .elementor-icon-list-item::after {
	display: none;
}
.e-con.sp-cta .elementor-icon-list-items .elementor-icon-list-icon {
	padding: 0;
}
.e-con.sp-cta .elementor-icon-list-items .elementor-icon-list-icon i {
	width: auto;
}
.e-con.sp-cta .elementor-icon-list-items .elementor-icon-list-text {
	padding: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/* Insignia */
.e-con.sp-cta .sp-cta__badge {
	display: flex;
	justify-content: center;
	margin-bottom: 22px;
}
.e-con.sp-cta .sp-cta__badge .elementor-icon-list-items .elementor-icon-list-item {
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.13);
	border: 1px solid rgba(219, 234, 254, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	color: #DBEAFE;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.e-con.sp-cta .sp-cta__badge .elementor-icon-list-items .elementor-icon-list-icon i {
	font-size: 14px;
	color: #93C5FD;
}

/* Título y bajada */
.e-con.sp-cta .sp-cta__title .elementor-heading-title {
	margin: 0 0 18px;
	color: #F8FAFC;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 900;
	line-height: 1;
	text-wrap: balance;
	text-shadow: 0 4px 24px rgba(0, 20, 45, 0.42);
}
.e-con.sp-cta .sp-cta__title .elementor-heading-title span {
	color: #7DD3FC;
	text-shadow: 0 0 28px rgba(125, 211, 252, 0.28);
}
.e-con.sp-cta .sp-cta__sub p {
	max-width: 560px;
	margin: 0 auto 34px;
	color: #DCEBFF;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.72;
	text-shadow: 0 2px 16px rgba(0, 20, 45, 0.42);
}

/* Botones */
.e-con.sp-cta .e-con.sp-cta__buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	width: 100%;
	margin-bottom: 34px;
	padding: 0;
}
.e-con.sp-cta .e-con.sp-cta__btn {
	position: relative;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	width: auto;
	min-width: 210px;
	padding: 15px 22px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.e-con.sp-cta .e-con.sp-cta__btn:hover {
	transform: translateY(-3px);
}
.e-con.sp-cta .e-con.sp-cta__btn--agendar {
	background: linear-gradient(135deg, #2563EB 0%, #0284C7 100%);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 14px 34px rgba(37, 99, 235, 0.42);
}
.e-con.sp-cta .e-con.sp-cta__btn--agendar:hover {
	box-shadow: 0 18px 42px rgba(37, 99, 235, 0.55);
}
.e-con.sp-cta .e-con.sp-cta__btn--wa {
	background: rgba(8, 34, 62, 0.44);
	color: #F8FAFC;
	border: 1.5px solid rgba(187, 247, 208, 0.36);
	box-shadow: 0 14px 32px rgba(0, 20, 45, 0.24);
}
.e-con.sp-cta .e-con.sp-cta__btn--wa:hover {
	background: rgba(8, 45, 70, 0.56);
	border-color: rgba(134, 239, 172, 0.58);
}
.e-con.sp-cta .sp-cta__btn-icon {
	flex-shrink: 0;
}
.e-con.sp-cta .sp-cta__btn-icon .elementor-icon-wrapper {
	display: flex;
	line-height: 1;
}
.e-con.sp-cta .sp-cta__btn-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	font-size: 19px;
	color: inherit;
}
.e-con.sp-cta .sp-cta__btn--agendar .sp-cta__btn-icon .elementor-icon {
	background: rgba(255, 255, 255, 0.18);
}
.e-con.sp-cta .sp-cta__btn--wa .sp-cta__btn-icon .elementor-icon {
	background: rgba(34, 197, 94, 0.2);
	color: #86EFAC;
}
.e-con.sp-cta .e-con.sp-cta__btn-label {
	display: block;
	width: auto;
	padding: 0;
	line-height: 1.05;
	text-align: left;
}
.e-con.sp-cta .sp-cta__btn-text .elementor-heading-title {
	color: inherit;
	font: inherit;
	line-height: 1.05;
}
.e-con.sp-cta .sp-cta__btn-small .elementor-heading-title {
	display: block;
	margin-top: 4px;
	color: inherit;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.05;
	opacity: 0.82;
}

/* Separador */
.e-con.sp-cta .e-con.sp-cta__divider {
	display: block;
	width: 74px;
	height: 1px;
	min-height: 0;
	margin: 0 auto 24px;
	padding: 0;
	background: linear-gradient(90deg, transparent, rgba(219, 234, 254, 0.38), transparent);
}

/* Sellos de confianza */
.e-con.sp-cta .sp-cta__trust .elementor-icon-list-items {
	gap: 10px;
}
.e-con.sp-cta .sp-cta__trust .elementor-icon-list-items .elementor-icon-list-item {
	gap: 8px;
	padding: 9px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(219, 234, 254, 0.16);
	color: #E0F2FE;
	font-size: 13px;
	font-weight: 700;
	text-shadow: 0 1px 10px rgba(0, 20, 45, 0.36);
}
.e-con.sp-cta .sp-cta__trust .elementor-icon-list-items .elementor-icon-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(96, 165, 250, 0.18);
}
.e-con.sp-cta .sp-cta__trust .elementor-icon-list-items .elementor-icon-list-icon i {
	font-size: 15px;
	color: #BAE6FD;
}

@media (max-width: 768px) {
	.e-con.sp-cta {
		min-height: 680px;
		padding: 150px 32px 54px;
	}
	.e-con.sp-cta .e-con.sp-cta__inner {
		width: min(100%, 620px);
		padding: 24px 22px 28px;
		border-radius: 24px;
	}
	.e-con.sp-cta .sp-cta__title .elementor-heading-title {
		font-size: 36px;
	}
	.e-con.sp-cta .sp-cta__sub p {
		font-size: 15px;
		margin-bottom: 30px;
	}
}
@media (max-width: 520px) {
	.e-con.sp-cta {
		min-height: 650px;
		padding: 122px 18px 42px;
	}
	.e-con.sp-cta .e-con.sp-cta__inner {
		padding: 22px 18px 24px;
		border-radius: 20px;
		backdrop-filter: blur(2px);
	}
	.e-con.sp-cta .sp-cta__badge {
		margin-bottom: 18px;
	}
	.e-con.sp-cta .sp-cta__badge .elementor-icon-list-items .elementor-icon-list-item {
		font-size: 9px;
		padding: 7px 12px;
		letter-spacing: 0.08em;
	}
	.e-con.sp-cta .sp-cta__title .elementor-heading-title {
		font-size: 29px;
		letter-spacing: -0.6px;
		margin-bottom: 14px;
	}
	.e-con.sp-cta .sp-cta__sub p {
		font-size: 14px;
		line-height: 1.62;
		margin-bottom: 26px;
	}
	.e-con.sp-cta .e-con.sp-cta__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-bottom: 28px;
	}
	.e-con.sp-cta .e-con.sp-cta__btn {
		width: 100%;
		justify-content: flex-start;
		padding: 14px 18px;
	}
	.e-con.sp-cta .e-con.sp-cta__btn-label {
		flex: 1;
	}
	.e-con.sp-cta .sp-cta__trust .elementor-icon-list-items {
		gap: 8px;
	}
	.e-con.sp-cta .sp-cta__trust .elementor-icon-list-items .elementor-icon-list-item {
		width: 100%;
		justify-content: center;
		font-size: 12px;
		padding: 9px 12px;
	}
}

/* Logo (antes: widget «site-logo» de Header Footer Elementor). HFE dejaba la
   imagen en la línea base, lo que añadía el espacio del descendente de la
   fuente (≈4px) bajo el logo; el alto del header aprobado lo incluye. */
.elementor-widget-image.sp-logo img {
	vertical-align: baseline;
}

/* Header de Theme Builder: Elementor le añade un ::before con display:table
   (clearfix) que impide que el margen superior del primer contenido colapse
   a través del header. Con Header Footer Elementor ese margen sí colapsaba
   (en 404 y entradas el sitio aprobado baja 8px, header incluido). El
   contenido del header es absoluto (.sp-header), así que el clearfix no
   cumple ninguna función aquí. */
.elementor-location-header::before {
	display: none;
}
/* Como el #masthead de HFE: el header absoluto se posiciona respecto a él. */
.elementor-location-header {
	position: relative;
}

/* ==========================================================================
   Página Contacto: tarjetas de canal (teléfono, WhatsApp, correo, dirección).
   Las tarjetas con enlace envuelven título y texto en <a>, que el kit pone en
   la tipografía de enlaces (--sp-font-enlace). Se mantiene la de la tarjeta,
   igual que la que no tiene enlace y que las tarjetas de Agenda.
   ========================================================================== */
.elementor-widget.sp-contacto-canal a {
	font-family: inherit;
}

/* ==========================================================================
   Formulario «Solicitar mantenimiento o cotización» (v2.1)
   Widget Formulario de Elementor Pro con la clase sp-form (plantilla
   «Componente — Formulario mantenimiento y cotización»). Campos con la
   tipografía de interfaz y los colores del sitio; el botón conserva el
   estilo global de botones del kit.
   ========================================================================== */
.sp-form .elementor-field-group {
	margin-bottom: 14px;
}
.sp-form .elementor-field-label {
	margin-bottom: 6px;
	font-family: var(--sp-font-ui);
	font-weight: 500;
	font-size: 0.95em;
	color: var(--sp-color-texto);
}
.sp-form .elementor-field-group .elementor-field-textual,
.sp-form .elementor-field-group select {
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--sp-color-marino-a22);
	border-radius: 10px;
	background-color: #fff;
	font-family: var(--sp-font-ui);
	font-size: 1em;
	color: var(--sp-color-texto);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sp-form .elementor-field-group .elementor-field-textual:focus,
.sp-form .elementor-field-group select:focus {
	border-color: var(--sp-color-secundario);
	box-shadow: 0 0 0 3px var(--sp-color-cian-a14);
	outline: none;
}
.sp-form .elementor-mark-required .elementor-field-label::after {
	color: var(--sp-color-secundario);
}
.sp-form .elementor-message {
	margin-top: 12px;
	font-family: var(--sp-font-ui);
}
.sp-form .elementor-message.elementor-message-success {
	color: #138a4a;
}
.sp-form .elementor-message.elementor-message-danger,
.sp-form .elementor-error .elementor-field-textual {
	color: #b42318;
}
.sp-form .elementor-error .elementor-field-textual,
.sp-form .elementor-error select {
	border-color: #b42318;
}
.sp-form .e-form__buttons .elementor-button {
	min-height: 48px;
	border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
	.sp-form .elementor-field-group .elementor-field-textual,
	.sp-form .elementor-field-group select {
		transition: none;
	}
}