/* ==========================================================================
   CÓDIGO 57 — BLOQUE "DÓNDE VAS A DORMIR" EN CATEGORÍAS DE DESTINO

   Acompaña a /inc/57-alojamientos-destino.php.

   POR QUÉ ESTÁ ASÍ: la primera versión ponía las 6 fotos de los 7 alojamientos
   una detrás de otra. Eran 42 fotos y 1.963 px, el 43 % de la página, y dejaban
   los programas —que es lo que se vende— empujados hasta el final. Ahora se ve
   una sola banda con la portada de cada alojamiento; las demás fotos se abren
   al pulsar. La página baja de 42 fotos a 7 y el bloque de ~1.960 px a ~380 px.

   Los colores, el radio y la sombra son los mismos del Código 48 (el bloque de
   actividades que va justo encima) para que los dos se lean como una pareja y
   no como dos añadidos sueltos.

   HISTORIAL: 4-sep-2026 creado. 4-sep-2026 rehecho: de galería completa a banda
   de portadas con visor, por hacer demasiado ruido visual.
   ========================================================================== */

.raco-alojamientos {
	--raco-alo-navy: #1c4587;
	--raco-alo-turquesa: #019aa3;
	--raco-alo-turquesa-dark: #01717a;
	--raco-alo-turquesa-soft: rgba(1, 154, 163, 0.1);
	--raco-alo-text: #334155;
	--raco-alo-muted: #63748a;
	--raco-alo-border: rgba(28, 69, 135, 0.13);

	box-sizing: border-box;
	margin: 0 0 40px;
	padding: 36px clamp(20px, 4vw, 48px) 38px;
	background: #ffffff;
	border: 1px solid var(--raco-alo-border);
	border-radius: 18px;
	box-shadow: 0 12px 32px 0 rgba(28, 69, 135, 0.09);
	text-align: left;
}

.raco-alojamientos *,
.raco-alojamientos *::before,
.raco-alojamientos *::after {
	box-sizing: border-box;
}


/* --- Cabecera --------------------------------------------------------------

   En dos columnas, como el bloque de actividades: el título a la izquierda y
   la explicación a la derecha. Apiladas dejaban un hueco muerto enorme a la
   derecha del texto y el bloque se veía descompensado, con mucha cabecera para
   una tira fina de fichas.
   -------------------------------------------------------------------------- */

.raco-alojamientos-cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0 0 26px;
}

@media (min-width: 700px) {

	.raco-alojamientos-cabecera {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px 48px;
		align-items: end;
	}
}

.raco-alojamientos-kicker {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--raco-alo-navy);
	background: var(--raco-alo-turquesa-soft);
	border: 1px solid rgba(1, 154, 163, 0.22);
	border-radius: 14px;
}

.raco-alojamientos-titulo {
	margin: 0;
	font-size: clamp(22px, 2.2vw, 27px);
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: var(--raco-alo-navy);
}

.raco-alojamientos-intro {
	margin: 0;
	max-width: 54ch;
	font-size: 16px;
	line-height: 1.55;
	color: var(--raco-alo-text);
}


/* --- La banda de alojamientos -------------------------------------------- */

/* Una fila, siempre, pero con la ficha ACOTADA por arriba.
   Antes era una rejilla con columnas de 1fr, asi que las fichas se estiraban
   para llenar el ancho: con dos alojamientos salian de 633 px y la seccion
   medía 857 px de alto; con siete se encogian a 169 px y la foto ya no se veia.
   El mismo bloque cambiaba casi cuatro veces de tamano segun el destino.
   Con flex y un max-width la ficha se mueve solo entre 170 y 320 px. */
.raco-alojamientos-lista {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 16px;
}

.raco-alojamientos-lista > .raco-alojamiento {
	flex: 1 1 0;
	min-width: 0;
	max-width: 360px;
}

.raco-alojamiento {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* El nombre va DENTRO de la foto, sobre un degradado. Debajo bailaba: los
   nombres de una línea y los de dos dejaban las fichas de alturas distintas y
   la fila quedaba desalineada. Así todas las fichas son idénticas. */
.raco-alojamiento-portada {
	display: block;
	position: relative;
	/* Reserva el hueco desde el primer instante: sin esto la página salta
	   cuando entran las fotos, que es justo lo que costó arreglar en el CLS. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background: #dfe6e6;
	box-shadow: 0 6px 16px 0 rgba(28, 69, 135, 0.09);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.raco-alojamiento-foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

/* El degradado que hace legible el nombre sin tapar la foto. */
.raco-alojamiento-velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(9, 20, 36, 0.88) 0%,
		rgba(9, 20, 36, 0.55) 26%,
		rgba(9, 20, 36, 0.12) 52%,
		rgba(9, 20, 36, 0) 70%
	);
	pointer-events: none;
}

