/* ---------------------------------------------------------------------
   Home — banner a sangre completa y buscador sobre la foto.
   Regla de trabajo: no se toca el desplegable de los filtros; queda
   como lo trae Houzez (mismo cuerpo de letra, alto y ancho automático).
   --------------------------------------------------------------------- */

/* --- el banner ocupa todo el ancho, no el contenedor --------------- */
.n2-section-smartslider {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

#n2-ss-57 { min-height: 560px !important; height: 560px !important; }
#n2-ss-57 .n2-ss-slider-1,
#n2-ss-57 .n2-ss-slider-2,
#n2-ss-57 .n2-ss-slider-3,
#n2-ss-57 .n2-ss-slider-4,
#n2-ss-57 .n2-ss-slide,
#n2-ss-57 .n2-ss-slide-backgrounds,
#n2-ss-57 .n2-ss-slide-background,
#n2-ss-57 .n2-ss-background-animation { height: 560px !important; }

/* La foto, con velo para que el texto blanco se lea */
#n2-ss-57 .n2-ss-slide-backgrounds {
	background-image:
		linear-gradient(180deg, rgba(2,66,84,.74) 0%, rgba(2,66,84,.30) 36%, rgba(2,66,84,.66) 100%),
		url('img/hero-home.jpg');
	background-size: cover, cover;
	background-position: center, center 62%;
	background-repeat: no-repeat;
}
#n2-ss-57 .n2-ss-slide { overflow: hidden; }

/* --- texto del banner centrado ------------------------------------- */
#n2-ss-57 .n2-ss-layers-container,
#n2-ss-57 .n2-ss-layer-row,
#n2-ss-57 .n2-ss-layer-col,
#n2-ss-57 .n2-ss-layer-row-inner { justify-content: center !important; }
#n2-ss-57 .n2-ss-layer-col > .n2-ss-layer,
#n2-ss-57 .n2-ss-layer[data-sstype="content"] { align-items: center !important; }
#n2-ss-57 .n2-ss-layer, #n2-ss-57 .n2-ss-item-content { text-align: center !important; }

/* --- el buscador, montado sobre la foto ---------------------------- */
.houzez-search-builder-wrapper {
	position: relative;
	z-index: 2;
	margin-top: -196px !important;
	background: rgba(255, 255, 255, .13) !important;
	backdrop-filter: blur(8px);
	border-radius: 16px !important;
	padding: 16px 18px !important;
}
.houzez-status-tabs { display: none !important; }

.houzez-search-builder-wrapper label,
.houzez-search-builder-wrapper .elementor-field-label {
	color: rgba(255, 255, 255, .88) !important;
	font-size: 11px !important;
	letter-spacing: .12em;
	margin-bottom: 6px !important;
}

/* Cada campo es un .bootstrap-select que además lleva .form-control,
   con un <button> dentro. Si se estilan los dos aparece un recuadro
   corrido detrás y se descoloca la lista: el contenedor queda neutro. */
.houzez-search-builder-wrapper .bootstrap-select.form-control,
.houzez-search-builder-wrapper .bootstrap-select {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	box-shadow: none !important;
}

.houzez-search-builder-wrapper .bootstrap-select > .dropdown-toggle,
.houzez-search-builder-wrapper select,
.houzez-search-builder-wrapper input[type="text"],
.houzez-search-builder-wrapper input[type="number"] {
	height: 40px !important;
	min-height: 40px !important;
	border-radius: 8px !important;
	border: 0 !important;
	background: #FFFFFF !important;
	padding: 0 12px !important;
	box-shadow: none !important;
}
.houzez-search-builder-wrapper .bootstrap-select > .dropdown-toggle:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(0, 174, 255, .55) !important;
}

/* --- botón buscar: todo el ancho, naranjo, hover celeste ----------- */
.houzez-search-builder-wrapper .houzez-search-button,
.houzez-search-builder-wrapper .houzez-search-button:focus,
.houzez-search-builder-wrapper .houzez-search-button:active {
	width: 100% !important;
	height: 42px !important;
	border-radius: 10px !important;
	background: #FE4015 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: #FFFFFF !important;
	font-weight: 600;
	transition: background .18s ease;
}
.houzez-search-builder-wrapper .houzez-search-button:hover {
	background: #00AEFF !important;
	color: #FFFFFF !important;
}
.houzez-search-builder-wrapper .houzez-search-button:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .8) !important;
}

