/* ══════════════════════════════════════════════════════════════
   MXL Brew · directorio público
   Misma familia visual que el menú. Aquí el trabajo lo hace el
   contraste entre la ficha de un cliente y la de quien todavía no
   lo es: esa diferencia es el mecanismo de venta, no un adorno.
   ══════════════════════════════════════════════════════════════ */

.dir-body{padding-bottom:60px;}

/* ── Encabezado ─────────────────────────────────────────────── */
.dir-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 22px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
  background:rgba(18,16,19,.92); backdrop-filter:blur(8px);
}
.dir-marca{
  display:flex; align-items:center; gap:9px;
  text-decoration:none; font-family:'Fraunces', serif; font-size:16px; font-weight:500;
}
.dir-marca-mark{
  width:28px; height:28px; border-radius:50%;
  background:conic-gradient(from 180deg, var(--amber), #7a4a1f, var(--amber));
  display:flex; align-items:center; justify-content:center;
  color:#12100f; font-size:13px;
}
.dir-alta{
  font-size:12.5px; color:var(--text-dim); text-decoration:none;
  border:1px solid var(--line-fuerte); border-radius:20px; padding:8px 15px;
  white-space:nowrap;
}
.dir-alta:hover{border-color:var(--amber); color:var(--amber);}

/* ── Portada ────────────────────────────────────────────────── */
.dir-hero{max-width:900px; margin:0 auto; padding:44px 22px 26px; text-align:center;}
.dir-hero h1{
  font-family:'Fraunces', serif; font-weight:300; font-size:clamp(30px, 6vw, 46px);
  line-height:1.08; letter-spacing:-.01em;
}
.dir-hero h1 em{font-style:italic; color:var(--amber);}
.dir-hero p{
  color:var(--text-dim); font-size:14.5px; line-height:1.65;
  max-width:56ch; margin:14px auto 0;
}
.dir-cifras{
  display:flex; justify-content:center; gap:22px; flex-wrap:wrap;
  margin-top:22px; font-size:11.5px; color:var(--text-faint);
}
.dir-cifras strong{
  display:block; font-family:'Fraunces', serif; font-size:22px;
  font-weight:400; color:var(--amber); line-height:1.2;
}

/* ── Filtros ────────────────────────────────────────────────── */
.dir-filtros{max-width:1040px; margin:0 auto; padding:0 22px 20px;}
.dir-buscar{display:flex; gap:9px; margin-bottom:14px;}
.dir-buscar input{
  flex:1; padding:12px 16px; border-radius:24px;
  border:1px solid var(--line-fuerte); background:var(--bg-elev);
  color:var(--text); font-family:inherit; font-size:14px;
}
.dir-buscar input:focus{outline:none; border-color:var(--amber);}
.btn-buscar{
  padding:12px 20px; border-radius:24px; border:1px solid var(--amber);
  background:var(--amber); color:#1a1108;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
}

.dir-chips{display:flex; gap:8px; flex-wrap:wrap;}
.dir-chip{cursor:pointer;}
.dir-chip input{position:absolute; opacity:0; pointer-events:none;}
.dir-chip span,
.dir-chip-limpiar{
  display:inline-block; padding:8px 14px; border-radius:20px;
  border:1px solid var(--line); background:var(--bg-elev);
  font-size:12.5px; color:var(--text-dim); white-space:nowrap;
  transition:border-color .16s, color .16s, background .16s;
}
.dir-chip:hover span{border-color:var(--line-fuerte);}
.dir-chip input:checked + span{
  border-color:var(--amber); background:var(--amber-soft); color:var(--amber); font-weight:600;
}
.dir-chip-limpiar{text-decoration:none; color:var(--text-faint);}
.dir-chip-limpiar:hover{border-color:var(--red); color:var(--red);}

/* ── Mapa ───────────────────────────────────────────────────── */
.dir-mapa-caja{max-width:1040px; margin:0 auto 28px; padding:0 22px;}
.dir-mapa{
  position:relative; height:380px; overflow:hidden;
  border-radius:20px; border:1px solid var(--line);
  background:#1a171b; cursor:grab;
  /* `none` y no `pan-y`: con `pan-y` el navegador se queda los gestos
     verticales para desplazar la página, así que el mapa sólo se podía
     mover de lado. Ahora los gestos son del mapa —un dedo arrastra, dos
     dedos acercan— y la página se desplaza tocando fuera de él. */
  touch-action:none;
}
.dir-mapa.arrastrando{cursor:grabbing;}
/* Que se entienda que el mapa se toca. En el celular no hay «hover» que
   lo insinúe. */
.dir-mapa-pie strong{color:var(--text-dim); font-weight:600;}
.mapa-lienzo{position:absolute; inset:0;}

/* Las teselas de OSM son claras; se invierten para que el mapa
   pertenezca al mismo mundo visual que el resto de la página. */
.mapa-teselas{position:absolute; inset:0;}
.mapa-teselas img{
  position:absolute; width:256px; height:256px; user-select:none;
  filter:invert(1) hue-rotate(180deg) brightness(.78) contrast(.86) saturate(.6);
}
.mapa-pines{position:absolute; inset:0;}
.mapa-pin{
  position:absolute; width:15px; height:15px; margin:-7px 0 0 -7px;
  border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(255,255,255,.5);
  background:rgba(139,130,121,.55);
  transition:transform .12s;
}
.mapa-pin:hover{transform:scale(1.35); z-index:3;}
.mapa-pin:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* El nombre del local, pegado al punto. Va dentro del pin para que el
   toque abarque etiqueta y punto: un blanco de 15 px es imposible de
   atinar con el dedo en un celular. */
.mapa-pin-nombre{
  position:absolute; left:50%; top:calc(100% + 5px);
  transform:translateX(-50%) scale(1);
  display:none; white-space:nowrap; pointer-events:none;
  padding:3px 7px; border-radius:6px;
  background:rgba(12,10,13,.86); border:1px solid var(--line);
  font-size:10.5px; font-weight:600; color:var(--text);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.mapa-pines.con-nombres .mapa-pin-nombre{display:block;}

/* Al pasar encima sale siempre, aunque el mapa esté abierto: es la forma
   de identificar un punto sin tener que acercarse primero. */
.mapa-pin:hover .mapa-pin-nombre,
.mapa-pin:focus-visible .mapa-pin-nombre{
  display:block; z-index:5;
  transform:translateX(-50%) scale(.78);
  transform-origin:top center;
  border-color:var(--amber);
}
.mapa-pin.es-cliente .mapa-pin-nombre{color:#f7e3c6;}
.mapa-pin.es-cliente{
  background:var(--amber); border-color:#fff2df;
  box-shadow:0 0 0 4px rgba(217,142,59,.22);
  width:17px; height:17px; margin:-8px 0 0 -8px;
}
.mapa-pin.abierto::after{
  content:''; position:absolute; right:-2px; top:-2px;
  width:6px; height:6px; border-radius:50%;
  background:var(--green); border:1.5px solid #121013;
}

/* Un edificio con varias cerveceras adentro se dibuja igual que los
   demás pines: un pin es un lugar al que se puede ir, y agrandarlo y
   ponerle un número lo volvía un símbolo aparte que hay que aprenderse.
   El racimo de pines encima del mismo techo ya lo resuelve agrupar; el
   pin no tenía que cambiar de forma también. */

.mapa-controles{position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:5px; z-index:4;}
.mapa-controles button{
  width:32px; height:32px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line-fuerte); background:rgba(18,16,19,.9);
  color:var(--text); font-size:17px; line-height:1; font-family:inherit;
}
.mapa-controles button:hover{border-color:var(--amber); color:var(--amber);}

.mapa-credito{
  position:absolute; right:8px; bottom:6px; z-index:4;
  font-size:9.5px; color:var(--text-faint);
  background:rgba(18,16,19,.72); padding:3px 7px; border-radius:6px;
}
.mapa-credito a{color:var(--text-dim);}

.dir-mapa-pie{
  font-size:11px; color:var(--text-faint); text-align:center; margin-top:9px;
}

/* ── Fichas ─────────────────────────────────────────────────── */
.dir-lista{
  max-width:1040px; margin:0 auto; padding:0 22px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:15px;
}

/* ── Sitio: varias cerveceras en un mismo edificio ─────────────
   El grupo ocupa el ancho completo de la lista y no una celda: adentro
   van varias tarjetas y encajarlas en una columna de 300 px las dejaría
   como una tira ilegible. */
.dir-sitio{
  grid-column:1 / -1;
  background:var(--bg-elev-2, rgba(255,255,255,.02));
  border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:18px; padding:18px;
  display:flex; flex-direction:column; gap:14px;
  scroll-margin-top:80px;
}
.dir-sitio-top{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;}
.dir-sitio-logo{width:44px; height:44px; border-radius:11px; object-fit:cover; flex:0 0 auto;}
.dir-sitio-inicial{
  width:44px; height:44px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elev); border:1px solid var(--line);
  font-family:'Fraunces', serif; font-size:16px; color:var(--amber);
}
.dir-sitio-id h2{margin:0; font-size:19px;}
.dir-sitio-id h2 a{color:inherit; text-decoration:none;}
.dir-sitio-id h2 a:hover{text-decoration:underline;}
.dir-sitio-cuantos{margin:2px 0 0; font-size:12px; color:var(--amber); font-weight:600;}
.dir-sitio-lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px;
}
.dir-sitio-pie{display:flex; flex-wrap:wrap; gap:8px;}

