/* Reserva con las métricas de STIX Two Text: Times New Roman ensanchada un 4,1 % (medido en Chrome) para que el texto no se reacomode cuando llega la fuente web. */
@font-face { font-family: "STIX Two Text fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 104.1%; }
/* Plantilla restaurante · Vistrina.
   Dirección "fotografías a tamaños desiguales" (TasteSkill): la pared del comedor de una casa, con las
   fotos colgadas a distintas alturas, y la carta tipeada entre ellas. Una sola familia (STIX Two Text),
   paleta tabaco y oliva, sin líneas finas, sin sombras, sin degradados. Hoja propia: no depende del
   CSS de negocio-local. Los valores de :root pueden pisarse desde direcciones/<nombre>/estilo.css o
   con "colores" en site.json. */

/* ---------- tokens ---------- */
:root {
  --bg: #472913;
  --surface: #55321a;
  --ink: #e4e0cf;
  --muted: #c4b39b;
  --accent: #525e1b;
  --accent-strong: #3e4713;
  --accent-ink: #e4e0cf;
  --field-1: #c79a3e;
  --field-1-ink: #2b170a;
  --field-2: #525e1b;
  --field-2-ink: #e4e0cf;
  --paper: #e4e0cf;
  --paper-ink: #2b170a;

  --font-text: "STIX Two Text", "STIX Two Text fallback", "Times New Roman", Times, Georgia, serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* 13–14px  leyendas, legales */
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);      /* 18–21px  texto corrido, filas */
  --step-statement: clamp(1.5rem, 1.05rem + 1.6vw, 2.125rem);    /* 24–34px  párrafos de declaración */
  --step-display: clamp(2.25rem, 2rem + 0.4vw, 2.5rem);          /* 36–40px  titular del hero, menú del pie */
  --step-head: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem);           /* 40–68px  títulos de sección */

  --margin: clamp(1.25rem, 5vw, 5rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --section: clamp(4rem, 8.5vw, 7.75rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; overflow-x: clip; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, address { margin: 0; font-style: normal; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--field-1); color: var(--field-1-ink); }
:focus-visible { outline: 3px solid var(--field-1); outline-offset: 3px; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; hyphens: none; }
strong, b { font-weight: 600; }
.nums { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--step-small); line-height: 1.45; }
.visualmente-oculto, .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--margin); top: -4rem; z-index: 100; background: var(--field-1); color: var(--field-1-ink); padding: 0.6rem 1rem; text-decoration: none; }
.saltar:focus { top: 0.5rem; }
.icono { width: 1.1em; height: 1.1em; flex: none; }

/* Fotos: tratamiento único para la página oscura, esquinas rectas, sin marcos */
.foto { position: relative; overflow: hidden; background: var(--surface); }
.foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) contrast(1.04); }
.foto figcaption, .leyenda { font-size: var(--step-small); line-height: 1.45; color: var(--muted); margin-top: 0.6rem; max-width: 34ch; }

/* ---------- rejilla y márgenes ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- controles ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.3rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; white-space: nowrap; font-weight: 600; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.boton:active { transform: scale(0.97); }
.boton--secundario { background: var(--ink); color: var(--paper-ink); }
.boton--chico { min-height: 2.75rem; padding: 0 1rem; }
.enlace { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: var(--muted); transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background-color: var(--accent-strong); }
  .boton--secundario:hover { background-color: var(--field-1); color: var(--field-1-ink); }
  .enlace:hover { text-decoration-color: currentColor; }
}
.campo { width: 100%; min-height: 3rem; padding: 0.7rem 1rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); color: var(--ink); }
.campo::placeholder { color: var(--muted); opacity: 1; }

/* ---------- cabecera: marca, tres enlaces, una acción ---------- */
.top { display: flex; align-items: center; gap: var(--gutter); min-height: 4.5rem; }
.top__marca { font-weight: 600; text-decoration: none; margin-right: auto; white-space: nowrap; }
.top__enlaces { display: none; gap: clamp(1rem, 2.5vw, 2.5rem); margin-inline: auto; }
.top__enlaces a { text-decoration: none; }
@media (min-width: 48em) {
  .top__enlaces { display: flex; }
}
@media (min-width: 64em) {
  .top { position: relative; }
  .top__enlaces { position: absolute; left: 50%; transform: translateX(-50%); }
}

