:root {
  --forest-950: #0b271d;
  --forest-900: #103629;
  --forest-800: #174b37;
  --forest-700: #236248;
  --olive: #8ba43a;
  --olive-light: #c5d877;
  --gold: #dcae58;
  --cream: #f5f0e5;
  --paper: #fbf9f3;
  --ink: #18231d;
  --muted: #667068;
  --line: #dcded6;
  --white: #fff;
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --shadow: 0 18px 48px rgba(22, 48, 36, .12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
body.dialog-open { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: #fff; padding: .8rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  color: var(--white);
  transition: .3s ease;
}
.site-header.scrolled { height: 72px; color: var(--forest-950); background: rgba(251, 249, 243, .93); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(23, 60, 43, .1); }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; }
.brand-mark svg { width: 100%; height: 100%; fill: var(--olive-light); }
.brand-mark .fork { fill: none; stroke: var(--forest-950); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-header.scrolled .brand-mark svg { fill: var(--olive); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-family: var(--serif); font-size: 1.3rem; letter-spacing: -.02em; }
.brand-copy small { margin-top: .28rem; font-size: .61rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.3rem); font-size: .9rem; font-weight: 600; }
.desktop-nav a { text-decoration: none; }
.desktop-nav a:hover { color: var(--olive-light); }
.nav-favorite { display: inline-flex; align-items: center; gap: .45rem; padding: .68rem 1rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; cursor: pointer; }
.nav-favorite span { font-size: 1.25rem; line-height: 0; }
.nav-favorite b { min-width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; color: var(--forest-950); background: var(--olive-light); font-size: .68rem; }
.menu-button { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); cursor: pointer; }
.menu-button span { display: block; width: 18px; height: 2px; margin: 5px auto; background: currentColor; transition: .2s; }
.mobile-nav { position: fixed; inset: 72px 0 auto; z-index: 49; padding: 1rem 1.25rem 1.4rem; color: var(--forest-950); background: var(--paper); box-shadow: 0 18px 30px rgba(0,0,0,.12); }
.mobile-nav a, .mobile-nav button { display: block; width: 100%; padding: 1rem 0; text-align: left; text-decoration: none; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-weight: 600; }

