/* ============================================================================
   CSS unificado de los fragmentos de WPCode. Inmobiliaria Gran Avenida.
   Movido aqui el 11 de agosto de 2026.

   ORDEN: es el mismo en que los imprimia WPCode, que resulto ser por
   identificador descendente. Se comprobo midiendo la posicion de cada bloque
   en la cabecera del HTML: ocupaban una franja contigua de 13.155 a 78.600,
   sin nada intercalado. Mantener este orden importa: cambiarlo altera quien
   gana en los empates de especificidad.

   Cada bloque conserva su comentario original, que explica por que existe.
   ============================================================================ */


/* ==== Fragmento 9750: Marca - Ritmo vertical y ancho de lectura (CSS) ==== */
/**
 * Marca: ritmo vertical y ancho estandar, iguales en toda la web.
 *
 * ANCHO ESTANDAR = EL DE PROPIEDADES: 1140 px en escritorio. Decision suya del
 * 11 de agosto de 2026. No es un numero inventado: 1140 es el contenido util del
 * .container del propio tema (1170 menos 15+15 de relleno), o sea el ancho que ya
 * usaba la galeria de Propiedades. Tomarlo como norma significa que todas las
 * paginas comparten el borde del tema y no hay medidas paralelas.
 *
 * EN MOVIL NO SE TOCA NADA, y es a proposito: medido a 375 px, el texto ocupa
 * 285-292 px (unos 45 caracteres) y las paginas ya coincidian entre si en 42-45 px
 * de margen. Eso ya es el optimo de lectura. Ampliarlo a los 15 px de Propiedades
 * lo pegaria al borde sin ganar nada.
 *
 * Medido a 1280 px antes de todo esto:
 *   - Banda de cabecera: 280 px en escritorio y 240 en movil, titular a 180 px.
 *   - Hueco hasta el primer texto: 110 px en Conocenos, 187 en Valora.
 *   - Ancho del texto: 760 px en la portada, 860 en Valora, 1120 en Conocenos.
 *
 * DOS COSAS PROBADAS Y DESCARTADAS, para no repetirlas:
 *   1. Cuerpo a 17 px y texto a 620 px. Por tipografia era lo correcto (81
 *      caracteres por linea frente a 107), pero en Conocenos el parrafo quedaba
 *      mas estrecho y con letra mas grande que las tarjetas de debajo.
 *   2. Norma de 760 px. Coherente entre paginas, pero dejaba el contenido flaco
 *      en pantallas grandes frente a la galeria de Propiedades.
 * A 1140 px el texto sale sobre 160 caracteres por linea, muy por encima de los
 * 45-75 que recomienda la tipografia. Se acepta a cambio de tener un solo ancho
 * en toda la web, que es la prioridad marcada.
 *
 * El hueco de las secciones baja de 100 a 64 px (40 en movil).
 *
 * EN MOVIL, para la banda, hace falta el selector largo "html body": otro fragmento
 * pone body .page-title.parallax con min-height:240px y me ganaba por especificidad.
 *
 * OJO: el tema tiene section.pt-0 .container con padding-top:0. Se respeta al final.
 */

/* 1. Banda de cabecera mas baja: 280 -> 200 px, con el titular recolocado. */
.page-title.parallax{
	height:200px !important;
}
.page-title.parallax .container{
	padding-top:118px !important;
	padding-bottom:20px !important;
}

/* 2. Ritmo vertical de las secciones: 100 -> 64 px. */
section .container{
	padding-top:64px !important;
	padding-bottom:64px !important;
}

/* 3. El ancho estandar de 1140 px, el de Propiedades. Se aplica a los bloques de
      contenido de las paginas que iban por su cuenta: Conocenos entero (texto,
      tarjetas, equipo y registro), el envoltorio de Valora y la columna centrada
      de la portada. */
#ga-conocenos,
.gc-intro,
.ga-wrap,
.gav-col-centrada{
	max-width:1140px !important;
	margin-left:auto !important;
	margin-right:auto !important;
}

/* Conocenos quedaba en 1120 y no en 1140: su columna de Elementor mete 10 px de
   relleno a cada lado. Se le quitan SOLO a esa columna, localizandola con :has()
   para no tocar ninguna otra de la web. Asi el bloque arranca en x=70, igual que
   la rejilla de Propiedades. */
/* La portada: su fila ya media 1140, pero dentro tenia una columna centrada de
   760 px para los textos de zona. Se ensancha a la norma por peticion suya del
   11 de agosto de 2026. Hace falta anular el width, no solo el max-width: la
   columna llevaba un ancho fijo de 760 px y un tope no le gana a un ancho. */
.gav-col-centrada{
	width:auto !important;
	max-width:1140px !important;
}

.elementor-widget-wrap:has(#ga-conocenos){
	padding-left:0 !important;
	padding-right:0 !important;
}

@media (max-width:768px){
	html body .page-title.parallax{
		height:auto !important;
		min-height:170px !important;
	}
	html body .page-title.parallax .container{
		padding-top:60px !important;
		padding-bottom:16px !important;
	}
}

@media (max-width:767px){
	section .container{
		padding-top:40px !important;
		padding-bottom:40px !important;
	}
	/* En movil manda la pantalla: se quita el tope y se dejan los margenes que ya
	   estaban, que son los optimos. */
	#ga-conocenos,
	.gc-intro,
	.ga-wrap,
	.gav-col-centrada{
		max-width:none !important;
	}
}

/* Se respeta la excepcion del tema para secciones pegadas. */
section.pt-0 .container{
	padding-top:0 !important;
}

/* ==== Fragmento 9747: Resenas - Carrusel sin JavaScript (CSS) ==== */
/**
 * Resenas: carrusel sin JavaScript.
 *
 * El problema: el deslizador de Trustindex lo mueve su cargador externo
 * (cdn.trustindex.io/loader.js), que en esta web esta neutralizado a proposito
 * porque metia las resenas dentro de un <template> y no se veia nada (ver el
 * fragmento 9737). Resultado medido el 11 de agosto de 2026: cada tarjeta salia
 * con left:-1134px y quedaban desplazadas casi 3.000 px, con el texto cortado a
 * media palabra, y las flechas no hacian nada.
 *
 * La solucion: se anula ese left y el envoltorio pasa a ser un desplazamiento
 * horizontal nativo con anclaje (scroll-snap). Se arrastra con el dedo en el movil
 * y con el trackpad en escritorio, sin una sola linea de JavaScript, asi que no
 * puede volver a descuadrarse por algo que pase en un dominio ajeno.
 *
 * Las flechas se ocultan porque son suyas y dependen de su JS: se quedarian de
 * adorno. El anclaje ya hace que cada tarjeta pare en su sitio.
 */

.ti-widget .ti-reviews-container-wrapper{
	display:flex !important;
	width:auto !important;
	margin:0 !important;
	gap:14px !important;
	overflow-x:auto !important;
	overflow-y:hidden !important;
	scroll-snap-type:x mandatory !important;
	-webkit-overflow-scrolling:touch !important;
	padding-bottom:10px !important;
}

.ti-widget .ti-review-item{
	left:auto !important;
	right:auto !important;
	top:auto !important;
	transform:none !important;
	margin:0 !important;
	flex:0 0 86% !important;
	max-width:330px !important;
	scroll-snap-align:start !important;
}

.ti-widget .ti-next,
.ti-widget .ti-prev{
	display:none !important;
}

@media (min-width:768px){
	.ti-widget .ti-review-item{
		flex-basis:calc(33.333% - 10px) !important;
		max-width:none !important;
	}
}

/* ==== Fragmento 9735: Marca - Barra fina translucida en movil y tablet (CSS) ==== */
/**
 * Marca: barra de menu fina y translucida. SOLO movil y tablet, hasta 1024 px.
 *
 * ESCRITORIO NO SE TOCA. Decision suya del 11 de agosto de 2026: en escritorio la
 * barra sigue las reglas originales del tema, y las medidas de escritorio no se
 * mezclan con las de movil o iPad.
 *
 * Para que conste a que se vuelve, medido a 1280 px con este fragmento desactivado:
 *   - En reposo: absolute, transparente, 150 px de alto, relleno 50/50.
 *   - Al bajar: fixed, rgba(0,10,0,.93), 110 px, relleno 30/30, con la animacion
 *     navSlideDown de 1 segundo.
 *   - El logo queda 10 px por encima de los enlaces (centros en 61 y 71). Es del
 *     tema, es su diseño, y NO se corrige aqui.
 *
 * En movil y tablet la barra es fija desde el primer pixel. El motivo: el tema la
 * deja absolute mientras estas arriba, asi que al bajar se va con la pagina, y
 * despues la hace entrar con navSlideDown, que dura 1 SEGUNDO. En ese hueco no hay
 * barra, y es la sensacion de que desaparece al bajar. Fija no ocupa hueco, igual
 * que absolute, asi que no descoloca ningun contenido.
 *
 * Referencias medidas en moviles de 390 px: Apple usa 44-48 px con
 * rgba(245,245,247,.8) y saturate(1.8) blur(20px); Fotocasa 56-64; Airbnb 134.
 * Ninguna de las tres esconde la barra.
 *
 * UNICA EXCEPCION EN ESCRITORIO, al final del archivo: las fichas de inmueble. En
 * ellas el fragmento 9732 oculta la banda de foto de cabecera, asi que la barra
 * transparente del tema quedaria sobre fondo #f8f8f8 con el menu en blanco, o sea
 * invisible. Esas mantienen la barra fina y solida. Es una diferencia por TIPO DE
 * PAGINA, no por tamaño de pantalla.
 */