/* ---------- hero: tres fotos colgadas de un mismo riel ---------- */
.hero { padding-top: max(1rem, calc(18vh - 4.5rem)); padding-bottom: calc(var(--section) * 0.7); }
.hero__riel { align-items: start; }
.hero__izq { grid-column: 1 / 4; }
.hero__cuadrada { width: 66%; aspect-ratio: 1 / 1; }
.hero__alta { grid-column: 4 / 10; aspect-ratio: 3 / 4; }
.hero__apaisada { grid-column: 10 / 13; aspect-ratio: 16 / 10; margin-right: calc(-1 * var(--margin) - 6vw); }
.hero__alta figcaption, .hero__apaisada figcaption { position: absolute; left: 0; top: 100%; }
.hero__texto { margin-top: 2rem; }
.hero__texto h1 { font-size: var(--step-display); line-height: 1.1; letter-spacing: -0.026em; }
.hero__texto p { margin-top: 1rem; font-size: 1rem; max-width: 30ch; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
@media (max-width: 63.99em) {
  .hero__izq { grid-column: 1 / 6; }
  .hero__cuadrada { width: 60%; }
  .hero__alta { grid-column: 6 / 11; }
  .hero__apaisada { grid-column: 11 / 13; }
}
@media (max-width: 47.99em) {
  .hero { padding-top: 1.5rem; }
  .hero__riel { display: flex; flex-direction: column; }
  .hero__alta { order: 1; width: 72%; }
  .hero__izq { order: 2; }
  .hero__cuadrada { width: 38%; margin: -40px 0 0 auto; position: relative; }
  .hero__alta figcaption { position: static; }
  .hero__apaisada { order: 3; width: auto; margin: 2.5rem calc(-1 * var(--margin)) 0; }
  .hero__apaisada figcaption { position: static; padding-left: var(--margin); }
  .hero__texto { margin-top: 1.75rem; }
  .hero__texto h1 { font-size: 8vw; }
  .hero__acciones .boton { width: 100%; }
}

/* ---------- intro: párrafo a la derecha, una foto sola ---------- */
.intro { padding-block: var(--section); }
.intro__p { grid-column: 7 / 13; font-size: var(--step-statement); line-height: 1.25; text-indent: 3em; max-width: 36ch; }
.intro__mas { grid-column: 7 / 13; grid-row: 2; margin-top: 2rem; max-width: 52ch; }
.intro__abajo { display: contents; }
.intro__fig { grid-column: 1 / 4; grid-row: 1; align-self: end; aspect-ratio: 1 / 1; margin-bottom: calc(-0.5 * 20vw); }
.intro__nota { grid-column: 1 / 4; grid-row: 2; margin-top: calc(0.5 * 20vw + 3rem); font-size: var(--step-small); line-height: 1.5; max-width: 15rem; }
@media (max-width: 63.99em) {
  .intro__p, .intro__mas { grid-column: 5 / 13; }
}
@media (max-width: 47.99em) {
  .intro { padding-block: 4.5rem; }
  .intro .grid { display: block; }
  .intro__p { text-indent: 0; max-width: none; }
  .intro__mas { margin-top: 1.5rem; }
  .intro__abajo { display: flex; align-items: flex-end; gap: 1rem; margin-top: 2.5rem; }
  .intro__nota { margin: 0; flex: 1 1 40%; min-width: 0; }
  .intro__nota .hoy__lista li { flex-direction: column; gap: 0; }
  .intro__nota .hoy__horas { text-align: left; }
  .intro__fig { flex: 0 0 56%; aspect-ratio: 4 / 5; margin: 0; }
}

/* ---------- horario de hoy (nota y tabla) ---------- */
.hoy__lista li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.15rem; }
.hoy__horas { text-align: right; font-variant-numeric: tabular-nums; }
.hoy__lista .hoy--actual { color: var(--field-1); }
.hoy__chip { display: inline-block; margin-right: 0.4rem; font-weight: 600; }
.hoy__estado { margin-top: 0.6rem; font-weight: 600; }
.hoy__estado:empty { display: none; }
.hoy__estado--abierto { color: var(--field-1); }
.hoy__estado--cerrado { color: var(--muted); }
.hoy--tabla { font-size: var(--step-body); }
.hoy--tabla li { padding-block: 0.6rem; }
.hoy--tabla li + li { margin-top: 0.25rem; }

