/* ==========================================================================
   Hero de la portada — Inmobiliaria Solís
   Carrusel a pantalla completa con velo oscuro para que el texto se lea
   sobre cualquier fotografía.
   ========================================================================== */

.elementor-7615 .elementor-element-4d5bc61 {
	padding: 0 !important;
}

/* Alto: la pantalla menos la cabecera, con un mínimo para móviles bajos. */
.elementor-7615 .elementor-element-3951927,
.elementor-7615 .elementor-element-3951927 .swiper,
.elementor-7615 .elementor-element-3951927 .swiper-wrapper,
.elementor-7615 .elementor-element-3951927 .swiper-slide {
	height: clamp(460px, calc(100vh - 72px), 900px) !important;
}

/* Cada slide: la foto de fondo cubre, y el contenido se centra. */
.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con {
	height: 100%;
	width: 100%;
	max-width: none;
	position: relative;
	display: flex;
	align-items: center;
	/* Dirección columna: justify-content centra en vertical. */
	--justify-content: center;
	justify-content: center !important;
	background-size: cover !important;
	background-position: center !important;
	padding: 0 !important;
	min-height: 100%;
	cursor: grab;
}

.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con:active { cursor: grabbing; }

/* Paneo lento de la foto mientras el slide está a la vista. */
.elementor-7615 .elementor-element-3951927 .swiper-slide-active > .e-con {
	animation: solis-hero-pan 9s ease-out forwards;
}

@keyframes solis-hero-pan {
	from { background-position: center 42%; }
	to   { background-position: center 55%; }
}

/* Velo oscuro para que el texto se lea sobre cualquier foto.
   En ::after a propósito: el ::before de los contenedores lo administra
   Elementor para sus superposiciones y pisa cualquier content ajeno. */
.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, .74) 0%,
		rgba(0, 0, 0, .52) 40%,
		rgba(0, 0, 0, .16) 72%,
		rgba(0, 0, 0, .04) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con > .e-con-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Bloque de texto: pegado a la izquierda del contenedor, como el logo. */
.elementor-7615 .elementor-element-3951927 .swiper-slide .e-con-inner > .e-con {
	max-width: 580px;
	width: 100%;
	margin: 0 !important;
	/* El padre lo centraba en horizontal; esto lo pega al borde del logo. */
	align-self: flex-start !important;
	--align-items: flex-start;
	align-items: flex-start !important;
	text-align: left !important;
	padding: 0 !important;
	gap: 0;
}

/* Entrada escalonada del contenido en cada cambio de slide. */
.elementor-7615 .elementor-element-3951927 .swiper-slide .e-con-inner > .e-con > .elementor-element {
	opacity: 0;
	transform: translateY(16px);
}

.elementor-7615 .elementor-element-3951927 .swiper-slide-active .e-con-inner > .e-con > .elementor-element {
	opacity: 1;
	transform: none;
	transition: opacity .55s ease, transform .55s ease;
}

.elementor-7615 .elementor-element-3951927 .swiper-slide-active .e-con-inner > .e-con > .elementor-element:nth-child(2) { transition-delay: .12s; }
.elementor-7615 .elementor-element-3951927 .swiper-slide-active .e-con-inner > .e-con > .elementor-element:nth-child(3) { transition-delay: .24s; }
.elementor-7615 .elementor-element-3951927 .swiper-slide-active .e-con-inner > .e-con > .elementor-element:nth-child(4) { transition-delay: .36s; }

.elementor-7615 .elementor-element-3951927 .swiper-slide .e-con-inner > .e-con .elementor-widget-container {
	text-align: left !important;
}

/* El CSS heredado pinta .naranja de verde: aquí sobra, la píldora la
   ponemos nosotros sobre el título interior. */
.elementor-7615 .elementor-element-3951927 .naranja {
	background: none !important;
	padding: 0 !important;
	color: inherit !important;
	text-align: left !important;
}

