/* =========================================================================
 * FeelCaravans — Sistema de diseño premium
 * Se carga con prioridad 999 (después de Elementor).
 *
 * Dirección: referencia Yescapa — editorial, generoso en espacio, con una
 * sola voz de acento reservada a las acciones de conversión.
 * Neutros con sesgo cálido (arena) en lugar de gris frío: el gris neutro
 * lee como "no elegido" y choca con el mundo outdoor de la marca.
 *
 * IMPORTANTE — unidades: la raíz de este sitio está a 10px (patrón 62.5%),
 * no a los 16px por defecto. Todo va en px a propósito: usar rem aquí
 * produce tamaños un 62,5% menores de lo previsto.
 *
 * IMPORTANTE — tipografía: los tamaños de titular los fija Elementor por
 * elemento. Aquí NO se tocan tamaños de h1–h4 (hacerlo encogía h2 y h4 sin
 * afectar a h1). Los cambios de escala tipográfica van en el Global Kit.
 * ========================================================================= */

:root {
	/* --- Estructura: verde de marca --- */
	--fc-primary: #015a3a;
	--fc-primary-deep: #013828;
	--fc-primary-dark: #01432b;
	--fc-primary-tint: #eef5f1;
	/* Degradado de 3 paradas: verde luminoso arriba → marca → profundo abajo.
	   Da más dimensión que el 2-paradas anterior sin cambiar el tono base. */
	--fc-primary-grad: linear-gradient(135deg, #037a51 0%, #015a3a 48%, #012a1d 100%);

	/* --- Acento: solo conversión. Extremo claro #d4550f mantiene AA con blanco
	   (≈4.7:1); se enriquece el fondo del degradado para más profundidad. --- */
	--fc-accent: #c2410c;
	--fc-accent-light: #d4550f;
	--fc-accent-dark: #9a340a;
	--fc-accent-tint: #fdf1ec;
	--fc-accent-grad: linear-gradient(135deg, #d4550f 0%, #b83c08 52%, #8f2d07 100%);

	/* --- Lima de marca: confianza, badges --- */
	--fc-lime: #e0f3aa;
	--fc-lime-deep: #c8e37d;

	/* --- Neutros cálidos --- */
	--fc-text: #14231c;
	--fc-text-muted: #5a6b63;
	--fc-text-subtle: #7d8a84;
	--fc-border: #e6e2db;
	--fc-border-strong: #d5cfc5;
	--fc-surface: #ffffff;
	--fc-sand: #faf8f5;
	--fc-sand-deep: #f4f0e9;

	/* --- Sombras con matiz cálido, en capas --- */
	--fc-shadow-xs: 0 1px 2px rgba(20, 35, 28, 0.05);
	--fc-shadow-sm: 0 1px 3px rgba(20, 35, 28, 0.06), 0 1px 2px rgba(20, 35, 28, 0.04);
	--fc-shadow-md: 0 4px 12px rgba(20, 35, 28, 0.07), 0 2px 4px rgba(20, 35, 28, 0.04);
	--fc-shadow-lg: 0 12px 28px rgba(20, 35, 28, 0.10), 0 4px 10px rgba(20, 35, 28, 0.05);
	--fc-shadow-xl: 0 24px 48px rgba(20, 35, 28, 0.13), 0 8px 16px rgba(20, 35, 28, 0.06);

	--fc-radius-sm: 8px;
	--fc-radius-md: 14px;
	--fc-radius-lg: 20px;
	--fc-radius-xl: 28px;
	--fc-radius-pill: 999px;

	--fc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fc-dur: 0.28s;

	--fc-space-section: clamp(56px, 7vw, 104px);
}

/* =========================================================================
 * 1. Texto — solo color y ajustes finos, sin tocar tamaños
 * ========================================================================= */

body {
	color: var(--fc-text);
	-webkit-font-smoothing: antialiased;
}

.listeo-childtheme h1,
.listeo-childtheme h2,
.listeo-childtheme h3 {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Etiqueta sobre titular: el nivel de jerarquía que faltaba en las secciones. */
.fc-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fc-accent);
	margin-bottom: 14px;
}

.fc-eyebrow::after {
	content: "";
	display: block;
	width: 36px;
	height: 3px;
	margin-top: 9px;
	border-radius: var(--fc-radius-pill);
	background: var(--fc-accent-grad);
}

/* =========================================================================
 * 2. Hero — legibilidad del texto sobre foto
 * ========================================================================= */

.listeo-childtheme .main-search-container {
	position: relative;
	/* Altura proporcional al viewport para que el buscador quede SIEMPRE above
	   the fold (en pantallas bajas el hero se encoge en vez de empujar el
	   buscador fuera de vista). Tope 540px en monitores altos. */
	min-height: clamp(400px, 54vh, 520px);
	display: flex;
	align-items: center;
	padding: 8px 0;
	background-size: cover;
	/* Encuadre: bajar el punto focal deja el cielo/carretera arriba y el bosque
	   denso detrás del texto, que es donde el scrim trabaja mejor. */
	background-position: center 42%;
}

/* Scrim cinematográfico en capas: viñeta radial + degradado vertical que se
   cierra hacia abajo (subtítulo + buscador). El velo anterior caía a 0.22 en el
   centro —justo donde va el subtítulo— y el texto blanco perdía contraste sobre
   el follaje claro. Ahora el subtítulo queda sobre ~0.5+ de oscurecido. */
.listeo-childtheme .main-search-container::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 100% at 50% 40%,
			rgba(1, 26, 18, 0) 38%, rgba(1, 26, 18, 0.55) 100%),
		linear-gradient(
			180deg,
			rgba(1, 40, 28, 0.46) 0%,
			rgba(1, 34, 24, 0.40) 34%,
			rgba(1, 26, 18, 0.66) 56%,
			rgba(1, 20, 14, 0.82) 80%,
			rgba(1, 16, 11, 0.92) 100%
		);
	z-index: 0;
}