@media (max-width:1024px){

	.navbar,
	.navbar.floating,
	.navbar.slide-down{
		position:fixed !important;
		top:0 !important;
		left:0 !important;
		right:0 !important;
		width:100% !important;
		z-index:1030 !important;
		animation:none !important;
		transition:background .25s ease !important;
		background:#0A0A0A !important;
		padding-top:11px !important;
		padding-bottom:11px !important;
	}
	.navbar.floating,
	.navbar.slide-down{
		background:rgba(10,10,10,.72) !important;
		-webkit-backdrop-filter:saturate(1.8) blur(20px) !important;
		backdrop-filter:saturate(1.8) blur(20px) !important;
	}

	/* Con la sesion abierta la barra de WordPress va por delante (z-index 99999),
	   asi que la nuestra se coloca debajo. */
	html:has(#wpadminbar) .navbar,
	html:has(#wpadminbar) .navbar.floating,
	html:has(#wpadminbar) .navbar.slide-down{
		top:32px !important;
	}
}

/* Centrado vertical de 768 a 1024, donde la barra mide 72 px: relleno 11/11 deja
   50 px utiles y el logo y el menu miden 41 px cada uno, luego (50-41)/2 = 4,5.
   El tema le pone al logo margin-top:-10px, pensado para su barra de 150 px. */
@media (min-width:768px) and (max-width:1024px){
	body .navbar .navbar-header .navbar-brand{
		margin-top:4.5px !important;
	}
	body .navbar .navbar-collapse .navbar-nav{
		margin-top:4.5px !important;
		margin-bottom:0 !important;
	}
}

@media (max-width:767px){

	.navbar,
	.navbar.floating,
	.navbar.slide-down{
		padding-top:6px !important;
		padding-bottom:6px !important;
	}

	/* CORRECCION comprobada el 11 de agosto de 2026: el area de pulsacion NO estaba
	   mal de origen. Ya existia esta regla, anterior a todo esto:
	     @media (max-width:992px){ .navbar .navbar-toggle::after{ content:""; position:
	       absolute; top:50%; left:50%; width:48px; height:48px;
	       transform:translate(-50%,-50%) } }
	   O sea, un rectangulo invisible de 48 x 48 centrado en el boton. Lo que se midio
	   como 24 x 19 px era el dibujo, no la zona que responde al dedo. El tamaño de
	   aqui abajo es REDUNDANTE para el tacto: solo sirve para que el boton tenga una
	   caja regular y se pueda centrar con el logo.
	   TRAMPA: las tres barras del icono son hijos del boton. Con display:flex a secas
	   se colocaron EN FILA (medido x=298, 320, 342) y el icono parecia roto.
	   flex-direction:column es obligatorio.
	   El selector es largo a proposito: el tema pone margin-top:8px con mas
	   especificidad que .navbar .navbar-toggle. */
	body .navbar .navbar-header .navbar-toggle{
		padding:0 10px !important;
		min-width:44px !important;
		min-height:44px !important;
		display:flex !important;
		flex-direction:column !important;
		align-items:center !important;
		justify-content:center !important;
		margin-top:3px !important;
	}
	body .navbar .navbar-header .navbar-toggle .icon-bar{
		display:block !important;
		width:22px !important;
		height:3px !important;
		float:none !important;
	}
	body .navbar .navbar-header .navbar-toggle .icon-bar + .icon-bar{
		margin-top:4px !important;
	}

	/* Centrado en movil: la cabecera mide 50 px, el logo 30 y el boton 44, luego
	   (50-30)/2 = 10 y (50-44)/2 = 3. Sin esto el icono queda 7 px bajo el logo. */
	body .navbar .navbar-header .navbar-brand{
		margin-top:10px !important;
	}

	/* El desplegable no puede quedar cortado con la barra fija. */
	.navbar .navbar-collapse{
		max-height:calc(100vh - 62px) !important;
		overflow-y:auto !important;
	}
}

/* Barra de administracion de WordPress en movil: defecto de WordPress, no del tema.
   #wpadminbar declara 46 px de alto pero su segunda fila
   (#wp-admin-bar-top-secondary, float:right) se desborda hasta los 92 px, mientras
   html solo baja 46. El avatar de la cuenta caia encima de la barra de menu y las
   tres lineas del icono parecian rotas.
   El :has(#wpadminbar) es imprescindible: sin el, la regla del margen se aplicaba a
   TODO EL MUNDO y cualquier visitante en movil veia una franja en blanco de 92 px.
   Y la barra de WordPress pasa a fixed porque si se queda absolute se va al hacer
   scroll y la nuestra, 92 px mas abajo, queda flotando a media pantalla.
   Corte 782 px: el que usa WordPress para pasar de 32 a 46 px. */
@media screen and (max-width:782px){
	#wpadminbar{
		height:92px !important;
		position:fixed !important;
	}
	html:has(#wpadminbar){
		margin-top:92px !important;
	}
	html:has(#wpadminbar) .navbar,
	html:has(#wpadminbar) .navbar.floating,
	html:has(#wpadminbar) .navbar.slide-down{
		top:92px !important;
	}
}

/* AQUI HABIA UNA EXCEPCION para las fichas en escritorio: barra fina, fija y
   negra, porque no tenian banda de foto y la barra transparente del tema dejaba
   el menu blanco sobre un fondo casi blanco.

   Retirada el 4 sep 2026. Jose Luis: "la idea es que sea igual que cuando abres
   vende tu casa, conocenos, venta o alquiler, que las fichas no tengan una barra
   distinta". Y en su sitio se ha devuelto la banda de cabecera (unas lineas mas
   abajo), que es lo que hace que la barra transparente se pueda leer.

   O sea: la ficha ya no es una excepcion en ningun sitio. */

/* ==== Fragmento 9732: Fichas - Barra fina translucida y sin cabecera (CSS) ==== */
/**
 * Fichas de inmueble: barra fina translucida, sin cabecera. 10 ago 2026.
 *
 * QUE CAMBIA, y solo en las fichas (body.single-portfolio):
 *   1. Se retira la banda de 280 px que repetia la foto de portada del inmueble.
 *      La foto ya se ve en la galeria, justo debajo.
 *   2. El menu nace YA FIJO, fino y TRANSLUCIDO: el inmueble se ve a traves.
 *   3. El objetivo tactil de la hamburguesa pasa a 44 px.
 *   4. El panel del precio, que es sticky, arranca por debajo de la barra.
 *
 * DE DONDE SALE EL DISENO. Medido el 10 ago 2026 en movil de 390 px:
 *   Apple .......... 44-48 px, fija siempre, fondo al 80% con blur(20px)
 *   Fotocasa ....... 56-64 px, fija, blanco opaco
 *   Airbnb ......... 134 px, fija (lleva buscador dentro)
 *   Esta ficha antes 80 px, fija, negro opaco
 * NINGUNA se esconde al bajar. Apple gana espacio por otro lado: barra muy fina
 * y translucida, asi el producto se ve a traves y la franja deja de pesar. Eso
 * es lo que se copia, con nuestro negro en vez de su gris claro.
 *
 * POR QUE FIJA Y SIN ESCONDERSE: el menu del tema CAMBIA de estado al bajar (de
 * absolute a fixed, de 50+50 de relleno a 30+30, con un segundo de animacion
 * navSlideDown). Con los 280 px de foto quedaba tapado; al quitar la banda se
 * veia y daba un salto muy feo. Se probaron cuatro formas de disimularlo y todas
 * fallaron. La que funciona es no tener dos estados. Ademas asi no hace falta
 * JavaScript: nada que temblar.
 *
 * LA HAMBURGUESA medía 19 x 24 px, cuando Apple y Google recomiendan 44. Con la
 * barra de 80 px quedaba disimulado por el hueco, pero el boton era dificil de
 * acertar con el pulgar. Se agranda el AREA con relleno, no el icono: el dibujo
 * se ve igual. Se le quita el margen para que no empuje la altura de la barra.
 *
 * EL H1 no se pierde: la seccion se oculta con la tecnica de solo-lectores, no
 * con display:none, asi que sigue en el documento y en el arbol de
 * accesibilidad. Su texto lo compone el fragmento 9653 e incluye el municipio.
 *
 * REGLA APRENDIDA: al fijar una barra hay que repasar TODOS los elementos sticky
 * de la pagina. El panel del precio quedaba 126 px por debajo y se comia la
 * zona, el titular y el precio.
 */

/* 1. Fuera la banda, pero sin sacar el h1 del documento. */
/* La banda de cabecera VUELVE, para que la ficha se vea igual que el resto.

   Estuvo oculta del 10 ago al 4 sep de 2026 con la tecnica de solo-lectores
   -1x1 px y clip, no display:none- para no sacar el h1 del documento. Se quito
   porque repetia la foto de portada del inmueble, que ya se ve en la galeria
   justo debajo.

   Ese motivo se resuelve sin renunciar a la coherencia: la banda usa LA MISMA
   FOTO que el resto de las paginas, no la del inmueble. Asi no duplica nada y la
   cabecera es identica a Conocenos, Venta, Alquiler y Vende tu casa.

   Los 200 px de min-height son los mismos que tienen las demas. */
body.single-portfolio section.page-title{
	position:relative !important;
	width:auto !important;
	height:auto !important;
	min-height:200px !important;
	padding:0 !important;
	margin:0 !important;
	overflow:visible !important;
	clip:auto !important;
	white-space:normal !important;
	border:0 !important;
	display:flex !important;
	align-items:center !important;
	background-image:url('/wp-content/uploads/2026/09/hero-portada-1500.webp') !important;
	background-size:cover !important;
	background-position:50% 50% !important;
	background-attachment:scroll !important;
}
/* El TITULO de la banda no se pinta, y el h1 no se pierde.

   Jose Luis, 4 sep 2026: "lo que si que queria era que la barra se viera igual,
   pero el titulo del inmueble no es necesario porque duplicamos informacion, no?".
   Y es cierto: el titulo ya esta en el panel del precio, justo debajo. Lo que hacia
   falta de la banda era el FONDO OSCURO, para que la barra transparente de
   escritorio se pueda leer; el texto no.

   Asi que la banda se queda como superficie y el h1 se oculta con la tecnica de
   solo-lectores: sigue en el documento y en el arbol de accesibilidad, que es lo
   que importa para Google y para un lector de pantalla, pero no se ve ni duplica
   nada.

   Ojo: no vale display:none, que si lo saca de ambos. */
body.single-portfolio section.page-title h1,
body.single-portfolio section.page-title .subtitle,
body.single-portfolio section.page-title p{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	margin:-1px !important;
	overflow:hidden !important;
	clip:rect(0 0 0 0) !important;
	white-space:nowrap !important;
	border:0 !important;
}

/* PERO EN MOVIL Y TABLET LA BANDA NO SALE, y esto no es una excepcion de estilo:
   es que ahi no hace falta para nada.

   Jose Luis, 4 sep 2026: "en movil no deberia de ser algo distinto, que no ocupara
   tanto y se centrara mas en la ficha, ahi si que tiene ser mas venta del producto
   que el resto de cosas". Tiene razon y el argumento tecnico va en la misma
   direccion: la banda solo existe para dar FONDO OSCURO a la barra transparente de
   escritorio. Por debajo de 1025 px la barra ya es negra y solida -eso lo pone el
   fragmento 9735 para toda la web-, asi que la banda no aporta nada y solo roba
   pantalla al inmueble.

   Medido en un movil de 375x812 antes y despues:

     antes: la galeria del inmueble empezaba en el pixel 416 de 812
     ahora: empieza en el 216  ->  200 px ganados, la mitad de la primera pantalla

   Con eso, en la primera pantalla ya entran la foto, el titulo, el precio, los
   cuatro datos y los botones de WhatsApp y llamar. Antes habia que bajar.

   Se oculta con la tecnica de solo-lectores -1x1 px y clip, no display:none- para
   que el h1 siga en el documento y en el arbol de accesibilidad.

   El corte es 1024 y no 767 a proposito: coincide con el punto donde la barra pasa
   de negra a transparente. Si algun dia se mueve uno, hay que mover el otro. */
@media (max-width:1024px){
	body.single-portfolio section.page-title{
		position:absolute !important;
		width:1px !important;
		height:1px !important;
		min-height:0 !important;
		padding:0 !important;
		margin:-1px !important;
		overflow:hidden !important;
		clip:rect(0 0 0 0) !important;
		white-space:nowrap !important;
		border:0 !important;
		display:block !important;
	}
}

/* 2. La barra ya NO se toca aqui.
   Antes se forzaba position:fixed con top:0, y top:32/92 px cuando estaba la barra
   de administracion. Eso provocaba el fallo que aparecio en movil: la barra de
   WordPress es absolute y se va al hacer scroll, mientras la nuestra seguia clavada
   92 px por debajo del borde, o sea flotando a media pantalla.
   Ahora la ficha usa exactamente el mismo comportamiento que el resto del sitio,
   que lo pone el fragmento 9735: absolute y solida en reposo, y al hacer scroll el
   tema la pasa a fixed en top:0, fina y translucida. Un solo sitio donde mirar. */
/* 3. Hueco para la barra y sticky por debajo de ella. */
body.single-portfolio .container.single-portfolio{
	padding-top:95px !important;
}
body.single-portfolio .gaf .gaf-panel{ top:79px !important; }
body.single-portfolio.admin-bar .gaf .gaf-panel{ top:111px !important; }

/* Bloque de datos del inmueble: parcela, construidos, dormitorios y banos.
   Estaba en flex con anchos naturales, asi que la segunda columna bailaba:
   medido x=182 en la primera fila y x=140 en la segunda. Se pasa a rejilla de dos
   columnas iguales y se fija el hueco del icono, para que las cuatro etiquetas
   empiecen en la misma vertical dentro de su columna.

   POR QUE ESTA AQUI Y NO EN EL 9653, donde vive el resto del estilo de la ficha:
   ese fragmento son 38.064 caracteres de PHP con 38 barras invertidas en
   expresiones regulares (\s, \d, \b) de las que dependen el troceado del titulo y
   la deteccion de la galeria. Guardarlo por el navegador se las come sin avisar y
   dejaria las 24 fichas rotas en silencio. El selector lleva body.single-portfolio
   delante para ganar por especificidad al estilo del 9653, que se imprime despues. */
body.single-portfolio .gaf .gaf-datos{
	display:grid !important;
	grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	/* Hueco entre columnas de 14 y no 18: la etiqueta mas larga del catalogo,
	   "1.580 m² parcela", mide 98 px y la columna solo daba 99. Con 14 quedan 101. */
	gap:12px 14px !important;
}
body.single-portfolio .gaf .gaf-datos span{
	display:flex !important;
	align-items:center !important;
	gap:9px !important;
	/* Red de seguridad: el estilo del 9653 pone white-space:nowrap. En un movil
	   estrecho, o el dia que entre una parcela de cinco cifras, eso desbordaria la
	   tarjeta. Asi el texto parte de linea en vez de salirse. */
	white-space:normal !important;
}
body.single-portfolio .gaf .gaf-datos i,
body.single-portfolio .gaf .gaf-datos svg{
	width:16px !important;
	height:16px !important;
	flex:0 0 16px !important;
}

@media (max-width:900px){
	body.single-portfolio .container.single-portfolio{
		padding-top:66px !important;
	}
	/* En movil el panel no es sticky: se monta sobre la foto y no se toca. */
}

/* ==== Fragmento 9650: Marca - Bordes y botones flotantes (CSS) ==== */
/**
 * Marca - Norma de bordes redondeados (CSS). 8 ago 2026.
 *
 * Antes de esto convivian SIETE radios distintos para cajas rectangulares:
 *   3 px  formulario de contacto y sus campos
 *   8 px  botones, tarjetas de inmueble, iconos de servicio
 *  10 px  .ga-hero, .ga-dif, .ga-aviso, .gc-servicio, .gc-raicv, .gc-honor-item
 *  12 px  .ti-inner (resenas de Google)
 *  14 px  .gc-persona, .gc-cta
 *  20 px  .gc-badge
 * y ademas dos maneras de escribir lo mismo: 50px y 999px para pastillas,
 * 50px y 50% para circulos.
 *
 * LA NORMA, tres valores y ninguno mas:
 *   Rectangulos ..... 8px   (el que ya usaban los botones y el pie)
 *   Pastillas ....... 999px
 *   Circulos ........ 50%
 *
 * Lleva !important a proposito. No es dejadez: las reglas de Conocenos van
 * prefijadas con el id de su pagina (#ga-conocenos .gc-persona) y ganan a un
 * selector de una clase. Una norma que debe cumplirse en toda la web tiene que
 * poder imponerse sobre reglas locales; de lo contrario no es una norma.
 *
 * No se toca: .gc-avatar y demas fotos redondas (son circulos de verdad), ni
 * .mouse del heroe, que es el dibujo de un raton y no una superficie.
 *
 * Se enumeran los selectores uno a uno a proposito. Una regla general del tipo
 * "* { border-radius: 8px }" redondearia tambien avatares, iconos y elementos
 * que deben seguir siendo circulos o cuadrados.
 */

/* ---- Rectangulos: 8 px ---- */
.gav-contacto-form,
.wpcf7-form-control,
.ga-hero,
.ga-dif,
.ga-aviso,
.ga-card,
.gc-servicio,
.gc-raicv,
.gc-honor-item,
.gc-persona,
.gc-cta,
.ti-inner{
	border-radius:8px !important;
}

/* Resenas de Google (plugin Trustindex). Su regla empata en numero de clases
   con la de aqui arriba y llega despues, asi que ganaba con sus 12 px. Se le
   suma el tipo de etiqueta a cada paso para superarla sin inventar nada raro.
   Si algun dia el plugin cambia su marcado, esta regla dejara de aplicar y el
   widget volvera a sus 12 px: no rompe nada, solo deja de corregir. */
div.ti-widget div.ti-reviews-container div.ti-review-item div.ti-inner{
	border-radius:8px !important;
}

/* ---- Pastillas: 999 px ---- */
.portfolio-filters span,
.gc-badge{
	border-radius:999px !important;
}

/* ---- Circulos: 50% ----
   Dos clases porque el fragmento del boton flotante (9338) escribe 50px con un
   selector mas fuerte. En una caja de 52x52 se ve igual, pero el codigo debe
   decir una sola cosa. */
.ga-flot .ga-flot-btn,
#scrollTop{
	border-radius:50% !important;
}

/* ---- Botones flotantes: a la esquina ----
   Estaban a 72 px del borde y el de subir pegado abajo del todo. Se cambia el
   orden: los de contacto, que son los que interesan, bajan a la esquina donde
   llega el pulgar; el de subir, que se usa menos, pasa por encima. Ademas asi
   invaden menos el contenido a media pantalla, que es donde chocaban con los
   botones de la ficha. */
.ga-flot{
	bottom:18px !important;
}
#scrollTop{
	bottom:142px !important;
}

/* Flechas del carrusel de resenas de Google. Trustindex las sirve a 15px desde
   su propia hoja, y eran el ultimo radio suelto de Conocenos. Son cuadradas de
   30x30, asi que van a 8px como el resto de cajas pequenas. 10 ago 2026. */
div.ti-widget div.ti-next,
div.ti-widget div.ti-prev{
	border-radius:8px !important;
}

/* Boton del menu hamburguesa. El tema lo sirve a 4px y solo se ve por debajo de
   768px, asi que se colaba en la revision de escritorio. Es un boton, no un
   dibujo: va a 8px. 10 ago 2026. */
.navbar .navbar-toggle{
	border-radius:8px !important;
}

/* ==== Fragmento 9649: Propiedades - Tarjeta con cuerpo (CSS) ==== */
/**
 * Propiedades - Tarjeta con cuerpo (CSS). 8 ago 2026.
 *
 * Reviste la galeria [ga_inmuebles] con el diseño aprobado en el borrador:
 * foto sin recortar en 3:2, la franja de datos fuera de la foto, pildora de
 * municipio mas ligera y la tarjeta elevada sobre una banda gris.
 *
 * NO se toca el PHP de la galeria (9488) ni su JS de filtros (9490). Todo se
 * hace por CSS reordenando lo que ya existe:
 *
 *  - La franja .gav-preview-badge vive DENTRO del enlace, junto a la imagen.
 *    Basta con que el enlace sea una columna flexible y la franja deje de estar
 *    posicionada en absoluto: baja sola debajo de la foto.
 *  - .gav-card-foto deja de recortar y de ser cuadrada; el 3:2 pasa a la propia
 *    imagen con object-fit, que ya no necesita caja que la recorte.
 *  - La pildora sigue siendo la misma, colgada de .gav-card-foto.
 *
 * Un efecto que se retira a proposito: el zoom de la foto al pasar el raton. El
 * recorte lo daba .gav-card-foto{overflow:hidden}, y al quitarlo la imagen
 * ampliada se saldria por encima de la franja de datos. Se queda solo la
 * elevacion de la tarjeta, que ademas es mas limpio: un gesto, no dos.
 *
 * Reversible: desactivar este fragmento devuelve la galeria a como estaba.
 */

/* Banda gris: es la que hace que la tarjeta blanca flote. Sin ella, por mucha
   sombra que se ponga, una tarjeta blanca sobre pagina blanca no se levanta. */
.gav-grid .gav-grid-items{
	background:#F2F3F7;
	padding:clamp(16px,2.2vw,28px);
	border-radius:8px;
	gap:24px;
}

.gav-grid .gav-grid-item{
	background:#fff;
	/* 8 px, que es el radio estandar de la web: los enlaces de Idealista,
	   Facebook e Instagram del pie, el selector movil y los botones de la casa
	   ya usan 8. Las pastillas van a 999 y los flotantes son circulos. */
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(20,22,43,.06), 0 6px 18px rgba(20,22,43,.08);
	transition:transform .32s cubic-bezier(.16,1,.3,1),
	           box-shadow .32s cubic-bezier(.16,1,.3,1);
}
.gav-grid .gav-grid-item:hover{
	transform:translateY(-4px);
	box-shadow:0 2px 4px rgba(20,22,43,.07), 0 16px 34px rgba(20,22,43,.13);
}

/* La foto deja de recortar; el enlace pasa a ser columna para que la franja
   de datos caiga debajo de la imagen en vez de encima de ella. */
.gav-grid .gav-card-foto{
	aspect-ratio:auto;
	overflow:visible;
	position:relative;
}
.gav-grid .gav-card-enlace{
	display:flex;
	flex-direction:column;
	overflow:visible;
}
.gav-grid .gav-card-foto img{
	width:100%;
	height:auto;
	aspect-ratio:3/2;
	object-fit:cover;
	display:block;
}
/* Se anula el zoom heredado: ya no hay caja que lo recorte. */
.gav-grid .gav-grid-item:hover .gav-card-foto img{transform:none;}

/* Velo suave arriba, para que la pildora se lea tambien sobre cielos claros. */
.gav-grid .gav-card-foto::after{
	content:"";
	position:absolute;
	left:0; right:0; top:0;
	height:96px;
	pointer-events:none;
	z-index:1;
	background:linear-gradient(to bottom, rgba(20,22,43,.34), rgba(20,22,43,0));
}

.gav-grid .gav-muni-pill{
	z-index:2;
	top:12px;
	left:12px;
	background:rgba(20,22,43,.42);
	-webkit-backdrop-filter:saturate(150%) blur(7px);
	backdrop-filter:saturate(150%) blur(7px);
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.11em;
	text-transform:uppercase;
	padding:6px 11px;
}
/* La chincheta hacia que pareciese un marcador de mapa en vez de una etiqueta. */
.gav-grid .gav-muni-pill i,
.gav-grid .gav-muni-pill svg{display:none;}

/* Franja de datos, ya fuera de la foto. Mismo azul y mismo cuerpo que antes;
   los cuatro datos se reparten para que nunca salten a una segunda linea y las
   tarjetas queden todas de la misma altura. */
.gav-grid .gav-preview-badge{
	position:static;
	background:transparent;
	color:#222670;
	font-size:13px;
	padding:13px 16px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:8px;
	flex-wrap:nowrap;
}
.gav-grid .gav-preview-badge span{white-space:nowrap;}

.gav-grid .gav-card-texto{
	background:#fff;
	padding:14px 16px 16px;
	border-top:1px solid rgba(34,38,112,.10);
}

@media (max-width:560px){
	.gav-grid .gav-grid-items{padding:14px;gap:18px;}
}

/* ==== Fragmento 9523: Iconos de marca en SVG - complemento (CSS) ==== */
/* Complemento de "Iconos de marca en SVG (para soltar Font Awesome)".
 *
 * 1) Sin el plugin de Font Awesome, la fuente de los iconos de marca ya no
 *    existe. Se anula el glifo para que, en el instante entre que carga el HTML
 *    y corre el JS, no se vea un cuadrado vacio ni un caracter raro.
 *
 * 2) El indicador de "enviando" de Contact Form 7 pasa a ser un circulo
 *    girando, en vez del logotipo de GitHub que llevaba. Se dibuja con bordes,
 *    sin ninguna imagen ni fuente.
 */

i.fab::before, span.fab::before{
  content:none !important;
}
i.fab, span.fab{
  font-family:inherit !important;
}

/* El SVG que inyecta el JS: mismo tamano que ocupaba la letra. */
i.fab svg, span.fab svg,
i[class*="fa-"] svg{
  width:1em;
  height:1em;
  fill:currentColor;
}

/* Indicador de envio de Contact Form 7. */
.ga-spinner{
  display:inline-block;
  width:1em;
  height:1em;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-.125em;
  animation:ga-girar .7s linear infinite;
}
.ga-spinner::before{ content:none !important; }

@keyframes ga-girar{
  to{ transform:rotate(360deg); }
}

/* Quien no quiera animaciones, ve el circulo quieto. */
@media (prefers-reduced-motion:reduce){
  .ga-spinner{ animation:none; }
}

/* ==== Fragmento 9497: Portada - Envoltorios sin WPBakery (CSS) ==== */
/* Sustitutos de los envoltorios de WPBakery en las paginas-seccion de la portada.
 *
 * Solo replican lo que aportaba WPBakery, nada mas:
 *
 *  - .gav-fila-fondo  <->  [vc_row css=".vc_custom_...{padding-top:70px;
 *    padding-bottom:70px;background-color:#f7f8fc}"]
 *
 *  - .gav-col-centrada <->  [vc_column width="2/3" offset="vc_col-md-offset-2"
 *    css="padding-right:20px;padding-left:20px"]. En la rejilla de 12 columnas
 *    del tema, 2/3 con offset de 2 son 8 columnas empezando en la tercera, o
 *    sea 66,66 % centrado.
 *
 * Los estilos del contenido (titulos naranjas, bordes, enlaces de guia) siguen
 * escritos en linea dentro del propio contenido, igual que hasta ahora. No se
 * han tocado a proposito: asi el aspecto no puede cambiar.
 */

.gav-fila-fondo{
  padding-top:70px;
  padding-bottom:70px;
  background-color:#f7f8fc;
}

.gav-col-centrada{
  width:66.6666%;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}

/* A ancho completo por debajo de 992 px, NO de 900.
 *
 * La columna original era [vc_column width="2/3" offset="vc_col-md-offset-2"],
 * y el corte "md" de Bootstrap esta en 992 px: por encima 2/3 centrado, por
 * debajo ancho completo. Con el corte en 900 que habia aqui, entre 900 y 992 se
 * veia el bloque estrechado al 67% donde antes ya iba a ancho completo.
 * Menos aire vertical tambien, que en pantalla estrecha 70 px arriba y abajo
 * dejan la seccion medio vacia.
 */
@media (max-width:991px){
  .gav-fila-fondo{
    padding-top:45px;
    padding-bottom:45px;
  }
  .gav-col-centrada{
    width:100%;
    padding-left:15px;
    padding-right:15px;
  }
}

@media (max-width:560px){
  .gav-fila-fondo{
    padding-top:35px;
    padding-bottom:35px;
  }
}

/* ==== Fragmento 9495: Contacto - Dos columnas sin WPBakery (CSS) ==== */
/* Contacto: dos columnas sin WPBakery.
 *
 * Sustituye a la fila [vc_row] con dos [vc_column width="1/2"] que tenia la
 * pagina. La derecha llevaba un css inline de WPBakery
 * (.vc_custom_1627023437530) con fondo #e9e6e3 y 3 px de redondeo; se replica
 * aqui para no depender de esa clase generada.
 *
 * Los shortcodes de dentro ([section_title], [contact_info], [contact_text],
 * [contact-form-7]) son del tema y de Contact Form 7, no de WPBakery, asi que
 * siguen funcionando igual.
 */

.gav-contacto{
  display:grid;
  /* minmax(0,1fr) y no 1fr: con 1fr el navegador respeta el ancho minimo del
     contenido, y el formulario, que es mas rigido que el bloque de datos, se
     llevaba mas sitio. A 850 px salian 320 y 350 px en vez de mitad y mitad.
     Bootstrap repartia 50/50 exactos, y asi vuelve a hacerlo. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:30px;
  align-items:start;
}

.gav-contacto-form{
  background:#e9e6e3;
  border-radius:3px;
  padding:25px;
}

/* El formulario no debe desbordar su columna en anchos justos. */
.gav-contacto-form input,
.gav-contacto-form textarea,
.gav-contacto-form select{
  max-width:100%;
  box-sizing:border-box;
}

/* Una sola columna por debajo de 768 px, NO de 900.
 *
 * WPBakery usaba [vc_column width="1/2"], que se traduce en vc_col-sm-6, y en
 * Bootstrap el corte "sm" esta en 768 px: por encima dos columnas, por debajo
 * una. Con el corte en 900 px que habia aqui antes, entre 768 y 900 se veia una
 * sola columna estirada donde antes habia dos. Se nota sobre todo en tablet en
 * horizontal y en cualquier monitor con el navegador ampliado, porque el zoom
 * reduce el ancho efectivo en CSS. Ahora se comporta igual que antes.
 */
@media (max-width:767px){
  .gav-contacto{
    grid-template-columns:1fr;
    gap:24px;
  }
}

@media (max-width:560px){
  .gav-contacto{ gap:20px; }
  .gav-contacto-form{ padding:18px; }
}

/* ==== Fragmento 9489: Galeria - Rejilla [ga_inmuebles] (2 de 3: CSS) ==== */
/* Andamiaje de la rejilla [ga_inmuebles].
 *
 * Solo la estructura: columnas, hueco, zona de foto, pie de tarjeta y chips.
 * El aspecto de la franja de datos y de la pildora de municipio NO se repite
 * aqui: sigue viniendo del fragmento "Galeria - Badges datos ACF en tarjetas
 * (CSS)", porque .gav-preview-badge y .gav-muni-pill no dependen de ningun
 * ancestro de WPBakery. Lo unico que necesitaban era un padre con
 * position:relative, y ese papel lo hace ahora .gav-card-foto.
 *
 * Se repiten solo tres reglas, las de nombre y precio, porque alli cuelgan de
 * .vc_gitem-post-data-source-post_title, que con el shortcode ya no existe.
 */

.gav-grid{ --gav-grid-gap:10px; }

/* Chips de filtro. Mismos colores que los del fragmento "Chips filtro
   poblacion", para que las dos galerias se vean igual mientras coexistan. */
.gav-grid-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:0 0 22px;
}
.gav-grid-filtro{
  cursor:pointer;
  padding:7px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  border:1.5px solid var(--gav-azul,#222670);
  color:var(--gav-azul,#222670);
  background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  -webkit-user-select:none;
  user-select:none;
}
.gav-grid-filtro:hover:not(.gav-activo){
  background:rgba(242,109,22,0.12);
  border-color:var(--gav-naranja,#F26D16);
  color:var(--gav-naranja,#F26D16);
}
.gav-grid-filtro.gav-activo{
  background:var(--gav-naranja,#F26D16);
  border-color:var(--gav-naranja,#F26D16);
  color:#F8F8F8;
}
.gav-grid-filtro:focus-visible{
  outline:2px solid var(--gav-naranja,#F26D16);
  outline-offset:2px;
}

/* Las columnas se deciden aqui, no con una variable inline en el elemento:
   un estilo inline gana a la hoja de estilos aunque coincida la consulta de
   medios, y por eso antes salian cuatro columnas de 79 px en movil. El
   shortcode pasa el maximo en data-columnas y aqui se rebaja por pantalla. */
/* Desplegable de poblacion: solo en movil. Ver la consulta de medios del final. */
.gav-grid-select{
  display:none;
  width:100%;
  margin:0 0 18px;
  padding:11px 14px;
  font-size:15px;
  font-weight:600;
  color:var(--gav-azul,#222670);
  background:#fff;
  border:1.5px solid var(--gav-azul,#222670);
  border-radius:8px;
  -webkit-appearance:none;
  appearance:none;
  /* Flecha propia, porque al quitar la apariencia nativa desaparece. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23222670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.gav-grid-select:focus-visible{
  outline:2px solid var(--gav-naranja,#F26D16);
  outline-offset:2px;
}

.gav-grid-items{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gav-grid-gap,10px);
}
.gav-grid[data-columnas="1"] .gav-grid-items{ grid-template-columns:1fr; }
.gav-grid[data-columnas="2"] .gav-grid-items{ grid-template-columns:repeat(2,1fr); }
.gav-grid[data-columnas="3"] .gav-grid-items{ grid-template-columns:repeat(3,1fr); }
.gav-grid-item{ min-width:0; }
.gav-grid-item[hidden]{ display:none !important; }

/* Zona de la foto: el ancestro con position:relative del que cuelgan la
   franja de datos y la pildora de municipio. */
.gav-card-foto{
  position:relative;
  overflow:hidden;
  /* Cuadrada, como la zona de foto de WPBakery. Se midio la galeria actual en
     movil: 345 x 345 px, proporcion 1.000. WPBakery no usaba una etiqueta img,
     ponia la imagen como fondo recortado, asi que las fotos de distinta
     proporcion salian todas cuadradas y la rejilla quedaba regular. Con img y
     height:auto las tarjetas salian apaisadas y de alturas distintas. */
  aspect-ratio:1 / 1;
}
.gav-card-enlace{
  display:block;
  width:100%;
  height:100%;
  line-height:0;
}
/* El selector lleva .gav-grid delante a proposito. El tema trae
   "section.blog img, section.page img { height:auto }", que con dos elementos y
   una clase tiene mas especificidad que ".gav-card-foto img" y ganaba: la foto
   se quedaba en 259 px de alto dentro de una caja de 345 y aparecia una banda
   blanca de 86 px entre la imagen y la franja de datos. Con dos clases la
   especificidad ya es mayor y no hace falta ningun !important. */
.gav-grid .gav-card-foto img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s ease;
}
.gav-grid .gav-grid-item:hover .gav-card-foto img{ transform:scale(1.06); }

/* Pie de la tarjeta, con el mismo gris que tenia la zona C de WPBakery. */
.gav-card-texto{
  background:#f9f9f9;
  padding:14px 16px;
}
.gav-card-texto h4{
  margin:0;
  font-size:16px;
}
.gav-card-texto h4 .gav-card-nombre,
.gav-card-texto h4 .gav-card-precio{ display:block; }
.gav-card-texto h4 .gav-card-nombre{
  font-weight:500;
  line-height:1.3;
}
.gav-card-texto h4 .gav-card-precio{
  margin-top:3px;
  font-weight:700;
  color:var(--gav-naranja,#F26D16);
  letter-spacing:.2px;
}

/* Columnas por tamano de pantalla.
 *
 * Los rangos son excluyentes (min-width + max-width) a proposito. Con dos
 * consultas solapadas del tipo "max-width:1200" y "max-width:900" mandaba la
 * de 1200 en las dos, porque llevaba un :not() mas y ganaba por especificidad:
 * en tablet salian tres columnas en vez de dos. Con rangos que no se pisan no
 * hay competencia posible.
 *
 * El :not() evita subir columnas a una rejilla que pidio menos: la galeria y la
 * portada piden 4, pero si algun dia se inserta con columnas="2" debe seguir
 * en 2 aunque haya sitio.
 */
@media (min-width:901px) and (max-width:1200px){
  .gav-grid:not([data-columnas="1"]):not([data-columnas="2"]) .gav-grid-items{
    grid-template-columns:repeat(3,1fr);
  }
}

/* Tablet y movil: dos columnas, igual que el listado de la portada, que ya
   venia con data-on-line-xs="2". */
@media (max-width:900px){
  .gav-grid:not([data-columnas="1"]) .gav-grid-items{
    grid-template-columns:repeat(2,1fr);
  }
  .gav-card-texto{ padding:12px; }
  .gav-card-texto h4{ font-size:15px; }
  .gav-grid-filtro{ font-size:12px; padding:6px 13px; }
}

/* Movil estrecho.
 *
 * Columnas segun data-movil, que por defecto es 1. Con dos columnas de 168 px
 * la franja de datos desbordaba en 2 de las 11 tarjetas y la foto quedaba
 * demasiado pequena. La portada se insertara con movil="2".
 *
 * El filtro pasa de chips a desplegable. Con cinco poblaciones los chips
 * necesitaban scroll lateral y lo que quedaba fuera de la pantalla no se veia:
 * el visitante perdia filtros sin enterarse, y con mas zonas iria a peor. El
 * desplegable las muestra todas y ocupa una linea. Es lo que hacia WPBakery.
 */
@media (max-width:560px){
  .gav-grid[data-movil="1"] .gav-grid-items{ grid-template-columns:1fr; }
  .gav-grid[data-movil="2"] .gav-grid-items{ grid-template-columns:repeat(2,1fr); }

  /* Con dos columnas en movil la franja no cabe con el tamano normal. */
  .gav-grid[data-movil="2"] .gav-preview-badge{ font-size:10px; padding:5px 3px; gap:2px; }
  .gav-grid[data-movil="2"] .gav-preview-badge span{ gap:3px; }
  .gav-grid[data-movil="2"] .gav-preview-badge i{ font-size:10px; }

  .gav-grid .gav-grid-filtros{ display:none; }
  .gav-grid .gav-grid-select{ display:block; }

  .gav-card-texto{ padding:12px; }
  .gav-card-texto h4{ font-size:15px; }
}

/* ==== Fragmento 9474: Rendimiento - No descargar la fuente Font Awesome solid (CSS) ==== */
/* Evitar la descarga de la fuente Font Awesome "solid".
 *
 * Todos los iconos macizos del sitio se sustituyen por SVG de Lucide y Tabler
 * nada mas cargar la pagina. Pero el navegador, para pintarlos durante esa
 * decima de segundo, se descarga igualmente fa-solid-900.woff2 desde
 * use.fontawesome.com: una peticion a un dominio externo que ya no hace falta.
 *
 * Anulando el glifo, el navegador no necesita esa fuente y no la pide. Ademas
 * desaparece el parpadeo en el que se veia el icono macizo antes del SVG.
 *
 * Comprobado antes de aplicarlo: los 18 iconos solid que existen en la web
 * estan todos en el mapa de sustitucion, ninguno se queda sin dibujo.
 *
 * Los de marca (fab: WhatsApp, Facebook, Instagram, YouTube) NO se tocan:
 * esos si usan su fuente y son logotipos, no se sustituyen por nada.
 *
 * Si algun dia anades una caracteristica con un icono nuevo, avisame para
 * meterlo en el mapa: si no, saldria sin icono en vez de con el macizo.
 */

i.fas::before,  i.fa-solid::before,
span.fas::before, span.fa-solid::before,
i.far::before,  i.fa-regular::before,
span.far::before, span.fa-regular::before{
  content:none !important;
}

i.fas, i.fa-solid, span.fas, span.fa-solid,
i.far, i.fa-regular, span.far, span.fa-regular{
  font-family:inherit !important;
}

/* ==== Fragmento 9465: Valora - El formulario primero (CSS) ==== */
/* Valora tu vivienda: el formulario primero.
 *
 * El problema: habia 2.400 px de texto antes del cuestionario, mas de tres
 * pantallas de movil. Quien llegaba desde Google o desde el boton de la
 * portada tenia que desplazar muchisimo para poder hacer algo.
 *
 * Se reordena con flex, no moviendo nada en la pagina: asi no hay salto al
 * cargar y desactivando este fragmento vuelve el orden original.
 *
 * El orden respeta lo que hay que respetar. El aviso de "no damos precios sin
 * ver la vivienda" se queda pegado al formulario, no enterrado al final: es
 * una condicion del servicio, no un argumento de venta. Ademas la cabecera
 * del propio formulario ya dice "Visitamos tu vivienda".
 */

#ga-valoracion .ga-wrap{
  display:flex;
  flex-direction:column;
}

#ga-valoracion .ga-wrap > .ga-card  { order:1; }  /* el cuestionario */
#ga-valoracion .ga-wrap > .ga-aviso { order:2; }  /* la condicion, pegada a el */
#ga-valoracion .ga-wrap > .ga-hero  { order:3; }  /* el gancho */
#ga-valoracion .ga-wrap > .ga-texto { order:4; }  /* por que vender con nosotros */
#ga-valoracion .ga-wrap > .ga-difs  { order:5; }  /* los cuatro diferenciales */

/* Un poco de aire entre bloques, que al ser flex ya no colapsan margenes. */
#ga-valoracion .ga-wrap > *{ margin-top:0; }
#ga-valoracion .ga-wrap > .ga-aviso{ margin-top:22px; }
#ga-valoracion .ga-wrap > .ga-hero{ margin-top:34px; }

/* Al subir el formulario, el hueco que antes llenaba el texto del gancho se
   quedaba en blanco: 124 px entre el titulo de la pagina y la tarjeta, de los
   cuales 100 son el espaciado del tema. Se recorta parte, dejando aire. */

#ga-valoracion .ga-wrap{ padding-top:8px; }

@media (min-width:901px){
  #ga-valoracion{ margin-top:-38px; }
}
@media (max-width:900px){
  #ga-valoracion{ margin-top:-46px; }
}

/* ==== Fragmento 9464: Portada - Dos accesos en el héroe (CSS) ==== */
/* Dos accesos en la primera pantalla de la portada.
   Siguen el estilo propio del sitio (.ga-btn): radio de 8 px, peso 700 y
   caja sin mayusculas. Los dos son identicos en tamano: la jerarquia la
   marca solo el color, blanco para comprar y naranja para vender, que es
   el objetivo principal.

   Se fija la altura con min-height y flex porque si la decide el texto los
   dos botones salen con alturas distintas (49 y 52 px). */

.ga-heroe-acciones{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  margin-top:30px;
}

.ga-heroe-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:220px;
  min-height:54px;
  padding:0 30px;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none !important;
  border-radius:8px;
  border:0;
  box-shadow:0 4px 14px rgba(12,15,28,.18);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ga-heroe-comprar{ background:#FFFFFF; color:var(--gav-azul,#222670) !important; }
.ga-heroe-comprar:hover,
.ga-heroe-comprar:focus-visible{
  background:#FFFFFF; color:var(--gav-azul,#222670) !important;
  transform:translateY(-2px); box-shadow:0 9px 22px rgba(12,15,28,.28);
}

.ga-heroe-vender{ background:var(--gav-naranja,#F26D16); color:#FFFFFF !important; }
.ga-heroe-vender:hover,
.ga-heroe-vender:focus-visible{
  background:#DD6111; color:#FFFFFF !important;
  transform:translateY(-2px); box-shadow:0 9px 22px rgba(12,15,28,.32);
}

.ga-heroe-btn:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }

@media (max-width:600px){
  .ga-heroe-acciones{ flex-direction:column; gap:12px; margin-top:26px; padding:0 30px; }
  .ga-heroe-btn{ width:100%; min-width:0; min-height:52px; font-size:15px; padding:0 18px; }
}

@media (prefers-reduced-motion: reduce){
  .ga-heroe-btn{ transition:none; }
  .ga-heroe-btn:hover{ transform:none; }
}

/* El CSS del personalizador trae una regla antigua de los bloques de zona que
   ataca a cualquier enlace hacia la galeria y le fuerza otro redondeo y otro
   relleno. Como el boton de comprar apunta ahi, hay que ganarle en
   especificidad o sale descuadrado respecto al de vender. */

.caption .ga-heroe-acciones a.ga-heroe-btn[href],
.ga-heroe-acciones a.ga-heroe-btn[href]{
  border-radius:8px !important;
  min-height:54px !important;
  padding:0 30px !important;
  border:0 !important;
  font-size:15px !important;
  font-weight:700 !important;
  text-transform:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto;
}
.caption .ga-heroe-acciones a.ga-heroe-comprar[href],
.ga-heroe-acciones a.ga-heroe-comprar[href]{
  background:#FFFFFF !important; color:var(--gav-azul,#222670) !important;
}
.caption .ga-heroe-acciones a.ga-heroe-vender[href],
.ga-heroe-acciones a.ga-heroe-vender[href]{
  background:var(--gav-naranja,#F26D16) !important; color:#FFFFFF !important;
}

@media (max-width:600px){
  .caption .ga-heroe-acciones a.ga-heroe-btn[href],
  .ga-heroe-acciones a.ga-heroe-btn[href]{
    width:100% !important; min-height:52px !important; padding:0 18px !important;
  }
}

/* ==== Fragmento 9457: Portada - Datos y precio en las fichas (CSS) ==== */
/* Portada: mismos elementos visuales que las tarjetas de Propiedades.
   La franja va en absoluto sobre la foto, dentro de .portfolio-item, que el
   tema ya posiciona en absolute. No cambia el tamano de la ficha.

   Ojo: el tema estira a altura completa los div que hay dentro de la ficha,
   por eso hacen falta height:auto y top:auto, o la franja tapa la foto. */

.portfolio-item .gav-preview-badge{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  height:auto !important;
  width:auto !important;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background:rgba(248,248,248,0.94);
  color:var(--gav-azul,#222670);
  font-weight:600;
  font-size:12.5px;
  padding:7px 6px;
  gap:4px;
  z-index:6;
  pointer-events:none;
}
.portfolio-item .gav-preview-badge span{
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  height:auto !important;
  width:auto !important;
}
.portfolio-item .gav-preview-badge i{
  color:var(--gav-azul,#222670);
  font-size:12.5px;
  height:auto !important;
  width:auto !important;
}

/* El texto del overlay sube para no quedar debajo de la franja.
   Hace falta especificidad alta: el CSS del personalizador se carga despues
   que este fragmento y ya trae su propio !important sobre .overlay-info.

   Los 44 px de antes se quedaban cortos y el municipio salia pegado a la
   franja, con los descendentes cortados. Medido en las 8 fichas de la portada:
   en escritorio la franja mide 34 px y el municipio la invadia 5 px; en 992 o
   menos la franja mide 28 px y solo quedaba 1 px de hueco. Ahora se reserva la
   altura de la franja mas 12 px de aire, por tramo. Si algun dia se cambia el
   tamano de letra de la franja, hay que revisar estos dos numeros. */
.portfolio-items .portfolio-item .img-overlay .overlay-info{
  padding-bottom:62px !important;
}

/* Nombre y precio separados, igual que en Propiedades. */
.portfolio-item .overlay-info h6 .gav-card-nombre,
.portfolio-item .overlay-info h6 .gav-card-precio{ display:block; }
.portfolio-item .overlay-info h6 .gav-card-nombre{ font-weight:600; line-height:1.3; }
.portfolio-item .overlay-info h6 .gav-card-precio{
  margin-top:2px;
  font-weight:700;
  color:var(--gav-naranja,#F26D16);
  letter-spacing:.2px;
}

@media (max-width:992px){
  .portfolio-item .gav-preview-badge{ font-size:11px; padding:5px 4px; }
  .portfolio-item .gav-preview-badge i{ font-size:11px; }

  /* Franja de 28 px en tablet y movil: 28 + 12 de aire. */
  .portfolio-items .portfolio-item .img-overlay .overlay-info{
    padding-bottom:56px !important;
  }
}

/* ==== Fragmento 9455: Móvil - Áreas de pulsación en pie y contacto (CSS) ==== */
/* 1) Cabecera fija: hueco de la barra de administracion en movil.
   Al desplazar, el tema pone la cabecera en position:fixed con top:46px para
   dejar sitio a la barra de WordPress. Pero por debajo de 783 px esa barra no
   es fija: se va con el scroll y deja un hueco de 46 px por el que se ve la
   pagina. Solo lo sufre quien tiene la sesion abierta; un visitante no.
   Se corrige pegandola arriba del todo cuando ya esta flotando. */

@media screen and (max-width: 782px) {
  .admin-bar .navbar.floating,
  .admin-bar .navbar.slide-down {
    top: 0 !important;
  }
}

/* 2) Areas de pulsacion en movil.
   Los enlaces del pie (telefono, WhatsApp, correo, menus) median entre 16 y
   22 px de alto y son incomodos de pulsar. Google recomienda 48.
   Se gana altura con relleno vertical, no con font-size, para no cambiar
   el aspecto del pie. */

@media (max-width: 992px) {

  .footer .menu li a,
  .footer .widget_nav_menu li a,
  footer .menu li a,
  footer .widget_nav_menu li a,
  footer .lang-item a {
    display: block;
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 1.35;
  }

  footer a[href^="tel:"],
  footer a[href^="mailto:"],
  footer a[href*="wa.me"],
  footer a[href*="maps"] {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.35;
  }

  .gc-mapa a[href^="tel:"],
  .gc-mapa a[href^="mailto:"],
  .gc-mapa a[href*="maps"],
  .ga-contacto a[href^="tel:"],
  .ga-contacto a[href^="mailto:"] {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .ga-zona-bloque h3 a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  footer .social a,
  footer .social-icons a,
  footer ul.social li a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 3) El boton del menu en movil tenia un area de pulsacion de 24x19 px.
   Google pide 48 y es el control mas importante de la cabecera.

   OJO: el primer intento le puso display:flex al boton y eso coloco las tres
   barras en fila, aplastadas a 6 px. Las barras son hijas del boton, asi que
   NO se puede tocar su display ni su relleno.

   Solucion: dejar el boton exactamente como esta y superponerle un area
   invisible de 48x48 centrada. Se agranda la zona que responde al dedo sin
   alterar ni un pixel del icono. */

@media (max-width: 992px) {
  .navbar .navbar-toggle,
  .navbar-toggle {
    position: relative;
  }
  .navbar .navbar-toggle::after,
  .navbar-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
  }
}

/* ==== Fragmento 9249: Iconos SVG en vez de emoji - Conócenos + Valora (CSS) ==== */
/* Iconos SVG en vez de emoji - fusion de Conocenos + Valora */
.gc-srv-ico svg,
.gc-honor-ico svg,
.gc-raicv-ico svg,
.gc-mapa span svg,
.ga-dif-ico svg,
.ga-aviso-ico svg,
.ga-tipo-ico svg,
.ga-confirm-ico svg {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}

/* Conocenos */
.gc-srv-ico svg { stroke: #fff !important; stroke-width: 1.8px; width: 18px; height: 18px; }
.gc-honor-ico svg { stroke: var(--gav-azul) !important; stroke-width: 1.8px; width: 26px; height: 26px; }
.gc-raicv-ico svg { stroke: var(--gav-azul) !important; stroke-width: 1.8px; width: 20px; height: 20px; }
.gc-mapa span svg { stroke: var(--gav-azul) !important; stroke-width: 1.8px; width: 16px; height: 16px; }

/* Valora */
.ga-dif-ico svg,
.ga-aviso-ico svg,
.ga-tipo-ico svg,
.ga-confirm-ico svg {
  stroke: var(--gav-azul) !important;
  fill: none !important;
  stroke-width: 1.6px;
}
.ga-dif-ico svg { width: 30px; height: 30px; }
.ga-aviso-ico svg { width: 22px; height: 22px; }
.ga-tipo-ico svg { width: 22px; height: 22px; }
.ga-confirm-ico svg { width: 44px; height: 44px; }

/* Version en ingles: botones de WhatsApp y llamada del formulario.
   Van sobre fondo de color, por eso el trazo es blanco. */
.ga-wa-btn svg,
.ga-call-btn svg {
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
}


/* ==== Fragmento 9248: Marca - Variables de color centralizadas (CSS) ==== */
/* Variables centralizadas de la identidad de marca de Gran Avenida.
   Referenciar estas variables en vez de repetir los hex a mano. */
:root {
  --gav-azul: #222670;
  --gav-naranja: #F26D16;
}

/* ==== Fragmento 9219: Home - Franja de confianza (CSS) ==== */
/* Home - Franja de confianza (reutiliza cifras de la pagina Valora)
   Rediseno 21 ago 2026: profundidad, separadores y cifras que cuentan al
   entrar en pantalla. Solo se usan el azul y el naranja de marca; los dos
   tonos extra de azul son el mismo color aclarado y oscurecido.
   La animacion es opt-in: el JS anade .gav-anim. Sin JS la franja se ve
   completa, nunca en blanco. */
.gav-trust-bar {
  position: relative;
  overflow: hidden;
  background: #222670;
  background-image:
    radial-gradient( 1100px 320px at 14% -40%, rgba(242,109,22,.20), transparent 70% ),
    radial-gradient( 900px 300px at 88% 140%, rgba(242,109,22,.13), transparent 70% ),
    linear-gradient( 180deg, #2A2E85 0%, #222670 55%, #1B1E5C 100% );
  padding: 46px 20px 42px;
}

/* Filo naranja superior: cose la franja con la foto de arriba */
.gav-trust-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient( 90deg, transparent, #F26D16 22%, #F26D16 78%, transparent );
}

.gav-trust-bar__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  text-align: center;
}

.gav-trust-item {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
  padding: 6px 24px;
}

/* Separadores finos entre las tres cifras */
.gav-trust-item + .gav-trust-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  width: 1px;
  height: 76%;
  background: linear-gradient( 180deg, transparent, rgba(248,248,248,.26), transparent );
}

.gav-trust-number {
  display: block;
  font-size: 3.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: #F26D16;
  font-variant-numeric: tabular-nums;
}

.gav-trust-label {
  display: block;
  margin-top: 12px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(248,248,248,.72);
}

/* ============ La entrada ============
   Todo cuelga de .gav-anim, que solo pone el JS. Sin JS no hay nada de
   esto y la franja se ve completa y quieta. */

/* 1. El filo naranja se dibuja desde el centro hacia los lados */
.gav-trust-bar.gav-anim::before {
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}

.gav-trust-bar.gav-anim.gav-visible::before { transform: scaleX(1); }

/* 2. Un destello recorre la franja una sola vez. Lo recorta el
      overflow:hidden de la banda. */
.gav-trust-bar.gav-anim::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-14deg);
  background: linear-gradient( 100deg, transparent, rgba(248,248,248,.10) 42%, rgba(242,109,22,.16) 58%, transparent );
}

.gav-trust-bar.gav-anim.gav-visible::after {
  animation: gavDestello 1.6s cubic-bezier(.4,0,.2,1) .3s 1 both;
}

@keyframes gavDestello {
  0%   { left: -45%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 108%; opacity: 0; }
}

/* 3. Los tres bloques suben con un rebote corto, uno detras de otro */
.gav-trust-bar.gav-anim .gav-trust-item {
  opacity: 0;
  transform: translateY(34px) scale(.94);
  transition: opacity .7s ease, transform .85s cubic-bezier(.16,.84,.28,1.12);
}

.gav-trust-bar.gav-anim.gav-visible .gav-trust-item {
  opacity: 1;
  transform: none;
}

/* 4. Las cifras entran desenfocadas y enfocan mientras cuentan */
.gav-trust-bar.gav-anim .gav-trust-number {
  filter: blur(7px);
  transition: filter .8s ease;
}

.gav-trust-bar.gav-anim.gav-visible .gav-trust-number { filter: none; }

/* El escalonado: 170 ms entre bloque y bloque, igual que el del JS */
.gav-trust-bar.gav-anim.gav-visible .gav-trust-item:nth-child(2),
.gav-trust-bar.gav-anim.gav-visible .gav-trust-item:nth-child(2) .gav-trust-number { transition-delay: .17s; }
.gav-trust-bar.gav-anim.gav-visible .gav-trust-item:nth-child(3),
.gav-trust-bar.gav-anim.gav-visible .gav-trust-item:nth-child(3) .gav-trust-number { transition-delay: .34s; }

/* 5. Los separadores crecen cuando las cifras ya han aterrizado */
.gav-trust-bar.gav-anim .gav-trust-item + .gav-trust-item::before {
  transform: scaleY(0);
  transition: transform .7s cubic-bezier(.22,.61,.36,1) .55s;
}

.gav-trust-bar.gav-anim.gav-visible .gav-trust-item + .gav-trust-item::before { transform: scaleY(1); }

/* Quien ha pedido menos movimiento lo ve todo quieto y terminado */
@media (prefers-reduced-motion: reduce) {
  .gav-trust-bar.gav-anim .gav-trust-item,
  .gav-trust-bar.gav-anim.gav-visible .gav-trust-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gav-trust-bar.gav-anim .gav-trust-number { filter: none; transition: none; }
  .gav-trust-bar.gav-anim::before { transform: none; transition: none; }
  .gav-trust-bar.gav-anim.gav-visible::after { animation: none; opacity: 0; }
  .gav-trust-bar.gav-anim .gav-trust-item + .gav-trust-item::before {
    transform: none;
    transition: none;
  }
}

@media (max-width: 768px) {
  .gav-trust-bar { padding: 34px 18px 30px; }
  .gav-trust-bar__inner { gap: 20px; }
  .gav-trust-number { font-size: 2.3rem; }
  .gav-trust-label { margin-top: 6px; font-size: .88rem; }
  /* En movil las tres cifras se apilan, como antes: el separador
     vertical no encaja, se retira */
  .gav-trust-item + .gav-trust-item::before { display: none; }
}


/* ==== Fragmento 9218: Chips filtro poblacion - Portada (CSS) ==== */
/* Chips de filtro por poblacion.
 *
 * Aqui quedan solo los de la portada. El bloque de la galeria, que estilaba
 * .vc_grid-filter-item y .vc_active del widget de WPBakery, se quito el 30 jul
 * 2026: esa galeria se sustituyo por el shortcode [ga_inmuebles], que trae sus
 * propios chips (.gav-grid-filtro) con estos mismos colores, definidos en el
 * fragmento "Galeria - Rejilla [ga_inmuebles] (CSS)". En movil la galeria pasa
 * a un desplegable, asi que ahi tampoco hay chips que estilar.
 */

/* Portada (Home) - widget "Nuestras propiedades" del tema. */
.portfolio-filters span {
  border: 1.5px solid #222670 !important;
  color: #222670 !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.portfolio-filters span:hover:not(.active) {
  background: rgba(242,109,22,0.12) !important;
  border-color: #F26D16 !important;
  color: #F26D16 !important;
}

.portfolio-filters span.active {
  background: #F26D16 !important;
  border-color: #F26D16 !important;
  color: #F8F8F8 !important;
}


/* ==== Fragmento 9195: Galería - Badges datos ACF en tarjetas (CSS) ==== */
/* Datos del inmueble y municipio en las tarjetas.
 *
 * Los dos elementos van en absoluto sobre la foto, dentro de un contenedor con
 * position:relative, y no ocupan sitio en la caja, asi que no alteran la altura
 * de la rejilla.
 *
 * Ese contenedor era .vc_gitem-zone-a cuando la galeria la pintaba WPBakery.
 * Ahora es .gav-card-foto en la galeria y .portfolio-item en la portada, y cada
 * uno se declara relative en su propio fragmento. La regla de .vc_gitem-zone-a
 * se quito el 30 jul 2026: ese selector ya no existe en ninguna pagina.
 *
 * Este fragmento sigue siendo necesario: es el que define el aspecto de
 * .gav-preview-badge y .gav-muni-pill, y lo reutilizan las dos. */

/* Franja de datos, al pie de la foto. Visible siempre: antes solo salia al
   pasar el raton en escritorio y la tarjeta se veia vacia en reposo. */
.gav-preview-badge{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background:rgba(248,248,248,0.94);
  color:var(--gav-azul,#222670);
  font-weight:600;
  font-size:13px;
  padding:8px 6px;
  gap:4px;
  box-shadow:0 -1px 4px rgba(0,0,0,0.15);
  z-index:5;
  pointer-events:none;
}
.gav-preview-badge span{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.gav-preview-badge i{ color:var(--gav-azul,#222670); font-size:13px; }

/* Municipio, arriba a la izquierda. Se le permite romper en dos lineas para
   que "San Antonio de Benageber" no salga cortado con puntos suspensivos. */
.gav-muni-pill{
  position:absolute;
  top:10px; left:10px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:calc(100% - 20px);
  background:rgba(34,38,112,0.92);
  color:#F8F8F8;
  font-size:11.5px;
  font-weight:600;
  line-height:1.25;
  padding:6px 10px;
  border-radius:999px;
  pointer-events:none;
}
.gav-muni-pill i{ font-size:11px; flex:0 0 auto; }

/* Nombre y precio separados en el titulo de la tarjeta. Antes iban en una
   sola linea en negrita; el precio ahora respira y lleva el color de marca. */
/* Nombre y precio: las reglas vivas estan en el fragmento de la rejilla
   ([ga_inmuebles], sobre .gav-card-texto) y en el de la portada (sobre
   .portfolio-item .overlay-info h6). Las que habia aqui colgaban de
   .vc_gitem-post-data-source-post_title, que era marcado de WPBakery y ya no
   existe: se quitaron el 30 jul 2026. */

@media (max-width:992px){
  .gav-preview-badge{ font-size:11px; padding:5px 4px; }
  .gav-preview-badge i{ font-size:11px; }
  .gav-muni-pill{ font-size:11px; padding:5px 9px; top:8px; left:8px; }
}


/* ==== Portada: la foto de cabecera al tamano de cada dispositivo ==== */
/* Anadido el 21 ago 2026.
 *
 * Antes lo hacia el JS del tema: guardaba la URL en un atributo
 * data-source y la ponia como fondo en un style inline. Tres problemas:
 *
 *   1. El buscador de recursos del navegador NO ve una URL metida en un
 *      data-source, asi que no podia adelantar la descarga.
 *   2. Ese JS viaja en el combinado de 121 KB y con carga retrasada de
 *      LiteSpeed, asi que la foto no se pedia hasta los ~750 ms.
 *   3. El tema deja el div en opacity:0 con transition de 1s, asi que
 *      despues de llegar la foto quedaba todavia un segundo de fundido.
 *
 * Ahora el fondo lo pone el CSS, que llega antes que cualquier JS, y cada
 * pantalla recibe el tamano que necesita. Los tres archivos ya existian:
 * los genero WordPress al subir la foto, no se ha subido nada nuevo.
 *
 *   hasta  768 px ->  82 KB  (72% menos que antes)
 *   hasta 1024 px -> 146 KB  (51% menos)
 *   mas grande    -> 298 KB  la de siempre
 *
 * El !important no es pereza, hace dos cosas: gana al style inline que el
 * JS del tema sigue escribiendo, y evita la segunda descarga, porque el
 * navegador solo pide la imagen de la declaracion que gana.
 *
 * Las URL van con barra inicial a proposito: este CSS se imprime inline en
 * el HTML, asi que una ruta relativa se resolveria contra la pagina.
 *
 * El selector es div.image[data-source] y NO div.image[data-source], que es lo que
 * puse primero y solo funcionaba en escritorio. En movil el JS del tema
 * SACA ese div de section.intro y lo mete en un div.slider.fullscreen, asi
 * que un selector con ancestro deja de encajar en cuanto corre el JS y
 * volvia a ganar el style inline: el movil se descargaba las DOS fotos, la
 * de 82 KB y la de 298 KB. Peor que antes de tocar nada. El atributo
 * data-source viaja con el elemento, asi que encaja en los dos sitios.
 *
 * Ese div solo existe en las dos portadas, castellano e ingles. Comprobado
 * que ninguna otra de las 62 paginas del sitemap lo lleva.
 */
/* La foto de cabecera de la portada YA NO ESTA AQUI.

   El 3 sep 2026 se movio a ga_css_critico_heroe() en functions.php, que la imprime
   INLINE en la cabecera del HTML y solo en la portada.

   El motivo: al pasar este archivo de inline a archivo encolado, el fondo del heroe
   dejo de estar disponible hasta que llegaba la hoja, una ida y vuelta mas tarde.
   Jose Luis lo noto en el movil: "sigue haciendo una carga diferida". Y tenia
   razon; fue un efecto secundario de encolar el CSS.

   El fondo del heroe es CSS CRITICO: tiene que viajar con el HTML. Son 2,5 KB en
   la portada, LQIP incluido, y solo ahi. El resto de este archivo sigue encolado y
   cacheado, que es lo que interesa.

   Si algun dia se cambia la foto, se cambia en functions.php, no aqui. Y los tres
   media tienen que seguir coincidiendo con los del preload de la misma funcion. */

/* ==== Saltos de ancla: que no los tape la barra fija ==== */
/* Anadido el 21 ago 2026, porque el boton "Vende tu casa" de la portada
 * lleva a /valora-tu-vivienda/#valorar y el titular "Solicita tu valoracion
 * gratuita" quedaba escondido detras de la barra de navegacion.
 *
 * Medido: la barra es position:fixed y mide 118 px de 769 px de ancho hacia
 * arriba, y 62-72 px por debajo. El navegador dejaba el ancla en y=0, asi que
 * se comia justo el titular. La barra de administracion de WordPress anade
 * otros 32 px, pero solo la vemos nosotros dos estando dentro.
 *
 * scroll-padding-top va en el elemento que hace scroll (html), no en el
 * destino, y arregla TODOS los saltos de ancla de la web de una vez, tambien
 * los que se anadan manana. La alternativa, scroll-margin-top en cada
 * destino, habria que repetirla en cada ancla nueva.
 *
 * El corte de 768 px es el mismo que usa la foto de cabecera, a proposito.
 *
 * WordPress ya declara scroll-padding-top en html para su barra; esta hoja se
 * imprime despues, asi que gana. Y :has() sube el valor cuando la barra esta,
 * sin depender del orden.
 */
html {
  scroll-padding-top: 88px;
}

@media (min-width: 769px) {
  html {
    scroll-padding-top: 134px;
  }
}

html:has(body.admin-bar) {
  scroll-padding-top: 120px;
}

@media (min-width: 769px) {
  html:has(body.admin-bar) {
    scroll-padding-top: 166px;
  }
}

/* ==== Formulario de valoracion: accesibilidad y movil ==== */
/* Anadido el 21 ago 2026, junto con gavFormularioAccesible() del JS del pie.
 *
 * Lo de los 16 px no es capricho: iOS Safari HACE ZOOM sobre la pagina en
 * cuanto pones el dedo en un campo cuya letra mide menos de 16 px. Los campos
 * estaban a 14, asi que la maqueta daba un salto en cada campo del
 * cuestionario. Solo se cambia por debajo de 769 px: en escritorio los 14 px
 * estan bien y no hay zoom que evitar.
 */
@media (max-width: 768px) {
  #ga-valoracion input,
  #ga-valoracion select,
  #ga-valoracion textarea {
    font-size: 16px !important;
  }
}

/* Texto solo para lectores de pantalla. La clase del nucleo de WordPress no
   esta garantizada en el frontend para quien no ha entrado, asi que se declara
   aqui en vez de confiar en ella. */
.gav-solo-lector {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Foco visible. Las nueve opciones son <div> que el JS convierte en radio, y
   sin esto no se ve absolutamente nada al recorrer el formulario con el
   tabulador: se pierde el sitio en el primer salto. */
#ga-valoracion [data-v]:focus-visible,
#ga-valoracion input:focus-visible,
#ga-valoracion select:focus-visible,
#ga-valoracion textarea:focus-visible,
#ga-valoracion button:focus-visible {
  outline: 3px solid #F26D16;
  outline-offset: 2px;
}

/* Para los navegadores que no entienden :focus-visible. El segundo bloque lo
   retira en los que si lo entienden, para no marcar el foco al hacer clic. */
#ga-valoracion [data-v]:focus {
  outline: 3px solid #F26D16;
  outline-offset: 2px;
}

#ga-valoracion [data-v]:focus:not(:focus-visible) {
  outline: none;
}

/* ==== Formulario de valoracion: piezas del envio en dos tiempos ==== */
/* Anadido el 21 ago 2026. Va con el bloque de fragmentos-pie.js que reordena
   el formulario y con el callejero del Catastro de functions.php. */

/* El desplegable de calles cuelga del campo, asi que el contenedor manda. */
.ga-autocompleta {
  position: relative;
}

.ga-sug {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 232px;
  overflow-y: auto;
  margin-top: 4px;
  background: #F8F8F8;
  border: 1px solid rgba(10,10,10,.14);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(10,10,10,.13);
}

.ga-sug[hidden] {
  display: none;
}

.ga-sug-item {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(10,10,10,.07);
  background: none;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  color: #0A0A0A;
  cursor: pointer;
}

.ga-sug-item:last-child {
  border-bottom: 0;
}

.ga-sug-item:hover,
.ga-sug-item.marcada {
  background: rgba(242,109,22,.11);
  color: #222670;
}

/* Aviso de error debajo del boton. Naranja y no rojo: es una indicacion, no
   una catastrofe, y el rojo no esta en la paleta de la casa. */
.ga-error {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(242,109,22,.45);
  border-left: 3px solid #F26D16;
  border-radius: 8px;
  background: rgba(242,109,22,.07);
  font-size: 14px;
  line-height: 1.45;
  color: #0A0A0A;
}

/* Confirmacion del paso 3: el contacto YA se ha enviado, y hay que decirlo
   antes de pedir nada mas. Si no, parece que el formulario no ha hecho nada. */
.ga-recibido {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(34,38,112,.20);
  border-left: 3px solid #222670;
  border-radius: 8px;
  background: rgba(34,38,112,.05);
}

.ga-recibido p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #222670;
}

.ga-extra-int {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #555;
}

/* "No hace falta, gracias": tiene que verse como salida, no como boton
   principal, para que nadie crea que se pierde algo por pulsarlo. */
.ga-saltar {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}

@media (max-width: 768px) {
  .ga-sug { max-height: 46vh; }
  .ga-sug-item { padding: 13px 14px; font-size: 16px; }
}

/* ==== Version inglesa del formulario: las mismas piezas ==== */
/* El formulario ingles es un duplicado independiente (fragmento 8635) con sus
   propios identificadores gaen-*, asi que necesita sus propias reglas. El
   .ga-sug y .ga-sug-item de arriba SI los reutiliza, son los mismos. */

.gaen-autocompleta {
  position: relative;
}

#ga-valora-en .gaen-error {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(242,109,22,.45);
  border-left: 3px solid #F26D16;
  border-radius: 8px;
  background: rgba(242,109,22,.07);
  font-size: 14px;
  line-height: 1.45;
  color: #0A0A0A;
}

#ga-valora-en .gaen-recibido {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(34,38,112,.20);
  border-left: 3px solid #222670;
  border-radius: 8px;
  background: rgba(34,38,112,.05);
}

#ga-valora-en .gaen-recibido p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #222670;
}

#ga-valora-en .gaen-extra-int {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #555;
}

#ga-valora-en .gaen-nota {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(10,10,10,.10);
  border-left: 3px solid #F26D16;
  border-radius: 8px;
  background: rgba(242,109,22,.05);
  font-size: 14px;
  line-height: 1.55;
  color: #0A0A0A;
}

#ga-valora-en .gaen-saltar {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}

/* Los mismos 16 px que en el castellano: por debajo de eso iOS Safari hace
   zoom al enfocar un campo y la maqueta salta. */
@media (max-width: 768px) {
  #ga-valora-en input,
  #ga-valora-en select,
  #ga-valora-en textarea {
    font-size: 16px !important;
  }
}

#ga-valora-en input:focus-visible,
#ga-valora-en select:focus-visible,
#ga-valora-en .ga-opt:focus-visible,
#ga-valora-en button:focus-visible {
  outline: 3px solid #F26D16;
  outline-offset: 2px;
}

/* ==== Remates medidos en las tres anchuras (21 ago 2026) ==== */

/* El iframe de Turnstile mide 300 px dentro de una caja de 293 en un movil de
   375. Son 7 px que no se ven, porque el widget va en modo interaction-only y
   no pinta nada, pero desbordaban el paso. Se recorta para que no puedan
   provocar una barra de scroll horizontal nunca. */
#ga-ts,
#ga-ts-en {
  max-width: 100%;
  overflow: hidden;
}

/* Los botones secundarios median 21 px de alto: con el dedo eso no se acierta.
   Se llevan a 44, que es el minimo recomendado para tocar. El principal ya
   estaba en 52. */
#ga-valoracion .ga-back,
#ga-valoracion .ga-saltar {
  min-height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* En el paso 3 el boton de saltar va debajo del principal, asi que necesita
   separacion propia para que no parezca parte del mismo boton. */
#ga-valoracion .ga-saltar {
  margin-top: 6px;
}

/* ==== Los botones flotantes no deben tapar el formulario ==== */
/* Anadido el 21 ago 2026, despues de verlo en un movil de 375: los flotantes
   de WhatsApp y telefono, mas la flecha de subir, caen justo encima del boton
   de enviar del cuestionario. Se pueden pulsar por la izquierda, pero tapar el
   boton principal de la accion que buscamos es inaceptable.

   Se ocultan SOLO mientras el cuestionario esta en pantalla y SOLO en movil:
   dentro del formulario son redundantes, porque la pagina de confirmacion ya
   ofrece WhatsApp y llamar. La clase la pone y la quita el JS del pie con un
   IntersectionObserver, asi que en cuanto se sale del formulario vuelven. */
/* 22 ago 2026: hacen falta los !important y no es por comodidad. Medido: sin
   ellos esta regla PERDIA dos veces. Contra `body.gav-quietos .ga-flot`, que
   tiene la misma especificidad y va mas abajo en el archivo, asi que ganaba por
   orden y devolvia los flotantes al 28%. Y contra el estilo en linea que el JS
   del tema le pone a #scrollTop al bajar, que gana a cualquier selector.
   Resultado en movil: el telefono y la flecha quedaban encima del boton naranja
   de enviar. Tapar el boton de la accion que buscamos es justo lo que hace que
   una web parezca barata. */
@media (max-width: 768px) {
  body.gav-form-a-la-vista .ga-flot,
  body.gav-form-a-la-vista #scrollTop {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease;
  }
}

/* Fuera del formulario vuelven con la misma suavidad. */
.ga-flot,
#scrollTop {
  transition: opacity .25s ease;
}

/* ==== Los flotantes se apagan cuando la pagina esta quieta ==== */
/* Anadido el 21 ago 2026 a peticion de Jose Luis: que no distraigan mientras
   se lee. La clase la pone y la quita el JS del pie.

   NO desaparecen del todo a proposito, y esto es una decision, no una
   limitacion: si se van del todo, la persona que esta leyendo la descripcion de
   un chalet -que es justo el momento en que decide escribir- se queda sin
   manera de hacerlo hasta que mueva la pagina. Se quedan al 28% y sin sombra:
   presentes si los buscas, invisibles si no. Con tocarlos o mover la pagina
   vuelven al instante.

   Si se quisiera que se fueran del todo, es cambiar el 0.28 por 0. */
body.gav-quietos .ga-flot,
body.gav-quietos #scrollTop {
  opacity: .28;
  box-shadow: none;
}

.ga-flot,
#scrollTop {
  transition: opacity .45s ease, box-shadow .45s ease, transform .45s ease;
}

/* Al pasar el raton o tocarlos vuelven enteros, aunque este quieta la pagina. */
.ga-flot:hover,
.ga-flot:focus-within,
#scrollTop:hover,
#scrollTop:focus-within {
  opacity: 1 !important;
}

