/* =====================================================================
   Che Pizza — flagship run-1 · boliche-2 · "Boliche de Barrio"
   Güerrín heritage band system: cream / red / near-black, celeste + sol
   as fill-only ribbon accents. Young Serif + Onest. Dense posture.
   ===================================================================== */

/* studio token foundation for che-pizza */
/* Generated by foundry.py. SHARED across concepts: `site` embeds this WHOLE
   file (tokens :root + base layer) at the top of each vN styles.css, then
   binds its direction's density posture in one explicit line:
     :root { --section-pad: var(--section-pad-<posture>); --flow: var(--flow-<posture>); }
   Edit ramps/scales here; pick fonts + an art direction per concept. */
:root {
  /* --- brand color ramps (50 light .. 900 dark) --- */
  /* brand */
  --brand-50: #f8eeef;
  --brand-100: #f0dcdf;
  --brand-200: #e2babf;
  --brand-300: #cf8e98;
  --brand-400: #b95a68;
  --brand-500: #a32638;
  --brand-600: #8c2130;
  --brand-700: #751b28;
  --brand-800: #5b151f;
  --brand-900: #410f16;
  /* accent */
  --accent-50: #fdf9f5;
  --accent-100: #fbf4eb;
  --accent-200: #f6e9d6;
  --accent-300: #f0dbbd;
  --accent-400: #eaca9e;
  --accent-500: #e3b980;
  --accent-600: #c39f6e;
  --accent-700: #a3855c;
  --accent-800: #7f6848;
  --accent-900: #5b4a33;

  /* --- semantic roles (WCAG-AA verified by foundry.py) --- */
  --color-bg: #f7f1e6;
  --color-brand: #a32638;
  --color-accent: #e3b980;
  --color-ink: #201a18; /* deep body ink (target >=7:1 on bg) */
  --color-muted: #655f5a; /* secondary text on bg (>=5:1) */
  --color-on-brand: #ffffff; /* text on a brand fill */
  --color-on-accent: #201a18; /* text on an accent fill */
  /* accent sampled from hero photo: #e3b980 */

  /* --- dark-band vocabulary (proof bands, footers, closes) --- */
  --surface-dark: #5b151f;
  --on-dark: #f7f1e6; /* text on the dark band */
  --on-dark-muted: #c0a4a0; /* secondary text on the dark band */
  --hairline: rgba(32, 26, 24, 0.22); /* rules/borders on light surfaces */
  --hairline-dark: rgba(247, 241, 230, 0.28); /* rules/borders on dark bands */

  /* --- extra color "celeste" (direction-named, contrast-checked) --- */
  --celeste: #75aadb;
  --celeste-deep: #6592bc;
  --on-celeste: #201a18; /* text on a celeste fill */

  /* --- extra color "sol" (direction-named, contrast-checked) --- */
  --sol: #c8912e;
  --sol-deep: #ac7d28;
  --on-sol: #201a18; /* text on a sol fill */

  /* --- fluid type scale (clamp: 360px .. 1240px viewport) --- */
  --step-6: clamp(2.4rem, 1.664rem + 3.27vw, 4.2rem);
  --step-5: clamp(2rem, 1.509rem + 2.18vw, 3.2rem);
  --step-4: clamp(1.7rem, 1.414rem + 1.27vw, 2.4rem);
  --step-3: clamp(1.4rem, 1.236rem + 0.73vw, 1.8rem);
  --step-2: clamp(1.2rem, 1.098rem + 0.45vw, 1.45rem);
  --step-1: clamp(1.1rem, 1.059rem + 0.18vw, 1.2rem);
  --step-0: clamp(1rem, 0.98rem + 0.09vw, 1.05rem);
  --step--1: clamp(0.875rem, 0.865rem + 0.05vw, 0.9rem);
  --step--2: clamp(0.78rem, 0.772rem + 0.04vw, 0.8rem);
  /* poster steps for the ONE oversized moment (hero word, giant footer
     wordmark) — overflow-safe with the base layer's wrap rules */
  --step-display: clamp(3rem, 1.839rem + 5.16vw, 7rem);
  --step-poster: clamp(4.2rem, 1.935rem + 10.06vw, 12rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* --- type craft tokens --- */
  --track-display: -0.02em; /* negative tracking for display/poster sizes */
  --track-caps: 0.08em; /* positive tracking for caps eyebrows/labels */
  --measure-body: 65ch; /* readable body line length */
  --measure-tight: 45ch; /* leads, captions, intro columns */
  --measure: var(--measure-body); /* legacy alias */

  /* --- fluid spacing scale (clamp: tighter on phones, generous on desktop) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: clamp(1.25rem, 1.148rem + 0.45vw, 1.5rem);
  --space-lg: clamp(1.75rem, 1.648rem + 0.45vw, 2rem);
  --space-xl: clamp(2.5rem, 2.295rem + 0.91vw, 3rem);
  --space-2xl: clamp(3rem, 2.591rem + 1.82vw, 4rem);
  --space-3xl: clamp(4rem, 3.182rem + 3.64vw, 6rem);
  --space-4xl: clamp(6rem, 4.773rem + 5.45vw, 9rem);
  --space-5xl: clamp(8rem, 5.545rem + 10.91vw, 14rem);

  /* --- density postures (a concept binds ONE explicitly — never rely on
     the fallback silently; the design-director checks the binding) --- */
  --section-pad-airy: var(--space-5xl);
  --flow-airy: var(--space-2xl);
  --section-pad-measured: var(--space-4xl);
  --flow-measured: var(--space-xl);
  --section-pad-dense: var(--space-3xl);
  --flow-dense: var(--space-lg);
  /* resilience fallback only — the concept's own binding must override: */
  --section-pad: var(--section-pad-measured);
  --flow: var(--flow-measured);

  /* --- corner language: sharp (0px base) --- */
  --radius-0: 0;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 6px;

  /* --- shadow scale (keep restrained; hairlines over shadows) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.16);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  /* --- chrome --- */
  --anchor-offset: 5.5rem; /* anchored-section clearance under a fixed header */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* =====================================================================
   Foundation base layer — stress-proof defaults shared by every concept.
   Embed together with the tokens above; everything is :where()-wrapped
   (zero specificity) so any concept rule overrides it.
   REQUIRED companion, inline in <head> BEFORE the stylesheet link:
     <script>
       document.documentElement.classList.add("js");
       if (new URLSearchParams(location.search).get("shot") === "1")
         document.documentElement.setAttribute("data-shot", "");
     </script>
     <style>img{max-width:100%;height:auto}</style>
   (JS-off pages then render complete, and reveals never flash on slow loads.)
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* brand-tone ground behind opaque photos, so a slow or failed image never
   leaves a hole (transparent png/svg marks deliberately excluded) */
:where(img[src$=".jpg"], img[src$=".jpeg"], img[src$=".webp"]) {
  background-color: var(--brand-100, #e9e9e4);
}

/* a long unbreakable token (a name, a pasted URL) wraps instead of forcing
   horizontal overflow; `anywhere` on headings also lets grid/flex tracks shrink */
:where(h1, h2, h3, h4) {
  overflow-wrap: anywhere;
}
:where(p, li, dt, dd, figcaption, blockquote, cite) {
  overflow-wrap: break-word;
}

/* display type carries the craft tracking by default (override per concept) */
:where(h1, h2, h3) {
  letter-spacing: var(--track-display);
}

/* selection themed from brand — the finish detail every premium site has */
::selection {
  background: #a32638;
  color: #ffffff;
}

/* anchored sections clear a fixed header on jump; tune --anchor-offset per concept */
:where([id]) {
  scroll-margin-top: var(--anchor-offset);
}

/* visible focus floor (restyle per concept, never remove) */
:where(:focus-visible) {
  outline: 3px solid var(--color-accent, currentColor);
  outline-offset: 3px;
}

/* Reveal contract: hidden-before-reveal ONLY once the head snippet set html.js,
   so content is complete with JS off. The concept's JS adds .is-in to show. */
html.js :where([data-reveal]) {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
html.js :where([data-reveal].is-in) {
  opacity: 1;
  transform: none;
}

/* Capture + accessibility freeze: everything rests at its final state */
html[data-shot] :where([data-reveal]),
html.no-motion :where([data-reveal]) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html[data-shot] {
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  :where([data-reveal]) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   CONCEPT LAYER — Boliche de Barrio
   ===================================================================== */

/* vendored faces (self-contained, no CDN) — Young Serif display + Onest text */
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin-var.woff2") format("woff2");
}

/* the direction's density posture, bound explicitly (dense) */
:root {
  --section-pad: var(--section-pad-dense);
  --flow: var(--flow-dense);
  --font-display: "Young Serif", "Georgia", serif;
  --font-text: "Onest", "Segoe UI", system-ui, sans-serif;
  --header-h: 4.25rem;
  --pad-inline: clamp(1.25rem, 4vw, 2.5rem);
  --straddle: var(--space-4xl); /* how far photos cross band seams */
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  padding-top: var(--header-h);
  overflow-x: clip; /* clip, never hidden: keeps position:sticky alive */
}
body.no-scroll {
  overflow: hidden;
}

.wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md);
}
h2 {
  font-size: var(--step-5);
  text-wrap: balance;
}
h3 {
  font-size: var(--step-3);
}
p {
  margin: 0 0 var(--space-md);
  max-width: var(--measure-body);
}

a {
  color: inherit;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-brand);
  margin: 0 0 var(--space-sm);
}

figcaption {
  font-size: var(--step--1);
  color: var(--color-muted);
  padding-top: var(--space-2xs);
}

:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}