.listeo-childtheme .main-search-container > *,
.listeo-childtheme .main-search-container .container {
	position: relative;
	z-index: 1;
}

/* El tema infla `.main-search-inner` con padding 190/150 (pensado para un header
   transparente muy alto). Con eso + la altura reservada del titular, el buscador
   caía bajo el pliegue. Se reduce el padding para subir el conjunto y dejar el
   buscador above the fold (el titular sigue despejado del header). */
.transparent-header .main-search-container .main-search-inner,
.listeo-childtheme .main-search-container .main-search-inner {
	padding-top: 100px !important;
	padding-bottom: 40px !important;
}

/* Titular del hero: presencia y legibilidad sobre la foto. El tamaño se fija
   aquí, acotado al hero con !important (no es una regla global de h1). */
.listeo-childtheme .main-search-container h1 {
	color: #fff !important;
	font-size: clamp(32px, 3.7vw, 50px) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em !important;
	font-weight: 800 !important;
	text-shadow: 0 2px 32px rgba(1, 22, 15, 0.50), 0 1px 3px rgba(0, 0, 0, 0.28);
	max-width: 16ch;
	/* Altura reservada para 3 líneas (en em → escala con el tamaño). El titular
	   anima con typed.js entre "Autocaravana" (3 líneas) y "Camper" (2): sin esta
	   reserva el bloque saltaba ~60px y movía el buscador dentro/fuera del pliegue.
	   Ahora la altura es constante y el buscador no se mueve. No se usa flex aquí
	   porque partiría el texto inline (typed-words/cursor) en líneas sueltas. */
	min-height: 3.35em;
	margin: 0 auto 6px !important;
}

/* Palabra animada (typed.js) en la lima de marca: destaca la variable
   (Autocaravana / Camper) sin romper la sobriedad editorial. */
.listeo-childtheme .main-search-container .typed-words {
	color: var(--fc-lime);
	font-weight: 800;
}

.listeo-childtheme .main-search-container .typed-cursor {
	color: var(--fc-lime-deep);
	font-weight: 300;
	margin-left: 2px;
}

/* Subtítulo (h4 sin clase del widget homebanner): blanco pleno con sombra;
   antes se leía apagado sobre el follaje. */
.listeo-childtheme .main-search-container h4 {
	color: #ffffff !important;
	/* El tema baja el subtítulo a opacity:0.65 (regla .transparent-header …h4),
	   por eso se veía apagado sobre el follaje. A opacidad plena. */
	opacity: 1 !important;
	font-size: clamp(17px, 1.5vw, 21px) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 22px rgba(1, 16, 11, 0.85);
	margin: 0 auto 16px !important;
	max-width: 46ch;
}

/* Píldora de búsqueda: flota sobre la foto con sombra premium y un aro claro. */
.listeo-childtheme .main-search-container .main-search-input {
	box-shadow: 0 26px 64px rgba(1, 20, 14, 0.30), 0 8px 22px rgba(1, 20, 14, 0.20);
	border: 1px solid rgba(255, 255, 255, 0.55);
}

/* =========================================================================
 * 3. Buscador — corrección de alineación
 *    Medido antes del arreglo: alturas 46 / 39 / 50px y tops 458/458/455,
 *    con align-items:flex-start. De ahí la sensación de "descuadrado".
 *    Tras el arreglo: los 4 elementos a 56px y top idéntico.
 * ========================================================================= */

.main-search-input {
	align-items: stretch !important;
	background: var(--fc-surface);
	border-radius: var(--fc-radius-pill);
	box-shadow: var(--fc-shadow-lg);
	padding: 8px !important;
	gap: 0;
	/* El tema fijaba 68px de alto mientras los campos medían 88px: se salían
	   de la píldora y se veían cajas blancas colgando por debajo. */
	height: auto !important;
	min-height: 72px;
}

.main-search-input-item {
	display: flex !important;
	align-items: center;
	/* Altura fija: los paneles desplegables internos estaban en el flujo y
	   estiraban los campos a 88px dentro de una píldora de 72px. */
	height: 56px !important;
	align-self: center;
	padding: 0 18px !important;
	margin: 0 !important;
	border-right: 1px solid var(--fc-border) !important;
}