/* Quien haya pedido menos movimiento no ve ni el apagado ni la transicion. */
@media (prefers-reduced-motion: reduce) {
  body.gav-quietos .ga-flot,
  body.gav-quietos #scrollTop {
    opacity: 1;
  }
  .ga-flot,
  #scrollTop {
    transition: none;
  }
}

/* ==== El menú de móvil, sin la franja ni la fila vacía ==== */
/* Anadido el 21 ago 2026. Jose Luis lo vio en su iPhone: "lo veo con una
   separacion, eso da sensacion de poco optimizado". Tenia razon, y eran dos
   cosas distintas, las dos medidas en 360x740:

     1. El panel del menu (.navbar-collapse) lleva margin-top: 15px del tema.
        La barra acaba en el pixel 154 y el panel empieza en el 163, asi que
        quedaban 9 px por los que se veia la foto de fondo: la franja de la
        foto entre la barra y el menu. Se quita el margen y el blanco arranca
        pegado al negro.

     2. La ultima fila es el cambio de idioma, y es una bandera de 11 px dentro
        de una fila de 43, colocada arriba por un line-height: 29px que el tema
        pone EN LINEA en el propio enlace. Resultado: 15 px de blanco debajo de
        la bandera que se leen como espacio sobrante. Se centra y se le pone al
        lado el nombre del idioma (lo anade el JS del pie), asi que la fila pasa
        a leerse como las otras cuatro en vez de parecer un hueco.

   Solo en movil: en escritorio el menu es horizontal y nada de esto aplica. */