/* Etiqueta "SE VENDE" / "SE ALQUILA" */
.elementor-7615 .elementor-element-3951927 .naranja .elementor-heading-title {
	display: inline-block;
	background: var(--solis-naranja, #FA6407);
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 16px !important;
	line-height: 1.4;
	text-align: center;
}

/* Título de la propiedad */
.elementor-7615 .elementor-element-3951927 .elementor-element-e235261 .elementor-heading-title,
.elementor-7615 .elementor-element-3951927 .swiper-slide h2.elementor-heading-title:not(.naranja *) {
	color: #fff !important;
	font-size: clamp(27px, 5vw, 44px) !important;
	font-weight: 700 !important;
	line-height: 1.28 !important;
	letter-spacing: .035em !important;
	margin: 0 0 14px !important;
	max-width: 560px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}

/* Descripción */
.elementor-7615 .elementor-element-3951927 .swiper-slide p.elementor-heading-title {
	color: rgba(255, 255, 255, .85) !important;
	font-size: clamp(14.5px, 1.2vw, 17px) !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	letter-spacing: .02em;
	margin: 0 0 30px !important;
	max-width: 470px;
}

/* Botón */
.elementor-7615 .elementor-element-3951927 .swiper-slide .elementor-button {
	background: var(--solis-naranja, #FA6407) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .05em;
	padding: 14px 30px !important;
	border-radius: 999px !important;
	border: 0 !important;
	box-shadow: 0 8px 24px rgba(250, 100, 7, .34);
	transition: transform .18s, box-shadow .18s, background .18s;
}

.elementor-7615 .elementor-element-3951927 .swiper-slide .elementor-button:hover {
	background: var(--solis-naranja-oscuro, #E85500) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(250, 100, 7, .42);
}

/* Sin flechas: se navega con los puntos o arrastrando. */
.elementor-7615 .elementor-element-3951927 .elementor-swiper-button {
	display: none !important;
}

.elementor-7615 .elementor-element-3951927 .swiper-pagination {
	bottom: 24px !important;
}

.elementor-7615 .elementor-element-3951927 .swiper-pagination-bullet {
	background: #fff;
	opacity: .55;
	width: 11px;
	height: 11px;
	margin: 0 6px !important;
	transition: opacity .18s, width .25s, background .18s;
}

.elementor-7615 .elementor-element-3951927 .swiper-pagination-bullet:hover { opacity: .9; }

.elementor-7615 .elementor-element-3951927 .swiper-pagination-bullet-active {
	opacity: 1;
	width: 32px;
	border-radius: 6px;
	background: var(--solis-naranja, #FA6407);
}

/* Si el script de animaciones no llega a correr, el contenido quedaba oculto. */
.elementor-7615 .elementor-element-3951927 .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

/* ==========================================================================
   Escritorio: fondo verde y la foto dentro de una tarjeta
   --------------------------------------------------------------------------
   Las fotos del hero miden 825×621 (una, 400×300). Estiradas a todo el ancho
   de un monitor se veían borrosas. En pantallas anchas, entonces, el fondo
   pasa a ser el degradado verde de la marca y la foto se muestra en una
   tarjeta a la derecha, a un tamaño donde esos 825px sobran y se ve nítida.

   Por debajo de 900px no hace falta: la foto es más ancha que la pantalla y
   a sangre se ve perfectamente, así que ahí se queda como estaba.
   ========================================================================== */

@media (min-width: 768px) {

	/* Desde 768px (tablet incluida): el mismo diseño de dos columnas del
	   escritorio. Entre 768 y 899 los contenedores de Elementor se pisaban
	   (la tarjeta de la foto tapaba el título); con la rejilla no.  */

	/* Velo verde sobre el vídeo: translúcido para que el vídeo se intuya, y
	   más cerrado a la izquierda, que es donde va el texto. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con::after {
		background: linear-gradient(
			115deg,
			rgba(6, 17, 12, .94) 0%,
			rgba(11, 59, 34, .88) 45%,
			rgba(11, 59, 34, .62) 100%
		);
	}

	/* La foto del slide deja de pintarse a sangre (a 825px de ancho se veía
	   borrosa en un monitor). La url sigue puesta para que la herede la
	   tarjeta de la derecha, pero con tamaño 0 no llega a dibujarse. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con {
		background-size: 0 0 !important;
	}

	/* Sin foto de fondo visible no hay nada que panear. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide-active > .e-con {
		animation: none;
	}

	/* Dos columnas: el texto a la izquierda y la tarjeta a la derecha.
	   La tarjeta es el ::after de este contenedor, así que cuenta como
	   segunda celda de la rejilla sin tocar el diseño en Elementor. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con > .e-con-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
		align-items: center;
		gap: 52px;

		/* Hereda la url de la foto del slide para poder pasársela al ::after;
		   con tamaño 0 no se pinta aquí. */
		background-image: inherit;
		background-size: 0 0;
		background-repeat: no-repeat;
	}

	/* La tarjeta de la foto es ahora un contenedor de verdad (lleva dentro la
	   imagen y las características), así que el ::after ya no hace falta. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con > .e-con-inner::after {
		content: none;
	}

	/* Una pizca de vida al entrar el slide, en la tarjeta y no en el fondo. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide-active [class*="elementor-element-heroficha"] {
		animation: solis-hero-tarjeta .7s cubic-bezier(.2, .7, .3, 1) both;
	}

	@keyframes solis-hero-tarjeta {
		from { opacity: 0; transform: translateY(18px) scale(.98); }
		to   { opacity: 1; transform: none; }
	}

	/* El texto ya no compite con la foto: puede ocupar toda su columna.
	   Y se centra en vertical, como la tarjeta, o uno quedaba arriba y la
	   otra en medio. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide .e-con-inner > .e-con {
		max-width: none;
		align-self: center !important;
	}

	.elementor-7615 .elementor-element-3951927 .swiper-slide h2.elementor-heading-title:not(.naranja *),
	.elementor-7615 .elementor-element-3951927 .elementor-element-e235261 .elementor-heading-title {
		max-width: none;
		/* La columna es más estrecha que antes: con el tamaño anterior los
		   títulos largos se comían cuatro líneas. */
		font-size: clamp(28px, 3vw, 42px) !important;
		letter-spacing: .015em !important;
		/* Sobre un fondo liso la sombra del texto ya no pinta nada. */
		text-shadow: none;
	}

	.elementor-7615 .elementor-element-3951927 .swiper-slide p.elementor-heading-title {
		max-width: 520px;
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.elementor-7615 .elementor-element-3951927 .swiper-slide-active > .e-con > .e-con-inner::after {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Slide de marca: no es una propiedad, así que no lleva tarjeta de foto.
   El texto ocupa el ancho y el vídeo se ve mejor por detrás.
   -------------------------------------------------------------------------- */

.elementor-7615 .elementor-element-heromarca > .e-con-inner::after {
	content: none !important;
}

@media (min-width: 768px) {
	/* Con el vídeo de protagonista el velo se abre por la derecha, pero sin
	   pasarse: por debajo de ~.55 el verde se lava y tira a turquesa. */
	.elementor-7615 .elementor-element-heromarca::after {
		background: linear-gradient(
			115deg,
			rgba(6, 17, 12, .93) 0%,
			rgba(11, 59, 34, .84) 42%,
			rgba(11, 59, 34, .60) 100%
		) !important;
	}

}

.elementor-7615 .elementor-element-heromarcatit .elementor-heading-title {
	font-size: clamp(34px, 4.6vw, 62px) !important;
	line-height: 1.14 !important;
}

.elementor-7615 .elementor-element-heromarcatex .elementor-heading-title {
	max-width: 560px !important;
}

/* --------------------------------------------------------------------------
   Slides de propiedad: la foto en tarjeta, con las características al pie
   -------------------------------------------------------------------------- */

.elementor-7615 [class*="elementor-element-heroficha"]:not([class*="img"]):not([class*="esp"]) {
	position: relative;
	width: 100%;
	max-width: 520px !important;
	justify-self: end;
	align-self: center !important;
	padding: 0 !important;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .42);
}

/* Elementor no estira los widgets sueltos dentro del contenedor: sin esto la
   franja de características se quedaba con el ancho de su contenido. */
.elementor-7615 [class*="elementor-element-heroficha"] > .elementor-element,
.elementor-7615 [class*="elementor-element-heroficha"] > .elementor-element > .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
}

.elementor-7615 [class*="elementor-element-heroficha"] .elementor-widget-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Franja al pie de la tarjeta, DEBAJO de la foto y no encima: así no tapa
   nada de la propiedad y los iconos se leen siempre igual. */
.solis-heroesp {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	padding: 14px 16px;
	background: #072017;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.solis-heroesp__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.solis-heroesp__item b { font-weight: 700; }

.solis-heroesp__item svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	opacity: .92;
}

/* --------------------------------------------------------------------------
   Ignacio Madrid, protagonista del primer slide
   Retrato a la derecha con una placa de cristal encima: pone cara a la
   inmobiliaria antes de enseñar ni una sola propiedad.
   -------------------------------------------------------------------------- */

.elementor-7615 .elementor-element-heroagente {
	position: relative;
	width: 100%;
	max-width: 420px !important;
	justify-self: end;
	align-self: end !important;
	padding: 0 !important;
}

.elementor-7615 .elementor-element-heroagentefoto img {
	display: block;
	width: 100%;
	/* Recortado: el original es 768×1024 y entero dejaba mucho aire arriba. */
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 12%;
	border-radius: 24px 24px 0 0;
	/* Se funde con el fondo por abajo, para que no parezca un recorte pegado. */
	-webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 66%, transparent 100%);
}

/* Placa con el nombre, flotando sobre el retrato. */
.elementor-7615 .elementor-element-heroagenteplaca {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 22px;
	width: auto !important;
	padding: 16px 18px !important;
	border-radius: 18px;
	background: rgba(7, 32, 23, .62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
	gap: 2px !important;
}

.elementor-7615 .elementor-element-heroagentenom .elementor-heading-title {
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	color: #fff !important;
}

.elementor-7615 .elementor-element-heroagentecar .elementor-heading-title {
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	margin: 0 !important;
	color: rgba(255, 255, 255, .82) !important;
}

/* Punto verde de "está disponible", delante del cargo. */
.elementor-7615 .elementor-element-heroagentecar .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background: #25D366;
	vertical-align: middle;
}

/* La retícula del slide de marca vuelve a dos columnas para hacerle sitio. */
@media (min-width: 768px) {
	.elementor-7615 .elementor-element-heromarca > .e-con-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
		align-items: center;
		gap: 48px;
	}

	.elementor-7615 .elementor-element-heromarcain {
		max-width: none !important;
	}
}

/* Estrecho: el retrato ocuparía media pantalla y desplazaría el mensaje. */
@media (max-width: 767px) {
	.elementor-7615 .elementor-element-heroagente { display: none !important; }
}

/* ==========================================================================
   Cabecera dentro del hero
   --------------------------------------------------------------------------
   Solo en la portada, que es donde hay hero: la barra blanca cortaba la
   imagen por arriba. Aquí se vuelve transparente y se apoya sobre el vídeo,
   así que el hero empieza en lo alto de la pantalla.

   En el resto del sitio la cabecera se queda como está: este archivo solo se
   carga en la portada (functions.php lo encola con is_front_page).
   ========================================================================== */

.elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}

