/*
 * Encabezado de los listados (ver includes/encabezado.php): foto de la
 * categoría a lo ancho y, montada sobre su borde inferior, una tarjeta con
 * migas de pan, título, bajada y datos.
 *
 * Los selectores llevan .areco-encabezado adelante para ganarle a los estilos
 * globales del kit de Elementor (h1, a, img).
 */

.areco-encabezado {
	--areco-encabezado-tinta: #24301f;
	--areco-encabezado-texto: #535a50;
	--areco-encabezado-gris: #6f746c;
	/* Color global "Principal oscuro" del kit de Elementor. */
	--areco-encabezado-verde: var(--e-global-color-secondary, #618d53);
	/* Título: gris entre "Gris n3" (#747474) y "Gris n4" (#5a5a5a) del kit. */
	--areco-encabezado-titulo: #666;
	--areco-encabezado-linea: #eef0ec;
	/* El ancho de los contenedores del sitio (1180 px con 15 px de cada lado), así la tarjeta arranca donde arranca el listado. */
	--areco-encabezado-ancho: 1180px;
	--areco-encabezado-margen: 15px;
	/* Velo negro sobre la foto, el mismo que las fotos de las tarjetas (--areco-mascara en listados.css). */
	--areco-encabezado-mascara: 0.25;
	margin: 0 0 30px;
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--areco-encabezado-texto);
	text-align: left;
}

/* Foto */

.areco-encabezado .areco-encabezado__foto {
	position: relative;
	/* El velo y el crédito se apilan dentro de la foto: no tapan la tarjeta que se monta encima. */
	isolation: isolate;
	/* Crece con el ancho: a 1.440 px mide 403 (3,6 veces más ancha que alta);
	   con alto fijo, en una pantalla grande quedaba una franja de 6 a 1 en la
	   que casi ninguna foto entraba bien. */
	height: clamp(300px, 28vw, 440px);
	overflow: hidden;
	background: #dfe5db;
}

.areco-encabezado .areco-encabezado__imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: cover;
	object-position: center var(--areco-encuadre, 50%);
}

/* Velo negro: baja los blancos quemados de las fotos con mucha luz. Queda por
   debajo del crédito de la foto, que se lee igual. */
.areco-encabezado .areco-encabezado__foto::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgba(0, 0, 0, var(--areco-encabezado-mascara));
	pointer-events: none;
}

/* De quién es la foto: arriba a la derecha en todos los listados (en la portada
   la tarjeta tapa el borde de abajo), alineado con el borde del contenido. */
.areco-encabezado .areco-encabezado__credito {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: max(var(--areco-encabezado-margen), calc((100% - var(--areco-encabezado-ancho)) / 2 + var(--areco-encabezado-margen)));
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: calc(100% - 2 * var(--areco-encabezado-margen));
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(20, 26, 17, 0.62);
	color: #fff;
	font-size: 12.5px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s;
}

.areco-encabezado .areco-encabezado__credito:hover,
.areco-encabezado .areco-encabezado__credito:focus-visible {
	background: rgba(20, 26, 17, 0.82);
	color: #fff;
}

.areco-encabezado .areco-encabezado__credito .areco-icono {
	width: 15px;
	height: 15px;
	flex: none;
}

.areco-encabezado__credito-nombre {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* La localidad en un renglón: si no entra, se acorta el nombre ("Almacén de Ramos G…"). */
.areco-encabezado__credito-lugar {
	flex: none;
	white-space: nowrap;
}

.areco-encabezado__credito-lugar::before {
	content: "·";
	margin-right: 7px;
}

/* Tarjeta */

.areco-encabezado .areco-encabezado__interior {
	position: relative;
	max-width: var(--areco-encabezado-ancho);
	margin: 0 auto;
	padding: 0 var(--areco-encabezado-margen);
}

.areco-encabezado--con-foto .areco-encabezado__interior {
	margin-top: -88px;
}

.areco-encabezado--sin-foto .areco-encabezado__interior {
	padding-top: 30px;
}

.areco-encabezado .areco-encabezado__tarjeta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px 16px;
	align-items: center;
	max-width: 860px;
	padding: 26px 36px 24px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(36, 48, 31, 0.16);
}

