/* Simple Wine & Beer Point. The stylesheet every page shares (it was inline in the one-page
   site until 2026-10-04). DESIGN.md is the authority: the cellar at night, two inks (walnut
   oak and red wine), chalk for every mark, the logo's three letterings. */

/* Their logo has three letterings: the wide slab of SIMPLE, the thin wedge-serif capitals
   of WINE & BEER POINT, and a hand. The page speaks with the same three. */
@font-face {
  font-family: "Stint Ultra Expanded"; src: url("/assets/fonts/stint-ultra-expanded-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "Forum"; src: url("/assets/fonts/forum-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "Kalam"; src: url("/assets/fonts/kalam-300-latin.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  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;
}

/* Their carta on paper, the cellar kept for the wood and the photograph. Every page reads on the
   paper of their printed carta (the same brown in light) in the ink of the toasted oak; the bar,
   the first screen and the oak where you book stay dark, chalk on wood (the dark surfaces, below).
   "chalk" names the foreground of a surface: ink on the paper, chalk on the wood. */
:root {
  /* the grounds. The paper (owners, 2026-10-06, option A of the light prototype) is their
     carta's whitewashed wood, a touch darker since 2026-10-07 (owners: "un poco más oscuro, poquito";
     it was 237, 229, 217); the dark surfaces keep the cellar's 61, 42, 29. */
  --char-rgb: 230, 221, 207;
  --char: rgb(var(--char-rgb));
  --char-2: #dccfbc;
  --ground-rgb: 230, 221, 207;   /* what the photograph and the planks fade into: always the paper */
  --ground: rgb(var(--ground-rgb));
  --bar-base: #43301f;
  --bar-veil: rgba(61, 42, 29, 0.42);
  --booking: #5a3c26;
  --floor: #d9c9b5;
  --field-fill: #ded3c4;
  --option-bg: #efe7db;
  --photo-filter: contrast(0.78) brightness(1.42);   /* the light on the cellar photographs */
  --sink: 0.18;              /* how far the planks sink under the form */
  --veil: 1.6;               /* how far the page heads wash their photograph into the paper */
  --oak: #6b4424;
  --oak-lit: #b8723a;
  --wine: #7a1c2e;
  --wine-hi: #922338;
  --chalk: #3d2a1d;          /* ink: the toasted oak (10.1:1 on the paper) */
  --chalk-2: #5c4636;        /* 6.6:1 */
  --chalk-3: #725b4a;        /* 4.7:1 */
  --fg-rgb: 61, 42, 29;      /* the foreground for lines and outlines, with an alpha */
  --ghost: rgba(61, 42, 29, 0.32);
  --rule: rgba(61, 42, 29, 0.16);
  --err: #a3182f;
  --display: "Stint Ultra Expanded", "Rockwell", Georgia, serif;
  --text: "Forum", "Palatino Linotype", Georgia, serif;
  --caps: 0.14em;
  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter: max(20px, 7.85vw);
  --bar-h: clamp(52px, 8.91vw, 72px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--char); color: var(--chalk); color-scheme: light;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + var(--safe-t) + 12px);
  scrollbar-color: var(--oak) var(--char);
}
body { margin: 0; font: 400 18px/1.5 var(--text); background: var(--char); overflow-x: clip; -webkit-font-smoothing: antialiased; font-synthesis-weight: none; }
:root { accent-color: var(--wine); }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
::selection { background: var(--wine); color: #fff4f2; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
button, a, [role="button"], label.chip { touch-action: manipulation; }
button, .btn, .chip, .bar__book, .lang button, .dock { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { font-size: 16px; caret-color: var(--chalk); }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p, figure { margin: 0; }
.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 { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--chalk); color: var(--char); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: calc(8px + var(--safe-t)); }

/* ------------------------------------------------------------------ the bar */
/* On an oak plate darkened to bar oak. Phones: the menu, ES · EN, and "Reservar mesa" at the
   thumb. From 1100px: SIMPLE (home), the pages, ES · EN and "Reservar mesa". */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: calc(var(--bar-h) + var(--safe-t)); padding-top: var(--safe-t);
  display: flex; align-items: center;
  padding-left: clamp(2px, 1.6vw, 56px); padding-right: clamp(10px, 3.59vw, 56px);
  background: var(--bar-base);
  background-image: linear-gradient(var(--bar-veil), var(--bar-veil)), url("/assets/plates/oak.webp");
  background-size: auto, 384px 384px;
  border-bottom: 1px solid rgba(214, 150, 96, 0.14);
  view-transition-name: bar;
}
.lang { display: flex; align-items: center; height: 100%; }
.lang a {
  display: grid; place-items: center; height: 100%; width: clamp(44px, 5.85vw, 48px); text-decoration: none;
  font: 400 clamp(14px, 2.4vw, 18px)/1 var(--text); letter-spacing: var(--caps); text-indent: var(--caps); color: #d8d1c7;
  transition: color 160ms var(--ease-out);
}
.lang a[aria-current] { color: var(--chalk); }
.lang__dot { width: clamp(5px, 0.9vw, 6.8px); height: clamp(5px, 0.9vw, 6.8px); margin: 0 clamp(4px, 0.55vw, 4.2px); border-radius: 50%; background: var(--chalk); flex: none; }
.bar__home, .bar__nav { display: none; }
.bar__book { margin-left: auto; }
.bar__home {
  align-items: center; height: 100%; padding: 0 6px; text-decoration: none;
  font: 400 clamp(18px, 1.45vw, 23px)/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--chalk);
  transition: opacity 320ms var(--ease-out), visibility 0s linear 0s;
}
.bar__nav { align-items: center; gap: clamp(20px, 2.2vw, 36px); height: 100%; margin-left: clamp(24px, 3vw, 52px); }
.bar__nav a {
  position: relative; display: inline-flex; align-items: center; height: 100%; text-decoration: none;
  font: 400 15px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase; color: #d8d1c7;
  transition: color 160ms var(--ease-out);
}
.bar__nav a[aria-current] { color: var(--chalk); }
.bar__nav a[aria-current]::after { /* a quick chalk line under the page you are on */
  content: ""; position: absolute; left: 4%; right: -2%; bottom: calc(50% - 0.95em); height: 0.42em;
  border-bottom: 1.5px solid rgba(241, 236, 228, 0.85); border-radius: 0 0 70% 30% / 0 0 100% 100%;
}
@media (min-width: 1100px) {
  .navmenu { display: none; }
  .bar__home, .bar__nav { display: inline-flex; }
  .lang { margin-left: auto; }
  .bar__book { margin-left: clamp(10px, 1.4vw, 22px); }
}

/* the menu on phones: a details, so it opens without the script too */
.navmenu { height: var(--bar-h); }
.navmenu__btn {
  display: grid; place-items: center; width: 48px; height: var(--bar-h); list-style: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.navmenu__btn::-webkit-details-marker { display: none; }
.navmenu__icon { position: relative; display: block; width: 22px; height: 12px; }
.navmenu__icon i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--chalk);
  transition: transform 220ms var(--ease-out), top 220ms var(--ease-out), right 220ms var(--ease-out);
}
.navmenu__icon i:first-child { top: 1px; }
.navmenu__icon i:last-child { top: 9px; right: 6px; }                /* two chalk strokes, not quite equal */
.navmenu[open] .navmenu__icon i:first-child { top: 5px; transform: rotate(45deg); }
.navmenu[open] .navmenu__icon i:last-child { top: 5px; right: 0; transform: rotate(-45deg); }
.navmenu__btn:active .navmenu__icon { transform: scale(0.94); }
.navmenu[open]::before {   /* the page behind sinks while the menu is open */
  content: ""; position: fixed; inset: calc(var(--bar-h) + var(--safe-t)) 0 0 0; z-index: 0;
  background: rgba(9, 4, 3, 0.62); animation: chalkIn 220ms var(--ease-out) both;
}
.navmenu__panel {
  position: fixed; z-index: 1; top: calc(var(--bar-h) + var(--safe-t)); left: 0; right: 0;
  max-height: calc(100dvh - var(--bar-h) - var(--safe-t)); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px var(--gutter) calc(30px + var(--safe-b));
  background: var(--char); border-bottom: 1px solid rgba(214, 150, 96, 0.14);
}
.navmenu[open] .navmenu__panel { animation: panelIn 240ms var(--ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
.navmenu__nav ul { list-style: none; margin: 0; padding: 0; }
.navmenu__nav li + li { border-top: 1px solid var(--rule); }
.navmenu__nav a {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 0; text-decoration: none;
  font: 400 clamp(21px, 6vw, 28px)/1.1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--chalk);
}
.navmenu__nav a[aria-current]::after { /* the logo's small open square marks where you are */
  content: ""; flex: none; width: 9px; height: 9px; border: 1px solid var(--corner);
}
.navmenu__nav a:active { opacity: 0.7; }
.navmenu__where { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 17px; color: var(--chalk-2); }
.navmenu__where a { color: var(--chalk); text-decoration-color: rgba(241, 236, 228, 0.45); }
.bar__book {
  position: relative; height: 100%; display: inline-flex; align-items: center;
  padding: 0 clamp(14px, 3.2vw, 24px); text-decoration: none;
  font: 400 clamp(13px, 2.4vw, 17px)/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk);
  transition: transform 160ms var(--ease-out);
}
.bar__book::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 1px); height: clamp(34px, 5.72vw, 43px);
  transform: translateY(-50%); border: 1.5px solid rgba(241, 236, 228, 0.92);
  transition: background-color 200ms var(--ease-out);
}
.bar__book:active { transform: scale(0.97); }

/* -------------------------------------------------------------- the stage */
/* The first screen is the approved comp: every element sits at its measured box, as a
   share of the stage, so the whole composition scales with the width of the phone. */
