/* ==========================================================================
   Xtreme Velocity System — tokens y utilidades
   Solo contiene lo que Elementor Pro NO expone como control nativo.
   Colores y tipografías viven en el Kit global de Elementor.
   ========================================================================== */

:root {
	--xs-velocity-blue:    #0069e1;
	--xs-asphalt-black:    #000000;
	--xs-protection-white: #ffffff;
	--xs-engine-gray:      #999999;
	--xs-danger-red:       #d91e1e;

	--xs-surface:          #f9f9ff;
	--xs-surface-low:      #f2f3fd;
	--xs-surface-highest:  #e1e2ec;
	--xs-on-surface:       #191b23;
	--xs-on-surface-var:   #424754;
	--xs-outline:          #727785;
	--xs-outline-variant:  #c2c6d6;

	--xs-unit:             4px;
	--xs-gutter:           24px;
	--xs-section-gap:      120px;
	--xs-margin-desktop:   64px;
	--xs-margin-mobile:    16px;
}

/* --------------------------------------------------- The Power Slant ---
   Recorte diagonal de 15º del logo. clip-path no tiene control nativo. */
.xs-clip-right img,
.xs-clip-right .elementor-widget-container {
	clip-path: polygon( 0 0, 100% 0, 90% 100%, 0 100% );
}

.xs-clip-left img,
.xs-clip-left .elementor-widget-container {
	clip-path: polygon( 10% 0, 100% 0, 100% 100%, 0 100% );
}

/* Acento vertical de marca del hero (writing-mode sin control nativo). */
.xs-vertical-brand .elementor-heading-title {
	writing-mode: vertical-rl;
	letter-spacing: 0.25em;
}

/* --------------------------------------------------------- Imágenes ---
   Zoom + desaturado en hover de las tarjetas del mosaico. */
.xs-img-zoom img {
	transition: transform .7s ease, filter .7s ease;
	filter: grayscale( 1 );
}

.xs-img-zoom:hover img {
	transform: scale( 1.1 );
	filter: grayscale( 0 );
}

/* ------------------------------------------------- Widget: Feature Card ---
   Tarjeta del mosaico: imagen + insignia de icono superpuesta. */
.xs-feature-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: background-color .5s ease;
}

.xs-feature-card__media {
	overflow: hidden;
	line-height: 0;
}

/* El selector antepone `.xs-feature-card` para ganar a `.elementor img`, que
   fija `height: auto` con la misma especificidad y carga después: sin esto la
   imagen no llena su caja y deja un hueco bajo ella. */
.xs-feature-card .xs-feature-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease, filter .7s ease;
	filter: grayscale( 1 );
}

.xs-feature-card:hover .xs-feature-card__media img {
	transform: scale( 1.1 );
	filter: grayscale( 0 );
}

.xs-feature-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-grow: 1;
	justify-content: center;
}

/* Con imagen, el contenido arranca arriba: centrarlo desalinearía los títulos
   entre tarjetas de la misma fila. */
.xs-feature-card--media .xs-feature-card__body {
	justify-content: flex-start;
}

/* Reserva de dos líneas para el título: así el texto descriptivo empieza a la
   misma altura en las cuatro tarjetas, wrapee o no el titular. */
.xs-feature-card--media .xs-feature-card__title {
	min-height: 2.8em;
}

/* Con cuatro columnas por debajo del ancho máximo del contenedor (1280px) las
   columnas bajan de ~245px y el título más largo pasa a tres líneas, lo que
   descolgaba su descripción respecto a las demás. */
@media ( min-width: 1025px ) and ( max-width: 1279px ) {
	.xs-feature-card--media .xs-feature-card__title {
		min-height: 4.2em;
	}
}

/* La insignia se solapa sobre la imagen: es la firma visual de la tarjeta. */
.xs-feature-card--media .xs-feature-card__badge {
	position: relative;
	z-index: 2;
	margin-top: -56px;
}

.xs-feature-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: flex-start;
}

.xs-feature-card__badge svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xs-feature-card__title { margin: 0; }
.xs-feature-card__text  { margin: 0; }

/* -------------------------------------------- Widget: Numbered Feature ---
   Numeral fantasma detrás del contenido. */
.xs-numbered {
	position: relative;
}

.xs-numbered__ghost {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	transition: color .4s ease;
}

.xs-numbered__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.xs-numbered__title { margin: 0; }
.xs-numbered__text  { margin: 0; }

/* ------------------------------------------------------------ Móvil ---- */
@media ( max-width: 1024px ) {
	.xs-clip-right img,
	.xs-clip-right .elementor-widget-container,
	.xs-clip-left img,
	.xs-clip-left .elementor-widget-container {
		clip-path: none;
	}
}

/* ------------------------------------------------------------- Acento ---
   Palabra resaltada dentro de un titular (wp_kses_post permite class). */
.xs-accent {
	color: var( --xs-velocity-blue );
}

.xs-accent--white {
	color: var( --xs-protection-white );
}

/* Barra corta bajo los titulares centrados. */
.xs-rule-blue .elementor-divider-separator {
	border-top-color: var( --xs-velocity-blue );
}

/* -------------------------------------------------------- Redes sociales ---
   El widget nativo Social Icons no tiene control de color al pasar el ratón. */
.xs-social .elementor-social-icon {
	transition: background-color .3s ease;
}

.xs-social .elementor-social-icon:hover {
	background-color: var( --xs-velocity-blue ) !important;
}