/* ---------- lo que más piden: la tabla empujada a la derecha, la cosa viva ---------- */
.pedir { padding-block: var(--section); }
.pedir h2 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.026em; text-indent: 3vw; }
.pedir__palabra { grid-column: 6 / 7; margin-top: 4rem; font-size: var(--step-small); color: var(--muted); }
.pedir__tabla { grid-column: 7 / 13; margin-top: 4rem; }
.pedir__fig { grid-column: 1 / 6; align-self: start; margin-top: 4rem; aspect-ratio: 4 / 5; }
.fila { display: grid; grid-template-columns: 22% minmax(0, 1fr) auto; column-gap: var(--gutter); align-items: baseline; padding-block: 0.4rem; }
.fila + .fila { margin-top: 0.6rem; }
.fila--grupo { margin-top: 2.75rem; }
.fila__grupo { color: var(--muted); }
.fila__plato h3 { font-size: var(--step-body); font-weight: 600; }
.fila__plato p { font-size: 1rem; line-height: 1.4; max-width: 38ch; }
.fila__plato .fila__etiquetas { font-size: 1rem; }
.fila__precio { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila__precio--agotado { color: var(--muted); text-decoration: line-through; }
.fila__agotado { display: block; color: var(--muted); font-size: 1rem; }
.fila__acciones { grid-column: 2 / 4; display: none; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.js .fila__acciones { display: flex; }
.sumar { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 1rem; background: var(--surface); color: var(--ink); font-weight: 600; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.sumar:active { transform: scale(0.96); }
.sumar[aria-pressed="true"], .sumar--en { background: var(--accent); color: var(--accent-ink); }
.quitar { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; color: var(--muted); }
.quitar[hidden] { display: none; }
.fila__cantidad { font-variant-numeric: tabular-nums; font-weight: 600; }
.fila__cantidad[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sumar:hover { background: var(--accent); color: var(--accent-ink); }
  .quitar:hover { color: var(--ink); }
}
.pedido { grid-column: 7 / 13; margin-top: 3.5rem; background: var(--surface); padding: 1.5rem; }
.pedido__titulo { font-weight: 600; }
.pedido__lista li { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; padding-block: 0.2rem; }
.pedido__total { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pedido__total:empty, .pedido__lista:empty { display: none; }
.pedido__vacio { max-width: 40ch; }
.pedido__vacio[hidden] { display: none; }
.pedido .boton { margin-top: 1.25rem; width: 100%; }
.pedido__nota { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }
.pedir__menu { grid-column: 7 / 13; margin-top: 2rem; }
@media (max-width: 63.99em) {
  .pedir__palabra { display: none; }
  .pedir__tabla, .pedido, .pedir__menu { grid-column: 1 / 13; margin-top: 3.5rem; }
  .pedir__fig { grid-column: 6 / 13; grid-row: 1; margin-top: 3.5rem; align-self: start; }
  .pedir__tabla { grid-row: 2; }
  .pedido { grid-row: 3; }
  .pedir__menu { grid-row: 4; }
}
@media (max-width: 47.99em) {
  .pedir { padding-block: 4.5rem; }
  .pedir h2 { font-size: 9.5vw; text-indent: 0; }
  .fila { grid-template-columns: minmax(0, 1fr) auto; }
  .fila__grupo { grid-column: 1 / 3; font-size: var(--step-small); }
  .fila__acciones { grid-column: 1 / 3; }
  .pedir__fig { grid-column: 6 / 13; }
}

/* ---------- el local y la cocina: pares escalonados en terreno vacío ---------- */
.muro { padding-block: var(--section); }
.muro__par { align-items: start; }
.muro__par + .muro__par { margin-top: 14vh; }
.muro__par--a .muro__f1 { grid-column: 1 / 5; aspect-ratio: 3 / 4; }
.muro__par--a .muro__f2 { grid-column: 7 / 13; aspect-ratio: 5 / 4; margin-top: 22vh; }
.muro__par--b .muro__f1 { grid-column: 6 / 12; aspect-ratio: 3 / 2; }
.muro__par--b .muro__f2 { grid-column: 2 / 5; aspect-ratio: 4 / 5; margin-top: 18vh; }
.muro__par--c .muro__f1 { grid-column: 9 / 13; aspect-ratio: 3 / 4; }
.muro__par--c .muro__f2 { grid-column: 1 / 7; aspect-ratio: 5 / 4; margin-top: 22vh; }
.muro__par--d .muro__f1 { grid-column: 2 / 8; aspect-ratio: 3 / 2; }
.muro__par--d .muro__f2 { grid-column: 9 / 12; aspect-ratio: 4 / 5; margin-top: 18vh; }
.muro .foto { overflow: visible; }
.muro .foto > div { overflow: hidden; background: var(--surface); aspect-ratio: inherit; }
.muro .foto img { aspect-ratio: inherit; }
@media (max-width: 47.99em) {
  .muro { padding-block: 4.5rem; }
  .muro__par { display: block; }
  .muro__par + .muro__par { margin-top: 4rem; }
  .muro .foto { margin-top: 4rem; }
  .muro__par:first-child .foto:first-child { margin-top: 0; }
  .muro__par--a .muro__f1, .muro__par--c .muro__f2 { width: 70%; aspect-ratio: 3 / 4; }
  .muro__par--a .muro__f2, .muro__par--c .muro__f1 { width: 84%; margin-left: auto; aspect-ratio: 4 / 5; }
  .muro__par--b .muro__f1, .muro__par--d .muro__f1 { width: 56%; aspect-ratio: 3 / 4; }
  .muro__par--b .muro__f2, .muro__par--d .muro__f2 { width: auto; margin-inline: calc(-1 * var(--margin)); aspect-ratio: 4 / 5; }
  .muro__par--b .muro__f2 figcaption, .muro__par--d .muro__f2 figcaption { padding-left: var(--margin); }
}

/* ---------- opinión: una cita sobre la foto ---------- */
.cita { position: relative; height: 90svh; min-height: 34rem; overflow: hidden; background: var(--surface); }
.cita__foto { position: absolute; inset: 0; }
.cita__foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) contrast(1.02); }
.cita__texto { position: absolute; left: 0; right: 0; bottom: 4rem; align-items: end; }
.cita blockquote { grid-column: 1 / 10; font-size: var(--step-statement); line-height: 1.15; max-width: 30ch; color: var(--paper); }
.cita__autor { grid-column: 10 / 13; text-align: right; font-size: 1rem; color: var(--paper); align-self: end; }
@media (max-width: 47.99em) {
  .cita { height: 80svh; min-height: 30rem; }
  .cita__texto { bottom: 2.5rem; display: block; }
  .cita blockquote { font-size: 1.5rem; }
  .cita__autor { text-align: left; margin-top: 1rem; }
}

/* ---------- delivery y reservas: el campo ocre, una sola vez ---------- */
.entrega { background: var(--field-1); color: var(--field-1-ink); padding-block: calc(var(--section) * 0.85); }
.entrega h2 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.026em; grid-column: 1 / 13; max-width: 16ch; }
.entrega__col { margin-top: 3.5rem; }
.entrega__col--a { grid-column: 1 / 6; }
.entrega__col--b { grid-column: 7 / 12; }
.entrega__col h3 { font-size: var(--step-statement); line-height: 1.2; margin-bottom: 0.75rem; }
.entrega__col p { max-width: 42ch; }
.entrega__col .boton { margin-top: 1.5rem; }
.entrega__apps a { text-decoration-color: currentColor; }
@media (max-width: 47.99em) {
  .entrega { padding-block: 4.5rem; }
  .entrega .grid { display: block; }
  .entrega h2 { font-size: 9.5vw; }
  .entrega__col { margin-top: 2.5rem; }
  .entrega__col .boton { width: 100%; }
}

/* ---------- horarios y cómo llegar: una frase, un retrato, dos enlaces ---------- */
.llegar { padding-block: var(--section) calc(var(--section) * 0.75); }
.llegar__fila { align-items: start; }
.llegar__frase { grid-column: 1 / 6; font-size: var(--step-statement); line-height: 1.15; max-width: 28ch; }
.llegar__medio { display: contents; }
.llegar__fig { grid-column: 8 / 10; aspect-ratio: 1 / 1; max-width: 10.5rem; }
.llegar__datos { grid-column: 10 / 13; }
.llegar__pregunta { font-weight: 600; }
.llegar__enlaces { margin-top: 1.25rem; display: grid; gap: 0.5rem; justify-items: start; }
.llegar__linea { margin-top: 1.25rem; font-size: var(--step-small); color: var(--muted); }
.llegar__abajo { margin-top: 6rem; align-items: start; }
.llegar__horarios { grid-column: 1 / 6; }
.llegar__horarios h3 { font-size: var(--step-body); font-weight: 600; margin-bottom: 1rem; }
.mapa { grid-column: 7 / 13; aspect-ratio: 4 / 3; background: var(--surface); }
.mapa iframe { width: 100%; height: 100%; border: 0; filter: brightness(0.9) contrast(1.04); }
@media (max-width: 63.99em) {
  .llegar__frase { grid-column: 1 / 8; }
  .llegar__fig { grid-column: 8 / 10; }
  .llegar__datos { grid-column: 10 / 13; }
}
@media (max-width: 47.99em) {
  .llegar { padding-block: 4.5rem; }
  .llegar__fila { display: block; }
  .llegar__frase { max-width: none; }
  .llegar__medio { display: flex; gap: 1rem; margin-top: 2rem; align-items: flex-start; }
  .llegar__fig { flex: 0 0 6rem; }
  .llegar__datos { flex: 1; }
  .llegar__abajo { display: block; margin-top: 3.5rem; }
  .mapa { margin-top: 2.5rem; }
}

/* ---------- pie: mitad foto, mitad menú ---------- */
.pie { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.pie__foto { overflow: hidden; background: var(--surface); }
.pie__foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) contrast(1.04); }
.pie__menu { background: var(--surface); padding: 5rem calc(var(--margin) * 0.8) 2rem clamp(1.5rem, 6vw, 6rem); display: flex; flex-direction: column; }
.pie__marca { font-weight: 600; text-decoration: none; }
.pie__lista { margin-top: 3rem; }
.pie__lista li + li { margin-top: 1.75rem; }
.pie__lista a { display: inline-block; font-size: var(--step-display); line-height: 1; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; transition: transform var(--t-ui) var(--ease-out), color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .pie__lista:hover a { color: var(--muted); }
  .pie__lista a:hover { color: var(--ink); transform: translateX(12px); }
}
.pie__bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; font-size: 1rem; line-height: 1.5; }
.pie__bloques a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
.pie__bloques h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
.pie__texto { margin-top: 1rem; }
.pie__legal { margin-top: auto; padding-top: 3rem; font-size: 1rem; line-height: 1.5; }
.pie__legal a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
.pie__demo { font-weight: 600; }
.pie__creditos { margin-top: 0.5rem; max-width: 70ch; }
@media (max-width: 47.99em) {
  .pie { display: block; min-height: 0; }
  .pie__foto { height: 50svh; }
  .pie__menu { padding: 3rem var(--margin) 1.5rem; }
  .pie__lista a { font-size: 8vw; }
  .pie__lista li + li { margin-top: 1.25rem; }
  .pie__bloques { grid-template-columns: 1fr; margin-top: 3rem; }
}