.hero { position: relative; background: var(--char); overflow: hidden; container-type: inline-size; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 12%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--ground-rgb), 0), var(--ground));
}
.hero__wide { display: none; }
.hero__dim { position: absolute; inset: 0; z-index: 1; background: #090403; opacity: 0; pointer-events: none; }
.stage { position: relative; width: 100%; aspect-ratio: 752 / 1344; container-type: inline-size; }
.stage > * { position: absolute; margin: 0; }
.stage__cellar { inset: 0; }
.stage__cellar img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
/* their logo, alone, in the light that falls on the cellar wall */
.stage__logo { left: 23%; top: 10.2%; width: 54%; isolation: isolate; }
/* its shadow is a soft dark halo behind it, not a filter on the image: on an iPhone the filtered image came out as a
   white box (Santi, 2026-10-10) */
.stage__logo::before { content: ""; position: absolute; inset: 6% 2% 0; z-index: -1; background: radial-gradient(closest-side, rgba(8, 4, 2, 0.5), rgba(8, 4, 2, 0.22) 60%, rgba(8, 4, 2, 0)); pointer-events: none; }
.stage__logo img { width: 100%; height: auto; }
.hero__copy {
  position: absolute; z-index: 2; left: 7.85%; right: 6%; bottom: 4.3%;
  display: flex; flex-direction: column; align-items: flex-start; pointer-events: none;
}
.hero__copy > * { pointer-events: auto; }
.stage__h {
  max-width: 22ch; text-wrap: balance;
  font: 400 6cqw/1.12 var(--display); letter-spacing: 0.01em; color: #f4efe7;
  text-shadow: 0 2px 18px rgba(10, 5, 3, 0.55);
}
.stage__sub {
  margin-top: 1.6cqw;
  font: 400 max(16px, 3.2cqw)/1.35 var(--text); letter-spacing: 0.01em; color: #ebe4da;
  text-shadow: 0 1px 12px rgba(10, 5, 3, 0.6);
}
.hero .hero__book { display: none; }
.stage__place {
  left: 38.43%; top: 35.57%; width: 23.94%; height: 4.61%;
  display: grid; place-items: center;
  font: 300 max(14px, 3.08cqw)/1 var(--hand); color: #ece8e2; white-space: nowrap;
  transform: rotate(-10deg);
}
.stage__place span { position: relative; }
.stage__place span::after { /* a quick chalk underline */
  content: ""; position: absolute; left: 20%; right: -3%; bottom: -0.62em; height: 0.55em;
  border-bottom: 2px solid rgba(241, 236, 228, 0.85); border-radius: 0 0 70% 30% / 0 0 100% 100%;
}
.stage__glass { left: 32.98%; top: 42.11%; width: 33.25%; height: 40.33%; }
/* where the real glass stands on the counter: a soft shadow under its foot */
.stage__glass::before {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 0.4%; height: 4.5%;
  background: radial-gradient(closest-side, rgba(10, 5, 2, 0.6), rgba(10, 5, 2, 0)); pointer-events: none;
}

/* the glass: their own (2026-10-07, Santi: "la copa tiene que ser como la de este video"), the
   angular bowl of their reel, photorealistic on black from their photo and kept as light on
   transparency (lab/glass-real.py); their logo printed on it from their own file. The wine is code,
   inside the bowl, under the glass's reflections, so it can fill and sway. */
.glass { position: absolute; inset: 0; display: block; isolation: isolate; transform-origin: 50% 100%; --y: 48; --sw: 40; }
.glass picture, .glass__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.glass picture, .glass > .glass__img { z-index: 2; }
.glass__under, .glass__wine, .glass__men {
  position: absolute; inset: 0; overflow: hidden; z-index: 1;
  -webkit-mask: url("/assets/plates/glass-real-bowl.png") 0 0 / 100% 100% no-repeat;
  mask: url("/assets/plates/glass-real-bowl.png") 0 0 / 100% 100% no-repeat;
}
/* their logo, printed in white on the front of the bowl as on their glasses: over the wine */
.glass__print { position: absolute; z-index: 3; left: 28%; top: 21.2%; width: 44%; height: auto; opacity: 0.84; pointer-events: none; }
.glass__under i, .glass__wine i, .glass__men i {
  position: absolute; inset: -6% -30%; display: block; transform-origin: 50% 0;
  /* the layer is 112% of the glass tall and starts 6% above it, so the surface lands at --y% */
  transform: translateY(calc((var(--y) + 6) * 0.8929%));
}
/* the level and the sway as properties of their own, so a flight can sway the wine
   (element.animate on rotate) without touching the level */
@supports (translate: 0) and (rotate: 0deg) {
  .glass__under i, .glass__wine i, .glass__men i {
    transform: none; translate: 0 calc((var(--y) + 6) * 0.8929%); rotate: calc(var(--tilt, 0) * 1deg);
  }
}
.glass__under i { background: none; }
/* red wine as it looks in a glass: almost black-red where it is deep, ruby where the light
   crosses it thin along the walls and just under the surface */
.glass__wine i {
  background:
    linear-gradient(to bottom, rgba(158, 32, 48, 0.5) 0, rgba(158, 32, 48, 0) 2.2%),
    radial-gradient(ellipse 19% 26% at 50% 12%, rgba(22, 1, 5, 0.92), rgba(22, 1, 5, 0) 100%),
    linear-gradient(to bottom, rgba(14, 0, 3, 0) 4%, rgba(14, 0, 3, 0.55) 40%),
    #6c0e1f;
}
/* the surface: an ellipse as wide as the bowl at that height (--sw, % of the glass, set with the
   level), seen a little from above, its back edge catching the light */
.glass__men i::before {
  content: ""; position: absolute; left: 50%; top: 0; width: calc(var(--sw) * 0.625%); aspect-ratio: 1 / 0.055;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 62%, #7a1a2c 0, #5a0a1a 72%, #95323f 100%);
  box-shadow: inset 0 1px 0.5px rgba(255, 196, 206, 0.6);
}

/* the facts, pinned to the glass on chalk leader lines */
.fact__t {
  display: grid; place-items: center; width: 100%; height: 100%;
  font: 300 max(14px, 3.18cqw)/1 var(--hand); color: #ece8e2; white-space: nowrap; text-decoration: none;
  word-spacing: 0.06em; letter-spacing: 0.01em; text-shadow: 0 1px 3px rgba(10, 5, 3, 0.7);
}
.fact__t { position: relative; }
.fact__t::before { content: ""; position: absolute; inset: -12px -8px; }
.fact--google { left: 69.28%; top: 46.06%; width: 19.02%; height: 2.98%; transform: rotate(-4deg); }
.fact--wines { left: 8.38%; top: 57.74%; width: 24.2%; height: 4.32%; transform: rotate(-8deg); }
.fact--wines .fact__t { font-size: max(14px, 3.18cqw); word-spacing: 0.1em; justify-items: start; padding-left: 0.5cqw; }
.fact--wines .fact__t span { position: relative; }
.fact--wines .fact__t span::after {
  content: ""; position: absolute; left: 20%; right: -3%; bottom: -0.52em; height: 0.5em;
  border-bottom: 2px solid rgba(241, 236, 228, 0.82); border-radius: 0 0 70% 30% / 0 0 100% 100%;
  transform: rotate(-4deg); transform-origin: 0 100%;
}
.fact--days { left: 66.62%; top: 61.68%; width: 24.07%; height: 3.13%; transform: rotate(-4deg); }
@media (max-width: 600px) {
  .fact--wines { left: 3.2%; }
  .fact--wines .fact__t { word-spacing: 0.02em; }
  .stage__place { top: 36.4%; }
}
.lead-line { pointer-events: none; transition: opacity 200ms var(--ease-out); }
.is-glass-away .lead-line { opacity: 0; }
.lead-line::before { content: ""; position: absolute; inset: 0; }
.lead-line::after { content: ""; position: absolute; width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: var(--chalk); }
.lead-line--google { left: 58.78%; top: 48.14%; width: 9.18%; height: 2.01%; }
.lead-line--google::before { background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(241, 236, 228, 0.9) calc(50% - 1px), rgba(241, 236, 228, 0.9) calc(50% + 0.6px), transparent calc(50% + 0.6px)); }
.lead-line--google::after { left: -0.4cqw; bottom: -0.4cqw; }
.lead-line--wines { left: 31.52%; top: 59.52%; width: 9.18%; height: 1.04%; }
.lead-line--wines::before { background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(241, 236, 228, 0.9) calc(50% - 1px), rgba(241, 236, 228, 0.9) calc(50% + 0.6px), transparent calc(50% + 0.6px)); }
.lead-line--wines::after { right: -0.4cqw; bottom: -0.4cqw; }
.lead-line--days { left: 52.26%; top: 64.06%; width: 13.3%; height: 2.98%; }
.lead-line--days::before { background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(241, 236, 228, 0.9) calc(50% - 1px), rgba(241, 236, 228, 0.9) calc(50% + 0.6px), transparent calc(50% + 0.6px)); }
.lead-line--days::after { left: -0.4cqw; bottom: -0.4cqw; }

/* ----------------------------------------------------- the travelling glass */
/* After the first screen the glass leaves the counter, waits in the corner filling as you
   read, and lands full in the booking section. Each move is a flight the compositor runs
   (site.js), so it stays smooth while iOS scrolls. In the corner the glass is drawn at its
   own size, from a rendition with a heavier chalk line (lab/glass-dock.py): the big glass
   scaled down to a quarter broke its line up. */
.dock {
  position: fixed; z-index: 34; right: 0; bottom: 0;
  padding: 10px calc(8px + env(safe-area-inset-right, 0px)) calc(12px + var(--safe-b)) 12px;
  display: flex; align-items: flex-end; gap: 10px; text-decoration: none;
  pointer-events: none; visibility: hidden; transition: visibility 0s linear 280ms;
}
.dock.is-on { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.dock__label {
  font: 300 20px/1 var(--hand); color: var(--chalk); white-space: nowrap;
  padding: 11px 14px 10px; background: rgba(var(--char-rgb), 0.92); border: 1px solid rgba(var(--fg-rgb), 0.55);
  margin-bottom: 16px; opacity: 0; transform: translateX(10px);
  transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out);
}
.dock.is-full .dock__label { opacity: 1; transform: none; }
.dock__glass { position: relative; flex: none; display: block; width: 33px; height: 72px; }
@supports (aspect-ratio: 1) {
  .dock__glass { width: auto; height: clamp(68px, 10.5svh, 92px); aspect-ratio: 620 / 1344; }
}
[data-glass="dock"] { visibility: hidden; }
/* a breath of paper behind the corner glass: over the paper it is nothing; when a photo passes under the
   corner, the inked glass still stands out from it */
.dock__glass::before {
  content: ""; position: absolute; inset: -6% -38%; pointer-events: none; opacity: 0; transition: opacity 280ms var(--ease-out);
  background: radial-gradient(closest-side, rgba(var(--char-rgb), 0.82), rgba(var(--char-rgb), 0.5) 55%, rgba(var(--char-rgb), 0));
}
.dock.is-on .dock__glass::before { opacity: 1; }
/* the glass that flies into the corner: the counter's own drawing, at its size, placed in the
   corner's space so it moves with the corner when Safari's bars slide */
.flyer { position: absolute; left: 50%; bottom: 0; pointer-events: none; visibility: hidden; transform-origin: 50% 100%; }
.dock.is-full:active .dock__label { transform: scale(0.97); }
/* in the corner, over the paper, the chalk glass is drawn in ink; the one flying in from the
   photograph turns to ink on the way (a filter on its own composited layer) */
.dock .glass__img { transition: filter 600ms var(--ease-out); }
.dock.is-on .glass__img { filter: brightness(0.22) sepia(0.7) saturate(1.6); }
/* their logo stays white enamel on the glass, over the wine too; on the paper a fine dark edge keeps
   it legible (it is never inked with the glass: dark on the wine it would vanish) */
.dock .glass__print { opacity: 1; transition: filter 600ms var(--ease-out); }
.dock.is-on .glass__print { filter: drop-shadow(0 0 0.6px rgba(36, 22, 14, 0.95)) drop-shadow(0 0 0.4px rgba(36, 22, 14, 0.9)); }

/* -------------------------------------------------------------- sections */
.sec { position: relative; background: var(--char); padding: clamp(84px, 20vw, 156px) var(--gutter); }
.sec__in { max-width: 46rem; margin: 0 auto; position: relative; }
.sec h2 { font: 400 clamp(28px, 8.2vw, 54px)/1.1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--chalk); }
.sec__lead { margin-top: 22px; max-width: 32ch; font-size: clamp(21px, 5.3vw, 26px); line-height: 1.4; color: var(--chalk-2); text-wrap: pretty; }
/* The finish comes from their sign: a cream panel with fine L corners, and "SIMPLE" inside a
   fine square. Sections on the same ground are parted by a fine cream rule that fades at both
   ends with the logo's small square at its centre; where the ground changes (the cellar, the
   planks) it fades instead. Frames (the storefront photo, the meals) take the sign's corners. */
:root {
  --cream-line: rgba(85, 58, 14, 0.5);     /* their logo's brown, on the paper */
  --corner: rgba(85, 58, 14, 0.8);
  --corner-t: 1.5px;
  --corners:
    linear-gradient(var(--corner), var(--corner)) 0 0 / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 0 / var(--corner-t) 28px no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 0 / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 0 / var(--corner-t) 28px no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 100% / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 100% / var(--corner-t) 28px no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 100% / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 100% / var(--corner-t) 28px no-repeat;
}
@media (max-resolution: 1.99dppx) { :root { --corner-t: 1px; } } /* a 1.5px stroke smears on 1x screens */
/* Where the cellar stays: the wood and the photograph. The bar (and its menu), the first screen and
   the oak where you book keep the night's tokens, chalk on the dark; they fade into the paper. */
