/* =====================================================================
   Media Maratón de Cundinamarca · guía de alojamiento, gastronomía y parqueo
   Depende de los tokens de site.css.
   ===================================================================== */

.cab-guia{ padding:120px 0 40px; background: var(--crema-2); }
.cab-guia .tit{ margin:6px 0 16px; }
.entrada-guia{ max-width:60ch; font-size:17px; line-height:1.65; color: var(--tinta-2); }

.seccion-mapa{ padding:34px 0; }
.mapa-cab{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between; margin-bottom:16px;
}
.mapa-cab .tit{ margin:0; font-size:22px; }

.mapa-filtros{ display:flex; gap:8px; flex-wrap:wrap; }
.filtro-mapa{
  cursor:pointer; padding:8px 16px; border-radius:99px;
  border:1px solid var(--linea-2); background: transparent;
  font-family: var(--texto); font-size:13.5px; font-weight:600; color: var(--tinta-3);
}
.filtro-mapa.activo{ background: var(--azul-profundo); border-color: var(--azul-profundo); color:#FFFFFF; }
/* El estado no se fía solo del color: el botón activo lleva su marca. */
.filtro-mapa.activo::before{ content:'✓ '; }

.mapa{
  height:min(66vh, 560px); border-radius: var(--r-g);
  box-shadow: var(--elev-3); background: var(--crema-2); z-index:1;
}
.mapa-sin-guion{ padding:24px; font-size:15px; color: var(--tinta-2); }
.mapa-fuente{ margin:12px 0 0; font-size:12.5px; color: var(--tinta-3); }

/* Puntos del mapa. Círculo con borde blanco para que se distinga sobre
   cualquier tesela, clara u oscura. */
.punto-mapa span{
  display:block; width:16px; height:16px; border-radius:50%;
  border:2.5px solid #FFFFFF; box-shadow:0 1px 4px rgba(0,0,0,.4);
}

.leaflet-popup-content{ font-family: var(--texto); font-size:14px; line-height:1.5; min-width:180px; }
.leaflet-popup-content strong{ display:block; font-size:15px; margin-bottom:2px; }
.pm-clase{ display:block; font-size:12px; color:#5A6572; margin-bottom:6px; }
.pm-dato{ display:block; font-size:13px; margin-bottom:3px; }
.pm-tel, .pm-web{ display:block; font-weight:600; margin-top:4px; }
.pm-nota{ display:block; margin-top:7px; font-size:11.5px; color:#7A838E; }

/* Nota de la seccion de parqueaderos. Es la unica cuyos datos vienen a medias
   de una fuente abierta, y eso se le dice a quien la lee, no solo al codigo. */
.guia-nota{
  max-width:70ch; margin:0 0 4px; font-size:14px; line-height:1.6;
  color: var(--tinta-2);
}

.seccion-guia{ padding:52px 0; }
.seccion-alterna{ background: var(--crema-2); }
.envoltura-estrecha{ max-width:760px; }

.rejilla-lugares{
  display:grid; gap:16px; margin-top:22px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
/* La tarjeta se construye en columna con el origen pegado abajo, para que en
   una rejilla todas terminen a la misma altura por mucho que una tenga
   direccion y otra no. */
.tarjeta-lugar{
  display:flex; flex-direction:column;
  background: var(--superficie); border-radius: var(--r-g);
  box-shadow: var(--elev-2); padding:18px 20px 16px;
  border:1px solid transparent;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.tarjeta-lugar:hover{
  box-shadow: var(--elev-3); border-color: var(--linea); transform: translateY(-2px);
}
/* Quien prefiere que nada se mueva, que no se mueva. */
@media (prefers-reduced-motion: reduce){
  .tarjeta-lugar{ transition:none; }
  .tarjeta-lugar:hover{ transform:none; }
}

/* El mismo color que el punto del mapa, para que la ficha y el mapa se lean
   como una sola cosa. */
.tl-tipo{
  display:flex; align-items:center; gap:7px; margin:0 0 8px;
  font-family: var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--tinta-3);
}
.tl-punto{ width:9px; height:9px; border-radius:50%; background: var(--tinta-3); flex:0 0 auto; }
.tl-alojamiento .tl-punto{ background:#004884; }
.tl-gastronomia .tl-punto{ background:#A80521; }
.tl-parqueadero .tl-punto{ background:#3D7A27; }

.tarjeta-lugar h3{ margin:0; font-size:17px; line-height:1.3; letter-spacing:-.01em; }
.tl-clase{ margin:3px 0 12px; font-size:12.5px; color: var(--tinta-3); }
.tl-datos{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 12px; margin:0; }
.tl-datos dt{
  font-family: var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--tinta-3); padding-top:3px;
}
.tl-datos dd{ margin:0; font-size:14px; word-break:break-word; }
/* Las acciones son a lo que se viene: llamar, abrir la pagina, saber por donde
   se llega. Se tocan con el pulgar, asi que 40 px de alto. */
.tl-acciones{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.tl-accion{
  display:inline-flex; align-items:center; min-height:40px;
  padding:8px 14px; border-radius:99px;
  border:1px solid var(--linea-2); background: transparent;
  font-size:13.5px; font-weight:600; color: var(--azul-profundo); text-decoration:none;
}
.tl-accion:hover{ background: var(--crema-2); border-color: var(--azul-profundo); }
.tl-llamar{ background: var(--azul-profundo); border-color: var(--azul-profundo); color:#FFFFFF; }
.tl-llamar:hover{ background:#00365F; border-color:#00365F; color:#FFFFFF; }

/* Pegado al fondo: el margen automatico empuja la procedencia abajo del todo
   sin importar cuanto ocupe lo de arriba. */
.tl-origen{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--linea);
  font-size:11.5px; line-height:1.5; color: var(--tinta-3);
}
.tarjeta-lugar .tl-origen{ margin-top:auto; }


/* ---------- Leyenda del mapa ----------
   Los colores del sombreado no explican nada por sí solos; esto los nombra. */
.mapa-leyenda{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px 20px;
  margin:14px 0 0; padding:0; font-size:13px; color: var(--tinta-2);
}
.mapa-leyenda li{ display:flex; align-items:center; gap:7px; }
.ml-sede, .ml-zona{ width:18px; height:13px; border-radius:3px; display:block; }
.ml-sede{ background: rgba(168,5,33,.18); border:2px solid #A80521; }
.ml-zona{ background: rgba(51,102,204,.07); border:1px solid #004884; }
.ml-punto{ width:13px; height:13px; border-radius:50%; display:block; border:2px solid #FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.ml-dormir{ background:#004884; }
.ml-comer{ background:#A80521; }
.ml-parquear{ background:#3D7A27; }

.tooltip-municipio{
  font-family: var(--texto); font-size:13px; font-weight:600;
  padding:4px 9px; border:0; box-shadow: var(--elev-2);
}

/* ---------- Cifras de la cabecera ----------
   Dicen de un vistazo qué tamaño tiene la guía, que antes había que deducirlo
   bajando por tres listados. */
.cifras-guia{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px;
  margin:22px 0 0; padding:0; font-size:13.5px; color: var(--tinta-2);
}
.cifras-guia strong{
  display:block; font-size:24px; line-height:1.1; letter-spacing:-.02em;
  color: var(--azul-profundo);
}

/* ---------- Buscador ----------
   Se queda pegado arriba al bajar por los resultados: con ochenta páginas,
   volver al principio para cambiar un filtro es lo que hace que la gente
   abandone. En pantallas bajas no se pega, porque comerse media pantalla de un
   móvil apaisado es peor que desplazarse. */
.seccion-buscador{
  /* Debajo del menu, no a cero: el menu es fijo y a cero el buscador se le
     mete por detras y solo se le ve el borde. */
  position:sticky; top: var(--nav-h); z-index:400;
  padding:14px 0; background: var(--superficie);
  border-bottom:1px solid var(--linea);
  box-shadow:0 2px 10px -6px rgba(0,36,74,.25);
}
@media (max-height: 560px){ .seccion-buscador{ position:static; } }

.buscador{ display:flex; flex-direction:column; gap:10px; }
.bu-linea{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.bu-linea-2{ align-items:center; gap:10px 18px; }

.bu-campo{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bu-campo label{
  font-family: var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--tinta-3);
}
.bu-texto{ flex:1 1 260px; }
.bu-campo input, .bu-campo select{
  min-height:44px; padding:10px 14px;
  border:1px solid var(--linea-2); border-radius:99px;
  background: var(--superficie); font-family: var(--texto); font-size:15px;
  color: var(--tinta); min-width:0;
}
.bu-campo input:focus-visible, .bu-campo select:focus-visible{
  outline:2px solid var(--azul-profundo); outline-offset:1px; border-color: var(--azul-profundo);
}
.bu-enviar{ min-height:44px; padding:11px 26px; }

/* El tipo, como pastillas. Son tres opciones y es el filtro que más se usa:
   merece estar a la vista y no escondido en un desplegable. */
.bu-tipos{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  display:inline-flex; align-items:center; cursor:pointer;
  padding:7px 15px; border-radius:99px;
  border:1px solid var(--linea-2); background: transparent;
  font-size:13.5px; font-weight:600; color: var(--tinta-3);
}
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip:hover{ border-color: var(--azul-profundo); color: var(--azul-profundo); }
.chip:has(input:checked){
  background: var(--azul-profundo); border-color: var(--azul-profundo); color:#FFFFFF;
}
/* El foco del teclado tiene que verse en la pastilla, porque el radio de
   verdad está oculto y no lo enseñaría. */
.chip:has(input:focus-visible){ outline:2px solid var(--azul-profundo); outline-offset:2px; }
.chip-gastronomia:has(input:checked){ background: var(--brasa); border-color: var(--brasa); }
.chip-parqueadero:has(input:checked){ background:#3D7A27; border-color:#3D7A27; }

.bu-casilla{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--tinta-2); cursor:pointer; }
.bu-casilla input{ width:17px; height:17px; accent-color: var(--azul-profundo); }
.bu-limpiar{ font-size:13.5px; font-weight:600; color: var(--brasa-texto, var(--brasa)); }

@media (max-width: 640px){
  .bu-linea{ gap:8px; }
  .bu-texto{ flex:1 1 100%; }
  .bu-campo:not(.bu-texto){ flex:1 1 100%; }
  .bu-enviar{ flex:1 1 100%; }
}

/* ---------- Resultados ----------
   El ancla deja hueco para el menu y el buscador, que son las dos cosas
   pegadas arriba: sin esto, saltar a #resultados los esconde detras. */
[id="resultados"]{ scroll-margin-top: var(--nav-h); }

.seccion-apretada{ padding:32px 0 8px; }
.res-cuenta{ margin:0 0 18px; font-size:15px; color: var(--tinta-2); }
.res-cuenta strong{ font-size:19px; color: var(--tinta); }

.res-vacio{
  padding:46px 28px; text-align:center;
  background: var(--crema-2); border-radius: var(--r-g);
}
.rv-titulo{ margin:0 0 8px; font-size:19px; font-weight:600; color: var(--tinta); }
.res-vacio p{ max-width:56ch; margin:0 auto 18px; color: var(--tinta-2); font-size:14.5px; line-height:1.6; }

/* ---------- Paginación ----------
   Con dos mil fichas hay ochenta páginas. Se pintan la primera, la última y las
   de alrededor de la actual; los saltos van con puntos suspensivos. */
.paginacion-guia{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin:38px 0 0;
}
.pg-numeros{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  margin:0; padding:0;
}
.pg-numeros a, .pg-actual, .pg-hueco, .pg-salto{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; min-height:42px; padding:0 12px;
  border-radius:99px; font-size:14.5px; font-weight:600; text-decoration:none;
}
.pg-numeros a, .pg-salto{ color: var(--azul-profundo); border:1px solid var(--linea-2); }
.pg-numeros a:hover, .pg-salto:hover{ background: var(--crema-2); border-color: var(--azul-profundo); }
.pg-actual{ background: var(--azul-profundo); color:#FFFFFF; border:1px solid var(--azul-profundo); }
.pg-hueco{ color: var(--tinta-3); min-width:24px; padding:0 2px; }
/* Los extremos no se quitan, se apagan: si desaparecieran, los botones
   saltarían de sitio al llegar a la primera o la última página. */
.pg-inerte{ color: var(--tinta-3); border:1px solid var(--linea); opacity:.55; }

@media (max-width: 560px){
  .paginacion-guia{ gap:6px; }
  .pg-salto{ flex:1 1 100%; }
}

/* Los filtros puestos, escritos al lado de la cuenta: quien llega por un enlace
   que le pasaron ve que esto es un recorte de la guía y cuál. */
.res-cab{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin:0 0 18px;
}
.res-cab .res-cuenta{ margin:0; }
.res-filtros{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.res-filtros li{
  padding:4px 11px; border-radius:99px; background: var(--crema-2);
  border:1px solid var(--linea); font-size:12.5px; color: var(--tinta-2);
}

/* La distancia hasta la salida es el dato que ordena la guía: se dice, y se
   dice con el color de la marca para que se lea antes que la dirección. */
.tl-lejos{
  margin:0 0 10px; font-size:13px; font-weight:600; color: var(--azul-profundo);
}