/* Fuentes del sitio (ver /assets/libs/fuentes) */
:root		{ --fuente-texto: 'Open Sans', system-ui, sans-serif; --fuente-titulos: 'Poppins', system-ui, sans-serif; }

/* Colores: naranja del logo (#F26126), uno más oscuro para textos y el azul oscuro del menú */
:root		{ --naranja: #F26126; --naranja-oscuro: #D9531E; --naranja-claro: #FFF0E5; --azul-oscuro: #002244; }

html		{ position: relative; min-height: 100%; }
body		{ font-family: var(--fuente-texto); font-size: 15px; color: #333333; }

H1			{ font-family: var(--fuente-titulos); font-size:28px; color:#003366; margin: 10px; padding: 0px; font-weight: 700; text-transform:uppercase; letter-spacing: 0.5px; }
H2			{ font-family: var(--fuente-titulos); font-size:22px; color: #006699; margin: 10px; padding: 0px; font-weight: 600; }
H3			{ font-family: var(--fuente-titulos); font-size:20px; color: #006699; margin: 0px; padding: 0px; font-weight: 600; }
H4			{ font-family: var(--fuente-titulos); font-size:17px; color: #006699; margin: 0px; padding: 0px; font-weight: 600; }

a			{ color: #006699; }
a:hover		{ color: #003399; text-decoration: none; }

.row		{ padding:0px; margin:0px; }

.sombraderecha		{
	-moz-box-shadow: 2px 2px 3px 2px #DDDDDD;
	-o-box-shadow: 2px 2px 3px 2px #DDDDDD;
	-ms-box-shadow: 2px 2px 3px 2px #DDDDDD;
	-webkit-box-shadow: 2px 2px 3px 2px #DDDDDD;
	box-shadow: 2px 2px 3px 2px #DDDDDD;
	filter: shadow(color=#DDDDDD, direction=135, strength=1);
}

.grow1:hover			{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.grow3:hover			{ -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }

.sin_margen		{ amargin: 0px; padding:0px; }
.img100			{ width: 100%; }

.clearfix10		{ padding: 10px; }
.clearfix20		{ padding: 20px; }
.clearfix40		{ padding: 40px; }

.table-nonfluid { width: auto !important; }

.textoChico			{ font-size: 13px; }


/* Franja de links del pie: naranja del logo */
.pie_contenidos			{ font-family: var(--fuente-titulos); font-size: 15px; font-weight: 500; line-height: 2; color: #FFFFFF; padding: 22px 0px; background: linear-gradient(to bottom, var(--naranja) 0%, var(--naranja-oscuro) 100%); border-bottom: 3px solid var(--azul-oscuro); }
.pie_contenidos a		{ color: #FFFFFF; }
.pie_contenidos a:hover	{ color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.pie_contenidos .fa		{ margin: 0px 12px; opacity: 0.6; }
@media (max-width: 767px) {
	.pie_contenidos			{ padding: 16px 0; line-height: 1.6; }
	.pie_contenidos .fa		{ display: none; }
	.pie_contenidos a		{ display: inline-block; padding: 4px 10px; }
}

/* Pie: logos, datos de la municipalidad y links */
.pie-datos				{ padding: 30px 0; font-size: 14px; }
.pie-datos .row > div	{ padding-top: 10px; padding-bottom: 10px; }
.pie-datos .fa, .pie-datos .fa-solid	{ color: var(--naranja); width: 18px; text-align: center; margin-right: 4px; }
.pie-logos				{ display: flex; align-items: center; justify-content: center; gap: 24px; }
.pie-logo-santaana		{ height: 75px; width: auto; }
.pie-logo-entrerios		{ height: 44px; width: auto; }
.pie-municipio			{ text-align: center; line-height: 1.7; }
.pie-municipio strong	{ font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-oscuro); }
.pie-contacto			{ margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEEEEE; }
.pie-web				{ display: inline-block; white-space: nowrap; margin: 0 6px; }
.pie-links				{ display: flex; flex-direction: column; align-items: flex-start; padding-left: 40px !important; border-left: 1px solid #EEEEEE; }
.pie-links a			{ font-family: var(--fuente-titulos); font-weight: 500; color: var(--azul-oscuro); padding: 3px 0; }
.pie-links a:hover		{ color: var(--naranja-oscuro); }

@media (max-width: 991px) {
	.pie-links			{ flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 18px; border-left: 0; border-top: 1px solid #EEEEEE; padding-left: 15px !important; margin-top: 10px; }
}

/* Línea final: legales y créditos */
.pie-legales			{ background: linear-gradient(to bottom, var(--naranja-claro) 0%, #FFE2CC 100%); border-top: 1px solid #F8D4BA; padding: 12px 0; font-size: 13px; color: var(--azul-oscuro); }
.pie-legales .container	{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; }
.pie-legales a			{ color: var(--naranja-oscuro); font-weight: 600; }
@media (max-width: 767px) {
	.pie-legales .container	{ justify-content: flex-start; text-align: left; padding-right: 70px; }		/* deja lugar a los botones flotantes */
}
/* Título de bloque (novedades, destacados): texto azul con rayita naranja y link a la derecha */
.bloque-titulo			{ display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.bloque-titulo h2		{ margin: 0; font-size: 22px; font-weight: 600; color: var(--azul-oscuro); }
.bloque-titulo h2::after	{ content: ''; display: block; width: 40px; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--naranja); }
.bloque-titulo a		{ font-size: 14px; font-weight: 600; color: var(--naranja-oscuro); white-space: nowrap; }
.bloque-titulo a:hover	{ color: var(--azul-oscuro); }

/* Tarjetas de novedades (pie y home) */
.nov-tarjeta			{ display: flex; flex-direction: column; height: 100%; border: 1px solid rgba(242, 97, 38, 0.55); border-radius: 12px; background-color: #FFFFFF; overflow: hidden; color: inherit;
						  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; }
.nov-tarjeta:hover		{ border-color: var(--naranja); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); transform: translateY(-2px); color: inherit; }
.nov-imagen			{ aspect-ratio: 16 / 9; background-color: #F2F2F2; overflow: hidden; }
.nov-imagen img		{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.nov-tarjeta:hover .nov-imagen img	{ transform: scale(1.05); }
.nov-datos				{ padding: 12px 14px 14px; font-size: 14px; line-height: 1.55; }
.nov-fecha				{ font-size: 12px; color: #888888; }
.nov-fecha i			{ color: var(--naranja); margin-right: 3px; }
.nov-datos h3			{ margin: 4px 0 6px; font-size: 16px; line-height: 1.3; color: var(--azul-oscuro); }
.nov-tarjeta:hover h3	{ color: var(--naranja-oscuro); }
.nov-datos p			{ margin: 0; color: #666666; }

/* Pie: bloque de destacados (novedades y accesos), arriba de la franja naranja */
.pie-destacados		{ background-color: #F7F7F7; border-top: 1px solid #E6E6E6; padding: 30px 0 34px; }
.pie-destacados .row + .bloque-titulo	{ margin-top: 30px; }
.pie-promo				{ position: relative; display: block; height: 170px; border-radius: 12px; overflow: hidden; background-color: var(--azul-oscuro); }
.pie-promo img			{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.pie-promo:hover img	{ transform: scale(1.05); }
.pie-promo-texto		{ position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; color: #FFFFFF; font-size: 13px; line-height: 1.4;
						  background: linear-gradient(to top, rgba(0, 20, 40, 0.85) 0%, rgba(0, 20, 40, 0) 100%); }
.pie-promo-texto strong	{ display: block; font-family: var(--fuente-titulos); font-size: 17px; font-weight: 600; }
.pie-promo-radio		{ background-color: #FFFFFF; border: 1px solid #E6E6E6; }
.pie-promo-radio img	{ object-fit: contain; padding: 12px 20px 56px; }
.pie-promo-radio .pie-promo-texto	{ background: linear-gradient(to right, var(--naranja-oscuro), var(--naranja)); padding-top: 10px; }
@media (max-width: 767px) {
	.pie-destacados		{ padding: 22px 0 26px; }
	.bloque-titulo h2	{ font-size: 19px; }
	.pie-promo			{ height: 140px; }
}

.pie_float				{ font-size: 12px; color: #039; }


/* Título de la página: foto al azar del carrusel de fondo, oscurecida, con el título en blanco encima */
.pagina-titulo			{ position: relative; background-color: var(--azul-oscuro); background-size: cover; background-position: center; padding: 96px 0 26px; margin-bottom: 14px; }
.pagina-titulo::before	{ content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 20, 40, 0.55) 0%, rgba(0, 20, 40, 0.12) 100%); }
.pagina-titulo .container	{ position: relative; }
.pagina-titulo h1,
.carrusel-titulo h1		{ margin: 0; font-size: 36px; font-weight: 700; line-height: 1.15; text-transform: none; letter-spacing: -0.5px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 14px rgba(0, 0, 0, 0.4); }
.pagina-titulo h1::after,
.carrusel-titulo h1::after	{ content: ''; display: block; width: 56px; height: 4px; margin-top: 14px; border-radius: 2px; background: var(--naranja); }

@media (max-width: 991px) {
	.pagina-titulo			{ padding: 70px 0 22px; }
	.pagina-titulo h1,
	.carrusel-titulo h1		{ font-size: 28px; }
}
@media (max-width: 767px) {
	.pagina-titulo			{ padding: 46px 0 16px; margin-bottom: 8px; }
	.pagina-titulo h1,
	.carrusel-titulo h1		{ font-size: 21px; }
	.pagina-titulo h1::after,
	.carrusel-titulo h1::after	{ width: 40px; height: 3px; margin-top: 10px; }
}

/* Home: el título va sobre el carrusel */
.carrusel-titulo		{ position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 0 70px 34px; pointer-events: none; background: linear-gradient(to right, rgba(0, 20, 40, 0.5) 0%, rgba(0, 20, 40, 0) 65%); border-radius: var(--bs-border-radius-sm); }
@media (max-width: 767px) {
	.carrusel-titulo		{ padding: 0 50px 18px; background: rgba(0, 20, 40, 0.3); }
}


.seccion-t				{ font-family: var(--fuente-titulos); font-size:20px; font-weight: 600; padding: 10px 20px; margin-bottom: 10px; background-color: #E6E6E6; border-bottom: double 3px #888888; }
.seccion-t a			{ color: #003366;  }
.seccion-d				{ padding: 12px 0px; background-color: #FFFFFF; border-bottom: dotted 1px #AAAAAA; }
.seccion-d:hover		{ background-color: #EEEEEE; }
.seccion-d h4			{ padding: 6px 0px; }


/* Título separador de grupos en los listados (Estancias, Bungalows...) */
.listado_grupo		{ font-family: var(--fuente-titulos); font-size: 18px; font-weight: 600; color: #FFFFFF; letter-spacing: 0.3px;
						background: linear-gradient(to right, #00557F 0%, #0077B3 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
						padding: 9px 16px; margin: 30px 0 6px; }
.listado_grupo:first-child	{ margin-top: 10px; }

.listado			{ border-bottom: dotted 1px #999999; padding: 15px 0px; }
.listado h4			{ margin: 10px 0px; }
.listado .imagen	{ float: left; }
.listado .fa		{ font-size: 16px; margin-right: 6px; }


.aloja_listado_titulo		{ font-size:15px; color:#039; text-shadow: 2px 2px 4px #888888; }
.aloja_listado_titulo .imagen	{ float: left; }
.aloja_listado_categoria	{ font-size:14px; color: #FFFFFF; text-shadow: 2px 2px 4px #333333; height:41px; background-color:#DDE; background-image:url(/assets/imgs/listado_titulo_fondo.jpg) }
.aloja_detalle_row			{ color: #333333; height: 40px; border-bottom: solid 1px #DDDDDD;  }
.aloja_detalle_row i.fa		{ font-size: 16px; margin-right: 6px; }

.presta_listado_titulo		{ font-size:12px; color:#039; text-shadow: 2px 2px 4px #888888; }
.presta_listado_categoria	{ font-size:14px; color: #FFFFFF; text-shadow: 2px 2px 4px #333333; height:41px; background-color:#DDE; background-image:url(/assets/imgs/listado_titulo_fondo.jpg) }


.imasonry				{ padding: 5px; }


/* Home: presentación (foto col-3 + texto col-9) */
.home-intro			{ margin: 0 calc(-0.5 * var(--bs-gutter-x)); padding: 30px 0 36px; }
.home-intro p		{ margin: 0 0 10px; line-height: 1.7; }
.home-intro p:last-child	{ margin-bottom: 0; }
.home-intro-imagen	{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
@media (max-width: 767px) {
	.home-intro			{ padding: 18px 0 24px; }
	.home-intro-imagen	{ aspect-ratio: 16 / 9; margin-bottom: 16px; }
}

/* Home: accesos (4 tarjetas en una fila sobre fondo naranja claro) */
.home-accesos			{ background-color: var(--naranja-claro); border: 1px solid #F8D4BA; border-radius: 12px; padding: 18px; }
.home-acceso			{ height: 100%; display: flex; flex-direction: column; background-color: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.home-acceso-imagen		{ display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.home-acceso-imagen img	{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.home-acceso:hover .home-acceso-imagen img	{ transform: scale(1.05); }
.home-acceso-datos		{ padding: 12px 14px 14px; font-size: 14px; line-height: 1.55; }
.home-acceso-datos h3	{ margin: 0 0 4px; font-size: 17px; }
.home-acceso-datos h3 a	{ color: var(--azul-oscuro); }
.home-acceso-datos h3 a:hover	{ color: var(--naranja-oscuro); }
.home-acceso-datos p	{ margin: 0; color: #666666; }
.home-acceso-links		{ display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.home-acceso-links a	{ padding: 1px 9px; border-radius: 50rem; background-color: var(--naranja-claro); color: var(--naranja-oscuro); font-size: 12px; font-weight: 600; }
.home-acceso-links a:hover	{ background-color: var(--naranja); color: #FFFFFF; }

/* Fila de Bootstrap que llega a los bordes (el .row viejo tiene margin: 0) */
.fila-ancha				{ margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); }


.boton			{ FONT-SIZE: 14px; padding: 4px 14px; }
.inputs 		{ BORDER-RIGHT: #444444 1px solid; BORDER-BOTTOM: #444444 1px solid; BORDER-LEFT: #CCCCCC 1px solid; BORDER-TOP: #CCCCCC 1px solid; FONT-SIZE: 14px; COLOR: #404040; padding: 4px 6px; BACKGROUND-COLOR: #F5F5FF }

TD.titulo_fondo		{ background-color: #000000; padding-left:22px; padding-right:22px; }

TD.menu_links			{ height: 14px; padding-left: 15px; }
A.menu_links			{ font-size:11px; color:#555555; vertical-align: middle; }
A.menu_links:hover		{ color:#000000; }

A.mizq_contenido		{ font-size:11px; color:#777777; vertical-align: middle; }

.textosombra			{ text-shadow: 2px 2px 4px #888888; }

.sombra-normal {
     -moz-box-shadow: 2px 2px 4px 2px #777777;
     -o-box-shadow: 2px 2px 4px 2px #777777;
     -ms-box-shadow: 2px 2px 4px 2px #777777;
     -webkit-box-shadow: 2px 2px 4px 2px #777777;
     box-shadow: 2px 2px 4px 2px #777777;
}

.sombragaleria {
     -moz-box-shadow: 2px 2px 3px 2px #AAAAAA;
     -o-box-shadow: 2px 2px 3px 2px #AAAAAA;
     -ms-box-shadow: 2px 2px 3px 2px #AAAAAA;
     -webkit-box-shadow: 2px 2px 3px 2px #AAAAAA;
     box-shadow: 2px 2px 3px 2px #AAAAAA;
}

.separacion					{ background-color: #999999; background-image: url(/assets/imgs/punteado.gif); }

.Links						{ font-family: var(--fuente-titulos); font-size: 12px; color: #B5D2B6; text-decoration: none; }
A.Links						{ font-family: var(--fuente-texto); font-size: 11px; color: #FFFFFF; text-decoration: none; }
A.Links:hover				{ color: #EEEEEE; text-decoration: none; }
A.LinksA					{ font-weight: bold; font-size: 10px; color: #FFB542; text-decoration: none; }
A.LinksA:hover				{ font-weight: bold; font-size: 10px; color: #FFB542; text-decoration: none; }
.linksTD 					{ border: 1px solid #006699; }
.linksTDO					{ border: 1px solid #FFFFFF; background-color: #5C82AF; }


A.eventos					{ color: #039; text-decoration: none; }
A.eventos:hover				{ color: #039; text-decoration: none; }


/* -------------------------------------- */

.iniciopr			{ padding:0px; margin:0px; }

.iniciopr-ul			{ display:block; width:740px; clear:both; overflow:hidden; padding:0px; margin:0px; }
.iniciopr-ul li			{ display:block; position:relative; float:left; width:240px; height:150px; margin:6px 3px 11px 3px; }
.iniciopr-ul li a.iniciopr-link	{ position:absolute; top:0; left:10px; z-index:10; color:#036; text-decoration:none; height:30px; line-height:30px; font-weight:bold; font-size:12px; text-shadow: 2px 2px 4px #FFFFFF; }
.iniciopr-ul li a.iniciopr-link:hover	{ color:#333333; }
	
.iniciopr-ul li .iniciopr-sombra		{ position:absolute; top:0; left:0; opacity:.6; filter:alpha(opacity=60); width:240px; height:30px; }
.iniciopr-ul li.iniciopr-li .iniciopr-sombra { background:#CCCCCC; }


/* VIDEOS YOUTUBE */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin: 20px 0px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Miniaturas con tamaño fijo: recortan la imagen en lugar de deformarla */
img.img-cover {
	object-fit: cover;
}


/* Botones flotantes abajo a la derecha (contacto, facebook, instagram) */
.botones-flotantes {
	position: fixed;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 1020;
}
.boton-flotante {
	display: block;
	width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 20px;
	color: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transition: transform 150ms ease;
}
.boton-flotante:hover, .boton-flotante:focus	{ color: #FFFFFF; text-decoration: none; transform: scale(1.1); }
.boton-flotante-contacto	{ background-color: #2B5F8A; }
.boton-flotante-facebook	{ background-color: #1877F2; }
.boton-flotante-instagram	{ background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.boton-flotante-youtube		{ background-color: #FF0000; }

@media (max-width: 767px) {
	.botones-flotantes		{ right: 10px; bottom: 10px; gap: 6px; }
	.boton-flotante			{ width: 38px; height: 38px; line-height: 38px; font-size: 17px; }
}


/* Botón "Ver mapa" en los listados */
.boton-mapa {
	float: right;
	margin: 10px 0 10px 10px;
	padding: 10px 12px;
	text-align: center;
	font-size: 13px;
	color: #2B5F8A;
	border: 1px solid #C8D6E2;
	border-radius: 4px;
	background-color: #F4F8FB;
}
.boton-mapa i					{ font-size: 26px; }
.boton-mapa:hover, .boton-mapa:focus	{ text-decoration: none; background-color: #E6EFF6; }


/* Redes sociales de alojamientos, prestadores y gastronomía (íconos con su color) */
.redes-iconos a					{ font-size: 20px; margin-right: 4px; vertical-align: middle; }
.redes-iconos a:hover			{ opacity: 0.8; }
.red-icono						{ font-size: 18px; width: 20px; text-align: center; }
:is(.redes-iconos, .aloja_detalle_row) .fa-square-facebook		{ color: #1877F2; }
:is(.redes-iconos, .aloja_detalle_row) .fa-square-instagram		{ color: #C13584; }
:is(.redes-iconos, .aloja_detalle_row) .fa-square-youtube		{ color: #FF0000; }
:is(.redes-iconos, .aloja_detalle_row) .fa-square-whatsapp		{ color: #25D366; }


/* Botones para compartir la página */
.compartir						{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 15px 0; }
.compartir-titulo				{ font-family: var(--fuente-titulos); font-weight: 600; color: #555555; margin-right: 4px; }
.compartir-boton				{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 4px; color: #FFFFFF; font-size: 14px; line-height: 1.4; }
.compartir-boton:hover			{ color: #FFFFFF; opacity: 0.85; }
.compartir-facebook				{ background-color: #1877F2; }
.compartir-whatsapp				{ background-color: #25D366; }
.compartir-x					{ background-color: #000000; }


/* Marcadores del mapa: pin de color (--pin) con un ícono de Font Awesome. La punta queda abajo al centro. */
.mapa-pin				{ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px;
						  background-color: var(--pin, #F26126); border: 2px solid #FFFFFF; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
						  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.45); }
.mapa-pin i				{ transform: rotate(45deg); color: #FFFFFF; font-size: 12px; }
.mapa-pin-chico			{ width: 20px; height: 20px; border-width: 1px; margin: 0 6px 0 2px; vertical-align: -2px; }
.mapa-pin-chico i		{ font-size: 9px; }

.mapa-referencias		{ display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 6px 0; }

/* Mapa de playas (a la derecha del texto) */
.mapa-playas		{ float: right; width: 400px; max-width: 100%; margin: 0 0 10px 15px; }


/* ***************************************************
 **** Compatibilidad con Bootstrap 5
 **** (mantiene las medidas y la tipografía que tenía el sitio con Bootstrap 3)
 ***************************************************** */

/* Separación entre columnas como Bootstrap 3; contenedor un poco más ancho que el de BS3 */
.container, .row						{ --bs-gutter-x: 30px; }
@media (min-width: 576px)	{ .container { max-width: none; } }
@media (min-width: 768px)	{ .container { max-width: 750px; } }
@media (min-width: 992px)	{ .container { max-width: 980px; } }
@media (min-width: 1200px)	{ .container { max-width: 1190px; } }
@media (min-width: 1400px)	{ .container { max-width: 1290px; } }

/* .fila: contenedor de bloque (lo que antes era .row sin columnas adentro) */
.fila				{ display: block; padding: 0; margin: 0; }
.fila::after		{ content: ""; display: table; clear: both; }

body				{ line-height: 1.42857; }
p					{ margin: 0 0 10px; }
a					{ text-decoration: none; }
b, strong			{ font-weight: bold; }
.text-justify		{ text-align: justify; }


/* Galería de una página (playas, pesca, la ciudad...): primera foto grande, resto en grilla */
.galeria-una			{ display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: 95px; gap: 8px; margin: 10px 0; }
.galeria-una a			{ display: block; overflow: hidden; }
.galeria-una img		{ width: 100%; height: 100%; object-fit: cover; }
.galeria-una .galeria-una-principal	{ grid-column: span 2; grid-row: span 2; }

/* Nada del contenido más ancho que la columna (imágenes y tablas que vienen de la base) */
.cen_container img		{ max-width: 100%; }
.cen_container table	{ max-width: 100%; }
.cen_container td		{ overflow-wrap: break-word; }		/* "anywhere" partía letra por letra las etiquetas del formulario de contacto en el celular */
.aloja_detalle_row td + td	{ overflow-wrap: anywhere; }	/* links y mails largos en las fichas de detalle */
.cen_container .inputs	{ max-width: 100%; }

/* Botón principal naranja (formularios) */
.boton-naranja			{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: 0; border-radius: 50rem; background-color: var(--naranja);
						  color: #FFFFFF; font-family: var(--fuente-titulos); font-size: 15px; font-weight: 600; transition: background-color 150ms ease; }
.boton-naranja:hover, .boton-naranja:focus	{ background-color: var(--naranja-oscuro); color: #FFFFFF; }


/* ***************************************************
 **** CONTACTO: formulario a la izquierda, datos de la oficina de turismo a la derecha
 ***************************************************** */

.contacto				{ margin-top: 10px; }
.row.contacto, .contacto-caja form.row	{ margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); }	/* el .row viejo (BS3) les saca el margen negativo */
.contacto > div			{ margin-bottom: 24px; }
.contacto-caja, .contacto-info	{ height: 100%; padding: 28px; border-radius: 12px; }
.contacto-caja			{ background-color: #FFFFFF; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
.contacto-info			{ background: linear-gradient(to bottom, var(--naranja-claro) 0%, #FFFFFF 100%); border: 1px solid #F8D4BA; }

.contacto-titulo		{ margin: 0 0 4px; font-size: 21px; color: var(--azul-oscuro); }
.contacto-bajada		{ color: #666666; margin-bottom: 20px; }

.contacto .form-label	{ font-weight: 600; color: var(--azul-oscuro); margin-bottom: 4px; }
.contacto .form-label span, .contacto-enviar span	{ color: var(--naranja-oscuro); }
.contacto .form-label small	{ font-weight: 400; color: #888888; }
.contacto .form-control	{ padding: 10px 12px; border-radius: 8px; }
.contacto .form-control:focus	{ border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(242, 97, 38, 0.2); }
.contacto .was-validated .form-control:valid	{ border-color: var(--bs-border-color); background-image: none; padding-right: 12px; }	/* solo se marcan los errores */
.contacto-enviar		{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
.contacto-enviar small	{ color: #888888; }

.contacto-dato			{ display: flex; gap: 14px; margin-bottom: 18px; line-height: 1.6; }
.contacto-dato strong	{ display: block; font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-oscuro); }
.contacto-dato a		{ overflow-wrap: anywhere; }
.contacto-icono			{ flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
						  background-color: var(--naranja); color: #FFFFFF; font-size: 16px; }

.contacto-redes			{ display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #F8D4BA; }
.contacto-redes strong	{ font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-oscuro); margin-right: 4px; }
.contacto-redes a		{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #FFFFFF; font-size: 17px; }
.contacto-redes a:hover	{ color: #FFFFFF; opacity: 0.85; }
.contacto-red-facebook	{ background-color: #1877F2; }
.contacto-red-instagram	{ background: linear-gradient(45deg, #F09433, #DC2743, #BC1888); }
.contacto-red-youtube	{ background-color: #FF0000; }

/* Consulta enviada */
.contacto-enviado		{ text-align: center; padding: 20px 0; }
.contacto-enviado > i	{ font-size: 56px; color: #25A55F; margin-bottom: 12px; }
.contacto-enviado h2	{ font-size: 22px; color: var(--azul-oscuro); }
.contacto-seguir		{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.contacto-seguir a		{ padding: 8px 16px; border: 1px solid #DDDDDD; border-radius: 50rem; color: var(--azul-oscuro); font-weight: 600; }
.contacto-seguir a i	{ color: var(--naranja); margin-right: 4px; }
.contacto-seguir a:hover	{ border-color: var(--naranja); }

@media (max-width: 575px) {
	.contacto-caja, .contacto-info	{ padding: 20px 16px; }
}


/* ***************************************************
 **** LISTADO CON MAPA (lm-): tarjetas a la izquierda y mapa fijo a la derecha, estilo Airbnb (Dónde comer, Dónde dormir)
 ***************************************************** */

.lm-intro			{ margin-bottom: 14px; }

/* Filtros: quedan pegados debajo del menú al scrollear, en una sola línea (si no entran, se deslizan de costado) */
.lm-filtros			{ position: sticky; top: var(--menu-alto, 52px); z-index: 1010; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
						  margin-bottom: 8px; padding: 10px 0; background-color: #FFFFFF; }
.lm-filtros::-webkit-scrollbar	{ display: none; }
.lm-filtro			{ flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #DDDDDD; border-radius: 50rem;
						  background-color: #FFFFFF; color: var(--azul-oscuro); font-family: var(--fuente-titulos); font-size: 14px; font-weight: 500; }
.lm-filtro i			{ color: var(--naranja); }
.lm-filtro span		{ font-size: 12px; color: #888888; }
.lm-filtro:hover		{ border-color: var(--naranja); color: var(--azul-oscuro); }
.lm-filtro.activo	{ background-color: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #FFFFFF; }
.lm-filtro.activo span	{ color: #CCCCCC; }

/* Las tarjetas llegan a los bordes (alineadas con los filtros); el aire entre listado y mapa lo pone el mapa */
.lm-layout > div		{ padding-left: 0; padding-right: 0; }
.lm-lista > .row		{ margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); }
@media (min-width: 992px) {
	.lm-layout > div + div	{ padding-left: 28px; }
}

.lm-tarjeta			{ border: 1px solid rgba(242, 97, 38, 0.55); border-radius: 12px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); overflow: hidden;
						  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; }
.lm-tarjeta:hover	{ border-color: var(--naranja); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); transform: translateY(-2px); }
.lm-tarjeta.activa	{ border-color: var(--naranja-oscuro); box-shadow: 0 0 0 1px var(--naranja-oscuro), 0 6px 18px rgba(0, 0, 0, 0.14); }

.lm-imagen			{ position: relative; aspect-ratio: 16 / 9; background-color: #F2F2F2; overflow: hidden; }
.lm-imagen img		{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.lm-tarjeta:hover .lm-imagen img	{ transform: scale(1.05); }
.lm-tipo				{ position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 50rem; background-color: rgba(255, 255, 255, 0.92);
						  font-size: 12px; font-weight: 600; color: var(--azul-oscuro); }
.lm-tipo i			{ color: var(--naranja); }
.lm-tipo-texto		{ position: static; display: inline-block; margin-bottom: 8px; background-color: var(--naranja-claro); }		/* sin foto: la etiqueta va arriba del nombre */

.lm-datos			{ padding: 12px 14px 14px; font-size: 14px; line-height: 1.6; }
.lm-datos h3			{ font-size: 17px; color: var(--azul-oscuro); margin-bottom: 4px; }
.lm-datos > div > i	{ width: 16px; color: #999999; margin-right: 4px; text-align: center; }
.lm-datos a			{ overflow-wrap: anywhere; }
.lm-descripcion		{ color: #666666; margin-bottom: 6px; }
.lm-acciones			{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F0F0F0; }
.lm-ver-mapa			{ margin-left: auto; border: 0; background: none; padding: 0; color: var(--naranja-oscuro); font-size: 13px; font-weight: 600; }
.lm-ver-mapa:hover	{ text-decoration: underline; }

/* Mapa: fijo mientras se recorre el listado (en pantallas grandes) */
.lm-mapa .mapa-leaflet	{ height: 340px !important; border-radius: 12px !important; }
@media (min-width: 992px) {
	.lm-mapa				{ position: sticky; top: calc(var(--menu-alto, 52px) + 66px); }		/* debajo de los filtros */
	.lm-mapa .mapa-leaflet	{ height: calc(100vh - var(--menu-alto, 52px) - 82px) !important; min-height: 400px; }
}
@media (max-width: 991px) {
	.lm-layout			{ flex-direction: column-reverse; }		/* en el celular el mapa va arriba del listado */
	.lm-mapa				{ margin-bottom: 20px; }
}

/* Marcador resaltado (al pasar por su tarjeta) y globo con imagen */
.leaflet-marker-icon .mapa-pin	{ transition: transform 150ms ease; }
.leaflet-marker-icon.activo .mapa-pin	{ transform: rotate(-45deg) scale(1.35); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5); }
.mapa-globo-imagen		{ display: block; width: 180px; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }

/* Tarjetas con ficha de detalle (Dónde dormir): título con link y botón "Ver más" */
.lm-imagen				{ display: block; }
.lm-datos h3 a			{ color: inherit; }
.lm-datos h3 a:hover	{ color: var(--naranja-oscuro); }
.lm-ver-detalle			{ margin-left: auto; padding: 4px 12px; border-radius: 50rem; background-color: var(--naranja); color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lm-ver-detalle:hover	{ background-color: var(--naranja-oscuro); color: #FFFFFF; }
.lm-ver-mapa + .lm-ver-detalle	{ margin-left: 0; }