@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   Hey Bacalar — Mapa · v3
   Lo carga inc/hb-mapa.php solo en las páginas que tienen mapa.

   /mapa en el teléfono: pantalla fija como app. Buscador y pastillas
   arriba, el mapa, y un panel que sube desde abajo con tres alturas
   (fichas con foto · lugar elegido · todo el alto).
   /mapa en la computadora: panel fijo a la izquierda, mapa a la derecha.
   Home: mapa ligero. Pastillas, buscador, pines, y al tocar un pin una
   tarjeta flotante con "Ver en el mapa".

   Todo empieza con .hbd- para no chocar con nada más del sitio.
   ═══════════════════════════════════════════════════════════════════ */

.hbd {
	--hbd-tinta: #1E2A2C;
	--hbd-gris: #5E6C67;
	--hbd-linea: #E3E6E0;
	--hbd-borde: #C5CEC9;
	--hbd-teal: #0B6E7A;          /* con letra blanca pasa 4.5:1 */
	--hbd-teal-suave: #E3F1EF;
	--hbd-oro: #B67F27;
	--hbd-oro-tx: #8A5E14;
	--hbd-tierra: #F7F8F5;
	--hbd-sombra: 0 2px 10px rgba(18, 25, 27, .14);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "cab" "mapa";
	font-family: var(--hb-sans, "Albert Sans", system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.45;
	color: var(--hbd-tinta);
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}
.hbd *, .hbd *::before, .hbd *::after { box-sizing: border-box; }
.hbd [hidden] { display: none !important; }
.hbd svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hbd button { font: inherit; color: inherit; cursor: pointer; }
.hbd p, .hbd h2, .hbd h3, .hbd h4 { margin: 0; }

.hbd-sr {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hbd button:focus-visible,
.hbd a:focus-visible,
.hbd input:focus-visible {
	outline: 2px solid var(--hbd-teal);
	outline-offset: 2px;
}

/* La etiqueta chica: opción A del comparador. */
.hbd .hbd-etq {
	display: flex; flex-wrap: wrap; align-items: baseline;
	font-family: var(--hb-sans, "Albert Sans", system-ui, sans-serif);
	font-weight: 700; font-size: 11px; line-height: 1.3;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--hbd-teal);
	margin: 0;
}
.hbd .hbd-ds { color: var(--hbd-gris); font-weight: 600; }
.hbd .hbd-ds:not(:empty)::before { content: "·"; margin: 0 6px; color: var(--hbd-borde); }

/* Abierto, cierra pronto, cerrado */
.hbd .hbd-es[data-tono="ok"]      { color: #1E7B4F; font-weight: 600; }
.hbd .hbd-es[data-tono="pronto"]  { color: #A15C07; font-weight: 600; }
.hbd .hbd-es[data-tono="cerrado"] { color: #B42318; font-weight: 600; }


/* ── Cabeza: buscador y pastillas ───────────────────────────────── */
.hbd-cab {
	grid-area: cab;
	display: flex; flex-direction: column; gap: 10px;
	padding: 0 0 12px;
	min-width: 0;
}
.hbd-buscar {
	display: flex; align-items: center; gap: 10px;
	height: 48px; padding: 0 16px;
	background: #FFFFFF;
	border: 1px solid var(--hbd-linea);
	border-radius: 999px;
	box-shadow: var(--hbd-sombra);
}
.hbd-buscar svg { width: 19px; height: 19px; color: var(--hbd-gris); }
.hbd .hbd-q {
	flex: 1; min-width: 0; height: 100%;
	border: 0 !important; outline: 0; box-shadow: none !important;
	background: transparent !important; padding: 0 !important; margin: 0;
	font: inherit; font-size: 16px;            /* 16: el iPhone no hace zoom */
	color: var(--hbd-tinta);
	-webkit-appearance: none; appearance: none;
}
.hbd .hbd-q::placeholder { color: var(--hbd-gris); opacity: 1; }
.hbd .hbd-q::-webkit-search-cancel-button { cursor: pointer; }

.hbd-chips {
	display: flex; gap: 8px;
	overflow-x: auto; overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin: 0 -16px; padding: 2px 16px 4px;
	scroll-padding-inline: 16px;
}
.hbd-chips::-webkit-scrollbar { display: none; }
.hbd .hbd-chip {
	--c: var(--hbd-teal);
	flex: none;
	display: inline-flex; align-items: center; gap: 6px;
	height: 38px; padding: 0 14px; margin: 0;
	border: 1px solid var(--hbd-linea); border-radius: 999px;
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(18, 25, 27, .08);
	font-weight: 600; font-size: 14.5px; line-height: 1; letter-spacing: 0;
	text-transform: none;
	color: var(--hbd-tinta);
	white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s;
}
.hbd .hbd-chip svg { width: 16px; height: 16px; color: var(--c); }
.hbd .hbd-chip:hover { border-color: var(--hbd-borde); background: #FFFFFF; color: var(--hbd-tinta); }
.hbd .hbd-chip[aria-pressed="true"] {
	background: var(--hbd-teal-suave);
	background: color-mix(in srgb, var(--c) 13%, #FFFFFF);
	border-color: var(--c);
	color: var(--hbd-tinta);
}
.hbd .hbd-chip[aria-pressed="true"] svg { color: var(--c); }
.hbd .hbd-chip[disabled] { opacity: .6; cursor: progress; }
.hbd .hbd-geo { --c: #2563EB; }

.hbd-aviso {
	font-size: 14px; padding: 9px 12px;
	background: #FDF3E0; border-left: 3px solid var(--hbd-oro);
	border-radius: 0 8px 8px 0;
}
.hbd-cuenta { font-size: 13.5px; color: var(--hbd-gris); }
.hbd-cab .hbd-cuenta { margin: -2px 2px 0; }


/* ── El mapa ────────────────────────────────────────────────────── */
.hbd-lienzo {
	grid-area: mapa;
	position: relative;
	height: var(--hbd-alto, 620px);
	min-height: 320px;
	border-radius: 16px;
	overflow: hidden;
	background: #E9EFEA;
}
.hbd-google { position: absolute; inset: 0; }
.hbd-google .gm-style { font-family: inherit; }

/* Los pines: bolita de color con su ícono y el nombre a un lado,
   como Google Maps. El que no cabe queda como punto chico. */
.hbd-capa { position: absolute; left: 0; top: 0; }
.hbd .hbd-pin {
	--c: var(--hbd-teal); --t: #FFFFFF;
	position: absolute;
	display: flex; align-items: center; gap: 4px;
	padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
	transform: translate(-13px, -13px);
	white-space: nowrap;
	z-index: 1;
	min-height: 0; line-height: 1;
}
.hbd .hbd-pin:hover, .hbd .hbd-pin:focus { background: none; }
.hbd .hbd-bola {
	width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--c); color: var(--t);
	border: 2px solid #FFFFFF;
	box-shadow: 0 1px 4px rgba(18, 25, 27, .35);
	transition: transform .15s;
}
.hbd .hbd-bola svg { width: 14px; height: 14px; stroke-width: 2.2; }
.hbd .hbd-pnom {
	font-weight: 700; font-size: 12.5px; line-height: 1.2;
	color: var(--hbd-tinta);
	text-shadow: 0 0 2px #FFF, 0 0 2px #FFF, 0 0 3px #FFF, 0 0 4px #FFF, 0 0 5px #FFF;
	pointer-events: auto;
}
.hbd .hbd-pin.nom-izq { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -13px); }
.hbd .hbd-pin.joya .hbd-bola { border-color: #F3DDAE; box-shadow: 0 0 0 2px var(--hbd-oro), 0 1px 4px rgba(18, 25, 27, .35); }
.hbd .hbd-pin.joya .hbd-pnom { color: var(--hbd-oro-tx); }
.hbd .hbd-pin.hov { z-index: 4; }
.hbd .hbd-pin.hov .hbd-bola { transform: scale(1.15); }

.hbd .hbd-pin.chico { transform: translate(-6px, -6px); z-index: 0; }
.hbd .hbd-pin.chico .hbd-bola { width: 12px; height: 12px; border-width: 2px; }
.hbd .hbd-pin.chico::before { content: ""; position: absolute; inset: -8px; }   /* se toca fácil */

.hbd .hbd-pin.on { z-index: 5; transform: translate(-17px, -17px); }
.hbd .hbd-pin.on.nom-izq { transform: translate(calc(-100% + 17px), -17px); }
.hbd .hbd-pin.on .hbd-bola { width: 34px; height: 34px; border-width: 3px; box-shadow: 0 0 0 3px rgba(11, 110, 122, .25), 0 3px 10px rgba(18, 25, 27, .35); }
.hbd .hbd-pin.on .hbd-bola svg { width: 17px; height: 17px; }
.hbd .hbd-pin.on .hbd-pnom { font-size: 13.5px; }


/* ── Lo que se ve de un lugar (panel y tarjeta flotante) ───────── */
.hbd-lug-top { display: flex; gap: 14px; align-items: flex-start; }
.hbd .hbd-lug-mini {
	--c: var(--hbd-teal);
	width: 88px; height: 88px; flex: none;
	border-radius: 14px;
	background: #DDE3DF center / cover no-repeat;
	display: grid; place-items: center;
}
.hbd .hbd-lug-mini.sin-foto {
	background: var(--hbd-teal-suave);
	background: color-mix(in srgb, var(--c) 14%, #FFFFFF);
	color: var(--c);
}
.hbd .hbd-lug-mini.sin-foto svg { width: 34%; height: 34%; }
.hbd-lug-tx { flex: 1; min-width: 0; padding-top: 2px; }
.hbd .hbd-lug-n {
	font-family: var(--hb-serif, "Gloock", Georgia, serif);
	font-weight: 400; font-size: 24px; line-height: 1.1;
	letter-spacing: 0; text-transform: none;
	color: var(--hbd-tinta);
	margin: 3px 0 4px;
	overflow-wrap: anywhere;
}
.hbd .hbd-gema {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 13px; font-weight: 700; color: var(--hbd-oro-tx);
	margin-bottom: 2px;
}
.hbd .hbd-gema svg { width: 14px; height: 14px; color: var(--hbd-oro); }
.hbd .hbd-lug-l { font-size: 14px; color: var(--hbd-gris); }
.hbd .hbd-x {
	width: 36px; height: 36px; flex: none;
	margin: 0 0 0 auto; padding: 0;
	border: 0; border-radius: 50%;
	background: #EEF1EE; color: var(--hbd-tinta);
	display: grid; place-items: center;
}
.hbd .hbd-x:hover { background: #E3E8E4; }
.hbd .hbd-x svg { width: 16px; height: 16px; stroke-width: 2.2; }

.hbd-acc {
	display: flex; gap: 8px;
	margin: 14px -18px 0; padding: 0 18px 2px;
	overflow-x: auto; scrollbar-width: none;
}
.hbd-acc::-webkit-scrollbar { display: none; }
.hbd .hbd-btn {
	flex: none;
	display: inline-flex; align-items: center; gap: 7px;
	height: 42px; padding: 0 16px;
	border: 1px solid var(--hbd-borde); border-radius: 999px;
	background: #FFFFFF; color: var(--hbd-teal);
	font-weight: 700; font-size: 14.5px; line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
}
.hbd .hbd-btn:hover { background: var(--hbd-teal-suave); color: var(--hbd-teal); }
.hbd .hbd-btn svg { width: 17px; height: 17px; }
.hbd .hbd-btn-p { background: var(--hbd-teal); border-color: var(--hbd-teal); color: #FFFFFF; }
.hbd .hbd-btn-p:hover { background: #095C66; color: #FFFFFF; }

.hbd .hbd-sube { font-size: 12.5px; color: var(--hbd-gris); text-align: center; margin: 10px 0 0; }

.hbd-gal { display: grid; gap: 6px; margin: 16px 0 4px; height: 210px; }
.hbd-gal span { border-radius: 14px; background: #DDE3DF center / cover no-repeat; }
.hbd-gal.n1 { grid-template-columns: 1fr; }
.hbd-gal.n2 { grid-template-columns: 1fr 1fr; }
.hbd-gal.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.hbd-gal.n3 .hbd-gal-0 { grid-row: 1 / 3; }

.hbd-bloque { border-top: 1px solid var(--hbd-linea); padding: 16px 0; }
.hbd-gal + .hbd-bloque { margin-top: 12px; }
.hbd-bloque h4 { margin: 0 0 9px; }
.hbd .hbd-frase {
	font-family: var(--hb-serif, "Gloock", Georgia, serif);
	font-size: 20px; line-height: 1.28; color: var(--hbd-tinta);
}
.hbd .hbd-desc { font-size: 15px; color: var(--hbd-tinta); }
.hbd .hbd-como { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hbd .hbd-como li { display: flex; gap: 10px; font-size: 14.5px; margin: 0; }
.hbd .hbd-como svg { width: 18px; height: 18px; margin-top: 1px; color: var(--hbd-teal); }
.hbd .hbd-verif { font-size: 12.5px; color: var(--hbd-gris); margin-top: 12px; }

.hbd-cerca { display: grid; gap: 12px; }
.hbd .hbd-cerca-b {
	display: flex; gap: 12px; align-items: center;
	width: 100%; margin: 0; padding: 0;
	border: 0; background: none; text-align: left;
	color: var(--hbd-tinta); text-transform: none; letter-spacing: 0;
}
.hbd .hbd-cerca-b:hover b { color: var(--hbd-teal); }
.hbd .hbd-cerca-b .hbd-lug-mini { width: 64px; height: 64px; border-radius: 12px; }
.hbd .hbd-cerca-b b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.hbd .hbd-cerca-b b + span { display: block; font-size: 13px; color: var(--hbd-gris); margin-top: 2px; }


/* ── Home: mapa ligero ──────────────────────────────────────────── */
.hbd-embed .hbd-lienzo { height: min(var(--hbd-alto, 560px), 72svh); }
.hbd .hbd-abrir {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	display: inline-flex; align-items: center; gap: 7px;
	height: 40px; padding: 0 15px;
	background: #FFFFFF; color: var(--hbd-tinta);
	border-radius: 999px; box-shadow: var(--hbd-sombra);
	font-weight: 700; font-size: 14px;
	text-decoration: none !important;
}
.hbd .hbd-abrir:hover { color: var(--hbd-teal); }
.hbd .hbd-abrir svg { width: 16px; height: 16px; }
.hbd-flota {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4;
	padding: 14px 18px 14px 14px;
	background: #FFFFFF; border-radius: 18px;
	box-shadow: 0 6px 24px rgba(18, 25, 27, .22);
	animation: hbd-entra .22s ease-out;
}
.hbd-flota .hbd-lug-mini { width: 72px; height: 72px; border-radius: 12px; }
.hbd-flota .hbd-lug-n { font-size: 21px; }
.hbd-flota .hbd-acc { margin: 12px -18px 0 -14px; padding: 0 18px 2px 14px; }
@keyframes hbd-entra { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }


/* ── /mapa: el panel ────────────────────────────────────────────── */
.hbd-full { overflow: hidden; }
.hbd-full .hbd-cab { padding: 10px 16px 10px; background: #FFFFFF; position: relative; z-index: 7; }
.hbd-full .hbd-lienzo { height: calc(100svh - 190px); min-height: 380px; border-radius: 0; }

.hbd-panel {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
	height: 300px;
	display: flex; flex-direction: column;
	background: #FFFFFF;
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -6px 24px rgba(18, 25, 27, .16);
	will-change: transform;
}
.hbd-panel.anim { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.hbd-agarre { flex: none; padding: 8px 0 6px; cursor: grab; touch-action: none; }
.hbd-agarre i { display: block; width: 40px; height: 5px; border-radius: 3px; background: #C9D1CE; margin: 0 auto; }
.hbd-cuerpo {
	flex: 1; min-height: 0;
	overflow: hidden;
	overscroll-behavior: contain;
	padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.hbd-panel[data-nivel="completa"] .hbd-cuerpo { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hbd-panel[data-nivel="tarjeta"] .hbd-cuerpo { touch-action: pan-x; }
.hbd-pcab, .hbd-lug-top, .hbd-sube { touch-action: none; }
.hbd-panel[data-nivel="completa"] .hbd-sube { display: none; }

.hbd-pcab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 18px 12px; }
.hbd .hbd-ptit {
	font-family: var(--hb-serif, "Gloock", Georgia, serif);
	font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: 0;
	color: var(--hbd-tinta); margin: 0;
}

/* Fichas grandes con foto, de lado */
.hbd-cards {
	display: flex; gap: 12px;
	overflow-x: auto; overscroll-behavior-x: contain;
	padding: 2px 18px 16px;
	scroll-padding-inline: 18px; scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-x;
}
.hbd-cards::-webkit-scrollbar { display: none; }
.hbd-card { --c: var(--hbd-teal); flex: none; width: 250px; scroll-snap-align: start; }
.hbd .hbd-card-a { display: block; color: var(--hbd-tinta); text-decoration: none !important; border-radius: 16px; }
.hbd-card-f {
	position: relative; display: grid; place-items: center;
	height: 170px; border-radius: 16px; overflow: hidden;
	background: #DDE3DF center / cover no-repeat;
}
.hbd-card-f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(10, 20, 22, .6)); }
.hbd-card.sin-foto .hbd-card-f { background: var(--hbd-teal-suave); background: color-mix(in srgb, var(--c) 14%, #FFFFFF); color: var(--c); }
.hbd-card.sin-foto .hbd-card-f::after { display: none; }
.hbd-card.sin-foto .hbd-card-f > svg { width: 44px; height: 44px; stroke-width: 1.6; }
.hbd-card-t {
	position: absolute; top: 10px; left: 10px; z-index: 1;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 9px; border-radius: 999px;
	background: #FFFFFF; color: var(--hbd-oro-tx);
	font-size: 11.5px; font-weight: 700;
}
.hbd-card-t svg { width: 12px; height: 12px; color: var(--hbd-oro); }
.hbd-card-fr {
	position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1;
	color: #FFFFFF; font-size: 13.5px; font-weight: 600; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hbd-card-tx { display: block; padding: 9px 2px 0; }
.hbd-card-n { display: block; font-weight: 700; font-size: 16.5px; line-height: 1.25; margin: 2px 0 1px; }
.hbd-card-l { display: block; font-size: 13.5px; color: var(--hbd-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbd-card.hov .hbd-card-n { color: var(--hbd-teal); }

.hbd-vacio { flex: none; width: 250px; padding: 20px 4px; color: var(--hbd-gris); font-size: 14.5px; }
.hbd .hbd-limpiar {
	margin-top: 10px; height: 38px; padding: 0 14px;
	border: 1px solid var(--hbd-borde); border-radius: 999px;
	background: #FFFFFF; color: var(--hbd-teal); font-weight: 700; font-size: 14px;
}

.hbd-vista-lugar { padding: 0 18px; }
.hbd .hbd-volver {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 0 14px -4px; padding: 6px 8px;
	border: 0; border-radius: 8px; background: none;
	font-weight: 700; font-size: 14px; color: var(--hbd-teal);
}
.hbd .hbd-volver:hover { background: var(--hbd-teal-suave); }
.hbd .hbd-volver svg { width: 17px; height: 17px; }


/* El lugar grande */
.hbd-hero { padding: 0 18px 6px; }
.hbd .hbd-hero-a { display: block; color: var(--hbd-tinta); text-decoration: none !important; }
.hbd-hero-f {
	position: relative; display: grid; place-items: center;
	height: 230px; border-radius: 18px; overflow: hidden;
	background: #DDE3DF center / cover no-repeat;
	margin-bottom: 10px;
}
.hbd-hero-a.sin-foto .hbd-hero-f { background: var(--hbd-teal-suave); background: color-mix(in srgb, var(--c) 14%, #FFFFFF); color: var(--c); }
.hbd-hero-a.sin-foto .hbd-hero-f > svg { width: 56px; height: 56px; stroke-width: 1.5; }
.hbd .hbd-hero-n {
	display: block;
	font-family: var(--hb-serif, "Gloock", Georgia, serif);
	font-weight: 400; font-size: 27px; line-height: 1.1;
	margin: 3px 0 4px;
}
.hbd .hbd-hero-fr { display: block; font-size: 15.5px; line-height: 1.4; margin-bottom: 3px; }
.hbd .hbd-hero-a .hbd-card-l { white-space: normal; }

/* Títulos de las filas del panel */
.hbd .hbd-sub {
	font-family: var(--hb-sans, "Albert Sans", system-ui, sans-serif);
	font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: 0; text-transform: none;
	color: var(--hbd-tinta);
	margin: 18px 18px 10px;
}

/* Los tours */
.hbd-tours { border-top: 1px solid var(--hbd-linea); margin-top: 6px; }
.hbd-tours-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 18px; }
.hbd .hbd-tours-todos { font-weight: 700; font-size: 14px; color: var(--hbd-teal); text-decoration: none !important; white-space: nowrap; }
.hbd-tcards {
	display: flex; gap: 12px;
	overflow-x: auto; overscroll-behavior-x: contain;
	padding: 2px 18px 12px;
	scroll-padding-inline: 18px; scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.hbd-tcards::-webkit-scrollbar { display: none; }
.hbd .hbd-tcard { flex: none; width: 220px; scroll-snap-align: start; color: var(--hbd-tinta); text-decoration: none !important; }
.hbd-tcard .hbd-card-f { height: 150px; }
.hbd .hbd-tdur { color: var(--hbd-tinta); }
.hbd-tcard .hbd-card-l { white-space: normal; }
.hbd .hbd-tours-nota { font-size: 12.5px; color: var(--hbd-gris); padding: 0 18px 8px; }

/* ── /mapa en el teléfono: pantalla fija, como app ──────────────────
   --hbd-top lo mide el script: es donde termina el encabezado del sitio. */
@media (max-width: 959px) {
	.hbd-full .hbd-chips { margin: 0 -16px; }
	.hbd-full.hbd-app {
		position: fixed; left: 0; right: 0; bottom: 0;
		top: var(--hbd-top, 0px);
		z-index: 30;
		grid-template-rows: auto minmax(0, 1fr);
		background: #FFFFFF;
	}
	.hbd-full.hbd-app .hbd-cab { touch-action: pan-x; box-shadow: 0 1px 0 var(--hbd-linea); }
	.hbd-full.hbd-app .hbd-lienzo { height: auto; min-height: 0; }
	.hbd-panel[data-nivel="completa"] { border-radius: 0; }
	/* Panel arriba del todo: el lugar grande, "Más lugares" y los tours.
	   En las otras alturas no se ven. */
	.hbd-panel:not([data-nivel="completa"]) .hbd-hero,
	.hbd-panel:not([data-nivel="completa"]) .hbd-sub-lug,
	.hbd-panel:not([data-nivel="completa"]) .hbd-tours { display: none; }
	.hbd-panel[data-nivel="completa"] .hbd-card.es-hero { display: none; }
	.hbd-panel[data-nivel="completa"] .hbd-cards,
	.hbd-panel[data-nivel="completa"] .hbd-tcards { touch-action: auto; }
	.hbd-panel[data-nivel="mini"] .hbd-pcab { cursor: pointer; }
}
html.hbd-bloqueo, html.hbd-bloqueo body { overflow: hidden; overscroll-behavior: none; }


/* ── Computadora ────────────────────────────────────────────────── */
@media (min-width: 960px) {
	/* Buscador y pastillas en un solo renglón, como Google Maps */
	.hbd-cab { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
	.hbd-buscar { flex: 0 1 380px; }
	.hbd-chips { flex: 1 1 420px; margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
	.hbd-aviso, .hbd-cab .hbd-cuenta { flex-basis: 100%; }
	.hbd .hbd-chip { height: 36px; padding: 0 13px; font-size: 13.5px; }
	.hbd-acc { flex-wrap: wrap; overflow: visible; margin: 14px 0 0; padding: 0; }
	.hbd-flota .hbd-acc { margin: 12px 0 0; padding: 0; }

	.hbd-flota { left: 16px; right: auto; bottom: 16px; width: 460px; }

	/* /mapa: el panel fijo a la izquierda, el mapa a la derecha */
	.hbd-full {
		grid-template-columns: 400px minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		grid-template-areas: "cab cab" "panel mapa";
		height: calc(100vh - 140px); min-height: 600px;
		border-top: 1px solid var(--hbd-linea);
	}
	.hbd-full .hbd-cab { padding: 14px 24px; border-bottom: 1px solid var(--hbd-linea); }
	.hbd-full .hbd-lienzo { height: auto; min-height: 0; border-radius: 0; }
	.hbd-full .hbd-panel {
		grid-area: panel;
		position: static; height: auto !important; transform: none !important;
		border-radius: 0; box-shadow: none;
		border-right: 1px solid var(--hbd-linea);
		min-height: 0;
	}
	.hbd-full .hbd-agarre { display: none; }
	.hbd-full .hbd-cuerpo { overflow-y: auto; scrollbar-width: thin; padding-top: 4px; }
	.hbd-full .hbd-pcab { padding: 8px 18px 10px; touch-action: auto; }
	.hbd-full .hbd-lug-top, .hbd-full .hbd-sube { touch-action: auto; }

	/* Las fichas, en renglones con foto */
	.hbd-full .hbd-cards {
		flex-direction: column; gap: 0;
		overflow: visible; padding: 0 8px 16px;
		scroll-snap-type: none; touch-action: auto;
	}
	.hbd-full .hbd-card { width: auto; }
	.hbd-full .hbd-card-a {
		display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; align-items: center;
		padding: 12px 10px; border-radius: 12px;
	}
	.hbd-full .hbd-card-a:hover, .hbd-full .hbd-card.hov .hbd-card-a { background: #F4F7F6; }
	.hbd-full .hbd-card-f { order: 2; height: 96px; border-radius: 12px; }
	.hbd-full .hbd-card-f::after, .hbd-full .hbd-card-fr { display: none; }
	.hbd-full .hbd-card-t { top: 6px; left: 6px; padding: 3px 6px; font-size: 0; gap: 0; }
	.hbd-full .hbd-card-t svg { width: 13px; height: 13px; }
	.hbd-full .hbd-card-tx { padding: 0; }
	.hbd-full .hbd-card-n { font-size: 16px; }
	.hbd-full .hbd-card-l { white-space: normal; }
	.hbd-full .hbd-card + .hbd-card .hbd-card-a { border-top: 1px solid var(--hbd-linea); border-radius: 0 0 12px 12px; }
	.hbd-full .hbd-card.sin-foto .hbd-card-f > svg { width: 32px; height: 32px; }
	.hbd-full .hbd-vacio { width: auto; padding: 24px 10px; }
	.hbd-full .hbd-vista-lugar { padding: 6px 20px 0; }
	.hbd-full .hbd-hero, .hbd-full .hbd-sub-lug { display: none; }
	.hbd-full .hbd-card.es-hero { display: block; }
	.hbd-full .hbd-tcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow: visible; padding: 2px 18px 12px; scroll-snap-type: none; }
	.hbd-full .hbd-tcard { width: auto; }
	.hbd-full .hbd-tcard .hbd-card-f { order: 0; height: 110px; }
	.hbd-full .hbd-tcard .hbd-card-f::after { display: block; }
	.hbd-full .hbd-tcard .hbd-card-tx { padding-top: 8px; }
	.hbd-full .hbd-tcard .hbd-card-n { font-size: 15px; }
	.hbd-full .hbd-tdur { font-size: 11.5px; padding: 3px 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.hbd *, .hbd *::before, .hbd *::after { transition: none !important; animation: none !important; }
}