/* Hover del buscador — enfoque directo y sin efectos secundarios.
   CAUSA del verde que persistía: el tema pinta un verde lima (rgb 224,243,170)
   con !important en el hover de los <a>/<select>/segmentos internos del buscador.
   Iba sobre elementos HIJOS, por delante de cualquier chip nuestro. Aquí se
   recolorea TODO ese hover a un beige neutro y uniforme (con esquinas
   redondeadas), sin pseudos ni position/isolation —que descolocaban el
   datepicker—. El label y el chevron pasan al verde de marca. */
/* IMPORTANTE: se prefija con .listeo-childtheme (clase del body) para SUBIR la
   especificidad. El tema inyecta su verde en un <style> inline que se carga
   DESPUÉS de esta hoja; con misma especificidad + !important ganaría él por orden
   de fuente. Con la clase extra (0,4,x > 0,3,x) ganamos siempre. */
.listeo-childtheme .main-search-input-item:hover,
.listeo-childtheme .main-search-input-item.date-range:hover,
.listeo-childtheme .main-search-input-item.slider_type:hover,
.listeo-childtheme .main-search-input-item.drilldown-taxonomy:hover,
.listeo-childtheme .main-search-input a:hover,
.listeo-childtheme .main-search-input select:hover,
.listeo-childtheme .main-search-input button:hover,
.listeo-childtheme .main-search-input .chosen-container .chosen-single:hover,
.listeo-childtheme .main-search-input-item:hover > a,
.listeo-childtheme .main-search-input-item:hover .panel-dropdown > a {
	background: var(--fc-sand-deep) !important;
	border-radius: var(--fc-radius-md);
}

/* En páginas de ARCHIVO (p. ej. /alquiler-autocaravanas/) el buscador va dentro
   de un `#menu`, y el tema usa `#menu a/select/button:hover {verde}` — un selector
   con ID (1,1,1) que GANA a nuestras reglas de clase (0,3,1). Por eso el verde
   reaparecía solo en esas páginas. Se replica con la clase del buscador para
   superar la especificidad del ID (1,2,1 > 1,1,1). */
#menu .main-search-input a:hover,
#menu .main-search-input select:hover,
#menu .main-search-input button:hover,
#menu .main-search-input .chosen-container .chosen-single:hover {
	background: var(--fc-sand-deep) !important;
	border-radius: var(--fc-radius-md);
}

/* El botón Buscar (submit) conserva su acento: regla MÁS específica (incluye la
   clase .button / el tipo submit), así ni el verde ni el beige lo tocan, esté o
   no dentro de #menu. */
.listeo-childtheme .main-search-input button.button:hover,
.listeo-childtheme .main-search-input button[type="submit"]:hover,
.listeo-childtheme .main-search-input input[type="submit"]:hover,
#menu .main-search-input button.button:hover,
#menu .main-search-input button[type="submit"]:hover,
#menu .main-search-input input[type="submit"]:hover {
	background: var(--fc-accent-grad) !important;
}

.listeo-childtheme .main-search-input-item:hover .panel-dropdown > a,
.listeo-childtheme .main-search-input-item:hover > a,
.listeo-childtheme .main-search-input-item:hover label,
.listeo-childtheme .main-search-input-item:hover .chosen-single > span,
.listeo-childtheme .main-search-input-item:hover i {
	color: var(--fc-primary) !important;
}

/* "Plazas" y "Precio" metían un .panel-dropdown de 88px dentro de un campo
   de 56px: la etiqueta subía y el chevron caía fuera de la píldora.
   El disparador ocupa el campo entero y el panel sale del flujo. */
.main-search-input-item .panel-dropdown {
	display: flex !important;
	align-items: center;
	width: 100%;
	height: 56px !important;
	position: relative;
}