/* --------------------------------------------------- Navegación por anclas ---
   Respaldo sin JavaScript: si smooth-scroll.js no llega a cargarse, el salto
   sigue siendo suave y respeta el hueco de la cabecera fija. */
@media ( prefers-reduced-motion: no-preference ) {
	html:not( .xs-js-scroll ) {
		scroll-behavior: smooth;
	}
}

[id="sobre-nosotros"],
[id="valor-anadido"],
[id="contacto"] {
	scroll-margin-top: 100px;
}

/* ------------------------------------------------------- Aseguradoras ---
   Logotipos con proporciones muy dispares (de 1,75:1 a 3,68:1): se igualan
   por altura. El widget Image no tiene control de alto máximo. */
/* El selector lleva .elementor-widget-image por delante para ganar al
   `height: auto` que Elementor aplica a `.elementor-widget-image img`. */
.elementor-widget-image.xs-aseg img {
	height: 56px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media ( max-width: 600px ) {
	.elementor-widget-image.xs-aseg img {
		height: 44px;
	}
}

/* Logotipos entregados en lienzo cuadrado con margen interno. */
.elementor-widget-image.xs-aseg--boxed img {
	height: 78px;
}

@media ( max-width: 600px ) {
	.elementor-widget-image.xs-aseg--boxed img {
		height: 60px;
	}
}

/* ==========================================================================
   Menú móvil a pantalla completa
   Se apoya en los estados nativos del widget Nav Menu de Elementor Pro:
   `aria-hidden` en el desplegable y `.elementor-active` en la hamburguesa.
   No se activa su opción "Full Width" porque su stretch() escribe estilos
   en línea que pelearían con el posicionamiento fijo.
   ========================================================================== */

@media ( max-width: 1024px ) {

	/* La hamburguesa, pegada a la derecha con aire respecto al borde, y por
	   encima del panel: es el único modo de cerrarlo. */
	.xs-nav .elementor-menu-toggle {
		position: relative;
		z-index: 100;
		margin-left: auto;
		margin-right: 4px;
		width: 42px;
		height: 42px;
	}

	/* El desplegable pasa a ser un panel que cubre toda la ventana.
	   El selector repite `.elementor-nav-menu__container` para superar por
	   especificidad la regla de Elementor, que fija `max-height` a partir de
	   una variable calculada por JS y añade un `margin-top` de separación. */
	.xs-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed;
		inset: 0;
		z-index: 90;
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100dvh;
		max-height: none;
		margin-top: 0;
		padding: 20px 28px 36px;
		overflow-y: auto;
		opacity: 0;
		pointer-events: none;
		/* El alto ya es fijo: la apertura la marca el fundido, no el max-height. */
		transition: opacity .35s ease;
	}

	.xs-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] {
		opacity: 1;
		pointer-events: auto;
	}

	/* Logotipo centrado en la cabecera del panel. El widget solo genera la
	   lista, así que la marca llega por variable desde PHP. */
	.xs-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container::before {
		content: '';
		display: block;
		flex: 0 0 auto;
		width: 170px;
		height: 54px;
		margin: 0 auto 28px;
		background-image: var( --xs-menu-logo );
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.xs-nav .elementor-nav-menu--dropdown .elementor-item {
		justify-content: flex-start;
		border-bottom: 1px solid rgba( 25, 27, 35, .10 );
		padding: 18px 0;
	}

	.xs-nav .elementor-nav-menu--dropdown li:first-child .elementor-item {
		border-top: 1px solid rgba( 25, 27, 35, .10 );
	}

	/* Llamada a la acción: justo detrás de las opciones, con el aspecto
	   "decal" del resto del sitio. */
	.xs-nav .elementor-nav-menu--dropdown li.xs-menu-cta {
		margin-top: 28px;
	}

	/* La clase del widget añade un escalón de especificidad: la regla de color
	   de Elementor para los enlaces del desplegable empata si no, y su hoja
	   carga después, dejando el rótulo oscuro sobre el botón negro. */
	.xs-nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown li.xs-menu-cta .elementor-item {
		justify-content: center;
		border: 0;
		padding: 18px 24px;
		background-color: var( --xs-asphalt-black );
		color: var( --xs-protection-white );
		box-shadow: 6px 6px 0 var( --xs-velocity-blue );
	}

	.xs-nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown li.xs-menu-cta .elementor-item:hover,
	.xs-nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown li.xs-menu-cta .elementor-item:focus {
		background-color: var( --xs-velocity-blue );
		color: var( --xs-protection-white );
	}
}

/* La llamada a la acción solo pertenece al panel desplegado: en la barra de
   escritorio ya está el botón de la cabecera. Se oculta en el menú principal
   a cualquier ancho. El selector lleva tres clases para ganar a la regla de
   Elementor `.elementor-nav-menu--layout-horizontal > ul > li`. */
.xs-nav .elementor-nav-menu--main li.xs-menu-cta {
	display: none;
}

/* ------------------------------------------------------ Textos legales ---
   El contenido llega como HTML corrido desde el editor: necesita ritmo
   vertical y enlaces reconocibles. */
.xs-legal p {
	margin: 0 0 20px;
}

.xs-legal p:last-child {
	margin-bottom: 0;
}

.xs-legal ul {
	margin: 0 0 20px;
	padding-left: 22px;
	list-style: disc;
}

.xs-legal li {
	margin-bottom: 12px;
}

.xs-legal a {
	color: var( --xs-velocity-blue );
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.xs-legal a:hover {
	color: var( --xs-asphalt-black );
}