/* =========================================================
   CR Trail Adventure · Landing de tours (mapa interactivo)
   Paleta y tipografía según el manual de marca 2026.
   ========================================================= */

:root {
  /* Paleta de marca (no usar otros colores salvo blanco/negro) */
  --color-forest: #172211;
  --color-moss: #5b6d30;
  --color-cream: #eaedc7;
  --color-sage: #adc19d;
  --color-earth: #806624;

  /* Derivados para superficies sobre el mapa */
  --superficie: rgb(23 34 17 / 0.9);          /* forest translúcido */
  --superficie-solida: var(--color-forest);
  --borde-suave: rgb(234 237 199 / 0.14);       /* cream 14% */
  --texto: var(--color-cream);
  --texto-suave: rgb(234 237 199 / 0.72);

  /* Tema (oscuro = noche por defecto; [data-tema='claro'] = día).
     --tinta / --base son tripletas RGB para usar con transparencia: rgb(var(--tinta) / 0.1) */
  --tinta: 234 237 199;
  --base: 23 34 17;
  --acento: var(--color-sage);
  --primario-fondo: var(--color-cream);
  --primario-texto: var(--color-forest);
  --primario-hover: #fff;
  --sombra-texto: 0 2px 18px rgb(0 0 0 / 0.45);

  --fuente: 'Livvic', system-ui, sans-serif;
  --radio: 18px;
  --radio-sm: 10px;
  --sombra: 0 10px 30px rgb(0 0 0 / 0.35);
  --margen: clamp(16px, 3vw, 36px);
  --alto-topbar: 76px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  color-scheme: dark;

  /* Vidrio líquido (encabezado y paneles flotantes) */
  --vidrio-fondo: linear-gradient(135deg, rgb(var(--base) / 0.66) 0%, rgb(var(--base) / 0.38) 55%, rgb(var(--base) / 0.58) 100%);
  --vidrio-borde: rgb(255 255 255 / 0.14);
  --vidrio-brillo: rgb(255 255 255 / 0.22);
  --vidrio-sombra: 0 12px 32px rgb(0 0 0 / 0.32);
}

/* Día: interfaz clara (crema + verde bosque). */
:root[data-tema='claro'] {
  --superficie: rgb(234 237 199 / 0.9);
  --superficie-solida: var(--color-cream);
  --borde-suave: rgb(23 34 17 / 0.12);
  --texto: var(--color-forest);
  --texto-suave: rgb(23 34 17 / 0.7);
  --tinta: 23 34 17;
  --base: 234 237 199;
  --acento: var(--color-moss);
  --primario-fondo: var(--color-forest);
  --primario-texto: var(--color-cream);
  --primario-hover: var(--color-moss);
  --sombra: 0 10px 30px rgb(23 34 17 / 0.18);
  --sombra-texto: 0 1px 16px rgb(234 237 199 / 0.85);
  --vidrio-fondo: linear-gradient(135deg, rgb(255 255 255 / 0.62) 0%, rgb(234 237 199 / 0.42) 55%, rgb(234 237 199 / 0.62) 100%);
  --vidrio-borde: rgb(255 255 255 / 0.6);
  --vidrio-brillo: rgb(255 255 255 / 0.75);
  --vidrio-sombra: 0 12px 32px rgb(23 34 17 / 0.2);
  color-scheme: light;
}

/* Al cambiar de tema, los colores se funden en vez de saltar. */
:root.cambiando-tema *,
:root.cambiando-tema *::before,
:root.cambiando-tema *::after {
  transition: background-color 600ms ease, color 600ms ease, border-color 600ms ease, fill 600ms ease, stroke 600ms ease !important;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--superficie-solida);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; }

svg { display: block; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ---------- Mapa ---------- */

.mapa {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--superficie-solida);
}

/* ---------- Luz sobre el mapa: sol (día) y luna (noche) ---------- */

/* Nivel de brillo del sol / la luna (0 a 1; 0.5 = valor por defecto). Lo cambia js/brillo.js.
   --luz-k multiplica la intensidad de los resplandores: 0 (apagado) a 2 (doble). */
:root {
  --brillo: 0.5;
  --luz-k: calc(var(--brillo) * 2);
}

/* Noche: el satélite se apaga y se enfría, como bajo la luna. */
.teselas-satelite {
  filter: brightness(calc(0.3 + 0.6 * var(--brillo))) saturate(0.55) contrast(1.08) hue-rotate(8deg);
  transition: filter 1200ms ease;
}