/* --- pista de que la lista tiene scroll ----------------------------
   El tema deja exactamente 5 opciones (5 × 43 px). Se le suma media
   opción más para que se asome la sexta y se entienda que hay más. */
.houzez-search-builder-wrapper .bootstrap-select .dropdown-menu .inner {
	max-height: 236px !important;   /* 5,5 opciones */
}
.houzez-search-builder-wrapper .bootstrap-select .dropdown-menu {
	max-height: 240px !important;
}

/* --- detalles de los rótulos y posición del panel ------------------ */

/* Los rótulos no son clickeables: el cursor no debe sugerir que lo son */
.houzez-search-builder-wrapper label,
.houzez-search-builder-wrapper .elementor-field-label {
	cursor: default !important;
	margin-bottom: 3px !important;
}

/* El panel baja 50 px y queda montado entre la foto y lo que sigue */
.houzez-search-builder-wrapper { margin-top: -146px !important; }

/* --- el banner ya no se mete bajo la cabecera ----------------------
   La portada trae una sección de Elementor de 1 px de alto con
   margin-top: -120px, puesta cuando la cabecera era blanca y alta:
   servía para montar el banner debajo de ella. Con la cabecera nueva
   solo consigue que la foto asome por encima de la barra. */
.elementor-element-de02c12 { display: none !important; }

/* La columna que envuelve el banner trae 10 px de relleno arriba:
   dejaba una franja clara entre la barra y la foto. */
/* La columna que envuelve el banner trae 10 px de relleno arriba y
   dejaba una franja clara entre la barra y la foto. */
.elementor-widget-wrap:has(> .elementor-widget-smartslider),
.elementor-widget-wrap:has(> .elementor-element .n2-section-smartslider) { padding-top: 0 !important; }
/* Respaldo para navegadores sin :has() */
.n2-section-smartslider { margin-top: -11px; }

/* --- fuera la foto de la operadora ---------------------------------
   Iba como fondo de una columna en la sección "¿Por qué trabajar con
   nosotros?" (operadora_4_servicio_al_cliente_home.png) y se mezclaba
   con la foto de fondo de la sección, dejando todo confuso. */
.elementor-element-093e1d3 > .elementor-widget-wrap {
	background-image: none !important;
}

/* --- banner en móvil ------------------------------------------------ */
/* 991 px: el mismo punto en que Houzez cambia a menú hamburguesa,
   para que la cabecera y el buscador cambien a la vez. */
@media (max-width: 991px) {
	/* El contenido del banner va centrado, como en escritorio */
	#n2-ss-57 .n2-ss-layer,
	#n2-ss-57 .n2-ss-item-content,
	#n2-ss-57 .n2-ss-layer-col { text-align: center !important; align-items: center !important; }
	#n2-ss-57 .n2-ss-layer-row,
	#n2-ss-57 .n2-ss-layer-row-inner,
	#n2-ss-57 .n2-ss-layer-col { justify-content: center !important; }

	/* Smart Slider alinea cada capa con su propia variable CSS:
	   sin esto el badge se queda pegado a la izquierda. */
	#n2-ss-57 .n2-ss-layer {
		--ssselfalign: center !important;
		align-self: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	#n2-ss-57 { min-height: 480px !important; height: 480px !important; }
	#n2-ss-57 .n2-ss-slider-1,
	#n2-ss-57 .n2-ss-slider-2,
	#n2-ss-57 .n2-ss-slider-3,
	#n2-ss-57 .n2-ss-slider-4,
	#n2-ss-57 .n2-ss-slide,
	#n2-ss-57 .n2-ss-slide-backgrounds,
	#n2-ss-57 .n2-ss-slide-background,
	#n2-ss-57 .n2-ss-background-animation { height: 480px !important; }

	/* Smart Slider baja el cuerpo del título de 9,6 a 8 px entre 900 y
	   827 px. Se fija para que no cambie de tamaño en ese tramo. */
	#n2-ss-57 h1, #n2-ss-57 h2, #n2-ss-57 h3 { font-size: 9.6px !important; }

	/* El buscador deja de montarse sobre la foto: en móvil no cabe */
	.houzez-search-builder-wrapper {
		margin-top: 0 !important;
		background: #024254 !important;
		backdrop-filter: none;
		border-radius: 16px !important;
		margin: 0 14px !important;
	}
}