@media (max-width: 991px) {

  .navbar-collapse {
    margin-top: 0 !important;
  }

  /* El line-height va en el atributo style del enlace, asi que hace falta
     !important para poder centrarlo. */
  .navbar-collapse .lang-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    line-height: 1 !important;
  }

  .navbar-collapse .lang-item > a img {
    width: 18px !important;
    height: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* El nombre del idioma, con el mismo aire que el resto del menu. */
  .navbar-collapse .lang-item > a .gav-idioma {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}


/* ==== Ningún campo de la web por debajo de 16 px en móvil ==== */
/* Anadido el 21 ago 2026. La auditoria encontro que los cinco campos del
   formulario de Contacto estaban a 14 px, asi que iOS Safari hace zoom en
   CUALQUIER campo cuya letra mida menos de 16 px y la maqueta salta en cada
   uno. Es el mismo fallo que se corrigio en el cuestionario de valoracion, pero
   aquel es propio y este es de Contact Form 7, asi que se quedo fuera.

   En vez de ir formulario por formulario, la regla va sobre TODOS los campos de
   la web por debajo de 769 px: es un fallo que solo se puede tener o no tener,
   no hay ningun campo que se beneficie de provocar zoom. Cubre tambien el
   selector de municipio de la galeria, que estaba a 15 px, y cualquier
   formulario que se anada manana.

   Solo en movil: en escritorio no hay zoom que evitar y los 14 px estan bien. */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ==== Foco visible en toda la web ==== */
/* Anadido el 21 ago 2026. La auditoria encontro outline: none en los enlaces
   del menu, los del pie y los botones: quien navega con el tabulador no tiene
   ninguna forma de saber donde esta. Solo el cuestionario de valoracion tenia
   foco visible, porque se le puso a mano.

   Se usa :focus-visible y no :focus a proposito: :focus tambien se dispara al
   hacer clic con el raton, y entonces sale un recuadro alrededor de cada cosa
   que se pulsa, que es justo lo que hizo que alguien pusiera outline:none en su
   dia. Con :focus-visible el navegador decide, y solo lo muestra a quien navega
   con teclado.

   Naranja de marca y offset de 2 px para que se vea sobre fondo claro y sobre
   fondo oscuro sin tener que hacer dos reglas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #F26D16 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Sobre la barra oscura el naranja se ve, pero un halo blanco fino lo separa
   del negro y del naranja del logotipo. */
.navbar a:focus-visible,
.site-footer a:focus-visible {
  outline-color: #F8F8F8 !important;
  box-shadow: 0 0 0 5px rgba(242,109,22,.55);
}

/* ==== Tablet: el menú horizontal con objetivos de dedo ==== */
/* Anadido el 21 ago 2026. La auditoria lo midio: el hamburguesa se oculta a
   partir de 768 px, asi que un iPad en vertical se queda con el menu horizontal
   de escritorio y enlaces de solo 20 px de alto (13 px el del idioma). Son
   objetivos de 20 px para el dedo, cuando el minimo recomendado son 44.

   No se cambia el punto de corte del hamburguesa a proposito: eso alteraria el
   diseno que el tema da por bueno en tablet. Lo que se hace es engordar el area
   pulsable con padding vertical, que no mueve nada de sitio porque la barra ya
   tiene alto de sobra (72 px a 768 y 118 desde 800).

   El rango es 768-991: por debajo hay hamburguesa y por encima ya es raton. */
@media (min-width: 768px) and (max-width: 991px) {

  .navbar-nav > li > a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* El del idioma medía 13 px: es el peor de todos y el que más se falla. */
  .navbar-nav > li.lang-item > a {
    min-height: 44px;
  }
}

/* ==== Ancho de los parrafos de Conocenos: SIN limite, decision del 3 sep 2026 ==== */
/* Aqui hubo un `max-width: 700px` sobre `.gc-intro p` y `.gc-raicv p`, puesto el
   21 ago 2026 porque la auditoria midio lineas de 1.140 px con letra de 15, o sea
   164 caracteres por linea. Lo comodo son 45-75 y el maximo razonable 90: al
   volver del final de la linea al principio el ojo pierde el renglon.

   El 3 sep 2026 se retiro por decision de Jose Luis. El limite de 700 px era la
   UNICA excepcion al ancho de 1.140 de la seccion, y eso dejaba el texto con un
   hueco de 440 px a la derecha mientras las tarjetas si llegaban al borde. Se le
   ofrecieron las tres salidas con los numeros medidos:

     - estrechar toda la seccion a 800 px y letra a 16  ->  108 caracteres
     - texto a 1.140 como el resto                      ->  164 caracteres
     - 1.140 con letra a 18                             ->  136 caracteres

   Eligio la segunda: que todo comparta ancho, aunque la linea sea larga. Prefiere
   la alineacion al confort de lectura, y es su web.

   Asi que NO hay regla de ancho para estos parrafos: heredan los 1.140 px de
   `#ga-conocenos, .gc-intro, .ga-wrap, .gav-col-centrada`. Si algun dia se quiere
   volver a acotar, hay una trampa apuntada: el fragmento de Conocenos trae
   `#ga-conocenos * { margin: 0 }`, que es (1,0,0) y gana a `.gc-intro p` (0,1,1),
   asi que centrar exige !important. Se descubrio midiendo el valor calculado, no
   leyendo el CSS. */

/* ==== El nombre del idioma, solo en móvil ==== */
/* El <span> con "ENGLISH" / "ESPAÑOL" lo anade el JS del pie para que la fila
   del menu de movil no parezca un hueco vacio con una bandera de 11 px dentro.
   Ese problema NO existe en escritorio, donde el menu es horizontal y la bandera
   va en linea con el resto.

   Asi que el texto se oculta de 992 px hacia arriba: solo en movil, en
   escritorio la cabecera se queda exactamente como estaba. El <span> sigue en el
   DOM y la bandera recupera su alt por si acaso, asi que un lector de pantalla
   sigue diciendo el idioma en las dos anchuras. */
@media (min-width: 992px) {
  .navbar-nav .lang-item > a .gav-idioma {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==== Ningún texto de la web por debajo de 12 px, y flechas de 44 ==== */
/* Anadido el 21 ago 2026, puntos 7 y 8 de la auditoria. Medido uno por uno en
   375 px, no a bulto, y excluyendo la barra de administracion de WordPress:
   los 10,5 px que aparecian en la galeria eran de la propia barra de WordPress
   y no de la web, asi que ese caso era falso.

   Los de verdad eran estos, todos etiquetas o pies y ninguno texto corrido:

     .gav-muni-pill  10,5 -> 12    pildora de municipio en las tarjetas
     .gaf-pill       10,5 -> 12    pildora sobre la galeria de la ficha
     .gaf-zona         11 -> 12,5  linea de ubicacion del panel de la ficha
     .gc-sep-txt       11 -> 12,5  separadores de Conocenos
     .gc-desde         11 -> 12,5
     .gc-badge         11 -> 12,5
     .gc-rol-txt       11 -> 12,5
     .gc-srv-d         12 -> 13    descripciones de los servicios
     .gc-honor-d       12 -> 13
     .gc-cta-sub       12 -> 13

   Se sube poco a proposito: son etiquetas, no cuerpo de texto, y subirlas mucho
   les haria competir con lo que tienen al lado. 12 px es el minimo por debajo
   del cual un texto deja de leerse con comodidad. */
/* Ojo con la especificidad: hay una hoja POSTERIOR con id gaf-css que declara
   .gaf .gaf-pill y .gaf .gaf-zona con !important.

   Con el ancestro .gaf se EMPATA en especificidad, y al empatar gana la que va
   despues, que es la suya. Se repite la clase (.gaf-pill.gaf-pill) para sumar un
   punto mas: es el truco estandar para ganar sin ensuciar el HTML ni depender de
   la estructura del DOM, que en esta ficha cambia entre movil y escritorio. */
.gav-muni-pill,
.gav-muni-pill span,
.gaf .gaf-pill.gaf-pill {
  font-size: 12px !important;
}

.gaf .gaf-zona.gaf-zona,
.gc-sep-txt,
.gc-desde,
.gc-badge,
.gc-rol-txt {
  font-size: 12.5px !important;
}

.gc-srv-d,
.gc-honor-d,
.gc-cta-sub {
  font-size: 13px !important;
}

/* Punto 8: las flechas del carrusel de la ficha median 36x36. En movil se pasa
   foto deslizando, asi que no es critico, pero quien las usa las falla. A 44,
   que es el minimo para el dedo. El icono de dentro no crece: solo el area. */
.gaf-nav {
  width: 44px !important;
  height: 44px !important;
}

/* ==== Migas de pan de las fichas ==== */
/* Anadido el 21 ago 2026 con ga_migas_ficha() de functions.php.

   Discretas a proposito: son una ayuda de orientacion, no un elemento de diseno.
   Gris medio, sin fondo, sin caja, 13 px, y el naranja solo al pasar por encima.
   Si compitieran con el titular del inmueble estarian mal puestas.

   El nombre del inmueble se recorta con puntos suspensivos en movil: un titulo
   de "Chalet de 322 m2 en Entrepinos, L'Eliana" partido en tres lineas ocuparia
   mas que la propia miga. */
.ga-migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b6b6b;
}

/* Los tres niveles con el mismo tamano y la misma caja. Sin esto, algo del tema
   ponia el enlace a la galeria en mayusculas y a 14 px mientras "Inicio" salia
   en minusculas y a 12,5: la miga parecia dos cosas distintas pegadas. */
.gaf .ga-migas a,
.gaf .ga-migas-actual,
.ga-migas a,
.ga-migas-actual {
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
}

.ga-migas a {
  color: #6b6b6b;
  text-decoration: none;
  padding: 4px 2px;
}

.ga-migas a:hover,
.ga-migas a:focus {
  color: #F26D16;
  text-decoration: underline;
}

.ga-migas-sep {
  display: inline-flex;
  align-items: center;
  opacity: .45;
}

.ga-migas-actual {
  color: #0A0A0A;
  font-weight: 500;
}

@media (max-width: 768px) {
  .ga-migas {
    flex-wrap: nowrap;
    font-size: 12.5px;
  }

  .ga-migas a {
    flex: 0 0 auto;
  }

  /* El nombre del inmueble cede: es el unico que puede recortarse sin perder
     la orientacion, porque ya esta escrito en grande justo debajo. */
  .ga-migas-actual {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ==== Dos textos que se me habían quedado por debajo de 12 px ==== */
/* Encontrados al repasar la portada en movil el 21 ago 2026, DESPUES de dar por
   cerrado el punto 7. Los dos son mios o los toque yo, asi que van aparte para
   que quede claro de donde vienen:

   1. Los rotulos de la franja de cifras: 0,95rem en escritorio y 0,88rem en
      movil. Como la raiz tipografica de este sitio son 10 px y no 16, eso son
      9,5 y 8,8 px reales. Ya venian asi de antes, pero al retocar la franja los
      deje igual sin comprobarlo. En mayusculas y con espaciado, 8,8 px es poco.

   2. Los antetitulos de la portada ("GALERIA DE PROPIEDADES", "Contacto") estan
      a 10 px y SE DEJAN ASI a proposito. Se intento subirlos y el tema los fija
      con mas fuerza; para ganar habria que forzar la especificidad, y eso
      cambiaria el aspecto de las secciones de la portada. Son etiquetas
      decorativas en versal, no texto de lectura, y ya no se anuncian como
      titulares porque llevan role=presentation. Es una excepcion consciente al
      minimo de 12 px, no un olvido.

   Se sube poco: son etiquetas sobre cifras y titulares grandes, y pasarse las
   haria competir con lo que acompanan. */
.gav-trust-label {
  font-size: 1.2rem !important;
}

@media (max-width: 768px) {
  .gav-trust-label {
    font-size: 1.2rem !important;
    letter-spacing: .05em;
  }
}

/* ==== Atajo de WhatsApp dentro del cuestionario ==== */
/* Anadido el 21 ago 2026 con gavAtajoWhatsapp() del JS del pie, y movido ARRIBA
   el mismo dia: al principio estaba debajo del boton y Jose Luis pidio que las
   dos vias "vivan entre si", porque abajo quien no queria rellenar el
   cuestionario ni lo veia.

   Contorno y no relleno, en el verde de WhatsApp. Es una decision de equilibrio:

     - Si fuese un boton verde macizo competiria con "Continuar" y casi nadie
       rellenaria el formulario. Y el formulario da tipo, motivo y telefono, que
       valen mucho mas que un "Hola" suelto.
     - Si fuese solo un enlace de texto perdido arriba, no se leeria como una
       alternativa de verdad.

   El contorno resuelve las dos cosas: se ve que es pulsable y se ve que es la
   segunda opcion. */
.gav-atajo-caja {
  margin: 0 0 4px;
}

.gav-atajo-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(18,140,126,.40);
  border-radius: 999px;
  background: rgba(18,140,126,.05);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: #0F7A6C;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.gav-atajo-wa:hover,
.gav-atajo-wa:focus {
  border-color: #0F7A6C;
  background: rgba(18,140,126,.11);
  color: #0B5F54;
  text-decoration: none;
}

.gav-atajo-wa svg {
  flex: 0 0 auto;
}

/* En movil el texto es largo y cabe en dos lineas sin romper la pildora. */
@media (max-width: 768px) {
  .gav-atajo-wa {
    font-size: 14px;
    border-radius: 12px;
    padding: 12px 14px;
  }
}

/* ==== El aviso de cookies, mas compacto ==== */
/* Anadido el 24 ago 2026 a peticion de Jose Luis. Medido antes: 155 px en
   escritorio (16% de la pantalla) y 209 px en movil (26%, un cuarto del
   telefono). De donde salia ese alto:

     - Dos <br> sueltos dentro del mensaje, que el plugin mete y no pintan
       nada: unos 36 px.
     - 25 px de relleno por los cuatro lados.
     - Cuerpo a 15 px con interlineado de 24 px.

   No se toca ni una palabra del texto legal ni el funcionamiento del
   consentimiento: esto es solo presentacion.

   Los !important son necesarios porque las reglas vienen de la hoja del
   plugin, que se encola despues que esta. */

#cookie-law-info-bar {
  padding: 14px 20px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  box-shadow: 0 -2px 14px rgba( 10, 10, 10, .10 ) !important;
}

/* Los saltos de linea del mensaje, fuera: son la mitad del alto sobrante. */
#cookie-law-info-bar .cli-bar-message br { display: none !important; }

#cookie-law-info-bar .cli-bar-message {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

#cookie-law-info-bar .cli-bar-container { gap: 16px; }

#cookie-law-info-bar .cli-plugin-button,
#cookie-law-info-bar .cli_settings_button {
  font-size: 13px !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
}

@media (max-width: 782px) {
  #cookie-law-info-bar { padding: 12px 14px !important; }

  /* Y aqui una decision que va en contra de "mas pequeno", a proposito: los
     botones median 31 px de alto, por debajo del minimo de 44 px para pulsar
     con el dedo. Son los controles de una decision legal, asi que suben a 44.
     Cuesta unos 13 px de los que se acaban de ahorrar; el resto del recorte
     se mantiene. */
  #cookie-law-info-bar .cli-plugin-button,
  #cookie-law-info-bar .cli_settings_button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
/* En escritorio el mensaje ocupaba el ancho completo y empujaba los botones a
   una segunda fila: 38 px de texto ocupaban 133 px de barra. Poniendolos en la
   misma linea se recupera casi todo ese hueco. Por debajo de 783 px se sigue
   apilando, que a ese ancho es lo correcto. */
@media (min-width: 783px) {
  #cookie-law-info-bar .cli-bar-container {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 24px;
  }
  #cookie-law-info-bar .cli-bar-message {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 820px;
  }
  #cookie-law-info-bar .cli-bar-btn_container {
    flex: 0 0 auto !important;
  }
}
/* El enlace a la politica heredaba el color del texto y no parecia pulsable.
   Un enlace que no se ve como enlace no cumple su funcion. */