/* Día: el satélite se ilumina con colores vivos. */
:root[data-tema='claro'] .teselas-satelite { filter: brightness(calc(0.78 + 0.4 * var(--brillo))) saturate(calc(0.9 + 0.32 * var(--brillo))) contrast(1.02); }

/* ---------- Límites y nombres del mapa (js/data/limites.js y etiquetas-mapa.js) ---------- */

/* Fronteras entre países: línea clara y marcada con un borde oscuro debajo. */
.limite-frontera {
  stroke: var(--color-cream);
  stroke-width: 2.4px;
  stroke-opacity: 0.92;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.limite-frontera-borde {
  stroke: var(--color-forest);
  stroke-width: 5px;
  stroke-opacity: 0.45;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Provincias: línea fina y tenue para que no compita con las fronteras ni con los tours. */
.limite-provincia {
  stroke: var(--color-cream);
  stroke-width: 1px;
  stroke-opacity: 0.22;
  fill: none;
  stroke-linejoin: round;
}
:root[data-tema='claro'] .limite-provincia { stroke-opacity: 0.32; }

.etiqueta-mapa { pointer-events: none; }
.etiqueta-mapa > span {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--fuente);
  color: var(--color-cream);
  text-shadow: 0 1px 2px rgb(23 34 17 / 0.9), 0 0 10px rgb(23 34 17 / 0.6);
  transition: opacity 300ms ease;
}
/* Solo el idioma activo. */
:root[lang='es'] .etiqueta-mapa [lang='en'],
:root[lang='en'] .etiqueta-mapa [lang='es'] { display: none; }

.etiqueta-mapa--pais > span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.8;
}
.etiqueta-mapa--oceano > span {
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-sage);
  opacity: 0.85;
}
.etiqueta-mapa--provincia > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
.etiqueta-mapa--ciudad > span {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
}
/* Punto que marca la ciudad, a la izquierda del nombre. */
.etiqueta-mapa--ciudad > span::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--color-cream);
  vertical-align: middle;
  box-shadow: 0 0 0 1.5px rgb(23 34 17 / 0.7);
}

/* Rangos de zoom: países y océanos de lejos; provincias hasta zoom 10; ciudades desde zoom 9. */
.mapa:not([data-zoom='7'], [data-zoom='8'], [data-zoom='9']) :is(.etiqueta-mapa--pais, .etiqueta-mapa--oceano) > span,
.mapa:not([data-zoom='7'], [data-zoom='8'], [data-zoom='9'], [data-zoom='10']) .etiqueta-mapa--provincia > span,
.mapa:is([data-zoom='7'], [data-zoom='8']) .etiqueta-mapa--ciudad > span {
  opacity: 0;
}

.luz {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Posición del sol / la luna (centro) y tamaño; la luz sale desde ahí. */
  --astro-x: calc(100% - 140px);
  --astro-y: 150px;
  --astro-tam: 76px;
}
.luz > span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms ease;
}

/* Sol: resplandor cálido alrededor del sol (más suave que un destello). */
.luz__sol {
  background:
    radial-gradient(circle at var(--astro-x) var(--astro-y), rgb(255 255 255 / calc(0.45 * var(--luz-k))) 0, rgb(234 237 199 / calc(0.3 * var(--luz-k))) 6%, rgb(128 102 36 / calc(0.14 * var(--luz-k))) 28%, rgb(128 102 36 / 0) 60%);
  mix-blend-mode: screen;
}
/* Tono dorado general (tierra de la paleta) muy suave sobre todo el mapa. */
.luz__calidez {
  background: linear-gradient(210deg, rgb(128 102 36 / calc(0.22 * var(--luz-k))), rgb(234 237 199 / calc(0.08 * var(--luz-k))) 60%, rgb(234 237 199 / 0) 100%);
  mix-blend-mode: soft-light;
}
:root[data-tema='claro'] .luz__sol,
:root[data-tema='claro'] .luz__calidez { opacity: 1; }

/* Luna: luz fría plateada alrededor de la luna y bordes en penumbra. */
.luz__luna {
  background:
    radial-gradient(circle at var(--astro-x) var(--astro-y), rgb(234 237 199 / calc(0.4 * var(--luz-k))) 0, rgb(173 193 157 / calc(0.18 * var(--luz-k))) 12%, rgb(173 193 157 / 0) 45%);
  mix-blend-mode: screen;
}
.luz__penumbra {
  /* Más luz de luna = menos penumbra. */
  background: radial-gradient(ellipse 85% 75% at 70% 30%, rgb(23 34 17 / 0) 35%, rgb(23 34 17 / calc(0.9 - 0.6 * var(--brillo))) 100%);
  mix-blend-mode: multiply;
}
:root:not([data-tema='claro']) .luz__luna,
:root:not([data-tema='claro']) .luz__penumbra { opacity: 1; }