.elementor-location-header .solis-cab {
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* Aquí la barra es transparente, así que el menú recupera su propio bloque
   verde: sin él, los enlaces blancos se perderían sobre el vídeo. */
.elementor-location-header .solis-cab__nav {
	background: #072017;
	box-shadow: 0 6px 22px rgba(3, 12, 8, .28);
}

/* El hero deja de descontar la cabecera: ahora pasa por debajo de ella. */
.elementor-7615 .elementor-element-3951927,
.elementor-7615 .elementor-element-3951927 .swiper,
.elementor-7615 .elementor-element-3951927 .swiper-wrapper,
.elementor-7615 .elementor-element-3951927 .swiper-slide {
	height: clamp(560px, 100vh, 960px) !important;
}

/* El contenido baja lo que ocupa la cabecera para no quedar debajo de ella. */
.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con > .e-con-inner {
	padding-top: 112px;   /* alto de la cabecera, que va superpuesta */
}

@media (max-width: 767px) {
	.elementor-7615 .elementor-element-3951927,
	.elementor-7615 .elementor-element-3951927 .swiper,
	.elementor-7615 .elementor-element-3951927 .swiper-wrapper,
	.elementor-7615 .elementor-element-3951927 .swiper-slide {
		height: clamp(480px, 88vh, 680px) !important;
	}
}

@media (max-width: 767px) {
	.elementor-7615 .elementor-element-3951927,
	.elementor-7615 .elementor-element-3951927 .swiper,
	.elementor-7615 .elementor-element-3951927 .swiper-wrapper,
	.elementor-7615 .elementor-element-3951927 .swiper-slide {
		height: clamp(420px, 78vh, 620px);
	}

	/* El mismo verde de la marca, en vertical: el texto va abajo. */
	.elementor-7615 .elementor-element-3951927 .swiper-slide > .e-con::after {
		background: linear-gradient(
			180deg,
			rgba(6, 17, 12, .55) 0%,
			rgba(11, 59, 34, .78) 55%,
			rgba(6, 17, 12, .90) 100%
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-7615 .elementor-element-3951927 .swiper-slide .elementor-button { transition: none; }
	.elementor-7615 .elementor-element-3951927 .swiper-slide .elementor-button:hover { transform: none; }
	.elementor-7615 .elementor-element-3951927 .swiper-slide-active > .e-con { animation: none; }
	.elementor-7615 .elementor-element-3951927 .swiper-slide .e-con-inner > .e-con > .elementor-element {
		opacity: 1;
		transform: none;
		transition: none;
	}
}