/* ---------------- buttons: rubber-stamp press ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  text-decoration: none;
  padding: 0.95em 1.6em;
  border: 1px solid var(--brand-700);
  box-shadow: 3px 3px 0 var(--brand-800);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover {
  background: var(--brand-600);
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--brand-800);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  box-shadow: 3px 3px 0 var(--hairline);
}
.btn-ghost:hover {
  background: var(--accent-200);
}
.btn-ghost:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--hairline);
}

/* ---------------- header (ink band, matches the logo card) ---------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-inline: var(--pad-inline);
  background: var(--color-ink);
  color: var(--on-dark);
  border-bottom: 1px solid var(--hairline-dark);
}
.site-header ::selection,
.site-footer ::selection {
  background: var(--color-bg);
  color: var(--color-ink);
}
.brand {
  display: inline-flex;
  flex: none;
}
.brand img {
  width: 52px;
  height: 52px;
  object-fit: cover;
}
.nav {
  display: flex;
  gap: var(--space-lg);
  margin-inline: auto;
}
.nav a {
  color: var(--on-dark);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--dur-base) var(--ease-out);
  padding-block: 0.35em;
}
.nav a:hover {
  background-size: 100% 2px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.nav + .header-actions {
  margin-left: 0;
}
.lang-toggle {
  font: 600 var(--step--1) var(--font-text);
  letter-spacing: var(--track-caps);
  color: var(--on-dark);
  background: none;
  border: 1px solid var(--hairline-dark);
  padding: 0.45em 0.8em;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.lang-toggle:hover {
  border-color: var(--on-dark);
}
.btn-header {
  padding: 0.7em 1.2em;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}
.btn-header:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
}
.site-header :focus-visible,
.drawer :focus-visible,
.site-footer :focus-visible,
.parrilla :focus-visible,
.voces :focus-visible {
  outline-color: var(--on-dark);
}

.burger {
  display: none;
  background: none;
  border: 0;
  color: var(--on-dark);
  padding: 0.4em;
  cursor: pointer;
}
.burger:active {
  transform: scale(0.9);
}

/* drawer (mobile) */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  background: var(--color-ink);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--pad-inline);
  transform: translateX(102%);
  visibility: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    visibility 0s var(--dur-base);
}
.drawer.open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.drawer a {
  font-family: var(--font-display);
  font-size: var(--step-4);
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-dark);
  padding-block: var(--space-sm);
}
.drawer a:hover {
  color: var(--color-accent);
}
.drawer a.drawer-tel {
  color: var(--color-accent);
}
html[data-shot] .drawer {
  transition: none;
}