.areco-encabezado--sin-foto .areco-encabezado__tarjeta {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Migas de pan (HTML de Rank Math) */

.areco-encabezado .rank-math-breadcrumb {
	grid-column: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--areco-encabezado-gris);
}

/* El sitio centra las migas (las de la portada vieja iban sobre la foto). */
.areco-encabezado .rank-math-breadcrumb p {
	margin: 0;
	text-align: left;
}

.areco-encabezado .rank-math-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.areco-encabezado .rank-math-breadcrumb a:hover {
	color: var(--areco-encabezado-verde);
}

.areco-encabezado .rank-math-breadcrumb .separator {
	color: var(--areco-encabezado-verde);
}

.areco-encabezado .rank-math-breadcrumb .last {
	font-weight: 500;
	color: var(--areco-encabezado-tinta);
}

.areco-encabezado .areco-encabezado__fecha {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--areco-encabezado-gris);
	white-space: nowrap;
}

.areco-encabezado .areco-encabezado__fecha .areco-icono {
	width: 15px;
	height: 15px;
}

.areco-encabezado .areco-encabezado__titulo {
	grid-column: 1 / -1;
	margin: 0;
	font-family: inherit;
	font-size: 44px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--areco-encabezado-titulo);
	text-wrap: balance;
}

.areco-encabezado .areco-encabezado__bajada {
	grid-column: 1 / -1;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--areco-encabezado-texto);
}

.areco-encabezado .areco-encabezado__bajada p {
	margin: 0;
}

.areco-encabezado .areco-encabezado__bajada p + p {
	margin-top: 0.6em;
}

.areco-encabezado .areco-encabezado__datos {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--areco-encabezado-linea);
	list-style: none;
	font-size: 15px;
	line-height: 1.4;
	color: var(--areco-encabezado-tinta);
}

.areco-encabezado .areco-encabezado__datos li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.areco-encabezado .areco-encabezado__datos .areco-icono {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--areco-encabezado-verde);
}

.areco-encabezado .areco-encabezado__datos strong {
	font-weight: 600;
}

/* Tablet */

@media (max-width: 1024px) {
	.areco-encabezado .areco-encabezado__foto {
		height: clamp(260px, 32vw, 330px);
	}

	.areco-encabezado .areco-encabezado__titulo {
		font-size: 38px;
	}
}

/* Celular: foto más baja, tarjeta a lo ancho y la fecha al final. */

