/* Hallmark · genre: editorial · macrostructure: Quote-Led · theme: Garden · enrichment: real photos + hand-built SVG emblem (árbol + cubiertos del rótulo) · nav: N9 · footer: Ft6 · tone: warm, local, editorial · anchor hue: leaf-green 140
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 * Inferido (sin respuesta del cliente): audiencia = vecinos y visitantes de Pilar · uso = llamar / ver carta / llegar · tono = editorial cálido
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-md); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}
img, iframe { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  color: var(--color-ink); line-height: var(--lh-tight);
  overflow-wrap: anywhere; min-width: 0; margin: 0; text-wrap: balance;
}
h2 { font-size: var(--text-display-s); }
h3 { font-size: var(--text-lg); }
p { margin: 0; }
a { color: inherit; }
code { font-size: 0.9em; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.visually-hidden { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: var(--space-md); top: -3rem; background: var(--color-ink); color: var(--color-accent-ink); padding: var(--space-xs) var(--space-md); z-index: var(--z-sticky-nav); }
.skip:focus-visible { top: var(--space-md); }

.tbc { background: var(--tint-clay); color: var(--color-ink); padding: 0 0.3em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.demo-band { text-align: center; font-size: var(--text-xs); padding: var(--space-xs) var(--page-gutter); background: var(--color-paper-2); border-bottom: var(--rule) solid var(--color-rule); }

/* Emblema dibujado (inspirado en el rótulo) */
.em-wood { fill: none; stroke: var(--color-wood); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.em-leaf circle { fill: var(--tint-moss); stroke: var(--color-accent); stroke-width: 2.4; }
.em-tool { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* N9 · nav */
.nav-edge { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); max-width: var(--page-max); margin: 0 auto; padding: var(--space-md) var(--page-gutter); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); white-space: nowrap; }
.wordmark__mark { width: 2.25rem; height: 2.25rem; }
.wordmark span { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; }
.wordmark small { display: none; color: var(--color-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 0.68rem; margin-left: var(--space-2xs); }

/* Botones · estados */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 2.75rem; padding: 0 var(--space-lg); border-radius: var(--radius-pill);
  font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: var(--rule) solid var(--color-ink);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.btn--solid { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--outline { background: transparent; color: var(--color-ink); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); padding: 0 var(--space-md); }
.btn__icon { width: 1.1rem; height: 1.1rem; display: inline-block; color: var(--color-accent); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--outline:hover, .btn--ghost:hover { background: var(--color-paper-3); }
  .btn--solid:hover { background: var(--color-ink); border-color: var(--color-ink); }
}
.btn:active { transform: translateY(0); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

.link { color: var(--color-ink); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.25em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .link:hover { text-decoration-color: var(--color-accent); } }

/* Hero · Quote-Led */
.quote-hero { max-width: var(--page-max); margin: 0 auto; padding: var(--space-lg) var(--page-gutter) var(--space-2xl); display: grid; gap: var(--space-xl); }
.quote-hero__quote { margin: 0; }
.quote-hero__quote p { font-family: var(--font-display); font-size: var(--text-display-s); line-height: var(--lh-snug); color: var(--color-ink); max-width: 21ch; text-wrap: balance; overflow-wrap: anywhere; }
.attribution { margin-top: var(--space-md); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.quote-hero__lede { margin-top: var(--space-lg); max-width: 42ch; font-size: var(--text-md); line-height: 1.5; }
.quote-hero__actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.rating { margin-top: var(--space-lg); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.rating strong { color: var(--color-accent); font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.quote-hero__media { margin: 0; position: relative; min-width: 0; }
.quote-hero__sign { width: 100%; height: auto; aspect-ratio: 1200 / 506; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.quote-hero__plate { display: none; }
.quote-hero__media figcaption { max-width: 34ch; }
figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }

/* Secciones */
.section { max-width: var(--page-max); margin: 0 auto; padding: var(--space-2xl) var(--page-gutter); }
.section__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); max-width: var(--measure); }

/* Carta */
.carta { border-top: var(--rule) solid var(--color-rule); }
.carta__sub { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.carta__sub .muted { font-family: var(--font-body); font-size: var(--text-sm); margin-left: var(--space-xs); }
.picks { list-style: none; margin: 0 0 var(--space-2xl); padding: 0; display: grid; gap: var(--space-md); }
.pick { padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); display: grid; gap: var(--space-xs); align-content: start; }
.pick__dish { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); line-height: var(--lh-tight); }
.pick__desc { color: var(--color-ink-2); }
.pick__quote { margin: var(--space-xs) 0 0; padding-left: var(--space-sm); border-left: 2px solid var(--color-accent); }
.pick__quote p { color: var(--color-ink); }
.pick__by { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }

.carta__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm) var(--space-md); border-top: var(--rule) solid var(--color-rule-2); padding-top: var(--space-lg); margin-bottom: var(--space-md); }
.carta__bar .carta__sub { margin: 0; }
.carta__list { columns: 1; column-gap: var(--space-2xl); }
.carta-sec { break-inside: avoid; margin-bottom: var(--space-xl); }
.carta-sec h3 { font-size: var(--text-md); color: var(--color-accent); margin-bottom: var(--space-xs); }
.dishes { list-style: none; margin: 0; padding: 0; }
.dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule) solid var(--color-rule); }
.dish__name { color: var(--color-ink); }
.dish__price { font-variant-numeric: tabular-nums; color: var(--color-ink); }
.dish__desc, .dish__src { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.dish__src { display: none; }
.carta__list.show-src .dish__src { display: block; animation: fade var(--dur-short) var(--ease-out); }
.carta__foot { margin-top: var(--space-lg); max-width: var(--measure); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Galería */
.gallery { display: grid; gap: var(--space-lg); }
.gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.gallery__grid li { min-width: 0; }
.gallery__grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-2); }