#cookie-law-info-bar .cli-bar-message a {
  color: #222670 !important;
  text-decoration: underline !important;
  font-weight: 600;
}
#cookie-law-info-bar .cli-bar-message a:hover { color: #F26D16 !important; }
/* ==== Fichas: barra fija de contacto en movil y tablet ==== */
/* Anadida el 24 ago 2026. La pinta gavBarraFicha() del JS del pie, solo en
   body.single-portfolio. Aqui solo se decide como se ve y desde que ancho.

   El acabado copia el de los botones de la pantalla final del formulario
   (fragmento 9826): pildora, solido, verde y azul de marca, icono por mascara.
   No se inventa un estilo nuevo, porque la version anterior de esta barra se
   cayo justo por eso: parecia de otra web. */

.ga-fbar { display: none; }

@media (max-width: 1024px) {

  body.single-portfolio .ga-fbar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 10px 14px;
    /* El hueco del indicador de inicio del iPhone. Sin esto el pulgar cae
       sobre la barra del sistema y no sobre el boton. */
    padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
    background: rgba( 255, 255, 255, .94 );
    -webkit-backdrop-filter: saturate( 180% ) blur( 12px );
    backdrop-filter: saturate( 180% ) blur( 12px );
    border-top: 1px solid rgba( 10, 10, 10, .08 );
    box-shadow: 0 -6px 24px -12px rgba( 10, 10, 10, .30 );
    animation: gavFbarEntra .45s cubic-bezier( .22, .68, .28, 1 ) both;
  }

  @keyframes gavFbarEntra { from { transform: translateY( 100% ); } to { transform: none; } }

  body.single-portfolio .ga-fbar-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    border-radius: 999px;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #F8F8F8;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s, background .18s;
  }

  /* El icono se pinta con mascara para que herede el color del texto, igual
     que en los botones del formulario. */
  body.single-portfolio .ga-fbar-btn::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var( --ga-ico ) center/contain no-repeat;
    mask: var( --ga-ico ) center/contain no-repeat;
  }

  /* 24 ago 2026, segunda pasada. Antes iban en verde de WhatsApp y azul: son
     los colores de WhatsApp, no los de la agencia, y Jose Luis pidio que la
     barra "sea asociativa a la inmobiliaria". El naranja es el color de accion
     de toda la web (Vende tu casa, el boton del formulario, el CTA de la propia
     ficha), asi que la accion principal va en naranja y la secundaria perfilada
     en azul de marca, igual que .gaf-cta-1 y .gaf-cta-2 de la ficha. */
  body.single-portfolio .ga-fbar-wa {
    background: #F26D16;
    box-shadow: 0 10px 22px -12px rgba( 242, 109, 22, .70 );
    --ga-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
  }
  body.single-portfolio .ga-fbar-tel {
    background: #fff;
    color: #222670;
    border: 1px solid rgba( 34, 38, 112, .22 );
    box-shadow: none;
    --ga-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
  }

  body.single-portfolio .ga-fbar-btn:active { transform: translateY( 1px ); }
  body.single-portfolio .ga-fbar-btn:focus-visible { outline: 3px solid #0A0A0A; outline-offset: 2px; }

  /* Los flotantes se van: con la barra abajo serian dos veces lo mismo, y ese
     amontonamiento es lo que hacia que se viera barato. */
  body.single-portfolio.gav-con-fbar .ga-flot,
  body.single-portfolio.gav-con-fbar #scrollTop {
    display: none !important;
  }

  /* Sitio al final para que la barra no tape la ultima linea del pie. */
  body.single-portfolio.gav-con-fbar {
    padding-bottom: calc( 72px + env( safe-area-inset-bottom, 0px ) );
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-portfolio .ga-fbar { animation: none; }
  body.single-portfolio .ga-fbar-btn { transition: none; }
}
/* ==== Aviso de cookies: banner NUEVO de CookieYes (.cky-*) ==== */
/* El 24 ago 2026, a mitad de trabajo, el plugin paso del banner clasico
   (#cookie-law-info-bar) al nuevo (.cky-consent-container). Son dos interfaces
   distintas y NINGUNA regla del bloque anterior le afecta. Las de arriba se
   dejan puestas a proposito: el plugin permite volver a la version anterior
   durante 14 dias, y si se vuelve, aquello sigue haciendo falta.

   Medido recien cambiado, en movil: 285 px, un 35% de la pantalla, con los
   tres botones apilados a todo el ancho. Es MAS grande que el viejo. */

