/* Páginas públicas de contenido: /o/<id>, /b/<id> y /agenda/<ciudad>.
   Misma identidad que el resto del sitio; aquí manda el contenido, no el
   escaparate, así que menos aire y más densidad que en la portada. */

main.pub { padding: 34px 20px 72px; }
.pub a { color: var(--ink); }
.pub .muted { color: var(--ink-2); }
.pub .crumbs { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.pub .crumbs a { color: var(--ink-2); font-weight: 600; }

/* ── Cabecera de ficha ─────────────────────────────────────────────────── */
.pub h1 { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.08; font-weight: 800; margin-bottom: 10px; }
.pub h2 { font-size: 20px; font-weight: 800; margin: 34px 0 14px; font-family: var(--display); }
.pub p { margin: 0 0 14px; }

.detail { display: grid; gap: 34px; align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "head side" "body side"; }
.d-head { grid-area: head; min-width: 0; }
.d-body { grid-area: body; min-width: 0; }
.side { grid-area: side; }
/* En el móvil el botón sube: lo primero que quieres saber es qué es y cuándo,
   y lo segundo cómo conseguirlo. Leer el texto entero antes de ver el botón
   sobra. */
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; gap: 22px; grid-template-areas: "head" "side" "body"; }
}

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink); }
/* Sin semáforo (GLOSARIO › Aspecto): «Tendencia», «Comprobado por Klendar»…
   en tinta, como la app. */
.badge.hot { background: var(--elevated); color: var(--ink); }
.badge.off { background: rgba(120,120,120,.18); color: var(--ink-2); }
.badge.ok { color: var(--ink); }

.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.price b { font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.price s { color: var(--ink-2); font-size: 18px; }
.price .rule { font-size: 12px; color: var(--ink-2); flex-basis: 100%; }

/* ── Tarjeta lateral (cuándo, dónde, abrir en la app) ──────────────────── */
.side { position: sticky; top: 84px; background: var(--elevated); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
@media (max-width: 860px) { .side { position: static; } }
.side dl { margin: 0 0 16px; display: grid; gap: 12px; }
.side dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.side dd { margin: 2px 0 0; font-weight: 600; }
.side .pill.big { display: block; text-align: center; margin: 0 0 8px; }
.side .note { font-size: 13px; color: var(--ink-2); margin: 0; }

.pill.big { padding: 14px 20px; font-size: 16px; font-weight: 800; }

/* ── Listados de publicaciones ─────────────────────────────────────────── */
.olist { display: grid; gap: 10px; margin: 0 0 10px; }
.pub .ocard { color: var(--ink); }
.ocard { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 20px;
  background: var(--elevated); border: 1px solid var(--glass-border); color: var(--ink); }
.ocard:hover { text-decoration: none; border-color: var(--ink-2); }
.ocard img, .ocard .ph { width: 96px; height: 78px; border-radius: 14px; object-fit: cover; flex: none;
  background: var(--glass); display: grid; place-items: center; color: var(--ink-2); }
.ocard-body { display: grid; gap: 3px; min-width: 0; }
.ocard-body b { font-size: 16px; font-weight: 700; }
.ocard-body .muted { font-size: 13px; }
.ocard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.tag { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 12px; }

.daygroup { margin: 0 0 26px; padding: 0; }
/* <h2> por el orden de títulos (debajo del <h1> de la página), con el
   tamaño de antes. */
.daygroup > h2, .daygroup > h3 { font-family: var(--display); font-size: 15px; font-weight: 800; line-height: inherit;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--glass-border); }
/* «jueves, 24 de septiembre» -> «Jueves, 24 de septiembre»: solo la primera. */
.daygroup > h2::first-letter, .daygroup > h3::first-letter { text-transform: uppercase; }

.cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.cities a { padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--ink); font-weight: 700; font-size: 14px; }
.cities a:hover { text-decoration: none; border-color: var(--ink-2); }

/* ── Explorar: buscador, filtros y paginación ─────────────────────────── */
.finder { display: flex; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap; }
.finder input[type=search] { flex: 1 1 160px; min-width: 0; padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass); color: inherit; font: inherit; }
.finder input[type=search]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.filters { margin: 10px 0 4px; }
.frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.flabel { font-size: 13px; color: var(--ink-2); margin-right: 2px; }
.chip { padding: 7px 13px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border);
  font-size: 14px; font-weight: 600; color: inherit; }
.chip:hover { text-decoration: none; border-color: var(--ink-2); }
.chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip.on .muted { color: inherit; opacity: .75; }
/* En el móvil cada fila de filtros va en una línea que se desliza de lado
   (como en la app): si no, los filtros ocupaban la pantalla entera y los
   resultados empezaban muy abajo. */
@media (max-width: 640px) {
  .filters .frow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filters .frow::-webkit-scrollbar { display: none; }
  .filters .frow > * { flex: none; white-space: nowrap; }
}
.pager { display: flex; gap: 10px; align-items: center; margin: 18px 0; flex-wrap: wrap; }
/* Final de la lista de Explorar y última pantalla de Descubre (la tarjeta
   final de Descubre en la app): ocupa toda la fila y va centrado, como una
   pantalla vacía. Botones uno debajo de otro y del ancho del más largo. */
.fin { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 26px 0 10px; padding: 30px 20px 26px;
  border-radius: var(--radius); background: var(--elevated); border: 1px solid var(--glass-border); }
.fin h2 { margin: 14px 0 6px; font-size: 22px; line-height: 1.25; }
.fin > p { margin: 0; max-width: 46ch; }
.fin-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink); }
.fin-botones { display: grid; grid-template-columns: fit-content(360px); justify-content: center; gap: 10px; margin-top: 20px; max-width: 100%; }
.fin-botones .pill { justify-content: center; text-align: center; margin: 0; }
.fin-sugiere { margin: 16px 0 0; text-align: center; font-weight: 700; }
.fin-sugiere a { text-decoration: underline; text-underline-offset: 3px; }
/* «Avísame si hay algo de «karaoke»» (Explorar, tanda D): una fila como en la app. */
.avisame-palabra { margin: 18px auto 0; max-width: 560px; }
.avisame-palabra a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--glass-border); border-radius: 22px;
  background: var(--glass); color: inherit; text-decoration: none; }