@media (max-width: 767px) {
	.areco-encabezado {
		margin-bottom: 20px;
	}

	.areco-encabezado .areco-encabezado__foto {
		height: 200px;
	}

	.areco-encabezado .areco-encabezado__credito {
		top: 12px;
		padding: 5px 10px;
		font-size: 11.5px;
	}

	.areco-encabezado .areco-encabezado__credito .areco-icono {
		width: 13px;
		height: 13px;
	}

	.areco-encabezado--con-foto .areco-encabezado__interior {
		margin-top: -40px;
	}

	.areco-encabezado--sin-foto .areco-encabezado__interior {
		padding-top: 20px;
	}

	.areco-encabezado .areco-encabezado__tarjeta {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 11px;
		padding: 18px 20px;
		box-shadow: 0 12px 32px rgba(36, 48, 31, 0.16);
	}

	.areco-encabezado .rank-math-breadcrumb {
		font-size: 13px;
	}

	.areco-encabezado .areco-encabezado__fecha {
		order: 10;
		font-size: 12px;
		white-space: normal;
	}

	.areco-encabezado .areco-encabezado__fecha .areco-icono {
		width: 13px;
		height: 13px;
	}

	.areco-encabezado .areco-encabezado__titulo {
		font-size: 30px;
	}

	.areco-encabezado .areco-encabezado__bajada {
		font-size: 15.5px;
	}

	.areco-encabezado .areco-encabezado__datos {
		gap: 6px 14px;
		padding-top: 12px;
		font-size: 14px;
	}

	.areco-encabezado .areco-encabezado__datos .areco-icono {
		width: 15px;
		height: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.areco-encabezado .areco-encabezado__credito {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Portada de "Dónde dormir": foto más alta y, en la tarjeta, el buscador y
 * los atajos en lugar de los datos (ver areco_encabezado_html_buscador()).
 * ------------------------------------------------------------------------ */

.areco-encabezado--portada {
	/* Naranja oscuro del kit: con texto blanco se lee mejor que el naranja. */
	--areco-encabezado-boton: var(--e-global-color-ccbc9aa, #cc532e);
	--areco-encabezado-boton-hover: #b6481f;
	--areco-encabezado-borde: #e3e5e0;
	--areco-encabezado-pildora: #d8e5d2;
}

.areco-encabezado--portada .areco-encabezado__foto {
	height: 540px;
}

.areco-encabezado--portada.areco-encabezado--con-foto .areco-encabezado__interior {
	margin-top: -196px;
}

.areco-encabezado--portada .areco-encabezado__tarjeta {
	gap: 16px;
	max-width: none;
	padding: 30px 36px 28px;
}

.areco-encabezado--portada .areco-encabezado__titulo {
	font-size: 48px;
}

.areco-encabezado--portada .areco-encabezado__bajada {
	max-width: 760px;
}

/* Buscador: una píldora con los tres campos y el botón */

.areco-encabezado .areco-buscador {
	grid-column: 1 / -1;
	display: flex;
	align-items: stretch;
	margin: 6px 0 0;
	padding: 6px;
	border: 1px solid var(--areco-encabezado-borde);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(36, 48, 31, 0.06);
}

.areco-encabezado .areco-buscador__campos {
	display: flex;
	flex: 1;
	min-width: 0;
}

.areco-encabezado .areco-buscador__campo {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 6px 22px;
	border-right: 1px solid var(--areco-encabezado-linea);
	border-radius: 999px 0 0 999px;
	transition: background-color 0.15s;
}

.areco-encabezado .areco-buscador__campo + .areco-buscador__campo {
	border-radius: 0;
}

.areco-encabezado .areco-buscador__campo:focus-within {
	background: #f6f8f4;
}

.areco-encabezado .areco-buscador__campo--huespedes {
	flex: 0 0 236px;
	border-right: 0;
}

.areco-encabezado .areco-buscador__rotulo {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--areco-encabezado-gris);
}

.areco-encabezado .areco-buscador__rotulo .areco-icono {
	width: 15px;
	height: 15px;
	color: var(--areco-encabezado-verde);
}

.areco-encabezado .areco-buscador__valor {
	position: relative;
	display: block;
}

.areco-encabezado .areco-buscador select {
	display: block;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0 26px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	line-height: 30px;
	color: #333;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.areco-encabezado .areco-buscador select:focus {
	outline: none;
}

.areco-encabezado .areco-buscador__campo:has(select:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--areco-encabezado-verde);
}

.areco-encabezado .areco-buscador__valor .areco-icono {
	position: absolute;
	top: 50%;
	right: 0;
	width: 16px;
	height: 16px;
	color: #666;
	transform: translateY(-50%);
	pointer-events: none;
}

.areco-encabezado .areco-buscador__paso {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 30px;
}

.areco-encabezado .areco-buscador__paso button {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--areco-encabezado-borde);
	border-radius: 50%;
	background: #fff;
	color: var(--areco-encabezado-verde);
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color 0.15s, opacity 0.15s;
}

.areco-encabezado .areco-buscador__paso button:hover:not(:disabled),
.areco-encabezado .areco-buscador__paso button:focus-visible {
	border-color: var(--areco-encabezado-verde);
	background: #fff;
	color: var(--areco-encabezado-verde);
}

.areco-encabezado .areco-buscador__paso button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Sin hover (pantallas táctiles), el botón que se puede usar lleva el borde verde:
   si no, "+" se ve igual de apagado que "−". */
@media (hover: none) {
	.areco-encabezado .areco-buscador__paso button:not(:disabled) {
		border-color: var(--areco-encabezado-verde);
	}
}

.areco-encabezado .areco-buscador__paso .areco-icono {
	width: 14px;
	height: 14px;
}

.areco-encabezado .areco-buscador__personas {
	font-size: 16px;
	line-height: 1.3;
	color: #333;
	text-align: center;
	white-space: nowrap;
}

.areco-encabezado .areco-buscador__campo--apagado .areco-buscador__personas {
	font-size: 14.5px;
	color: var(--areco-encabezado-gris);
}

.areco-encabezado .areco-buscador__boton {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 54px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--areco-encabezado-boton);
	box-shadow: none;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s;
}