/* ---------- El sol y la luna en el cielo ---------- */

.luz > .astro {
  inset: auto;
  left: calc(var(--astro-x) - var(--astro-tam) / 2);
  top: calc(var(--astro-y) - var(--astro-tam) / 2);
  width: var(--astro-tam);
  height: var(--astro-tam);
  border-radius: 50%;
  transform: translateY(24px) scale(0.7);
  transition: opacity 1200ms ease, transform 1200ms var(--ease-out);
}

/* Sol: disco crema-blanco con halo dorado y rayos que giran despacio. */
.astro--sol {
  background: radial-gradient(circle at 42% 40%, #fff 0, rgb(255 255 255 / 0.95) 28%, var(--color-cream) 62%, rgb(234 237 199 / 0.92) 100%);
  box-shadow:
    0 0 18px 4px rgb(255 255 255 / calc(0.45 * var(--luz-k))),
    0 0 50px 16px rgb(234 237 199 / calc(0.35 * var(--luz-k))),
    0 0 110px 40px rgb(128 102 36 / calc(0.18 * var(--luz-k)));
}
.astro--sol::before {
  content: '';
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(234 237 199 / 0.32) 0deg 5deg, rgb(234 237 199 / 0) 5deg 22.5deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%, transparent 70%);
  mask: radial-gradient(circle, transparent 34%, #000 36%, transparent 70%);
  animation: rayos-sol 90s linear infinite;
  z-index: -1;
}
@keyframes rayos-sol { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .astro--sol::before { animation: none !important; }
}

/* Luna: disco crema con cráteres en salvia y un halo plateado. */
.astro--luna {
  background:
    radial-gradient(circle at 32% 34%, rgb(173 193 157 / 0.55) 0 8%, rgb(173 193 157 / 0) 9%),
    radial-gradient(circle at 62% 56%, rgb(173 193 157 / 0.5) 0 12%, rgb(173 193 157 / 0) 13%),
    radial-gradient(circle at 44% 74%, rgb(173 193 157 / 0.45) 0 6%, rgb(173 193 157 / 0) 7%),
    radial-gradient(circle at 70% 28%, rgb(173 193 157 / 0.4) 0 5%, rgb(173 193 157 / 0) 6%),
    radial-gradient(circle at 40% 38%, #fff 0, var(--color-cream) 55%, var(--color-sage) 100%);
  box-shadow:
    inset -8px -6px 14px rgb(23 34 17 / 0.18),
    0 0 20px 5px rgb(234 237 199 / calc(0.35 * var(--luz-k))),
    0 0 70px 24px rgb(173 193 157 / calc(0.18 * var(--luz-k)));
}

:root[data-tema='claro'] .astro--sol,
:root:not([data-tema='claro']) .astro--luna { opacity: calc(0.55 + 0.9 * var(--brillo)); transform: none; }

/* Degradado de legibilidad detrás del encabezado y el texto de introducción. */
main::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--base) / 0.75) 0, rgb(var(--base) / 0) 220px),
    linear-gradient(90deg, rgb(var(--base) / 0.55) 0, rgb(var(--base) / 0) 520px);
}
/* De día, un halo crema detrás de la introducción la mantiene legible sobre zonas oscuras del mapa. */
:root[data-tema='claro'] .intro { isolation: isolate; }
:root[data-tema='claro'] .intro::before {
  content: '';
  position: absolute;
  inset: -50px -70px -40px -60px;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 40% 50%, rgb(234 237 199 / 0.8), rgb(234 237 199 / 0) 100%);
}

/* De día el degradado crema es más sutil para no empañar el mapa iluminado. */
:root[data-tema='claro'] main::before {
  background:
    linear-gradient(180deg, rgb(var(--base) / 0.5) 0, rgb(var(--base) / 0) 170px),
    linear-gradient(90deg, rgb(var(--base) / 0.42) 0, rgb(var(--base) / 0) 420px);
}

.leaflet-container { font-family: var(--fuente); }