.avisame-palabra a:hover { border-color: var(--ink); }
.avisame-palabra span { display: flex; flex-direction: column; min-width: 0; }
.avisame-palabra small { color: var(--ink-2); font-weight: 400; }
.avisame-palabra[aria-busy=true] a { opacity: .6; pointer-events: none; }
.fin-h { margin: 22px 0 10px; font-size: 18px; }
/* La carta escrita. */
/* Sin el relleno de las <section> de la portada (site.css: 72px arriba y abajo). */
.menu section { margin: 0 0 18px; padding: 0; }
.menu h3 { font-size: 17px; margin: 0 0 6px; }
.menu ul { list-style: none; padding: 0; margin: 0; }
/* Foto (si la hay) · nombre y detalles · precio, alineados arriba como en la app. */
.menu li { display: flex; gap: 12px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.menu li > .plato { flex: 1; min-width: 0; }
.menu li small { display: block; color: var(--ink-2); font-size: 13px; }
.menu li small.alg { font-size: 12px; } /* sin opacidad: con ella no llegaba a 4,5:1 */
.menu li .dish { flex: none; display: block; width: 56px; height: 56px; border-radius: 10px; }
.menu li .dish img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.menu .price { font-weight: 700; white-space: nowrap; }
.empty { padding: 28px; border-radius: var(--radius); border: 1px dashed var(--glass-border); color: var(--ink-2); text-align: center; }

.info { display: grid; gap: 10px; margin: 0 0 18px; font-size: 15px; }
.info div { display: flex; gap: 10px; }
.info span:first-child { width: 22px; flex: none; color: var(--ink-2); display: inline-flex; padding-top: 1px; }

footer.pub-foot { border-top: 1px solid var(--glass-border); padding: 22px 0; font-size: 13px; color: var(--ink-2); }
footer.pub-foot a { color: var(--ink-2); }

/* Guardar y abrir en la app, debajo del botón grande. */
.acciones { margin: 10px 0 0; }

/* ── Ficha del negocio: horario, carta en fotos, novedades y reseñas ─────── */
.side-h { font-size: 16px; margin: 20px 0 8px; }
.horario { width: 100%; border-collapse: collapse; font-size: 14px; }
.horario th, .horario td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--glass-border); font-weight: 400; vertical-align: top; }
.horario td { text-align: right; color: var(--ink-2); }
.horario tr.hoy th, .horario tr.hoy td { font-weight: 800; color: var(--ink); }
.carta-fotos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 10px 0 18px; align-items: start; }
.carta-foto { width: 100%; aspect-ratio: 3/4; border-radius: 14px; }
.novedades { display: grid; gap: 12px; }
.novedades article, .resenas article { border: 1px solid var(--glass-border); background: var(--elevated); border-radius: 18px; padding: 14px 16px; }
.novedades article p { margin: 0 0 8px; }
.nov-media { width: 100%; max-height: 420px; aspect-ratio: 3 / 2; border-radius: 14px; margin-top: 8px; }
.resenas { display: grid; gap: 12px; margin-top: 12px; }
.resenas header { display: flex; align-items: center; gap: 10px; }
.resenas header > span:not(.stars):not(.av) { display: grid; flex: 1; min-width: 0; }
.resenas .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  background: var(--soft); font-weight: 800; flex: none; }
.resenas article > p { margin: 10px 0 0; }
/* La respuesta del negocio, bajo la reseña (como en la app). */
.resenas .respuesta { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.resenas .respuesta header { gap: 6px; font-size: 14px; }
.resenas .respuesta header .ic { color: var(--ink-2); flex: none; }
.resenas .respuesta header b { flex: 1; min-width: 0; }
.resenas .respuesta p { margin: 6px 0 0; }
/* Días cerrados: «Cerrado hasta el 15 de agosto · Vacaciones». */
.cierre { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 16px;
  border: 1px solid var(--glass-border); background: var(--elevated); }
.cierre .ic { flex: none; color: var(--ink-2); }
.cierre.ahora .ic { color: var(--ink); }
/* Lo que la ficha del negocio no enseña sin sesión: exclusivas para favoritos
   o clientes (cuántas) y el regalo de cumpleaños. */
.exclusiva { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 16px;
  border: 1px solid var(--glass-border); background: var(--elevated); color: var(--ink-2); }
.exclusiva .ic { flex: none; color: var(--ink); }
.stars { color: var(--ink); letter-spacing: 1px; white-space: nowrap; }
/* Como la app: llenas en tinta, vacías en el gris secundario al 60 %. */
.stars span { color: var(--ink-2); opacity: .6; }
.denuncia, .denuncia-pie a { font-size: 13px; color: var(--ink-2); }
.resenas .denuncia, .novedades .denuncia { display: inline-block; margin-top: 8px; }
.denuncia-pie { margin-top: 28px; }

/* Iconos dentro de los botones: el marcador de Planes y el corazón de Favoritos, como en la app. */
.pill .ic { vertical-align: -3px; margin-right: 4px; }

/* Explorar: el mapa */
.mapa-explorar { height: min(70vh, 560px); border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-border); margin-top: 8px; }
.chincheta { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: block;
  background: var(--ink); border: 2px solid var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.mapa-explorar .mapboxgl-popup-content { background: var(--elevated); color: var(--ink); border-radius: 14px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--glass-border); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mapa-explorar .mapboxgl-popup-tip { display: none; }
.pop { display: grid; gap: 2px; color: var(--ink); text-decoration: none; max-width: 220px; }
.pop span { color: var(--ink-2); font-size: 13px; }
.pop .pop-ahora { color: var(--ink); font-size: 12px; font-weight: 700; }
button.chip { font-family: inherit; cursor: pointer; }

/* ── Planes con amigos ────────────────────────────────────────────────── */
/* Quién va: hasta tres avatares de 24 px solapados, con borde del color del
   fondo en el que están (la ficha, una tarjeta, la tarjeta lateral). */
.av-pila { display: inline-flex; flex: none; --av-relleno: #E4E4E4; }
@media (prefers-color-scheme: dark) { .av-pila { --av-relleno: #2E2E2E; } }
.av-pila .av-amigo { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  box-sizing: border-box; border: 2px solid var(--av-borde, var(--surface)); background: var(--av-relleno);
  color: var(--ink); font-size: 10px; font-weight: 800; line-height: 1; flex: none; }
.av-pila .av-amigo + .av-amigo { margin-left: -8px; }
/* La primera encima, como en la app. */
.av-pila .av-amigo { position: relative; }
.av-pila .av-amigo:nth-child(1) { z-index: 3; }
.av-pila .av-amigo:nth-child(2) { z-index: 2; }
.av-pila .av-amigo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quien-va { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); margin: 12px 0 0; min-width: 0; }
.quien-va > span:last-child { min-width: 0; }
.ocard, .side, .invita { --av-borde: var(--elevated); }
.ocard .quien-va { font-size: 13px; margin: 2px 0 0; }
/* «Voy» en activo: «Vas», relleno de tinta (como los interruptores). */
.pill.on { background: var(--ink); color: var(--surface); border-color: transparent; }
.amigos-acc { display: flex; flex-wrap: wrap; gap: 8px; }
/* «Ana te invita a este plan», arriba de la tarjeta lateral. */
.invita { border: 1px solid var(--glass-border); background: var(--elevated); border-radius: 22px; padding: 14px 16px; margin: 0 0 16px;
  box-shadow: var(--shadow); }
.side .invita { background: var(--soft); box-shadow: none; }
.invita-cab { display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1.35; }
.invita-acc { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
.invita-acc .pill { flex: 1 1 110px; justify-content: center; padding: 10px 16px; }
.invita-acc .pill:disabled { opacity: .6; cursor: progress; }
.invita-estado { font-weight: 600; color: var(--ink-2); }
.invita .linkbtn { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  font: inherit; font-weight: 700; cursor: pointer; }
/* El aviso de abajo (páginas públicas). */
.am-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--surface);
  padding: 12px 18px; border-radius: 14px; font-weight: 600; max-width: calc(100vw - 32px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.am-toast.bad { background: #FF5C5C; color: #fff; }
/* /amigo/<código>: la invitación a ser amigos, sin decir de quién. */
.amigo-pub { max-width: 520px; margin: 12px auto 0; text-align: center; }
.pub .amigo-pub-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 12px auto 18px;
  background: var(--soft); color: var(--ink); }
.amigo-pub .acciones { display: grid; gap: 10px; margin-top: 22px; }
.amigo-pub .pill.big { justify-content: center; }
/* Los botones de verdad, con la letra de la web (no la del sistema). */
button.pill { font-family: inherit; cursor: pointer; }

/* «Abierto · cierra a las 21:00» encima del horario (lo pinta horario.js).
   Como la app, sin semáforo: abierto o a punto de cambiar, en tinta; cerrado,
   en gris. Lo dice el texto (GLOSARIO › Aspecto). */
.estado-hoy { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.estado-hoy b { font-weight: 700; }
.estado-hoy.abierto b, .estado-hoy.pronto b { color: var(--ink); }
.estado-hoy.cerrado b { color: var(--ink-2); }

/* El festivo de esta semana bajo «Horario»: «Abre el festivo del 1 de
   noviembre (10:00–14:00)»; sin contestar, en tinta (como la app). */
.festivo { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.festivo .ic { flex: none; margin-top: 1px; }
.festivo.sin-confirmar { color: var(--ink); }
/* «Qué pedir aquí»: foto (o icono) · nombre y su línea. */
.que-pedir { list-style: none; padding: 0; margin: 0 0 18px; }
.que-pedir li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.que-pedir li > span:last-child { flex: 1; min-width: 0; }
.que-pedir li small { display: block; color: var(--ink-2); font-size: 14px; }
.que-pedir .dish { flex: none; display: block; width: 64px; height: 64px; border-radius: 12px; }
.que-pedir .dish img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.que-pedir-ic { flex: none; color: var(--ink-2); padding-top: 1px; }
/* Momentos del día en «El sitio»: «Vermut · Tardeo · Copas». */
.momentos { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-weight: 600; }
.momentos .ic { flex: none; color: var(--ink-2); margin-top: 1px; }

/* ── La acción principal, siempre a mano en el móvil (/assets/barra.js) ── */
.barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--elevated); border-top: 1px solid var(--glass-border); box-shadow: 0 -10px 30px -20px rgba(0,0,0,.4); }
.barra-accion .pill { width: 100%; justify-content: center; margin: 0; }
body.con-barra-accion { padding-bottom: 76px; }
@media (min-width: 861px) { .barra-accion { display: none; } }

/* Reseñas: «Cliente verificado» (se explica al tocarlo) y el filtro. */
.filtro-resenas { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.resenas details.verificado { margin-top: 6px; font-size: 14px; }
.resenas details.verificado summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 700; list-style: none; min-height: 32px; }
.resenas details.verificado summary::-webkit-details-marker { display: none; }
.resenas details.verificado summary::marker { content: ''; }
.resenas details.verificado summary .ic { color: rgb(60, 180, 120); flex: none; }
.resenas details.verificado summary::after { content: 'ⓘ'; color: var(--ink-2); font-weight: 400; }
.resenas details.verificado p { margin: 4px 0 0; color: var(--ink-2); }

/* ══ La web como la app (2026-10-02) ══════════════════════════════════════ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Las páginas con rejilla de tarjetas o calendario usan más ancho (4
   columnas en una pantalla grande). */
main.pub:has(.tjs, .calendario, .exp-cab) { max-width: 1240px; }

/* ── Tarjeta de publicación y calendario: assets/tarjeta.css ───────────── */

/* ── Descubre y Explorar: cabecera, buscador y barra de filtros ─────────── */
.exp-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 16px; }
.pub .exp-cab h1 { margin: 0 0 4px; }
.pub .exp-lead { margin: 0; max-width: 560px; font-size: 15px; }
.vistas { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--soft); border: 1px solid var(--glass-border); }
.pub .vista { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; min-height: 40px; border-radius: 999px;
  font-weight: 700; font-size: 14px; color: var(--ink-2); }
.pub .vista:hover { color: var(--ink); text-decoration: none; }
.pub .vista.on { background: var(--ink); color: var(--surface); }
@media (max-width: 640px) {
  .pub .exp-lead { display: none; }
  .vistas { width: 100%; }
  .pub .vista { flex: 1; padding: 8px 10px; }
}
.buscador { display: flex; gap: 8px; margin: 0 0 12px; }
.buscador-campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 48px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--elevated); color: var(--ink-2); cursor: text; }
.buscador-campo:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }
.buscador input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.buscador input::placeholder { color: var(--ink-2); opacity: 1; }
.buscador .pill { min-height: 48px; padding: 0 20px; }
@media (max-width: 480px) { .buscador .pill { padding: 0 16px; } }