.hero {
  position: relative;
  min-height: 780px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  overflow: hidden;
  color: var(--white);
  background: var(--forest-950);
}
.hero::before { content: ""; position: absolute; width: 550px; height: 550px; left: -300px; bottom: -300px; border: 1px solid rgba(197,216,119,.24); border-radius: 50%; box-shadow: 0 0 0 80px rgba(197,216,119,.025), 0 0 0 160px rgba(197,216,119,.018); }
.hero-grain { position: absolute; inset: 0 48% 0 0; opacity: .16; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.hero-copy { position: relative; z-index: 2; isolation: isolate; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 9rem clamp(1.4rem, 7vw, 7.5rem) 6rem clamp(1.4rem, 7vw, 7.5rem); }
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: 0 -9rem 0 0; opacity: .2; background-image: linear-gradient(90deg, rgba(11,39,29,.08), rgba(11,39,29,.68)), url("../images/hero-castillo.jpg"); background-position: center; background-size: cover; filter: saturate(.68); -webkit-mask-image: linear-gradient(90deg, #000 0 55%, rgba(0,0,0,.58) 76%, transparent 100%); mask-image: linear-gradient(90deg, #000 0 55%, rgba(0,0,0,.58) 76%, transparent 100%); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem; color: var(--olive-light); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 1px; background: currentColor; }
.eyebrow.dark { color: var(--forest-700); }
.hero h1 { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(4rem, 6.7vw, 7.4rem); font-weight: 500; line-height: .87; letter-spacing: -.055em; }
.hero h1 em { display: block; color: var(--olive-light); font-weight: 500; }
.hero-lead { max-width: 600px; margin: 1.8rem 0 2.2rem; color: rgba(255,255,255,.74); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; }
.hero-search { max-width: 620px; display: flex; padding: .45rem; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.search-field { flex: 1; display: flex; align-items: center; gap: .75rem; padding: 0 .8rem; }
.search-field svg, .filter-search svg, .nearby-button svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-field svg { color: var(--forest-700); }
.hero-search input { width: 100%; min-width: 0; padding: .75rem 0; color: var(--ink); border: 0; outline: 0; background: transparent; }
.hero-search button { padding: .9rem 1.3rem; border: 0; border-radius: 10px; color: #fff; background: var(--forest-800); font-weight: 700; cursor: pointer; }
.hero-search button span { margin-left: .5rem; }
.hero-search button:hover { background: var(--forest-700); }
.hero-quick-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; color: rgba(255,255,255,.55); font-size: .72rem; }
.hero-quick-links button { padding: 0; color: rgba(255,255,255,.78); border: 0; border-bottom: 1px solid rgba(255,255,255,.3); background: transparent; cursor: pointer; }

.hero-visual { position: relative; min-width: 0; margin-left: -9rem; overflow: hidden; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--forest-950) 0, rgba(11,39,29,.76) 12%, rgba(11,39,29,.18) 38%, transparent 58%), linear-gradient(0deg, rgba(11,39,29,.34), transparent 52%); pointer-events: none; }
.hero-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 51% center; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.42) 15%, #000 42%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.42) 15%, #000 42%); }
.hero-stamp { position: absolute; right: clamp(1rem, 4vw, 4rem); top: 18%; z-index: 2; width: 150px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(7deg); border: 1px solid rgba(255,255,255,.66); border-radius: 50%; color: #fff; text-align: center; backdrop-filter: blur(5px); }
.hero-stamp::before, .hero-stamp::after { content: "✦"; font-size: .6rem; opacity: .8; }
.hero-stamp span { margin-top: .1rem; font-family: var(--serif); font-size: 2rem; }
.hero-stamp b { max-width: 100px; font-size: .55rem; letter-spacing: .11em; text-transform: uppercase; }
.hero-stamp small { margin-top: .35rem; font-size: .45rem; letter-spacing: .1em; }
.hero-card { position: absolute; z-index: 3; left: clamp(1rem, 4vw, 4rem); right: clamp(1rem, 4vw, 4rem); bottom: 2.6rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem 1.15rem; color: var(--forest-950); background: rgba(255,255,255,.9); border-radius: 14px; backdrop-filter: blur(15px); }
.olive-dot { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 37% 35%, #dce998 0 15%, var(--olive) 17% 60%, #607925 62%); }
.hero-card div { display: flex; flex-direction: column; }
.hero-card small { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-card strong { font-family: var(--serif); font-size: 1.05rem; }

.trust-strip { min-height: 120px; display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.4fr; align-items: center; gap: 1.5rem; padding: 1.2rem clamp(1.4rem, 7vw, 7.5rem); border-bottom: 1px solid var(--line); background: var(--cream); }
.trust-strip > div { display: flex; align-items: center; gap: .75rem; }
.trust-strip > div:not(.trust-message) { flex-direction: column; align-items: flex-start; gap: 0; border-right: 1px solid #d3d4ca; }
.trust-strip strong { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; }
.trust-strip span { color: var(--muted); font-size: .72rem; }
.seal { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff !important; background: var(--forest-800); font-size: 1rem !important; }
.trust-message p, .update-note { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.trust-message p strong { color: var(--ink); font-family: var(--sans); font-size: .78rem; }
.update-note { padding-left: 2rem; border-left: 1px solid #d3d4ca; }

.explorer { max-width: 1500px; margin: 0 auto; padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 480px); align-items: end; gap: 2rem; }
.section-heading h2, .how h2 { margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 5vw, 5.3rem); font-weight: 500; line-height: .95; letter-spacing: -.045em; }
.section-heading > p { margin: 0 0 .4rem; color: var(--muted); line-height: 1.7; }
.category-rail { display: flex; gap: .7rem; margin: 2.6rem 0 1.2rem; padding-bottom: .55rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.category-rail::-webkit-scrollbar { display: none; }
.category-pill { --category-image: none; flex: 0 0 168px; min-height: 76px; display: flex; align-items: flex-end; gap: .52rem; scroll-snap-align: start; padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff; background-color: var(--forest-800); background-image: linear-gradient(0deg, rgba(6,25,18,.82), rgba(6,25,18,.1)), var(--category-image); background-position: center; background-size: cover; box-shadow: 0 8px 22px rgba(24,35,29,.1); text-align: left; text-shadow: 0 1px 8px rgba(0,0,0,.45); font-size: .76rem; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.category-pill[data-category="Todos"] { flex-basis: 118px; color: var(--forest-950); background: linear-gradient(135deg, #e9efd2, #c5d877); text-shadow: none; }
.category-pill[data-category="Restaurantes"] { --category-image: url("../images/categories/restaurantes.jpg"); }
.category-pill[data-category="Tapas y bares"] { --category-image: url("../images/categories/tapas-y-bares.jpg"); }
.category-pill[data-category="Café y dulce"] { --category-image: url("../images/categories/cafe-y-dulce.jpg"); }
.category-pill[data-category="Comida rápida"] { --category-image: url("../images/categories/comida-rapida.jpg"); }
.category-pill[data-category="Copas y ocio"] { --category-image: url("../images/categories/copas-y-ocio.jpg"); }
.category-pill[data-category="Otros"] { --category-image: url("../images/categories/otros.jpg"); }
.category-pill span { color: var(--olive-light); font-size: 1rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.category-pill[data-category="Todos"] span { color: var(--forest-700); text-shadow: none; }
.category-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(24,35,29,.18); }
.category-pill.active { border-color: var(--olive-light); box-shadow: 0 0 0 2px var(--olive-light), 0 12px 28px rgba(24,35,29,.18); }
.filter-bar { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(210px, .36fr) auto; gap: .75rem; padding: .65rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(24,35,29,.04); }
.filter-search { display: flex; align-items: center; gap: .7rem; padding: 0 .75rem; border-right: 1px solid var(--line); }
.filter-search svg { color: var(--forest-700); }
.filter-search input { width: 100%; min-width: 0; padding: .8rem 0; border: 0; outline: 0; background: transparent; }
.filter-search button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; }
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap select { width: 100%; padding: .8rem 2rem .8rem .6rem; border: 0; outline: 0; appearance: none; background: transparent; cursor: pointer; }
.select-wrap svg { position: absolute; right: .5rem; width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; pointer-events: none; }
.nearby-button { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.1rem; border: 0; border-radius: 11px; color: #fff; background: var(--forest-800); font-size: .78rem; font-weight: 700; cursor: pointer; }
.nearby-button.loading { opacity: .65; pointer-events: none; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1.2rem; }
.results-toolbar p { margin: 0; color: var(--muted); font-size: .82rem; }
.results-toolbar p strong { color: var(--ink); font-size: 1rem; }
.results-actions { display: flex; align-items: center; gap: .65rem; }
.recommend-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; padding: .65rem 1rem; border: 1px solid var(--forest-800); border-radius: 999px; color: #fff; background: var(--forest-800); box-shadow: 0 8px 22px rgba(23,75,55,.14); font-size: .72rem; font-weight: 800; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.recommend-button span { color: var(--olive-light); font-size: 1rem; }
.recommend-button:hover { transform: translateY(-2px); background: var(--forest-700); box-shadow: 0 12px 26px rgba(23,75,55,.2); }
.view-toggle { display: flex; gap: .2rem; padding: .25rem; border: 1px solid var(--line); border-radius: 9px; }
.view-toggle button { width: 34px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.view-toggle button.active { color: #fff; background: var(--forest-800); }
.view-toggle svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.active-filter { width: fit-content; margin: -3.2rem auto 1.15rem; padding: .45rem .8rem; border-radius: 99px; color: var(--forest-800); background: #eaf0d3; font-size: .72rem; }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.place-card { position: relative; min-height: 288px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; transition: transform .22s, box-shadow .22s, border-color .22s; }
.place-card:hover { transform: translateY(-4px); border-color: #b9c1b7; box-shadow: var(--shadow); }
.card-accent { position: relative; height: 88px; overflow: hidden; background-color: var(--forest-800); background-image: linear-gradient(90deg, rgba(7,28,21,.74), rgba(7,28,21,.16)), var(--card-category-image, none); background-position: center; background-size: cover; }
.card-accent::before { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; top: -80px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.045), 0 0 0 52px rgba(255,255,255,.025); }
.card-accent::after { content: attr(data-symbol); position: absolute; left: 1.15rem; bottom: .7rem; color: var(--olive-light); font-family: var(--serif); font-size: 1.8rem; }
.place-card[data-category="Café y dulce"] { --card-category-image: url("../images/categories/cafe-y-dulce.jpg"); }
.place-card[data-category="Comida rápida"] { --card-category-image: url("../images/categories/comida-rapida.jpg"); }
.place-card[data-category="Copas y ocio"] { --card-category-image: url("../images/categories/copas-y-ocio.jpg"); }
.place-card[data-category="Restaurantes"] { --card-category-image: url("../images/categories/restaurantes.jpg"); }
.place-card[data-category="Tapas y bares"] { --card-category-image: url("../images/categories/tapas-y-bares.jpg"); }
.place-card[data-category="Otros"] { --card-category-image: url("../images/categories/otros.jpg"); }
.favorite-button { position: absolute; z-index: 2; right: .8rem; top: .75rem; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: rgba(9,30,22,.22); backdrop-filter: blur(8px); cursor: pointer; font-size: 1.15rem; }
.favorite-button.active { color: var(--forest-950); background: var(--olive-light); border-color: var(--olive-light); }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 1.05rem 1.15rem 1.15rem; }
.card-type { display: flex; align-items: center; gap: .4rem; margin: 0 0 .48rem; color: var(--forest-700); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.card-type::before { content: ""; width: 15px; height: 1px; background: currentColor; }
.dish-count { width: fit-content; margin: 0 0 .55rem; padding: .3rem .55rem; border-radius: 999px; color: #48611e; background: #edf2d8; font-size: .62rem; font-weight: 700; }
.place-card h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.place-card .location { display: flex; align-items: flex-start; gap: .45rem; margin: .7rem 0 1.2rem; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.location svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .15rem; fill: none; stroke: var(--forest-700); stroke-width: 1.8; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid #eaebe6; }
.card-footer button { padding: 0; border: 0; color: var(--forest-800); background: transparent; font-size: .74rem; font-weight: 700; cursor: pointer; }
.card-footer a { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .7rem; text-decoration: none; }
.card-footer a:hover { color: var(--forest-700); }
.distance { display: block; margin-top: -.75rem; margin-bottom: .7rem; color: #8a661e; font-size: .7rem; font-weight: 700; }
.map-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #e7eadf; box-shadow: var(--shadow); }
#map { width: 100%; height: min(68vh, 680px); min-height: 480px; }
.leaflet-popup-content-wrapper { border-radius: 12px; font-family: var(--sans); box-shadow: 0 12px 35px rgba(0,0,0,.18); }
.map-popup h3 { margin: 0 0 .25rem; font-family: var(--serif); font-size: 1.12rem; }
.map-popup p { margin: 0 0 .55rem; color: var(--muted); font-size: .7rem; }
.map-popup button { padding: 0; border: 0; color: var(--forest-700); background: transparent; font-size: .7rem; font-weight: 700; cursor: pointer; }
.empty-state { padding: 5rem 1rem; text-align: center; }
.empty-state > span { display: block; font-family: var(--serif); font-size: 4rem; color: var(--olive); }
.empty-state h3 { margin: .5rem 0; font-family: var(--serif); font-size: 2rem; }
.empty-state p { color: var(--muted); }
.empty-state button, .load-more { padding: .8rem 1.2rem; border: 1px solid var(--forest-800); border-radius: 999px; background: transparent; font-size: .75rem; font-weight: 700; cursor: pointer; }
.load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: 2.5rem; }
.load-more { min-width: 150px; color: #fff; background: var(--forest-800); }
.load-more span { margin-left: .4rem; }
.load-more-wrap p { margin: 0; color: var(--muted); font-size: .68rem; }

.how { min-height: 700px; display: grid; grid-template-columns: 1fr 1fr; background: var(--forest-950); color: #fff; }
.how-photo { min-height: 600px; overflow: hidden; }
.how-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); }
.how-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 8rem); }
.how-copy > p:not(.eyebrow) { max-width: 560px; color: rgba(255,255,255,.65); line-height: 1.75; }
.how ol { margin: 2rem 0 0; padding: 0; list-style: none; }
.how li { display: grid; grid-template-columns: 45px 1fr; gap: 1rem; padding: 1.15rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.how li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.how li > b { color: var(--olive-light); font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.how li span { display: flex; flex-direction: column; color: rgba(255,255,255,.55); font-size: .74rem; line-height: 1.5; }
.how li strong { margin-bottom: .2rem; color: #fff; font-size: .85rem; }

.site-footer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; padding: 4.5rem clamp(1.4rem, 7vw, 7.5rem) 2rem; color: rgba(255,255,255,.74); background: #071c15; }
.footer-brand { display: flex; gap: 1rem; max-width: 530px; }
.footer-brand strong { color: #fff; font-family: var(--serif); font-size: 1.5rem; }
.footer-brand p { margin: .45rem 0 0; font-size: .76rem; line-height: 1.6; }
.footer-links { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 1.5rem; }
.footer-links a { color: #fff; font-size: .74rem; text-decoration: none; }
.footer-bottom { grid-column: 1 / -1; margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .65rem; }

.detail-dialog { width: min(560px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: auto; border: 0; border-radius: 20px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.detail-dialog::backdrop { background: rgba(4,20,14,.7); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; z-index: 3; right: 1rem; top: 1rem; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: rgba(0,0,0,.15); cursor: pointer; font-size: 1.4rem; }
.detail-hero { --detail-category-image: url("../images/categories/otros.jpg"); position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 2rem; color: #fff; background-color: var(--forest-950); background-image: linear-gradient(110deg, rgba(12,67,48,.97) 0%, rgba(8,49,35,.9) 53%, rgba(5,29,21,.76) 100%), var(--detail-category-image); background-position: center; background-size: cover; }
.detail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,24,17,.34), transparent 60%); pointer-events: none; }
.detail-hero[data-category="Restaurantes"] { --detail-category-image: url("../images/categories/restaurantes.jpg"); }
.detail-hero[data-category="Tapas y bares"] { --detail-category-image: url("../images/categories/tapas-y-bares.jpg"); }
.detail-hero[data-category="Café y dulce"] { --detail-category-image: url("../images/categories/cafe-y-dulce.jpg"); }
.detail-hero[data-category="Comida rápida"] { --detail-category-image: url("../images/categories/comida-rapida.jpg"); }
.detail-hero[data-category="Copas y ocio"] { --detail-category-image: url("../images/categories/copas-y-ocio.jpg"); }
.detail-hero[data-category="Otros"] { --detail-category-image: url("../images/categories/otros.jpg"); }
.detail-hero > * { position: relative; z-index: 1; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.detail-hero small { color: var(--olive-light); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.detail-hero h2 { margin: .45rem 0 0; font-family: var(--serif); font-size: clamp(2rem, 6vw, 3rem); line-height: .95; }
.detail-content { padding: 1.6rem 2rem 2rem; }
.detail-row { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.detail-row svg { width: 18px; fill: none; stroke: var(--forest-700); stroke-width: 1.8; }
.detail-row span { color: var(--muted); }
.detail-row strong { display: block; color: var(--ink); }
.detail-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1.3rem; }
.detail-actions a, .detail-actions button { padding: .82rem .9rem; border: 1px solid var(--forest-800); border-radius: 10px; color: var(--forest-800); background: transparent; text-align: center; text-decoration: none; font-size: .72rem; font-weight: 700; cursor: pointer; }
.detail-actions a.primary, .detail-actions button.primary { color: #fff; background: var(--forest-800); }
.detail-note { margin: 1rem 0 0; color: var(--muted); font-size: .64rem; line-height: 1.5; }

.recommend-dialog { width: min(540px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(0,0,0,.38); }
.recommend-dialog::backdrop { background: rgba(4,20,14,.74); backdrop-filter: blur(7px); }
.recommend-close { position: absolute; z-index: 4; right: 1rem; top: 1rem; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: rgba(3,22,15,.28); backdrop-filter: blur(8px); cursor: pointer; font-size: 1.35rem; }
.recommend-thinking { min-height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; color: #fff; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(197,216,119,.2), transparent 30%), linear-gradient(145deg, var(--forest-700), var(--forest-950)); }
.recommend-thinking > p { margin: 1.6rem 0 .7rem; color: var(--olive-light); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.recommend-thinking h2 { max-width: 390px; min-height: 2.2em; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 7vw, 3rem); font-weight: 500; line-height: 1; }
.recommend-orbit { position: relative; width: 108px; height: 108px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; animation: recommend-breathe 1.25s ease-in-out infinite; }
.recommend-orbit::before, .recommend-orbit::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(197,216,119,.32); border-radius: 50%; }
.recommend-orbit::after { inset: -10px; border-style: dashed; animation: recommend-spin 5s linear infinite; }
.recommend-orbit span { color: var(--olive-light); font-family: var(--serif); font-size: 2.4rem; }
.thinking-dots { display: flex; gap: .38rem; margin-top: 1.4rem; }
.thinking-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--olive-light); animation: thinking-dot 1s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .15s; }
.thinking-dots i:nth-child(3) { animation-delay: .3s; }
.recommend-result-hero { --recommend-category-image: url("../images/categories/otros.jpg"); min-height: 245px; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; color: #fff; background-image: linear-gradient(110deg, rgba(10,65,46,.96), rgba(5,28,20,.68)), var(--recommend-category-image); background-position: center; background-size: cover; }
.recommend-dialog[data-category="Restaurantes"] .recommend-result-hero { --recommend-category-image: url("../images/categories/restaurantes.jpg"); }
.recommend-dialog[data-category="Tapas y bares"] .recommend-result-hero { --recommend-category-image: url("../images/categories/tapas-y-bares.jpg"); }
.recommend-dialog[data-category="Café y dulce"] .recommend-result-hero { --recommend-category-image: url("../images/categories/cafe-y-dulce.jpg"); }
.recommend-dialog[data-category="Comida rápida"] .recommend-result-hero { --recommend-category-image: url("../images/categories/comida-rapida.jpg"); }
.recommend-dialog[data-category="Copas y ocio"] .recommend-result-hero { --recommend-category-image: url("../images/categories/copas-y-ocio.jpg"); }
.recommend-dialog[data-category="Otros"] .recommend-result-hero { --recommend-category-image: url("../images/categories/otros.jpg"); }
.recommend-result-hero small { color: var(--olive-light); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.recommend-result-hero h2 { margin: .45rem 0 0; font-family: var(--serif); font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 500; line-height: .94; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.recommend-result-body { padding: 1.5rem 2rem 2rem; }
.recommend-location { margin: 0; color: var(--forest-800); font-weight: 700; }
.recommend-context { margin: .6rem 0 1.35rem; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.recommend-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.recommend-actions button { padding: .85rem .75rem; border: 1px solid var(--forest-800); border-radius: 10px; color: var(--forest-800); background: transparent; font-size: .71rem; font-weight: 800; cursor: pointer; }
.recommend-actions button.primary { color: #fff; background: var(--forest-800); }
@keyframes recommend-spin { to { transform: rotate(360deg); } }
@keyframes recommend-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(197,216,119,.035); } }
@keyframes thinking-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-5px); opacity: 1; } }

.dish-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: auto; border: 0; color: var(--ink); background: var(--paper); }
.dish-dialog::backdrop { background: rgba(4,20,14,.72); }
.dish-screen { min-height: 100%; }
.dish-screen-header { --dish-category-image: url("../images/categories/otros.jpg"); position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 5.5rem clamp(1.25rem, 7vw, 7rem) 3.2rem; color: #fff; background-image: linear-gradient(90deg, rgba(5,26,18,.94), rgba(5,26,18,.5) 60%, rgba(5,26,18,.2)), var(--dish-category-image); background-position: center; background-size: cover; }
.dish-dialog[data-category="Restaurantes"] .dish-screen-header { --dish-category-image: url("../images/categories/restaurantes.jpg"); }
.dish-dialog[data-category="Tapas y bares"] .dish-screen-header { --dish-category-image: url("../images/categories/tapas-y-bares.jpg"); }
.dish-dialog[data-category="Café y dulce"] .dish-screen-header { --dish-category-image: url("../images/categories/cafe-y-dulce.jpg"); }
.dish-dialog[data-category="Comida rápida"] .dish-screen-header { --dish-category-image: url("../images/categories/comida-rapida.jpg"); }
.dish-dialog[data-category="Copas y ocio"] .dish-screen-header { --dish-category-image: url("../images/categories/copas-y-ocio.jpg"); }
.dish-screen-header::after { content: ""; position: absolute; width: 430px; height: 430px; right: -100px; top: -250px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.018); }
.dish-screen-header > * { position: relative; z-index: 1; }
.dish-screen-header .eyebrow { margin-bottom: .8rem; }
.dish-screen-header h2 { max-width: 950px; margin: 0; font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 5.8rem); font-weight: 500; line-height: .92; letter-spacing: -.045em; }
.dish-screen-header > p:not(.eyebrow) { margin: .8rem 0 0; color: rgba(255,255,255,.75); font-size: .82rem; }
.dish-back, .dish-close { position: absolute; top: 1.2rem; z-index: 2; border: 1px solid rgba(255,255,255,.45); color: #fff; background: rgba(3,20,13,.28); backdrop-filter: blur(10px); cursor: pointer; }
.dish-back { left: clamp(1.25rem, 7vw, 7rem); display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.dish-close { right: clamp(1.25rem, 4vw, 4rem); width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; font-size: 1.4rem; }
.dish-toolbar { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: minmax(250px, 420px) minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem clamp(1.25rem, 7vw, 7rem); border-bottom: 1px solid var(--line); background: rgba(251,249,243,.94); backdrop-filter: blur(16px); }
.dish-search { display: flex; align-items: center; gap: .7rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dish-search svg { width: 18px; flex: 0 0 auto; fill: none; stroke: var(--forest-700); stroke-width: 1.8; stroke-linecap: round; }
.dish-search input { width: 100%; min-width: 0; padding: .75rem 0; border: 0; outline: 0; background: transparent; font-size: .78rem; }
.dish-filters { display: flex; gap: .45rem; overflow-x: auto; padding: .2rem; scrollbar-width: none; }
.dish-filters::-webkit-scrollbar { display: none; }
.dish-filter { flex: 0 0 auto; padding: .58rem .78rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .68rem; font-weight: 700; cursor: pointer; }
.dish-filter.active { color: #fff; border-color: var(--forest-800); background: var(--forest-800); }
.dish-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin: 0 auto; padding: 2rem clamp(1.25rem, 5vw, 5rem); }
.dish-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(22,48,36,.06); }
.dish-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; color: var(--olive-light); background: var(--forest-800); font-family: var(--serif); font-size: 3rem; }
.dish-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.dish-card:hover .dish-photo img { transform: scale(1.035); }
.dish-photo.placeholder { display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, rgba(197,216,119,.25), transparent 32%), var(--forest-800); }
.dish-availability { position: absolute; left: .7rem; bottom: .7rem; padding: .35rem .55rem; border-radius: 999px; color: var(--forest-950); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); font-family: var(--sans); font-size: .6rem; font-weight: 800; }
.dish-availability.seasonal { color: #6b210f; background: #ffe1c8; }
.dish-availability.on_request { color: #5d4310; background: #f7e7b8; }
.dish-card-body { padding: 1rem 1rem 1.1rem; }
.dish-card h3 { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.05; }
.dish-categories { margin: .45rem 0 0; color: var(--forest-700); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dish-description { display: -webkit-box; overflow: hidden; margin: .72rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.dish-card details { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.dish-card summary { color: var(--forest-700); font-size: .68rem; font-weight: 800; cursor: pointer; }
.dish-card details p { white-space: pre-line; margin: .65rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.dish-empty { padding: 5rem 1rem; text-align: center; }
.dish-empty h3 { margin: 0; font-family: var(--serif); font-size: 2rem; }
.dish-empty p { color: var(--muted); }
.dish-source { max-width: 900px; margin: 0 auto; padding: 1rem 1.5rem 3rem; color: var(--muted); text-align: center; font-size: .65rem; line-height: 1.6; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: 1.4rem; transform: translate(-50%, 130%); padding: .75rem 1rem; border-radius: 999px; color: #fff; background: var(--forest-950); box-shadow: var(--shadow); font-size: .72rem; opacity: 0; transition: .28s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 1050px) {
  .hero { min-height: 720px; grid-template-columns: 1.1fr .9fr; }
  .hero-copy { padding-left: 3rem; padding-right: 2.5rem; }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-strip { padding-left: 2rem; padding-right: 2rem; }
}

@media (max-width: 760px) {
  .site-header { height: 72px; padding: 0 1.15rem; }
  .brand-copy strong { font-size: 1.08rem; }
  .brand-mark { width: 37px; height: 37px; }
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-copy { min-height: 620px; padding: 8rem 1.25rem 4rem; }
  .hero-copy::before { inset: 0; opacity: .1; -webkit-mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%); }
  .hero h1 { font-size: clamp(3.8rem, 18vw, 5.6rem); }
  .hero-search { display: block; padding: .4rem; }
  .search-field { min-height: 52px; }
  .hero-search button { width: 100%; }
  .hero-visual { height: 520px; margin: -4.5rem 0 0; }
  .hero-visual::after { background: linear-gradient(180deg, var(--forest-950) 0, rgba(11,39,29,.64) 13%, transparent 38%), linear-gradient(0deg, rgba(11,39,29,.32), transparent 55%); }
  .hero-visual > img { object-position: center 54%; -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 16%, #000 38%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 16%, #000 38%); }
  .hero-stamp { top: 2rem; width: 122px; }
  .hero-card { bottom: 1rem; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 1.6rem 1.25rem; }
  .trust-strip > div:not(.trust-message) { border-right: 0; }
  .trust-message { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid #d3d4ca; }
  .update-note { display: none; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 1rem; }
  .category-pill { flex-basis: 150px; min-height: 70px; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-search { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .select-wrap { padding-left: .25rem; }
  .nearby-button { padding-left: .7rem; padding-right: .7rem; }
  .active-filter { margin: 0 0 1rem; }
  .results-toolbar { align-items: flex-start; }
  .results-actions { flex-direction: column-reverse; align-items: flex-end; }
  .recommend-button { min-height: 38px; padding: .55rem .8rem; }
  .cards-grid { grid-template-columns: 1fr; }
  .place-card { min-height: 276px; }
  #map { min-height: 500px; }
  .how { grid-template-columns: 1fr; }
  .how-photo { min-height: 380px; }
  .how-copy { padding: 4.5rem 1.4rem; }
  .site-footer { grid-template-columns: 1fr; padding: 3.5rem 1.4rem 2rem; }
  .footer-links { justify-content: flex-start; }
  .detail-content { padding: 1.4rem; }
  .detail-hero { padding: 1.5rem; }
  .recommend-thinking { min-height: 380px; padding: 2.5rem 1.2rem; }
  .recommend-result-hero { min-height: 220px; padding: 1.5rem; }
  .recommend-result-body { padding: 1.25rem; }
  .recommend-actions { grid-template-columns: 1fr; }
  .dish-screen-header { min-height: 270px; padding: 5.2rem 1.25rem 2.2rem; }
  .dish-back { left: 1.25rem; }
  .dish-back span { display: none; }
  .dish-close { right: 1.25rem; }
  .dish-toolbar { position: static; grid-template-columns: 1fr; padding: .9rem 1.25rem; }
  .dish-grid { grid-template-columns: 1fr; padding: 1.25rem; }
}

@media (min-width: 761px) and (max-width: 1250px) {
  .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}