.leaflet-control-attribution {
  background: rgb(var(--base) / 0.6) !important;
  color: var(--texto-suave) !important;
  font-size: 10px;
}
.leaflet-control-attribution a { color: var(--texto) !important; }

/* ---------- Encabezado ---------- */

/* Barra flotante de vidrio líquido: degradado translúcido, desenfoque del mapa
   detrás, borde con brillo especular arriba y un reflejo curvo encima. */
.topbar {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 10;
  height: calc(var(--alto-topbar) - 14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px 0 calc(var(--margen) - 10px);
  border-radius: 22px;
  background: var(--vidrio-fondo);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--vidrio-borde);
  box-shadow:
    inset 0 1px 0 var(--vidrio-brillo),
    inset 0 -1px 0 rgb(0 0 0 / 0.1),
    var(--vidrio-sombra);
  isolation: isolate;
}
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(140% 120% at 12% -60%, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 55%),
    linear-gradient(100deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.08) 48%, rgb(255 255 255 / 0) 62%);
}

.topbar__logo { display: block; }
.topbar__logo img {
  display: block;
  height: 44px;
  width: auto;
}
/* Logo crema de noche, verde bosque de día. */
.logo-dia { display: none !important; }
:root[data-tema='claro'] .logo-noche { display: none !important; }
:root[data-tema='claro'] .logo-dia { display: block !important; }

.topbar__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Selector de idioma (ES 🇨🇷 / EN 🇺🇸) ---------- */

.idioma {
  display: flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid var(--vidrio-borde);
  background: rgb(var(--base) / 0.35);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo);
}
.idioma__opcion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.idioma__opcion[aria-pressed='true'] {
  background: var(--primario-fondo);
  color: var(--primario-texto);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}
@media (hover: hover) and (pointer: fine) {
  .idioma__opcion[aria-pressed='false']:hover { color: var(--texto); background: rgb(var(--tinta) / 0.08); }
}
.bandera-marco {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
}
.bandera { display: block; width: 100%; height: 100%; }
.idioma__opcion[aria-pressed='false'] .bandera-marco { opacity: 0.75; }

/* ---------- Botón de día / noche ---------- */

.boton-tema {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--vidrio-borde);
  background: rgb(var(--base) / 0.35);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo);
  cursor: pointer;
  overflow: hidden;
  transition: transform 120ms var(--ease-out), background-color 200ms ease;
}
.boton-tema:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .boton-tema:hover { background: rgb(var(--base) / 0.6); }
}
.boton-tema svg {
  position: absolute;
  width: 24px;
  height: 24px;
  transition: transform 500ms var(--ease-out), opacity 300ms ease;
}
/* Sol: disco y rayos en tierra/dorado. */
.boton-tema__sol { color: var(--color-earth); }
/* Luna: creciente crema con brillo suave. */
.boton-tema__luna { color: var(--color-cream); filter: drop-shadow(0 0 6px rgb(234 237 199 / 0.6)); }

/* Noche (por defecto): se ve la luna; el sol se va hacia abajo. */
.boton-tema__sol { opacity: 0; transform: translateY(70%) rotate(-90deg) scale(0.5); }
.boton-tema__luna { opacity: 1; transform: none; }
/* Día: se ve el sol; la luna se va hacia abajo. */
:root[data-tema='claro'] .boton-tema__sol { opacity: 1; transform: none; }
:root[data-tema='claro'] .boton-tema__luna { opacity: 0; transform: translateY(70%) rotate(90deg) scale(0.5); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms var(--ease-out);
}
.boton svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton:active:not(:disabled) { transform: scale(0.97); }
.boton:disabled { cursor: not-allowed; opacity: 0.55; }

.boton--primario {
  background: var(--primario-fondo);
  color: var(--primario-texto);
}
.boton--fantasma {
  background: rgb(var(--base) / 0.45);
  border-color: rgb(var(--tinta) / 0.55);
  color: var(--texto);
}
.boton--ancho { width: 100%; }

/* Textos largo / corto de un botón (el corto solo en móvil). */
.texto-corto { display: none; }

