/* Auto-generated by orchestrator/files.js writeDesign — DO NOT EDIT.
   Every value resolves via var(--token) declared in :root below,
   or a structural CSS primitive. Rebuild design.md to change output. */

:root {
  --color-primary: #356561;
  --color-primary-light: #8B3040;
  --color-primaryLight: var(--color-primary-light);
  --color-accent: #edb9b8;
  --color-accent-light: #E8B97A;
  --color-accentLight: var(--color-accent-light);
  --color-surface: #FAF5EE;
  --color-surface-alt: #F2EAE0;
  --color-surfaceAlt: var(--color-surface-alt);
  --color-dark: #2A1A1C;
  --color-mid: #5C4A4E;
  --color-light: #FFFFFF;
  --color-nav-bg: #356561;
  --color-navBg: var(--color-nav-bg);
  --color-footer-bg: #2A1A1C;
  --color-footerBg: var(--color-footer-bg);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-display-family: var(--font-display);
  --font-heading1: 'Playfair Display', Georgia, serif;
  --font-heading1-family: var(--font-heading1);
  --font-heading2: 'Playfair Display', Georgia, serif;
  --font-heading2-family: var(--font-heading2);
  --font-heading3: 'Inter', sans-serif;
  --font-heading3-family: var(--font-heading3);
  --font-body: 'Inter', sans-serif;
  --font-body-family: var(--font-body);
  --font-small: 'Inter', sans-serif;
  --font-small-family: var(--font-small);
  --font-label: 'Inter', sans-serif;
  --font-label-family: var(--font-label);
  --spacing-section: 5rem;
  --spacing-section-mobile: 3rem;
  --spacing-sectionMobile: var(--spacing-section-mobile);
  --rounded-default: 8px;
  --rounded-lg: 16px;
  --rounded-xl: 24px;
  --rounded-pill: 999px;
}

/* Baseline reset — structural primitives only */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--color-dark); background: var(--color-surface); line-height: 1.5; }
img, svg, video, picture { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
*:has(> [data-menu-photo][hidden]) { align-self: start; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
main { display: block; }

/* Canonical header — .site-nav — DEFAULT layout (unstyled-safe fallback).
   The CONTRACT is the class vocabulary + data-nav wiring attributes, NOT this
   topology: per-brand header layout comes from design.md "## Chrome CSS",
   appended later in this file so brand rules win at equal specificity.
   These defaults are only what renders when a build authors no Chrome CSS. */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem;
  background: #356561;
  border-bottom: 1px solid var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 80px;
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: var(--layout-max, 72rem); margin: 0 auto; }
.site-nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; flex-shrink: 1; max-inline-size: min(60vw, 28rem); }
.site-nav__brand img { flex-shrink: 0; width: auto; max-height: 2.8rem; object-fit: contain; }
.site-nav__brand:not(:has(img)) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__menu a { color: var(--color-dark); padding: 0.25rem 0.5rem; }
.site-nav__menu a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.site-nav__menu a:hover { color: var(--color-primary); }
.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--color-primary);
  padding: 0.625rem;
  border-radius: var(--rounded-default);
}
.site-nav__toggle-icon {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 -0.4rem 0 currentColor, 0 0.4rem 0 currentColor;
}
.site-nav__toggle:not(:has(svg,img,.site-nav__toggle-icon,[aria-hidden="true"]))::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 -0.4rem 0 currentColor, 0 0.4rem 0 currentColor;
}
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.625rem 1.25rem;
  background: var(--color-primary);
  color: inherit;
  border-radius: var(--rounded-default);
  font-weight: 600;
  transition: opacity 120ms ease, transform 120ms ease;
}
.site-nav__cta:hover { opacity: 0.92; }

/* sr-only — accessibility primitive */
.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; }

/* Primary button helper — tokens only */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: inherit;
  border-radius: var(--rounded-default);
  font-weight: 600;
  transition: opacity 120ms ease;
}
.btn-primary:hover { opacity: 0.92; }

/* Canonical footer — supports BEM sub-classes page-builders emit */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-surface);
  color: var(--color-dark);
  border-top: 1px solid var(--color-surface);
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--color-primary); }
/* Top region — brand + nav + cols laid out as flex row, wraps on narrow viewports */
.site-footer__inner, .site-footer__top, .site-footer__main {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__brand img { align-self: flex-start; max-width: 100%; object-fit: contain; }
.site-footer__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.site-footer__wordmark-accent { color: var(--color-accent); }
.site-footer__tagline { color: var(--color-dark); opacity: 0.7; font-size: 0.875rem; }
.site-footer__nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__col, .site-footer__contact, .site-footer__hours {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__nav a, .site-footer__col a { color: var(--color-dark); opacity: 0.85; }
.site-footer__nav a:hover, .site-footer__col a:hover { color: var(--color-primary); opacity: 1; }
/* Bottom strip — copyright/legal, separated from top by a divider */
.site-footer__bottom, .site-footer__copy, .site-footer__credits, .site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-surface);
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Mobile breakpoint — derived from design.md (breakpoints.mobile) or named default 48rem.
   @media can't interpolate CSS custom properties, so the value lands here verbatim.
   DEFAULT presentation only — the drawer MECHANICS (toggle display, menu
   hide/show + positioning) live in the code-owned wiring block at the END of
   this file so per-brand Chrome CSS can restyle mobile chrome without being
   able to break the drawer. */
@media (max-width: 48rem) {
  .site-nav { gap: 0.75rem; }
  .site-nav__inner { gap: 0.75rem; }
  .site-nav__brand { max-inline-size: min(46vw, 12rem); }
  .site-nav__brand img { max-height: 2.5rem; }
  .site-nav__menu {
    padding: 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
  }
  .site-nav .site-nav__cta { display: none; }
}

/* Reveal-on-scroll primitive — paired with scripts.js IntersectionObserver */
[data-reveal] { opacity: 0; transform: translateY(0.75rem); transition: opacity 400ms ease, transform 400ms ease; }
[data-reveal][data-reveal-visible="true"] { opacity: 1; transform: none; }

/* Category-scrollspy active pill — paired with scripts.js initCategoryScrollspy().
   data-active is set ONLY by that runtime, on the pill whose menu category is
   currently in view (aria-current="true" is set alongside for assistive tech).
   COLOR-FREE (currentColor underline — no imposed hue, correct on any pill
   palette, dark or light) and DOUBLED-ATTRIBUTE (0,2,1) — a deliberate
   specificity floor, the same mechanism as the drawer wiring invariants at the
   end of this file. The original (0,1,1) single-attribute form was erased by
   every naturally-written brand pill rule (`.menu-nav a { text-decoration:
   none; ... }` in per-page style blocks, equal specificity + later source order —
   live: bodega-el-chispa + el-chuleton /carta, Owner-reported 2026-07-26): the
   active pill shipped visually identical to inactive. Brands RESTYLE the
   active state deliberately by matching the floor (e.g. `.menu-nav
   a[data-active]`, also (0,2,1) — later source order wins); they can no longer
   erase it by accident, because no rule written without [data-active] can
   reach (0,2,1) against it. Never !important. Invisible until JS engages a
   real horizontally-scrollable same-page anchor strip, so no-JS pages and
   strip-less sites are unaffected (the attribute never exists on them). */
a[data-active][data-active] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.125em; text-underline-offset: 0.25em; }

/* Image reveal primitive — JS-enhanced only; no-JS images remain visible. */
img[data-x4-img] { transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease; }
html.x4-js img[data-x4-img][data-x4-img-reveal="pending"] { background: var(--color-surface, transparent); }
html.x4-js img[data-x4-img][loading="lazy"][data-x4-img-reveal="pending"] { opacity: 0.01; filter: blur(10px); transform: scale(1.01); }
html.x4-js img[data-x4-img][loading="eager"][data-x4-img-reveal="pending"] { opacity: 0; }
html.x4-js img[data-x4-img][data-x4-img-reveal="loaded"] { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  img[data-x4-img] { transition: none; }
  html.x4-js img[data-x4-img][data-x4-img-reveal="pending"] { opacity: 1; filter: none; transform: none; }
  html.x4-js img[data-x4-img][loading="eager"][data-x4-img-reveal="pending"] { opacity: 1; }
}

/* Language-toggle visual state — paired with scripts.js applyLang(). */
/* Only actual toggle controls are styled; <html data-lang> is document state. */
button[data-lang], a[data-lang][href], [role="button"][data-lang], [data-lang-toggle][data-lang] { opacity: 0.55; transition: opacity 150ms ease; cursor: pointer; }
button[data-lang][aria-pressed="true"], a[data-lang][href][aria-pressed="true"], [role="button"][data-lang][aria-pressed="true"], [data-lang-toggle][data-lang][aria-pressed="true"] { opacity: 1; }
button[data-lang]:hover, a[data-lang][href]:hover, [role="button"][data-lang]:hover, [data-lang-toggle][data-lang]:hover { opacity: 1; }

/* Per-brand chrome CSS — authored in design.md "## Chrome CSS" (scope-validated:
   .site-nav* / .site-footer* only, no !important). Overrides the defaults above. */
.site-nav {
  background: #356561;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 2rem;
}

.site-nav__brand {
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  color: #FAF5EE;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: block;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__menu a {
  color: #FAF5EE;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.site-nav__menu a:hover {
  opacity: 1;
}

.site-nav__cta {
  background: #C9973A;
  color: #2A1A1C;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.site-nav__cta:hover {
  background: #E8B97A;
}

.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: #FAF5EE;
  border-radius: 2px;
  transition: transform 0.25s;
  content: '';
  position: relative;
}

.site-nav__toggle-icon::before {
  top: -7px;
}

.site-nav__toggle-icon::after {
  top: 5px;
}

