.hc-board-wrap {
	background: #0B1014;
	border: 1px solid rgba(226,196,142,.18);
	border-radius: 28px;
	padding: 28px;
	color: #fff;
}

.hc-board-header {
	margin-bottom: 24px;
}

.hc-board-header h2 {
	margin: 0 0 8px;
	color: #E2C48E;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.05;
}

.hc-board-header p {
	margin: 0;
	color: rgba(255,255,255,.72);
}

/* Mobile-first filters */
.hc-board-filters-wrap {
	position: sticky;
	top: 0;
	z-index: 40;
	margin-bottom: 18px;
	padding: 10px 0;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.hc-board-filters {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hc-board-filters::-webkit-scrollbar {
	display: none;
}

.hc-board-filters input,
.hc-board-filters select,
.hc-board-filters button {
	flex: 0 0 auto;
	min-width: 180px;
	box-sizing: border-box;
}

.hc-board-filters input,
.hc-board-filters select {
	background: rgba(5,5,5,.88);
	border: 1px solid rgba(226,196,142,.24);
	border-radius: 999px;
	padding: 13px 16px;
	color: #fff;
	backdrop-filter: blur(10px);
}

.hc-board-filters input:focus,
.hc-board-filters select:focus {
	border-color: #E2C48E;
	outline: none;
}

/* Desktop filters */
@media (min-width: 901px) {
	.hc-board-filters-wrap {
		position: relative;
		top: auto;
		z-index: 1;
		padding: 0;
		margin-bottom: 24px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.hc-board-filters {
		display: grid;
		grid-template-columns: 2fr 1.2fr 1fr 1fr;
		gap: 14px;
		overflow: visible;
		padding-bottom: 0;
	}

	.hc-board-filters input,
	.hc-board-filters select,
	.hc-board-filters button {
		width: 100%;
		min-width: 0;
	}
}

@media (min-width: 1200px) {
	.hc-board-filters {
		grid-template-columns: 2fr 1.2fr .9fr .9fr .9fr 1.2fr 1.2fr auto;
		align-items: center;
	}
}

.hc-board-loading,
.hc-board-empty {
	background: #111820;
	border: 1px solid rgba(226,196,142,.16);
	border-radius: 20px;
	padding: 22px;
	color: rgba(255,255,255,.72);
	text-align: center;
}

/* HC_BOARD_EMPTY_EXPEDIA_V2 — barra estrecha propia (una línea) cuando no hay anuncios */
.hc-exp-mini-wrap {
	width: 100%;
	margin: 4px 0;
}
.hc-exp-mini {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	padding: 12px 14px;
	background: #111820;
	border: 1px solid rgba(226, 196, 142, .28);
	border-radius: 4px;
	text-align: left;
}
.hc-exp-mini-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 120px;
	min-width: 100px;
}
.hc-exp-mini-field.hc-exp-mini-dest {
	flex: 2 1 200px;
}
.hc-exp-mini-field.hc-exp-mini-num {
	flex: 0 1 90px;
	min-width: 78px;
}
.hc-exp-mini-field label {
	color: #E2C48E;
	font-size: 12px;
	font-weight: 600;
}
.hc-exp-mini-field input,
.hc-exp-mini-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	background: #050505;
	border: 1px solid rgba(226, 196, 142, .22);
	border-radius: 4px;
	color: #F5F5F5;
	font-size: 14px;
	color-scheme: dark;
}
/* Botón redondo con lupa (unificado con las-casas) */
.hcxm-go {
	flex: 0 0 auto;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: #E2C48E;
	color: #1a1f24;
	border: none;
	border-radius: 50%;
	font-size: 17px;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}
.hcxm-go:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}
@media (max-width: 640px) {
	.hc-exp-mini-field,
	.hc-exp-mini-field.hc-exp-mini-dest,
	.hc-exp-mini-field.hc-exp-mini-num {
		flex: 1 1 100%;
	}
	.hcxm-go {
		align-self: center;
	}
}