/* Botones de WhatsApp: verde oficial de WhatsApp con su logo (igual en día y noche). */
.boton--whatsapp {
  background: #25d366;
  color: #fff;
  text-shadow: 0 1px 1px rgb(7 94 84 / 0.35);
  box-shadow: 0 4px 14px rgb(37 211 102 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.boton .logo-whatsapp {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgb(7 94 84 / 0.35));
}
@media (hover: hover) and (pointer: fine) {
  .boton--whatsapp:hover:not(:disabled) { background: #1ebe5a; }
}
.boton--whatsapp:active:not(:disabled) { background: #128c7e; }

@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover:not(:disabled) { background: var(--primario-hover); }
  .boton--fantasma:hover:not(:disabled) { border-color: var(--texto); background: rgb(var(--base) / 0.7); }
}

.enlace {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--acento);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- Introducción ---------- */

.intro {
  position: fixed;
  z-index: 5;
  top: calc(var(--alto-topbar) + 28px);
  left: var(--margen);
  max-width: 440px;
  pointer-events: none;
  text-shadow: var(--sombra-texto);
}

.intro__pre {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.1;
}

.intro__titulo {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.intro__titulo em {
  display: block;
  white-space: nowrap; /* "Costa Rica" nunca se parte */
  font-style: italic;
  color: var(--acento);
}

.intro__sub {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ---------- Panel de categorías ---------- */

.filtros {
  position: fixed;
  z-index: 6;
  left: var(--margen);
  top: var(--top-filtros, 350px);
  width: 330px;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--top-filtros, 350px) - var(--margen));
  background: linear-gradient(160deg, rgb(var(--base) / 0.88), rgb(var(--base) / 0.74));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
  overflow: hidden;
}

.filtros__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--borde-suave);
}
.filtros__cabecera h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.filtros__plegar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde-suave);
  background: transparent;
  cursor: pointer;
}
.filtros__plegar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease-out);
}
.filtros[data-abierto='false'] .filtros__plegar svg { transform: rotate(180deg); }
.filtros[data-abierto='false'] .filtros__cuerpo { display: none; }
.filtros[data-abierto='false'] .filtros__cabecera { border-bottom: 0; }

.filtros__cuerpo {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.filtros__lista {
  list-style: none;
  margin: 0;
  padding: 8px 8px 4px;
  overflow-y: auto;
}

/* Selector de mes */
.meses {
  margin: 0;
  padding: 12px 16px 12px 20px;
  border: 0;
  border-bottom: 1px solid var(--borde-suave);
  min-width: 0;
}
.meses[hidden] { display: none; }
.meses__titulo {
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}
.meses__opciones {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.meses__opciones::-webkit-scrollbar { display: none; }
.mes { flex-shrink: 0; cursor: pointer; }
.mes input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mes span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--borde-suave);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-suave);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mes input:checked + span {
  background: var(--primario-fondo);
  border-color: var(--primario-fondo);
  color: var(--primario-texto);
  font-weight: 700;
}
.mes input:focus-visible + span {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .mes:hover input:not(:checked) + span { border-color: rgb(var(--tinta) / 0.5); color: var(--texto); }
}

.categoria { padding: 2px 0; }
.categoria--vacia .categoria__fila { opacity: 0.5; }
.categoria + .categoria { border-top: 1px solid var(--borde-suave); }

.categoria__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 4px;
}

/* Botón que abre / cierra la lista de tours de la categoría. */
.categoria__desplegar {
  display: grid;
  grid-template-columns: 38px 1fr 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.categoria__desplegar:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .categoria__desplegar:not(:disabled):hover { background: rgb(var(--tinta) / 0.06); }
}
.categoria__flecha {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--texto-suave);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 250ms var(--ease-out);
}
.categoria--abierta .categoria__flecha { transform: rotate(180deg); }
.categoria__desplegar:disabled .categoria__flecha { visibility: hidden; }

/* Lista desplegable: anima la altura con grid-template-rows (0fr → 1fr). */
.categoria__desplegable {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease-out);
}
.categoria--abierta .categoria__desplegable { grid-template-rows: 1fr; }
.categoria__desplegable > .categoria__tours { min-height: 0; overflow: hidden; }

.categoria__tours {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 12px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.categoria--abierta .categoria__tours { opacity: 1; padding-bottom: 8px; }
.categoria--abierta.categoria--apagada .categoria__tours { opacity: 0.45; }

.tour-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tour-item:hover { background: rgb(var(--tinta) / 0.08); }
}
.tour-item--activo { background: rgb(var(--tinta) / 0.12); }
.tour-item__icono {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cat-fondo);
  color: var(--cat-icono);
  box-shadow: 0 0 0 1px rgb(var(--tinta) / 0.35);
}
.tour-item__icono svg { width: 16px; height: 16px; }
.tour-item__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tour-item__nombre { font-size: 14px; font-weight: 500; line-height: 1.25; }
.tour-item__sub { font-size: 11.5px; line-height: 1.3; color: var(--texto-suave); }
.tour-item__precio { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }

.categoria__icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cat-fondo);
  color: var(--cat-icono);
  box-shadow: 0 0 0 1.5px rgb(var(--tinta) / 0.35);
}
.categoria__icono svg { width: 20px; height: 20px; }

.categoria__nombre {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}
.categoria__conteo {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--texto-suave);
}

/* Switch (checkbox con role="switch") */
.switch {
  appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: rgb(var(--tinta) / 0.2);
  cursor: pointer;
  transition: background-color 180ms ease;
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-cream);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform 200ms var(--ease-out);
}
.switch:checked { background: var(--color-moss); }
.switch:checked::after { transform: translateX(18px); }

.filtros__vacio {
  margin: 4px 20px 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-suave);
}

.filtros__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--borde-suave);
  font-size: 13px;
  color: var(--texto-suave);
}

/* ---------- Controles de zoom ---------- */

.zoom {
  position: fixed;
  z-index: 6;
  right: var(--margen);
  bottom: calc(var(--margen) + 18px);
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: linear-gradient(160deg, rgb(var(--base) / 0.88), rgb(var(--base) / 0.74));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--vidrio-borde);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
}
.zoom > button, .zoom > .brillo > button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.zoom > button svg, .zoom > .brillo > button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .zoom > button:hover, .zoom > .brillo > button:hover { background: rgb(var(--tinta) / 0.1); }
}
/* ---------- Control de brillo (sol / luna) ---------- */

.brillo { position: relative; }
.brillo__panel {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  width: 240px;
  padding: 14px 16px 10px;
  border-radius: 16px;
  border: 1px solid var(--vidrio-borde);
  background: linear-gradient(160deg, rgb(var(--base) / 0.92), rgb(var(--base) / 0.8));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
  animation: entrar-brillo 200ms var(--ease-out);
}
.brillo__panel[hidden] { display: none; }
@keyframes entrar-brillo {
  from { opacity: 0; transform: translateX(8px) scale(0.97); }
}
.brillo__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.brillo__titulo { font-size: 14px; font-weight: 700; }
.brillo__valor { font-size: 13px; font-weight: 700; color: var(--acento); font-variant-numeric: tabular-nums; }
.brillo__fila {
  display: grid;
  grid-template-columns: 18px 1fr 22px;
  align-items: center;
  gap: 10px;
}
.brillo__fila svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--texto-suave);
  stroke-width: 2;
  stroke-linecap: round;
}
.brillo__max { color: var(--texto-suave); }
.brillo__restablecer { margin-top: 6px; font-size: 13px; }

/* Deslizador con la parte recorrida en el color de acento. */
#rango-brillo {
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#rango-brillo::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento) var(--progreso, 50%), rgb(var(--tinta) / 0.18) var(--progreso, 50%));
}
#rango-brillo::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento) var(--progreso, 50%), rgb(var(--tinta) / 0.18) var(--progreso, 50%));
}
#rango-brillo::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 2px solid var(--color-moss);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}
#rango-brillo::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 2px solid var(--color-moss);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}
#rango-brillo:focus-visible { outline: none; }
#rango-brillo:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--acento); outline-offset: 2px; }

.zoom__sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--borde-suave);
}

/* ---------- Marcadores ---------- */

.pin { background: none; border: 0; }

.pin__globo {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--pin-fondo);
  color: var(--pin-icono);
  border: 2.5px solid var(--pin-borde, var(--color-cream));
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.45);
  transform-origin: 20% 80%;
  opacity: 1;
  transition: transform 200ms var(--ease-out), opacity 200ms ease;
}
.pin__globo svg {
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .pin:hover .pin__globo { transform: rotate(-45deg) scale(1.1); }
}
.pin--activo .pin__globo {
  transform: rotate(-45deg) scale(1.18);
  border-color: #fff;
  box-shadow: 0 0 0 6px rgb(var(--tinta) / 0.35), 0 8px 18px rgb(0 0 0 / 0.5);
}

/* ---------- Flotación de los íconos del mapa ----------
   Se anima la propiedad `translate` (independiente de `transform`), así no choca con la
   rotación del pin ni con el agrandado al pasar el mouse o al estar activo. */
@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
/* Sombra en el suelo: se achica y aclara cuando el ícono sube. */
@keyframes sombra-flotar {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
  50% { transform: translateX(-50%) scale(0.7); opacity: 0.25; }
}