@media (max-width: 768px) {
  .site-nav {
    padding: 0 1.25rem;
    height: 72px;
  }

  .site-nav__toggle {
    display: flex;
  }

  .site-nav__cta {
    display: none;
  }

  .site-nav__menu {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #356561;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem 1.5rem;
    gap: 1.25rem;
    display: none;
    box-shadow: 0 8px 24px rgba(42,26,28,0.25);
  }

  .site-nav__menu[data-open="true"] {
    display: flex;
  }

  .site-nav__menu a {
    font-size: 1.05rem;
    opacity: 1;
  }
}

.site-footer {
  background: #2A1A1C;
  color: #FAF5EE;
  padding: 3rem 2rem 1.5rem;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2.5rem;
  align-items: start;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(250,245,238,0.12);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer__nav a {
  color: #a08a8e;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.site-footer__nav a:hover {
  color: #FAF5EE;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__bottom {
  max-width: 1200px;
  margin: 1.25rem auto 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #6a5558;
}

@media (max-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-bottom: 1.5rem;
  }

  .site-footer {
    padding: 2rem 1.25rem 1rem;
  }
}

/* Derived chrome wiring — base link/toggle colors re-derived against the
   model-authored chrome surfaces (generation-time legibility; code owns the
   wiring pair, the model owns the surfaces + may author colors to opt out). */
.site-nav__menu.site-nav__menu a[aria-current="page"] { color: var(--color-light); }
.site-nav__toggle { color: var(--color-light); }
[data-lang][data-lang] { color: var(--color-light); }

/* CHROME TEXT LEGIBILITY FLOOR — system-owned chrome text (footer bottom bar,
   copyright/credits, legal links, hours rows, footer link hovers) floored to
   4.5:1 EFFECTIVE contrast (text alpha × ancestor opacity over the effective
   footer surface). Chrome floor ≠ design rewriter: authored hue is preserved
   (alpha/lightness raised minimally), passing authored pairs are byte-untouched,
   and page-body design text is NEVER floored — chrome is a compliance/wayfinding
   surface, not a design canvas. */
[class*="site-footer__bottom"][class*="site-footer__bottom"] { color: #b0a5a6; }
[class*="site-footer__tagline"][class*="site-footer__tagline"] { color: var(--color-light); }

/* Code-owned chrome WIRING invariants — function + a11y, never layout judgment.
   Appended LAST so the mobile drawer mechanics, toggle tap target, and focus
   ring always win the cascade. Doubled class selectors are a deliberate
   specificity floor: naturally-written brand rules (e.g. ".site-nav
   .site-nav__menu { display: flex; }") must not be able to accidentally beat
   the drawer mechanics, and Chrome CSS may not use !important. */
.site-nav__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* BRAND NON-COLLAPSE invariant — the brand mark is the header element that
   never disappears (Bar Tomàs, 2026-07-02: an authored
   `.site-nav__brand { max-inline-size: min(46vw,12rem); flex-shrink:1; min-width:0 }`
   on a crowded nav — brand + 4 links + ES/EN + CTA — squeezed the brand to
   ~0 visible pixels despite correct markup). Same class as the drawer
   mechanics: a true legibility/visibility floor, no layout judgment. The
   LINKS side yields when the nav is crowded; the brand does not.
   Doubled class = specificity floor (0,2,0) so an authored single-class
   `.site-nav__brand { … }` (0,1,0) rule cannot shrink the brand below
   legibility. Long business names degrade gracefully: the brand keeps a
   readable min-inline-size and never clips to zero; the wordmark truncates
   with an ellipsis (its own last-resort) rather than the whole brand
   collapsing. This is NOT a blunt flex-shrink:0 — the brand may still shrink
   toward its floor, it just cannot cross it. */
.site-nav__brand.site-nav__brand {
  flex-shrink: 0;
  min-inline-size: min(7.5rem, 60vw);
  max-inline-size: none;
}
.site-nav__menu.site-nav__menu {
  flex-shrink: 1;
  min-width: 0;
}
.site-nav__brand.site-nav__brand:not(:has(img)),
.site-nav__brand.site-nav__brand > .site-nav__wordmark {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 48rem) {
  .site-nav__toggle.site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
  .site-nav__brand.site-nav__brand { min-inline-size: min(7.5rem, 70vw); max-inline-size: 70vw; }
  .site-nav__menu.site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    z-index: 1000;
    display: none;
    flex-shrink: 1;
    min-width: 0;
  }
  .site-nav__menu.site-nav__menu[data-open="true"] { display: flex; }
  .site-nav__menu.site-nav__menu[data-open="true"] { transform: none; }
  .site-nav__menu.site-nav__menu[data-open="true"] a { display: block; }
  .site-footer.site-footer { padding-top: 2rem; padding-bottom: 1.5rem; }
  [class*="site-footer__inner"][class*="site-footer__inner"], [class*="site-footer__top"][class*="site-footer__top"], [class*="site-footer__main"][class*="site-footer__main"] { gap: 1.5rem; margin-bottom: 1.25rem; }
  [class*="site-footer__bottom"][class*="site-footer__bottom"] { margin-top: 1.25rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  [class*="site-footer__hours"][class*="site-footer__hours"] { grid-column: 1 / -1; }
}