.barra-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
@media (max-width: 640px) {
  /* Una sola fila que se desliza de lado, como en la app. */
  .barra-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 14px; padding: 2px 20px; }
  .barra-filtros::-webkit-scrollbar { display: none; }
}
.barra-filtros .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; white-space: nowrap; flex: none; }
summary.chip { cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; }
summary.chip::-webkit-details-marker { display: none; }
summary.chip::marker { content: ''; }
.chip .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 800; }
.desplegable, .hoja { position: relative; flex: none; }
/* Fondo para cerrar al pulsar fuera (también sin JavaScript: pulsar el fondo
   es pulsar el <summary>). */
details.desplegable[open] > summary::after, details.hoja[open] > summary::after {
  content: ""; position: fixed; inset: 0; z-index: 40; cursor: default; }
details.hoja[open] > summary::after { background: rgba(0,0,0,.5); }
.menu-d { position: absolute; top: calc(100% + 6px); left: 0; z-index: 42; min-width: 230px; max-height: min(60vh, 440px); overflow: auto;
  padding: 6px; border-radius: 18px; background: var(--elevated); border: 1px solid var(--glass-border); box-shadow: var(--shadow); display: grid; gap: 2px; }
.pub .menu-d-t { margin: 6px 10px 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pub .op { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; min-height: 44px; border: 0; border-radius: 12px; background: none;
  color: var(--ink); font: inherit; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; }
.pub .op:hover { background: var(--soft); text-decoration: none; }
.pub .op.on { background: var(--ink); color: var(--surface); }
@media (max-width: 640px) {
  /* En el móvil, los desplegables suben desde abajo, como las hojas de la app. */
  .menu-d { position: fixed; top: auto; left: 0; right: 0; bottom: 0; min-width: 0; max-height: 72vh; border-radius: 26px 26px 0 0;
    padding: 10px 12px calc(18px + env(safe-area-inset-bottom)); border-bottom: 0; }
  details.desplegable[open] > summary::after { background: rgba(0,0,0,.5); }
}

/* La hoja de filtros: diálogo centrado (máx. 560) en el escritorio, hoja de
   abajo en el móvil. Un formulario GET: va sin JavaScript. */
.hoja-cuerpo { position: fixed; z-index: 42; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 780px); display: flex; flex-direction: column; border-radius: 28px; background: var(--elevated);
  border: 1px solid var(--glass-border); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); margin: 0; }
@media (max-width: 640px) {
  .hoja-cuerpo { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-height: 88vh; border-radius: 28px 28px 0 0; border-bottom: 0; }
}
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.pub .hoja-cab h2 { margin: 0; font-size: 22px; }
.hoja-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--soft); }
.hoja-x:hover { text-decoration: none; filter: brightness(1.1); }
.hoja-scroll { overflow-y: auto; padding: 4px 20px 8px; overscroll-behavior: contain; }
.hoja fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.hoja legend { font-weight: 800; font-size: 14px; margin: 0 0 8px; padding: 0; }
.ops { display: flex; flex-wrap: wrap; gap: 8px; }
.ops + .ops { margin-top: 8px; }
.op-r { position: relative; display: inline-flex; }
.op-r input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.op-r span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); font-weight: 600; font-size: 14px; cursor: pointer; }
.op-r input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.op-r input[type=checkbox]:checked + span::before { content: '✓'; margin-right: 6px; font-weight: 800; }
.op-r input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.hoja-pie { display: flex; gap: 10px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-border); }
.hoja-pie .pill { flex: 1; justify-content: center; text-align: center; }
body.con-hoja { overflow: hidden; }

.cerca-aviso { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px 12px 16px; border-radius: 20px;
  background: var(--soft); border: 1px solid var(--glass-border); margin: 0 0 16px; font-weight: 600; }
.cerca-aviso > span { flex: 1 1 200px; }
.cerca-aviso .pill { padding: 10px 18px; }
.aviso-error { color: var(--ink); background: var(--soft); border-radius: 14px; padding: 10px 14px; }
.resumen { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.pub .resumen-n { margin: 0; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); }
.resumen a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }

/* El mapa: chinchetas en tinta (eventos) y coral (ofertas flash, son oferta),
   como el calendario. */
.chincheta.flash { background: var(--accent); }
.mapa-explorar.sin-mapa { height: auto; border: 0; }

/* El mapa con varios planes en el mismo sitio (assets/mapa.js, como la app):
   el sitio, con su logo y «3 planes»; los sitios cercanos, una burbuja con
   el total. En tinta (en oscuro, al revés): el coral es de las ofertas. */
/* El marcador del mapa (GLOSARIO «El mapa»), el mismo en Planes y Sitios y
   en la app: círculo de 30 px con borde blanco y sombra suave; el estado, en
   un anillo con los colores de la identidad (coral: tiene una oferta; tinta,
   blanco en oscuro: tiene planes; sin anillo: hoy nada);
   la cifra, en una insignia en la esquina; la burbuja de un grupo, el mismo
   círculo en tinta con el total. */
.marca { position: relative; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  transition: transform var(--mov-corto, 160ms) ease; }
.marca .mc-cara { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: #E9E9EC; color: #1C1C1E; border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.3); box-sizing: border-box; }
.marca .mc-cara img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity 200ms ease; }
.marca .mc-cara img.lista { opacity: 1; }
.marca .mc-tipo { position: absolute; right: -3px; bottom: -3px; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; color: #1C1C1E; border: 1.2px solid var(--ink); box-sizing: border-box; }
.marca .mc-tipo svg { width: 11px; height: 11px; }
/* El elegido (con su tarjeta abierta): de 36 a 48 px y con el anillo marcado. */
.marca.elegida { transform: scale(1.333); z-index: 2; }
.marca.elegida .mc-cara { box-shadow: inset 0 0 0 3.5px var(--ink), 0 2px 8px rgba(0,0,0,.35); }
.marca.elegida.anillo-oferta .mc-cara { box-shadow: inset 0 0 0 3.5px var(--accent), 0 2px 8px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .marca, .marca .mc-cara img { transition: none; } }
.marca.anillo-planes .mc-cara { box-shadow: inset 0 0 0 2.5px var(--ink), 0 1px 5px rgba(0,0,0,.3); }
.marca.anillo-oferta .mc-cara { box-shadow: inset 0 0 0 2.5px var(--accent), 0 1px 5px rgba(0,0,0,.3); }
.marca.anillo-planes .mc-cara img, .marca.anillo-oferta .mc-cara img { width: calc(100% - 5px); height: calc(100% - 5px); }
.marca .mc-n { position: absolute; top: -6px; left: 24px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--ink); color: var(--surface); border: 1.5px solid var(--surface); font-size: 11px; font-weight: 800; line-height: 15px; text-align: center; white-space: nowrap; }
.marca-nombre { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); max-width: 170px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--ink); pointer-events: none;
  text-shadow: 0 0 2px var(--surface), 0 0 3px var(--surface), 0 0 4px var(--surface); }
.grupo-marca { min-width: 36px; height: 36px; padding: 0 9px; box-sizing: border-box; border-radius: 999px; border: 2.5px solid #fff; background: var(--ink); color: var(--surface);
  font: 800 13px/1 var(--display, inherit); cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.3); }
.grupo-marca.anillo-oferta { box-shadow: inset 0 0 0 2.5px var(--accent), 0 1px 5px rgba(0,0,0,.3); }
.marca:focus-visible, .grupo-marca:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hoja-lugar { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; max-height: calc(100% - 64px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--elevated); color: var(--ink); border: 1px solid var(--glass-border); border-radius: 22px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (min-width: 720px) { .hoja-lugar { left: 12px; right: auto; bottom: 12px; width: 360px; } }
.pop-lugar { display: grid; gap: 10px; }
.pl-cab { display: flex; align-items: center; gap: 10px; }
.pl-cara { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--soft); color: var(--ink-2); }
.pl-cara img { width: 100%; height: 100%; object-fit: cover; }
.pl-tit { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pl-tit b { font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-tit span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pl-cerrar { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--soft); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; }
.pl-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pub .pl-btn, .pl-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.pl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-lista a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none; }
.pl-lista a:hover { background: var(--glass-border); }
.pl-lista b { font-size: 14px; line-height: 1.3; }
.pl-cuando { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pl-de { font-size: 12px; color: var(--ink-2); }
.pl-mas { justify-self: start; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-border); background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* Negocios (Tipo: Negocios y las páginas de categoría). */
.nlist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 0 0 14px; }
@media (max-width: 600px) { .nlist { grid-template-columns: 1fr; } }
.pub .ncard { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 22px; background: var(--elevated);
  border: 1px solid var(--glass-border); color: var(--ink); }