.bar, .hero, .book, .wood {
  color-scheme: dark;
  --char-rgb: 61, 42, 29; --char: rgb(var(--char-rgb)); --char-2: #48331f;
  --chalk: #f1ece4; --chalk-2: #d6cfc5; --chalk-3: #b8afa4;
  --fg-rgb: 241, 236, 228; --ghost: rgba(241, 236, 228, 0.26); --rule: rgba(241, 236, 228, 0.14);
  --field-fill: #4a3424; --option-bg: #4a3424; --err: #ff9fae;
  --cream-line: rgba(243, 234, 219, 0.46); --corner: rgba(243, 234, 219, 0.92);
  --corners:
    linear-gradient(var(--corner), var(--corner)) 0 0 / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 0 / var(--corner-t) 28px no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 0 / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 0 / var(--corner-t) 28px no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 100% / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 100% / var(--corner-t) 28px no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 100% / 28px var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 100% / var(--corner-t) 28px no-repeat;
}
.rule { position: relative; height: 9px; background: var(--char); }
.rule::before, .rule::after {
  content: ""; position: absolute; top: 4px; height: 1px;
  width: calc(min(46rem, 100% - 2 * var(--gutter)) / 2 - 20px);
}
.rule::before { right: calc(50% + 20px); background: linear-gradient(to left, var(--cream-line), rgba(243, 234, 219, 0)); }
.rule::after { left: calc(50% + 20px); background: linear-gradient(to right, var(--cream-line), rgba(243, 234, 219, 0)); }
.rule i { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; border: 1px solid var(--corner); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btns .btn { flex: 1 1 auto; }
@media (min-width: 700px) { .btns .btn { flex: 0 0 auto; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  font: 400 16px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase; text-decoration: none; color: var(--chalk);
  border: 1px solid rgba(var(--fg-rgb), 0.86); background: transparent; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.btn--wine { background: var(--wine); border-color: var(--wine); color: #ffeeeb; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; margin-left: 10px; flex: none; }
/* their map pin, drawn in the same fine line as the glass, leading the directions button */
.btn .btn__pin { width: 20px; height: 20px; margin: -1px 10px 0 -3px; }

/* the carta: written up like the chalkboards outside their door */
.menu { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.menu li {
  padding: 15px 0 13px;
  font: 300 clamp(24px, 6.4vw, 34px)/1.12 var(--hand); color: var(--chalk);
}
.menu li:last-child { grid-column: 1 / -1; }
.note { margin-top: 22px; font-size: 16px; color: var(--chalk-3); }

/* reviews */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; color: var(--chalk-2); font-size: clamp(19px, 4.8vw, 22px); }
.stars { display: inline-flex; gap: 3px; color: var(--oak-lit); }
.stars svg { width: 18px; height: 18px; }
.quotes { list-style: none; margin: 44px 0 0; padding: 0; }
.quote { padding: 28px 0 30px; border-top: 1px solid var(--rule); }
.quote blockquote { margin: 0; }
.quote blockquote p { position: relative; font: 400 clamp(22px, 5.8vw, 29px)/1.36 var(--text); color: var(--chalk); max-width: 34ch; }
.quote figcaption { margin-top: 14px; font: 300 21px/1.2 var(--hand); color: var(--chalk-2); }
.quote .tr { display: block; margin-top: 6px; font: 400 14px/1.3 var(--text); color: var(--chalk-3); letter-spacing: 0.06em; text-transform: uppercase; }
.quote .tr:empty { display: none; }

/* hours and the way there */
.now { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: clamp(20px, 5vw, 23px); color: var(--chalk); }
.now::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--chalk-2); flex: none; }
.now.is-open::before { background: var(--chalk); border-color: var(--chalk); }
.now:empty { display: none; }
/* the owners' changes to the coming days (their Agenda), framed like the meals, under the open-now line */
.changes { position: relative; margin-top: 22px; padding: 18px 22px 14px; }
.changes::after { content: ""; position: absolute; inset: 0; background: var(--corners); pointer-events: none; }
.changes[hidden] { display: none; }
.changes__h { font: 400 15px/1.3 var(--text); letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk); }
.changes__list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 19px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.changes__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0 8px; border-top: 1px solid var(--rule); color: var(--chalk-2); }
.changes__list li:first-child { border-top: 0; }
.changes__list li span:last-child { color: var(--chalk); text-align: right; white-space: nowrap; }
@media (max-width: 699px) { .changes { width: calc(100% - 24px); } } /* clears the corner glass */
.meals { position: relative; display: grid; gap: 16px; margin: 30px 0 0; padding: 24px 26px; }
.meals::after { content: ""; position: absolute; inset: 0; background: var(--corners); pointer-events: none; }
.meals dt { font: 400 15px/1.3 var(--text); letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk); }
.meals dd { margin: 4px 0 0; font-size: 19px; line-height: 1.35; color: var(--chalk-2); text-wrap: pretty; }
@media (min-width: 700px) and (max-width: 999px) { .meals { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.hours { width: 100%; margin-top: 30px; border-collapse: collapse; font-size: 19px; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 13px 0; border-top: 1px solid var(--rule); text-align: left; font-weight: 400; color: var(--chalk-2); }
.hours td { text-align: right; }
@media (max-width: 699px) { .hours, .meals { width: calc(100% - 24px); } } /* clears the corner glass */
.hours tr.is-today th, .hours tr.is-today td { color: var(--chalk); }
.hours .today-tag { margin-left: 10px; font: 300 19px/1 var(--hand); color: var(--chalk); }
.hours tr[data-day="0"] th, .hours tr[data-day="0"] td { color: var(--chalk-3); }
.happy { margin-top: 24px; font: 400 clamp(20px, 5vw, 23px)/1.4 var(--text); color: var(--chalk); }
.hours-note { margin-top: 10px; font-size: 15px; color: var(--chalk-3); }
.way { margin-top: clamp(64px, 16vw, 110px); }
.way address { margin-top: 22px; font-style: normal; font-size: clamp(22px, 5.6vw, 28px); line-height: 1.35; }
.way .soft { margin-top: 10px; color: var(--chalk-2); }
.door { margin-top: 52px; }
.door__frame { display: block; }
.door__pic { display: block; overflow: hidden; }
.door img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.door figcaption { margin-top: 16px; font: 300 20px/1.3 var(--hand); color: var(--chalk-2); }
/* Their own food photos, bare (no frames since 2026-10-07, Santi: "sacar los marcos de las fotos"),
   with the dish's name in hand under each. Shown as they are, without the photo filter. */
.pic { margin: 0; }
.pic__frame { display: block; }
.pic__img { display: block; overflow: hidden; background: var(--char-2); }
.pic img { display: block; width: 100%; height: auto; object-fit: cover; }
.pic figcaption { margin-top: 12px; font: 300 20px/1.3 var(--hand); color: var(--chalk-2); text-wrap: balance; }
/* the home page's dishes: two to a row on a phone, three from 700px, every one in sight */
.plates { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.plates > li { min-width: 0; }
.plates img { aspect-ratio: 1 / 1; }
@media (max-width: 699px) {
  .plates .pic figcaption { margin-top: 9px; font-size: 18px; line-height: 1.25; }
}
@media (min-width: 700px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; } }


/* booking: the glass lands here, full, on the oak of the barrel */
.book { background: var(--booking); }
/* walnut planks (lab/planks.py, GPT Image's 4k tier, 2880 px): one tile repeats both ways, every board with its own butt
   joint; about 118 CSS px a board (--plank-w), the same with the 2880 px source or the 4K one */
.book::before, .book::after { content: ""; position: absolute; left: 0; right: 0; z-index: 0; height: clamp(90px, 18vw, 170px); pointer-events: none; }
.book::before { top: 0; background: linear-gradient(to bottom, var(--ground), rgba(var(--ground-rgb), 0)); }
.book::after { bottom: 0; background: linear-gradient(to top, var(--ground), rgba(var(--ground-rgb), 0)); }
.book > .sec__in { z-index: 1; }
/* The page ends on the wood (Santi, 2026-10-06: "quiero este fondo todo de madera"): the oak where
   you book, the closing line and the footer are one run of planks, faded in from the paper above;
   one element, so the boards never break between them. */
.wood { position: relative; --plank-w: 944px; background: var(--booking); }
.wood.is-near {
  background: var(--booking) url("/assets/plates/planks-2x.webp") 50% 0 / var(--plank-w) auto repeat;
  background-image: image-set(url("/assets/plates/planks-1x.webp") 1x, url("/assets/plates/planks-2x.webp") 2x, url("/assets/plates/planks-3x.webp") 3x);
}
@media (max-width: 480px) {
  .wood.is-near { background-image: image-set(url("/assets/plates/planks-phone-2x.webp") 2x, url("/assets/plates/planks-phone-3x.webp") 3x); background-size: 480px auto; }
}
.wood::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 18vw, 170px); pointer-events: none;
  background: linear-gradient(to bottom, var(--ground), rgba(var(--ground-rgb), 0));
}
.wood > * { position: relative; z-index: 1; }
.wood .book, .wood .book.is-near, .wood .last, .wood .foot { background: none; }
.wood .book::before, .wood .book::after { display: none; }
/* while the list is hidden (until its script is set), the booking's planks run straight into the wood */
main:has(> .lista[hidden]) + .wood::before, .book--page:has(~ .lista[hidden])::after { display: none; }
.book { --plank-w: 944px; --plank-sink: linear-gradient(to bottom, rgba(var(--char-rgb), 0) 0, rgba(var(--char-rgb), var(--sink)) 520px, rgba(var(--char-rgb), var(--sink)) 100%); }
.book.is-near {
  /* the planks stay bright around the heading and at the edges; under the form they sink */
  background: var(--plank-sink), var(--booking) url("/assets/plates/planks-2x.webp") 50% 0 / var(--plank-w) auto repeat;
  background-image: var(--plank-sink), image-set(url("/assets/plates/planks-1x.webp") 1x, url("/assets/plates/planks-2x.webp") 2x, url("/assets/plates/planks-3x.webp") 3x);
}
@media (max-width: 480px) {
  .book.is-near {
    background-image: var(--plank-sink), image-set(url("/assets/plates/planks-phone-2x.webp") 2x, url("/assets/plates/planks-phone-3x.webp") 3x);
    background-size: auto, 480px auto;
  }
}
@media (min-width: 1000px) {
  .book {
    --plank-sink:
      radial-gradient(ellipse 34% 62% at 50% 60%, rgba(var(--char-rgb), 0.5), rgba(var(--char-rgb), 0) 100%),
      linear-gradient(to bottom, rgba(var(--char-rgb), 0) 0, rgba(var(--char-rgb), 0.3) 620px, rgba(var(--char-rgb), 0.3) 100%);
  }
  .book.is-near { background-size: auto, auto, var(--plank-w) auto; background-repeat: no-repeat, no-repeat, repeat; background-position: 0 0, 0 0, 50% 0; }
}
/* on the lit oak the quietest text steps up a shade so it still reads */
.book .book__legal, .book .field label span, .book .chip input:disabled + span { color: #b9b1a6; }
.book .book__rules, .book .book__more, .book .field label { color: #d2cbc1; }
.book__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 18px; }
.book__glass { grid-column: 2; grid-row: 1; position: relative; width: clamp(58px, 17vw, 92px); aspect-ratio: 620 / 1344; margin-right: -4px; }
.book__h { grid-column: 1; grid-row: 1; }
.book__rules { margin-top: 22px; max-width: calc(100% - clamp(64px, 19vw, 100px)); color: var(--chalk-2); font-size: clamp(19px, 4.9vw, 22px); text-wrap: balance; }
.form { margin-top: 44px; }
.step { border: 0; margin: 0; padding: 26px 0 28px; border-top: 1px solid var(--rule); min-width: 0; }
.step legend { display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 18px; font: 400 17px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk); }
.step__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px dashed var(--ghost); color: var(--chalk-2); font: 400 16px/1 var(--text); letter-spacing: 0; text-indent: 0; font-variant-numeric: tabular-nums;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.step.is-done .step__n { background: var(--chalk); border: 1.5px solid var(--chalk); color: var(--char); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips + .chips, .book__more + .chips { margin-top: 14px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
@media (min-width: 700px) {
  .chips--scroll { margin: 0; padding: 2px 44px 8px 0; scroll-padding-inline: 0;
    -webkit-mask: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chips[data-times] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chips[data-times] .chip span { width: 100%; min-width: 0; padding: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .chips[data-times] { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.chip { position: relative; display: inline-flex; scroll-snap-align: start; flex: none; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 48px; padding: 0 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.34); font: 400 18px/1 var(--text); color: var(--chalk);
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.chip input:checked + span { background: var(--wine); border-color: var(--wine); color: #ffeeeb; }
.chip input:focus-visible + span { outline: 2px solid var(--chalk); outline-offset: 2px; }
.chip input:disabled + span { color: var(--chalk-3); border-style: dashed; border-color: var(--ghost); text-decoration: line-through; }
.chip:active span { transform: scale(0.97); }
.chip--day span { flex-direction: column; gap: 5px; min-width: 64px; min-height: 76px; padding: 10px 8px; }
.chip--day i { font: 400 13px/1 var(--text); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk-2); }
.chip--day b { font: 400 22px/1 var(--display); }
.chip--day em { font: 400 13px/1 var(--text); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk-2); }
.chip--day input:checked + span i, .chip--day input:checked + span em { color: #ffeeeb; }
.book__more { margin-top: 16px; font-size: 17px; color: var(--chalk-2); }
/* events, tastings, big groups: a WhatsApp message already started (Santi, 2026-10-10) */
.book__event { margin-top: 14px; padding: 12px 22px; line-height: 1.35; text-align: center; }
.book__event + .chips { margin-top: 22px; }
/* groups of 5 to 20: a request, framed like their sign, that Simple accepts or declines by email */
.chip--group span { padding: 0 18px; }
.group { position: relative; margin-top: 18px; padding: 22px 22px 20px; }
.group::after { content: ""; position: absolute; inset: 0; background: var(--corners); pointer-events: none; }
.group select, .bday select {
  width: 100%; max-width: 220px; padding: 12px 42px 11px 12px; border: 0; border-bottom: 1px solid rgba(var(--fg-rgb), 0.4); border-radius: 0;
  background: rgba(var(--char-rgb), 0.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f1ece4' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center / 14px 9px no-repeat;
  color: var(--chalk); font: 400 19px/1.4 var(--text); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.group select:focus, .bday select:focus { outline: none; border-bottom: 2px solid var(--chalk); padding-bottom: 10px; }
.group option, .bday option { background: var(--option-bg); color: var(--chalk); }
.has-err select { border-bottom-color: var(--err); }
.group__how { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: g; display: grid; gap: 12px; }
/* the text flows as one line of words; the numeral sits beside it (a grid would split <b> from the rest) */
.group__how li { counter-increment: g; position: relative; min-height: 32px; padding: 5px 0 5px 46px; font-size: 18px; line-height: 1.35; color: var(--chalk); }
.group__how li::before {
  content: counter(g); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px dashed var(--ghost); color: var(--chalk-2); font: 400 15px/1 var(--text);
}
.group__how li.is-done::before { background: var(--chalk); border: 1.5px solid var(--chalk); color: var(--char); }
.group__how li { color: #d2cbc1; }
.group__how b { font-weight: 400; color: var(--chalk); }   /* Forum has one weight: emphasis is the brighter chalk */
.group__note { margin-top: 18px; font-size: 16px; line-height: 1.45; color: #d2cbc1; }
.field__hint { margin-top: 6px; font-size: 15px; color: var(--chalk-2); }
.form:not(.is-group) [data-group-only] { display: none; }
.form.is-group [data-field="email"] label span { display: none; }
.book__done .group__how { margin-top: 24px; }
.fields { display: grid; gap: 18px; }
.field label { display: block; margin-bottom: 8px; font-size: 17px; color: var(--chalk-2); }
.field label span { color: var(--chalk-3); }
.field input, .field textarea {
  width: 100%; padding: 12px 12px 11px; border: 0; border-bottom: 1px solid rgba(var(--fg-rgb), 0.4); border-radius: 0;
  background: rgba(var(--char-rgb), 0.38); color: var(--chalk); font: 400 19px/1.4 var(--text);
  transition: border-color 180ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 64px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--chalk); padding-bottom: 10px; }
.err { margin-top: 6px; font-size: 16px; color: var(--err); }
.err:empty { display: none; }
.has-err input { border-bottom-color: var(--err); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book__summary { min-height: 1.4em; margin-top: 22px; font: 400 20px/1.4 var(--text); color: var(--chalk); }
.book__summary:empty { display: none; }
.book__send { width: 100%; margin-top: 16px; min-height: 58px; font-size: 17px; }
.book__legal { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--chalk-3); max-width: 60ch; }
.book__status { margin-top: 12px; font-size: 17px; color: var(--chalk); }
.book__status:empty { display: none; }
.book__done { padding: 34px 0; border-top: 1px solid var(--rule); outline: none; }
.book__done h3 { font: 400 clamp(24px, 6.4vw, 36px)/1.15 var(--display); color: var(--chalk); }
.book__done p { margin-top: 12px; color: var(--chalk-2); }
.book__next { margin-top: 22px; font-size: 18px; }
/* the list, ticked from the booking (2026-10-07): a quiet box under the details */
.book__news { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(var(--fg-rgb), 0.18); max-width: 40rem; }
.book__news-h { font: 400 20px/1.35 var(--text); color: var(--chalk); }
.book__news .consent { margin-top: 14px; }
.book__news .field__hint { margin-top: 10px; padding-left: 42px; }
.book__news .err { padding-left: 42px; }
.book__news-line { display: block; margin-top: 8px; }
.book__next a { color: var(--chalk); text-decoration-color: rgba(241, 236, 228, 0.5); }
/* what the browser paints over a field it filled in: the field's own colours instead */
.field input:-webkit-autofill, .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--chalk); caret-color: var(--chalk);
  -webkit-box-shadow: 0 0 0 60px var(--field-fill) inset; transition: background-color 600000s 0s;
}

/* Simple's list: discounts and news by email, and a discount for your birthday. One form on
   charred oak inside their sign's corners, which draw themselves in as it arrives; the act in
   wine. Hidden until Simple's script takes sign-ups (data-news-endpoint). */
.lista[hidden] { display: none; }
.lista__form { position: relative; margin-top: 44px; padding: 30px clamp(18px, 5vw, 34px) 28px; }
.lista__form::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; --arm: 28px;
  background:
    linear-gradient(var(--corner), var(--corner)) 0 0 / var(--arm) var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 0 / var(--corner-t) var(--arm) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 0 / var(--arm) var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 0 / var(--corner-t) var(--arm) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 100% / var(--arm) var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 0 100% / var(--corner-t) var(--arm) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 100% / var(--arm) var(--corner-t) no-repeat,
    linear-gradient(var(--corner), var(--corner)) 100% 100% / var(--corner-t) var(--arm) no-repeat;
}
.lista__fields { display: grid; gap: 20px; }
@media (min-width: 700px) {
  .lista__fields { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .lista__fields [data-field="email"] { grid-column: 1 / -1; }
}
/* on charred oak the fields' charred veil would vanish: a breath of chalk shows where to write */
.lista .field input, .lista .bday select { background-color: rgba(var(--fg-rgb), 0.045); }
.lista .field__hint { color: var(--chalk-2); }   /* on charred oak the quiet text is chalk soft, as the labels */
.bday { border: 0; margin: 0; padding: 0; min-width: 0; }
.bday legend { padding: 0; margin-bottom: 8px; font-size: 17px; color: var(--chalk-2); }
.bday legend span { color: var(--chalk-3); }
.bday__pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px; }
.bday select { max-width: none; }
.bday option:disabled { color: var(--chalk-3); }
.has-err .bday__pick select { border-bottom-color: var(--err); }
/* the one box to tick: square like every control, wine once chosen, its tick in wine ink */
.consent { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; margin-top: 28px; font-size: 18px; line-height: 1.42; color: var(--chalk); cursor: pointer; }
.consent input { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.consent__box {
  position: relative; width: 28px; height: 28px; border: 1px solid rgba(var(--fg-rgb), 0.6); background: rgba(var(--fg-rgb), 0.045);
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.consent__box::after {
  content: ""; position: absolute; left: 8px; top: 7px; width: 11px; height: 6px;
  border: solid #ffeeeb; border-width: 0 0 2px 2px; opacity: 0; transform: rotate(-45deg) scale(0.4);
  transition: opacity 140ms var(--ease-out), transform 220ms var(--ease-out);
}
.consent input:checked + .consent__box { background: var(--wine); border-color: var(--wine); }
.consent input:checked + .consent__box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--chalk); outline-offset: 3px; }
.consent:active .consent__box { transform: scale(0.94); }
.has-err .consent__box { border-color: var(--err); }
[data-field="acepto"] .err { margin-left: 42px; }
.lista__send { width: 100%; margin-top: 26px; min-height: 58px; font-size: 17px; }
.lista__legal { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--chalk-3); max-width: 60ch; }
.lista__status { margin-top: 12px; font-size: 17px; color: var(--chalk); }
.lista__status:empty { display: none; }
.lista__done { outline: none; }
.lista__done h3 { font: 400 clamp(24px, 6.4vw, 36px)/1.15 var(--display); }
.lista__done p { margin-top: 12px; color: var(--chalk-2); }
.lista__done b { font-weight: 400; color: var(--chalk); overflow-wrap: anywhere; }
.lista__done .group__how { margin-top: 24px; }
.lista__done .lista__note { margin-top: 20px; font-size: 16px; color: var(--chalk-3); }

.last {
  padding: clamp(70px, 16vw, 130px) var(--gutter) clamp(56px, 12vw, 100px); text-align: center; text-wrap: balance;
  font: 400 clamp(25px, 6.6vw, 48px)/1.22 var(--display); letter-spacing: 0.01em; color: var(--chalk);
  background: linear-gradient(to bottom, var(--char) 55%, var(--floor));
}

.foot { background: var(--floor); padding: 54px var(--gutter) calc(118px + var(--safe-b)); color: var(--chalk-2); font-size: 17px; }
.foot__in { max-width: 46rem; margin: 0 auto; display: grid; gap: 10px; }
.foot__logo { width: 160px; height: auto; margin-bottom: 14px; opacity: 0.92; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.foot a { text-decoration-color: rgba(var(--fg-rgb), 0.4); }
/* who made the web (Santi, 2026-10-08: "web hecha por y mi logo completo ... debe resaltar"): framed,
   the last thing in the footer, the whole frame a link to slugweb.eu */
.foot .foot__by {
  justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 26px; padding: 16px 22px; border: 1px solid rgba(var(--fg-rgb), 0.5);
  color: var(--chalk); text-decoration: none; -webkit-tap-highlight-color: transparent;
  font: 400 15px/1.2 var(--text); letter-spacing: var(--caps); text-transform: uppercase;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.foot__by img { display: block; width: auto; height: 32px; }
.foot__by:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .foot .foot__by:hover { border-color: rgba(var(--fg-rgb), 0.9); background: rgba(var(--fg-rgb), 0.06); } }


/* ------------------------------------------------------------ wide screens */
/* Wider than a phone, the scene stands whole in the middle of a wide cellar, sized by the
   height of the screen, so the logo, the glass and its facts keep the comp's drawing. */
@media (min-aspect-ratio: 13/20) {
  .hero { height: 100vh; height: 100svh; min-height: 600px; }
  .hero__wide {
    display: block; position: absolute; inset: -4% 0 0 0; filter: var(--photo-filter);
    background: var(--char) url("/assets/plates/cellar-wide-1600.webp") 50% 100% / cover no-repeat;
    background-image: image-set(url("/assets/plates/cellar-wide-1600.webp") 1x, url("/assets/plates/cellar-wide-2560.webp") 2x);
  }
  .stage { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 752 / 1344; transform: translateX(-50%); }
  .stage__cellar { display: none; }
  .hero__copy { left: calc(50% - 23.59svh); right: auto; width: calc(55.95svh * 0.88); bottom: 4.3%; }
  .stage__h { font-size: 3.36svh; }
  .stage__sub { margin-top: 0.9svh; font-size: max(16px, 1.78svh); }
  .fact__t { font-size: max(16px, 3.18cqw); }
  .fact--wines .fact__t { font-size: max(16px, 3.18cqw); }
  .stage__place { font-size: max(16px, 3.08cqw); }
}
/* A real desktop: the words take the left, the scene stands right of centre. */
@media (min-aspect-ratio: 6/5) and (min-width: 1000px) {
  .stage { left: 62%; }
  .hero__copy { left: max(28px, 6.2vw); right: auto; bottom: 15svh; width: min(36vw, 620px); }
  .stage__h { max-width: 16ch; font-size: clamp(34px, 3.35cqw, 60px); line-height: 1.12; }
  .stage__sub { margin-top: 18px; font-size: clamp(18px, 1.4cqw, 24px); }
  .hero .hero__book { display: inline-flex; align-self: flex-start; margin-top: 34px; min-height: 56px; padding: 0 30px; font-size: 16px; }
  .sec__in { max-width: 58rem; }
  .quotes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .menu { grid-template-columns: 1fr 1fr 1fr; }
  .menu li:last-child { grid-column: auto; }
}
@media (min-width: 1000px) {
  .hours-sec .sec__in {
    display: grid; grid-template-columns: 1fr 1.15fr; grid-template-areas: "when door" "way door";
    gap: 0 72px; align-items: start;
  }
  .when { grid-area: when; }
  .way { grid-area: way; margin-top: 88px; }
  .hours-sec .door { grid-area: door; margin-top: 0; position: sticky; top: 110px; }
  .book .sec__in, .lista .sec__in { max-width: 46rem; }
  .book { padding-top: 104px; }
}

/* ------------------------------------------------------------------ hover */
@media (hover: hover) and (pointer: fine) {
  .bar__book:hover::before { background: rgba(241, 236, 228, 0.1); }
  .lang a:hover, .bar__nav a:hover { color: var(--chalk); }
  .navmenu__nav a:hover { opacity: 0.82; }
  .toc a:hover { background: rgba(var(--fg-rgb), 0.08); }
  .crumbs a:hover, .foot__nav a:hover, .wine-toc a:hover { text-decoration-color: var(--chalk); }
  .btn:hover { background: rgba(var(--fg-rgb), 0.08); }
  .btn--wine:hover { background: var(--wine-hi); border-color: var(--wine-hi); }
  .chip:hover span { border-color: rgba(var(--fg-rgb), 0.7); }
  .fact__t:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .dock:hover .dock__label { border-color: var(--chalk); }
  .consent:hover .consent__box { border-color: var(--chalk); }
  .book__next a:hover { text-decoration-color: var(--chalk); }
}

/* ------------------------------------------------------------- the pour */
/* Once per visit: the logo, then the glass rises from the counter, the wine settles,
   and the facts are pinned to it one by one. */
.intro .hero__dim { animation: lightsOn 1700ms var(--ease-out) 80ms both; }
.intro .stage__logo img { animation: logoIn 1300ms var(--ease-out) 240ms both; }
.intro .stage__glass .glass__img, .intro .stage__glass .glass__print { animation: glassIn 820ms var(--ease-out) 260ms both; }
.intro .stage__glass .glass i { animation: wineIn 1000ms var(--ease-in-out) 900ms both; }
.intro .stage__place { animation: chalkIn 420ms var(--ease-out) 620ms both; }
.intro .lead-line { animation: lineR 380ms var(--ease-out) both; animation-delay: calc(1500ms + var(--i) * 120ms); }
.intro .lead-line--wines { animation-name: lineL; }
.intro .fact__t { animation: chalkIn 360ms var(--ease-out) both; animation-delay: calc(1680ms + var(--i) * 120ms); }
.intro .stage__h { animation: rise 720ms var(--ease-out) 380ms both; }
.intro .stage__sub { animation: rise 720ms var(--ease-out) 520ms both; }
@keyframes lightsOn { from { opacity: 0.66; } to { opacity: 0; } }
@keyframes logoIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes glassIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wineIn { from { transform: translateY(54%); } }
@supports (translate: 0) and (rotate: 0deg) {
  @keyframes wineIn { from { translate: 0 54%; } }
}
@keyframes chalkIn { from { opacity: 0; } }
@keyframes lineR { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lineL { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* Each section enters once, in its own material: headings rise out of a slot, the carta
   is written up item by item in chalk, quotes and hours follow a beat apart, the photo of
   the door opens from the floor. Everything else is simply there, and without scripts
   nothing is hidden. */
.sec h2 { transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js [data-sc-stagger] > h2:not(.sc-in) { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.45em, 0); }
.js [data-sc-stagger] > h2.sc-in { clip-path: inset(-12% -4% -24% -4%); }
.menu li { position: relative; border-top: 0; transition: clip-path 700ms var(--ease-out); }
.menu li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; transition: transform 800ms var(--ease-out); }
.js .menu:not(.sc-in) li { clip-path: inset(-20% 100% -30% 0); }
.js .menu:not(.sc-in) li::before { transform: scaleX(0); }
.menu.sc-in li { clip-path: inset(-20% -4% -30% 0); }
.menu li:nth-child(2), .menu li:nth-child(2)::before { transition-delay: 90ms; }
.menu li:nth-child(3), .menu li:nth-child(3)::before { transition-delay: 180ms; }
.menu li:nth-child(4), .menu li:nth-child(4)::before { transition-delay: 270ms; }
.menu li:nth-child(5), .menu li:nth-child(5)::before { transition-delay: 360ms; }
.menu li:nth-child(6), .menu li:nth-child(6)::before { transition-delay: 450ms; }
.menu li:nth-child(7), .menu li:nth-child(7)::before { transition-delay: 540ms; }
.quote { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .quotes:not(.sc-in) .quote { opacity: 0; transform: translate3d(0, 18px, 0); }
.quote:nth-child(2) { transition-delay: 110ms; }
.quote:nth-child(3) { transition-delay: 220ms; }
.quote:nth-child(4) { transition-delay: 330ms; }
.hours tr { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.js .hours:not(.sc-in) tr { opacity: 0; transform: translate3d(-10px, 0, 0); }
.hours tr:nth-child(2) { transition-delay: 45ms; } .hours tr:nth-child(3) { transition-delay: 90ms; }
.hours tr:nth-child(4) { transition-delay: 135ms; } .hours tr:nth-child(5) { transition-delay: 180ms; }
.hours tr:nth-child(6) { transition-delay: 225ms; } .hours tr:nth-child(7) { transition-delay: 270ms; }
.door img { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--ease-out), transform 1600ms var(--ease-out); }
.js .door:not(.sc-in) img { clip-path: inset(100% 0 0 0); transform: scale(1.08); }
/* the row of dishes uncovers like the storefront, one plate after another */
.plates img { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-out), transform 1400ms var(--ease-out); }
.js .plates:not(.sc-in) img { clip-path: inset(100% 0 0 0); transform: scale(1.06); }
.plates > li:nth-child(2) img { transition-delay: 70ms; } .plates > li:nth-child(3) img { transition-delay: 140ms; }
.plates > li:nth-child(4) img { transition-delay: 210ms; } .plates > li:nth-child(5) img { transition-delay: 280ms; }
.plates > li:nth-child(6) img { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .quote, .hours tr { transition: opacity 220ms linear; }
  .js .quotes:not(.sc-in) .quote, .js .hours:not(.sc-in) tr { transform: none; }
  .js [data-sc-stagger] > h2:not(.sc-in), .js .menu:not(.sc-in) li, .js .door:not(.sc-in) img, .js .plates:not(.sc-in) img { clip-path: none; transform: none; opacity: 0; }
  .sec h2, .menu li, .door img, .plates img { transition: opacity 220ms linear; }
  .js .menu:not(.sc-in) li::before { transform: none; }
}

/* the language switch crossfades instead of jumping; errors and the confirmation arrive */
.err { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), display 200ms allow-discrete; }
@starting-style { .err { opacity: 0; transform: translateY(-4px); } }
.book__done { animation: rise 640ms var(--ease-out) both; }
.lista__done { animation: rise 640ms var(--ease-out) both; }
@property --arm { syntax: "<length>"; inherits: false; initial-value: 28px; }
.lista__form::after { transition: --arm 1100ms var(--ease-out) 160ms; }
.js .lista__form:not(.sc-in)::after { --arm: 0px; }

/* when the full glass lands, a chalk line is drawn under the heading */
.book__h span { position: relative; }
.book__h span::after {
  content: ""; position: absolute; left: 2%; right: -4%; bottom: -0.16em; height: 0.3em;
  border-bottom: 2px solid rgba(241, 236, 228, 0.85); border-radius: 0 0 70% 30% / 0 0 100% 100%;
  transform-origin: 0 50%; transition: transform 620ms var(--ease-out) 120ms;
}
.js .book:not(.is-full) .book__h span::after { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .book__h span::after { transition: opacity 200ms linear; }
  .js .book:not(.is-full) .book__h span::after { transform: none; opacity: 0; }
  .err { transition: opacity 200ms linear; }
  .book__done { animation: chalkIn 300ms linear both; }
  .lista__done { animation: chalkIn 300ms linear both; }
  .lista__form::after { transition: none; }
  .js .lista__form:not(.sc-in)::after { --arm: 28px; }
  .consent__box, .consent__box::after { transition: background-color 200ms linear, border-color 200ms linear, opacity 200ms linear; }
  .consent:active .consent__box { transform: none; }
  .btn, .chip span, .bar__book, .dock__label { transition: background-color 200ms linear; }
  .dock__label { transform: none; transition: opacity 200ms linear, background-color 200ms linear; }
  .btn:active, .chip:active span, .bar__book:active, .dock:active .dock__label { transform: none; }
}

/* ======================================================= the other pages == */
/* A page's head: the cellar, dimmed, behind its name, fading into charred oak below. The same
   light as the first screen, without the logo (the logo stands alone on the home page). */
.page-head {
  position: relative; overflow: hidden; background: var(--char);
  padding: calc(var(--bar-h) + var(--safe-t) + clamp(64px, 19vw, 132px)) var(--gutter) clamp(30px, 7vw, 56px);
}
.page-head + .sec { padding-top: clamp(30px, 8vw, 60px); }
.menu-group { padding-top: clamp(56px, 13vw, 100px); padding-bottom: clamp(56px, 13vw, 100px); }
.page-head + .menu-group { padding-top: clamp(30px, 8vw, 60px); }
.page-head::before {
  content: ""; position: absolute; inset: 0; filter: var(--photo-filter);
  background: var(--char) url("/assets/plates/cellar-828.webp") 50% 16% / cover no-repeat;
}
.page-head::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(var(--char-rgb), calc(0.52 * var(--veil))) 0%, rgba(var(--char-rgb), calc(0.6 * var(--veil))) 46%, rgba(var(--char-rgb), 0.9) 78%, var(--char) 100%);
}
@media (min-aspect-ratio: 13/20) {
  .page-head::before {
    background-image: url("/assets/plates/cellar-wide-1600.webp");
    background-image: image-set(url("/assets/plates/cellar-wide-1600.webp") 1x, url("/assets/plates/cellar-wide-2560.webp") 2x);
    background-position: 50% 34%;
  }
}
.page-head__in { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.page-head__h {
  margin-top: 22px; max-width: 14ch;
  font: 400 clamp(38px, 11.4vw, 82px)/1.03 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--chalk);
}
.page-head__lead {
  margin-top: 20px; max-width: 34ch;
  font-size: clamp(20px, 5.1vw, 25px); line-height: 1.4; color: var(--chalk-2); text-wrap: pretty;
}
.page-head__h span { position: relative; }
.page-head__h span::after {
  content: ""; position: absolute; left: 2%; right: -4%; bottom: -0.16em; height: 0.3em;
  border-bottom: 2px solid rgba(var(--fg-rgb), 0.75); border-radius: 0 0 70% 30% / 0 0 100% 100%;
  transform-origin: 0 50%;
}
.js .page-head__h span::after { animation: drawLine 620ms var(--ease-out) 640ms both; }
@keyframes drawLine { from { transform: scaleX(0); } }
.js .page-head__h { animation: rise 720ms var(--ease-out) 60ms both; }
.js .page-head__lead { animation: rise 720ms var(--ease-out) 180ms both; }
/* where you are: home / this page */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; line-height: 1.3; color: var(--chalk-2); }
.crumbs a { color: var(--chalk); text-decoration-color: rgba(var(--fg-rgb), 0.45); }
.crumbs span[aria-hidden] { color: var(--chalk-3); }
/* the carta's own index: three plates to jump to */
.toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 36rem; margin-top: 30px; }
.toc a {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 6px; text-align: center; line-height: 1.25; text-decoration: none;
  font-size: 15px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk);
  border: 1px solid rgba(var(--fg-rgb), 0.55); background: rgba(var(--char-rgb), 0.4);
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.toc a:active { transform: scale(0.97); }
@media (min-width: 1000px) {
  .page-head__in { max-width: 58rem; text-align: center; }
  .page-head__h, .page-head__lead { margin-left: auto; margin-right: auto; }
  .page-head__h span::after { transform-origin: 50% 50%; }
  .crumbs { justify-content: center; }
  .toc { margin-left: auto; margin-right: auto; }
}

/* ------------------------------------------------------- la carta, in full */
/* Written up like their chalkboards: the dishes in chalk, what is in them in print, and the price
   in print at the end of the dish's line, as on their carta. The wines in print, with a glass and
   a bottle column headed like their wine list. One row per drink, its price at the end. */
.menu-group h3 { font: 400 clamp(21px, 5.6vw, 30px)/1.15 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--chalk); }
.dish-sec, .wine-sec, .drink-sec { padding-top: clamp(40px, 10vw, 56px); }
.dish-sec__kicker { margin-top: 8px; font-size: 17px; line-height: 1.4; color: var(--chalk-2); }   /* their carta's own subheads, in plain words */
.dish-list, .wine-list, .drink-list { list-style: none; margin: 14px 0 0; padding: 0; }
/* the bottle, big and turning: a dark cellar panel over the dimmed carta; on a phone the bottle on
   top and its words under it, from 760px side by side */
.bview {
  width: min(100vw - 24px, 860px); max-width: none; max-height: min(100svh - 24px, 780px); margin: auto; padding: 0;
  border: 0; color: #f1ece4; color-scheme: dark; overflow: auto; overscroll-behavior: contain;
  background: rgba(35, 23, 15, 0);
  display: none; grid-template-rows: auto auto;
}
.bview[open] { display: grid; }
.bview::backdrop { background: rgba(20, 12, 8, 0.7); }
/* coming in (assets/bottle.js adds .is-in): the panel darkens in behind the photo that flies from the
   list, and its words rise in one after another; going (.is-out), they go first, quickly */
.bview { transition: background-color 320ms var(--ease-out); }
.bview.is-in { background-color: rgb(35, 23, 15); }
.bview.is-out { background-color: rgba(35, 23, 15, 0); transition-duration: 300ms; }
.bview__text > *, .bview__close { opacity: 0; transform: translateY(8px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
.bview.is-in .bview__text > *, .bview.is-in .bview__close { opacity: 1; transform: none; }
.bview.is-in .bview__text > :nth-child(1) { transition-delay: 120ms; }
.bview.is-in .bview__text > :nth-child(2) { transition-delay: 160ms; }
.bview.is-in .bview__text > :nth-child(3) { transition-delay: 200ms; }
.bview.is-in .bview__text > :nth-child(4) { transition-delay: 240ms; }
.bview.is-in .bview__text > :nth-child(n+5) { transition-delay: 280ms; }
.bview.is-in .bview__close { transition-delay: 200ms; }
.bview.is-out .bview__text > *, .bview.is-out .bview__close { opacity: 0; transform: none; transition-duration: 150ms; transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .bview, .bview__text > *, .bview__close { transition: none; } }
/* the bottle: its photo as it is, nothing added (Santi 2026-10-08: "sin luces ni nada añadido") */
.bview__stage { position: relative; height: min(50svh, 500px); min-height: 260px; }
.bview__img {
  position: absolute; z-index: 1; left: 0; right: 0; top: 4%; height: 79%; width: auto; max-width: none; margin: 0 auto;
  transform-origin: 50% 50%; background-size: 100% 100%; transition: opacity 260ms ease;
}
/* its back photo, when it has one, crossfades over the front (the button under its words) */
.bview__img--back { opacity: 0; }
.bview__text { padding: 6px 24px 30px; }
.bview__name { font: 400 clamp(24px, 6.4vw, 34px)/1.12 var(--display); letter-spacing: 0.02em; text-wrap: balance; }
.bview__meta { margin-top: 10px; font-size: 16px; line-height: 1.4; color: #d2cbc1; }
.bview__desc { margin-top: 16px; font-size: 19px; line-height: 1.5; text-wrap: pretty; max-width: 34em; }
.bview__price { margin-top: 16px; font-size: 18px; color: #f1ece4; }
/* a bottle with a back photo turns over to show it (assets/bottle.js) */
.bview__flip {
  display: inline-flex; align-items: center; margin-top: 18px; min-height: 44px; padding: 0 16px;
  font: 400 14px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase;
  color: #f1ece4; background: none; border: 1px solid rgba(241, 236, 228, 0.5); cursor: pointer;
  touch-action: manipulation;
}
.bview__flip:active { transform: scale(0.97); transition-duration: 160ms; transition-delay: 0ms; }
[hidden].bview__flip { display: none; }
.bview__close {
  position: absolute; z-index: 3; top: 10px; right: 10px; min-height: 44px; padding: 0 14px;
  font: 400 14px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase;
  color: #f1ece4; background: rgba(35, 23, 15, 0.6); border: 1px solid rgba(241, 236, 228, 0.5); cursor: pointer;
}
.bview__close:active { transform: scale(0.97); }
.bview :focus-visible { outline-color: #f1ece4; }
@media (min-width: 760px) {
  .bview { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; align-items: center; }
  .bview__stage { height: min(78svh, 660px); }
  .bview__text { padding: 40px 40px 40px 8px; }
}
[hidden].bview__desc, [hidden].bview__meta, [hidden].bview__price { display: none; }

/* what the owners took off for now (their «Carta» page): out of the list, and a list left empty with it */
[data-dish][hidden], .dish-list[hidden], .wine-list[hidden], .drink-list[hidden] { display: none; }
.dish-list, .drink-list { max-width: 36rem; }   /* the price stays within reach of its name */
.dish-list li, .wine-list li { padding: 13px 0 12px; border-top: 1px solid var(--rule); }
.dish-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: baseline; }
.dish { font: 300 clamp(23px, 6vw, 29px)/1.26 var(--hand); color: var(--chalk); text-wrap: balance; }
/* the allergens, with their own carta's icons (2026-10-08; assets/allergens.webp, from
   lab/allergen-icons.py): under each dish and wine its circles alone, as on their printed carta;
   the names are for screen readers and the pointer's hover, and in the legend at the bottom */
.als { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wine-list .als { grid-column: 2 / -1; margin-top: 5px; }
.al { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.3; color: var(--chalk-2); white-space: nowrap; }
.al::before { content: ""; flex: none; width: 22px; height: 22px; background: url("/assets/allergens.webp") no-repeat 0 0 / 308px 22px; background-position: calc(var(--i, 0) * -22px) 0; }
.al--gluten { --i: 0; }
.al--crustaceos { --i: 1; }
.al--huevo { --i: 2; }
.al--pescado { --i: 3; }
.al--cacahuetes { --i: 4; }
.al--soja { --i: 5; }
.al--lacteos { --i: 6; }
.al--frutos-cascara { --i: 7; }
.al--apio { --i: 8; }
.al--mostaza { --i: 9; }
.al--sesamo { --i: 10; }
.al--sulfitos { --i: 11; }
.al--altramuces { --i: 12; }
.al--moluscos { --i: 13; }
.als .al__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the legend, at the very bottom of the carta: right after the drinks, over a fine rule */
.sec.al-sec { padding-top: 0; }
.al-sec .sec__in { padding-top: 30px; border-top: 1px solid var(--rule); }
.al-sec .al-key__h { font: 400 clamp(21px, 5.6vw, 30px)/1.15 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--chalk); }   /* as the carta's section titles (Santi, 2026-10-10: "en grande") */
.al-key__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.al-key__list .al { color: var(--chalk); }
.bview__al .als { gap: 6px 14px; }
.bview__al .als .al__n { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.bview__al:empty { display: none; }
/* the birthday, asked under the list's box in the booking when it is ticked (2026-10-08) */
.book__bday { margin: 14px 0 0; padding: 0; border: 0; }
.book__bday legend { padding: 0; margin-bottom: 8px; }
[hidden].book__bday { display: none; }
.bview__al { margin-top: 12px; }
.bview__al .als { margin-top: 0; }
.bview__al .al { color: #d2cbc1; }
.dish__d { grid-column: 1 / -1; margin-top: 4px; max-width: 46ch; font-size: 17px; line-height: 1.4; color: var(--chalk-2); text-wrap: pretty; }
/* the price: Forum in chalk, flush right, figures of one width so a column of them lines up */
.price { font: 400 19px/1.3 var(--text); color: var(--chalk); white-space: nowrap; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.price__unit { display: block; font-size: 15px; line-height: 1.25; color: var(--chalk-2); }
.dish-sec__note { margin-top: 14px; font-size: 16px; line-height: 1.45; color: var(--chalk-2); }
/* a section's own photo, between its name and its dishes, as wide as the list */
.pic--dish { margin-top: 20px; max-width: 36rem; }
.pic--dish img { aspect-ratio: 3 / 2; }
.pic--dish + .dish-list { margin-top: 18px; }
@media (max-width: 699px) { .pic--dish { margin-right: 24px; } } /* clears the corner glass, like the lists */
.menu-group .note { margin-top: 40px; }
/* the wine chiller they have at the bar (2026-10-08): the machine, cut out, beside a chalk note */
.chill { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 30px; max-width: 34rem; }
.chill__img { width: 92px; height: auto; filter: drop-shadow(0 10px 12px rgba(var(--fg-rgb), 0.22)); }
.menu-group .chill h3 { font: 300 clamp(23px, 6vw, 28px)/1.2 var(--hand); letter-spacing: 0; text-transform: none; color: var(--chalk); }
.chill p { margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--chalk-2); text-wrap: pretty; }
@media (min-width: 1000px) { .chill { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; } .chill__img { width: 120px; } }
.wine-toc { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.wine-toc a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--chalk);
  font: 400 15px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase; text-decoration-color: rgba(var(--fg-rgb), 0.45);
}
/* a wine: its bottle, its name (and tag) beside the two prices, winery · grape · zone across the row
   under them. The bottle is the real one, tiny, standing beside the name and the line under it;
   a tap opens its photo big, with what the wine is like (assets/bottle.js). */
.bottle {
  grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; position: relative;
  display: block; height: 52px; padding: 0; border: 0; background: none; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms var(--ease-out);
}
.bottle::before { content: ""; position: absolute; inset: -6px -12px; }   /* a finger-sized target */
.bottle { isolation: isolate; }
.bottle img { display: block; height: 100%; width: auto; }
.bottle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .bottle:hover { transform: translateY(-2px) scale(1.06); }
  .bottle:hover .bottle__tap { transform: scale(1.12); }
}
/* that it opens (2026-10-08, Santi: "algo para que la gente sepa que puede tocarlas ... con el color
   del vino de la clase que sea"): a little hand tapping beside each bottle, in its wine's colour (the line over the list that said so went, Santi 2026-10-08). The colour of each kind: */
.wine-sec--tintos { --vino-rgb: 142, 34, 56; --vino-ink: #7a1c2e; }
.wine-sec--blancos { --vino-rgb: 226, 189, 79; --vino-ink: #806211; }
.wine-sec--rosados { --vino-rgb: 236, 138, 163; --vino-ink: #a8395a; }
.wine-sec--dulces { --vino-rgb: 178, 89, 28; --vino-ink: #7a3a10; }
.wine-sec--espumosos { --vino-rgb: 227, 204, 124; --vino-ink: #75631a; }
.bottle__tap {   /* a hand tapping, with its ripples (assets/tap.svg, made by lab/tap-icon.py), in the wine's colour */
  position: absolute; right: -17px; bottom: -3px; width: 21px; height: 21px; pointer-events: none;
  background: var(--vino-ink, #7a1c2e);
  -webkit-mask: url("/assets/tap.svg") center / contain no-repeat; mask: url("/assets/tap.svg") center / contain no-repeat;
  transform-origin: 30% 80%; transition: transform 180ms var(--ease-out);
}
/* the first time a list comes into view, each little hand taps once, one after another */
.wine-list.is-seen .bottle__tap { animation: tapOnce 900ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms + 200ms); }
@keyframes tapOnce { 0%, 100% { transform: none; } 22% { transform: translate(-1px, 1px) scale(0.8); } 48% { transform: none; } 64% { transform: translate(-0.5px, 0.5px) scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .wine-list.is-seen .bottle__tap { animation: none; } }
.bottle--none { height: 1px; }
.wine-cols { max-width: 40rem; }
.wine-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px 76px; column-gap: 10px; align-items: baseline; }
.wine-list .price { font-size: 18px; }
.wine-list__head { padding: 2px 0 9px; font: 400 13px/1.2 var(--text); letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk-2); }
.wine-list li.wine-list__head { border-top: 0; }
.wine-list__head span { text-align: right; margin-right: calc(var(--caps) * -1); }   /* the tracking's trailing space, so the label ends where the prices end */
.wine { font-size: 20px; line-height: 1.3; color: var(--chalk); }
.wine__n, .drink { text-wrap: balance; }
.wine__tag {
  display: inline-block; margin-left: 6px; padding: 3px 5px 2px; vertical-align: 2px;
  font: 400 12px/1 var(--text); letter-spacing: 0.1em; color: var(--chalk-2); border: 1px solid rgba(var(--fg-rgb), 0.34);
}
.wine__meta { grid-column: 2 / -1; margin-top: 3px; font-size: 16px; line-height: 1.4; color: var(--chalk-2); text-wrap: pretty; }
.drinks { display: grid; grid-template-columns: minmax(0, 1fr); }
/* the drinks' group titles stand out (the owners, 2026-10-09: "que resalten"; Santi, 2026-10-10: «De grifo»,
   «Tercios de 33 cl» "en grande" too), as «Y además» on the food */
.drink-sec__label, .dish-sec__kicker--more { margin-top: 26px; font: 400 clamp(17px, 4.4vw, 20px)/1.2 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--chalk); }
.drink-groups > .drink-sec__label:first-child { margin-top: 18px; }
.drink-list { margin-top: 10px; }
.drink-groups > .drink-list:first-child { margin-top: 14px; }
.drink-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 18px; padding: 8px 0 7px; border-top: 1px solid var(--rule); }
.drink { font-size: 19px; line-height: 1.35; color: var(--chalk); }
.drink__d { grid-column: 1 / -1; margin-top: 2px; max-width: 46ch; font-size: 16px; line-height: 1.4; color: var(--chalk-2); text-wrap: pretty; }
/* a spirit with its bottle, laid out as a wine: the tiny bottle, its name and price, what it is under them
   (2026-10-09, Santi: "lo mismo que con los vinos ... con los licores"); its little hand in amber */
.drink-list li.drink--bottle { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; padding: 9px 0 8px; --vino-ink: #7a3a10; }
.drink--bottle .drink { grid-column: 2; }
.drink--bottle .price { grid-column: 3; }
.drink--bottle .drink__d { grid-column: 2 / -1; }   /* a fruit cocktail's ingredients, beside its glass */
.drink__meta { grid-column: 2 / -1; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--chalk-2); text-wrap: pretty; }
/* a group with its prices in named columns (the owners, 2026-10-09: «+ bebida» over the spirits, «Copa»
   and «Chupito» over the liqueurs and shots): the columns line up down the list, as the wines' do */
.drink-list.drink-list--cols { --cols: 1; --colw: 74px; }
.drink-list.drink-list--cols-2 { --cols: 2; --colw: 62px; }   /* two on a phone leave the name room */
@media (min-width: 700px) { .drink-list.drink-list--cols-2 { --colw: 74px; } }
.drink-list.drink-list--cols li { grid-template-columns: 30px minmax(0, 1fr) repeat(var(--cols), var(--colw)); column-gap: 8px; }
.drink-list--cols .drink { grid-column: 2; }
.drink-list--cols .drink--bottle .price, .drink-list--cols .price--col { grid-column: auto; }
.drink-list li.drink-list__head { padding: 2px 0 8px; border-top: 0; font: 400 13px/1.2 var(--text); letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk-2); }
.drink-list__head span { text-align: right; margin-right: calc(var(--caps) * -1); }
.drink-sec--long .drink-sec__label { margin-top: 34px; }
.drink-sec--long .drink-groups > .drink-sec__label:first-child { margin-top: 18px; }
.drink-list.is-seen .bottle__tap { animation: tapOnce 900ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms + 200ms); }
@media (prefers-reduced-motion: reduce) { .drink-list.is-seen .bottle__tap { animation: none; } }
@media (max-width: 699px) { .dish-list, .wine-list, .drink-list { margin-right: 24px; } } /* clears the corner glass */
@media (max-width: 999px) { .wine-list + .wine-list { margin-top: 0; } .wine-list + .wine-list .wine-list__head { display: none; } }   /* one list on a phone: one heading */
@media (min-width: 1000px) {
  .dishes { columns: 2; column-gap: 72px; }
  .dish-sec { break-inside: avoid; }
  .wine-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; max-width: none; }
  .drinks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; }
  /* a long section (the coctelería) takes the whole width and runs on in two columns */
  .drink-sec--long { grid-column: 1 / -1; }
  .drink-sec--long .drink-groups { columns: 2; column-gap: 72px; }
  .drink-sec--long .drink-sec__label { break-after: avoid; }
  .drink-sec--long .drink-list { break-inside: avoid; }   /* each group whole, under its heading */
}

/* ---------------------------------------------- the booking, page by page */
/* every page but the booking ends on the oak: "Reserva tu mesa", and the glass lands there */
.book__h { font: 400 clamp(28px, 8.2vw, 54px)/1.1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--chalk); }
.book__go { margin-top: 28px; }
.book__go .btn { min-height: 56px; padding: 0 32px; }
@media (max-width: 699px) { .book__go .btn { width: calc(100% - 24px); } }
/* the booking page: the oak from the top, the glass already poured */
.book--page { padding-top: calc(var(--bar-h) + var(--safe-t) + clamp(34px, 9vw, 72px)); }
.book--page::before { display: none; }
.book--page .crumbs { margin-bottom: clamp(26px, 6vw, 40px); color: #d2cbc1; }
.js .book--page .glass i { animation: wineIn 1100ms var(--ease-in-out) 260ms both; }
.js .book--page .glass__img, .js .book--page .glass__print { animation: glassIn 700ms var(--ease-out) both; }
@media (min-width: 1000px) { .book--page { padding-top: calc(var(--bar-h) + var(--safe-t) + 64px); } }

/* the home page's hours: the live status, the meals and the door; the table is on its own page */
.hours-sec--brief .way { margin-top: 34px; }
.hours-sec--brief .happy { margin-top: 22px; }
@media (min-width: 1000px) { .hours-sec--brief .way { margin-top: 40px; } }

/* the footer: the pages again, then who and where */
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 10px; }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: 40px; color: var(--chalk); text-decoration: none;
  font: 400 15px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase;
}
.foot__nav a[aria-current] { text-decoration: underline; text-decoration-color: rgba(var(--fg-rgb), 0.5); }

/* from one page to the next, the page crossfades under a bar that stays put */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .page-head__h, .js .page-head__lead, .js .page-head__h span::after { animation: chalkIn 220ms linear both; }
  .js .book--page .glass i, .js .book--page .glass__img, .js .book--page .glass__print { animation: none; }
  .navmenu[open] .navmenu__panel, .navmenu[open]::before { animation: chalkIn 160ms linear both; }
  .navmenu__icon i { transition: none; }
  .toc a, .toc a:active { transition: background-color 200ms linear; transform: none; }
}