/* ---------- menu.html: la carta tipeada ---------- */
.pagina-menu { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
.carta { padding-block: 2rem calc(var(--section) * 0.5); }
.carta__col { max-width: 42rem; }
@media (min-width: 64em) {
  .carta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .carta__col--cabecera { grid-column: 1 / 5; grid-row: 1; max-width: none; }
  .carta-nav { grid-column: 1 / 5; grid-row: 2; align-self: start; position: sticky; top: 2rem; margin-top: 2rem; }
  .carta-nav__lista { flex-direction: column; gap: 0.25rem; overflow: visible; padding: 0; }
  .carta-nav__lista a { font-size: var(--step-body); font-weight: 600; line-height: 1.3; min-height: 0; }
  .carta__col--platos { grid-column: 6 / 13; grid-row: 1 / 3; max-width: none; }
  .categoria:first-child { padding-top: 0.5rem; }
  .platos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 0.5rem; }
  .plato + .plato { margin-top: 0; }
  .platos .plato--con-foto { grid-template-columns: minmax(0, 1fr) 9.5rem; }
  .plato--con-foto .plato__foto { width: 9.5rem; height: 9.5rem; }
}
.carta h1 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.026em; }
.carta__intro { margin-top: 1.25rem; font-size: var(--step-statement); line-height: 1.25; max-width: 30ch; }
.carta__nota { margin-top: 1rem; color: var(--muted); }
.buscador { display: none; margin-top: 2rem; }
.js .buscador { display: block; }
.buscador__campo { display: flex; align-items: center; gap: 0.5rem; background: var(--surface); padding-inline: 1rem 0.35rem; }
.buscador__campo > .icono { color: var(--muted); }
.buscador__campo input { flex: 1; min-width: 0; border: 0; background: none; padding: 0.75rem 0; color: var(--ink); min-height: 3rem; font-size: max(1rem, var(--step-body)); }
.buscador__campo input::placeholder { color: var(--muted); opacity: 1; }
.buscador__campo input::-webkit-search-cancel-button { display: none; }
.buscador__campo input:focus { outline: none; }
.buscador__campo:focus-within { outline: 3px solid var(--field-1); outline-offset: 2px; }
.buscador__limpiar { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--ink); }
.buscador__limpiar[hidden] { display: none; }
.buscador__estado { margin-top: 0.6rem; color: var(--muted); }
.buscador__estado:empty { display: none; }
.carta-nav { position: sticky; top: 0; z-index: 40; background: var(--bg); margin-top: 1.5rem; }
.carta-nav__lista { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1rem, 3vw, 2rem); padding-block: 0.6rem; }
.carta-nav__lista::-webkit-scrollbar { display: none; }
.carta-nav__lista li { flex: none; }
.carta-nav__lista a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: transparent; color: var(--muted); white-space: nowrap; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
.carta-nav__lista a[aria-current="true"], .carta-nav__lista a:hover { color: var(--ink); text-decoration-color: currentColor; }
.carta-nav__lista li[hidden] { display: none; }
.categoria { padding-top: 3.5rem; scroll-margin-top: 4.5rem; }
.categoria h2 { font-size: var(--step-statement); line-height: 1.15; font-weight: 600; }
.categoria__cabecera p { color: var(--muted); margin-top: 0.35rem; }
.platos { margin-top: 1.5rem; }
.plato { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1rem; align-items: start; padding-block: 1rem; scroll-margin-top: 5rem; }
.plato + .plato { margin-top: 0.5rem; }
.plato--con-foto { grid-template-columns: minmax(0, 1fr) 6rem; }
.plato__cuerpo { min-width: 0; }
.plato__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.plato__nombre { font-size: var(--step-body); font-weight: 600; }
.plato__precio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plato__precio--agotado { color: var(--muted); text-decoration: line-through; }
.plato__desc { margin-top: 0.25rem; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.plato__etiquetas { margin-top: 0.3rem; color: var(--muted); font-size: 1rem; }
.plato__agotado { margin-top: 0.3rem; color: var(--field-1); font-size: 1rem; }
.plato__acciones { display: none; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.js .plato__acciones { display: flex; }
.plato__foto { width: 6rem; height: 6rem; object-fit: cover; grid-column: 2; grid-row: 1; filter: brightness(0.9) contrast(1.04); }
.plato--agotado .plato__foto { filter: grayscale(1) brightness(0.7); }
.plato:target { background: var(--surface); padding-inline: 1rem; margin-inline: -1rem; }
.plato[hidden], .categoria[hidden] { display: none; }
.carta__vacio { margin-top: 2rem; padding: 1.5rem; background: var(--surface); }
.carta__vacio[hidden] { display: none; }
.carta__pie { margin-top: 3rem; color: var(--muted); }
.pedido-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0.75rem var(--margin) calc(0.75rem + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.pedido-barra .boton { pointer-events: auto; width: 100%; max-width: 28rem; }
.pedido-barra__cuenta { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding-inline: 0.35em; background: var(--ink); color: var(--paper-ink); font-size: 0.9rem; font-weight: 600; }
.pedido-barra__cuenta[hidden] { display: none; }

/* ---------- qr.html ---------- */
.qr { padding-block: 2rem var(--section); }
.qr__col { max-width: 42rem; }
.qr h1 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.026em; }
.qr__intro p { margin-top: 1.25rem; }
.qr__aviso { background: var(--field-1); color: var(--field-1-ink); padding: 0.75rem 1rem; }
.qr__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.qr-tarjeta { margin-top: 3rem; background: var(--paper); color: var(--paper-ink); padding: 2.5rem 1.5rem; max-width: 27rem; text-align: center; }
.qr-tarjeta__nombre { font-weight: 600; font-size: var(--step-statement); line-height: 1.15; }
.qr-tarjeta__titulo { margin-top: 0.25rem; }
.qr-tarjeta__codigo { margin-top: 1.5rem; }
.qr-tarjeta__codigo svg { width: 100%; max-width: 18rem; height: auto; margin-inline: auto; background: #fff; }
.qr-tarjeta__url { margin-top: 1.25rem; font-size: var(--step-small); overflow-wrap: anywhere; }
.qr-tarjeta__pie { margin-top: 0.5rem; font-weight: 600; }
.qr__consejos { margin-top: 3.5rem; }
.qr__consejos h2 { font-size: var(--step-statement); line-height: 1.15; font-weight: 600; }
.qr__lista { margin-top: 1rem; display: grid; gap: 0.6rem; }
.qr__lista li { padding-left: 1.25rem; text-indent: -1.25rem; }
.qr__lista li::before { content: "·"; display: inline-block; width: 1.25rem; text-indent: 0; font-weight: 600; }

/* ---------- páginas legales ---------- */
.legal { padding-block: 2rem var(--section); }
.legal__col { max-width: 42rem; }
.legal h1 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.026em; margin-bottom: 1rem; }
.legal h2 { font-size: var(--step-statement); line-height: 1.15; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.5rem; }
.legal .boton { margin-top: 2.5rem; }
.nota { color: var(--muted); }

/* ---------- impresión del QR ---------- */
@media print {
  .top, .pie, .qr__intro, .qr__consejos, .saltar { display: none !important; }
  html, body { background: #fff; color: #000; }
  .qr { padding: 0; }
  .qr-tarjeta { margin: 0 auto; max-width: none; background: #fff; color: #000; }
}

/* ---------- movimiento (solo con JS, solo sin "reducir movimiento"; el contenido nunca queda oculto) ---------- */
.shutter { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: ad-rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* El recorte va en la imagen, no en la figura: un elemento recortado del todo nunca "entra" para IntersectionObserver. */
  .js .shutter[data-reveal] { opacity: 1; transform: none; }
  .js .shutter[data-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1000ms var(--ease-in-out), transform 1300ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in img { clip-path: inset(0); transform: none; }
  .js .wipe[data-reveal] { opacity: 1; transform: none; }
  .js .wipe[data-reveal] img { clip-path: inset(100% 0 0 0); transition: clip-path 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .wipe[data-reveal].is-in img { clip-path: inset(0); }
  @supports (animation-timeline: view()) {
    .cita__foto img { animation: ad-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes ad-rise { to { opacity: 1; transform: none; } }
@keyframes ad-drift { from { transform: translateY(-4%) scale(1.08); } to { transform: translateY(4%) scale(1.08); } }

/* Dirección restaurante-casa · paleta "Tobacco and olive" (TasteSkill, seed 619156212).
   Tabaco oscuro de fondo, tipo hueso, un bloque oliva (los botones) y una sola banda ocre (delivery y reservas). */
[data-direccion="restaurante-casa"] {
  --bg: #472913;
  --surface: #55321a;
  --ink: #e4e0cf;
  --muted: #c4b39b;
  --accent: #525e1b;
  --accent-strong: #3e4713;
  --accent-ink: #e4e0cf;
  --field-1: #c79a3e;
  --field-1-ink: #2b170a;
  --field-2: #525e1b;
  --field-2-ink: #e4e0cf;
}
/* Recortes de las fotos de esta página (object-position por foto) */
[data-direccion="restaurante-casa"] .hero__cuadrada img { object-position: 50% 45%; }
[data-direccion="restaurante-casa"] .llegar__fig img { object-position: 50% 42%; }
[data-direccion="restaurante-casa"] .cita__foto img { object-position: 50% 40%; }
[data-direccion="restaurante-casa"] .pie__foto img { object-position: 55% 50%; }