/* Voces */
.voices { max-width: none; background: var(--tint-moss); padding-block: var(--space-3xl); display: grid; gap: var(--space-xl); }
.voices > * { width: min(100%, var(--page-max)); margin-inline: auto; }
.voice { margin: 0; }
.voice blockquote { margin: 0; }
.voice p { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; color: var(--color-ink); max-width: 38ch; }
.voice--lead p { font-size: var(--text-display-s); line-height: var(--lh-snug); max-width: 24ch; }
.voice figcaption { margin-top: var(--space-sm); }
.voices__side { display: grid; gap: var(--space-xl); align-content: start; }
.voices__side .voice { padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-rule-2); }
.voices__mark { width: 4rem; height: 4rem; }

/* Visítanos */
.visit { display: grid; gap: var(--space-xl); }
.visit__text { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
address { font-style: normal; font-size: var(--text-lg); color: var(--color-ink); line-height: 1.4; }
.visit__aside { max-width: 40ch; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips li { border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); white-space: nowrap; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--space-sm); }
.hours caption { text-align: left; font-size: var(--text-sm); padding-bottom: var(--space-xs); }
.hours th, .hours td { text-align: left; padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--rule) solid var(--color-rule); font-weight: 400; font-size: var(--text-sm); }
.hours thead th { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.hours tbody th { color: var(--color-ink); font-weight: 600; }
.hours td { white-space: nowrap; }
.hours sup { color: var(--color-accent-2); }
.visit__map { margin: 0; min-width: 0; }
.visit__map iframe { width: 100%; aspect-ratio: 4 / 5; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }

/* Reservas */
.reserve { background: var(--tint-clay); padding: var(--space-3xl) var(--page-gutter); }
.reserve__inner { max-width: var(--page-max); margin: 0 auto; display: grid; gap: var(--space-md); justify-items: start; }
.phone { font-family: var(--font-display); font-size: var(--text-display); color: var(--color-ink); text-decoration: none; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .phone:hover { color: var(--color-accent); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Ft6 · cierre en forma de carta */
.foot-letter { max-width: var(--page-max); margin: 0 auto; padding: var(--space-2xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-lg); }
.foot-letter__mark { width: 5rem; height: 5rem; }
.foot-letter__close { font-family: var(--font-display); font-size: var(--text-display-s); line-height: var(--lh-snug); color: var(--color-ink); }
.foot-letter__sign { color: var(--color-accent); font-size: var(--text-lg); }
.foot-letter__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-lg); }
.foot-letter__ps { margin-top: var(--space-lg); max-width: var(--measure); }

/* C4 · barra fija (solo móvil) */
.dock { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky-nav); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-xs); padding: var(--space-xs) var(--space-sm) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: var(--rule) solid var(--color-rule); }
.dock .btn { padding: 0 var(--space-xs); }