.ncard:hover { text-decoration: none; border-color: var(--ink-2); }
.ncard img, .ncard .ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft);
  display: grid; place-items: center; font: 800 24px/1 var(--display); color: var(--ink-2); }
.ncard-body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ncard-body b { font-size: 16px; }
.ncard-body .muted { font-size: 13px; }
.ncard-body .tag { justify-self: start; }
.ncard-ir { color: var(--ink-2); display: inline-flex; }


/* ── Más formas de explorar (los enlaces para Google, abajo) ──────────── */
.mas-formas { margin-top: 44px; padding: 22px 0 0; border-top: 1px solid var(--glass-border); }
.pub .mas-formas h2 { margin: 0 0 10px; font-size: 20px; }
.mf-fila { display: grid; grid-template-columns: 220px 1fr; gap: 6px 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--glass-border); }
.pub .mf-fila h3 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
.pub .mf-fila p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mf-fila a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .mf-fila { grid-template-columns: 1fr; } }
.pub .mf-cta { margin: 20px 0 0; }

/* ── Ficha de publicación y de negocio: la foto o el vídeo en grande ───── */
.ficha-media { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - 140px); border-radius: 28px; overflow: hidden;
  background: var(--soft); min-width: 0; }
.ficha-media--negocio { aspect-ratio: 21 / 9; max-height: 440px; }
/* La agenda pública sin foto: el color de su categoría (`arteFicha`). */
.ficha-arte .tj-arte svg { transform: translateY(-6%); }

.detail.ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; row-gap: 22px;
  grid-template-areas: "media head" "media side" "media body"; }
.detail.ficha.sin-media { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "head side" "body side"; }
.ficha > .ficha-media { grid-area: media; position: sticky; top: 84px; align-self: start; }
.ficha .side { position: static; }
.ficha .d-body > h2:first-child { margin-top: 6px; }
.detail.negocio { grid-template-areas: "media media" "head side" "body side"; }
.negocio > .ficha-media { grid-area: media; }
@media (max-width: 860px) {
  .detail.ficha, .detail.ficha.sin-media, .detail.negocio { grid-template-columns: 1fr; grid-template-areas: "media" "head" "side" "body"; row-gap: 20px; }
  /* De lado a lado, como la cabecera de la ficha en la app. */
  .ficha > .ficha-media, .negocio > .ficha-media { position: relative; top: auto; width: calc(100% + 40px); margin: 0 -20px; border-radius: 0; }
  .ficha-media { max-height: 74vh; }
  .ficha-media--negocio { aspect-ratio: 16 / 10; }
}
.ficha .badges { margin: 0 0 10px; }
.pub .ficha-negocio { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 8px 0; color: var(--ink); }
.ficha-negocio:hover { text-decoration: none; }
/* Sin `.fn-ph` (la inicial sin logo, también un span): con `flex: 1` se
   estiraba en un óvalo. */
.ficha-negocio > span:not(.fn-ph) { display: grid; flex: 1; min-width: 0; }
.ficha-negocio b { font-size: 17px; }
.ficha-negocio .muted { font-size: 14px; }
.ficha-negocio .tj-dist:not(:empty)::before { content: ' · '; }
.ficha-negocio img, .fn-ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft);
  display: grid; place-items: center; font: 800 18px/1 var(--display); color: var(--ink-2); }
.ficha-negocio > .ic { color: var(--ink-2); flex: none; }
.stars-mini { color: var(--ink); }
.pub .ficha-datos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.precio-pill { padding: 7px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 800 20px/1.2 var(--display); letter-spacing: -.01em; }
.ficha-datos s { font-size: 16px; }
.dato-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); font-weight: 700; font-size: 15px; }
.pub .rule { font-size: 12px; color: var(--ink-2); margin: 0 0 8px; }
.pub .info-linea { display: flex; gap: 10px; align-items: flex-start; }
.info-linea .ic { flex: none; margin-top: 3px; color: var(--ink-2); }

.neg-id { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 6px; }
.neg-id > div { min-width: 0; }
.pub .neg-id h1 { margin: 0 0 2px; }
.pub .neg-id p { margin: 0; }
.neg-id .tj-dist:not(:empty)::before { content: ' · '; }
/* El municipio, enlace a su página (/hoy/<slug>/): en el gris de la línea. */
.pub .neg-id .neg-muni { color: inherit; }
.neg-logo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; border: 4px solid var(--surface); background: var(--elevated);
  display: grid; place-items: center; font: 800 32px/1 var(--display); color: var(--ink-2); box-shadow: 0 8px 24px -10px rgba(0,0,0,.4); }
