/* DigSpain × Vinilogy. Light, clean, functional. Brand red #db0521, white wordmark. */
:root {
  --red: #db0521; --red-dark: #b00419; --red-soft: #fdeaed;
  --ink: #141414; --ink-2: #444; --ink-3: #66625c;
  --bg: #fff; --surface: #f6f4f0; --surface-2: #ece9e3; --line: #e3dfd8;
  --ok: #0d7a55; --warn: #8a5a00;
  --radius: 10px; --radius-lg: 16px;
  --wrap: 1200px; --gutter: clamp(16px, 4vw, 32px);
  --display: "Montserrat", "Arial Black", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; background: #fff; color: #111; padding: 12px 16px; z-index: 100; border-radius: 8px; }
.skip:focus { top: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(40px, 6vw, 80px); }
.section.alt { background: var(--surface); }

h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.06; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.12; }
h3 { font-weight: 700; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.head { margin-bottom: clamp(20px, 3vw, 32px); }
.head p { margin: 8px 0 0; }

/* Header: brand red bar, white wordmark */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--red); color: #fff; }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.mark { font: 800 clamp(1.125rem, 1rem + 0.6vw, 1.5rem)/1 var(--display); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.hdr nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); font-weight: 600; font-size: 0.9375rem; }
.hdr nav a { text-decoration: none; padding: 10px 2px; }
.hdr nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.hdr .pill { border: 1.5px solid #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; }
.hdr .pill.solid { background: #fff; color: var(--red); }
.hdr .pill:hover { text-decoration: none !important; background: #fff; color: var(--red); }
.hdr .me { display: inline-flex; align-items: center; gap: 8px; }
.hdr .av { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--red); display: grid; place-items: center; font: 800 0.875rem var(--display); }
.hdr :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .hdr .hide-m { display: none; } }

/* Buttons */
.btn { --btn: var(--red); --btn-ink: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--btn); border-radius: 8px; background: var(--btn); color: var(--btn-ink); font: 600 0.9375rem/1 var(--text); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s; }
.btn:hover { --btn: var(--red-dark); }
.btn:active { transform: scale(.98); }
.btn.ghost { --btn: transparent; --btn-ink: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { --btn: var(--ink); --btn-ink: #fff; }
.btn.dark { --btn: var(--ink); } .btn.dark:hover { --btn: #000; }
.btn[aria-pressed="true"], .btn.on { --btn: var(--ink); --btn-ink: #fff; border-color: var(--ink); }
.btn.small-btn { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }
.btn.wide { width: 100%; }
.link-btn { background: none; border: 0; padding: 8px 4px; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: 0.875rem; }
.link-btn:hover { color: var(--red); }
.band-red .btn { --btn: #fff; --btn-ink: var(--red); border-color: #fff; }
.band-red .btn:hover { --btn: var(--red-soft); }
.band-red .btn.ghost { --btn: transparent; --btn-ink: #fff; }
.band-red .btn.ghost:hover { --btn: #fff; --btn-ink: var(--red); }

/* Inputs */
.field { display: block; width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font-size: 1rem; }
.field:hover { border-color: #c9c4ba; } .field:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(20,20,20,.12); }
textarea.field { padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.45; }
select.field { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23141414' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
label.lbl { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 6px; }

/* Hero */
.hero { padding-block: clamp(32px, 5vw, 72px); }
.hero .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 16px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; }
.stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; padding: 0; list-style: none; }
.stats b { display: block; font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--display); }
.stats span { font-size: 0.875rem; color: var(--ink-3); }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mosaic a { display: block; position: relative; }
.mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.mosaic a:nth-child(1), .mosaic a:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.mosaic a:nth-child(1) img, .mosaic a:nth-child(5) img { height: 100%; }
@media (max-width: 860px) { .hero .grid { grid-template-columns: 1fr; } .mosaic { grid-template-columns: repeat(4, 1fr); } .mosaic a:nth-child(n) { grid-column: auto; grid-row: auto; } .mosaic a:nth-child(n+5) { display: none; } }

/* Workspace: filters, list, map, route */
.work { border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: clip; }
.toolbar { display: grid; grid-template-columns: minmax(200px, 320px) 1fr auto; gap: 12px 16px; align-items: center; padding: 14px; background: var(--surface); border-bottom: 1.5px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: 600 0.875rem/1 var(--text); cursor: pointer; transition: background .15s, border-color .15s; }
.tab:hover { border-color: var(--ink); }
.tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab .n { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 500; }
.work-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 640px; }
.list-col { max-height: 720px; overflow-y: auto; border-right: 1.5px solid var(--line); }
.bands { list-style: none; margin: 0; padding: 0; }
.band { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb body act" "thumb status act"; gap: 2px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.band .thumb { grid-area: thumb; width: 72px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font: 800 1.125rem var(--display); color: var(--ink-3); }
.band .thumb img { width: 100%; height: 100%; object-fit: cover; }
.band .body { grid-area: body; min-width: 0; align-self: end; }
.band:hover { background: var(--surface); }
.band .name { font: 700 1rem/1.25 var(--text); text-decoration: none; }
.band .name:hover { color: var(--red); text-decoration: underline; }
.band .meta { font-size: 0.8125rem; color: var(--ink-3); margin-top: 2px; }
.band .status { grid-area: status; align-self: start; }
.band .act { grid-area: act; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b9b4aa; flex: none; }
.status.open { color: var(--ok); } .status.open::before { background: var(--ok); }
.status.closed { color: var(--ink-2); } .status.closed::before { background: var(--red); }
.map-col { position: relative; display: flex; flex-direction: column; min-width: 0; }
#map, .mini-map { flex: 1; min-height: 360px; background: var(--surface-2); z-index: 0; }
.route-card { border-top: 1.5px solid var(--line); background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.route-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sum { font: 700 0.9375rem var(--text); color: var(--ink-2); margin: 0; }
.empty { color: var(--ink-3); margin: 0; }
.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.stops li { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 8px; }
.stops .pin { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 0.8125rem var(--display); }
.stops .nm { font-weight: 700; text-decoration: none; } .stops .nm:hover { color: var(--red); }
.stops .leg { display: block; font-size: 0.8125rem; color: var(--ink-3); font-weight: 400; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions .share { flex-basis: 100%; }
@media (max-width: 960px) {
  .toolbar { grid-template-columns: 1fr; }
  .work-body { grid-template-columns: 1fr; }
  .map-col { order: -1; } #map { min-height: 340px; flex: none; height: 340px; }
  .list-col { max-height: 520px; border-right: 0; border-top: 1.5px solid var(--line); }
}

/* Map pins */
.pinm { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--display); color: #fff; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pinm.tracked { background: var(--red); }
.pinm.dir { background: #6d6860; }
.pinm.route { background: var(--ink); width: 30px; height: 30px; font-size: 13px; }
.leaflet-popup-content { margin: 14px 16px; font: 400 0.9375rem/1.4 var(--text); }
.leaflet-control-zoom a { font-family: var(--text) !important; font-weight: 700; }

/* Cards, how it works */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: clamp(18px, 2.4vw, 28px); background: #fff; }
.card h3 { margin-bottom: 8px; }
.card .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; font: 800 1rem var(--display); margin-bottom: 14px; }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }

/* Wishlist */
.wl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wl .card { display: flex; flex-direction: column; gap: 12px; }
.results, .wishlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rec { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.rec .cov { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.rec .tt { font-weight: 700; line-height: 1.25; } .rec .tt a { text-decoration: none; } .rec .tt a:hover { color: var(--red); text-decoration: underline; }
.rec .sub { font-size: 0.8125rem; color: var(--ink-3); } .rec .sub a { color: var(--ink-2); }
.best { margin-top: 8px; } .best h3 { margin-bottom: 8px; }
.best ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.best li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-weight: 700; background: #fff; }
.best li a { text-decoration: none; } .best li a:hover { color: var(--red); } .best li span { font-weight: 500; font-size: 0.8125rem; color: var(--ink-3); }
.note { font-size: 0.8125rem; color: var(--ink-3); max-width: 70ch; }
@media (max-width: 860px) { .wl { grid-template-columns: 1fr; } }

/* Festival feature + red band */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.feature .covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.covers a { text-decoration: none; display: block; } .covers img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface-2); transition: transform .2s; }
.covers a:hover img { transform: translateY(-3px); } .covers span { display: block; font-size: 0.8125rem; font-weight: 600; margin-top: 6px; line-height: 1.25; }
.band-red { background: var(--red); color: #fff; padding-block: clamp(36px, 5vw, 64px); }
.band-red .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.band-red h2 { max-width: 20ch; } .band-red p { margin: 8px 0 0; max-width: 52ch; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* Footer */
.foot { background: var(--ink); color: #fff; padding-block: 40px 28px; }
.foot .grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px; }
.foot .mark { display: inline-block; margin-bottom: 10px; } .foot p { font-size: 0.875rem; color: #d6d2ca; margin: 0 0 8px; }
.foot a { color: #fff; } .foot ul { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; display: grid; gap: 6px; }
.foot .legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid #3a3a3a; font-size: 0.8125rem; color: #bdb8ae; }
@media (max-width: 860px) { .foot .grid { grid-template-columns: 1fr 1fr; } .foot .grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot .grid { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* Share */
.share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.share .lblx { font-weight: 700; font-size: 0.875rem; margin-right: 4px; }
.share .btn { --btn: #fff; --btn-ink: var(--ink); border-color: var(--line); min-height: 38px; padding: 0 12px; font-size: 0.8125rem; }
.share .btn:hover { --btn: var(--ink); --btn-ink: #fff; border-color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Page head (shop, festival, feed, profile, join) */
.pagehead { padding-block: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 32px); border-bottom: 1.5px solid var(--line); background: var(--surface); }
.crumb { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--ink-3); text-decoration: none; margin-bottom: 14px; } .crumb:hover { color: var(--red); }
.pagehead h1 { margin-bottom: 10px; }
.pagehead .sub { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--ink-2); margin-bottom: 18px; font-weight: 500; }
.pagehead .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 0.8125rem; font-weight: 600; }
.pill-tag.red { background: var(--red-soft); border-color: #f4c3cb; color: var(--red-dark); }
.two { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 18px 0 0; } .dl dt { font-weight: 700; } .dl dd { margin: 0; }
.hours table { width: 100%; border-collapse: collapse; } .hours td { padding: 8px 0; border-bottom: 1px solid var(--line); } .hours td:first-child { font-weight: 600; width: 8em; } .hours tr.today td { color: var(--red); font-weight: 700; }
.mini-map { height: 300px; border-radius: var(--radius); border: 1.5px solid var(--line); margin-top: 14px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.tile { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.tile .b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .tile .t { font-weight: 700; line-height: 1.25; } .tile .a { font-size: 0.8125rem; color: var(--ink-3); } .tile .a a { color: var(--ink-2); }
.tile .pr { font: 800 1rem var(--display); margin-top: auto; padding-top: 6px; } .tile .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.more a { display: block; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 700; background: #fff; } .more a:hover { border-color: var(--ink); } .more small { display: block; font-weight: 400; color: var(--ink-3); }
.stars { display: flex; gap: 6px; } .stars button { width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font: 800 1rem var(--display); cursor: pointer; } .stars button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* Festival */
.artist { padding-block: 22px; border-top: 1.5px solid var(--line); } .artist:first-of-type { border-top: 0; }
.artist-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .artist-h a { font-size: 0.875rem; color: var(--red); font-weight: 600; }
.near { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .near a { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; background: #fff; } .near a:hover { border-color: var(--ink); }

/* Feed */
.feed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 3vw, 36px); align-items: start; }
.feed { display: flex; flex-direction: column; gap: 14px; }
.post { border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 16px; }
.post-h { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font: 800 0.9375rem var(--display); flex: none; }
.avatar.shop { background: var(--ink); } .avatar.you { background: var(--red); }
.post-h .who { font-weight: 700; line-height: 1.25; } .post-h .who a { text-decoration: none; } .post-h .who a:hover { color: var(--red); text-decoration: underline; }
.post-h .when { font-size: 0.8125rem; color: var(--ink-3); }
.post-body { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; }
.post-body img, .post-body .cov { width: 112px; height: 112px; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.post-body .tt { font-weight: 700; font-size: 1.0625rem; line-height: 1.25; } .post-body .tt a { text-decoration: none; } .post-body .tt a:hover { color: var(--red); text-decoration: underline; }
.post-text { white-space: pre-wrap; margin: 0 0 4px; }
.post-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.post-actions .btn { --btn: #fff; --btn-ink: var(--ink-2); border-color: var(--line); min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
.post-actions .btn:hover { border-color: var(--ink); --btn: #fff; --btn-ink: var(--ink); }
.post-actions .btn[aria-pressed="true"] { --btn: var(--red-soft); --btn-ink: var(--red-dark); border-color: #f4c3cb; }
.composer { border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.composer .row2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.side .card { padding: 16px; } .side h3 { margin-bottom: 10px; }
.evt { padding: 10px 0; border-top: 1px solid var(--line); } .evt:first-of-type { border-top: 0; padding-top: 0; }
.evt b { display: block; } .evt span { font-size: 0.8125rem; color: var(--ink-3); }
.feed-empty { padding: 28px; border: 1.5px dashed #cfc9be; border-radius: var(--radius-lg); text-align: center; color: var(--ink-2); }
@media (max-width: 960px) { .feed-grid { grid-template-columns: 1fr; } .side { position: static; } .post-body { grid-template-columns: 84px 1fr; } .post-body img, .post-body .cov { width: 84px; height: 84px; } }

/* Join / onboarding */
.join { max-width: 560px; margin: 0 auto; }
.steps { display: flex; gap: 6px; margin-bottom: 20px; } .steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-2); } .steps i.on { background: var(--red); }
.join .panel { border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); background: #fff; display: flex; flex-direction: column; gap: 14px; }
.btn.prov { --btn: #fff; --btn-ink: var(--ink); border-color: var(--ink); min-height: 50px; justify-content: center; }
.btn.prov:hover { --btn: var(--surface); }
.btn.prov.main { --btn: var(--red); --btn-ink: #fff; border-color: var(--red); }
.btn.prov.main:hover { --btn: var(--red-dark); }
.or { text-align: center; color: var(--ink-3); font-size: 0.875rem; display: flex; align-items: center; gap: 12px; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.addr { padding: 12px 14px; background: var(--surface); border-radius: 8px; font-weight: 600; word-break: break-all; }
.vis { display: grid; gap: 8px; } .vis label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; } .vis input { width: 22px; height: 22px; accent-color: var(--red); flex: none; } .vis small { display: block; font-weight: 400; color: var(--ink-3); }
.err { color: var(--red-dark); font-weight: 600; font-size: 0.875rem; min-height: 1.2em; margin: 0; }
.proto { font-size: 0.8125rem; color: var(--ink-3); background: var(--surface); border-radius: 8px; padding: 10px 12px; margin: 0; }

/* Profile */
.pf-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pf-head .avatar { width: 84px; height: 84px; font-size: 2rem; }
.pf-stats { display: flex; gap: 24px; list-style: none; padding: 0; margin: 10px 0 0; } .pf-stats b { font: 800 1.25rem var(--display); display: block; } .pf-stats span { font-size: 0.8125rem; color: var(--ink-3); }
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .pf-grid .full { grid-column: 1 / -1; }
.pf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .pf-list li { padding: 10px 12px; background: var(--surface); border-radius: 8px; }
.pf-list a { font-weight: 700; text-decoration: none; } .pf-list a:hover { color: var(--red); }
.passport { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; margin-top: 12px; } .passport i { aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); } .passport i.on { background: var(--red); }
.big-n { font: 800 3rem/1 var(--display); margin: 0 0 4px; }
.pf-priv { display: grid; gap: 8px; }
@media (max-width: 860px) { .pf-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Shop photos (from Vinilogy's /tiendas/editar) */
.shop-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(20px, 4vw, 48px); align-items: center; }
.hero-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 10; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar.shop { overflow: hidden; }
@media (max-width: 860px) { .shop-head { grid-template-columns: 1fr; } .hero-photo { order: -1; aspect-ratio: 16 / 9; } }


/* ===== Compact layout: less scrolling =====
   The important things fit the first screen; long lists scroll inside their own box or sideways. */
.section { padding-block: clamp(22px, 3vw, 40px); }
.section.tight { padding-block: clamp(18px, 2.4vw, 30px); }
.head { margin-bottom: clamp(10px, 1.6vw, 16px); }
.row-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; }
.row-head h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); }
.pagehead.compact { padding-block: clamp(14px, 2vw, 24px) clamp(12px, 1.6vw, 18px); }
.pagehead.compact h1 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); margin-bottom: 6px; }
.pagehead.compact .sub { margin-bottom: 10px; }
.pagehead.compact .lead { margin-bottom: 8px; }
.crumb { margin-bottom: 6px; }
.stats.inline { gap: 8px 28px; align-items: baseline; }
.stats.inline b { font-size: 1.25rem; display: inline; margin-right: 6px; }
.stats.inline li { display: flex; align-items: baseline; }
.band-red.slim { padding-block: 18px; }
.band-red.slim .wrap { gap: 12px 24px; }
.band-red.slim h2 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); max-width: none; }

/* Horizontal strips instead of long vertical lists */
.strip, .strip-row { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
.strip > *, .strip-row > * { flex: 0 0 auto; scroll-snap-align: start; }
.feed.strip .post { flex-basis: min(86vw, 340px); }
.feed.strip .feed-empty { flex: 1 1 100%; }
.tiles.strip-row .tile { flex-basis: 170px; }
.covers.strip-row a { flex-basis: 120px; }
.covers.strip-row img { width: 120px; }
.gallery.strip-row li { flex-basis: 300px; }
.gallery.strip-row img { width: 300px; }
.feature.compact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 40px; }
.feature.compact .covers { display: flex; }

/* Landing */
.hero.compact { padding-block: clamp(18px, 3vw, 36px); }
.hero.compact h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.hero.compact .lead { font-size: 1.0625rem; margin-bottom: 0; }
.city-cards { display: grid; gap: 10px; }
.city-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: #fff; text-decoration: none; transition: border-color .15s; }
.city-card:hover { border-color: var(--ink); }
.cc-img { display: flex; } .cc-img img { width: 52px; height: 52px; object-fit: cover; margin-left: -10px; border: 2px solid #fff; border-radius: 8px; background: var(--surface-2); } .cc-img img:first-child { margin-left: 0; }
.cc-body b { display: block; font: 800 1.25rem var(--display); } .cc-body small { color: var(--ink-3); }

/* Workspace fills the first screen: list | map | route */
.topbar { border-bottom: 1.5px solid var(--line); background: var(--surface); }
.topbar .row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-block: 12px; }
.topbar h1 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); }
.work-section { padding: 14px 0 6px; }
.work-body { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); height: clamp(520px, calc(100svh - 64px - 150px), 800px); min-height: 0; }
.list-col { max-height: none; height: 100%; min-height: 0; }
.map-col { height: 100%; min-height: 0; } #map { height: 100%; min-height: 0; }
.route-col { border-top: 0; border-left: 1.5px solid var(--line); overflow-y: auto; min-height: 0; }
.route-col .stops { max-height: none; }
@media (max-width: 1180px) {
  .work-body { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); height: auto; }
  .list-col, .map-col { height: clamp(460px, calc(100svh - 230px), 640px); }
  .route-col { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--line); }
}
@media (max-width: 860px) {
  .work-body { grid-template-columns: 1fr; }
  .map-col { order: -1; height: 300px; } .list-col { height: 420px; border-right: 0; border-top: 1.5px solid var(--line); }
  .route-col { order: 0; }
  .hero.compact .grid { grid-template-columns: 1fr; }
  .feature.compact { grid-template-columns: 1fr; }
}

/* Shop page */
.shop-head { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.hero-photo { aspect-ratio: 16 / 9; }
.shop-main { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px 24px; align-items: start; }
.shop-main .mini-map { margin: 0; height: 100%; min-height: 240px; }
.hours td { padding: 4px 0; font-size: 0.9375rem; } .hours td:first-child { width: 3.5em; }
@media (max-width: 1000px) { .shop-main { grid-template-columns: 1fr 1fr; } .shop-main .mini-map { grid-column: 1 / -1; height: 240px; } }
@media (max-width: 640px) { .shop-main { grid-template-columns: 1fr; } .shop-head { grid-template-columns: 1fr; } }
details.fold > summary { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; cursor: pointer; list-style: none; font: 800 1.125rem var(--display); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; font: 700 1.5rem var(--text); margin-left: auto; }
details.fold[open] > summary::after { content: "–"; }
details.fold > summary .small { font: 400 0.875rem var(--text); }
.fold-body { margin-top: 16px; }
.composer.fold > summary { font-size: 1rem; }

/* Festival: pick an artist, see its records */
.fest-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.artist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: calc(100svh - 190px); min-height: 360px; overflow-y: auto; position: sticky; top: 76px; }
.artist-list button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font: 600 0.9375rem var(--text); text-align: left; cursor: pointer; }
.artist-list button:hover { border-color: var(--ink); }
.artist-list button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.artist-list .n { opacity: .65; font-variant-numeric: tabular-nums; font-weight: 500; }
.artist-panel[hidden] { display: none; }
.artist-panel .tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
@media (max-width: 860px) {
  .fest-app { grid-template-columns: 1fr; }
  .artist-list { flex-direction: row; max-height: none; min-height: 0; position: static; overflow-x: auto; padding-bottom: 6px; }
  .artist-list li { flex: 0 0 auto; } .artist-list button { width: auto; white-space: nowrap; border-radius: 999px; }
}

/* Records, profile */
.wl.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .wl.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .wl.three { grid-template-columns: 1fr; } }
.pf-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .pf-grid { grid-template-columns: 1fr; } }

/* Mobile bottom tab bar */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1.5px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 56px; font: 600 0.8125rem var(--text); text-decoration: none; color: var(--ink-3); }
  .tabbar a[aria-current="page"] { color: var(--red); box-shadow: inset 0 3px 0 var(--red); }
  body { padding-bottom: 60px; }
  .hdr nav > a:not([hreflang]) { display: none; }
  .toast { bottom: 76px; }
}


/* Mobile: less vertical space */
@media (max-width: 860px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .chips .tab { flex: 0 0 auto; }
  .stats.inline { display: none; }
  .artist-panel .tiles { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .artist-panel .tile { flex: 0 0 160px; scroll-snap-align: start; }
  .share { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .share .btn { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .cc-img { display: none; }
  .city-card { grid-template-columns: 1fr auto; }
  .hero.compact h1 { font-size: 1.625rem; }
  .shop-main .lead { font-size: 1rem; }
}
.btn.prov small { font-size: 0.8125rem; line-height: 1.2; }


/* Share: one button; native sheet on touch devices, small menu with network icons elsewhere */
.share { display: inline-flex; }
.share .share-btn { --btn: transparent; --btn-ink: var(--ink); border-color: var(--ink); min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.share .share-btn:hover { --btn: var(--ink); --btn-ink: #fff; }
.ico { width: 18px; height: 18px; flex: none; }
.share-pop { position: absolute; z-index: 80; width: min(92vw, 340px); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.share-net { display: grid; justify-items: center; gap: 6px; padding: 8px 2px; border-radius: 10px; text-decoration: none; font: 600 0.8125rem var(--text); color: var(--ink); }
.share-net:hover { background: var(--surface); }
.share-net .dot { width: 46px; height: 46px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; }
.share-net .dot .ico { width: 22px; height: 22px; }
.share-copy { display: flex; gap: 8px; align-items: center; }
.share-copy .field { min-height: 42px; font-size: 0.8125rem; }
.share-copy .btn { flex: none; }
.actions .share { flex-basis: auto; }


/* Mobile: list OR map, never both stacked */
.seg { display: none; }
.fest-app > *, .artist-panels { min-width: 0; }
@media (max-width: 860px) {
  .seg { display: flex; gap: 6px; padding: 10px 14px; background: var(--surface); border-bottom: 1.5px solid var(--line); }
  .seg .tab { flex: 1; justify-content: center; }
  .work-body[data-view="list"] .map-col { display: none; }
  .work-body[data-view="map"] .list-col { display: none; }
  .work-body[data-view="map"] .map-col { height: 62svh; }
  .toolbar { border-bottom: 0; }
}


/* Cities menu in the header, cities grid on the landing */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; padding: 10px 2px; font-weight: 600; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " ▾"; font-size: .75em; }
.menu-panel { position: absolute; top: calc(100% + 6px); left: -12px; min-width: 230px; background: #fff; color: var(--ink); border-radius: 12px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.22); display: grid; z-index: 70; }
.menu-panel a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.menu-panel a:hover { background: var(--surface); text-decoration: none; }
.menu-panel small { color: var(--ink-3); font-weight: 500; }
.cities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.cities-grid .city-card { grid-template-columns: auto 1fr; }
@media (max-width: 560px) { .cities-grid .city-card { grid-template-columns: 1fr; } }


/* Concert series: a list of concerts (date, title, venue) beside the records of whoever plays */
.artist-list.concerts { max-height: calc(100svh - 250px); }
.artist-list.concerts button { align-items: flex-start; text-align: left; padding: 8px 12px; min-height: 58px; }
.artist-list.concerts .cl { display: grid; gap: 1px; min-width: 0; }
.artist-list.concerts .cl b { font-size: 0.8125rem; opacity: .75; font-weight: 600; }
.artist-list.concerts .cl small { font-size: 0.8125rem; opacity: .7; font-weight: 500; }
.artist-list.concerts .n { font-size: 1rem; opacity: 1; color: var(--red); }
.artist-list.concerts button[aria-pressed="true"] .n { color: #fff; }
.ser-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.ser-bar .field { flex: 1 1 240px; max-width: 360px; }
.artist-panel h4 { font: 800 1.0625rem var(--display); margin: 18px 0 8px; }
@media (max-width: 860px) { .artist-list.concerts { max-height: 320px; flex-direction: column; overflow-y: auto; } .artist-list.concerts button { width: 100%; border-radius: 8px; white-space: normal; } }


/* Feedback: the page answers when you choose something */
.artist-panel { scroll-margin-top: 76px; animation: panel-in .18s ease-out; }
@keyframes panel-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tile img:not(.ok), .rec img.cov:not(.ok), .feed img:not(.ok) { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { background-color: var(--line); } }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #fff; color: var(--red); font: 800 0.75rem var(--text); vertical-align: 1px; }
.tabbar .badge { background: var(--red); color: #fff; margin-left: 4px; }
.toast { display: flex; gap: 14px; align-items: center; }
.toast a { color: #fff; font-weight: 700; text-decoration: underline; pointer-events: auto; }
.toast.link { pointer-events: auto; }
.btn[aria-pressed="true"] .tick, .tile .btn[aria-pressed="true"]::before { content: "✓ "; }
@media (prefers-reduced-motion: reduce) { .artist-panel, .tile img:not(.ok), .rec img.cov:not(.ok), .feed img:not(.ok) { animation: none; } }


/* "What next" bar: appears after you save a record, with the two natural next steps */
.nextbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1.5px solid var(--line); box-shadow: 0 -8px 30px rgba(0,0,0,.12); animation: nb-in .25s ease-out; }
@keyframes nb-in { from { transform: translateY(100%); } to { transform: none; } }
.nextbar .in { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.nb-covers { display: flex; } .nb-covers img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 2px solid #fff; margin-left: -10px; background: var(--surface-2); } .nb-covers img:first-child { margin-left: 0; }
.nb-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 200px; } .nb-text b { font: 800 1.0625rem var(--display); } .nb-text span { font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.has-nextbar { padding-bottom: 84px; }
body.has-nextbar .toast { bottom: 100px; }
@media (max-width: 860px) {
  .nextbar { bottom: 56px; padding-bottom: 0; }
  body.has-nextbar { padding-bottom: 150px; }
  body.has-nextbar .toast { bottom: 190px; }
  .nb-actions { width: 100%; } .nb-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .nextbar { animation: none; } }

/* ---------- My plan ---------- */
.shopcity { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; } .shopcity .lbl { margin: 0; font-weight: 700; }
.tab .n { margin-left: 6px; font-size: 0.75rem; opacity: .7; }
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 14px; }
.plan-bar .shopcity { margin: 0; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 18px; align-items: start; }
.plan-side { position: sticky; top: 76px; display: grid; gap: 12px; }
#plan-map { height: 280px; border-radius: 12px; border: 1.5px solid var(--line); overflow: hidden; background: var(--surface-2); }
.plan-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stop { border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 12px; min-width: 0; }
.stop-h { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.stop-h .pin { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 0.8125rem var(--display); }
.stop-h .pin.off { background: var(--surface-2); color: var(--ink-3); }
.stop-t { display: grid; min-width: 0; } .stop-t a { font-weight: 800; text-decoration: none; } .stop-t a:hover { color: var(--red); }
.stop-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-item { display: grid; grid-template-columns: auto 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.plan-away .plan-item { grid-template-columns: 48px minmax(0, 1fr); }
.plan-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.plan-item .tt { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .plan-item .tt a { text-decoration: none; } .plan-item .tt a:hover { color: var(--red); }
.pi-body { min-width: 0; } .pi-p { font: 800 0.9375rem var(--display); }
.got-box { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; } .got-box input { width: 22px; height: 22px; accent-color: var(--ok); }
.plan-item.got .pi-body, .plan-item.got img { opacity: .5; } .plan-item.got .tt { text-decoration: line-through; }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.chip-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; min-height: 32px; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .chip-btn:hover { border-color: var(--ink); }
.plan-away { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tile.no-city { opacity: .75; } .tile.no-city .pr { font: 600 0.8125rem var(--text); color: var(--ink-3); }
@media (max-width: 860px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); } .plan-side { position: static; order: -1; } #plan-map { height: 220px; }
}

/* ---------- Shop check-in panel ---------- */
.ck-detail { margin-top: 12px; }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ck-detail textarea.field { min-height: 84px; resize: vertical; }
.ck-older { margin-top: 10px; } .ck-older summary { cursor: pointer; font-weight: 600; padding: 8px 0; }

.plan-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.plan-name { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .plan-name .field { max-width: 320px; min-height: 40px; font-weight: 700; }

.plan-copy { max-width: 100%; min-height: 32px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; padding: 2px 10px; font: 600 0.75rem var(--text); color: var(--ink-2); }

.plan-create { margin-bottom: 12px; } .plan-create h3 { margin-bottom: 8px; }
.plan-free { display: flex; flex-wrap: wrap; gap: 8px; } .plan-free .field { flex: 1 1 180px; min-height: 44px; } .plan-free select.field { flex: 0 1 200px; }
#plan-hint { margin: 0 0 12px; }

.plan-shops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ex-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-t { display: grid; flex: 1 1 200px; min-width: 0; } .ex-t a { font-weight: 800; text-decoration: none; } .ex-t a:hover { color: var(--red); }
.ex-recs { margin-top: 10px; }
.stop-h { grid-template-columns: 32px minmax(0, 1fr) auto auto; }

.route-plan { display: grid; gap: 4px; margin: 0 0 10px; } .route-plan .lbl { margin: 0; font-size: 0.8125rem; color: var(--ink-3); } .route-plan select.field { min-height: 40px; font-weight: 700; }

.join.wait .panel { visibility: hidden; }

/* ---- pulido 1 ---- */
.band .add { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.band .add .ico { font-weight: 800; }
.sub-actions { margin-top: 10px; gap: 8px; display: flex; flex-wrap: wrap; align-items: center; }
.textlink { font-weight: 600; color: var(--ink-2); text-underline-offset: 3px; } .textlink:hover { color: var(--red); }
.tile .t { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) {
  .band { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px; gap: 2px 10px; }
  .band .thumb { width: 56px; height: 56px; }
  .band .add { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .band .add .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .band .add .ico { font-size: 1.25rem; line-height: 1; }
}
.sub-actions .share { display: inline-block; } .sub-actions .share .btn { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }

/* ---- cerca de mí / abiertas ahora ---- */
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick .tab { min-height: 44px; font-weight: 700; }
.quick .tab[aria-busy="true"] { opacity: .6; cursor: progress; }
.dist { color: var(--ink-2); font-weight: 600; }
#shop-dist { margin-left: 10px; font-size: 0.8125rem; }

/* ---- contenido diferencial de la ciudad ---- */
.intro { padding: 14px 0 4px; }
.city-intro { max-width: 70ch; margin: 0 0 12px; font-size: 1.0625rem; }
.diff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.diff li { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; display: grid; gap: 2px; align-content: start; }
.diff b { font: 800 0.9375rem var(--display); } .diff span { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.35; }
.faq h2 { margin-bottom: 8px; }
.faq-list { margin: 0 0 12px; display: grid; gap: 10px; max-width: 80ch; }
.faq-list dt { font-weight: 700; } .faq-list dd { margin: 2px 0 0; color: var(--ink-2); }
@media (max-width: 860px) { .diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .diff { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 8px; padding-bottom: 4px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .diff li { flex: 0 0 210px; scroll-snap-align: start; }
}

.intro-more { display: none; padding: 0 0 8px; font-weight: 700; }
@media (max-width: 560px) {
  .city-intro { font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
  .city-intro.open { display: block; overflow: visible; }
  .intro-more { display: inline-block; }
}

/* ---- plan más simple: el resultado primero, los controles recogidos ---- */
details > summary { cursor: pointer; }
.plan-options { padding: 0; margin-bottom: 12px; }
.plan-options > summary, .plan-search > summary, #plan-explore > summary, .plan-map-d > summary { list-style: none; padding: 12px 14px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-options > summary::-webkit-details-marker, .plan-search > summary::-webkit-details-marker, #plan-explore > summary::-webkit-details-marker, .plan-map-d > summary::-webkit-details-marker { display: none; }
.plan-options .opt-lbl { font-weight: 600; font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; } .plan-options .opt-lbl::after { content: " ▾"; }
.plan-options[open] .opt-lbl::after { content: " ▴"; }
.plan-options .opt-body { padding: 0 14px 14px; display: grid; gap: 12px; }
.plan-name { margin: 0; } .plan-bar { margin: 0; }
.plan-save-row { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-search, #plan-explore { padding: 0; } .plan-search[open] { padding-bottom: 14px; } .plan-search > :not(summary) { margin-inline: 14px; }
#plan-explore > :not(summary) { margin-inline: 14px; } #plan-explore[open] { padding-bottom: 14px; }
.plan-search { margin-top: 14px; }
.plan-map-d { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.plan-map-d[open] > summary { border-bottom: 1px solid var(--line); }
.plan-map-d #plan-map { border: 0; border-radius: 0; }
.pi-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.plan-item { grid-template-columns: auto 48px minmax(0, 1fr); }
.plan-item .pi-line .link-btn { padding: 4px 8px; font-size: 1.125rem; line-height: 1; }
@media (max-width: 860px) {
  .plan-lead { display: none; }
  .got-box { width: 36px; }
  .plan-side { gap: 10px; }
  .plan-summary .sum { font: 800 1.125rem var(--display); margin: 0; }
}

/* ---- directorio ---- */
.drows { list-style: none; margin: 0; padding: 0; }
.drow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.drow[hidden] { display: none; }
.drow .thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font: 800 1.125rem var(--display); color: var(--ink-3); }
.drow .thumb img { width: 100%; height: 100%; object-fit: cover; }
.drow .body { min-width: 0; display: grid; gap: 1px; }
.drow .name { font: 700 1rem/1.25 var(--text); text-decoration: none; overflow-wrap: anywhere; } .drow .name:hover { color: var(--red); text-decoration: underline; }
.drow .meta { font-size: 0.8125rem; color: var(--ink-3); }
.drow .go { white-space: nowrap; }
#dir .toolbar { display: grid; gap: 10px; margin-bottom: 8px; }
#dir select.field { max-width: 360px; }
@media (max-width: 560px) { .drow { grid-template-columns: 48px minmax(0, 1fr); } .drow .thumb { width: 48px; height: 48px; } .drow .go { grid-column: 2; justify-self: start; } }
.menu-panel a b { font-weight: 800; }

/* ---- mis discos en la lista de la ciudad ---- */
.wish-n { color: var(--red); font-weight: 700; }

/* ---- ronda 1: la entrada es una búsqueda y «cerca de mí» ---- */
.home-search { position: relative; display: flex; gap: 8px; margin-top: 14px; max-width: 560px; }
.home-search .field { flex: 1 1 auto; min-height: 52px; font-size: 1rem; }
.home-search .btn { min-height: 52px; white-space: nowrap; }
.home-search .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.hs-list { position: absolute; z-index: 30; top: 58px; left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.hs-list li { border-radius: 8px; } .hs-list li a { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 12px; text-decoration: none; min-height: 44px; }
.hs-list li[aria-selected="true"], .hs-list li:hover { background: var(--surface); } .hs-list li.muted { padding: 12px; }
.hs-links { margin: 10px 0 0; }
@media (max-width: 860px) { .hero .plan-lead { display: none; } .hero .mosaic { display: none; } }

/* ---- ronda 2: filtros recogidos, etiquetas y ciudades cercanas ---- */
.filters { border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.filters > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-weight: 700; }
.filters > summary::-webkit-details-marker { display: none; } .filters > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); } .filters[open] > summary::after { content: "▴"; }
.filters > summary .n { background: var(--ink); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 0.75rem; line-height: 20px; }
.filters-body { display: grid; gap: 12px; padding: 0 14px 14px; } .fgroup { display: grid; gap: 6px; } .fgroup .lbl { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
.band .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .tag { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border-radius: 999px; padding: 1px 8px; }
.nc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.nc-list a { display: grid; gap: 1px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; text-decoration: none; background: #fff; } .nc-list a:hover { border-color: var(--ink); }
.nc-list span { font-size: 0.8125rem; color: var(--ink-3); }
/* en el móvil las «razones» ya son los botones de abajo; el texto sigue en la página para quien lo lee y para el buscador */
@media (max-width: 560px) { .diff { display: none; } .intro { padding-bottom: 0; } }

/* ---- ronda 3: ficha de tienda ---- */
.go-for { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 10px; }
.shop-head .row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .hero-photo img { aspect-ratio: 16 / 8; object-fit: cover; width: 100%; } }

/* ---- contenido propio: rutas temáticas y «cerca de aquí» ---- */
.rstops { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 0; }
.rstops li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rstops .pin { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 0.8125rem var(--display); }
.rstops .name { font: 700 1.0625rem/1.25 var(--text); text-decoration: none; } .rstops .name:hover { color: var(--red); text-decoration: underline; }
.rstops .meta { font-size: 0.8125rem; color: var(--ink-3); } .rstops .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.rbody { display: grid; gap: 1px; min-width: 0; }

/* ---- transporte: tramos largos ---- */
.stop-t .leg-link { font-size: 0.8125rem; font-weight: 700; text-underline-offset: 3px; margin-top: 2px; }

/* ---- accesibilidad móvil: objetivos táctiles de al menos 44 px ---- */
.tab, .chip-btn { min-height: 44px; }
.btn.small-btn { min-height: 44px; }
.link-btn { min-height: 44px; padding: 10px 8px; }
.intro-more { min-height: 44px; }
.hdr .mark, .hdr nav a, .hdr nav summary { min-height: 44px; display: inline-flex; align-items: center; }
.tabbar a { min-height: 48px; }
.post-actions .btn, .tile .btn, .acts .btn, select.field, .field { min-height: 44px; }
/* enlaces sueltos que se tocan: «← Volver», nombres de tienda en listas, pestañas de artista, campos */
.crumb, .drow .name, .stop-t a, .plan-item .tt a, .rstops .name, .band .name { display: inline-flex; align-items: center; min-height: 44px; }
.drow .name { min-height: 28px; padding: 8px 0; box-sizing: content-box; }
.tabs .tab, .artists .tab, .chips .tab { min-height: 44px; }
.nc-list a { min-height: 44px; }
.btn, button.btn { min-height: 44px; }
.stars button { min-height: 44px; min-width: 44px; }
.share-pop button, .share-pop a { min-height: 44px; }
.plan-search input, #plan-name { min-height: 44px; }
.link-btn { min-width: 44px; }
.ex .btn { min-height: 44px; }

/* ---- accesibilidad táctil: objetivos de al menos 44 px ---- */
.btn.small-btn, .tab, .route-plan select.field { min-height: 44px; }
.crumb { display: inline-flex; align-items: center; min-height: 44px; }
.drow .name { display: inline-block; padding: 8px 0 2px; }
.leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
/* últimos objetivos pequeños: tienda de la ciudad en el plan, artistas, compartir, selector de plan y controles del mapa */
.ex-t a, .artist-h a { display: inline-flex; align-items: center; min-height: 44px; }
.artist-list button { min-height: 44px; }
.route-plan select.field, .sub-actions .share .btn { min-height: 44px; }
.tile .a a, .tile .shops a { display: inline-block; padding: 10px 0; }
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 1.25rem; }
.tile .a a { display: inline-block; padding: 12px 3px; margin: -4px 0; }
.drow .name { min-height: 44px; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; }

/* ---- sitios de interés para melómanos ---- */
.pgroup { border: 1.5px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 8px; }
.pgroup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; font-weight: 800; }
.pgroup > summary::-webkit-details-marker { display: none; } .pgroup > summary::after { content: "▾"; color: var(--ink-3); margin-left: 8px; } .pgroup[open] > summary::after { content: "▴"; }
.pgroup > summary .n { margin-left: auto; font-weight: 600; font-size: 0.8125rem; color: var(--ink-3); }
.prows { list-style: none; margin: 0; padding: 0 14px 6px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.prow .name { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; } .prow .name:hover { color: var(--red); text-decoration: underline; }
.prow .meta { font-size: 0.8125rem; color: var(--ink-3); }
.prow .padd { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.prow .padd .ico { font-weight: 800; }
@media (max-width: 560px) { .prow .padd { width: 44px; padding: 0; justify-content: center; border-radius: 50%; } .prow .padd .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---- tu wishlist en cada tienda ---- */
.wish-d { margin: 4px 0 0; font-size: 0.8125rem; }
.wish-d > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--red); list-style: none; }
.wish-d > summary::-webkit-details-marker { display: none; } .wish-d > summary::after { content: " ▾"; } .wish-d[open] > summary::after { content: " ▴"; }
.wish-here { list-style: none; margin: 0 0 6px; padding: 0; }
.wish-here li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.wish-here a { overflow-wrap: anywhere; }

/* ---- ciudad: lo secundario, plegado ---- */
.more-city { padding-top: 8px; }
.more-d { border-top: 1px solid var(--line); }
.more-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 52px; font-weight: 800; }
.more-d > summary::-webkit-details-marker { display: none; }
.more-d > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); } .more-d[open] > summary::after { content: "▴"; }
.more-d > summary .n { margin-left: 8px; font-weight: 600; font-size: 0.8125rem; color: var(--ink-3); }
.more-d[open] { padding-bottom: 12px; }
.more-links { margin: 14px 0 0; line-height: 1.9; } .more-links .textlink { white-space: nowrap; }

.only-here { display: inline-block; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red); margin-bottom: 2px; }

/* ---- fila de tienda más limpia en la columna estrecha ---- */
.band .add { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.band .add .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.band .add .ico { font-size: 1.25rem; line-height: 1; }
.band .add[aria-pressed="true"] .ico { font-size: 1rem; }
.band .tags { flex-wrap: nowrap; overflow: hidden; }
.band .tags .tag:nth-child(n+3) { display: none; }
.band .tag { white-space: nowrap; }
.band .wish-d > summary { min-height: 32px; }
.band .status { font-size: 0.8125rem; }

#route[hidden] { display: none !important; }

/* ---- cómo llegar de la ciudad a Mi plan ---- */
.howto { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ink-2); font-weight: 600; }
.howto[hidden] { display: none; }
.howto .step { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; }

/* ---- ciudad: la presentación ocupa dos líneas en todas las pantallas; el resto, bajo «Leer más» ---- */
.city-intro { font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.city-intro.open { display: block; overflow: visible; }
.intro-more { display: inline-flex; align-items: center; padding: 0 0 4px; }
.intro { padding: 10px 0 0; }

/* ---- el mapa y la lista caben en la pantalla (cabecera, filtros y barra del plan incluidos) ---- */
@media (min-width: 861px) {
  .work-body { height: clamp(380px, calc(100svh - 340px), 720px); }
  .list-col, .map-col { height: 100%; }
}

.pinm.poi { background: #2f5fb3; width: 20px; height: 20px; border-width: 2px; }
/* el mapa y la lista, más pequeños: como mucho 560 px de alto */
@media (min-width: 861px) { .work-body { height: clamp(380px, calc(100svh - 340px), 560px); } }

/* ---- mapa compacto: columna estrecha a la derecha, la lista manda ---- */
@media (min-width: 861px) {
  .work-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); height: clamp(360px, calc(100svh - 340px), 480px); }
  .list-col { order: 1; border-right: 0; } .map-col { order: 2; border-left: 1.5px solid var(--line); }
}

/* ---- añadir tiendas o sitios desde Mi plan ---- */
.plan-add > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 52px; color: var(--red); font-size: 1.0625rem; }
.plan-add > summary::-webkit-details-marker { display: none; }
.plan-add { border-color: var(--red); }
.ex-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.ex-tools .field { flex: 1 1 180px; min-height: 44px; }

/* ---- paseos sugeridos ---- */
.sug-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sug-card { border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sug-card h3 { font-size: 1.125rem; margin: 0; }
.sug-names { font-size: 0.875rem; margin: 0 0 6px; line-height: 1.5; }
.sug-card .btn { align-self: flex-start; margin-top: auto; }

/* ---- festival con cartel por días (Primavera Sound) ---- */
.fx-lead { font-size: 1.0625rem; margin: 0 0 14px; max-width: 62ch; }
.fx-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 10px; max-width: 640px; }
.fx-stats li { border-top: 3px solid var(--red); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-stats b { font: 800 clamp(1.75rem, 7vw, 2.5rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.fx-stats span { font-size: 0.8125rem; line-height: 1.3; color: var(--ink-2); }
.fx-days { margin: 0 0 14px; }
.fx-days .tab { flex: 1 1 0; justify-content: center; padding: 0 8px; min-width: 56px; white-space: nowrap; }
.fx-days .tab .n { margin-left: 0; }
.fx-list li[hidden] { display: none; }
.fx-list button.has-pick::after { content: "✓"; margin-left: 2px; color: var(--red); font-weight: 800; }
.fx-list button.has-pick[aria-pressed="true"]::after { color: #fff; }
.day-none { margin: 18px 0 0; line-height: 1.6; max-width: 90ch; }
.day-none[hidden] { display: none; }
.fx-other { margin-top: 14px; }
.fx-other summary, .fx-shop summary { cursor: pointer; }
.fx-other summary { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; }
.sug-cross { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.fx-shops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px; align-items: start; }
.fx-shop { border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 0 14px; }
.fx-shop summary { list-style: none; min-height: 56px; padding: 10px 22px 10px 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; position: relative; }
.fx-shop summary::-webkit-details-marker { display: none; }
.fx-shop summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 800 1.25rem var(--display); color: var(--red); }
.fx-shop[open] summary::after { content: "–"; }
.fx-shop .sn { font-weight: 700; } .fx-shop .sm { font-size: 0.8125rem; color: var(--ink-2); }
.fx-shop ul { list-style: none; margin: 0 0 10px; padding: 10px 0 0; border-top: 1.5px solid var(--line); display: grid; gap: 2px; font-size: 0.9375rem; }
.fx-shop li a { display: inline-block; padding: 12px 0; min-width: 44px; }
.fx-shop > .btn { margin: 0 0 14px; }
.fx-allshops { margin-top: 10px; } .fx-allshops > summary { list-style: none; display: inline-flex; } .fx-allshops > summary::-webkit-details-marker { display: none; }
.fx-allshops[open] > summary { display: none; } .fx-allshops .fx-shops { margin-top: -2px; }
.fx-src { margin: 10px 0 0; }
.fx-off { display: inline-block; padding: 12px 0; }
@media (max-width: 860px) {
  /* los artistas del día en dos filas que se deslizan: los discos del elegido quedan a la vista justo debajo */
  .artist-list.fx-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; gap: 6px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .artist-list.fx-list li { scroll-snap-align: start; }
}
/* ---- portada compacta: sin mosaico de portadas (ocupaba media pantalla y salían pixeladas) ---- */
.hero.compact .grid { grid-template-columns: 1fr; }
.hero.compact .wrap > .grid > div { max-width: 720px; }
.city-card .cc-img { display: none; }

/* ---- tira de portadas: pequeñas (88 px, sin ampliar) para que no se pixelen ---- */
.cover-strip { display: flex; gap: 8px; margin-top: 18px; overflow: hidden; }
.cover-strip a { flex: 0 0 auto; display: block; }
.cover-strip img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-2); }
@media (max-width: 560px) { .cover-strip img { width: 64px; height: 64px; } .cover-strip a:nth-child(n+5) { display: none; } }

/* ---- mosaico pequeño a la derecha del buscador (escritorio); fila corta en móvil ---- */
@media (min-width: 861px) {
  .hero.compact .grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hero.compact .wrap > .grid > div:first-child { max-width: 640px; }
  .cover-strip { display: grid; grid-template-columns: repeat(3, 96px); grid-auto-rows: 96px; gap: 8px; margin: 0; }
  .cover-strip img { width: 96px; height: 96px; }
  .cover-strip a:nth-child(n+7) { display: none; }
}
@media (max-width: 860px) { .cover-strip { margin-top: 14px; } .cover-strip a:nth-child(n+8) { display: none; } }
/* ronda 28: en la página del cartel, «Lo quiero» va primero y a todo el ancho; Vinilogy, debajo */
.fx-app .tile .acts .btn { flex: 1 1 100%; justify-content: center; }
.fx-app .tile .acts a.btn { order: 2; }
.fx-days .tab .n { font-size: 0.8125rem; }

/* ronda 29: ruta ya hecha por día, mapa y fotos de las tiendas */
.fx-dayroute { margin-top: 18px; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; padding: 14px 16px; display: grid; gap: 6px; max-width: 720px; }
.fx-dayroute[hidden] { display: none; }
.fx-dayroute h3 { font-size: 1.125rem; margin: 0; } .fx-dayroute p { margin: 0; line-height: 1.45; }
.fx-dayroute .btn { justify-self: start; margin-top: 4px; }
.fx-map { height: 320px; border-radius: 12px; border: 1.5px solid var(--line); overflow: hidden; background: var(--surface-2); z-index: 0; }
@media (min-width: 861px) { .fx-map { height: 420px; } }
.pinm.site { background: var(--ink); width: 34px; height: 34px; font-size: 11px; border-radius: 8px; }
.fx-shop.has-ph summary { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-items: center; padding-block: 8px; }
.fx-shop .ph { grid-row: 1 / span 2; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); display: block; }
.fx-shop.has-ph .sn { align-self: end; } .fx-shop.has-ph .sm { align-self: start; }

.fx-map { position: relative; }
.fx-map-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 500; background: rgba(17,17,17,.82); color: #fff; font: 600 0.8125rem var(--text); padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; }

/* ronda 30: cabecera del Primavera sobre un mosaico de portadas de discos del cartel que hay hoy en Barcelona */
.fxhead { position: relative; overflow: hidden; background: #111; color: #fff; border-bottom: 0; }
.fxhead .wrap { position: relative; z-index: 1; }
.fx-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; }
.fx-mosaic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.fx-mosaic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.74) 0%, rgba(17,17,17,.86) 55%, rgba(17,17,17,.93) 100%); }
@media (min-width: 700px) { .fx-mosaic { grid-template-columns: repeat(9, 1fr); } }
@media (min-width: 1200px) { .fx-mosaic { grid-template-columns: repeat(12, 1fr); } }
.fxhead h1 { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.fxhead .muted, .fxhead .fx-lead, .fxhead .fx-stats span { color: rgba(255,255,255,.92); }
.fxhead .fx-stats b { color: #fff; }
.fxhead { padding-block: clamp(18px, 3vw, 36px) clamp(16px, 2.4vw, 28px); }

/* pestañas de día: cinco columnas iguales, el día arriba y debajo cuántos artistas tienen vinilo (antes iban apretados en una línea) */
.fx-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.fx-days .tab { flex-direction: column; gap: 3px; min-height: 58px; min-width: 0; padding: 8px 4px; border-radius: 12px; font-size: 0.9375rem; }
.fx-days .tab .n { font-size: 0.8125rem; line-height: 1; opacity: .7; }
@media (max-width: 860px) {
  /* cada artista ocupa todo el ancho de su columna: sin huecos entre los de arriba y los de abajo */
  .artist-list.fx-list button { width: 100%; justify-content: space-between; }
}
@media (max-width: 860px) {
  /* artistas del día: todos a la vista, cada uno con su ancho, saltando de línea (sin deslizar y sin huecos) */
  .artist-list.fx-list { display: flex; flex-wrap: wrap; overflow: visible; padding-bottom: 0; gap: 8px; scroll-snap-type: none; }
  .artist-list.fx-list button { width: auto; }
}
@media (max-width: 860px) {
  .artist-list.fx-list { gap: 6px; }
  .artist-list.fx-list button { padding: 0 12px; font-size: 0.875rem; gap: 6px; }
}

/* artistas del día en el móvil: dos filas a la vista y un botón para abrir el resto (menos scroll) */
.fx-more { display: none; }
@media (max-width: 860px) {
  .artist-list.fx-list.folded { max-height: 94px; overflow: hidden; }
  .fx-more:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0 2px; border: 0; background: none; font: 600 0.9375rem var(--text); color: var(--red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
}

/* títulos de disco: sin partir palabras con guion («Belie-ve») */
.tile .t { hyphens: manual; overflow-wrap: break-word; }

/* Mi plan: discos del cartel del festival en cada parada */
.fest-here { margin: 6px 0 2px; padding: 10px 12px; border-left: 3px solid var(--red); background: var(--surface); border-radius: 0 8px 8px 0; font-size: 0.875rem; }
.fest-here .fh-h { margin: 0 0 4px; font-weight: 700; }
.fest-here .wish-here { margin: 0; padding: 0; list-style: none; }
.fest-here .wish-here li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 2px 0; }
.fest-here .wish-here a { display: inline-block; padding: 9px 0; }
.fest-here .wish-here a { display: inline; padding: 0; } .fest-here .wish-here li { padding: 9px 0; line-height: 1.4; }
.fest-none { margin: 4px 0 0; }

/* ronda 32: lo secundario, plegado y con título que dice lo que hay dentro */
.fx-fold { border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 0 16px; margin-top: 12px; }
.fx-fold > summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 1rem; }
.fx-fold > summary::-webkit-details-marker { display: none; }
.fx-fold > summary::after { content: "+"; font: 800 1.375rem var(--display); color: var(--red); flex: 0 0 auto; }
.fx-fold[open] > summary::after { content: "–"; }
.fx-fold > summary h2 { font-size: 1.0625rem; margin: 0; }
.fx-fold[open] { padding-bottom: 16px; }
.fx-fold.day-none { margin-top: 14px; max-width: 720px; } .fx-fold.day-none p { margin: 0; line-height: 1.6; }
.fx-fold .fx-map { margin-top: 14px; }
.fx-more-sec .wrap > .fx-fold:first-child { margin-top: 0; }

/* ruta de todo el festival: corta (botón principal) y completa (secundario) */
.fx-troute-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fx-dayroute p[hidden] { display: none; }

/* barra del plan en el móvil: una sola fila (texto a la izquierda, botón a la derecha); antes eran dos y tapaba media pantalla */
@media (max-width: 860px) {
  .nextbar .in { flex-wrap: nowrap; padding: 8px var(--gutter); gap: 10px; }
  .nb-covers { display: none; }
  .nb-text { flex: 1 1 auto; } .nb-text b { font-size: 0.9375rem; line-height: 1.2; }
  .nb-actions { width: auto; flex: 0 0 auto; } .nb-actions .btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 14px; }
  body.has-nextbar { padding-bottom: 124px; }
  body.has-nextbar .toast { bottom: 140px; }
}

/* el buscador de discos de Mi plan no se sale del recuadro */
.plan-search .field, #wl-q { width: 100%; max-width: 100%; box-sizing: border-box; }

/* ---- reordenar paradas ---- */
.mv-box { display: flex; gap: 4px; margin-left: auto; }
.mv { min-width: 44px; min-height: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.125rem; font-weight: 800; cursor: pointer; color: var(--ink); }
.mv:disabled { opacity: .3; cursor: default; }
.mv:not(:disabled):active { background: var(--surface-2); }
#order-auto { margin: 0 0 8px; min-height: 44px; }

/* tiendas con discos del concierto, cerca de la sala */
.near-venue { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.6; }
.near-venue a { font-weight: 700; }