.raco-alojamiento-nombre {
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 10px;
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

/* La chapita con el número de fotos: dice que hay más sin gritarlo.
   Siempre visible, porque es la única pista de que la ficha se puede abrir. */
.raco-alojamiento-cuantas {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
	background: rgba(9, 20, 36, 0.5);
	backdrop-filter: blur(4px);
	border-radius: 999px;
	pointer-events: none;
	transition: background 0.2s ease;
}

.raco-alojamiento-cuantas svg {
	width: 12px;
	height: 12px;
}

.raco-alojamiento:hover .raco-alojamiento-portada,
.raco-alojamiento:focus-visible .raco-alojamiento-portada {
	transform: translateY(-3px);
	box-shadow: 0 16px 28px 0 rgba(28, 69, 135, 0.18);
}

.raco-alojamiento:hover .raco-alojamiento-foto {
	transform: scale(1.06);
}

.raco-alojamiento:hover .raco-alojamiento-cuantas {
	background: var(--raco-alo-turquesa);
}

.raco-alojamiento:focus-visible {
	outline: none;
}

.raco-alojamiento:focus-visible .raco-alojamiento-portada {
	box-shadow: 0 0 0 3px rgba(1, 154, 163, 0.5);
}

/* El tema pinta los botones de azul al pasar el ratón y les pone el texto en
   blanco. Antes no se notaba porque la foto tapaba el botón entero; desde que
   hay una línea de descripción debajo de la foto, esa franja quedaba azul y el
   texto ilegible. Se le gana en peso al tema en todos los estados. */
.raco-alojamientos .raco-alojamiento,
.raco-alojamientos .raco-alojamiento:hover,
.raco-alojamientos .raco-alojamiento:focus,
.raco-alojamientos .raco-alojamiento:active,
.raco-alojamientos .raco-alojamiento:focus-visible {
	background: none;
	background-color: transparent;
	color: inherit;
	box-shadow: none;
	text-decoration: none;
}

/* Descripción opcional, si algún día se rellena: va debajo de la foto. */
.raco-alojamiento-descripcion {
	display: block;
	margin: 8px 2px 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--raco-alo-muted);
}

/* Debajo de escritorio, tira que se desliza en lugar de rejilla.

   Siete fichas nunca reparten bien: en tableta salían 5 + 2 con un hueco
   enorme, y en móvil 3 filas de dos y una suelta que estiraba el bloque hasta
   1.038 px. En tira siempre es una fila limpia y se ve que hay más a la derecha. */
@media (max-width: 921px) {

	.raco-alojamientos-lista {
		/* La base ya es flex; aqui solo se fija el ancho de la ficha y se deja
		   que la fila se desborde para poder deslizarla. */
		gap: 14px;
		padding: 4px 4px 8px;
		overflow-x: auto;
		/* Sin scroll-padding, el ajuste por deslizamiento pega la primera ficha
		   al borde del panel y se come el margen. */
		scroll-padding-inline: 4px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.raco-alojamientos-lista::-webkit-scrollbar {
		display: none;
	}

	.raco-alojamientos-lista > .raco-alojamiento {
		/* Crecer SI sobra sitio: con dos o tres alojamientos la tira se quedaba
		   a medias y parecía cortada. Cuando hay muchas no sobra nada, así que
		   mantienen su ancho y la fila se desliza igual que antes. */
		flex: 1 0 27%;
		max-width: none;
		scroll-snap-align: start;
	}
}

@media (max-width: 544px) {

	.raco-alojamientos {
		padding: 26px 0 28px;
	}

	.raco-alojamientos-cabecera {
		margin-left: 18px;
		margin-right: 18px;
		margin-bottom: 20px;
	}

	.raco-alojamientos-intro {
		font-size: 15px;
	}

	.raco-alojamientos-lista > .raco-alojamiento {
		flex: 1 0 43%;
	}

	.raco-alojamientos-lista {
		gap: 12px;
		padding: 4px 18px 8px;
		scroll-padding-inline: 18px;
	}
}


/* ==========================================================================
   EL VISOR DE FOTOS

   Copia el aspecto del visor de Modula (Fancybox), que es el que ya se usa en
   la galería de la portada, para que abrir una foto se vea igual en toda la
   web. Valores tomados de
   modula/includes/extensions/albums/assets/css/front/fancybox.css:

     fondo    rgb(30,30,30) al 90 %
     botones  44 px, cuadrados, rgba(30,30,30,.6), texto #ccc y #fff al pasar
     cerrar   pegado arriba a la derecha de la PANTALLA
     flechas  en los bordes laterales de la PANTALLA, 100 px de alto
     pie      abajo, de lado a lado, con degradado negro

   Antes los botones colgaban del marco de la foto: con imágenes altas el aspa
   se salía por arriba y las flechas quedaban pisando la imagen.

   Se pinta una sola vez y lo reutilizan el bloque de la categoría (Código 57)
   y la ficha del programa (Código 58).
   ========================================================================== */

.raco-visor {
	position: fixed;
	inset: 0;
	/* Por encima del carrito lateral (9.999.997) y del botón de WhatsApp
	   (9.999.990), que si no se quedaban brillando sobre el fondo oscuro.
	   Por debajo de las ventanas de Popup Maker (1.999.999.999), para que la
	   de cotizar pueda seguir abriéndose encima. */
	z-index: 10000000;
	display: none;
	align-items: center;
	justify-content: center;
	--raco-visor-alto-libre: 132px;   /* lo que ocupan los márgenes de arriba y abajo */
	padding: 56px 60px 76px;
	background: rgba(30, 30, 30, 0.9);
}

.raco-visor.esta-abierto {
	display: flex;
}

.raco-visor-caja {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* ESCENARIO DE TAMAÑO FIJO. Las fotos de los alojamientos son cuadradas pero
   sus píxeles no: van de 488 a 768 de lado, según lo que diera el original. Si
   cada una se dibuja a su tamaño, al pasar de foto la imagen crece y encoge —
   que es justo lo que no se quiere. Con un marco fijo y object-fit: contain,
   todas ocupan exactamente el mismo cuadro, como en la galería de Modula. */
.raco-visor-marco {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	/* El tope de 720 px no es caprichoso: las fotos reales miden entre 488 y 768
	   de lado. Con un cuadro de 720 las grandes se reducen un poco (se ven
	   nítidas) y las pequeñas se estiran lo mínimo. Sin tope, en pantallas altas
	   el cuadro llegaba a 868 y las fotos chicas salían blandas. */
	width: min(100%, calc(100vh - var(--raco-visor-alto-libre)), 720px);
	aspect-ratio: 1 / 1;
	overflow: visible;
	background: none;
}

.raco-visor-foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Los botones, calcados de Fancybox ----------------------------------- */

.raco-visor-boton {
	position: fixed;
	z-index: 10000002;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 10px;
	color: #ccc;
	background: rgba(30, 30, 30, 0.6);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.2s;
}

.raco-visor-boton:hover,
.raco-visor-boton:focus,
.raco-visor-boton:focus-visible,
.raco-visor-boton:active {
	color: #ffffff;
	/* El tema pinta los botones de azul al recibir el foco, y el aspa se abre
	   siempre con el foco puesto: salía azul en vez de gris. */
	background: rgba(30, 30, 30, 0.6);
	border: 0;
	box-shadow: none;
	outline: none;
}

.raco-visor-boton svg {
	width: 24px;
	height: 24px;
}

.raco-visor-cerrar {
	top: 0;
	right: 0;
}

.raco-visor-anterior,
.raco-visor-siguiente {
	top: 50%;
	height: 100px;
	margin-top: -50px;
}

.raco-visor-anterior {
	left: 0;
}

.raco-visor-siguiente {
	right: 0;
}

/* --- El pie, también como el de Modula ----------------------------------- */

.raco-visor-pie {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000001;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 42px 44px 22px;
	color: #eeeeee;
	text-align: center;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(0, 0, 0, 0.15) 65%,
		rgba(0, 0, 0, 0.075) 75.5%,
		rgba(0, 0, 0, 0.037) 82.85%,
		rgba(0, 0, 0, 0.019) 88%,
		rgba(0, 0, 0, 0) 100%
	);
}

.raco-visor-nombre {
	font-size: 15px;
	font-weight: 600;
}

.raco-visor-cuenta {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.7);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 544px) {

	.raco-visor {
		--raco-visor-alto-libre: 120px;
		padding: 50px 48px 70px;
	}

	.raco-visor-boton {
		width: 40px;
		padding: 8px;
	}

	.raco-visor-anterior,
	.raco-visor-siguiente {
		height: 80px;
		margin-top: -40px;
	}
}


/* Quien pidió menos movimiento en su sistema, menos movimiento. */
@media (prefers-reduced-motion: reduce) {

	.raco-alojamiento-portada,
	.raco-alojamiento-foto,
	.raco-visor-boton {
		transition: none;
	}

	.raco-alojamiento:hover .raco-alojamiento-foto {
		transform: none;
	}
}