@media (max-width: 782px) {

  .cky-consent-container .cky-consent-bar { padding: 12px 14px !important; }
  .cky-consent-container .cky-notice-des,
  .cky-consent-container .cky-notice-des p { font-size: 13px !important; line-height: 1.45 !important; }
  .cky-consent-container .cky-notice-group { gap: 10px; }

  /* Los tres botones, en una fila. Apilados se comian un tercio del telefono. */
  .cky-consent-container .cky-notice-btn-wrapper {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 0 !important;
  }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    /* 44 px es el minimo para pulsar con el dedo, y estos son los controles
       de una decision legal: no se bajan de ahi para ganar altura. */
    min-height: 44px !important;
    white-space: nowrap;
  }

  /* Aceptar a la derecha, que es donde se busca. En el HTML va primero. */
  .cky-consent-container .cky-btn-customize { order: 1; }
  .cky-consent-container .cky-btn-reject    { order: 2; }
  .cky-consent-container .cky-btn-accept    { order: 3; }
}
/* La barra de la ficha se aparta mientras el aviso de cookies ocupa el bajo de
   la pantalla. Vuelve sola en cuanto se acepta o se rechaza. La clase la pone
   y la quita gavBarraFicha() del JS del pie. */
body.gav-fbar-espera .ga-fbar {
  transform: translateY( 130% );
  pointer-events: none;
  transition: transform .3s cubic-bezier( .22, .68, .28, 1 );
}
body.single-portfolio .ga-fbar { transition: transform .3s cubic-bezier( .22, .68, .28, 1 ); }
@media (prefers-reduced-motion: reduce) {
  body.gav-fbar-espera .ga-fbar,
  body.single-portfolio .ga-fbar { transition: none; }
}
/* Los dos botones de contacto que van dentro de la ficha (.gaf-botones) se
   ocultan donde ya esta la barra fija: decirlo dos veces en la misma pantalla
   es justo el amontonamiento que hacia que se viera barato. En escritorio NO
   se tocan, porque alli no hay barra y son el unico sitio para contactar. */