/* ---------------- hero: split editorial ---------------- */
.hero {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  min-height: calc(100vh - var(--header-h));
  background: var(--color-bg);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2xl) var(--space-2xl) var(--space-2xl)
    max(var(--pad-inline), calc((100vw - 76rem) / 2 + var(--pad-inline)));
}
.hook {
  font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.35rem);
  margin: 0 0 var(--space-lg);
  color: var(--color-ink);
}
.hook span {
  display: block;
  overflow: hidden;
}
.hook span > i {
  display: block;
  font-style: normal;
}
.hook span:nth-child(3) > i {
  color: var(--color-brand);
}

/* hero load motion: lines rise from a baseline mask */
html.js .hook span > i {
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
html.js .hero.is-in .hook span:nth-child(1) > i {
  transition-delay: 60ms;
  transform: none;
}
html.js .hero.is-in .hook span:nth-child(2) > i {
  transition-delay: 170ms;
  transform: none;
}
html.js .hero.is-in .hook span:nth-child(3) > i {
  transition-delay: 280ms;
  transform: none;
}
html[data-shot] .hook span > i {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hook span > i {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ---------------- el nombre se queda corto — declarative hook beat ---------------- */
.reveal-hook {
  background: var(--color-bg);
  padding-block: var(--section-pad);
}
.reveal-hook .eyebrow {
  margin-bottom: var(--space-lg);
}
.ytambien {
  font-family: var(--font-display);
  font-size: var(--step-display);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  margin: 0;
  max-width: none;
}
.ytambien .yl {
  display: block;
  overflow: hidden;
}
.ytambien .yl > i {
  display: block;
  font-style: normal;
}
.ytambien .yl-ghost > i {
  color: var(--color-muted);
}
.ytambien .yl-fin > i {
  color: var(--color-brand);
}
/* staged line-rise reveal (mirrors the hero mask; the "y también" reveal) */
html.js .ytambien .yl > i {
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
html.js .ytambien.is-in .yl:nth-child(1) > i {
  transition-delay: 40ms;
  transform: none;
}
html.js .ytambien.is-in .yl:nth-child(2) > i {
  transition-delay: 130ms;
  transform: none;
}
html.js .ytambien.is-in .yl:nth-child(3) > i {
  transition-delay: 220ms;
  transform: none;
}
html.js .ytambien.is-in .yl:nth-child(4) > i {
  transition-delay: 320ms;
  transform: none;
}
html[data-shot] .ytambien .yl > i {
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .ytambien .yl > i {
    transform: none !important;
    transition: none !important;
  }
}

.hero-media {
  margin: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* ---------------- la parrilla — red band + straddling photo ---------------- */
.parrilla {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding-top: var(--section-pad);
}
.parrilla ::selection,
.voces ::selection {
  background: var(--color-ink);
  color: var(--color-bg);
}
.parrilla .eyebrow {
  color: var(
    --accent-300
  ); /* AA on brand red (5.4:1) — accent-500 fails at 3.98 */
}
.parrilla-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
  padding-bottom: var(--section-pad);
}
.num20 {
  position: absolute;
  bottom: -0.14em;
  left: 0;
  font-family: var(--font-display);
  font-size: var(--step-poster); /* the direction's promised poster moment */
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--accent-500);
  opacity: 0.26;
  pointer-events: none;
  user-select: none;
}
.parrilla-copy {
  position: relative;
  z-index: 1;
}
.parrilla-copy .lead {
  max-width: var(--measure-tight);
  font-size: var(--step-1);
  margin-bottom: 0;
}
.parrilla-video {
  margin: 0;
  position: relative;
  z-index: 1;
}
.parrilla-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--hairline-dark);
  background: var(--brand-900);
}
.parrilla-video figcaption {
  color: rgba(
    247,
    241,
    230,
    0.85
  ); /* AA on brand red — --on-dark-muted was verified on --surface-dark only */
}

.straddle {
  margin: 0 0 calc(-1 * var(--straddle));
  position: relative;
  z-index: 1;
}
.straddle img {
  width: 100%;
  height: clamp(340px, 72vh, 720px);
  object-fit: cover;
  object-position: 45% 50%;
}
.straddle figcaption {
  position: absolute;
  left: var(--pad-inline);
  bottom: var(--space-md);
  color: var(--on-dark);
  padding: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

/* ---------------- firmas — alternating editorial rows ---------------- */
.firmas {
  background: var(--color-bg);
  padding-top: calc(var(--section-pad) + var(--straddle));
  padding-bottom: var(--section-pad);
}
.firmas-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  align-items: end;
  margin-bottom: var(--flow);
}
.firmas-head h2 {
  margin-bottom: 0;
}
.firmas-title {
  grid-column: 1;
  grid-row: 1;
}
.chef-print {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  justify-self: end;
  width: min(100%, 300px);
  /* pinned like a print over the parrillada band seam */
  margin-top: calc(-1 * (var(--straddle) + var(--space-2xl)));
  position: relative;
  z-index: 2;
  transform: rotate(-1.1deg);
}
.chef-print img {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(1) contrast(1.08);
  border: 8px solid #fff;
  box-shadow: var(--shadow-md);
}

.firma {
  display: grid;
  grid-template-columns: minmax(0, 62%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  border-top: 1px solid var(--hairline);
  padding-block: var(--flow);
}
.firma:last-of-type {
  border-bottom: 1px solid var(--hairline);
}
.firma-media {
  margin: 0;
}
.firma--rev .firma-media {
  order: 2;
}
.firma-copy {
  padding-inline: var(--pad-inline);
}
.firma-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 640px;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.06);
}
.firma--rev .firma-media img {
  object-position: 45% 40%;
}
/* the pizza row (3rd firma) reads square + narrower than its 16/10 neighbours —
   the crop plan's intended row variety (pizza-cuatro-gustos: square yes) */