.main-search-input-item .panel-dropdown > a {
	display: flex !important;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* Los paneles desplegables se superponen, no empujan */
.main-search-input-item .panel-dropdown > div,
.main-search-input-item .panel-dropdown-content,
.main-search-input-item .chosen-drop {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 9999;
}

.main-search-input-item:last-of-type {
	border-right: none !important;
}

.main-search-input-item > *,
.main-search-input-item input,
.main-search-input-item select,
.main-search-input-item .chosen-container {
	width: 100%;
	margin: 0 !important;
	line-height: 1.4;
}

.main-search-input-item input[type="text"] {
	height: auto !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Item vacío (drilldown sin contenido) no debe reservar espacio de flex */
.main-search-input-item:empty {
	display: none !important;
}

/* El drilldown aloja DOS campos (Provincia + Municipio) dentro de un flex
   anidado. Con 6 campos en la barra del listado se comprimían a ~60px y las
   etiquetas se truncaban ("Prov", "Muni"). Se le da el doble de reparto y un
   mínimo por campo para que el texto quepa siempre. */
.main-search-input-item.drilldown-taxonomy {
	flex: 2 1 auto !important;
	padding: 0 !important;
	border-right: none !important;
}

.main-search-input-item.drilldown-taxonomy
	> .main-search-input-item.drilldown-taxonomy {
	min-width: 132px;
	flex: 1 1 132px !important;
	padding: 0 18px !important;
}

.main-search-input button.button,
.main-search-input input[type="submit"] {
	align-self: stretch;
	min-height: 56px;
	padding: 0 35px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: var(--fc-radius-pill) !important;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.01em;
	color: #fff !important;
	background: var(--fc-accent-grad) !important;
	cursor: pointer;
	transition: box-shadow var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease);
}

.main-search-input button.button:hover,
.main-search-input input[type="submit"]:hover {
	box-shadow: 0 8px 20px rgba(194, 65, 12, 0.32);
	transform: translateY(-1px);
}

/* =========================================================================
 * 4. CTA premium
 *    El "borde iridiscente animado" queda como variante opt-in
 *    (.fc-btn-iridescent), no como estilo por defecto: la referencia
 *    elegida (Yescapa) es sobria y un borde arcoíris la contradice.
 *    Por defecto: degradado + barrido de luz al hover.
 * ========================================================================= */

.fc-btn-accent .elementor-button,
a.fc-btn-accent,
.fc-cta {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 32px;
	border: none;
	border-radius: var(--fc-radius-pill) !important;
	background: var(--fc-accent-grad) !important;
	color: #fff !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 14px rgba(194, 65, 12, 0.24);
	transition: box-shadow var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease);
}

.fc-btn-accent .elementor-button:hover,
a.fc-btn-accent:hover,
.fc-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(194, 65, 12, 0.34);
	color: #fff !important;
}

/* Barrido de luz: sutil, una sola pasada al hover */
.fc-btn-accent .elementor-button::after,
a.fc-btn-accent::after,
.fc-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 100%
	);
	transform: skewX(-18deg);
	transition: left 0.6s var(--fc-ease);
	pointer-events: none;
}

.fc-btn-accent .elementor-button:hover::after,
a.fc-btn-accent:hover::after,
.fc-cta:hover::after {
	left: 120%;
}

/* Variante secundaria: contorno verde, para acciones no principales */
.fc-btn-outline .elementor-button,
a.fc-btn-outline {
	background: transparent !important;
	color: var(--fc-primary) !important;
	border: 2px solid var(--fc-primary) !important;
	border-radius: var(--fc-radius-pill) !important;
	font-weight: 600;
	transition: background-color var(--fc-dur) var(--fc-ease), color var(--fc-dur) var(--fc-ease);
}

.fc-btn-outline .elementor-button:hover,
a.fc-btn-outline:hover {
	background: var(--fc-primary) !important;
	color: #fff !important;
}

/* --- Variante opt-in: borde iridiscente animado --- */
.fc-btn-iridescent {
	position: relative;
	z-index: 0;
	border-radius: var(--fc-radius-pill);
	background: var(--fc-accent-grad);
	color: #fff !important;
	font-weight: 700;
	padding: 15px 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	overflow: hidden;
}

.fc-btn-iridescent::before {
	content: "";
	position: absolute;
	inset: -50%;
	z-index: -2;
	background: conic-gradient(
		from 0deg,
		#d4550f, #e0a30f, #c8e37d, #016b45, #0f9b8e, #d4550f
	);
	animation: fc-iris 5s linear infinite;
}

.fc-btn-iridescent::after {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: -1;
	border-radius: inherit;
	background: var(--fc-accent-grad);
}

@keyframes fc-iris {
	to { transform: rotate(1turn); }
}

/* =========================================================================
 * 5. Tarjetas de vehículo — estilo editorial tipo Yescapa
 * ========================================================================= */

/* La tarjeta real es .tarjeta_veh (envoltorio del child theme).
   OJO: .listing-item-container es un <span> de geodatos de 1px de alto —
   estilarlo no pinta nada visible. Estructura:
     .tarjeta_veh
       ├ span.listing-item-container.listing-geo-data  (1px, oculto)
       ├ .listing-item                                 (carrusel de imagen)
       └ .contenido_grid                               (título, precio, CTAs) */

/* Alturas iguales dentro de una misma fila: medido antes, 641 vs 621px.
   La columna Bootstrap se hace flex para que la tarjeta la rellene entera. */
.listings-container [class*="col-"] {
	display: flex;
	flex-direction: column;
}

.tarjeta_veh {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
	box-shadow: var(--fc-shadow-sm);
	transition: box-shadow var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease),
		border-color var(--fc-dur) var(--fc-ease);
}

.tarjeta_veh:hover {
	box-shadow: var(--fc-shadow-xl);
	transform: translateY(-4px);
	border-color: var(--fc-border-strong);
}

/* Proporción constante de imagen: sin ella las tarjetas quedan a distinta
   altura y la retícula se descuadra. */
.tarjeta_veh .listing-item,
.tarjeta_veh .su-image-carousel,
.tarjeta_veh .flickity-viewport {
	aspect-ratio: 16 / 10;
	height: auto !important;
	overflow: hidden;
}

.tarjeta_veh .listing-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--fc-ease);
}

.tarjeta_veh:hover .listing-item img {
	transform: scale(1.05);
}

/* El contenido crece para igualar alturas entre tarjetas de la misma fila.
   El padding lleva !important porque el tema fijaba 0 12px 12px y ganaba. */
.tarjeta_veh .contenido_grid {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px !important;
	padding: 16px 18px 18px !important;
}

/* Ritmo vertical entre bloques de la tarjeta */
.tarjeta_veh .contenido_grid > .listing-content,
.tarjeta_veh .contenido_grid > .mi_desde,
.tarjeta_veh .contenido_grid > .cinturon_y_cama {
	margin: 0 !important;
}

/* El precio "Desde X €/día" venía alineado a la izquierda mientras el resto del
   contenido de la tarjeta (ubicación, título, plazas, CTAs) va centrado. Se
   centra para uniformidad visual. */
.tarjeta_veh .mi_desde {
	text-align: center;
}

.tarjeta_veh .cinturon_y_cama {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--fc-border);
}

/* Los dos grupos de iconos (plazas + camas) iban con `justify-content: space-around`,
   que los empuja a los tercios exteriores dejando un hueco grande en el centro. Se
   agrupan CENTRADOS con una separación fija para que queden más al medio de la tarjeta. */
.tarjeta_veh .cinturon_y_cama {
	justify-content: center !important;
	gap: 44px;
}

/* Los dos CTA estaban pegados (hueco medido: 0px). Fila con separación real
   y reparto a partes iguales. */
.tarjeta_veh .botones_finales {
	display: flex !important;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
}

.tarjeta_veh .botones_finales > * {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
}

.tarjeta_veh .botones_finales .elementor-button {
	height: auto !important;
	min-height: 44px;
	width: 100%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px 12px !important;
	font-size: 14px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* En pantallas estrechas los dos CTA no caben en fila sin truncarse */
	.tarjeta_veh .botones_finales {
		flex-direction: column;
		gap: 8px;
	}
}

/* Badges: la lima de marca en vez de otro verde plano */
.listing-item .tag,
.listing-badge {
	border-radius: var(--fc-radius-pill) !important;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.01em;
}

.listing-item .tag.featured,
.listing-badge.featured {
	background: var(--fc-lime) !important;
	color: var(--fc-primary-deep) !important;
}

/* Precio: el dato que más se compara, debe leerse primero */
.listing-item-container .listing-price,
.listing-item-container .listing-item-price {
	color: var(--fc-primary);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.listing-item-container .listing-item-details,
.listing-item-container .listing-features {
	color: var(--fc-text-muted);
}

/* =========================================================================
 * 6. Ficha de vehículo — widget de reserva elevado
 * ========================================================================= */

#booking-widget,
.booking-widget,
#booking-widget-anchor .boxed-widget {
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-lg);
}

#booking-widget .button.book-now,
.booking-widget .button.book-now,
#booking-widget button.button,
#booking-widget .button {
	background: var(--fc-accent-grad) !important;
	border: none !important;
	border-radius: var(--fc-radius-pill) !important;
	font-weight: 700 !important;
	color: #fff !important;
	padding: 15px 24px !important;
	box-shadow: 0 4px 14px rgba(194, 65, 12, 0.24);
	transition: box-shadow var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease);
}

#booking-widget .button.book-now:hover,
.booking-widget .button.book-now:hover,
#booking-widget button.button:hover,
#booking-widget .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(194, 65, 12, 0.34);
}

.listing-slider,
.listing-slider-small {
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
}

/* =========================================================================
 * 7. Mega menú
 * ========================================================================= */

.fc-mega { position: relative; }

.fc-mega-panel {
	position: absolute;
	top: calc(100% + 14px);
	/* Alineado al borde izquierdo del ítem (abre hacia la derecha). Antes usaba
	   left:50% + translateX(-50%) para centrar, pero los ítems del menú
	   (Autocaravanas, Furgonetas Camper) están en la mitad izquierda: centrar un
	   panel de 720px lo empujaba a left:-206px y cortaba la 1ª columna. Medido en
	   /listings/. Ambos ítems abren dentro del viewport con esta alineación. */
	left: 0;
	transform: translateY(-8px);
	width: min(720px, calc(100vw - 48px));
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-xl);
	padding: 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease),
		visibility var(--fc-dur);
	z-index: 1000000;
}

.fc-mega:hover .fc-mega-panel,
.fc-mega:focus-within .fc-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Puente invisible sobre el hueco de 14px entre el ítem y el panel. Sin él, al
   mover el ratón hacia el submenú se cruzaba una franja sin :hover y el panel se
   cerraba antes de poder clicar (hover gap). El ::before es descendiente de
   .fc-mega, así que mantiene el :hover mientras se cruza el hueco. Solapa 2px con
   el ítem para que no haya ningún instante sin hover. */