.pub .neg-dir { display: flex; align-items: center; gap: 10px; padding: 12px 0; margin: 4px 0 0; border-bottom: 1px solid var(--glass-border); color: var(--ink); font-weight: 600; }
.neg-dir:hover { text-decoration: none; }
.neg-dir > span { flex: 1; min-width: 0; }
.neg-dir .ic { color: var(--ink-2); flex: none; }
.pub .neg-nota { margin: 10px 0; font-weight: 700; }
.neg-secciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.neg-secciones .chip .muted { font-weight: 700; }
@media (max-width: 640px) {
  .neg-secciones { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 16px -20px 0; padding: 2px 20px; }
  .neg-secciones::-webkit-scrollbar { display: none; }
  /* Como las pestañas de la app: un degradado al borde dice que hay más. */
  .neg-secciones { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .neg-secciones .chip { flex: none; white-space: nowrap; }
}
.negocio .d-body > h2[id], .ficha .d-body > h2[id] { scroll-margin-top: 84px; }
.negocio .d-body .tjs { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 600px) { .negocio .d-body .tjs { grid-template-columns: 1fr; } }

/* El aviso de abajo, por encima de las pestañas del móvil. */
@media (max-width: 760px) { .am-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ══ Las cuatro pestañas con el mismo aspecto (2026-10-02) ═══════════════
   Descubre, Explorar, Planes y Cuenta («Tu cuenta», app/app.css): el mismo
   título de pantalla (el de la app: grande, Sora 800), a la misma altura y
   con la misma entradilla. */
.pub :is(.cab-pagina, .feed-lado) h1 { font-size: clamp(26px, 4vw, 32px); line-height: 1.12; letter-spacing: -.5px; margin: 14px 0 6px; }
.pub .exp-lead, .pub .feed-lado > p.muted { font-size: 15px; }

/* La barra de filtros, la de la app: Filtros · resumen · Zona · Estoy aquí ·
   (Van mis amigos) · Ordenar por. */
.chip .chip-t { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-filtros button.chip { font: inherit; font-size: 14px; font-weight: 600; color: inherit; cursor: pointer; }
.desplegable.orden .menu-d { min-width: 200px; }
.pub button.op { font-family: inherit; }
.hoja-cab { gap: 8px; }
.hoja-cab h2 { flex: 1; }
.pub .hoja-reset { font-weight: 700; padding: 10px 12px; border-radius: 12px; }
.pub .hoja-reset:hover { background: var(--soft); text-decoration: none; }
.pub .hoja-nota { margin: -2px 0 8px; font-size: 13px; color: var(--ink-2); }
.hoja fieldset.hoja-casillas { margin-top: 4px; }
.hoja-pie .pill { width: 100%; }
/* Explorar con una búsqueda: los negocios arriba, como la búsqueda de la app. */
.seccion-negocios { margin: 0 0 22px; padding: 0; }
.seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.pub .seccion-cab h2, .pub .seccion-t-pub { margin: 0 0 10px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.pub .seccion-cab h2 { margin: 0; }
.seccion-cab a { font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ══ Descubre: una publicación por pantalla ═════════════════════════════
   Como la pestaña 1 de la app: la foto o el vídeo de fondo y se pasa
   deslizando hacia abajo (scroll-snap). La cabecera y los filtros van encima:
   con foto, en blanco con un velo negro arriba (55 % detrás de la marca y
   hasta 0 a lo largo de los filtros) y píldoras de cristal oscuro; en la
   pantalla final, el tema (`data-cromo` lo pone /assets/tarjetas.js).
   En el escritorio, una columna de 9:16 en el centro y, a los lados, el
   título, la foto actual difuminada y las flechas.

   El scroll es del <body>, no del documento (como TikTok o Reels en la
   web): el documento no se mueve, así la barra del navegador del móvil no
   se esconde ni reaparece a mitad de gesto (con el alto en `dvh` cada
   tarjeta cambiaba de tamaño, todo saltaba y el snap se recolocaba) y el
   snap no pelea con ella. El alto de una pantalla, `--feed-vp`, es el del
   <body> (lo fija /assets/tarjetas.js; antes de que cargue, `svh`, que en
   un documento quieto es lo mismo). «Más formas de explorar» y el pie van
   dentro, después del final, como antes. Sin `:has()` (navegadores viejos)
   el documento hace scroll como siempre. */
html:has(body.pagina-feed) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.pagina-feed { --cab: 64px; --feed-w: 100vw; --feed-x: 0px; --feed-vp: 100vh; --feed-alto: var(--feed-vp); --feed-arriba: 116px;
  --feed-abajo: calc(78px + env(safe-area-inset-bottom)); --velo-arriba: var(--cab);
  box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
  /* Posicionado: lo `absolute` que cuelga del <body> (el aviso `.sr` de «Ver
     solo la foto», que tarjetas.js añade al final) queda dentro de su scroll.
     Sin esto se iba a y≈20 000 del documento, el documento pasaba a tener
     scroll y el `scrollIntoView` de las flechas lo movía 133 px: la
     cabecera de Klendar desaparecía y la tarjeta asomaba encima de la fila
     de filtros (Iván, 2026-10-21). */
  position: relative; }
@supports (height: 100svh) { body.pagina-feed { --feed-vp: 100svh; } }
/* El snap, cuando la página ya está entera (`feed-listo`, de tarjetas.js):
   puesto desde el principio, Safari toma como primera parada «Más formas» o
   el pie (aún no hay tarjetas debajo de las que tirar) y abre la página
   abajo del todo. Sin JavaScript, la lista se desliza libre. */
body.pagina-feed.feed-listo { scroll-snap-type: y mandatory; }
/* Con la hoja de filtros o el visor abiertos, lo de detrás no se mueve. */
body.pagina-feed.con-hoja, html.con-visor body.pagina-feed { overflow-y: hidden; }
.pagina-feed main.pub { max-width: none; padding: 0; }
.pagina-feed .feed { position: relative; width: var(--feed-w); margin: 0 auto; }
.pagina-feed .feed > .tj, .pagina-feed .feed > .feed-fin, .pagina-feed .feed > .feed-mas { scroll-snap-align: start; scroll-snap-stop: always; }
.pagina-feed .feed > .tj { display: block; }
.feed-mas { display: grid; place-items: center; min-height: 40vh; padding: calc(var(--feed-arriba) + 10px) 16px 20px; }
.feed > .feed-mas:last-child, .feed > .tj + .feed-mas { min-height: var(--feed-alto); }
.feed-fin { min-height: var(--feed-alto); display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--feed-arriba) + 8px) 16px calc(var(--feed-abajo) + 8px); background: var(--surface); }
.feed-fin .fin { margin: 0; border: 0; background: none; padding: 0 0 6px; }
.feed-fin .fin-h { margin: 22px 0 10px; }
.pagina-feed .mas-formas { scroll-snap-align: start; max-width: 1080px; margin: 0 auto; padding: calc(var(--cab) + 22px) 20px 0; }
body.pagina-feed > footer { scroll-snap-align: end; }
/* El título (para Google y el lector de pantalla): a la vista en el escritorio ancho. */
.pagina-feed .feed-lado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feed-teclas { font-size: 13px; color: var(--ink-2); }
.feed-fondo, .feed-nav, .feed-velo { display: none; }
@media (max-width: 760px) { .pagina-feed .feed-velo { display: block; } }

/* La barra de filtros: en el móvil, encima de la foto (como la app); en
   tablet y escritorio, en su fila encima de la columna, fuera de la imagen.
   Encima de la barra de pestañas (30) y de la cabecera (26): sus
   desplegables y la hoja de filtros salen de aquí y han de taparlo todo. */
.pagina-feed .feed-cab { position: fixed; z-index: 41; top: var(--cab); left: var(--feed-x); width: var(--feed-w); padding: 6px 0 4px; }
.pagina-feed header.top:has(#menu:checked) { z-index: 45; }
.pagina-feed .feed-cab .aviso-error { position: relative; margin: 6px 16px 0; }
body.pagina-feed[data-cromo="fuera"] .feed-cab { visibility: hidden; }

@media (max-width: 760px) {
  .feed-velo { position: fixed; z-index: 22; left: var(--feed-x); width: var(--feed-w); top: calc(var(--cab) - var(--velo-arriba)); height: calc(var(--velo-arriba) + 96px); pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.55) 0, rgba(0,0,0,.55) var(--velo-arriba), rgba(0,0,0,.464) calc(var(--velo-arriba) + 24px),
      rgba(0,0,0,.275) calc(var(--velo-arriba) + 48px), rgba(0,0,0,.086) calc(var(--velo-arriba) + 72px), rgba(0,0,0,0) calc(var(--velo-arriba) + 96px)); }
  body.pagina-feed[data-cromo="tema"] .feed-velo, body.pagina-feed[data-cromo="fuera"] .feed-velo { display: none; }
  .pagina-feed .feed-cab .barra-filtros { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 2px 16px; }
  .pagina-feed .feed-cab .barra-filtros::-webkit-scrollbar { display: none; }
  /* Los desplegables suben desde abajo, a lo ancho. */
  .pagina-feed .feed-cab .menu-d { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; min-width: 0; max-height: 72vh;
    border-radius: 26px 26px 0 0; padding: 10px 12px calc(18px + env(safe-area-inset-bottom)); border-bottom: 0; }
  .pagina-feed .feed-cab details.desplegable[open] > summary::after { background: rgba(0,0,0,.5); }
  /* Con foto detrás: blanco sobre cristal oscuro; la elegida, blanca con letra en tinta. */
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) .feed-cab .chip { background: rgba(10,10,10,.6); color: #fff; border-color: rgba(255,255,255,.16); }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) .feed-cab :is(a, button).chip { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) .feed-cab .chip.on { background: #fff; color: #0A0A0A; border-color: #fff; }
  /* La cabecera de la web, encima de la foto (como la de Descubre en la app). */
  .pagina-feed header.top { position: fixed; left: 0; right: 0; top: 0; z-index: 26; }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top { background: transparent; border-bottom-color: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top .brand { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  /* El símbolo (sin cuadrado) encima de la foto: con la misma sombra suave. */
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top .brand .simbolo { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top .pill.top-entrar { background: #fff; color: #0A0A0A; }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top .menu-toggle { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(10,10,10,.35); }
  /* ✨, la lupa y la campana: en blanco con la sombra del logo; el globo de
     la campana, blanco con aro y cifra oscuros (como la app sobre una foto). */
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top .top-icono { color: #fff; }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top .top-icono .ic { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) header.top .top-n { background: #fff; color: #0A0A0A; box-shadow: 0 0 0 2px #0A0A0A; }
  /* La barra de pestañas, de cristal oscuro sobre la foto. */
  body.pagina-feed { padding-bottom: 0 !important; }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) .tabbar { background: rgba(10,10,10,.6); border-top-color: rgba(255,255,255,.12); }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) .tab { color: rgba(255,255,255,.78); }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) .tab[aria-current="page"] { color: #fff; }
  body.pagina-feed > footer { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* Tablet y escritorio: la cabecera (65), la fila de filtros (56) y debajo
   una tarjeta de 9:16 que cabe entera con 12 de aire arriba y abajo (la
   siguiente empieza fuera de la ventana: no asoma). Todo a la escala de un
   móvil (`--u` en tarjeta.css). */
@media (min-width: 761px) {
  body.pagina-feed { --cab: 65px; --barra: 56px; --hueco: 12px; scroll-padding-top: 133px;
    --feed-alto: calc(var(--feed-vp) - var(--cab) - var(--barra) - 2 * var(--hueco)); --feed-w: calc(var(--feed-alto) * 9 / 16);
    --feed-x: calc(50% - var(--feed-w) / 2); --feed-arriba: 0px; --feed-abajo: 12px; }
  .pagina-feed header.top { background: var(--surface); }
  .pagina-feed .feed { padding-top: calc(var(--barra) + var(--hueco)); }
  .pagina-feed .feed > .tj, .pagina-feed .feed > .feed-fin, .pagina-feed .feed > .feed-mas { margin-bottom: calc(2 * var(--hueco) + 2px);
    border-radius: 24px; box-shadow: 0 0 0 1px var(--glass-border), 0 24px 60px -30px rgba(0,0,0,.6); }
  .pagina-feed .feed > .tj { overflow: hidden; }
  .pagina-feed .feed > .feed-fin { padding: 24px 20px; }
  .feed-mas { padding-top: 20px; }
  /* La fila de filtros, centrada y fuera de la foto, con el fondo de la página. */
  .pagina-feed .feed-cab { left: 0; width: 100%; height: var(--barra); padding: 8px 20px; display: flex; justify-content: center;
    border-bottom: 1px solid var(--glass-border); }
  /* El cristal, en un pseudo: con `backdrop-filter` en la propia barra, la
     hoja de filtros (fija) se quedaba encerrada en ella. */
  .pagina-feed .feed-cab::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .pagina-feed .feed-cab .barra-filtros { margin: 0; flex-wrap: nowrap; max-width: 100%; }
  /* La fila, del ancho de la tarjeta más sus flechas (20 + 44) y empezando
     donde la tarjeta: ☰ queda encima de las flechas (Iván, 2026-10-29). El
     margen de 64 la corre 32 a la derecha dentro del centrado. */
  .pagina-feed .feed-cab .barra-filtros.fila-fija { width: calc(var(--feed-w) + 64px); max-width: calc(100% - 64px); margin-left: 64px; }
  .pagina-feed .feed-cab .aviso-error { position: absolute; top: calc(100% + 6px); margin: 0; }
  /* A los lados: la foto que se está viendo, difuminada y apagada. */
  .feed-fondo { display: block; position: fixed; inset: var(--cab) 0 0; z-index: -1; overflow: hidden; }
  .feed-fondo::before { content: ""; position: absolute; inset: 0; background: var(--foto, none) center / cover no-repeat;
    filter: blur(48px) saturate(1.15); transform: scale(1.15); opacity: .55; }
  .feed-fondo::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 45%, transparent); }
  /* Las flechas para pasar, a la derecha de la tarjeta y a su altura. */
  .feed-nav { display: grid; gap: 10px; position: fixed; z-index: 20; top: calc(var(--cab) + var(--barra) + var(--hueco) + var(--feed-alto) / 2);
    transform: translateY(-50%); left: calc(50% + var(--feed-w) / 2 + 20px); }
  .feed-ir { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink);
    background: var(--elevated); border: 1px solid var(--glass-border); box-shadow: 0 8px 24px -12px rgba(0,0,0,.4); }
  .feed-ir .ic { width: 22px; height: 22px; }
  .feed-ir:hover { background: var(--soft); }
  body.pagina-feed[data-cromo="fuera"] .feed-nav { display: none; }
}
@media (min-width: 1180px) {
  .pagina-feed .feed-lado { position: fixed; z-index: 20; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    top: calc(var(--cab) + var(--barra) + 28px); right: calc(50% + var(--feed-w) / 2 + 40px); max-width: 280px; text-align: right; }
  .pagina-feed .feed-lado h1 { margin-top: 0; }
  body.pagina-feed[data-cromo="fuera"] .feed-lado { display: none; }
}

/* ══ «Ver solo la foto» (Iván, 2026-10-07) ═══════════════════════════════
   El botón de cristal de la tarjeta (`.tj-solo`) esconde con un fundido solo
   la información de la publicación: el panel con sus sellos. La cabecera de
   arriba (la marca, la fila de filtros, el aviso y el velo oscuro) se queda
   siempre, también en el móvil. Se mantiene al pasar de publicación
   (`solo-foto` en el <body>, /assets/tarjetas.js) hasta volver a tocar el
   botón (o la foto, o Escape) o recargar la página. Sobre una publicación
   sin foto o el final, todo a la vista. */
.tj--pantalla .tj-panel { transition: opacity .22s ease; }
body.pagina-feed.solo-foto .tj--pantalla.con-solo .tj-panel { opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
@media (prefers-reduced-motion: reduce) {
  .tj--pantalla .tj-panel, body.pagina-feed.solo-foto .tj--pantalla.con-solo .tj-panel { transition: none; }
}

/* ══ «El sitio», «Con niños» y «Según el tiempo» (2026-10-05) ════════════
   Los atributos del local con icono (ficha del negocio; en la de la
   publicación, una línea discreta), sus píldoras en la hoja de filtros, las
   categorías plegadas («Ver todas») y la línea del tiempo encima de la lista. */
.pub ul.sitio { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pub ul.sitio li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); font-weight: 600; font-size: 14px; }
.pub ul.sitio .ic { flex: none; color: var(--ink-2); }
.pub ul.sitio-linea { gap: 4px 14px; margin: 2px 0 10px; }
.pub ul.sitio-linea li { padding: 0; border: 0; background: none; gap: 5px; font-size: 13px; color: var(--ink-2); }
.op-sitio span { gap: 7px; }
/* Marcas (tanda A): el requisito de carné, la edad recomendada, el rango de
   precio del local, «¿Hay sitio ahora?» y «Escúchalo antes». Neutros: el
   coral queda para la oferta y el botón principal. */
.pub .nota-marca { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; padding: 12px 14px;
  border: 1px solid var(--glass-border); border-radius: 16px; }
.pub .nota-marca .muted { font-size: 13px; }
.pub .note.edades { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.pub .precio-local { font-weight: 800; letter-spacing: .02em; }
.pub .sitio-ahora { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); font-weight: 700; font-size: 14px; }
.pub .sitio-ahora[hidden] { display: none; }
.pub .pill.escucha .ic { flex: none; }
.op-sitio input[type=checkbox]:checked + span::before { content: none; }
.op-sitio .ic { flex: none; }
.hoja-cats.plegada .cat-extra { display: none; }
.pub .ver-todas { margin: 10px 0 0; padding: 6px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pub .hoja-nota-bajo { margin: 8px 0 4px; }
.hoja-tiempo .hoja-nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pub .tiempo-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tiempo-linea .ic { flex: none; }
.pub .tiempo-quitar { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pub .tiempo-fuente { font-size: 12px; font-weight: 500; }
.tiempo-fuente a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* ══ Los avisos de Descubre (2026-10-06) ═════════════════════════════════
   Encima de la publicación, solo los filtros y como mucho UN aviso de una
   línea, del alto de un chip, con su × (/assets/avisos.js decide cuál: el
   viaje antes que el tiempo). En el móvil, bajo los filtros y sobre la foto
   (cristal oscuro, como los chips); en tablet y escritorio, a la derecha de
   la tarjeta, arriba, fuera de la foto. */
.feed-avisos { display: flex; }
.feed-avisos[hidden], .feed-aviso[hidden] { display: none !important; }
.feed-aviso { display: inline-flex; align-items: center; max-width: 100%; min-height: 36px; margin: 0; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--elevated); color: var(--ink); font-size: 14px; font-weight: 700; }
.feed-aviso-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 0 4px 0 12px; border: 0; background: none;
  color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.feed-aviso-t:hover { text-decoration: none; }
.feed-aviso-t span:not([aria-hidden]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-aviso-t .ic { flex: none; }
.feed-aviso-x { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer; }
.feed-aviso-x::after { content: ""; position: absolute; inset: -6px; }
.feed-aviso :is(.feed-aviso-t, .feed-aviso-x):focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 999px; }
@media (max-width: 760px) {
  body.pagina-feed.con-aviso { --feed-arriba: 158px; }
  .pagina-feed .feed-cab .feed-avisos { margin: 4px 16px 0; }
  body.pagina-feed:not([data-cromo="tema"]):not([data-cromo="fuera"]) .feed-cab .feed-aviso { background: rgba(10,10,10,.6); color: #fff;
    border-color: rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
@media (min-width: 761px) {
  .pagina-feed .feed-cab .feed-avisos { position: absolute; top: calc(100% + var(--hueco)); left: calc(50% + var(--feed-w) / 2 + 20px);
    max-width: min(320px, calc(50% - var(--feed-w) / 2 - 40px)); }
}

/* ══ La hoja de filtros por orden de uso (2026-10-06) ═══════════════════════
   ¿Cuándo? · Qué · Categorías (8 y «Ver todas», que abre el selector de
   /assets/categorias.js) · Distancia · Precio · «Más filtros» plegado; «Según
   el tiempo» pasa al menú de orden. Sin JavaScript, el resto de categorías
   sale debajo, por grupos. */
.op-mas { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--glass-border); background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.op-mas:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cat-mas { margin-top: 6px; }
.pub .cat-grupo { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
/* La hoja en cuatro bloques (como la app): «Lo básico» abierto y, debajo,
   «Para quién», «El sitio» y «Más» plegados, con cuántos lleva cada uno. */
.pub .hoja-basico-t, .hoja-bloque-t h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.pub .hoja-basico-t { margin: 4px 0 12px; }
details.hoja-bloque { margin: 0 0 10px; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass); }
details.hoja-bloque > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; cursor: pointer; list-style: none; min-height: 48px; }
details.hoja-bloque > summary::-webkit-details-marker { display: none; }
details.hoja-bloque > summary::marker { content: ''; }
details.hoja-bloque > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 18px; }
.hoja-bloque-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hoja-bloque-t small { font-size: 13px; color: var(--ink-2); }
.hoja-bloque-n { font-weight: 800; }
details.hoja-bloque > summary .ic { flex: none; color: var(--ink-2); transition: transform .2s; }
details.hoja-bloque[open] > summary .ic { transform: rotate(180deg); }
.hoja-bloque-c { padding: 4px 16px 2px; }
.hoja-bloque-c fieldset { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { details.hoja-bloque > summary .ic { transition: none; } }
/* El «dónde»: la distancia en una fila de píldoras dentro del menú. */
.menu-km { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 6px; }
.pub .op-km { min-height: 40px; min-width: 52px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.pub .op-km:hover { text-decoration: none; border-color: var(--ink-2); }
.pub .op-km.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* ¿Dónde?, una hoja como las demás (título, ✕ y velo), más estrecha en el
   escritorio: son pocas opciones y todas enlaces (sin pie). */
.hoja.zona .hoja-cuerpo { width: min(440px, calc(100vw - 32px)); }
.hoja-donde { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.hoja-donde .donde-modos { margin: 4px 0 10px; }
/* Un atajo encendido: chip con × para quitarlo. */
.chip-quitar .ic:last-child { margin: 0 -4px 0 -2px; opacity: .8; }
.menu-sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--glass-border); }
.pub .menu-nota { margin: 2px 12px 8px; max-width: 280px; font-size: 12px; color: var(--ink-2); }
.menu-nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.op-check { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 2px solid currentColor; display: inline-grid; place-items: center; }
.op.on .op-check::after { content: '✓'; font-size: 13px; font-weight: 800; line-height: 1; }

/* ── Menú ⋮ de las fichas (como la app): lo que se usa poco ─────────────── */
.d-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.d-top .badges { flex: 1; min-width: 0; }
.mas-menu { position: relative; flex: none; }
.mas-menu > summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); cursor: pointer; }
.mas-menu > summary::-webkit-details-marker { display: none; }
.mas-menu > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mas-menu[open] > summary { background: var(--soft); }
.mas-lista { position: absolute; right: 0; top: 46px; z-index: 30; min-width: 230px; padding: 6px 0; border-radius: 16px;
  background: var(--elevated); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.mas-lista a, .mas-lista button { display: block; width: 100%; box-sizing: border-box; padding: 11px 18px; color: var(--ink); font: inherit;
  font-weight: 600; font-size: 15px; text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer; }
.mas-lista a:hover, .mas-lista a:focus-visible, .mas-lista button:hover, .mas-lista button:focus-visible { background: var(--soft); outline: none; }
.mas-lista .mas-peligro + .mas-peligro { border-top: 0; margin-top: 0; padding-top: 11px; }
.mas-lista .mas-peligro { color: #B3261E; border-top: 1px solid var(--glass-border); margin-top: 4px; padding-top: 13px; }
@media (prefers-color-scheme: dark) { .mas-lista .mas-peligro { color: #FF9B9B; } }
.mas-lista [hidden] { display: none; }
/* «¿Por qué ves esto?», al pie de la ficha (el menú lleva aquí). */
.por-que { margin-top: 28px; font-size: 14px; }
.por-que summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.por-que p { margin: 8px 0 0; }
.neg-id.d-top { align-items: flex-end; justify-content: flex-start; }
.neg-id.d-top > div { flex: 1; }
.neg-id .mas-menu { align-self: flex-start; }
/* «Cómo llegar · Contactar · Redes sociales» (las hojas de la app): pastillas
 * que abren su lista como el menú ⋮. */
.toques { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; position: relative; }
.mas-menu.toque { position: static; }
.mas-menu.toque > summary { width: auto; height: auto; display: inline-flex; gap: 6px; border-radius: 999px; padding: 9px 16px; }
/* La lista, bajo la fila entera y desde su borde izquierdo: en el móvil no se sale de la pantalla. */
.mas-menu.toque .mas-lista { left: 0; right: auto; top: calc(100% + 6px); max-width: 100%; }
/* Tus sellos en la tarjeta de la ficha del negocio. */
.sellos-mios { display: inline-block; margin-top: 6px; }

/* La columna de la ficha: Invitar, Guardar en Planes, Compartir en historias…
   cada uno en su fila, todos del mismo ancho (como en la app). Antes, el
   «Editar» oculto contaba en `:nth-child` y salían de anchos distintos. */
.side .acciones > :not(.escucha) { flex: 1 1 100%; }

/* Enlaces de la ficha del negocio («Reservar», «Pedir a domicilio»…): en la
   columna, uno por fila, todos iguales y neutros (sin coral), como en la
   app. El texto largo («Pedir a domicilio · Just Eat») se corta con «…». */
.side .neg-enlaces { margin: 0 0 8px; }
.neg-enlaces .enlace-neg { min-width: 0; max-width: 100%; white-space: nowrap; }
.neg-enlaces .enlace-neg span { overflow: hidden; text-overflow: ellipsis; }
.neg-enlaces .enlace-neg .ic { flex: none; margin: 0; }
/* Archivos de la carta que abren fuera: cada PDF y el «Enlace a la carta». */
.carta-archivos { display: grid; gap: 8px; margin: 10px 0 18px; }
.carta-archivo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); text-decoration: none; }
.carta-archivo:hover { text-decoration: none; background: var(--soft); }
.carta-archivo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.carta-archivo > span { flex: 1; min-width: 0; display: grid; }
.carta-archivo b { font-weight: 700; }
.carta-archivo small { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-archivo .ic { flex: none; }
.carta-archivo .ic:last-child { color: var(--ink-2); }
/* «Alérgenos y dietas» en «El sitio»: aparte y con su nota. */
.sitio-dietas-t { font-size: 15px; margin: 4px 0 8px; }
.pub .sitio-dietas-nota { margin: -8px 0 18px; }
/* «Horario sin confirmar» y «Estaba cerrado» (assets/cerrado.js). */
.horario-check { margin-top: 10px; display: grid; gap: 8px; font-size: 14px; }
.horario-check p { margin: 0; }
.horario-cerrado { display: grid; gap: 8px; }
.horario-cerrado-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.horario-cerrado-botones .pill, .horario-cerrado > .pill { justify-content: center; text-align: center; }

/* ── Ficha del negocio ordenada (2026-10-22, igual que la app) ──────────────
   Lo publicado justo después del nombre y una línea de estado; el contacto,
   las redes y «Cómo llegar» a la derecha en el escritorio y al final en el
   móvil. */
@media (max-width: 860px) {
  .detail.negocio.ordenada { grid-template-areas: "media" "head" "body" "side"; }
}
.negocio.ordenada .side { position: static; }
/* En el escritorio, la portada más baja: lo publicado se ve al entrar. */
@media (min-width: 861px) { .negocio.ordenada > .ficha-media--negocio { max-height: 300px; } }
.negocio.ordenada .contacto-h { margin-top: 0; }
.negocio.ordenada .d-body > h2:first-child { margin-top: 0; }
/* El favorito: un corazón neutro junto a ⋮ (coral solo para el botón
   principal y la oferta). Lleno cuando ya lo tienes. */
/* El corazón y ⋮: en el móvil, uno encima del otro (el nombre cabe en
   menos líneas); en el escritorio, en fila. */
.neg-id.d-top > .neg-botones { flex: none; align-self: flex-start; display: flex; gap: 8px; }
@media (max-width: 600px) { .neg-id.d-top > .neg-botones { flex-direction: column; } }
.fav-ic { flex: none; align-self: flex-start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); }
.fav-ic:hover { text-decoration: none; background: var(--soft); }
.fav-ic:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fav-ic .ic { width: 22px; height: 22px; flex: none; }
.fav-ic .cor-lleno, .fav-ic.on .cor-vacio { display: none; }
.fav-ic.on .cor-lleno { display: block; }
.equipo-acc { margin: 0 0 8px; }
.equipo-acc:not(:has(> :not([hidden]))) { display: none; }
/* La línea de estado: «Abierto · cierra a las 23:00 · Casi lleno ⌄». */
.estado-neg { margin: 4px 0 10px; }
.estado-neg > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 44px;
  cursor: pointer; font-size: 15px; color: var(--ink-2); }
.estado-neg > summary::-webkit-details-marker { display: none; }
.estado-neg > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.estado-neg .estado-hoy { margin: 0; font-size: 15px; }
.estado-neg summary br, .estado-neg summary .cocina { display: none; }
.estado-neg .sitio-ahora { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none;
  color: var(--ink); font-weight: 700; }
.estado-neg .sitio-ahora[hidden] { display: none; }
.estado-neg .estado-hoy:not([hidden]) + .sitio-ahora:not([hidden])::before { content: '·'; color: var(--ink-2); font-weight: 400; margin-right: 1px; }
.estado-neg .estado-hoy:not([hidden]) ~ .estado-fb, .estado-neg .sitio-ahora:not([hidden]) ~ .estado-fb { display: none; }
.estado-neg .flecha { color: var(--ink-2); transition: transform .15s; }
.estado-neg[open] .flecha { transform: rotate(180deg); }
.estado-dentro { padding: 2px 0 6px; }
.estado-dentro .side-h:first-child { margin-top: 4px; }
.negocio.ordenada .festivo, .negocio.ordenada .horario-check { margin-top: 0; }
.negocio.ordenada .cierre { margin: 0 0 10px; }

/* Las tres preguntas (opción A, 2026-10-26): ☰ · ¿Dónde? · ¿Cuándo? · ¿Qué? ·
   el orden. ☰ es solo el icono (con su número); cada pregunta dice lo que
   lleva, cortado si es largo. */
.barra-filtros .chip-filtros { padding: 7px 11px; justify-content: center; min-width: 44px; }
.barra-filtros .chip-filtros .ic { margin: 0; }
.barra-filtros .chip .chip-t { max-width: 150px; }
@media (max-width: 380px) { .barra-filtros .chip .chip-t { max-width: 118px; } }
/* Los atajos (¿Cuándo? y debajo del buscador de Explorar). */
.atajo { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.atajo:hover { text-decoration: none; border-color: var(--ink-2); }
.atajo.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.atajo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.atajos-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.pub .atajos-t { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-right: 2px; }
@media (max-width: 640px) {
  .atajos-fila { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 14px; padding: 2px 20px; }
  .atajos-fila::-webkit-scrollbar { display: none; }
  .atajos-fila > * { flex: none; }
}
/* ¿Dónde?: «Cerca de mí» | «Una ciudad». */
.donde-modos { display: flex; gap: 4px; padding: 3px; margin: 4px 6px 8px; border-radius: 999px; background: var(--soft); }
.donde-modo { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: none; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.donde-modo.on { background: var(--ink); color: var(--surface); }
.donde-modo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* El orden: cada opción con lo que hace; «Recomendado», con sus pasos. */
.pub .op.op-h { align-items: flex-start; }
.op-h > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-h .op-t { font-weight: 700; }
.op-h small { font-size: 12px; font-weight: 500; opacity: .8; }
.menu-pasos { margin: 4px 0 0 18px; padding: 0; font-size: 12px; font-weight: 500; line-height: 1.45; opacity: .85; }
.desplegable.orden .menu-d { min-width: 260px; max-width: 320px; }
@media (min-width: 641px) { .desplegable.orden-lista .menu-d { left: auto; right: 0; } }
.desplegable.orden-lista > summary.chip { min-height: 34px; padding: 5px 11px; font-size: 13px; }
.pub .resumen-orden { margin: -8px 0 14px; font-size: 13px; color: var(--ink-2); }
.pub .hoja-no-aqui { margin: 14px 2px 4px; }
.hoja-atajos .ops { margin-bottom: 4px; }
.resumen .desplegable a, .cal-lista-cab .desplegable a { text-decoration: none; font-size: inherit; }
.resumen .desplegable, .cal-lista-cab .desplegable { align-self: center; }

/* ══ La fila de filtros fija (Iván, 2026-10-27) ══════════════════════════
   ¿Dónde? · ¿Cuándo? · ¿Qué? y ☰ a la derecha, igual en Descubre y en
   Explorar y sin nada que salte de sitio. Las tres preguntas se encogen con
   «…» (no se desliza la fila): en 360 px caben las tres y ☰ siempre. */
.barra-filtros.fila-fija { flex-wrap: nowrap; overflow: visible; }
@media (max-width: 640px) { .barra-filtros.fila-fija { overflow: visible; } }
@media (max-width: 760px) { .pagina-feed .feed-cab .barra-filtros.fila-fija { overflow: visible; } }
.fila-fija .barra-preg { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.fila-fija .barra-preg > .desplegable, .fila-fija .barra-preg > .hoja { flex: 0 1 auto; min-width: 0; }
.fila-fija .barra-preg summary.chip { display: flex; max-width: 100%; min-width: 0; }
.fila-fija .barra-preg .chip > .ic { flex: none; }
.fila-fija .barra-preg .chip .chip-t { flex: 0 1 auto; min-width: 0; }
.fila-fija > .hoja { flex: none; margin-left: auto; }
/* El reparto de la app: si no cabe, lo corto («Todo», «Cuando sea») queda
   entero y lo que se acorta es el dónde; luego ¿Cuándo? y por último ¿Qué?. */
.fila-fija .barra-preg > .zona { flex-shrink: 100; min-width: 64px; }
/* (64 px: «5 km» y «Todas» siempre enteros; un nombre de ciudad largo, con «…».) */
.fila-fija .barra-preg > :nth-child(2) { flex-shrink: 10; }
.zona-corta { display: none; }
/* La misma fila en Descubre y en Explorar: los mismos 16 px a los lados que
   en la app (Explorar tenía 20 y la fila salía 8 px más estrecha). */
@media (max-width: 640px) { .barra-filtros.fila-fija { margin-left: -20px; margin-right: -20px; padding-left: 16px; padding-right: 16px; } }
@media (max-width: 399px) {
  .fila-fija { gap: 6px; }
  .fila-fija .barra-preg { gap: 6px; }
  .fila-fija .barra-preg .chip { padding-left: 10px; padding-right: 10px; gap: 5px; }
  /* Sin la flecha: el sitio es para el texto. */
  .fila-fija .barra-preg .chip > .ic:last-child { display: none; }
  .zona-larga { display: none; }
  .zona-corta { display: inline; }
}
/* Como la app (Iván, 2026-10-29): si no caben enteras, primero el «dónde»
   corto («5 km», «Todas») y, si aún no, las tres preguntas sin icono (el
   lector las dice igual) antes que cortar «Cuando sea» o «Todo». Lo decide
   el script de la fila (`fila-corta`, `fila-sin-iconos`), midiendo. */
.fila-fija.fila-corta .zona-larga { display: none; }
.fila-fija.fila-corta .zona-corta { display: inline; }
.fila-fija.fila-sin-iconos .barra-preg .chip > .ic:first-child { display: none; }

/* ☰ › «Ordenar por», arriba de la hoja (Descubre y la lista de Planes). */
.hoja-orden { margin-bottom: 20px; }
.op-orden { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; margin: 0 0 8px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: var(--glass); cursor: pointer; }
.op-orden input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.op-orden > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-orden .op-t { font-weight: 700; }
.op-orden small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.op-orden .op-serie { display: inline; font-size: inherit; font-weight: 500; }
.op-orden:has(input:checked) { border-color: var(--ink); }
.op-orden:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.orden-casillas { margin: -2px 0 12px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pub .orden-casillas .hoja-nota { margin: 0 0 6px; }
.orden-casillas .hoja-nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ¿Qué? › Categorías: cuadrícula de iconos grandes por grupos, varias. */
.hoja-cats-grupo legend { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cat-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .cat-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-celda { position: relative; display: block; cursor: pointer; }
.cat-celda input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cat-celda-c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; height: 100%;
  padding: 10px 6px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass); text-align: center;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.cat-celda-t { overflow-wrap: break-word; hyphens: manual; max-width: 100%; }
.pub .hoja-cats-t { margin: 4px 0 10px; font-size: 14px; font-weight: 800; }
.cat-celda input:checked + .cat-celda-c { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cat-celda input:focus-visible + .cat-celda-c { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .cat-celda-c { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } }

/* ══ Las hojas «Buscar» y «Selecciones» de Descubre (Iván, 2026-10-29) ════
   (Los botones están en la cabecera de todas las páginas: site.css.) La lupa abre la hoja «Buscar» (el
   mismo buscador que Explorar, con los atajos, lo buscado, lo más buscado y
   «O mira por tipo de sitio»); ✨, la de «Selecciones». Son hojas como las
   de la fila: desde abajo en el móvil, centradas en el escritorio. */
.hoja-lupa-sum { position: absolute; width: 0; height: 0; padding: 0; border: 0; overflow: visible; list-style: none; }
.hoja-lupa-sum::-webkit-details-marker { display: none; }
.hoja-lupa-sum::marker { content: ''; }
.hoja-lupa .hoja-cuerpo { min-height: min(70vh, 620px); }
@media (max-width: 640px) { .hoja-lupa .hoja-cuerpo { height: 88vh; } }
.hoja-lupa .hoja-scroll { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.hoja-lupa .buscador { margin: 4px 0 18px; }
.pub .hoja-lupa h3, .pub .busq-tipos > h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.busq-sec { margin: 0 0 18px; }
.busq-tipos { margin-top: 18px; }
.pub .busq-grupo :is(h3, h4) { margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.busq-tipos .busq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.busq-cat { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.busq-cat:hover { text-decoration: none; border-color: var(--ink-2); }
.busq-cat:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.busq-mas { color: var(--ink-2); padding-right: 10px; }
.busq-mas[hidden], .busq-cat[hidden] { display: none; }
.sel-lista { display: grid; margin: 4px 0 0; }
.sel-fila { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 2px; color: var(--ink); border-bottom: 1px solid var(--glass-border); }
.sel-fila:last-child { border-bottom: 0; }
.sel-fila:hover { text-decoration: none; }
.sel-fila > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sel-fila b { font-size: 15px; }
.sel-fila small { font-size: 13px; color: var(--ink-2); }
.sel-fila .ic { flex: none; color: var(--ink-2); }

/* «Busca tu municipio» (2026-11-03): en «¿Dónde?» › Una ciudad y en «Tu
   cuenta» › Tu ciudad, como la app. Los resultados, como las opciones de la
   hoja; sin texto, «Todas las ciudades» / «Sin ciudad» y las «Populares». */
.muni-busca .muni-campo { margin: 6px 0 6px; }
.muni-busca .muni-campo input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.muni-busca .muni-campo input::placeholder { color: var(--ink-2); opacity: 1; }
.muni-busca [data-muni-res]:empty { display: none; }
.muni-busca .op { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; min-height: 44px; border: 0; border-radius: 12px; background: none;
  color: var(--ink); font: inherit; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; text-decoration: none; }
.muni-busca .op:hover { background: var(--soft); }
.muni-busca .op.on { background: var(--ink); color: var(--surface); }
.muni-actual { margin: 4px 0 6px; }
.muni-elige { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }