/* =====================================================================
   Media Maratón de Cundinamarca · directorio turístico de Anapoima
   Se carga después de mapa.css y reutiliza sus clases (cab-guia, buscador,
   chip, tarjeta-lugar, paginación…). Aquí solo está lo que el directorio añade:
   los cinco grupos con su color, las tarjetas con foto y la ficha.
   ===================================================================== */

/* El color de cada grupo es el mismo en el punto del mapa, en el botón, en la
   leyenda y en la tarjeta: se lee como una sola cosa. */
.dir-g-dormir{ --grupo:#004884; }
.dir-g-comer{ --grupo:#A80521; }
.dir-g-ver{ --grupo:#3D7A27; }
.dir-g-parquear{ --grupo:#B7791F; }
.dir-g-servicios{ --grupo:#5A6572; }
.dir-tarjeta .tl-punto{ background: var(--grupo, var(--tinta-3)); }

.dir-c-dormir{ background:#004884; }
.dir-c-comer{ background:#A80521; }
.dir-c-ver{ background:#3D7A27; }
.dir-c-parquear{ background:#B7791F; }
.dir-c-servicios{ background:#5A6572; }

.filtro-mapa.activo.dir-capa-comer{ background:#A80521; border-color:#A80521; }
.filtro-mapa.activo.dir-capa-ver{ background:#3D7A27; border-color:#3D7A27; }
.filtro-mapa.activo.dir-capa-parquear{ background:#B7791F; border-color:#B7791F; }
.filtro-mapa.activo.dir-capa-servicios{ background:#5A6572; border-color:#5A6572; }

.dir-chip-comer:has(input:checked){ background:#A80521; border-color:#A80521; }
.dir-chip-ver:has(input:checked){ background:#3D7A27; border-color:#3D7A27; }
.dir-chip-parquear:has(input:checked){ background:#B7791F; border-color:#B7791F; }
.dir-chip-servicios:has(input:checked){ background:#5A6572; border-color:#5A6572; }

/* ---------- Tarjeta con foto ---------- */
.dir-rejilla{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dir-tarjeta{ padding:0; overflow:hidden; }
.dir-foto{
  display:block; aspect-ratio: 3 / 2; background: var(--crema-2); overflow:hidden;
}
.dir-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.dir-tarjeta:hover .dir-foto img{ transform:scale(1.03); }
.dir-foto img{ transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce){
  .dir-foto img{ transition:none; }
  .dir-tarjeta:hover .dir-foto img{ transform:none; }
}
.dir-cuerpo{ display:flex; flex-direction:column; flex:1; padding:14px 18px 16px; }
.dir-cuerpo h3 a{ color: inherit; text-decoration:none; }
.dir-cuerpo h3 a:hover{ color: var(--azul-profundo); text-decoration:underline; }
.dir-direccion{ margin:0; font-size:13.5px; color: var(--tinta-2); }
.dir-cuerpo .tl-acciones{ margin-top:auto; padding-top:14px; }
.dir-ver-mapa{ cursor:pointer; font-family:inherit; }

/* Sin foto: un bloque del color del grupo con su nombre, no un hueco. */
.dir-sin-foto{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  min-height:120px; background: var(--grupo, #5A6572); color:#FFFFFF;
  font-family: var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.dir-sin-foto-grande{ aspect-ratio: 3 / 2; border-radius: var(--r-g); }

/* ---------- Globo del mapa ---------- */
.pm-foto{
  display:block; width:100%; max-width:240px; height:120px; object-fit:cover;
  border-radius:8px; margin-bottom:8px;
}
.pm-lejos{ font-weight:600; color: var(--azul-profundo); }

/* ---------- Ficha ---------- */
.dir-volver{ font-weight:600; color: var(--azul-profundo); }
.dir-ficha-rejilla{
  display:grid; gap:32px; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items:start;
}
@media (max-width: 860px){
  .dir-ficha-rejilla{ grid-template-columns: minmax(0,1fr); }
}

.dir-carrusel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px;
  border-radius: var(--r-g); box-shadow: var(--elev-2);
  scrollbar-width: thin;
}
.dir-carrusel:focus-visible{ outline:2px solid var(--azul-profundo); outline-offset:3px; }
.dir-carrusel figure{
  flex:0 0 100%; margin:0; scroll-snap-align:center; background: var(--crema-2);
  display:flex; align-items:center; justify-content:center;
}
.dir-carrusel img{
  display:block; width:100%; height:auto; max-height:520px; object-fit:contain;
}
.dir-carrusel-nota{ margin:8px 0 0; font-size:12.5px; color: var(--tinta-3); }

.dir-mapa-ficha{ height:300px; margin-top:22px; }

.dir-descripcion{ margin:0 0 6px; font-size:16.5px; line-height:1.7; color: var(--tinta-2); }
.dir-acciones-grandes{ margin:16px 0 22px; }
.dir-whatsapp{ background:#1F8A4C; border-color:#1F8A4C; color:#FFFFFF; }
.dir-whatsapp:hover{ background:#176B3A; border-color:#176B3A; color:#FFFFFF; }
.dir-datos{ margin:0 0 8px; row-gap:9px; }
.dir-subtitulo{
  margin:28px 0 10px; font-family: var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color: var(--tinta-3);
}
.dir-servicios{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; }
.dir-servicios li{
  padding:5px 12px; border-radius:99px; background: var(--crema-2);
  border:1px solid var(--linea); font-size:13px; color: var(--tinta-2);
}
.dir-origen{ margin-top:26px; }

@media (max-width: 560px){
  .dir-rejilla{ grid-template-columns: minmax(0,1fr); }
}

/* ---------- Busca por categoría ----------
   Una pastilla por categoría del directorio oficial, cada una con su ícono y su
   color (`--cat`). El número es cuántos sitios tiene. */
[id="mapa-directorio"]{ scroll-margin-top: var(--nav-h); }
.dir-categorias{ padding:44px 0 6px; }
.dir-categorias .tit{ margin:0 0 12px; text-align:center; font-size:clamp(34px, 5vw, 50px); line-height:1.12; }
.dir-cat-sub{ margin:0 0 26px; text-align:center; font-size:16px; color: var(--tinta-2); }

.dir-cat-rejilla{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0,1fr));
}
.dir-cat{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px 10px 16px;
  border-radius:18px; background: var(--cat, #455A64); color:#FFFFFF; text-decoration:none;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--cat, #455A64) 70%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.dir-cat:hover{
  transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--cat, #455A64) 80%, transparent);
}
.dir-cat:focus-visible{ outline:3px solid var(--azul-profundo); outline-offset:3px; }
.dir-cat-icono{ flex:0 0 auto; opacity:.95; }
.dir-cat-nombre{ flex:1; min-width:0; font-size:14.5px; font-weight:600; line-height:1.25; }
.dir-cat-n{
  flex:0 0 auto; min-width:26px; padding:2px 8px; border-radius:99px; text-align:center;
  background: rgba(255,255,255,.22); font-size:12.5px; font-weight:700;
}
/* La categoría puesta: borde blanco y anillo del color, para que se vea
   en cuál se está sin depender solo del color. */
.dir-cat-activa{ outline:3px solid var(--cat); outline-offset:3px; }
.dir-cat-activa::after{ content:'✓'; font-weight:700; margin-left:2px; }

@media (max-width: 1000px){ .dir-cat-rejilla{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px){ .dir-cat-rejilla{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; } .dir-cat{ padding:9px 10px 9px 12px; gap:9px; } .dir-cat-nombre{ font-size:13.5px; } }
@media (max-width: 420px){ .dir-cat-rejilla{ grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce){ .dir-cat{ transition:none; } .dir-cat:hover{ transform:none; } }

/* ---------- GPS: «Cerca de mí» y «Cómo llegar» ---------- */
.dir-gps-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 14px; }
.dir-gps{ display:inline-flex; align-items:center; gap:9px; min-height:46px; }
.dir-gps[disabled]{ opacity:.7; cursor:progress; }
.dir-gps-buscando svg{ animation: dir-gira 1.1s linear infinite; }
@keyframes dir-gira{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .dir-gps-buscando svg{ animation:none; } }
.dir-gps-estado{ margin:0; font-size:14px; color: var(--tinta-2); }
.dir-gps-error{ color:#B3261E; font-weight:600; }
.dir-c-yo{ background:#1A73E8; }

.dir-de-ti{ margin:0 0 6px; }
.dir-llegar{ background: var(--azul-profundo); border-color: var(--azul-profundo); color:#FFFFFF; }
.dir-llegar:hover{ background:#00365F; border-color:#00365F; color:#FFFFFF; }

.dir-cercanos{
  margin:18px 0 0; padding:20px 22px; border-radius: var(--r-g);
  background: var(--superficie); box-shadow: var(--elev-2); border-left:5px solid #1A73E8;
}
.dir-cercanos-tit{ margin:0 0 2px; font-size:19px; }
.dir-cercanos-nota{ margin:0 0 12px; font-size:12.5px; color: var(--tinta-3); }
.dir-cercanos-lista{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.dir-cercanos-lista li{ display:flex; align-items:center; gap:12px; }
.dir-cercanos-punto{ flex:0 0 auto; width:12px; height:12px; border-radius:50%; border:2px solid #FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.dir-cercanos-dato{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dir-cercanos-dato > a{ font-weight:600; color: var(--tinta); text-decoration:none; }
.dir-cercanos-dato > a:hover{ text-decoration:underline; }
.dir-cercanos-dato small{ font-size:12.5px; color: var(--tinta-3); }
.dir-cercanos-ir{ flex:0 0 auto; }
@media (max-width: 520px){ .dir-cercanos-lista li{ flex-wrap:wrap; } .dir-cercanos-ir{ margin-left:24px; } }

.dir-gps-ficha{ margin:0 0 22px; padding:16px 18px; border-radius: var(--r-g); background: var(--crema-2); border:1px solid var(--linea); }
.dir-gps-borde{ cursor:pointer; font-family:inherit; gap:8px; }
.dir-gps-ficha .dir-gps-estado, .dir-gps-ficha .dir-de-ti-ficha{ margin:10px 0 0; }
.dir-de-ti-ficha{ font-size:15px; font-weight:600; color: var(--azul-profundo); }
.dir-gps-ficha .dir-llegar{ margin-top:10px; }