.dir-ficha{
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:18px; padding:18px;
  display:flex; flex-direction:column; gap:13px;
  scroll-margin-top:80px;
}
/* Dentro de un sitio la tarjeta es más apretada: la dirección, el horario
   de la semana y los servicios ya los dijo el encabezado del edificio, y
   repetirlos cinco veces sólo alarga la página. */
.dir-sitio .dir-ficha{padding:14px; gap:10px; border-radius:14px;}
/* La ficha del cliente se ve mejor a propósito: es lo que ve el
   cervecero que todavía no lo es cuando busca la suya. */
.dir-ficha.es-cliente{
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--bg-elev);
}
.dir-ficha.es-cliente::before{
  content:''; display:block; height:2px; margin:-18px -18px 0;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg, transparent, var(--acento), transparent);
}

.dir-ficha-top{display:flex; align-items:flex-start; gap:12px;}
.dir-logo{
  width:44px; height:44px; border-radius:11px; object-fit:cover; flex:0 0 auto;
}
.dir-inicial{
  width:44px; height:44px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elev-2); border:1px solid var(--line);
  font-family:'Fraunces', serif; font-size:15px; color:var(--acento);
}
.dir-ficha-id{flex:1; min-width:0;}
.dir-ficha-id h2{font-family:'Fraunces', serif; font-weight:500; font-size:17.5px; line-height:1.2;}
.dir-marca-madre{font-size:11px; color:var(--text-faint); margin-top:2px;}