@media (max-width: 1024px) {
  body.single-portfolio.gav-con-fbar .gaf-botones { display: none !important; }
}
/* ============================================================================
   AUDITORIA MOVIL 24 ago 2026 — correcciones medidas
   Todo lo de aqui sale de medir a 375 px, no de mirar. El numero que va en
   cada comentario es el contraste real que daba antes.
   ============================================================================ */

/* --- 1. El copyright del pie era invisible en las fichas --- */
/* Contraste 1,00:1. La culpable es una regla del CSS de ficha:
      .single-portfolio p { color: #0A0A0A !important }
   pensada para el texto del inmueble, pero sin acotar, asi que alcanzaba
   tambien al parrafo del pie, que va sobre fondo #0A0A0A. En el resto de la
   web ese texto es #B0B0B0 y se ve bien; aqui se le devuelve su color. */
body.single-portfolio footer p,
body.single-portfolio footer .copyright,
body.single-portfolio footer .copyright p {
  color: #B0B0B0 !important;
}

/* --- 2. El menu de movil respondia en 22 px, no en 43 --- */
/* El relleno estaba en el <li> y no en el enlace, asi que la fila MEDIA 43 px
   pero solo respondian los 22 px del texto: tocabas donde parecia haber boton
   y no pasaba nada. El relleno se pasa al enlace. */