/* the booking box (2026-10-10, the owners: "que el botón de reserva sea parecido a [La Picaeta], también con la
   opción de evento y newsletter; que quede todo compacto y fácil"): every «Reservar» opens it over the page, a tab
   each for a table, an event and the list; the table one step at a time, as booking widgets go. Paper and ink, with
   the bar's oak on top; on a phone it rises from the bottom. The booking page keeps the whole form. */
.rsv { width: min(560px, 100%); max-width: 100%; max-height: min(100dvh, 820px); margin: auto; padding: 0; border: 0; background: var(--ground); color: var(--chalk); overflow: hidden; }
.rsv[open] { display: flex; flex-direction: column; }
.rsv::backdrop { background: rgba(20, 12, 8, 0.62); }
@media (max-width: 599px) { .rsv { margin: auto 0 0; max-height: 92dvh; } }
.rsv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 22px; background: var(--bar-base); color: #f4ede3; }
.rsv__h { font: 400 20px/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.rsv__close { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; color: inherit; font: 400 32px/1 var(--text); cursor: pointer; touch-action: manipulation; }
.rsv__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.rsv__tab { min-height: 50px; padding: 0 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--chalk-2); font: 400 15px/1.1 var(--text); letter-spacing: var(--caps); text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.rsv__tab[aria-selected="true"] { color: var(--chalk); border-bottom-color: var(--wine); }
.rsv__tab:focus-visible, .rsv__close:focus-visible, .rsv__back:focus-visible { outline: 2px solid var(--chalk); outline-offset: -4px; }
.rsv__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px calc(24px + var(--safe-b)); }
.rsv__panel:not(.is-on) { display: none; }
.rsv__p { margin-top: 20px; font-size: 18px; line-height: 1.45; color: var(--chalk-2); }
.rsv__nav { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.rsv__nav[hidden] { display: none; }
.rsv__back { flex: none; min-height: 44px; padding: 0 10px 0 0; border: 0; background: transparent; color: var(--chalk); font: 400 15px/1 var(--text); letter-spacing: var(--caps); text-transform: uppercase; cursor: pointer; }
.rsv__back::before { content: "‹ "; }
.rsv__sum { flex: 1; min-width: 0; font-size: 16px; line-height: 1.3; color: var(--chalk-2); text-align: right; }
.rsv .form { margin-top: 0; }
.rsv .step { display: none; padding: 18px 0 6px; border-top: 0; }
.rsv .step.is-current { display: block; }
.rsv .form:not(.at-last) :is(.book__send, .book__legal) { display: none; }
.rsv .book__summary, .rsv .book__event { display: none; }
.rsv .chips--scroll { margin: 0 -22px; padding: 2px 22px 8px; scroll-padding-inline: 22px; -webkit-mask: none; mask: none; }
.rsv .chips[data-times] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rsv .book__send, .rsv__next { width: 100%; margin-top: 18px; }
.rsv__next[hidden] { display: none; }
.rsv .lista__form { margin-top: 14px; padding: 0; }
.rsv .lista__form::after { display: none; }
.rsv .btns { margin-top: 22px; }
.rsv .btns .btn { flex: 1 1 100%; }
html.rsv-on { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .rsv[open] { animation: rsv-in 260ms var(--ease-drawer) both; }
  .rsv[open]::backdrop { animation: rsv-fade 260ms var(--ease-out) both; }
  @media (max-width: 599px) { .rsv[open] { animation-name: rsv-up; } }
}
@keyframes rsv-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes rsv-up { from { transform: translateY(100%); } }
@keyframes rsv-fade { from { opacity: 0; } }
/* with a mouse the days do not scroll sideways (Santi, 2026-10-10: "no hay un scroll para computadora"): they wrap,
   every day in view, like a calendar; on the booking page and in the box */
@media (hover: hover) and (pointer: fine) {
  .chips--scroll, .rsv .chips--scroll { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 0; -webkit-mask: none; mask: none; scroll-snap-type: none; }
}