.dir-estado{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:4px 9px; border-radius:20px; border:1px solid var(--line);
  color:var(--text-faint); white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.dir-estado.abierto{color:#b9d1ac; border-color:rgba(122,154,107,.3); background:rgba(122,154,107,.1);}
/* Está cerrado, pero abre pronto: ámbar y no verde, porque todavía no se
   puede ir. Distinguirlo del cerrado seco es lo que hace que quien va
   saliendo del trabajo no se salte la tarjeta. */
.dir-estado.pronto{color:var(--amber); border-color:rgba(217,142,59,.3); background:var(--amber-soft);}

.dir-promo{
  font-size:12px; line-height:1.5; color:var(--text-dim);
  padding:9px 12px; border-radius:11px;
  background:var(--amber-soft); border:1px solid rgba(217,142,59,.25);
}
.dir-promo strong{color:var(--amber); margin-right:5px;}

.dir-datos p{font-size:12.5px; line-height:1.55; color:var(--text-dim);}
.dir-ref{color:var(--text-faint) !important; font-size:11.5px !important;}
.dir-horario{color:var(--text-faint) !important; font-size:11.5px !important; margin-top:3px;}

.dir-servicios{display:flex; flex-wrap:wrap; gap:6px;}
.dir-servicios span{
  font-size:10.5px; padding:3px 9px; border-radius:14px;
  border:1px solid var(--line); color:var(--text-faint);
}

.dir-acciones{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:auto; padding-top:4px;
}
.dir-red{font-size:11.5px; color:var(--text-faint); text-decoration:none;}
.dir-red:hover{color:var(--amber);}

/* Iconos de contacto. Van pegados a la derecha para que el ojo encuentre
   siempre «Ver carta» primero, que es la acción que importa. */
.dir-iconos{display:flex; align-items:center; gap:4px; margin-left:auto;}
.dir-ico{
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); text-decoration:none;
  border:1px solid transparent;
  transition:color .15s, border-color .15s, background .15s;
}
/* 32 px de blanco aunque el dibujo mida 17: por debajo de eso el dedo
   falla y se acaba tocando el de al lado. */
.dir-ico:hover, .dir-ico:focus-visible{
  color:var(--amber); border-color:var(--line-fuerte); background:var(--bg-elev);
}
.btn .ico{margin-right:5px; vertical-align:-3px;}

.dir-sin-carta{
  font-size:11px; color:var(--text-faint);
  padding-top:10px; border-top:1px solid var(--line);
}
.dir-sin-carta a{color:var(--amber); text-decoration:none;}

.dir-vacio{
  max-width:520px; margin:0 auto; padding:48px 22px; text-align:center;
}
.dir-vacio p{color:var(--text-dim); font-size:14px; margin-bottom:18px;}

/* ── Pie ────────────────────────────────────────────────────── */
.dir-pie{
  max-width:760px; margin:56px auto 0; padding:28px 22px 0;
  border-top:1px solid var(--line); text-align:center;
}
.dir-pie p{font-size:12.5px; color:var(--text-dim); line-height:1.6;}
.dir-pie-legal{font-size:11px !important; color:var(--text-faint) !important; margin-top:12px;}
.dir-pie-legal a{color:var(--text-dim);}
.dir-pie-links{margin-top:16px; font-size:11.5px !important;}
.dir-pie-links a{color:var(--text-faint); text-decoration:none;}
.dir-pie-links a:hover{color:var(--amber);}

@media (max-width: 640px){
  .dir-hero{padding-top:32px;}
  .dir-mapa{height:300px;}
  .dir-lista{grid-template-columns:1fr;}
  .dir-cifras{gap:16px;}
}

/* ── Ficha individual ───────────────────────────────────────── */
.dir-ficha-id h2 a{text-decoration:none;}
.dir-ficha-id h2 a:hover{color:var(--acento);}

.ficha{max-width:720px; margin:0 auto; padding:40px 22px;}
.ficha-cabeza{display:flex; align-items:flex-start; gap:16px; margin-bottom:22px;}
.ficha-logo{width:64px; height:64px; border-radius:16px; object-fit:cover; flex:0 0 auto;}
.ficha-inicial{
  width:64px; height:64px; border-radius:16px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elev-2); border:1px solid var(--line);
  font-family:'Fraunces', serif; font-size:21px; color:var(--acento);
}
.ficha-cabeza h1{
  font-family:'Fraunces', serif; font-weight:400;
  font-size:clamp(25px, 5vw, 34px); line-height:1.12;
}
.ficha-marca{font-size:12px; color:var(--text-faint); margin:4px 0 8px;}
.ficha-promo{margin-bottom:20px;}