@media (max-width: 991px) {
  .navbar-collapse .menu-item > a,
  .navbar-collapse .nav > li > a {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .navbar-collapse .menu-item,
  .navbar-collapse .nav > li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* --- 3. Enlaces del pie por debajo del minimo de pulsacion --- */
/* Idealista, Facebook, Instagram y YouTube median 120x30. Telefono y correo,
   39 px de alto. El minimo para el dedo son 44. */
@media (max-width: 991px) {
  footer td a,
  footer p > a {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }
}

/* --- 4. Naranja de marca sobre blanco --- */
/* Aqui hubo un naranja oscurecido (#BE520C, 4,77:1) desde agosto de 2026, puesto
   porque el corporativo #F26D16 da 3,01:1 sobre blanco y el minimo exigible es 4,5.

   El 3 de septiembre de 2026 Jose Luis lo devolvio al corporativo: "tienes que
   seguir los colores corporativos". Es su marca y su decision, y afecta sobre todo
   a los PRECIOS de las tarjetas, que son lo mas visible del escaparate.

   Queda dicho el coste: en textos pequenos el naranja corporativo se lee peor de lo
   deseable. Donde importe, lo que compensa no es cambiar el color sino subir el
   cuerpo o el grosor de la letra. */
.gav-card-precio,
.gc-desde.gc-desde,
span.gal-lbl,
span.cl {
  color: #F26D16 !important;
}
/* .gc-desde necesita mas que repetir la clase: la regla que gana en Conocenos
   es `#ga-conocenos#ga-conocenos .gc-desde` con !important, es decir un ID
   DUPLICADO a proposito. Para vencerla hay que igualar o superar eso.

   Lo limpio seria cambiar el color en el propio fragmento de Conocenos, pero
   ese contenido vive en DOS fragmentos de WPCode (castellano e ingles) y habria
   que tocar los dos. Se deja aqui, con el porque escrito, para no repartir la
   correccion en tres sitios. */
#ga-conocenos#ga-conocenos .gc-desde.gc-desde,
#ga-conocenos-en#ga-conocenos-en .gc-desde.gc-desde {
  color: #F26D16 !important;
}

/* --- 5. Grises ilegibles en Conocenos --- */
/* Medidos: #bbb sobre blanco 1,92:1, #aaa 2,23:1, #888 3,11:1. Los tres por
   debajo del minimo, y uno de ellos son los rotulos de seccion. */
.gc-sep-txt { color: #6B6B6B !important; }
.gc-rol-txt { color: #5E5E5E !important; }
.gc-badge   { color: #5E5E5E !important; }
span.lbl    { color: #5E5E5E !important; }
span.gal-zd { color: #5E5E5E !important; }

/* --- 6. Rotulos a 10 y 11 px --- */
/* Son argumentos de venta ("Honorarios + IVA", "Sin exito, sin coste",
   "Anos en L Eliana") en el tamano mas pequeno de la pagina. Suben a 12, que
   es el minimo con el que se leen en un movil sin forzar la vista. */
@media (max-width: 991px) {
  span.lbl, span.gal-lbl, span.gal-zd, span.cl,
  .gc-desde, .gc-badge, .gc-rol-txt {
    font-size: 12px !important;
  }
}
/* ==== Seccion "¿Hablamos?" de la portada (24 ago 2026) ==== */
/* Antes esa seccion repetia entera la informacion del pie -oficina, telefono,
   WhatsApp y correo- y ocupaba 1.242 px en movil para decir lo mismo que hay
   300 px mas abajo. Ademas el telefono y el WhatsApp median 79x17: imposibles
   de pulsar. Se quitaron los datos y quedan dos vias directas de verdad, con
   las pildoras de la casa: naranja para la accion principal, azul perfilado
   para la secundaria. El subtitulo tambien cambio: decia "rellena el
   formulario" (proceso) y ahora dice quien contesta (valor). */

.gav-contacto.gav-contacto-solo-form {
  display: block;
  max-width: 720px;
  margin: 0 auto;
}

.gav-contacto-vias {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 2rem;
}

.gav-contacto-vias .gav-via {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
}

.gav-contacto-vias .gav-via-wa {
  background: #F26D16;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba( 242, 109, 22, .70 );
}
.gav-contacto-vias .gav-via-tel {
  background: #fff;
  color: #222670;
  border: 1px solid rgba( 34, 38, 112, .22 );
}
.gav-contacto-vias .gav-via:hover { transform: translateY( -2px ); }
.gav-contacto-vias .gav-via:active { transform: translateY( 0 ); }
.gav-contacto-vias .gav-via:focus-visible { outline: 3px solid #222670; outline-offset: 2px; }

/* El subtitulo de la seccion estaba en #888 a 13 px: 3,26:1, por debajo del
   minimo de 4,5. Y es la frase que tiene que convencer. */
/* ID duplicado: hay otra regla inline, `#inmuebles .section-title p,
   #contacto .section-title p`, con !important y la MISMA especificidad, que va
   despues en el documento y por eso ganaba. */
#contacto#contacto .section-title p,
#contactoeng#contactoeng .section-title p {
  color: #4A4A4A !important;
  font-size: 15px;
  line-height: 1.6;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .gav-contacto-vias { flex-direction: column; }
  .gav-contacto-vias .gav-via { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gav-contacto-vias .gav-via { transition: none; }
  .gav-contacto-vias .gav-via:hover { transform: none; }
}
/* ==== Zona de alquileres: cuando no hay ninguno ==== */
/* Anadido el 24 ago 2026. La pagina anunciaba "Alquileres disponibles" y debajo
   no habia nada: parecia rota, y el enlace del menu ya es publico. Ahora se
   dice que no hay y se ofrece la salida, con las pildoras de la casa. */
.gav-sin-alquileres {
  max-width: 620px;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.25rem;
  text-align: center;
  background: #FAF8F6;
  border: 1px solid rgba( 10, 10, 10, .07 );
  border-radius: 12px;
}
.gav-sin-alquileres .gav-sin-titulo {
  font-size: 18px;
  font-weight: 700;
  color: #222670;
  margin: 0 0 .5rem;
  line-height: 1.35;
}
.gav-sin-alquileres .gav-sin-texto {
  font-size: 15px;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0 auto 1.5rem;
  max-width: 44ch;
}
.gav-sin-alquileres .gav-sin-wa,
.gav-sin-alquileres .gav-sin-otra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.gav-sin-alquileres .gav-sin-wa {
  background: #F26D16;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba( 242, 109, 22, .70 );
}
.gav-sin-alquileres .gav-sin-otra {
  background: #fff;
  color: #222670;
  border: 1px solid rgba( 34, 38, 112, .22 );
  margin-left: 10px;
}
.gav-sin-alquileres a:focus-visible { outline: 3px solid #222670; outline-offset: 2px; }

@media (max-width: 600px) {
  .gav-sin-alquileres .gav-sin-wa,
  .gav-sin-alquileres .gav-sin-otra { display: flex; width: 100%; margin: 0 0 10px; }
}

/* El enlace cruzado del pie de las dos paginas salia en #444 y sin subrayado:
   no parecia pulsable. Un enlace que no se ve como enlace no sirve. */
.page-id-9854 .entry-content a,
.page-id-9856 .entry-content a,
.page-id-9854 .post-content a,
.page-id-9856 .post-content a {
  color: #F26D16 !important;
  text-decoration: underline !important;
  font-weight: 600;
}
.gav-sin-alquileres a { text-decoration: none !important; }
.gav-sin-alquileres .gav-sin-wa { color: #fff !important; }
.gav-sin-alquileres .gav-sin-otra { color: #222670 !important; }

/* ==== Pagina de error 404 propia ==== */
/* Anadida el 3 sep 2026 junto con 404.php en el tema hijo. La primera version era
   funcional y fea: cuatro pildoras de 999 px sueltas en fila, todas del mismo peso,
   sobre un fondo vacio. Jose Luis lo dijo claro, y tenia razon.

   Esta version NO inventa nada: usa las piezas que ya existen en la web, medidas
   sobre Conocenos.

     - tarjeta blanca, radio 8 px y borde 1px rgba(10,10,10,.10)  ->  como .gc-persona
     - rotulo pequeno naranja en mayusculas, 12 px / 700 / #F26D16  ->  como .gc-desde
       (el naranja corporativo, por decision de Jose Luis del 3 sep 2026)
     - titulo en el azul corporativo #222670
     - boton principal naranja de radio 8 px  ->  como el de .gc-cta
     - separador con texto en mayusculas, 12 px / 700 / #6B6B6B  ->  como .gc-sep

   OJO: los botones de esta web son de radio 8 px, NO pildoras de 999. Las pildoras
   se usan en los filtros de municipio del escaparate, no en las acciones. */
.gav-404 {
  padding: 48px 0 56px;
}
.gav-404-caja {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, .10);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  margin: 0 auto;
  max-width: 620px;
  padding: 40px 32px;
  text-align: center;
}
.gav-404-rotulo {
  color: #F26D16;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.gav-404-h1 {
  color: #222670;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
}
.gav-404-txt {
  color: #444;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 26px;
  max-width: 430px;
}
.gav-404-principal {
  align-items: center;
  background: #F26D16;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: 0 34px;
  text-decoration: none;
  transition: background .2s ease;
}
.gav-404-principal:hover,
.gav-404-principal:focus {
  background: #222670;
  color: #fff;
}
.gav-404-sep {
  align-items: center;
  display: flex;
  gap: 14px;
  margin: 30px 0 18px;
}
.gav-404-sep::before,
.gav-404-sep::after {
  background: rgba(10, 10, 10, .12);
  content: '';
  flex: 1;
  height: 1px;
}
.gav-404-sep span {
  color: #6B6B6B;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gav-404-salidas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.gav-404-btn {
  align-items: center;
  border: 1px solid rgba(34, 38, 112, .22);
  border-radius: 8px;
  color: #222670;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.gav-404-btn:hover,
.gav-404-btn:focus {
  background: #222670;
  border-color: #222670;
  color: #fff;
}

/* En movil la caja pega con los bordes y los secundarios van a ancho completo:
   tres botones de 44 px apilados se pulsan mejor que tres cortados en dos filas. */
@media (max-width: 575px) {
  .gav-404 {
    padding: 28px 0 36px;
  }
  .gav-404-caja {
    padding: 30px 20px;
  }
  .gav-404-h1 {
    font-size: 23px;
  }
  .gav-404-principal {
    display: flex;
    width: 100%;
  }
  .gav-404-salidas {
    flex-direction: column;
  }
}


/* ==== Etiquetas que estaban a 11 px ==== */
/* La revision del 3 sep 2026 encontro tres textos por debajo de 12 px, que en un
   movil cuestan de leer. Se suben a 13 px, que es el minimo comodo, sin tocar su
   papel de etiqueta secundaria: siguen en mayusculas y con el mismo color.

   Llevan !important porque el CSS de origen los declara desde fragmentos con la
   misma especificidad y este archivo no siempre va detras. */
.ga-stat-lbl,
.gav-sello,
.gav-atajo-o {
  font-size: 13px !important;
}

/* ==== El titulo "Secciones" del pie era ilegible ==== */
/* Encontrado el 3 sep 2026. El pie tiene dos tipos de widget y solo uno estaba
   pintado: "CONTACTO" es un <h2> escrito a mano dentro de un widget de texto y
   lleva sus estilos EN LINEA (naranja, 12 px, mayusculas), asi que se ve bien
   -6,58:1 sobre el negro del pie-. "Secciones" es el titulo de un widget de MENU,
   no lo escribe nadie, y heredaba el gris del tema: rgb(40,40,40) sobre
   rgb(10,10,10) es **1,34:1**. Practicamente invisible.

   Se le da el mismo aspecto que al escrito a mano, en vez de tocar el otro: asi los
   dos rotulos del pie son iguales y cualquier widget de menu que se anada manana
   sale bien de serie. Los enlaces del pie ya estaban bien (9,13:1 los del menu y
   19,8:1 los de contacto), solo fallaba el rotulo. */
.footer-widgets .widget_nav_menu > h2,
.footer-widgets .widget_nav_menu > h3,
.footer-widgets .widget_nav_menu > h4,
.footer-widgets .widget_nav_menu > h5 {
  color: #F26D16;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* La entrada del heroe de la portada YA NO ESTA AQUI.

   El 3 sep 2026 se movio a ga_css_critico_heroe() en functions.php, junto con el
   resto del CSS critico del heroe. El motivo: estas reglas hacen la animacion de
   entrada, y si llegan en este archivo -que va encolado- para cuando aparecen el
   navegador ya ha pintado el contenido y no se anima nada. Tienen que viajar con
   el HTML.

   Alli tambien esta la regla que apaga el fadeInUp que wow.js le pone al h1: la
   animacion va al BLOQUE entero, no al titular por separado, que era lo que hacia
   que el titular llegara medio segundo tarde. */



/* ==== El fondo del heroe no arranca en negro ==== */
/* Anadido el 3 sep 2026. Jose Luis: "cuando entro desde el movil veo de nuevo que
   la imagen no sale, que sale con diferida". Medido: el div del heroe tenia
   background-color NEGRO PURO, asi que mientras la foto no llegaba se veia un
   rectangulo negro a pantalla completa y luego entraba la foto de golpe.

   Dos cosas, y la segunda esta arriba, en la seccion "Portada: la foto de cabecera
   al tamano de cada dispositivo":

     1. Aqui: el color de espera pasa a #6E7A72, un gris verdoso sacado del tono
        medio de la propia foto. Ya no hay negro.
     2. Alli: la foto lleva DEBAJO un LQIP, la misma imagen reducida a 24x16 px y
        difuminada, metida en el CSS como base64. Son 516 bytes, viajan dentro de
        fragmentos.css -que ya esta cacheado, asi que no anade ni una peticion- y
        se pinta en el primer instante. Cuando llega la foto real la tapa, y pasar
        de borroso a nitido no se percibe como salto sino como enfoque.

   POR QUE EL LQIP VA ALLI Y NO AQUI, que fue mi primer intento y fallo: la regla
   que manda es `div.image[data-source]`, que es (0,2,1) de especificidad y con
   !important. Mi `.slider .image` es (0,2,0): perdia, y el fondo se quedaba en una
   sola capa. Ademas el JS del tema MUEVE ese div de section.intro a
   div.slider.fullscreen en movil, asi que cualquier selector con ancestro falla en
   una de las dos anchuras. Por eso las dos capas van en la regla del atributo.

   El color si puede vivir aqui: esa regla no declara background-color. */
div.image[data-source] {
  background-color: #6E7A72;
}

/* ==== El menu usaba una tipografia que no existe ==== */
/* Encontrado el 4 sep 2026 buscando el origen de Poppins. El tema declara
   `Poppins, sans-serif` en el menu y su contenedor -99 elementos- pero **no se
   descarga ninguna Poppins**. O sea que el menu de la web NO se veia con Roboto
   como el resto: caia en la tipografia del sistema.

   Medido con canvas.measureText sobre "ALQUILER VENDE TU CASA" a 14 px:

     Poppins .... 183,9 px
     sans-serif . 185,9 px   <- el menu media ESTO
     Helvetica .. 185,9 px
     Roboto ..... 170,4 px

   Poppins y sans-serif dan practicamente lo mismo porque Poppins no esta: el
   navegador usa la siguiente de la pila. En un Mac o un iPhone eso es Helvetica.

   Efecto del cambio, medido en el menu real a 1400 px de ancho:
     ancho total del menu 556 -> 526 px
     ALQUILER 104 -> 96, VENDE TU CASA 151 -> 142, CONOCENOS 125 -> 117

   OJO: no se usa `.navbar *`, que era mi primera version. Ese selector alcanza
   tambien a los elementos que tiran de una fuente de ICONOS y les quitaria el
   dibujo. Se enumeran solo los que llevan texto.

   La Poppins de verdad que si se descarga es otra: "Trustindex Poppins", del
   plugin de resenas de Google, y solo afecta a ese bloque. Esa no se toca. */
/* Donde estaba la Poppins fantasma, medido en la portada: 99 elementos en el menu
   de arriba y 61 mas en el PIE -sus dos menus, los widgets de contacto y redes, el
   aviso de copyright- y el boton ENVIAR del formulario de contacto. Todos se veian
   con la letra del sistema.

   Se enumeran las zonas en vez de usar un comodin: `.navbar *` o `footer *`
   alcanzarian a los elementos que tiran de una fuente de ICONOS y les quitarian el
   dibujo. Los iconos del pie son SVG inyectado (ver [[web-iconos]]), pero el tema
   sigue teniendo glifos por ahi y no compensa arriesgarse. */
.navbar,
.navbar .navbar-nav,
.navbar .navbar-nav > li,
.navbar .navbar-nav > li > a,
.navbar .navbar-header,
.navbar .navbar-brand,
footer,
footer p,
footer a,
footer span,
footer li,
footer td,
footer h2,
footer h3,
footer h4,
footer h5,
.footer-widgets,
.footer-widgets .textwidget,
.footer-copyright,
.footer-copyright-inner,
.menu-footer-menu-container,
.menu-footer-menu-container a,
.wpcf7-form,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form .wpcf7-submit {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}