.areco-encabezado .areco-buscador__boton:hover,
.areco-encabezado .areco-buscador__boton:focus-visible {
	background: var(--areco-encabezado-boton-hover);
	color: #fff;
}

.areco-encabezado .areco-buscador__boton .areco-icono {
	width: 19px;
	height: 19px;
}

/* Atajos: "Lo más buscado" */

.areco-encabezado .areco-encabezado__atajos {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.areco-encabezado .areco-encabezado__atajos-rotulo {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--areco-encabezado-gris);
}

.areco-encabezado .areco-encabezado__atajos ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.areco-encabezado .areco-encabezado__atajos li {
	margin: 0;
}

.areco-encabezado .areco-atajo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 15px;
	border: 1px solid var(--areco-encabezado-pildora);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	line-height: 1;
	color: #444;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s, background-color 0.15s;
}

.areco-encabezado .areco-atajo:hover,
.areco-encabezado .areco-atajo:focus-visible {
	border-color: var(--areco-encabezado-verde);
	background: #f6f8f4;
	color: var(--areco-encabezado-tinta);
}

.areco-encabezado .areco-atajo .areco-icono {
	width: 16px;
	height: 16px;
	color: var(--areco-encabezado-verde);
}

.areco-encabezado .areco-atajo__cantidad {
	font-size: 12.5px;
	color: var(--areco-encabezado-gris);
}

/* Tablet: los campos en una caja y el botón debajo */