/* .pin__flota solo lleva el desfase (--retraso) para el globo y su sombra; no altera el layout. */
.pin__flota { display: contents; }
.pin__globo { animation: flotar 3.6s ease-in-out var(--retraso, 0s) infinite; }
.pin__sombra {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 22px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0));
  z-index: -1;
  pointer-events: none;
  animation: sombra-flotar 3.6s ease-in-out var(--retraso, 0s) infinite;
}
.grupo-pin__circulo { animation: flotar 4.2s ease-in-out var(--retraso, 0s) infinite; }

@media (prefers-reduced-motion: reduce) {
  .pin__globo,
  .pin__sombra,
  .grupo-pin__circulo { animation: none !important; }
}

/* Aparición suave cuando se activa una categoría */
@starting-style {
  .pin__globo { opacity: 0; transform: rotate(-45deg) scale(0.6); }
}

/* Grupo de tours cercanos (markercluster) */
.grupo-pin { background: none; border: 0; }
.grupo-pin__circulo {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-forest);
  box-shadow: 0 0 0 6px rgb(var(--tinta) / 0.3), 0 6px 14px rgb(0 0 0 / 0.45);
  line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.grupo-pin__circulo strong { font-size: 20px; }
.grupo-pin__circulo span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
@media (hover: hover) and (pointer: fine) {
  .grupo-pin:hover .grupo-pin__circulo { transform: scale(1.08); }
}
/* Líneas al separar un grupo (spiderfy) */
.leaflet-cluster-spider-leg { stroke: var(--color-cream); stroke-opacity: 0.7; }

.etiqueta-tour {
  background: var(--superficie-solida);
  color: var(--texto);
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--sombra);
}
.etiqueta-tour::before { display: none; }

/* ---------- Ficha del tour ---------- */

.detalle {
  position: fixed;
  z-index: 8;
  top: calc(var(--alto-topbar) + 8px);
  right: var(--margen);
  bottom: var(--margen);
  width: min(420px, calc(100vw - 2 * var(--margen)));
  display: flex;
  flex-direction: column;
  background: var(--superficie-solida);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  animation: entrar-detalle 260ms var(--ease-out);
}
.detalle[hidden] { display: none; }

@keyframes entrar-detalle {
  from { opacity: 0; transform: translateX(16px); }
}

/* Mientras hay ficha abierta, los controles de zoom se ocultan
   para no quedar debajo de ella. */
body.con-detalle .zoom { opacity: 0; pointer-events: none; }

.detalle__cerrar {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--base) / 0.75);
  cursor: pointer;
}
.detalle__cerrar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.detalle__contenido {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ficha__desplazable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ficha__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.ficha__foto--vacia {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 15%, rgb(var(--tinta) / 0.16), transparent 55%),
    var(--cat-fondo);
  color: var(--cat-icono);
}
.ficha__foto--vacia svg { width: 72px; height: 72px; opacity: 0.9; }

.ficha__portada { position: relative; }
.ficha__foto--satelite { background: var(--color-forest); }
.ficha__credito {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(var(--base) / 0.6);
  font-size: 10px;
  color: var(--texto-suave);
}

.ficha__cabecera { padding: 18px 22px 0; }

.ficha__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--borde-suave);
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-suave);
}
.chip svg { width: 14px; height: 14px; }
.chip--categoria {
  border-color: transparent;
  background: var(--cat-fondo);
  color: var(--cat-icono);
  box-shadow: inset 0 0 0 1px rgb(var(--tinta) / 0.3);
}

.ficha__nombre {
  margin: 12px 0 4px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}
.ficha__zona {
  margin: 0;
  font-style: italic;
  font-weight: 500;
  color: var(--acento);
}
.ficha__resumen {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

.precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 18px 22px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--borde-suave);
}
.precio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: rgb(var(--tinta) / 0.05);
}
.precio__etiqueta { font-size: 12px; color: var(--texto-suave); }
.precio__monto { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.nota {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-suave);
}
.nota--precios { margin: 8px 22px 0; }

/* Próximas salidas */
.fechas { margin: 18px 22px 0; }
.fechas__titulo {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}
.fechas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fecha {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--color-moss);
  color: var(--color-cream);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
a.fecha:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  a.fecha:hover { background: var(--primario-fondo); color: var(--primario-texto); }
}

