/* El Descanso — landing page. Mobile-first: the base rules are the phone
   layout, breakpoints only ever add. Visual direction is PLAN.md D13:
   full-viewport hero under a floating header, air between sections, large
   display type, editorial photography; dark throughout, with a deeper shade
   for the bar, the contact band and the footer. Colors come from tokens.css
   only. */

/* ---------------------------------------------------------------- fonts -- */
/* Self-hosted so no third-party request blocks the first paint. The colon
   sign lives in its own 2.5 KB subset so Spanish text never pulls latin-ext. */
@font-face {
  font-family: "DM Serif Display"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/dmserifdisplay-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/inter-colon.woff2") format("woff2");
  unicode-range: U+20A1;
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--text-strong); line-height: 1.08; margin: 0; }
p { margin: 0 0 var(--sp-4); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
/* The header is fixed, so every page starts below it — except the hero,
   which pulls itself up underneath (see .hero). */
main { padding-top: var(--header-h); }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.prose { max-width: var(--measure); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--sp-4); top: -4rem; z-index: 100;
  background: var(--white); color: var(--surface-deep); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius); transition: top .15s;
}
.skip:focus { top: var(--sp-4); }

/* -------------------------------------------------------------- eyebrow -- */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-4);
}
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; flex: none; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 var(--sp-5);
  font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--clay-600); color: #fff; }
.btn--primary:hover { background: var(--clay-700); }
.btn--ghost { background: transparent; color: var(--text-strong); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--text-strong); }
.btn--onphoto { background: rgba(255,255,255,.94); color: var(--ink-950); }  /* ink: it is the one light surface */
.btn--onphoto:hover { background: #fff; }
.btn--light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--light:hover { border-color: var(--white); }
/* Same spirit as the WhatsApp float: the app's own color, its mark, a pill. */
.btn--waze {
  background: var(--waze); color: var(--waze-ink);
  border-radius: 999px; padding: 0 var(--sp-5) 0 var(--sp-4);
  transition: transform .15s;
}
.btn--waze:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn--waze { transition: none; } .btn--waze:hover { transform: none; } }

/* --------------------------------------------------------------- status -- */
/* Rendered neutral in HTML and filled in by hours.js. Without JS it reads
   "Ver horario" and links to the table, which is always on the page. */
.status { display: inline-flex; align-items: center; gap: .5em; font-size: var(--step--1); font-weight: 600; }
.status__dot { width: .6em; height: .6em; border-radius: 50%; background: var(--text-muted); flex: none; }
.status { color: var(--white); }
.status[data-state="open"] .status__dot { background: var(--open); }
.status[data-state="closed"] .status__dot { background: var(--closed); }
.status[data-state="open"] { color: var(--open); }
.status[data-state="closed"] { color: var(--closed); }
.status__note { color: var(--text); font-weight: 400; }   /* same as the nav links beside it */

/* --------------------------------------------------------------- header -- */
/* Floats over the page. Translucent: over the hero it reads as part of the
   photo, over the sections as a bar. No scroll listener needed. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: color-mix(in srgb, var(--surface-deep) 72%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--header-h);
}
.site-header__logo { flex: none; line-height: 0; }
.site-header__logo img { width: 108px; }
.site-header__spacer { flex: 1 1 auto; }
/* On a phone the bar is the logo, «Abierto ahora» (the one fact worth keeping
   on screen while scrolling) and the menu button; everything else is in the
   menu. The rules for the bar's own icons and button say «row >» so they do
   not reach the copies inside the menu. */
.site-header .status { white-space: nowrap; }
.site-nav { display: none; }
.site-header__row > .btn, .site-header__row > .social { display: none; }

/* From a tablet up the bar gains the icons and «Reservar». Everything at
   once needs the full 72rem shell, so it fills in by width: the section
   links from 68em (the menu button until then), the kitchen-closing note
   from 74.5em. The open/closed state stays at every width. */
@media (min-width: 46em) {
  :root { --header-h: 80px; }
  .site-header__logo img { width: 132px; }
  .site-header__row > .btn { display: inline-flex; min-height: 40px; padding: 0 var(--sp-4); font-size: var(--step--1); }
  .site-header__row > .social { display: flex; margin-right: var(--sp-2); }
}
@media (max-width: 74.49em) {
  .site-header .status__note { display: none; }
}
@media (min-width: 68em) {
  .site-nav { display: flex; gap: var(--sp-5); margin-right: var(--sp-3); }
  .site-nav a {
    color: var(--text); text-decoration: none; font-size: var(--step--1);
    font-weight: 500; padding-block: var(--sp-2); white-space: nowrap;
  }
  .site-nav a:hover { color: var(--white); }
}

/* The menu: a round button in the bar, a panel that drops below the header
   across the full width (the header is its containing block). */
.menu summary {
  display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  list-style: none; border-radius: 50%; border: 1px solid var(--line); color: var(--white);
}
.menu summary::-webkit-details-marker { display: none; }
.menu__close, .menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: block; }
.menu__panel {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  background: var(--surface-deep); border-bottom: 1px solid var(--line);
  padding: var(--sp-3) max(1.25rem, (100% - var(--shell)) / 2) var(--sp-6);
}
.menu__links { list-style: none; margin: 0; padding: 0; }
.menu__links a {
  display: block; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  color: var(--white); text-decoration: none; font-size: var(--step-1); font-weight: 500;
}
.menu__contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-5);
}
/* From a tablet the icons and «Reservar» are in the bar already. */
@media (min-width: 46em) { .menu__contact { display: none; } }
@media (min-width: 68em) { .menu { display: none; } }
/* With the note showing, the state takes two lines: the dot and «Abierto
   ahora» over «la cocina cierra a las…». The header is tall enough. */
@media (min-width: 74.5em) {
  .site-header .status {
    display: inline-grid; grid-template-columns: auto 1fr; justify-content: start;
    align-items: center; column-gap: .5em; row-gap: 0; line-height: 1.35; text-align: left;
  }
  .site-header .status__note { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------- hero -- */
/* The whole first screen. The photo is the background; the words sit at the
   bottom where the gradient is darkest. */
.hero {
  position: relative; isolation: isolate;
  /* The viewport, capped: on a tall monitor the photo should not become a
     wall. */
  min-height: min(100svh, 64rem); margin-top: calc(-1 * var(--header-h));
  display: grid; align-items: end;
  background: var(--surface-deep); color: var(--white);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,22,19,.55) 0%, rgba(26,22,19,.2) 40%, rgba(26,22,19,.9) 100%);
}
.hero__body {
  /* Bottom padding clears the floating WhatsApp button on a phone. */
  padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: 5.5rem;
}
.hero__eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); margin-bottom: var(--sp-4);
}
.hero__title { color: var(--white); font-size: var(--step-4); line-height: .98; margin-bottom: var(--sp-4); max-width: 15ch; }
.hero__claim { font-size: var(--step-1); color: var(--text); max-width: 34rem; margin-bottom: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__actions .btn { flex: 1 1 auto; }

@media (min-width: 46em) {
  /* The wide crop has the plate on the right and black on the left
     (tools/images.mjs). When the viewport trims the sides, keep the black
     edge whole so the text sits on it and the plate slides off to the right. */
  .hero__media img { object-position: left center; }
  /* On wide screens the text column can still reach the plate: darken the
     text side as well as the bottom. */
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(26,22,19,.85) 0%, rgba(26,22,19,.6) 40%, rgba(26,22,19,0) 65%),
      linear-gradient(180deg, rgba(26,22,19,.55) 0%, rgba(26,22,19,.2) 40%, rgba(26,22,19,.9) 100%);
  }
  .hero__body { padding-bottom: var(--sp-9); }
  .hero__claim { font-size: var(--step-2); }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* -------------------------------------------------------------- section -- */
.section { padding-block: var(--sp-7); }
.section--sand { background: var(--surface-alt); }
.section--dark { background: var(--surface-deep); color: var(--text); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--white); }
.section__title { font-size: var(--step-3); margin-bottom: var(--sp-5); max-width: 18ch; }
/* For a title whose line breaks are chosen, not left to the 18ch cap. */
.section__title--free { max-width: none; text-wrap: balance; }
.section__lead { font-size: var(--step-1); color: var(--text); }
.section--dark .section__lead { color: var(--text); }
/* Title block with an action beside it on wide screens. */
.section__head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
@media (min-width: 46em) {
  .section { padding-block: var(--sp-9); }
  .section__head { grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-6); }
  .section__head .section__title { margin-bottom: 0; }
}

/* Reveal on scroll. Pure CSS: where scroll-driven animations exist and
   motion is welcome, a section's content fades up as it enters; everywhere
   else the page is simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section > .shell {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- historia -- */
/* A banner like the hero, over the old façade (tools/images.mjs grades it
   vintage). On a phone the photo is a band across the top that fades into
   the page, and the eyebrow and title rise into its dark lower edge. */
.historia { position: relative; isolation: isolate; padding-top: 0; }
.historia__media { position: relative; z-index: -1; }
.historia__media img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.historia__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,22,19,.5) 0%, rgba(26,22,19,0) 22%, rgba(26,22,19,.55) 62%, var(--surface) 100%);
}
.historia__body { margin-top: -5.5rem; }
.historia__text p:last-child { margin-bottom: 0; }
/* Only the title is in the display face; the rest is the text face, the
   lead set apart by weight and color rather than size. */
.historia__lead { font-size: var(--step-1); font-weight: 500; color: var(--text-strong); line-height: 1.5; }
.historia__sign { font-weight: 600; color: var(--text-strong); margin-top: var(--sp-5); }
@media (min-width: 52em) {
  /* The photo fills the section. The text keeps to the right, over the car
     and the far end of the roof, so the Pilsen sign, the old logo and the
     door stay in the light on the left. */
  .historia {
    display: grid; align-items: center;
    min-height: min(100svh, 56rem); padding-block: var(--sp-10);
    /* Where the text column's left edge falls, measured from the right:
       the shell's margin plus the column. The darkening tracks it. */
    --text-edge: calc(max(1.25rem, (100% - var(--shell)) / 2) + var(--measure));
  }
  .historia__media { position: absolute; inset: 0; }
  .historia__media img { height: 100%; aspect-ratio: auto; object-position: center 60%; }
  .historia__media::after {
    background:
      linear-gradient(270deg, rgba(26,22,19,.94) 0%, rgba(26,22,19,.88) var(--text-edge), rgba(26,22,19,0) calc(var(--text-edge) + 22%)),
      linear-gradient(180deg, var(--surface) 0%, rgba(26,22,19,0) 16%, rgba(26,22,19,0) 80%, var(--surface) 100%);
  }
  .historia__body { margin-top: 0; }
  .historia__text { margin-left: auto; }
}

/* ----------------------------------------------------------------- menú -- */
.menu-grid { display: grid; gap: var(--sp-7) var(--sp-8); }
@media (min-width: 40em) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }

.menu-block h3 {
  font-family: var(--font-display); font-size: var(--step-2); color: var(--text-strong);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--text-strong);
  margin-bottom: var(--sp-4);
}
/* Name, dotted leader, price: how a printed carta reads. */
.dish { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-4); }
.dish__name { display: flex; align-items: baseline; gap: var(--sp-3); font-weight: 600; color: var(--text-strong); }
.dish__name::after {
  content: ""; flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--text-muted); opacity: .45;
  transform: translateY(-.35em);
}
.dish__price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.dish__desc { grid-column: 1 / -1; font-size: var(--step--1); color: var(--text-muted); margin: 0; }

.price-note {
  font-size: var(--step--1); color: var(--text-muted);
  border-left: 3px solid var(--line); padding-left: var(--sp-4); margin-top: var(--sp-7);
}

/* ---------------------------------------------------------- placeholder -- */
/* Anything the restaurant has not confirmed is marked, visibly, as pending. */
.placeholder {
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: var(--tint); color: var(--text);
  padding: var(--sp-4) var(--sp-5); font-size: var(--step--1);
}
.placeholder strong {
  display: block; color: var(--accent); text-transform: uppercase;
  letter-spacing: .12em; font-size: .75rem; margin-bottom: var(--sp-2);
}
.placeholder p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- photos -- */
.photos { display: grid; gap: var(--sp-3); }
.photos figure { margin: 0; }
.photos img { border-radius: var(--radius); width: 100%; object-fit: cover; }
.photos figcaption { font-size: var(--step--1); color: var(--text-muted); padding-top: var(--sp-2); }
/* Editorial: the first photo is the big one. On wide screens nine fill the
   grid: the big one and four small beside it, then a row of four. */
.photos--editorial { grid-template-columns: repeat(2, 1fr); }
.photos--editorial figure:first-child { grid-column: 1 / -1; }
@media (min-width: 46em) { .photos { gap: var(--sp-4); } }
@media (min-width: 64em) {
  .photos--editorial { grid-template-columns: repeat(4, 1fr); }
  /* The big photo spans two rows and stretches to fill them, less its
     caption; the small ones keep their own proportion and set the rows. */
  .photos--editorial figure:first-child {
    grid-column: span 2; grid-row: span 2;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
  }
  .photos--editorial figure:first-child img { height: 100%; }
  /* Keeps the light/dark checkerboard in four columns (see index.njk): the
     eighth photo moves after the ninth. */
  .photos--editorial figure:nth-child(8) { order: 1; }
}
/* The bar: tall cocktail shots on black in a strip that scrolls sideways,
   four to a view on wide screens, one and a bit on a phone so the next one
   peeks in. Snap points, no script. */
.photos--bar {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
/* Width is set outright (not via flex-basis) so the 4:5 ratio derives the
   height from it, never the other way round. */
.photos--bar img { flex: 0 0 auto; width: 72%; min-width: 0; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.photos__hint { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-2); }
@media (min-width: 46em) {
  .photos--bar { gap: var(--sp-4); }
  .photos--bar img { width: calc((100% - 3 * var(--sp-4)) / 4); }
}

/* -------------------------------------------------------------- reseñas -- */
/* Columns, like the menu: one long review should not stretch a whole row of
   short ones. */
.reviews { column-gap: var(--sp-4); margin-block: var(--sp-6); }
@media (min-width: 46em) { .reviews { columns: 2; } }
@media (min-width: 64em) { .reviews { columns: 3; } }
.review {
  break-inside: avoid; margin: 0 0 var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.review__stars { color: var(--clay-500); letter-spacing: .1em; margin-bottom: var(--sp-3); }
.review__star-off { color: var(--line); }
.review__text { margin: 0; color: var(--text); }
.review__text p { white-space: pre-line; }   /* keeps the reviewer's own line breaks */
.review__text p:last-child { margin-bottom: 0; }
.review__author { margin-top: var(--sp-4); font-weight: 700; color: var(--text-strong); }
.review__more {
  margin-top: var(--sp-3); padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--accent);
}
.review__more:hover { text-decoration: underline; }

/* The whole review, over the page. A popover lives in the top layer, so it
   needs no z-index; its own box scrolls when the text is long, and the head
   with the close button stays pinned while it does. */
.review-modal {
  width: min(100% - 2.5rem, 36rem); max-height: min(85svh, 44rem); overflow-y: auto;
  margin: auto; padding: 0 var(--sp-6) var(--sp-6);
  background: var(--surface-alt); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.review-modal::backdrop { background: rgba(15,13,11,.72); backdrop-filter: blur(3px); }
.review-modal__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5) var(--sp-3); background: var(--surface-alt);
}
.review-modal__head .review__stars { margin: 0; }
.review-modal__close {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--white);
}
.review-modal__close:hover { border-color: var(--white); }

/* -------------------------------------------- cómo llegar y horario -- */
/* Two views on a phone: where (with the map) and when, split by a rule.
   One on wide screens: where on the left and when on the right, their titles
   level, and the map under the address filling whatever height is left so
   the left column ends where the hours do. The halves carry the ids, so they
   keep clear of the fixed header when the nav jumps to them. */
.visit { display: grid; gap: var(--sp-6); }
.visit__where, .visit__when { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.visit__when { margin-top: var(--sp-6); padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.address {
  font-size: var(--step-1); font-weight: 500;
  color: var(--text-strong); line-height: 1.5; margin-bottom: var(--sp-5);
}
@media (min-width: 60em) {
  .visit {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
    grid-template-areas: "where when" "map when";
    gap: var(--sp-4) var(--sp-9);
  }
  .visit__where { grid-area: where; }
  .visit__when { grid-area: when; margin-top: 0; padding-top: 0; border-top: 0; }
  .visit__map { grid-area: map; display: flex; flex-direction: column; }
  /* The image is taken out of the flow so the map adds no height of its own:
     the hours set the height, the map fills what is left. */
  .visit__map .map { flex: 1; height: auto; min-height: 12rem; }
  .visit__map .map img { position: absolute; inset: 0; }
}

/* The map's labels are drawn for 1:1 pixels, so it is never scaled: the box
   crops it around its centre, which is the place. */
.map {
  position: relative; display: block; height: 20rem; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--surface);
}
.map img { width: 100%; height: 100%; object-fit: none; object-position: center; }
.map__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  fill: var(--clay-500); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.map__pin circle { fill: var(--white); }
.map__label {
  position: absolute; left: calc(50% + 1.5rem); top: 50%; transform: translateY(-190%);
  padding: .1rem .6rem; border-radius: 999px;
  background: var(--ink-950); color: var(--white);
  font-size: var(--step--1); font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.map__credit { margin: var(--sp-2) 0 0; font-size: .75rem; color: var(--text-muted); }
.map__credit a { color: inherit; }
@media (min-width: 52em) { .map { height: 28rem; } }

/* -------------------------------------------------------------- horario -- */
.hours { width: 100%; border-collapse: collapse; max-width: 34rem; }
.hours th, .hours td { text-align: left; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); font-size: var(--step-0); white-space: nowrap; }
@media (min-width: 46em) { .hours th, .hours td { font-size: var(--step-1); } }
.hours th { font-weight: 500; color: var(--text); }
.hours td { font-variant-numeric: tabular-nums; color: var(--text-strong); }
.hours tr[data-today] th, .hours tr[data-today] td { background: var(--tint); font-weight: 700; color: var(--white); }
.hours__kitchen { font-size: var(--step--1); color: var(--text-muted); margin: var(--sp-4) 0 0; max-width: var(--measure); }

/* ------------------------------------------------------------- contacto -- */
/* The close of the page: centred, type only, no boxes. The numbers are the
   headline, in the display face, each under a small label saying what it is
   for; they sit side by side and stack on a phone. The eyebrow gets its rule
   on both sides since it is centred. */
.contact { display: grid; justify-items: center; text-align: center; }
.contact .eyebrow::after { content: ""; width: 2rem; height: 2px; background: currentColor; flex: none; }
.contact__channels {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-6) var(--sp-9); margin-block: var(--sp-3) var(--sp-6);
}
.contact__channel { display: grid; justify-items: center; gap: var(--sp-2); margin: 0; }
.contact__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.contact__value { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--white); }

.contact__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin-top: 0;
}

/* --------------------------------------------------------------- social -- */
/* Icon links: in the header bar (from a tablet up), the phone menu and the footer. */
.social { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.social a {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--white); border: 1px solid var(--line);
  transition: border-color .15s, background-color .15s;
}
.social a:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
.site-footer .social { margin-top: var(--sp-5); }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--surface-deep); color: var(--text); padding-block: var(--sp-7); border-top: 1px solid var(--line); }
.site-footer h2 { color: var(--white); font-size: var(--step-1); font-family: var(--font-text); font-weight: 700; margin-bottom: var(--sp-3); }
.site-footer h2:not(:first-child) { margin-top: var(--sp-5); }   /* Ubicación, then Horario, in one column */
.site-footer a { color: var(--white); }
.site-footer__grid { display: grid; gap: var(--sp-6); }
.site-footer__logo img { width: 150px; margin-bottom: var(--sp-4); }
.site-footer p { margin-bottom: var(--sp-2); }
.site-footer__legal {
  border-top: 1px solid var(--line); margin-top: var(--sp-6); padding-top: var(--sp-4);
  font-size: var(--step--1); color: var(--text-muted);
}
@media (min-width: 46em) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-7); } }
/* Room so the floating WhatsApp button never sits on the last footer line. */
.site-footer { padding-bottom: calc(var(--sp-7) + 4rem); }

/* --------------------------------------------------------------- rating -- */
/* Google's rating in the site's own type, no card: the average large in the
   display face, the stars in the brand red like each review's, the count
   under them. The stars are a single run of five filled to the score with a
   clipped gradient, so 4.5 shows half a star. After the footer rules on
   purpose: a.rating has to beat «.site-footer a». */
a.rating {
  display: inline-flex; align-items: center; gap: var(--sp-3); justify-self: start;
  color: var(--white); text-decoration: none;
}
.rating__score { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.rating__detail { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
/* Only as wide as its five glyphs, or the fill would be measured against
   the longer lines under it and the half star would come out whole. */
.rating__stars {
  font-size: 1.125rem; line-height: 1;
  background: linear-gradient(90deg, var(--clay-500) var(--fill), var(--line) var(--fill));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rating__count { font-size: var(--step--1); color: var(--text-muted); line-height: 1.3; }
.rating__link { font-size: var(--step--1); font-weight: 600; color: var(--accent); line-height: 1.3; }
a.rating:hover .rating__link { text-decoration: underline; }
.site-footer .rating { margin-top: var(--sp-5); }

/* ------------------------------------------------------ whatsapp, float -- */
.wa-float {
  position: fixed; z-index: 40;
  right: max(var(--sp-4), env(safe-area-inset-right));
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-5) 0 var(--sp-4);
  background: var(--whatsapp); color: #fff;
  font-weight: 600; text-decoration: none;
  border-radius: 999px; box-shadow: 0 6px 20px rgba(26, 22, 19, .25);
  transition: transform .15s;
}
.wa-float svg { width: 24px; height: 24px; }
.wa-float:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } .wa-float:hover { transform: none; } }
@media print { .wa-float { display: none; } }

/* ------------------------------------------------------- menu, full page -- */
/* The menu page lists a whole section at once, so dishes stack tightly and
   split into columns only when there is room. Multi-column rather than grid:
   a section of 36 bocas should flow down and over, not be chopped into cells. */
.dish-list { column-gap: var(--sp-8); }
.dish-list .dish { break-inside: avoid; margin-bottom: var(--sp-5); }
@media (min-width: 52em) { .dish-list { columns: 2; } }
@media (min-width: 76em) { .dish-list { columns: 3; } }