.firma:nth-of-type(3) .firma-media img {
  aspect-ratio: 1 / 1;
  object-position: 50% 45%;
}
.firma:nth-of-type(3) {
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
}
.firma-copy h3 {
  font-size: var(--step-4);
  margin-bottom: var(--space-2xs);
}
.firma-copy p {
  color: var(--color-muted);
  margin: 0;
  max-width: var(--measure-tight);
}
.firma-quote {
  margin: var(--space-lg) 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-md);
  max-width: 34ch;
}
.firma-quote p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
}
.firma-quote cite {
  font-style: normal;
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* photo grade: the direction's ONE warm contrast lift on every color photo */
.hero-media img,
.straddle img,
.strip img,
.jardin-media img,
.carta-fig img,
.mural-print img {
  filter: contrast(1.04) saturate(1.06);
}

/* ---------------- ribbon divider (flag DNA, fill-only) ---------------- */
.ribbon {
  height: 10px;
  background: linear-gradient(
    180deg,
    var(--celeste) 0 32%,
    var(--color-bg) 32% 68%,
    var(--celeste) 68% 100%
  );
  position: relative;
}
.ribbon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--sol);
}
.ribbon--dark {
  background: linear-gradient(
    180deg,
    var(--celeste) 0 32%,
    var(--color-ink) 32% 68%,
    var(--celeste) 68% 100%
  );
}

/* ---------------- carta — ruled index + sticky figure ---------------- */
.carta {
  background: var(--color-bg);
  padding-block: var(--section-pad);
}
.carta-head {
  margin-bottom: var(--flow);
}
.carta-head h2 {
  font-size: var(--step-5);
}
.carta-intro {
  max-width: var(--measure-tight);
  font-size: var(--step-1);
}
.carta-intro a {
  font-weight: 600;
  white-space: nowrap;
}
.carta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: stretch;
}
.carta-sec {
  margin-bottom: var(--flow);
}
.carta-sec h3 {
  font-size: var(--step-2);
  color: var(--color-brand);
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: var(--space-2xs);
  margin-bottom: 0;
}
.index {
  list-style: none;
  margin: 0;
  padding: 0;
}
.index > li {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-sm);
}
.item-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.item-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.price {
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-muted);
  text-decoration: underline dotted var(--hairline);
  text-underline-offset: 4px;
  white-space: nowrap;
  margin-left: auto; /* a wrapped price stays right-aligned under the name, reading as a tag not a stray line */
  transition: color var(--dur-fast) var(--ease-out);
}
.price:hover {
  color: var(--sol-deep);
  text-decoration-color: currentColor;
}
.item-desc {
  font-size: var(--step--1);
  color: var(--color-muted);
  margin: var(--space-3xs) 0 0;
  max-width: var(--measure-tight);
}
.carta-note {
  font-size: var(--step--1);
  color: var(--color-muted);
  margin-top: var(--space-sm);
  font-style: italic;
}
.carta-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
}
.carta-fig {
  margin: 0;
  align-self: start;
  width: 100%;
}
.carta-fig img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 45%;
}
/* a second menu photo keeps the right rail occupied through the last carta
   sections (Entradas / Bebidas), where it previously ran empty */
.carta-fig--low {
  position: static;
  align-self: start;
  width: 100%;
}
.carta-fig--low img {
  aspect-ratio: 1 / 1;
  object-position: 50% 50%;
}

/* ---------------- strip — full-bleed kitchen band ---------------- */
.strip {
  background: var(--color-bg);
  padding-bottom: var(--section-pad);
}
.strip-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr 2fr 1.1fr;
  gap: var(--space-2xs);
}
.strip-grid figure {
  margin: 0;
}
.strip-grid img {
  width: 100%;
  height: clamp(300px, 52vh, 540px);
  object-fit: cover;
}
.strip-grid figure:nth-child(1) img {
  object-position: 50% 50%;
}
.strip-grid figure:nth-child(2) img {
  object-position: 55% 50%;
}
.strip-grid figure:nth-child(3) img {
  object-position: 50% 50%;
}
.strip-grid figure:nth-child(4) img {
  object-position: 45% 45%;
}
.strip-caption {
  max-width: 76rem;
  margin: var(--space-2xs) auto 0;
  padding-inline: var(--pad-inline);
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* ---------------- jardín — full-bleed place band + mural print ---------------- */
.jardin {
  position: relative;
}
.jardin-media {
  margin: 0;
  position: relative;
}
.jardin-media img {
  width: 100%;
  height: clamp(480px, 96vh, 860px);
  object-fit: cover;
  object-position: 50% 40%;
}
.jardin-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22, 14, 11, 0.88) 0%,
    rgba(22, 14, 11, 0.45) 30%,
    rgba(22, 14, 11, 0) 60%
  );
  pointer-events: none;
}
.jardin-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: var(--on-dark);
  max-width: 76rem;
  margin-inline: auto;
  padding: 0 var(--pad-inline) var(--space-2xl);
}
.jardin-overlay .eyebrow {
  color: var(--accent-300);
  /* the eyebrow sits highest on the photo where the scrim thins — a soft
     shadow guarantees the gold reads over any frame of the deck */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.jardin-overlay h2 {
  color: #fff;
}
.jardin-overlay p {
  max-width: var(--measure-tight);
}
.jardin-overlay .practical {
  font-size: var(--step--1);
  color: rgba(247, 241, 230, 0.82);
  border-top: 1px solid var(--hairline-dark);
  padding-top: var(--space-sm);
  margin-bottom: 0;
}
.mural-print {
  position: absolute;
  right: clamp(var(--pad-inline), 6vw, 7rem);
  bottom: 0;
  z-index: 3;
  width: clamp(180px, 24vw, 340px);
  margin: 0;
  transform: translateY(42%) rotate(1.2deg);
  background: #fff;
  border: 8px solid #fff;
  box-shadow: var(--shadow-lg);
}
.mural-print img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.mural-print figcaption {
  color: var(--color-ink);
  font-size: var(--step--2);
  padding: var(--space-2xs) var(--space-3xs) var(--space-3xs);
}

/* ---------------- voces — red proof band, marquee signature ---------------- */
.voces {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding-top: calc(
    var(--section-pad) + clamp(70px, 9vw, 130px)
  ); /* clears the mural print */
  padding-bottom: var(--section-pad);
}
.voces .eyebrow {
  color: var(--accent-300); /* AA on brand red (5.4:1) */
  margin-bottom: var(--space-md);
}
.voces-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.rating {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
}
.rating-num {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
}
.rating .star {
  color: var(--accent-500);
  align-self: center;
  flex: none;
}
.rating-line {
  font-size: var(--step--1);
  color: rgba(247, 241, 230, 0.85);
}

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline-dark);
  margin-block: var(--flow);
  padding-block: var(--space-md);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-run {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.marquee-run li {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.3;
  padding-right: var(--space-2xl);
  position: relative;
}
.marquee-run li::after {
  content: "";
  position: absolute;
  right: calc(var(--space-2xl) / 2 - 4px);
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--sol);
}