.ficha__pronto {
  margin: 16px 22px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgb(var(--tinta) / 0.3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* Secciones plegables */
.secciones { margin: 14px 0 8px; }
.seccion { border-top: 1px solid var(--borde-suave); }
.seccion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.seccion summary::-webkit-details-marker { display: none; }
.seccion summary svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease-out);
}
.seccion[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .seccion summary:hover { background: rgb(var(--tinta) / 0.05); }
}

.seccion__cuerpo {
  padding: 0 22px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.seccion__cuerpo p { margin: 0 0 12px; }
.seccion__cuerpo h4 {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}
.seccion__cuerpo h4:first-child { margin-top: 0; }

.destacados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.destacados li {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(173 193 157 / 0.22);
  color: var(--texto);
  font-size: 13px;
  font-weight: 500;
}

/* Línea de tiempo del itinerario */
.linea {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linea li {
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 0 0 10px 16px;
}
.linea li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
}
.linea li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 17px;
  bottom: 0;
  width: 1px;
  background: var(--borde-suave);
}
.linea__hora {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.linea__texto { font-size: 14px; line-height: 1.45; }

.incluye, .simple { list-style: none; margin: 0; padding: 0; }
.incluye li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
}
.incluye svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--acento);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.incluye strong { color: var(--texto); font-weight: 700; }
.simple li { padding: 2px 0 2px 16px; position: relative; font-size: 14px; }
.simple li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
}

/* Pie fijo con precio y reserva */
.ficha__pie {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde-suave);
  background: var(--superficie-solida);
}
.ficha__pie .boton { flex: 1; }
.ficha__pie-precio {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ficha__pie-precio span { font-size: 12px; color: var(--texto-suave); }
.ficha__pie-precio strong { font-size: 20px; font-variant-numeric: tabular-nums; }

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  z-index: 20;
}

/* ---------- Pantallas bajas en escritorio ---------- */

@media (min-width: 900px) and (max-height: 760px) {
  .intro__sub { display: none; }
  .filtros { --top-filtros: 270px; }
}

/* ---------- Móvil ---------- */

@media (max-width: 899px) {
  :root { --alto-topbar: 64px; }

  .topbar { top: 8px; left: 8px; right: 8px; border-radius: 18px; padding: 0 6px 0 12px; }
  .luz { --astro-x: calc(100% - 50px); --astro-y: 124px; --astro-tam: 42px; }
  .topbar__logo img { height: 34px; }
  .boton-tema { width: 40px; height: 40px; }
  /* En móvil el selector muestra solo las banderas. */
  .idioma__codigo { display: none; }
  .idioma__opcion { padding: 0 8px; min-height: 32px; }
  #btn-whatsapp { padding: 0 12px; gap: 6px; font-size: 13px; white-space: nowrap; min-height: 40px; }
  #btn-whatsapp .logo-whatsapp { width: 18px; height: 18px; }
  .texto-largo { display: none; }
  .texto-corto { display: inline; }

  .intro {
    top: calc(var(--alto-topbar) + 8px);
    max-width: none;
    right: var(--margen);
  }
  .intro__pre { font-size: 22px; }
  .intro__titulo { font-size: 36px; }
  .intro__sub { display: none; }

  /* El panel pasa a ser una hoja inferior plegable */
  .filtros {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 55vh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .zoom {
    bottom: auto;
    top: calc(var(--alto-topbar) + 110px);
    right: 8px;
  }
  .zoom > button, .zoom > .brillo > button { width: 40px; height: 40px; }
  #btn-acercar, #btn-alejar, .zoom__sep { display: none; } /* en móvil se usa el gesto de pellizco */

  .detalle {
    top: auto;
    height: 68dvh;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    animation-name: subir-detalle;
  }
  body.con-detalle .filtros,
  body.con-detalle .intro { display: none; }

  .filtros__cabecera { cursor: pointer; }
  .ficha__foto { aspect-ratio: 16 / 6; }
  .ficha__nombre { font-size: 24px; }

  main::before {
    background: linear-gradient(180deg, rgb(var(--base) / 0.8) 0, rgb(var(--base) / 0) 200px);
  }
  /* De día en móvil, solo una franja suave arriba (detrás del título): el degradado lateral
     de escritorio (420 px) cubría toda la pantalla y teñía el mapa de crema. */
  :root[data-tema='claro'] main::before {
    background: linear-gradient(180deg, rgb(var(--base) / 0.55) 0, rgb(var(--base) / 0) 190px);
  }
}

@keyframes subir-detalle {
  from { opacity: 0; transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}