.ficha-acciones{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px;}

.ficha-bloque{
  padding:20px 0; border-top:1px solid var(--line);
}
.ficha-bloque h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:12px;
}
.ficha-bloque p{font-size:14px; line-height:1.6; color:var(--text-dim);}
.ficha-tenue{color:var(--text-faint) !important; font-size:12.5px !important;}

.ficha-horario{width:100%; border-collapse:collapse;}
.ficha-horario th{
  text-align:left; font-weight:400; font-size:13px; color:var(--text-faint);
  padding:6px 0; width:120px;
}
.ficha-horario td{font-size:13px; color:var(--text-dim); padding:6px 0;}

.ficha-contacto{display:flex; gap:16px; flex-wrap:wrap;}
.ficha-contacto a{font-size:13px; color:var(--amber); text-decoration:none;}

.ficha-hermanas{display:flex; flex-direction:column; gap:9px;}
.ficha-hermanas a{
  display:block; padding:13px 15px; border-radius:13px; text-decoration:none;
  background:var(--bg-elev); border:1px solid var(--line);
}
.ficha-hermanas a:hover{border-color:var(--acento);}
.ficha-hermanas strong{display:block; font-size:13.5px;}
.ficha-hermanas em{font-style:normal; font-size:11.5px; color:var(--text-faint);}