.fc-mega-panel::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}

.fc-mega-col h4 {
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--fc-text-subtle);
	margin: 0 0 14px;
	font-weight: 700;
}

.fc-mega-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--fc-radius-md);
	color: var(--fc-text) !important;
	font-weight: 600;
	transition: background-color 0.18s var(--fc-ease);
}

.fc-mega-link:hover {
	background: var(--fc-primary-tint);
	color: var(--fc-primary) !important;
}

.fc-mega-count {
	font-size: 13px;
	font-weight: 600;
	color: var(--fc-text-subtle);
	background: var(--fc-sand-deep);
	border-radius: var(--fc-radius-pill);
	padding: 2px 10px;
}

.fc-mega-feature {
	background: var(--fc-sand);
	border-radius: var(--fc-radius-md);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fc-mega-feature p {
	color: var(--fc-text-muted);
	margin: 0 0 16px;
}

/* En táctil el hover no existe: se oculta y queda el enlace normal */
@media (hover: none) {
	.fc-mega-panel { display: none !important; }
}

/* =========================================================================
 * 8. Página de planes
 * ========================================================================= */

.fc-current-plan { text-align: center; margin-bottom: 32px; }

.fc-pricing-table {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: start;
	max-width: 980px;
	margin: 40px auto var(--fc-space-section);
	padding-top: 14px;
}

.fc-plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	padding: 32px 28px;
	box-shadow: var(--fc-shadow-sm);
	transition: box-shadow var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease);
}

.fc-plan-card:hover {
	box-shadow: var(--fc-shadow-lg);
	transform: translateY(-3px);
}

.fc-plan-card--featured {
	border-color: var(--fc-primary);
	border-width: 2px;
	box-shadow: var(--fc-shadow-md);
}

.fc-plan-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--fc-primary-grad);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--fc-radius-pill);
	white-space: nowrap;
	box-shadow: var(--fc-shadow-sm);
}

.fc-plan-card h3 { margin: 0 0 8px; }

.fc-plan-price {
	font-size: 30px;
	font-weight: 700;
	color: var(--fc-primary);
	letter-spacing: -0.02em;
	margin: 0 0 20px;
}

.fc-plan-features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex-grow: 1;
}

.fc-plan-features li {
	padding: 8px 0;
	color: var(--fc-text-muted);
	border-bottom: 1px solid var(--fc-border);
}

.fc-plan-features li:last-child { border-bottom: none; }

.fc-plan-cta {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px 20px;
	border: none;
	border-radius: var(--fc-radius-pill);
	background: var(--fc-accent-grad);
	color: #fff !important;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(194, 65, 12, 0.22);
	transition: transform var(--fc-dur) var(--fc-ease), box-shadow var(--fc-dur) var(--fc-ease);
}

.fc-plan-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(194, 65, 12, 0.32);
	color: #fff !important;
}

.fc-plan-cta--login {
	background: transparent;
	color: var(--fc-primary) !important;
	border: 2px solid var(--fc-primary);
	padding: 12px 20px;
	box-shadow: none;
}

.fc-plan-cta--login:hover {
	background: var(--fc-primary);
	color: #fff !important;
	box-shadow: var(--fc-shadow-md);
}