/* Entrada orquestada, una vez */
.quote-hero__text > *, .quote-hero__media { animation: reveal var(--dur-long) var(--ease-out) both; }
.quote-hero__text > :nth-child(2) { animation-delay: 60ms; }
.quote-hero__text > :nth-child(n+3) { animation-delay: 120ms; }
.quote-hero__media { animation-delay: 180ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 26rem) { .wordmark small { display: inline; } }
@media (min-width: 40rem) {
  .picks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
  .carta__list { columns: 2; }
}
@media (min-width: 60rem) {
  body { padding-bottom: 0; }
  .dock { display: none; }
  .quote-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; padding-top: var(--space-xl); column-gap: var(--space-2xl); }
  .quote-hero__media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-lg); align-items: start; }
  .quote-hero__sign { grid-column: 1 / -1; aspect-ratio: 1200 / 640; }
  .quote-hero__plate { display: block; width: calc(100% + var(--space-xl)); margin: calc(var(--space-2xl) * -1) 0 0 calc(var(--space-xl) * -1); height: auto; aspect-ratio: 400 / 260; object-fit: cover; border-radius: var(--radius-card); border: 6px solid var(--color-paper); box-shadow: var(--shadow-card); position: relative; }
  .quote-hero__media figcaption { margin-top: var(--space-md); }
  .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carta__list { columns: 3; }
  .voices { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); width: auto; padding-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter))); }
  .voices > * { width: auto; margin: 0; }
  .visit { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-2xl); }
  .visit__map iframe { aspect-ratio: auto; height: 100%; min-height: 32rem; }
  .reserve__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-2xl); }
  .reserve__inner > * { grid-column: 1; }
  .reserve__inner .phone { grid-column: 2; grid-row: 1 / span 2; }
  .reserve__inner .actions { grid-column: 2; }
  .reserve__inner > .small { grid-column: 2; }
  .foot-letter { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xl); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .quote-hero__text > *, .quote-hero__media { animation-name: fade; animation-delay: 0ms !important; }
}

/* v3 · carta real */
.pick__price { font-variant-numeric: tabular-nums; color: var(--color-accent); font-weight: 600; }
.dish__price { white-space: nowrap; }
.dish__price sup { color: var(--color-accent-2); margin-left: 1px; }
.dish__price--ask { color: var(--color-muted); font-style: italic; }
.carta-sec__sub, .carta-sec__note { font-size: var(--text-sm); color: var(--color-muted); }
.carta-sec__sub { margin: calc(var(--space-xs) * -1) 0 var(--space-xs); }
.carta-sec__note { margin-top: var(--space-xs); }
.carta__bar .link { font-size: var(--text-sm); }
.carta__list.is-collapsed .carta-sec:nth-child(n+3) { display: none; }
.carta__more { margin-top: var(--space-sm); }
@media (min-width: 60rem) { .carta__list.is-collapsed .carta-sec:nth-child(n+3) { display: block; } .carta__more { display: none; } }
.voices__score { display: grid; gap: var(--space-xs); justify-items: start; }
.voices__score p { color: var(--color-ink); }
.voices__score strong { font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-s); color: var(--color-accent); line-height: 1; }