.ficha-invitacion{
  margin-top:12px; padding:20px; border-radius:16px; border-top:none;
  background:var(--bg-elev); border:1px solid var(--line);
}
.ficha-invitacion p{margin-bottom:14px;}
.ficha-invitacion strong{color:var(--text);}

/* ── Eventos ────────────────────────────────────────────────── */
/* Los chips de esta página son enlaces y no casillas, porque cambian
   la vista completa. Se ven igual a propósito: para quien los usa es
   el mismo gesto. */
.dir-chip.on span{
  border-color:var(--amber); background:var(--amber-soft); color:var(--amber); font-weight:600;
}
a.dir-chip{text-decoration:none;}

.link{color:var(--amber); font-size:12.5px; text-decoration:none;}
.link:hover{text-decoration:underline;}

/* En la ficha: sólo qué y cuándo. Quien está leyendo la ficha ya eligió
   el lugar; lo único que le falta es la fecha. */
.ficha-eventos{list-style:none; margin:0 0 14px; padding:0;}
.ficha-eventos li{
  display:flex; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.ficha-eventos li:last-child{border-bottom:0;}
/* La agenda de la ciudad */
.agenda{max-width:760px; margin:0 auto; padding:0 22px;}
.agenda-dia{
  font-family:'Fraunces', serif; font-size:15px; font-weight:600;
  color:var(--text-dim); margin:26px 0 12px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.agenda-item{
  display:flex; gap:0; flex-direction:column; overflow:hidden;
  background:var(--bg-elev); border:1px solid var(--line);
  border-left:3px solid var(--acento, var(--line-fuerte));
  border-radius:16px; margin-bottom:12px;
}
.agenda-portada{width:100%; height:170px; object-fit:cover; display:block;}
.agenda-cuerpo{padding:14px 17px 15px;}
.agenda-cabeza{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.agenda-tipo{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--acento, var(--amber));
}
.agenda-hora{font-size:11.5px; color:var(--text-faint);}
.agenda-item h3{font-family:'Fraunces', serif; font-size:17px; margin:0 0 4px;}
.agenda-donde{font-size:12.5px; color:var(--text-dim); margin:0 0 8px;}
.agenda-donde a{color:var(--text); text-decoration:none; font-weight:600;}
.agenda-donde a:hover{color:var(--acento, var(--amber));}
.agenda-texto{font-size:13px; color:var(--text-dim); line-height:1.6; margin:0 0 10px;}
.agenda-pie{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.agenda-costo{
  font-size:11px; padding:3px 9px; border-radius:20px;
  border:1px solid var(--line); color:var(--text-faint);
}

@media (min-width: 640px){
  .agenda-item{flex-direction:row;}
  .agenda-portada{width:190px; height:auto; min-height:150px; flex:0 0 auto;}
  .agenda-cuerpo{flex:1;}
}

/* ── Barril de la ciudad ────────────────────────────────────── */
.barra-lugar{
  background:var(--bg-elev); border:1px solid var(--line);
  border-left:3px solid var(--acento, var(--line-fuerte));
  border-radius:16px; padding:16px 18px; margin-bottom:14px;
}
.barra-lugar-cabeza{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:12px;}
.barra-lugar-cabeza img,
.barra-inicial{
  width:42px; height:42px; border-radius:11px; flex:0 0 auto; object-fit:cover;
  background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:14px; color:var(--acento, var(--amber));
}
.barra-lugar-cabeza > div{flex:1; min-width:150px;}
.barra-lugar-cabeza h2{font-family:'Fraunces', serif; font-size:17px; font-weight:500;}
.barra-lugar-cabeza h2 a{text-decoration:none;}
.barra-lugar-cabeza h2 a:hover{color:var(--acento, var(--amber));}

.barra-lista{list-style:none; margin:0; padding:0;}
.barra-lista li{
  display:flex; align-items:center; gap:13px;
  padding:9px 0; border-top:1px solid var(--line);
}
/* El número del grifo con el color del líquido: de un vistazo se ve si
   la barra trae puras claras o si hay algo oscuro puesto. */
.barra-grifo{
  flex:0 0 auto; width:27px; height:27px; border-radius:50%;
  background:var(--liquido); color:#1a1108;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.barra-cerveza{flex:1; min-width:0;}
.barra-cerveza strong{display:block; font-size:14px; font-weight:600;}
.barra-cerveza em{font-style:normal; font-size:11.5px; color:var(--text-faint);}
.barra-precio{flex:0 0 auto; font-size:13px; color:var(--text-dim); font-weight:600;}

.dir-atajos{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px;}
.dir-atajos a{
  padding:9px 16px; border-radius:20px; text-decoration:none;
  border:1px solid var(--line-fuerte); color:var(--text-dim);
  font-size:12.5px; font-weight:600;
}
.dir-atajos a:hover{border-color:var(--amber); color:var(--amber);}

/* ── Horario en la tarjeta ──────────────────────────────────── */
/* La semana agrupada. Se pone debajo de la línea de hoy porque la
   pregunta de quien está viendo el directorio es «¿abren ahora?», y la
   semana completa es la segunda pregunta, no la primera. */
.dir-semana{list-style:none; margin:7px 0 0; padding:0;}
.dir-semana li{
  display:flex; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--text-faint); line-height:1.75;
}
.dir-semana span{font-weight:600;}
.dir-semana em{font-style:normal;}

/* ── Cerca de mí ────────────────────────────────────────────── */
.dir-cerca-caja{max-width:1040px; margin:0 auto 18px; padding:0 22px;}
.dir-chip-cerca{
  display:inline-block; cursor:pointer;
  border:0; background:transparent; padding:0; font-family:inherit;
}
/* Sin esta línea el `display` de arriba le gana a `[hidden]` y el botón
   se ve incluso donde la ubicación no funciona: un botón que al tocarlo
   no hace nada es peor que no tenerlo. */
.dir-chip-cerca[hidden]{display:none;}
.dir-chip-cerca span{
  display:inline-block; padding:9px 16px 9px 32px; border-radius:20px;
  border:1px solid var(--line-fuerte); background:var(--bg-elev);
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  position:relative; transition:border-color .16s, color .16s, background .16s;
}
/* La mira del alfiler, dibujada con dos círculos: un ícono suelto sería
   otra petición al servidor por 300 bytes. */
.dir-chip-cerca span::before{
  content:''; position:absolute; left:14px; top:50%; margin-top:-4px;
  width:8px; height:8px; border-radius:50%;
  border:2px solid currentColor;
}
.dir-chip-cerca:hover span{border-color:var(--amber); color:var(--amber);}
.dir-chip-cerca.on span{
  border-color:var(--amber); background:var(--amber-soft); color:var(--amber);
}
.dir-chip-cerca.buscando span{opacity:.6;}
/* Late mientras busca: es la única señal de que algo está pasando en los
   segundos que el navegador tarda en resolver la posición. */
.dir-chip-cerca.buscando span::before{animation:latido 1s ease-in-out infinite;}
@keyframes latido{
  0%, 100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.5); opacity:.45;}
}
.dir-cerca-aviso{margin-top:9px; font-size:12px; color:var(--text-faint); line-height:1.6;}

.dir-distancia{
  font-size:12.5px; font-weight:600; color:var(--amber); margin-bottom:4px;
}

/* El punto del visitante en el mapa. Azul y no ámbar: en un mapa el azul
   es «yo» desde que existen los mapas en pantalla, y usar el color de la
   marca lo haría parecer una cervecería más. */
.mapa-yo{
  position:absolute; z-index:2; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:#5b9dd9; border:2px solid #eaf4ff;
  box-shadow:0 0 0 6px rgba(91,157,217,.22);
}
.mapa-yo::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(91,157,217,.5);
  animation:pulso-yo 2.4s ease-out infinite;
}
@keyframes pulso-yo{
  0%{transform:scale(.7); opacity:.9;}
  100%{transform:scale(2.6); opacity:0;}
}