.fc-plan-cta--active,
.fc-plan-cta--active:hover {
	background: var(--fc-sand-deep);
	color: var(--fc-text-muted) !important;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* =========================================================================
 * 9. Móvil
 * ========================================================================= */

@media (max-width: 1024px) {
	.fc-mega-panel { display: none !important; }
}

@media (max-width: 767px) {
	/* El menú desplegable de Elementor se posiciona fuera del viewport cuando
	   está cerrado (medido: right 426px con viewport de 375px) y provocaba
	   scroll horizontal en toda la página. */
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* El buscador pasa a tarjeta apilada; los bordes verticales no aplican */
	.main-search-input {
		flex-direction: column;
		border-radius: var(--fc-radius-lg);
		padding: 14px !important;
		gap: 8px;
	}

	.main-search-input-item {
		border-right: none !important;
		border-bottom: 1px solid var(--fc-border) !important;
		width: 100%;
		min-height: 52px;
	}

	/* Provincia y Municipio viven en un flex anidado que seguía en fila:
	   quedaban a 121px y truncados ("Prc", "Mu"). Se apilan a ancho completo. */
	.main-search-input-item.drilldown-taxonomy {
		flex-direction: column;
		align-items: stretch;
		padding: 0 !important;
		border-bottom: none !important;
	}

	.main-search-input-item.drilldown-taxonomy
		> .main-search-input-item.drilldown-taxonomy {
		width: 100% !important;
		flex: 1 1 auto !important;
		padding: 0 18px !important;
		border-right: none !important;
		border-bottom: 1px solid var(--fc-border) !important;
	}

	.main-search-input-item:last-of-type {
		border-bottom: none !important;
	}

	.main-search-input button.button,
	.main-search-input input[type="submit"] {
		width: 100%;
		min-height: 52px;
	}

	/* Objetivos táctiles cómodos */
	.fc-plan-cta,
	.fc-cta,
	a.fc-btn-accent {
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fc-pricing-table {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: 16px;
	}

	.listing-item-container { margin-bottom: 20px; }

	/* El hover-lift no aporta en táctil y provoca saltos */
	.listing-item-container:hover,
	.fc-plan-card:hover { transform: none; }
}

/* =========================================================================
 * 10. Accesibilidad
 * ========================================================================= */

.listeo-childtheme a:focus-visible,
.listeo-childtheme button:focus-visible,
.listeo-childtheme input:focus-visible,
.listeo-childtheme select:focus-visible,
.fc-cta:focus-visible,
.fc-plan-cta:focus-visible {
	outline: 3px solid var(--fc-accent);
	outline-offset: 2px;
	border-radius: var(--fc-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.listing-item-container:hover,
	.fc-plan-card:hover,
	.fc-cta:hover,
	a.fc-btn-accent:hover { transform: none; }

	.listing-item-container:hover .listing-item img { transform: none; }
}

/* =========================================================================
 * 12. Correcciones globales
 * ========================================================================= */

/* El tema fija width:100vw a .container.content-container. 100vw incluye el
   ancho de la barra de scroll → 15px de overflow horizontal en desktop
   (medido: contenedor 1411px vs área visible 1396px). 100% respeta el área
   visible y elimina la barra horizontal sin recortar contenido. */
.elementor-page .container.content-container {
	width: 100% !important;
}

/* =========================================================================
 * 13. CTA de cabecera "¿Eres profesional?"
 * En páginas internas el header es verde sólido y el CTA tenía fondo verde
 * idéntico (#015a3a) → la píldora era invisible y solo se veía el texto
 * subrayado (se ve mal en /listings/). Se le da la LIMA de marca: destaca
 * sobre el header verde y sobre la home, con un borde/sombra que lo define
 * también en cabeceras claras. Sin subrayado, con hover elevado. Lima =
 * confianza; no roba el acento terracota reservado a conversión (Reservar/Buscar).
 * ========================================================================= */

.listeo-childtheme li.eres_pro > a {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: var(--fc-lime) !important;
	color: var(--fc-primary-deep) !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: var(--fc-radius-pill) !important;
	padding: 12px 24px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	line-height: 1 !important;
	box-shadow: 0 3px 14px rgba(1, 22, 15, 0.20);
	transition: transform var(--fc-dur) var(--fc-ease), box-shadow var(--fc-dur) var(--fc-ease);
}

/* Borde iridiscente animado — solo aquí (decisión del cliente): un anillo cónico
   que gira alrededor de la píldora lima. El ::after (inset 2px) tapa el centro y
   deja ver el anillo como un borde vivo de ~2px. La lima queda de superficie. */
.listeo-childtheme li.eres_pro > a::before {
	content: "";
	position: absolute;
	inset: -60%;
	z-index: -2;
	background: conic-gradient(
		from 0deg,
		#d4550f, #e0a30f, #c8e37d, #016b45, #0f9b8e, #d4550f
	);
	animation: fc-iris 6s linear infinite;
}

.listeo-childtheme li.eres_pro > a::after {
	content: "";
	position: absolute;
	inset: 3px;
	z-index: -1;
	border-radius: inherit;
	background: var(--fc-lime);
	transition: background-color var(--fc-dur) var(--fc-ease);
}

.listeo-childtheme li.eres_pro > a:hover,
.listeo-childtheme li.eres_pro > a:focus-visible {
	color: var(--fc-primary-deep) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(1, 22, 15, 0.30);
}

.listeo-childtheme li.eres_pro > a:hover::after,
.listeo-childtheme li.eres_pro > a:focus-visible::after {
	background: var(--fc-lime-deep);
}

/* Respeto por usuarios con movimiento reducido: el anillo se queda quieto. */
@media (prefers-reduced-motion: reduce) {
	.listeo-childtheme li.eres_pro > a::before { animation: none; }
}

/* =========================================================================
 * 14. Nav de la ficha en móvil — legibilidad
 * El nav dinámico de la ficha (#nav-list-dynamic) caía a 11px en móvil
 * (< 12px mínimo recomendado). En desktop ya está a 16px. Se sube en móvil
 * a 13px; la barra sigue con scroll horizontal, así que no rompe el layout.
 * ========================================================================= */
@media (max-width: 767px) {
	.listeo-childtheme .listing-nav.dynamic-nav a,
	.listeo-childtheme #nav-list-dynamic a {
		font-size: 13px !important;
	}
}

/* =========================================================================
 * 15. Dots del carrusel de las tarjetas de vehículo
 * El plugin Shortcodes Ultimate (.su-image-carousel) centra los dots de
 * Flickity verticalmente (top:50% + translateY(-50%)) y un <style> inyecta
 * top:252px → los puntos salían EN MITAD de la foto. Se anclan abajo-centro.
 * Acotado a las tarjetas (.tarjeta_veh) para no tocar otros carruseles.
 * ========================================================================= */
.tarjeta_veh .flickity-page-dots,
.tarjeta_veh ol.flickity-page-dots,
.tarjeta_veh .su-image-carousel > ol.flickity-page-dots,
.listing-item .flickity-page-dots {
	top: auto !important;
	bottom: 12px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: auto !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* =========================================================================
 * 16. Logo del header — tamaño consistente
 * En dev el efecto sticky de Elementor no encogía el logo (quedaba a ~557px,
 * empujando el CTA "¿Eres profesional?" a una segunda línea), mientras en local
 * salía compacto (~200px). El post-702.css es idéntico en ambos, así que es una
 * diferencia de runtime del sticky. Se fija el ancho del logo para que el header
 * sea IGUAL en todos los entornos y estados (con o sin sticky).
 * ========================================================================= */
.elementor-location-header .elementor-widget-image img,
.elementor-702 .elementor-widget-image img {
	max-width: 200px !important;
	height: auto !important;
}

/* =========================================================================
 * 17. Buscador de la HOME — no partir en 2 filas + datepicker usable
 * En la home el buscador está al borde del hero. Con `flex-wrap: wrap` (del
 * tema), al seleccionar provincia/municipio con nombres largos los campos se
 * iban a una 2ª fila y el datepicker quedaba inservible. En desktop se fuerza
 * UNA sola fila (nowrap) con los campos encogibles y texto truncado; el
 * datepicker se abre hacia arriba por JS (ver functions.php) para que se vea
 * sobre el hero. En móvil se mantiene el apilado (wrap).
 * ========================================================================= */
@media (min-width: 992px) {
	.listeo-childtheme .main-search-container .main-search-input {
		flex-wrap: nowrap !important;
	}
	.listeo-childtheme .main-search-container .main-search-input-item {
		min-width: 0;
	}
	/* Reparto de anchos deliberado (~890px interiores de la píldora) para que TODOS
	   los rótulos se lean y los campos queden parejos:
	   Tipo 200 + [Provincia 165 | Municipio 165] + Fecha 235 + Buscar (auto).
	   Provincia y Municipio comparten el resto a partes IGUALES (flex 1 1 0). */
	.listeo-childtheme .main-search-container .main-search-input-item.select-taxonomy {
		flex: 0 0 200px !important;
		min-width: 200px !important;
	}
	.listeo-childtheme .main-search-container .main-search-input > .drilldown-taxonomy {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	.listeo-childtheme .main-search-container .main-search-input > .drilldown-taxonomy > .drilldown-taxonomy {
		flex: 1 1 0 !important;
		min-width: 150px !important;
	}
	/* El campo de fecha necesita ancho para "Recogida – Devolución" + icono. */
	.listeo-childtheme .main-search-container .main-search-input-item.date-range {
		flex: 0 0 235px !important;
		min-width: 235px !important;
	}
	/* Hueco a la derecha del texto de fecha para que el icono de calendario no
	   quede pegado a "Devolución". */
	.listeo-childtheme .main-search-container .main-search-input-item.date-range input[type="text"] {
		padding-right: 28px !important;
	}
	/* Sangría izquierda UNIFORME: el botón de "Tipo" traía 15px extra (arrancaba a
	   33px vs 18px del resto). Se anula para que todos los rótulos empiecen igual. */
	.listeo-childtheme .main-search-container .main-search-input-item.select-taxonomy button.dropdown-toggle {
		padding-left: 0 !important;
	}
	/* Separadores verticales sutiles entre campos (estilo editorial): la barra se
	   lee alineada y con secciones claras. Pseudo-línea centrada (no a toda altura). */
	.listeo-childtheme .main-search-container .main-search-input > .drilldown-taxonomy,
	.listeo-childtheme .main-search-container .main-search-input > .drilldown-taxonomy > .drilldown-taxonomy + .drilldown-taxonomy,
	.listeo-childtheme .main-search-container .main-search-input-item.date-range {
		position: relative;
	}
	.listeo-childtheme .main-search-container .main-search-input > .drilldown-taxonomy::before,
	.listeo-childtheme .main-search-container .main-search-input > .drilldown-taxonomy > .drilldown-taxonomy + .drilldown-taxonomy::before,
	.listeo-childtheme .main-search-container .main-search-input-item.date-range::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 24px;
		width: 1px;
		background: rgba(43, 58, 47, 0.12);
	}
	/* Texto largo de los campos trunca con … en vez de empujar y romper la fila. */
	.listeo-childtheme .main-search-container .main-search-input-item .chosen-single span,
	.listeo-childtheme .main-search-container .main-search-input-item .filter-option,
	.listeo-childtheme .main-search-container .main-search-input-item select,
	.listeo-childtheme .main-search-container .main-search-input-item input[type="text"] {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* El calendario del datepicker que abre hacia arriba (drops:up) en la home:
   asegurar que quede por encima del buscador y visible. */
.main-search-container .daterangepicker.drop-up,
.daterangepicker.opensright.drop-up {
	margin-top: 0;
}