.voces-static {
  display: none;
}
html:not(.js) .marquee,
html[data-shot] .marquee {
  display: none;
}
html:not(.js) .voces-static,
html[data-shot] .voces-static {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  border-block: 1px solid var(--hairline-dark);
  margin-block: var(--flow);
  padding-block: var(--space-lg);
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    display: none;
  }
  .voces-static {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    border-block: 1px solid var(--hairline-dark);
    margin-block: var(--flow);
    padding-block: var(--space-lg);
  }
}
.voces-static blockquote {
  margin: 0;
}
.voces-static blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  margin-bottom: var(--space-2xs);
}
.voces cite {
  font-style: normal;
  font-size: var(--step--1);
  color: rgba(
    247,
    241,
    230,
    0.88
  ); /* AA on brand red — .75 alpha sat at 4.26:1 */
}

.voces-quote {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: end;
}
.voces-quote .rating {
  justify-self: end;
  border-left: 1px solid var(--hairline-dark);
  padding-left: var(--space-xl);
}
.big-quote {
  margin: 0;
  max-width: 46ch;
}
.big-quote p {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.25;
  margin-bottom: var(--space-xs);
  max-width: none;
}

/* ---------------- vení — hours + phone close ---------------- */
.veni {
  background: var(--color-bg);
  padding-block: var(--section-pad);
}
.veni-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.veni-copy > p:first-of-type {
  max-width: var(--measure-tight);
}
.reserve-label {
  margin-top: var(--space-xl);
}
.tel-display {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--color-brand);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
  margin-bottom: var(--space-lg);
}
.tel-display:hover {
  border-color: var(--color-brand);
}
.veni-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.hours {
  border-top: 2px solid var(--color-ink);
  padding-top: var(--space-sm);
}
.hours .eyebrow {
  color: var(--color-ink);
}
.hours table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}
.hours th,
.hours td {
  text-align: left;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--hairline);
}
.hours th {
  font-weight: 500;
}
.hours td {
  text-align: right;
  font-weight: 600;
}
.hours tr:first-child td {
  color: var(--color-brand);
}
.hours-note {
  font-size: var(--step--1);
  color: var(--color-muted);
  margin: var(--space-sm) 0 0;
}