/* ── HC_BOARD_VIEW_TOGGLE_V1 — conmutador Lista/Tabla (igual que las-casas) ──
   ⚠️ Colores EXPLÍCITOS con !important: los resets de `button` de los temas
   pintan los botones de blanco navegador (lección LC 56h) — aquí no pueden. */
.hc-board-toolbar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 14px;
}
.hc-board-viewtoggle {
	display: inline-flex;
	background: rgba(17, 24, 32, .92);
	border: 1px solid rgba(226, 196, 142, .24);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}
button.hc-board-viewbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer;
	color: #C2C2C2 !important;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 999px;
	box-shadow: none !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background .15s ease, color .15s ease;
}
button.hc-board-viewbtn i { font-size: 12px; }
button.hc-board-viewbtn:hover { color: #E2C48E !important; }
button.hc-board-viewbtn.is-active {
	background: linear-gradient(135deg, #E2C48E, #F8D189) !important;
	color: #0B1014 !important;
	box-shadow: 0 2px 8px rgba(226, 196, 142, .25) !important;
}

/* ── HC_BOARD_BOOKING_ROW_V1 — vista LISTA (por defecto): filas estilo Booking,
   foto a la izquierda y datos a la derecha (igual que /alojamiento/ de
   las-casas). La vista TABLA (.hc-view-table en .hc-board-wrap) conserva la
   rejilla / carrusel de antes. ── */
.hc-board-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hc-board-card {
	background: #111820;
	border: 1px solid rgba(226,196,142,.18);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hc-board-card:hover {
	transform: translateY(-4px);
	border-color: rgba(226,196,142,.42);
	box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.hc-board-card a {
	color: inherit;
	text-decoration: none;
	display: flex;          /* fila: foto izquierda + datos derecha */
	align-items: stretch;
}

.hc-board-card-image {
	position: relative;
	flex: 0 0 200px;        /* foto más pequeña → fila compacta (antes 300px) */
	width: 200px;
	min-height: 150px;      /* antes 210px */
	height: auto;           /* se estira a la altura de la fila */
	background: #050505;
	overflow: hidden;
}

/* ⚠️ !important: los temas ponen `img { height:auto !important }` en móvil y la
   foto deja un hueco vacío debajo (lección las-casas 2026-07-19). */
.hc-board-card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.hc-board-card-placeholder {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 52px;
	background: linear-gradient(135deg, #111820, #050505);
}

.hc-board-card-id {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(5,5,5,.78);
	border: 1px solid rgba(226,196,142,.35);
	color: #E2C48E;
	border-radius: 999px;
	padding: 6px 11px;
	font-size: 12px;
	font-weight: 700;
}

.hc-board-card-body {
	padding: 13px 16px;     /* más compacto (antes 16px) */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.hc-board-card-body h3 {
	margin: 0 0 10px;
	color: #E2C48E;
	/* Fuente limpia (no el serif grueso del tema) + peso normal: títulos legibles,
	   no "gordos". Recorte a 2 líneas → todas las tarjetas con la MISMA altura. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .1px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hc-board-card-location {
	color: rgba(255,255,255,.72);
	font-size: 13.5px;
	line-height: 1.35;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hc-board-card-meta,
.hc-board-card-features {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 9px;
}

.hc-board-card-meta span {
	background: rgba(226,196,142,.10);
	border: 1px solid rgba(226,196,142,.14);
	color: rgba(255,255,255,.82);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 13px;
}

.hc-board-card-features span {
	background: rgba(46,204,113,.12);
	border: 1px solid rgba(46,204,113,.28);
	color: #9ff0bf;
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
}

.hc-board-card-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid rgba(226,196,142,.12);
	padding-top: 14px;
	margin-top: auto;       /* precio siempre pegado abajo de la fila */
}

.hc-board-card-bottom strong {
	color: #E2C48E;
	font-size: 20px;
}

/* Botón «ir» = solo flecha (dueño 2026-07-26: el texto «Ver propiedad» sobraba
   y se cortaba en columnas estrechas — la flecha se entiende sola). */
.hc-board-card-bottom span {
	color: #0B1014;
	background: #E2C48E;
	border-radius: 999px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 800;
	transition: transform .15s ease;
}
.hc-board-card:hover .hc-board-card-bottom span { transform: translateX(3px); }

.hc-board-results-count {
	background: rgba(226,196,142,.08);
	border: 1px solid rgba(226,196,142,.16);
	color: rgba(255,255,255,.78);
	border-radius: 18px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
}

.hc-board-results-count strong {
	color: #E2C48E;
	font-size: 16px;
}

/* Skeleton (en vista lista también es una fila: bloque-foto izquierda) */
.hc-board-skeleton-card {
	pointer-events: none;
	display: flex;
	align-items: stretch;
}

.hc-board-skeleton-image {
	flex: 0 0 200px;
	width: 200px;
	min-height: 150px;
	background: linear-gradient(90deg, #111820, #1b2633, #111820);
	background-size: 200% 100%;
	animation: hcSkeleton 1.2s infinite;
}

.hc-board-skeleton-line {
	height: 13px;
	border-radius: 999px;
	background: linear-gradient(90deg, #1a2430, #263445, #1a2430);
	background-size: 200% 100%;
	animation: hcSkeleton 1.2s infinite;
	margin-bottom: 12px;
}

.hc-board-skeleton-title {
	height: 18px;
	width: 75%;
}

.hc-board-skeleton-line.short {
	width: 48%;
}

.hc-board-skeleton-pills {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.hc-board-skeleton-pills span {
	width: 70px;
	height: 26px;
	border-radius: 999px;
	background: linear-gradient(90deg, #1a2430, #263445, #1a2430);
	background-size: 200% 100%;
	animation: hcSkeleton 1.2s infinite;
}

@keyframes hcSkeleton {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* ── HC_BOARD_MOBILE_BKLIST_V1 — vista LISTA en móvil: fila COMPACTA estilo
   app de Booking («la página en miniatura»): foto estrecha a la izquierda,
   título → ubicación → chips → precio a la derecha. El botón «Ver propiedad»
   se oculta (la tarjeta entera ya es el enlace). ── */
@media (max-width: 767px) {
	.hc-board-card { border-radius: 12px; }

	/* Miniatura estilo app: foto casi cuadrada estrecha a la izquierda. */
	.hc-board-card-image {
		flex: 0 0 104px;
		width: 104px;
		min-height: 104px;
	}

	.hc-board-card-id { top: 6px; left: 6px; padding: 2px 7px; font-size: 9.5px; }

	.hc-board-card-body { padding: 8px 11px; }
	.hc-board-card-body h3 { font-size: 13.5px; margin-bottom: 3px; }
	.hc-board-card-location { font-size: 11.5px; margin-bottom: 6px; }

	.hc-board-card-meta { gap: 5px; margin-bottom: 0; }
	.hc-board-card-meta span { padding: 2px 7px; font-size: 10.5px; }

	/* En miniatura móvil ocultamos la 2ª fila de chips (Amueblado, etc.): el detalle
	   completo está en la ficha. Así la fila queda realmente compacta. */
	.hc-board-card-features { display: none; }

	.hc-board-card-bottom { padding-top: 7px; }
	.hc-board-card-bottom strong { font-size: 14px; }
	.hc-board-card-bottom span { display: none; }   /* la tarjeta entera es el enlace */

	.hc-board-skeleton-image { flex-basis: 104px; width: 104px; min-height: 104px; }
}

/* ── Vista TABLA (.hc-view-table en .hc-board-wrap): la rejilla / carrusel de
   siempre — carrusel horizontal en móvil, 4/6 columnas en escritorio. ── */
/* HC_FILA_6_V1: las tarjetas llegan agrupadas en filas de 6. En escritorio la
   fila NO debe existir como caja — con `display: contents` sus tarjetas siguen
   siendo hijas de la rejilla y la cuadrícula de 4 columnas queda intacta. El
   móvil la convierte en carrusel más abajo. */
.hc-board-row { display: contents; }

.hc-view-table .hc-board-grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
}

/* Tarjetas de IGUAL altura: la tarjeta (celda del grid) se estira a la fila; el
   enlace y el cuerpo son columnas flex que la rellenan, y el precio se ancla abajo
   con margin-top:auto → todas terminan a la misma altura, sin huecos raros. */
.hc-view-table .hc-board-card {
	scroll-snap-align: start;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
}

.hc-view-table .hc-board-card a {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* ⚠️ LAS DOS FAMILIAS DE TARJETA A LA VEZ (2026-07-30, «en escritorio la
   altura es distinta, hazlas iguales»). Los alojamientos ponen la foto en
   `.hc-board-card-image` y los COCHES en `.hc-board-card-media`; esta regla
   solo nombraba a la primera, así que la foto del coche conservaba su
   proporción natural y cada tarjeta terminaba a una altura distinta. */
.hc-view-table .hc-board-card-image,
.hc-view-table .hc-board-card-media {
	flex: none;
	width: 100%;
	height: 210px;
	min-height: 0;
}

.hc-view-table .hc-board-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hc-view-table .hc-board-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px;
}
.hc-view-table .hc-board-card-body h3 {
	font-size: 17px;
	min-height: 44px;   /* reserva 2 líneas → los datos de abajo se alinean entre tarjetas */
}
.hc-view-table .hc-board-card-bottom { margin-top: auto; padding-top: 14px; }

.hc-view-table .hc-board-skeleton-card { display: block; }
.hc-view-table .hc-board-skeleton-image {
	flex: none;
	width: 100%;
	height: 210px;
	min-height: 0;
}

@media (min-width: 768px) {
	.hc-view-table .hc-board-grid {
		grid-auto-flow: initial;
		grid-auto-columns: initial;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow-x: visible;
		padding-bottom: 0;
	}
}

/* Escritorio ancho: 4 columnas (dueño 2026-07-26 — con 6 iban apretadas);
   la 5ª columna visual es el sidebar, como en las-casas. */
@media (min-width: 1200px) {
	.hc-view-table .hc-board-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ⚠️ FRONTERA 767px, NO 600px (2026-07-30, «siguen saliendo 1,5 tarjetas»).
   El bloque de escritorio arranca en 768px (ahí la rejilla pasa a 4 columnas).
   Con este bloque cortado en 600px, entre 601 y 767 —una ventana estrecha de
   ordenador o una tableta— no entraba NINGUNA regla: mandaba el
   `grid-auto-columns: 72%` de base, o sea 1,4 tarjetas por pantalla. Ahora las
   dos fronteras se tocan y no queda hueco entre ellas. */
@media (max-width: 767px) {
	.hc-board-wrap {
		padding: 18px;
		border-radius: 22px;
	}

	/* TABLA en el movil = carrusel de 2,5 tarjetas (orden del dueño): el 42%
	   + hueco deja dos enteras y media cortada — la que dice «desliza».

	   ⚠️ En vw y NO en %: un porcentaje se mide contra el contenedor, y si
	   algún padre vuelve a medirse por su contenido, el 40% se convierte en
	   una pantalla entera (fue justo lo que pasó). vw se mide contra la
	   PANTALLA y no hay padre que lo estropee.

	   Con el dedo: touch-action da permiso explícito para arrastrar en
	   horizontal, y overscroll-behavior evita que Android se lleve el gesto
	   como «atrás». La barra fina, además de guiar, avisa: si NO aparece, la
	   tira no desborda y el problema no es el gesto. */
	/* La rejilla vuelve a ser un BLOQUE: las filas se apilan una debajo de otra
	   y «Cargar más» añade una fila nueva a la vista, no alarga la línea. */
	.hc-view-table .hc-board-grid {
		display: block;
		overflow: visible;
	}

	/* Y el carrusel es CADA FILA. */
	.hc-view-table .hc-board-row {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 42vw;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		margin-bottom: 14px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;   /* horizontal EN la tira y vertical para la pagina */
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		align-items: start;   /* que una tarjeta alta no estire a las demás */
		scrollbar-width: thin;
		scrollbar-color: rgba(226, 196, 142, .55) transparent;
	}

	.hc-view-table .hc-board-row::-webkit-scrollbar { height: 4px; }
	.hc-view-table .hc-board-row::-webkit-scrollbar-thumb {
		background: rgba(226, 196, 142, .55);
		border-radius: 4px;
	}

	/* El banner va ENTRE filas, a lo ancho. */
	.hc-view-table .hc-board-banner-row {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0 0 14px;
		text-align: center;
	}

	/* ⚠️ min-width: 0 + ancho explícito (2026-07-30, «salen 1,5 tarjetas y no
	   2,5»). `grid-auto-columns: 42vw` fija la PISTA, pero un elemento de
	   rejilla no puede encogerse por debajo de su contenido: como la foto
	   arrastra un `width: 200px` de la vista Lista, la pista se estiraba y solo
	   cabía una tarjeta y media. Con min-width:0 la tarjeta obedece la pista, y
	   la foto pasa a medir el ancho de la tarjeta. */
	.hc-view-table .hc-board-card {
		scroll-snap-align: start;
		min-width: 0 !important;
		width: 42vw !important;
		max-width: 42vw !important;
	}

	.hc-view-table .hc-board-card-image,
	.hc-view-table .hc-board-card-media {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	/* Textos largos sin espacios (URLs, nombres pegados) también estiran una
	   pista: que partan antes de ensanchar la tarjeta. */
	.hc-view-table .hc-board-card-body,
	.hc-view-table .hc-board-card-body h3,
	.hc-view-table .hc-board-card-location {
		min-width: 0 !important;
		overflow-wrap: anywhere;
	}

	/* Con tarjetas al 42vw una foto de 210px seria un sello vertical. Las dos
	   familias: -image son alojamientos, -media son coches. */
	.hc-view-table .hc-board-card-image,
	.hc-view-table .hc-board-card-media {
		height: 96px;
	}

	/* ── HC_TABLA_25_V2 (2026-07-30) — LO QUE CABE EN UNA TARJETA DE 40% ────
	   A 40% de pantalla la tarjeta mide unos 140px. Con el padding de 16px y
	   el titulo a 17px que hereda del escritorio, quedaban ~108px utiles y el
	   titulo salia a cuatro lineas: la tira se descuadraba entera.

	   Se queda lo que decide: foto, titulo (DOS lineas), ciudad y PRECIO. Se
	   va la chapa del tipo de objeto («Piso/Apartamento»), que sola ya es mas
	   ancha que la tarjeta; los iconos de camas y visitas se quedan en una
	   linea. Mismo criterio que en el feed de las-casas, para que las dos
	   webs se lean igual.
	   ──────────────────────────────────────────────────────────────────── */
	.hc-view-table .hc-board-card-body {
		padding: 9px 10px 10px;
	}

	.hc-view-table .hc-board-card-body h3 {
		font-size: 13px;
		line-height: 1.2;
		min-height: 32px;          /* dos lineas: los precios siguen alineados */
		margin-bottom: 3px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.hc-view-table .hc-board-card-location {
		font-size: 11px;
		margin-bottom: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hc-view-table .hc-board-card-meta {
		flex-wrap: nowrap;
		overflow: hidden;
		gap: 6px;
	}

	.hc-view-table .hc-board-card-meta .badge {
		display: none;
	}

	.hc-view-table .hc-board-card-bottom {
		padding-top: 8px;
	}

	.hc-view-table .hc-board-card-bottom strong {
		font-size: 13px;
		white-space: nowrap;
	}
}
.hc-board-nearby {
	background: linear-gradient(135deg, rgba(17,24,32,.96), rgba(5,5,5,.96));
	border: 1px solid rgba(226,196,142,.18);
	border-radius: 24px;
	padding: 18px;
	margin-bottom: 22px;
}

.hc-board-nearby-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.hc-board-nearby-header > span {
	/* flex:0 0 42px — SIN esto el circulo se aplasta: en un contenedor flex el
	   texto de al lado le roba ancho y el circulo sale con forma de huevo. Es lo
	   que se veia en el movil. */
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(226,196,142,.12);
	border: 1px solid rgba(226,196,142,.22);
	border-radius: 16px;
	font-size: 22px;
}

.hc-board-nearby-header h3 {
	margin: 0 0 4px;
	color: #E2C48E;
	font-size: 20px;
}

.hc-board-nearby-header p {
	margin: 0;
	color: rgba(255,255,255,.68);
	font-size: 14px;
}

.hc-board-nearby .hc-map-container {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(226,196,142,.16);
}

.hc-board-nearby .hc-nearby-listings {
	background: #111820;
	color: #fff;
	border: 1px solid rgba(226,196,142,.14);
}

@media (max-width: 600px) {
	.hc-board-nearby {
		padding: 14px;
		border-radius: 20px;
	}

	.hc-board-nearby .hc-map-container {
		height: 260px !important;
	}
}
/* ── HC_BOARD_SIDEBAR_V1: columna derecha del tablón /anuncios/ ──
   Espejo del sidebar de las-casas: 3 bloques de publicidad + escaparate de
   Las Casas + tarjeta de Manolo. En móvil baja debajo del listado. */
.hc-board-layout { display: flex; gap: 24px; align-items: flex-start; }
.hc-board-main { flex: 1 1 auto; min-width: 0; }
.hc-board-aside { flex: 0 0 300px; width: 300px; position: sticky; top: 20px; }
.hc-board-aside-inner { display: flex; flex-direction: column; gap: 16px; }

.hc-aside-ad { width: 100%; }
.hc-aside-ad--empty {
	border: 1px dashed rgba(226,196,142,.45);
	border-radius: 12px;
	padding: 26px 14px;
	text-align: center;
	color: #9aa3ad;
	font-size: 13px;
}

.hc-aside-lc,
.hc-aside-manolo {
	width: 100%;
	box-sizing: border-box;
	background: #111820;
	border: 1px solid rgba(226,196,142,.28);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hc-aside-lc-head {
	display: flex; align-items: baseline; gap: 8px;
	padding: 12px 14px 10px;
	border-bottom: 1px solid rgba(226,196,142,.18);
}
.hc-aside-lc-brand { color: #E2C48E; font-weight: 800; font-size: 15px; letter-spacing: .2px; }
.hc-aside-lc-sub { color: #9aa3ad; font-size: 11.5px; }
.hc-aside-lc-item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.06);
	transition: background .15s;
}
.hc-aside-lc-item:hover { background: rgba(226,196,142,.08); }
.hc-aside-lc-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-aside-lc-title {
	color: #EAE6DD; font-size: 13px; font-weight: 700; line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-aside-lc-desc {
	color: #9aa3ad; font-size: 11.5px; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-aside-lc-thumb {
	flex: 0 0 76px; width: 76px; height: 58px;
	object-fit: cover; border-radius: 8px;
	border: 1px solid rgba(226,196,142,.22);
}
.hc-aside-lc-thumb--empty { display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,.05); }
.hc-aside-lc-foot {
	display: block; padding: 10px 14px 12px;
	color: #E2C48E; font-size: 12.5px; font-weight: 700;
	text-decoration: none; text-align: right;
}
.hc-aside-lc-foot:hover { text-decoration: underline; }

.hc-aside-manolo-cover { width: 100%; height: 118px; object-fit: cover; display: block; }
.hc-aside-manolo-in { padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.hc-aside-manolo-head { display: flex; align-items: center; gap: 8px; }
.hc-aside-manolo-ava { font-size: 20px; line-height: 1; }
.hc-aside-manolo-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(226,196,142,.45); flex: 0 0 auto; }
.hc-aside-manolo-name { color: #E2C48E; font-weight: 700; font-size: 15px; }
.hc-aside-manolo-tag { margin-left: auto; color: #9aa3ad; font-size: 11px; border: 1px solid rgba(226,196,142,.35); border-radius: 20px; padding: 2px 8px; }
.hc-aside-manolo-title { margin: 2px 0 0; color: #EAE6DD; font-size: 15px; line-height: 1.3; font-weight: 700; }
.hc-aside-manolo-body { margin: 0; color: #C2C2C2; font-size: 13px; line-height: 1.5; }
.hc-aside-manolo-foot { margin: 4px 0 0; color: #9aa3ad; font-size: 12px; line-height: 1.45; }
.hc-aside-manolo-foot a { color: #E2C48E; font-weight: 700; text-decoration: none; }
.hc-aside-manolo-foot a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.hc-board-layout { flex-direction: column; }

	/* ══════════════════════════════════════════════════════════════════════
	   ⚠️ align-items: stretch — SIN ESTO LA VISTA TABLA SALE A TODO EL ANCHO
	   (2026-07-30; el mismo fallo, letra por letra, que en el feed de
	   las-casas).

	   `.hc-board-layout` es flex con `align-items: flex-start`. Al pasar a
	   columna aquí, ese flex-start SIGUE puesto — y en una columna flex el eje
	   transversal es el ANCHO: los hijos dejan de estirarse a la pantalla y
	   toman el ancho de su CONTENIDO.

	   Entonces `.hc-board-main` medía lo que midieran las 12 tarjetas juntas, y
	   el `grid-auto-columns: 40%` de la tira se calculaba contra ESE ancho
	   gigante: cada tarjeta salía a pantalla completa. Y de paso la tira no
	   desbordaba de verdad, así que tampoco se deslizaba.
	   ══════════════════════════════════════════════════════════════════════ */
	.hc-board-layout { align-items: stretch; }

	.hc-board-main {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.hc-board-aside { position: static; width: 100%; flex: 1 1 auto; }
	.hc-board-aside-inner { flex-direction: row; flex-wrap: wrap; justify-content: center; }
	.hc-aside-ad, .hc-aside-lc, .hc-aside-manolo { width: 100%; max-width: 340px; }
}

/* ── HC_ZONE_PLAN_V1: envoltorios de las zonas de publicidad ── */
.hc-zone-banner { margin: 18px auto; text-align: center; max-width: 970px; }
.hc-zone-banner img { max-width: 100%; height: auto; }
/* Banner intercalado en el listado: fila entera tanto en rejilla como en lista. */
.hc-board-banner-row { grid-column: 1 / -1; width: 100%; margin: 6px 0; text-align: center; }
.hc-board-banner-row img { max-width: 100%; height: auto; }


/* ──────────────────────────────────────────────────────────────
   HC_BOARD_MOBILE_V2 (2026-07-29) — DENSIDAD EN EL MOVIL.
   El tablero estaba maquetado con medidas de escritorio y en un telefono cabian
   dos lineas por pantalla: titular de 28 px, bloques con 20 px de relleno por
   lado, iconos de 42 px y textos de 15-16. Un movil no es un monitor pequeno:
   ahi se lee de un vistazo y se desliza, no se contempla.
   Se recortan tamanos y aire SOLO en pantallas de telefono; el escritorio queda
   exactamente como estaba.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

	.hc-board-header {
		margin-bottom: 14px;
	}

	/* De 28 px fijos a 20-24 segun el ancho real del telefono. */
	.hc-board-header h2 {
		font-size: clamp(20px, 5.6vw, 26px);
		line-height: 1.15;
		margin-bottom: 4px;
	}

	.hc-board-header p {
		font-size: 13px;
		line-height: 1.35;
	}

	.hc-board-nearby {
		padding: 12px;
		border-radius: 14px;
	}

	.hc-board-nearby-header {
		gap: 10px;
		margin-bottom: 10px;
	}

	.hc-board-nearby-header > span {
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		border-radius: 11px;
		font-size: 16px;
	}

	.hc-board-nearby-header h3 {
		font-size: 15px;
		line-height: 1.25;
	}

	.hc-board-nearby-header p {
		font-size: 12.5px;
		line-height: 1.35;
	}

	/* El mapa ocupaba media pantalla antes de que se viera un solo anuncio. */
	.hc-board-nearby .hc-map-container {
		height: 190px !important;
		border-radius: 12px;
	}

	.hc-map-error,
	.hc-nearby-listings p {
		font-size: 13px;
		line-height: 1.4;
		padding: 10px 12px;
	}
}


/* ══════════════════════════════════════════════════════════════════════
   HC_FILAS_MOVIL_V1 (2026-07-29, orden del dueño) — EN EL MOVIL, TODO EL
   TABLERO SON FILAS. Coches y pisos por igual.

   El modelo lo señalo el dueño con el dedo: el widget «Las Casas» del
   sidebar — texto a la izquierda (titulo en negrita + dos lineas), foto
   pequeña redondeada a la derecha, y un filo fino entre fila y fila. Nada
   de tarjetones a pantalla completa ni carruseles cortados.

   SOLO la vista LISTA (orden del dueño, corregido 2026-07-29): la primera
   version pisaba tambien a la Tabla y el conmutador quedo muerto — Lista y
   Tabla enseñaban lo mismo. La TABLA en el movil es OTRA cara: el carrusel
   horizontal con 2,5 tarjetas a la vista (mas abajo). Por eso todos los
   selectores de este bloque llevan :not(.hc-view-table).

   Los !important son contra los estilos base de la lista.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	.hc-board-wrap:not(.hc-view-table) .hc-board-grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		overflow: visible !important;
		padding-bottom: 0 !important;
		scroll-snap-type: none !important;
	}

	.hc-board-wrap:not(.hc-view-table) .hc-board-card {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		border-bottom: 1px solid rgba(226, 196, 142, .16) !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	.hc-board-wrap:not(.hc-view-table) .hc-board-card:last-child {
		border-bottom: 0 !important;
	}

	/* La fila: cuerpo a la IZQUIERDA, foto a la DERECHA (row-reverse porque
	   en el HTML la imagen va primero — asi no se toca ni una plantilla). */
	.hc-board-wrap:not(.hc-view-table) .hc-board-card > a,
	.hc-board-wrap:not(.hc-view-table) .hc-board-card .hc-card-link {
		display: flex !important;
		flex-direction: row-reverse !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 11px 2px !important;
	}

	/* La foto del sidebar: pequeña, apaisada, esquinas redondeadas. Vale
	   para las dos familias de tarjeta (pisos usan -image, coches -media). */
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-image,
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-media {
		flex: 0 0 108px !important;
		width: 108px !important;
		height: 76px !important;
		min-height: 0 !important;
		border-radius: 10px !important;
		overflow: hidden !important;
	}

	.hc-board-wrap:not(.hc-view-table) .hc-board-card-image img,
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hc-board-wrap:not(.hc-view-table) .hc-board-card-body {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		padding: 0 !important;
	}

	/* Titulo + dos lineas de texto, como en el widget. Lo que no cabe en
	   una fila compacta, fuera: chips, contadores, insignias. El detalle
	   completo vive en la ficha. */
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-body h3 {
		margin: 0 0 2px !important;
		white-space: normal;
	}

	.hc-board-wrap:not(.hc-view-table) .hc-board-card-location {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 0 !important;
	}

	.hc-board-wrap:not(.hc-view-table) .hc-board-card-meta,
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-features,
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-id,
	.hc-board-wrap:not(.hc-view-table) .hc-pro-chip {
		display: none !important;
	}

	/* El precio si: es el dato que decide, y cabe en una linea. */
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-bottom,
	.hc-board-wrap:not(.hc-view-table) .hc-board-card-price {
		padding: 2px 0 0 !important;
		margin: 0 !important;
	}

	/* El boton «Editar» del dueño, en la esquina de su foto. */
	.hc-card-edit {
		top: 8px !important;
		right: 8px !important;
		padding: 3px 9px !important;
	}
}