/* ============================================================
   La Victoria  — styles
   Palette: warm lime-white, sand, brand turquoise (the tavern's
   ceiling/lettering color, ~#0492B3, measured from their Instagram)
   darkened to deep petrol for backgrounds, plus muted brass
   Type: Fraunces (display serif) + Jost (geometric sans)
   Signature: the "horizon line" — a brass hairline with a low-sun dot
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* color */
  --cal: #FBF8F1;          /* warm white (whitewashed lime) */
  --arena: #F0E8D7;        /* sand band */
  --arena-2: #E6DCC6;
  --piedra: #B9AD94;       /* stone */
  --tinta: #1B333C;        /* ink on light (petrol-cast) */
  --tinta-suave: #4E6670;  /* muted ink */
  --marea: #0A3846;        /* deep petrol — the tavern's turquoise, darkened */
  --marea-2: #0D485A;
  --abismo: #06242E;       /* deepest petrol (footer) */
  --mar: #0492B3;          /* brand turquoise — ceiling/lettering of the tavern (IG) */
  --espuma: #F0EAD9;       /* warm foam — text on dark */
  --espuma-60: rgba(240, 234, 217, 0.62);
  --laton: #B08A55;        /* brass — lines & fills */
  --laton-claro: #C9A96A;  /* brass on dark */
  --laton-tinta: #7E5C2E;  /* brass legible on light */

  /* type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;

  /* rhythm */
  --section-pad: clamp(3rem, 7vw, 6rem);
  --wrap-pad: clamp(1.25rem, 5vw, 3rem);
  --header-h: 5.75rem;

  /* motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* texture */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ---------- Self-hosted fonts (performance + GDPR) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--tinta);
  background: var(--cal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--laton); color: var(--abismo); }

/* focus ring: ink-brass on light surfaces, light brass on dark ones (WCAG 1.4.11) */
:focus-visible {
  outline: 2px solid var(--laton-tinta);
  outline-offset: 3px;
}
.hero :focus-visible,
.celebra :focus-visible,
.reservas :focus-visible,
.footer :focus-visible,
.menu :focus-visible,
.actionbar :focus-visible,
.header:not(.is-solid) :focus-visible {
  outline-color: var(--laton-claro);
}
main:focus { outline: none; }

a[aria-disabled="true"] { cursor: default; }

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.6rem 1.2rem;
  background: var(--marea);
  color: var(--espuma);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.skip-link:focus-visible { top: 1rem; }

/* ---------- Layout primitives ---------- */
.wrap {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
.wrap--wide { width: min(1440px, 100%); }
.wrap--narrow { width: min(760px, 100%); }

.section { padding-block: var(--section-pad); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { text-align: center; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--laton-tinta);
  margin-bottom: 1.4rem;
}
.eyebrow--light { color: var(--laton-claro); }

.title-xl,
.title-l {
  font-family: var(--serif);
  font-weight: 340;
  font-variation-settings: "opsz" 120;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.title-xl { font-size: clamp(2.35rem, 5.2vw, 4rem); }
.title-l { font-size: clamp(1.95rem, 3.8vw, 2.9rem); }

.title-xl em,
.title-l em,
.hero__title em {
  font-style: italic;
  font-weight: 360;
}

.lead {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.55;
  margin-bottom: 1.4rem;
  text-wrap: pretty;
}

/* ---------- Signature: horizon line ---------- */
.horizon {
  position: relative;
  width: 88px;
  height: 1px;
  background: var(--laton);
  margin-block: clamp(1.6rem, 3vw, 2.2rem);
}
.horizon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--laton);
  transform: translate(-50%, -50%);
}
.horizon--center {
  margin-inline: auto;
}
.horizon--center::after { left: 50%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.2rem;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
}
.btn--small { padding: 0.62rem 1.35rem; letter-spacing: 0.2em; }

.btn--brass {
  background: var(--laton);
  border-color: var(--laton);
  color: var(--abismo); /* darkest token: keeps AA contrast on brass */
}
.btn--brass:hover { background: var(--laton-claro); border-color: var(--laton-claro); }

.btn--ghost {
  border-color: rgba(240, 234, 217, 0.45);
  color: var(--espuma);
}
.btn--ghost:hover { border-color: var(--espuma); background: rgba(240, 234, 217, 0.07); }

.btn--dark {
  border-color: var(--tinta);
  color: var(--tinta);
}
.btn--dark:hover { background: var(--tinta); color: var(--cal); }

.text-link {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(240, 234, 217, 0.35);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.text-link:hover { border-color: var(--laton-claro); color: var(--laton-claro); }

/* ---------- Photo placeholders ("cartas de marea") ---------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--marea);
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.09;
  pointer-events: none;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3, 15, 19, 0.35) 100%);
  pointer-events: none;
}

.ph--mar {
  background:
    radial-gradient(120% 70% at 50% 12%, #10708C 0%, rgba(16, 112, 140, 0) 62%),
    radial-gradient(70% 42% at 50% 64%, rgba(176, 138, 85, 0.2) 0%, rgba(176, 138, 85, 0) 60%),
    linear-gradient(180deg, #0D5063 0%, #0A3846 58%, #061F27 100%);
}
.ph--brasa {
  background:
    radial-gradient(75% 60% at 32% 72%, rgba(205, 132, 62, 0.5) 0%, rgba(205, 132, 62, 0) 60%),
    radial-gradient(50% 40% at 70% 30%, rgba(120, 82, 48, 0.25) 0%, rgba(120, 82, 48, 0) 60%),
    linear-gradient(160deg, #2E2317 0%, #1B140D 62%, #120D08 100%);
}
.ph--sala {
  background:
    radial-gradient(65% 55% at 70% 38%, rgba(205, 148, 78, 0.48) 0%, rgba(205, 148, 78, 0) 62%),
    radial-gradient(45% 40% at 22% 68%, rgba(150, 104, 56, 0.22) 0%, rgba(150, 104, 56, 0) 60%),
    linear-gradient(170deg, #2A2013 0%, #1C140C 70%, #16100A 100%);
}
.ph--dia {
  background:
    radial-gradient(90% 70% at 50% 20%, #EFE6D2 0%, rgba(239, 230, 210, 0) 60%),
    linear-gradient(170deg, #E3D8C0 0%, #CDC0A4 100%);
}
.ph--dia::after {
  background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(90, 78, 55, 0.18) 100%);
}
.ph--mapa {
  background:
    repeating-linear-gradient(0deg, rgba(240, 234, 217, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(240, 234, 217, 0.05) 0 1px, transparent 1px 56px),
    radial-gradient(80% 80% at 50% 40%, #0E4A5C 0%, #0A3846 70%);
}

.ph__label {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  padding: 1rem 1.5rem;
  line-height: 1.4;
}
.ph__label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--laton-claro);
  margin-bottom: 0.35rem;
}
.ph__kicker {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.ph__desc {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 360;
  font-size: 0.98rem;
  color: var(--espuma-60);
}
.ph__label--dark .ph__kicker { color: #6B4B20; }
.ph__label--dark .ph__desc { color: #3C3424; }
.ph__label--dark::before { background: #6B4B20; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.45s var(--ease-out),
              color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out);
  color: var(--espuma);
}
.header.is-solid {
  background: rgba(251, 248, 241, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--tinta);
  box-shadow: 0 1px 0 rgba(31, 43, 51, 0.08);
}
.header.is-solid .brand__mark { filter: none; }
/* the fullscreen menu overlay is dark even when the header would otherwise be solid */
.menu-open .header.is-solid .brand__mark { filter: invert(1); }
/* while the fullscreen menu is open, the header always matches the dark overlay */
.menu-open .header,
.menu-open .header.is-solid {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--espuma);
  box-shadow: none;
}

.header__inner {
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand { display: flex; align-items: center; gap: 0.85rem; line-height: 1.1; }
.brand__mark {
  width: clamp(54px, 6vw, 68px);
  height: clamp(54px, 6vw, 68px);
  display: block;
  /* transparent line-art logo: invert to white over the dark, non-solid
     header (hero underneath); the .is-solid rule below flips it back to
     black once the header has its light background */
  filter: invert(1);
  transition: filter 0.3s var(--ease-out);
  flex-shrink: 0;
}

.nav__list { display: flex; gap: clamp(1.2rem, 2.2vw, 2.2rem); }
.nav__link {
  position: relative;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.header__actions { display: flex; align-items: center; gap: 1rem; }

/* header CTA adapts to header state */
.header .btn--brass { background: transparent; color: currentColor; border-color: currentColor; }
.header .btn--brass:hover { background: var(--laton); border-color: var(--laton); color: var(--abismo); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.nav-toggle__line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--header-h) + 2rem) var(--wrap-pad) calc(2.5rem + env(safe-area-inset-bottom));
  background: var(--marea);
  color: var(--espuma);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }

.menu__list { display: grid; gap: 0.4rem; }
.menu__link {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.5rem, min(8vw, 6svh), 2.6rem);
  line-height: 1.35;
  transition: color 0.3s var(--ease-out);
}
.menu__link:hover { color: var(--laton-claro); }

.menu__foot { display: grid; gap: 1.2rem; justify-items: start; }
.menu__place {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--espuma-60);
}

body.menu-open { overflow: hidden; }
html:has(body.menu-open) { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: var(--espuma);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* keep the placeholder note out of the hero composition */
.hero__media .ph__label {
  position: absolute;
  left: var(--wrap-pad);
  bottom: 1.6rem;
  justify-items: start;
  text-align: left;
  padding: 0;
  max-width: 46%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 22, 28, 0.5) 0%, rgba(4, 22, 28, 0.18) 40%, rgba(4, 22, 28, 0.62) 100%);
}

.hero__content {
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--wrap-pad) 6rem;
  max-width: 62rem;
}

.hero__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--laton-claro);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 320;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.7rem, 8vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin-bottom: 1.6rem;
}
.hero__title em { color: var(--laton-claro); }

.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 400;
  line-height: 1.65;
  max-width: 34em;
  margin-inline: auto;
  color: rgba(240, 234, 217, 0.92);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.9rem;
  row-gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240, 234, 217, 0.85);
}
.hero__trust span { white-space: nowrap; }
/* separator glued to the previous item so it can never start a wrapped line */
.hero__trust span:not(:last-child)::after {
  content: "·";
  color: var(--laton-claro);
  margin-left: 0.9rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
}

.hero__scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, var(--laton-claro), rgba(201, 169, 106, 0));
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-line { animation: tide 4s var(--ease-out) infinite; }
  /* breathes like a tide but never disappears */
  @keyframes tide {
    0% { transform: scaleY(0.3); opacity: 0.4; transform-origin: top; }
    45% { transform: scaleY(1); opacity: 1; transform-origin: top; }
    60% { transform: scaleY(1); opacity: 1; transform-origin: bottom; }
    100% { transform: scaleY(0.3); opacity: 0.4; transform-origin: bottom; }
  }
}

/* staged hero entrance */
.hero__content > * {
  opacity: 0;
  transform: translateY(22px);
  animation: rise 1.1s var(--ease-out) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: 0.15s; }
.hero__content > *:nth-child(2) { animation-delay: 0.3s; }
.hero__content > *:nth-child(3) { animation-delay: 0.5s; }
.hero__content > *:nth-child(4) { animation-delay: 0.65s; }
.hero__content > *:nth-child(5) { animation-delay: 0.8s; }
.hero__content > *:nth-child(6) { animation-delay: 0.95s; }
@keyframes rise {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__content > * { animation: none; opacity: 1; transform: none; }
}

/* ---------- Intro ---------- */
.intro__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.intro__body { padding-top: 0.6rem; }
.intro__body p + p { margin-top: 1rem; color: var(--tinta-suave); }

.intro__media {
  width: min(980px, 100%);
  margin: clamp(3.5rem, 8vw, 6.5rem) auto 0;
  padding-inline: var(--wrap-pad);
}
.ph--wide { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.ph--wide img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }

/* ---------- Cocina ---------- */
.dishes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  row-gap: clamp(3.5rem, 6vw, 5.5rem);
}
.dish { grid-column: span 5; }
.dish--wide { grid-column: span 7; }
.dish--full { grid-column: 1 / -1; }
.dish:not(.dish--wide):not(.dish--full) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }

.dish__media { aspect-ratio: 4 / 5; }
.dish--wide .dish__media { aspect-ratio: 16 / 11; }
.dish--full .dish__media { aspect-ratio: 21 / 8; }
.dish--full .dish__text {
  text-align: center;
  max-width: 42em;
  margin-inline: auto;
}
.dish--full .dish__desc { margin-inline: auto; }
.dish--full .dish__text::after { margin-inline: auto; }

.dish__text { margin-top: 1.3rem; }
.dish__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.dish__desc {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  max-width: 34em;
}
/* the brass line grows as the card reveals — an entrance detail, not a false click affordance */
.dish__text::after {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  background: var(--laton);
  margin-top: 1.1rem;
  transition: width 0.9s var(--ease-out) 0.35s;
}
.js .dish.reveal:not(.is-in) .dish__text::after { width: 28px; }

/* ---------- Carousel (editorial crossfade, e.g. frituras) ---------- */
/* Real photos mix portrait and landscape phone shots — a square crop keeps
   both from losing most of the frame to object-fit: cover, unlike the wide
   ratios tuned for a single curated hero photo. */
.dishes .dish__media.carousel { aspect-ratio: 1 / 1; }
.carousel { position: relative; overflow: hidden; background: var(--marea); }
.carousel__track { position: relative; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; }
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
  pointer-events: none;
}
.carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* berenjenas: composition runs top (copa) to bottom (plato) — crop from the
   empty background above the glass instead of cutting into the plate */
.carousel__slide img[src$="compartir-5.jpg"] { object-position: center bottom; }

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(6, 24, 30, 0.4);
  color: var(--espuma);
  font-size: 1.35rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: background 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.carousel:hover .carousel__nav,
.carousel:focus-within .carousel__nav { opacity: 1; }
.carousel__nav:hover { background: rgba(6, 24, 30, 0.6); }
.carousel__nav--prev { left: 1rem; }
.carousel__nav--next { right: 1rem; }
@media (hover: none) {
  .carousel__nav { opacity: 0.85; }
}

.carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
}
.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(240, 234, 217, 0.75);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.carousel__dot.is-active { background: var(--laton-claro); border-color: var(--laton-claro); transform: scale(1.15); }

/* ---------- Opiniones (testimonial carousel, light bg + variable-height text) ---------- */
.opiniones { background: var(--cal); }
.testimonios {
  background: transparent;
  overflow: visible;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.testimonios .carousel__track { display: grid; }
.testimonios .carousel__slide {
  position: relative;
  grid-column: 1;
  grid-row: 1;
}
.testimonio { text-align: center; max-width: 42em; margin-inline: auto; }
.testimonio__stars {
  color: var(--laton-tinta);
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  margin-bottom: 1.1rem;
}
.testimonio__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.65;
  color: var(--tinta);
  text-wrap: pretty;
}
.testimonio__author {
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laton-tinta);
}
.testimonio__author span { color: var(--tinta-suave); text-transform: none; letter-spacing: 0.02em; }

.testimonios .carousel__nav {
  background: var(--cal);
  color: var(--laton-tinta);
  box-shadow: 0 2px 10px rgba(31, 43, 51, 0.12);
  opacity: 1;
}
.testimonios .carousel__nav:hover { background: var(--arena); }
.testimonios .carousel__nav--prev { left: clamp(-1.1rem, -4vw, 0.25rem); }
.testimonios .carousel__nav--next { right: clamp(-1.1rem, -4vw, 0.25rem); }
.testimonios .carousel__dots { position: static; transform: none; justify-content: center; margin-top: 2rem; }
.testimonios .carousel__dot { border-color: rgba(126, 92, 46, 0.35); }
.testimonios .carousel__dot.is-active { background: var(--laton-tinta); border-color: var(--laton-tinta); }

.opiniones__link {
  display: block;
  text-align: center;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  color: var(--laton-tinta);
  border-bottom-color: rgba(126, 92, 46, 0.35);
}
.opiniones__link:hover { color: var(--tinta); border-color: var(--laton-tinta); }

.carta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.carta__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--tinta-suave);
  margin-bottom: 1.8rem;
}
.carta__pending {
  margin-top: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laton-tinta);
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ---------- Grifos ---------- */
.cervezas__grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.cervezas__media { overflow: hidden; }
.cervezas__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
}
.cervezas__list {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: grid;
  gap: 0;
}
.cervezas__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--arena-2);
}
.cervezas__list li:first-child { border-top: 1px solid var(--arena-2); }
.cervezas__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--tinta);
}
.cervezas__note {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laton-tinta);
  white-space: nowrap;
  text-align: right;
}

/* ---------- Sin gluten ---------- */
.singluten {
  background: var(--arena);
}
.singluten__inner { text-align: center; }
.singluten__text {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: var(--tinta);
  max-width: 36em;
  margin-inline: auto;
  text-wrap: pretty;
}
.singluten__seals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.singluten__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.singluten__seal img {
  width: clamp(96px, 12vw, 132px);
  height: clamp(96px, 12vw, 132px);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(10, 56, 70, 0.16);
}
.singluten__verify {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--laton-tinta);
  border-bottom: 1px solid rgba(126, 92, 46, 0.4);
  padding-bottom: 0.15rem;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.singluten__verify:hover { border-color: var(--laton-tinta); color: var(--tinta); }
.singluten__seal-caption {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--laton-tinta);
}

/* ---------- Pilares ---------- */
.pilares__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.pilar {
  border-top: 1px solid var(--arena-2);
  padding-top: 1.8rem;
  position: relative;
}
.pilar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--laton);
}
.pilar__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
}
.pilar__text { color: var(--tinta-suave); font-size: 0.98rem; }

/* ---------- Galería ---------- */
.galeria__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.gfig { position: relative; overflow: hidden; }
.gfig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfig--a { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 100%; }
.gfig--b { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 4 / 3; }
.gfig--c { grid-column: 9 / 13; grid-row: 2; aspect-ratio: 3 / 4; }
.gfig--e { grid-column: 1 / 6; grid-row: 3; aspect-ratio: 4 / 5; }
.gfig--f { grid-column: 6 / 13; grid-row: 3; aspect-ratio: 16 / 10; align-self: end; }

/* ---------- Celebraciones ---------- */
.celebra {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--espuma);
  isolation: isolate;
  padding: var(--section-pad) var(--wrap-pad);
}
.celebra__media { position: absolute; inset: 0; z-index: -2; }
.celebra__media .ph__label {
  position: absolute;
  left: var(--wrap-pad);
  bottom: 1.6rem;
  justify-items: start;
  text-align: left;
  padding: 0;
  max-width: 46%;
}
.celebra__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 18, 23, 0.5);
}
.celebra__content { max-width: 46rem; }
.celebra__text {
  margin: 1.6rem auto 2.4rem;
  max-width: 36em;
  color: rgba(240, 234, 217, 0.9);
}

/* ---------- Reservas ---------- */
.reservas {
  background: var(--marea);
  color: var(--espuma);
}
.reservas__head { text-align: center; }
.reservas__text {
  max-width: 34em;
  margin-inline: auto;
  color: rgba(240, 234, 217, 0.85);
}

.reservas__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.6rem;
}

.reservas__widget {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.reservas__pending {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espuma-60);
}

.reservas__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.info {
  border-top: 1px solid rgba(240, 234, 217, 0.18);
  padding-top: 1.5rem;
  position: relative;
}
.info::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--laton-claro);
}
.info__label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--laton-claro);
  margin-bottom: 0.7rem;
}
.info__value {
  font-family: var(--serif);
  font-weight: 380;
  font-size: 1.35rem;
  line-height: 1.3;
}
.info__value--pending { font-style: italic; color: rgba(240, 234, 217, 0.9); }
.info__note {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--espuma-60);
  margin-top: 0.5rem;
}

.reservas__map {
  margin-top: clamp(2rem, 4vw, 3rem);
  aspect-ratio: 21 / 8;
  position: relative;
  overflow: hidden;
}
.reservas__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.15) contrast(1.05);
}

.reservas__social {
  margin-top: 2.6rem;
  text-align: center;
  color: var(--espuma-60);
}
.reservas__social span { margin-inline: 0.9rem; color: var(--laton-claro); }

/* ---------- Footer ---------- */
.footer {
  background: var(--abismo);
  color: var(--espuma);
  padding-block: clamp(4rem, 8vw, 6rem) 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(240, 234, 217, 0.14);
}
.footer__mark {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: block;
}
.footer__place {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--espuma-60);
}
.footer__nav { display: grid; gap: 0.25rem; align-content: start; }
.footer__nav a {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--espuma-60);
  transition: color 0.3s var(--ease-out);
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__nav a:hover { color: var(--espuma); }

.footer__contact { display: grid; gap: 0.45rem; align-content: start; }
.footer__contact p { font-size: 0.9rem; color: var(--espuma-60); }
.footer__social { margin-top: 0.6rem; }
.footer__social a {
  color: var(--espuma);
  border-bottom: 1px solid rgba(240, 234, 217, 0.3);
  padding-bottom: 0.15rem;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.footer__social a:hover { color: var(--laton-claro); border-color: var(--laton-claro); }
.footer__social span { margin-inline: 0.5rem; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding-top: 1.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(240, 234, 217, 0.5);
}
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; }
.footer__legal a { transition: color 0.3s var(--ease-out); }
.footer__legal a:hover { color: var(--espuma); }
.footer__meta { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.footer__copy { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.footer__bluchia { height: 22px; width: auto; }

/* ---------- Mobile sticky action bar ---------- */
.actionbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem var(--wrap-pad) calc(0.8rem + env(safe-area-inset-bottom));
  background: rgba(6, 32, 40, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(103%);
  visibility: hidden; /* keeps the hidden bar out of the tab order and the a11y tree */
  transition: transform 0.45s var(--ease-out), visibility 0s 0.45s;
}
.actionbar.is-in { transform: none; visibility: visible; transition-delay: 0s; }
.actionbar__btn { flex: 1; padding-inline: 1rem; }

/* ---------- Scroll reveal (only when JS is available) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .nav__link::after, .dish__text::after,
  .actionbar, .nav-toggle__line, .carousel__slide { transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
/* The desktop nav needs ~1100px of width; below that, hamburger menu */
@media (max-width: 1079px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1023px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .intro__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .intro__body { padding-top: 0; }
  .cervezas__grid { grid-template-columns: 1fr; gap: 2rem; }
  .cervezas__media img { aspect-ratio: 16 / 11; }

  .dishes { row-gap: 3.25rem; }
  .dish, .dish--wide { grid-column: 1 / -1; }
  .dish__media, .dish--wide .dish__media { aspect-ratio: 4 / 3; }
  .dish:not(.dish--wide) { margin-top: 0; }

  .pilares__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .galeria__grid { grid-template-columns: 1fr; }
  .gfig--a, .gfig--b, .gfig--c, .gfig--e, .gfig--f {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .gfig--a { aspect-ratio: 4 / 5; }
  .gfig--f { align-self: auto; }

  .reservas__info { grid-template-columns: 1fr; gap: 2rem; }
  .reservas__map { aspect-ratio: 4 / 3; }

  .footer__top { grid-template-columns: 1fr; }

  /* keep anchors, focused elements and the footer clear of the sticky action bar */
  html { scroll-padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .actionbar { display: none; }
}

@media (max-width: 599px) {
  .header__actions .btn--brass { display: none; }
  .hero__title br { display: none; }

  /* trust line stacks as clean centered lines, no dangling separators */
  .hero__trust { flex-direction: column; align-items: center; row-gap: 0.55rem; }
  .hero__trust span:not(:last-child)::after { content: none; }
}

@media (max-width: 479px) {
  .hero__actions .btn { width: 100%; }
  .reservas__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Legal pages (aviso legal, privacidad, cookies)
   ============================================================ */
.legal-header {
  padding: clamp(1.25rem, 4vw, 2rem) var(--wrap-pad);
  border-bottom: 1px solid var(--arena-2);
}
.legal-header__inner {
  width: min(1240px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.legal-header__back {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--laton-tinta);
}
.legal-header__back:hover { color: var(--tinta); }

.legal-banner {
  background: var(--arena);
  border: 1px solid var(--arena-2);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal-banner strong { color: var(--tinta); }

.legal-content { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }
.legal-content h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 0.5rem;
}
.legal-content .legal-updated {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal-content h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  margin: 2.5rem 0 0.9rem;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--tinta-suave);
}
.legal-content p { margin-bottom: 1rem; }
.legal-content ul { padding-left: 1.3rem; margin-bottom: 1rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content strong { color: var(--tinta); font-weight: 600; }
.legal-content a { color: var(--laton-tinta); text-decoration: underline; text-underline-offset: 0.15em; }
.legal-content a:hover { color: var(--tinta); }
.legal-content .placeholder { background: rgba(176, 138, 85, 0.16); padding: 0.05em 0.3em; border-radius: 3px; }

/* ============================================================
   Carta page
   Same tokens/type as the site; "printed-menu" masonry via CSS
   columns, the horizon-line signature, and the leader-dot list
   ============================================================ */

/* ---------- Compact dark banner ---------- */
.carta-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--espuma);
  text-align: center;
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 5rem)) var(--wrap-pad) clamp(2.75rem, 6vw, 4rem);
  background:
    radial-gradient(120% 70% at 50% 6%, #10708C 0%, rgba(16, 112, 140, 0) 60%),
    radial-gradient(70% 46% at 50% 100%, rgba(176, 138, 85, 0.22) 0%, rgba(176, 138, 85, 0) 62%),
    linear-gradient(180deg, #0D5063 0%, #0A3846 56%, #061F27 100%);
}
.carta-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.08;
  pointer-events: none;
}
.carta-hero__inner { max-width: 54rem; margin-inline: auto; }
.carta-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.3rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.carta-hero__badge::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--laton-claro);
}
.carta-hero__title {
  font-family: var(--serif);
  font-weight: 320;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.carta-hero__title em { font-style: italic; color: var(--laton-claro); }
.carta-hero__sub {
  margin-top: 1.1rem;
  max-width: 42em;
  margin-inline: auto;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(240, 234, 217, 0.9);
}

/* ---------- Sticky section chips ---------- */
.chipnav {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: rgba(251, 248, 241, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--arena-2);
}
.chipnav__inner {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 0.8rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chipnav__inner::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--arena-2);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.chip:hover { color: var(--abismo); border-color: var(--laton); background: rgba(176, 138, 85, 0.1); }
@media (min-width: 1180px) {
  /* only center once every chip fits on one line — below that it stays a
     single scrollable row so the sticky bar keeps a predictable height and
     never covers the section titles it links to */
  .chipnav__inner { justify-content: center; }
}

/* ---------- Menu sheet ----------
   Sections are direct grid children (not wrapped in explicit column divs),
   so the default row-major auto-placement pairs them in reading order —
   section 1 next to 2, 3 next to 4, etc. — instead of a manual left/right
   split that can misalign numbering when sections have very different
   lengths. */
.msheet {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
}
.mcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 719px) { .mcols { grid-template-columns: 1fr; gap: 0; } }

.mgroup {
  text-align: center;
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}
.mgroup:first-child { margin-top: 0; }
.mgroup__eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--laton-tinta);
  margin-bottom: 0.7rem;
}
.mgroup__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.1;
  color: var(--tinta);
}

/* ---------- Section ---------- */
.msec {
  break-inside: avoid;
  margin-bottom: clamp(2rem, 4vw, 2.9rem);
}
/* Anchor targets rest clear of BOTH the fixed header and the sticky chip bar.
   The global scroll-padding-top already offsets the header; this adds the
   chip bar's height (~63px, single row) plus a small gap. */
.msec[id], .mgroup[id] { scroll-margin-top: 4.25rem; }
.msec__note {
  margin-bottom: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.msec__note strong { font-style: normal; font-weight: 600; color: var(--tinta); }
.msec__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.msec__no {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: var(--laton-tinta);
}
.msec__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  color: var(--tinta);
}

/* ---------- Item + leader dots ---------- */
.mlist { display: grid; }
.mitem {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--arena-2);
}
.mitem:first-child { border-top: 1px solid var(--arena-2); }
.mitem__row { display: flex; align-items: baseline; gap: 0.5rem; }
.mitem__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--tinta);
}
.mitem__dots {
  flex: 1 1 auto;
  min-width: 1.2rem;
  align-self: flex-end;
  margin-bottom: 0.3em;
  border-bottom: 1px dotted var(--piedra);
  opacity: 0.75;
}
.mitem__price {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--laton-tinta);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mitem__unit { color: var(--tinta-suave); font-size: 0.94em; }
.mitem__note {
  margin-top: 0.28rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 40em;
}
.mitem__aler {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
}
.mitem__aler-label {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laton-tinta);
}
/* small brass tick before the label, echoing the section hairlines */
.mitem__aler-label::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1px;
  margin-right: 0.4rem;
  vertical-align: 0.25em;
  background: var(--laton);
}

/* ---------- Allergen legend under the banner ---------- */
.sheet-legend {
  max-width: 44em;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}
.sheet-legend strong { color: var(--tinta); font-weight: 600; }

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.18em 0.5em;
  border-radius: 3px;
  vertical-align: 0.12em;
  margin-left: 0.3rem;
  white-space: nowrap;
}
.tag--gluten { background: rgba(176, 138, 85, 0.18); color: var(--laton-tinta); }
.tag--recomendado { background: rgba(4, 146, 179, 0.14); color: var(--mar); }

/* ---------- Sheet foot note ---------- */
.mfoot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--arena-2);
  text-align: center;
}
.mfoot p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--tinta-suave);
  max-width: 44em;
  margin-inline: auto;
}
.mfoot p + p { margin-top: 0.6rem; }
.mfoot .horizon { margin-block: 0 clamp(1.5rem, 3vw, 2rem); }