@media (max-width: 1024px) {
	.areco-encabezado--portada .areco-encabezado__foto {
		height: 420px;
	}

	.areco-encabezado--portada.areco-encabezado--con-foto .areco-encabezado__interior {
		margin-top: -150px;
	}

	.areco-encabezado--portada .areco-encabezado__titulo {
		font-size: 40px;
	}

	.areco-encabezado .areco-buscador {
		flex-direction: column;
		gap: 12px;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.areco-encabezado .areco-buscador__campos {
		border: 1px solid var(--areco-encabezado-borde);
		border-radius: 5px;
	}

	.areco-encabezado .areco-buscador__campo,
	.areco-encabezado .areco-buscador__campo + .areco-buscador__campo {
		padding: 10px 16px;
		border-radius: 0;
	}

	.areco-encabezado .areco-buscador__campo--huespedes {
		flex-basis: 220px;
	}

	.areco-encabezado .areco-buscador__boton {
		width: 100%;
		min-height: 52px;
	}
}

/* Celular: los campos uno debajo del otro y los atajos se deslizan */

/* Tablet vertical: no entran los tres campos en una fila; huéspedes pasa abajo. */

@media (min-width: 768px) and (max-width: 900px) {
	.areco-encabezado .areco-buscador__campos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.areco-encabezado .areco-buscador__campo:nth-child(2) {
		border-right: 0;
	}

	.areco-encabezado .areco-buscador__campo--huespedes {
		grid-column: 1 / -1;
		border-top: 1px solid var(--areco-encabezado-linea);
	}

	.areco-encabezado .areco-buscador__paso {
		max-width: 280px;
	}
}

/*
 * Celular: el botón tiene que verse al abrir la página, sin bajar (unos 660 px
 * en un iPhone con Safari, no los 812 de la pantalla entera). Foto más baja y
 * la bajada después de los atajos: el botón termina cerca de los 620 px.
 */
@media (max-width: 767px) {
	.areco-encabezado--portada .areco-encabezado__foto {
		height: 160px;
	}

	.areco-encabezado--portada.areco-encabezado--con-foto .areco-encabezado__interior {
		margin-top: -44px;
	}

	/* Sigue entera en la página; la fecha (order: 10) queda al final. */
	.areco-encabezado--portada .areco-encabezado__bajada {
		order: 5;
	}

	.areco-encabezado--portada .areco-encabezado__tarjeta {
		gap: 12px;
		padding: 18px 18px 20px;
	}

	.areco-encabezado--portada .areco-encabezado__titulo {
		font-size: 30px;
	}

	.areco-encabezado .areco-buscador {
		margin-top: 2px;
	}

	.areco-encabezado .areco-buscador__campos {
		flex-direction: column;
	}

	.areco-encabezado .areco-buscador__campo,
	.areco-encabezado .areco-buscador__campo + .areco-buscador__campo,
	.areco-encabezado .areco-buscador__campo--huespedes {
		flex: none;
		padding: 8px 16px;
		border-right: 0;
		border-bottom: 1px solid var(--areco-encabezado-linea);
	}

	.areco-encabezado .areco-buscador__campo:last-child {
		border-bottom: 0;
	}

	.areco-encabezado .areco-buscador__paso button {
		width: 38px;
		height: 38px;
	}

	/* Sin nowrap, la columna se estira al ancho de todos los atajos y la página
	   se pasa del ancho de la pantalla. */
	.areco-encabezado .areco-encabezado__atajos {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 8px;
		margin: 2px -18px 0;
	}

	.areco-encabezado .areco-encabezado__atajos-rotulo {
		padding: 0 18px;
	}

	.areco-encabezado .areco-encabezado__atajos ul {
		flex-wrap: nowrap;
		padding: 0 18px 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.areco-encabezado .areco-encabezado__atajos ul::-webkit-scrollbar {
		display: none;
	}

	.areco-encabezado .areco-atajo {
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.areco-encabezado .areco-buscador__campo,
	.areco-encabezado .areco-buscador__paso button,
	.areco-encabezado .areco-buscador__boton,
	.areco-encabezado .areco-atajo {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Celular: letra un punto más grande, para que se lea mejor (19/10/2026).
 * Cada regla de arriba con letra de menos de 17 px que se aplica en el
 * celular, con 1 px más; los títulos y lo que ya es grande quedan igual.
 * Repite los selectores en el mismo orden: les gana sin cambiar la cascada.
 * Si cambia una letra de arriba, hay que repetirla acá con 1 px más.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.areco-encabezado .areco-encabezado__credito {
		font-size: 12.5px;
	}

	.areco-encabezado .rank-math-breadcrumb {
		font-size: 14px;
	}

	.areco-encabezado .areco-encabezado__fecha {
		font-size: 13px;
	}

	.areco-encabezado .areco-encabezado__bajada {
		font-size: 16.5px;
	}

	.areco-encabezado .areco-encabezado__datos {
		font-size: 15px;
	}

	.areco-encabezado .areco-buscador__rotulo {
		font-size: 13.5px;
	}

	.areco-encabezado .areco-buscador select {
		font-size: 17px;
	}

	.areco-encabezado .areco-buscador__personas {
		font-size: 17px;
	}

	.areco-encabezado .areco-buscador__campo--apagado .areco-buscador__personas {
		font-size: 15.5px;
	}

	.areco-encabezado .areco-encabezado__atajos-rotulo {
		font-size: 13.5px;
	}

	.areco-encabezado .areco-atajo {
		font-size: 15px;
	}

	.areco-encabezado .areco-atajo__cantidad {
		font-size: 13.5px;
	}
}