/* --- centrado del banner en TODOS los anchos ------------------------
   Smart Slider genera su propio CSS por cada punto de quiebre (1440,
   1300, 1199, 900, 700) y en varios de ellos alineaba a la izquierda.
   En vez de perseguir cada uno, se fija la variable que usa para
   alinear cada capa, sin media query. */
#n2-ss-57 .n2-ss-layer {
	--ssselfalign: center !important;
	align-self: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
#n2-ss-57 .n2-ss-layer-row,
#n2-ss-57 .n2-ss-layer-row-inner,
#n2-ss-57 .n2-ss-layer-col,
#n2-ss-57 .n2-ss-layers-container { justify-content: center !important; }
#n2-ss-57 .n2-ss-layer-col,
#n2-ss-57 .n2-ss-item-content { text-align: center !important; align-items: center !important; }

/* ===================================================================
   TÍTULOS DE SECCIÓN — juntarlos con su contenido
   El home traía widgets espaciadores de Houzez metidos a mano entre
   el título y el contenido (dos en "Nuestros Agentes": 70px + 50px).
   Se ocultan solo los que van pegados a un título de sección; los
   espaciadores del resto de la página quedan intactos.
   =================================================================== */
.elementor-widget-wrap > .elementor-element:has(.houzez_section_title_wrap)
	+ .elementor-widget-houzez_elementor_space,
.elementor-widget-wrap > .elementor-element:has(.houzez_section_title_wrap)
	+ .elementor-widget-houzez_elementor_space
	+ .elementor-widget-houzez_elementor_space {
	display: none;
}

/* el subtítulo venía con un interlineado de hasta 51px para letra de
   17px, lo que abría un hueco falso arriba y abajo del texto */
/* Elementor le pone a cada subtítulo un interlineado distinto por
   widget: 2,4em en "Opciones", 3em en "Selección", 1,5em en
   "Agentes". Eso hacía que un mismo texto de una línea ocupara 41,
   51 o 26px. Se igualan todos al de Agentes. */
.houzez_section_title_wrap .houzez_section_subtitle {
	line-height: 1.5 !important;
	margin-top: 2px !important;
	margin-bottom: 0 !important;
}

/* Elementor fija estos márgenes con una regla de altísima
   especificidad (.elementor-10 .elementor-element-XXX ...), así que
   hace falta !important para ganarle sin tocar el layout guardado. */
.houzez_section_title_wrap .houzez_section_title { margin-bottom: 4px !important; }
.houzez_section_title_wrap { margin-bottom: 10px !important; }

/* aire arriba del título, para que no quede pegado a la sección de
   arriba (Elementor no define margin-top aquí, pero el !important
   evita que una regla suya por widget lo pise) */
.houzez_section_title_wrap { margin-top: 45px !important; }

/* --- restos del banner anterior -------------------------------------
   1) El slide traía un degradado lateral propio, configurado en Smart
      Slider (.n2-ss-slide-background-color). En local ya estaba en
      transparente, pero en producción seguía puesto y oscurecía toda
      la franja izquierda por encima de la foto nueva.
   2) La tipografía de las capas la define Smart Slider con su propia
      fuente. En local esa fuente no carga y cae en Roboto; en
      producción sí carga y salía una serif ajena a la marca.
      Se fuerza Roboto, que es la tipografía del sitio.               */
#n2-ss-57 .n2-ss-slide-background-color {
	background-image: none !important;
	background-color: transparent !important;
}

#n2-ss-57 .n2-ss-layer,
#n2-ss-57 .n2-ss-layer *,
#n2-ss-57 [class*="n2-font-"] {
	font-family: Roboto, -apple-system, "Segoe UI", system-ui, sans-serif !important;
}