/* ---------------- footer — giant wordmark final beat ---------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--on-dark);
  padding-top: var(--space-2xl);
}
.foot-mark {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 12rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-align: center;
  color: var(--color-bg);
  margin: 0 0 var(--space-lg);
  white-space: nowrap;
}
.site-footer .ribbon--dark {
  margin-bottom: var(--space-2xl);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.foot-brand img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  margin-bottom: var(--space-sm);
}
.tagline {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--accent-500);
  margin: 0;
}
.foot-col .eyebrow {
  color: var(--accent-500);
}
.foot-col p {
  margin-bottom: var(--space-2xs);
  font-size: var(--step--1);
  color: rgba(247, 241, 230, 0.85);
}
.foot-col a {
  color: var(--on-dark);
  text-decoration-color: var(--hairline-dark);
}
.foot-col a:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}
.foot-sign-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline-dark);
  padding-block: var(--space-lg);
}
.foot-sign {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0;
}
.foot-fine {
  font-size: var(--step--2);
  color: var(--on-dark-muted);
  margin: 0;
}

/* =====================================================================
   Responsive — compact breakpoint aligned with the burger at 860px
   ===================================================================== */
@media (max-width: 860px) {
  .nav {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
  .btn-header {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-copy {
    padding: var(--space-2xl) var(--pad-inline);
  }
  .hero-media img {
    height: 58vh;
    min-height: 320px;
  }

  .parrilla-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  /* the poster numeral stays on mobile: a static closing beat under the video */
  .num20 {
    position: static;
    order: 3;
    justify-self: end;
    line-height: 0.75;
    margin-top: calc(-1 * var(--space-sm));
  }
  .straddle img {
    height: clamp(260px, 48vh, 420px);
  }
  /* caption wraps clear of the chef print pinned over the right edge */
  .straddle figcaption {
    max-width: calc(
      100% - min(58%, 240px) - 2 * var(--pad-inline) - var(--space-sm)
    );
  }

  .firmas-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .firmas-title,
  .chef-print {
    grid-column: auto;
    grid-row: auto;
  }
  .chef-print {
    justify-self: end;
    width: min(58%, 240px);
    margin-top: calc(-1 * (var(--straddle) + var(--space-3xl)));
  }
  .firmas-title {
    margin-top: var(--space-lg);
  }
  .voces-quote {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
  .voces-quote .rating {
    justify-self: start;
    border-left: 0;
    padding-left: 0;
  }
  .firma,
  .firma:nth-of-type(3) {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .firma-media,
  .firma--rev .firma-media {
    margin-inline: 0;
    order: 0;
  }

  .carta-grid {
    grid-template-columns: 1fr;
  }
  .carta-rail {
    gap: var(--space-lg);
  }
  .carta-fig,
  .carta-fig--low {
    position: static;
    align-self: start;
    width: 100%;
    max-width: 420px;
  }

  .strip-grid {
    grid-template-columns: 2fr 1.1fr;
  }
  .strip-grid img {
    height: clamp(160px, 30vw, 280px);
  }

  .jardin-media img {
    height: 74vh;
    min-height: 420px;
  }
  /* stronger, taller scrim: the eyebrow sits higher on the compact stack */
  .jardin-media::after {
    background: linear-gradient(
      to top,
      rgba(22, 14, 11, 0.92) 0%,
      rgba(22, 14, 11, 0.6) 45%,
      rgba(22, 14, 11, 0) 85%
    );
  }
  .jardin-overlay {
    padding-bottom: var(--space-2xl);
  }
  /* hang mostly below the seam so the print never covers the practical line */
  .mural-print {
    width: clamp(150px, 40vw, 220px);
    right: var(--pad-inline);
    transform: translateY(82%) rotate(1.2deg);
  }
  .voces {
    padding-top: calc(var(--section-pad) + clamp(150px, 46vw, 215px));
  }

  html:not(.js) .voces-static,
  html[data-shot] .voces-static {
    grid-template-columns: 1fr;
  }
  @media (prefers-reduced-motion: reduce) {
    .voces-static {
      grid-template-columns: 1fr;
    }
  }

  .veni-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .brand img {
    width: 44px;
    height: 44px;
  }
  .marquee-run li {
    font-size: var(--step-2);
  }
  .strip-caption {
    margin-top: var(--space-xs);
  }
}