/* ── Ficha de un sitio ─────────────────────────────────────────── */
.ficha-tagline{font-size:15px; line-height:1.6; color:var(--text-dim); margin:0 0 22px;}
.ficha-nota{font-size:12px; color:var(--text-faint); margin-top:10px;}

.sede-barril, .sede-eventos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.sede-barril li, .sede-eventos li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding-bottom:9px; border-bottom:1px solid var(--line);
  font-size:14px;
}
.sede-barril li:last-child, .sede-eventos li:last-child{border-bottom:0; padding-bottom:0;}
.sede-barril em, .sede-eventos span{font-style:normal; font-size:12px; color:var(--text-faint);}
.sede-evento-cuando{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--amber); min-width:88px;
}

/* Una tarjeta suelta que vive dentro de un edificio lo dice arriba de la
   dirección: sin eso muestra la calle del sitio sin nombrarlo. */
.dir-en-sitio{font-size:12.5px; color:var(--amber); margin:0 0 2px;}
.dir-en-sitio a{color:inherit; font-weight:600;}

/* ── Otras opciones: lo que no pasó el filtro ──────────────────── */
/* Va apagado a propósito. Tiene que leerse como «además hay esto», no
   como parte del resultado: si se viera igual, el filtro no se notaría. */
.dir-otras{max-width:1040px; margin:34px auto 0; padding:0 22px;}
.dir-otras-top{
  padding-top:22px; border-top:1px solid var(--line); margin-bottom:16px;
}
.dir-otras-top h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:19px; margin:0 0 4px;
  color:var(--text-dim);
}
.dir-otras-top p{font-size:12.5px; color:var(--text-faint); margin:0;}
.dir-otras-top a{color:var(--amber); text-decoration:none;}
.dir-otras-top a:hover{text-decoration:underline;}
.dir-otras .dir-lista{padding:0; opacity:.72; transition:opacity .18s;}
.dir-otras .dir-lista:hover{opacity:1;}

/* ── Premios ───────────────────────────────────────────────────── */
/* En la tarjeta: la estrella con el número, y nada más. El detalle
   —concurso, año, categoría— vive en la ficha, que es donde cabe. */
.dir-premios{
  display:inline-flex; align-items:center; gap:3px;
  margin-top:5px; padding:2px 8px 2px 6px; border-radius:20px;
  font-size:11px; font-weight:700; text-decoration:none;
  color:#e0bb6d; background:rgba(212,164,65,.12);
  border:1px solid rgba(212,164,65,.28);
}
.dir-premios:hover{background:rgba(212,164,65,.2);}

.ficha-premios{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.ficha-premios li{display:flex; align-items:flex-start; gap:11px;}
.medalla-mini{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color:var(--medalla, #8b8279);
  background:color-mix(in srgb, var(--medalla, #8b8279) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--medalla, #8b8279) 38%, transparent);
}
.ficha-premio-txt{display:flex; flex-direction:column; gap:2px;}
.ficha-premio-txt strong{font-size:14px; font-weight:600;}
.ficha-premio-txt em{font-style:normal; font-size:12px; color:var(--text-faint);}

/* ── Fotos de la ficha ─────────────────────────────────────────── */
/* Tres caben en fila en compu y se deslizan de lado en el celular, sin
   carrusel ni librería: `scroll-snap` hace el trabajo. */
.ficha-fotos{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 1fr);
  gap:10px; margin:0 0 26px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.ficha-fotos::-webkit-scrollbar{display:none;}
.ficha-fotos img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:14px; border:1px solid var(--line);
  scroll-snap-align:start;
}