/* ===== Resto-Bar Gloria — estilos ===== */

@font-face {
  font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/im-fell-english-latin-400-italic.woff2) format('woff2');
}

/* Fuentes autoalojadas (Fraunces y Source Sans 3, licencia OFL). Solo latín + latín extendido. */
@font-face {
  font-family: 'Fraunces Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces Variable'; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces Variable'; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3 Variable'; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3 Variable'; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/fonts/source-sans-3-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --madera-900: #22150d;
  --madera-800: #2e1d12;
  --madera-700: #4a2f1c;
  --madera-500: #6b4428;
  --crema: #f5ecd9;
  --papel: #fbf6ea;
  --papel-2: #f0e4cb;
  --tinta: #2a1b11;
  --tinta-suave: #5a4636;
  --bordo: #7a1f2b;
  --bordo-oscuro: #5c1520;
  --verde: #1f4a3a;
  --verde-oscuro: #153529;
  --mostaza: #d9a441;
  --linea: #d8c7a6;

  --f-titulo: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --f-texto: 'Source Sans 3 Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radio: 10px;
  --sombra: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 30px -12px rgba(34, 21, 13, 0.35);
  --alto-barra: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: #d9b46a; /* el papel viejo de fondo es <Papel clase="fondo-papel" /> (fijo) */
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom));
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.1; margin: 0 0 0.5em; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 6vw, 2.8rem); letter-spacing: -0.01em; }
h2 em { font-style: italic; color: var(--bordo); font-weight: 600; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }

a { color: var(--bordo); text-underline-offset: 0.18em; }
a:hover { color: var(--bordo-oscuro); }

:focus-visible { outline: 3px solid var(--bordo); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .pie :focus-visible, .encabezado :focus-visible, .barra-movil :focus-visible {
  outline-color: var(--mostaza);
}
main:focus { outline: none; }

.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;
}

.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--mostaza); color: var(--madera-900); padding: 0.6rem 1rem;
  border-radius: var(--radio); font-weight: 700;
}
.saltar:focus { top: 1rem; }

.contenedor { width: min(100% - 2rem, 1120px); margin-inline: auto; }

.seccion { padding: clamp(3.5rem, 10vw, 6rem) 0; }

.antetitulo {
  font-family: var(--f-texto);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; font-weight: 700;
  color: var(--bordo); margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.antetitulo::before { content: ''; width: 28px; height: 2px; background: currentColor; }

/* ===== Botones ===== */
.icono { flex: none; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.3rem;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--f-texto); font-weight: 700; font-size: 1rem; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton--bordo { background: var(--bordo); color: #fff; box-shadow: 0 6px 16px -8px rgba(92, 21, 32, 0.8); }
.boton--bordo:hover { background: var(--bordo-oscuro); color: #fff; }
.boton--verde { background: var(--verde); color: #fff; }
.boton--verde:hover { background: var(--verde-oscuro); color: #fff; }
.boton--borde { border-color: var(--madera-800); color: var(--madera-800); background: transparent; }
.boton--borde:hover { background: var(--madera-800); color: var(--crema); }
.boton--claro { background: transparent; border-color: rgba(245, 236, 217, 0.5); color: var(--crema); }
.boton--claro:hover { background: rgba(245, 236, 217, 0.12); color: var(--crema); }
.boton--chico { min-height: 40px; padding: 0.45rem 0.95rem; font-size: 0.95rem; }
.boton--ancho { width: 100%; }

.enlace { font-weight: 600; }

/* ===== Encabezado ===== */
.encabezado {
  background: var(--madera-900);
  color: var(--crema);
  border-bottom: 3px solid var(--bordo);
}
.encabezado__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1.5rem; padding-block: 0.6rem;
}
.marca { display: inline-flex; align-items: baseline; gap: 0.4rem; color: var(--crema); text-decoration: none; }
.marca:hover { color: var(--crema); }
.marca__chico { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; opacity: 0.85; }
.marca__grande { font-family: var(--f-titulo); font-style: italic; font-weight: 700; font-size: 1.6rem; line-height: 1; }

.encabezado nav { order: 3; width: 100%; }
.nav {
  list-style: none; margin: 0 -1rem; padding: 0.15rem 1rem 0.35rem;
  display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.5rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.5rem), transparent);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: block; white-space: nowrap; padding: 0.45rem 0.75rem; border-radius: 999px;
  color: var(--crema); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.nav a:hover { background: rgba(245, 236, 217, 0.12); color: #fff; }
.encabezado__acciones { display: none; gap: 0.5rem; }

@media (min-width: 900px) {
  .encabezado { position: sticky; top: 0; z-index: 20; }
  html { scroll-padding-top: 5rem; }
  .encabezado nav { order: 0; width: auto; }
  .nav { margin: 0; padding: 0; mask-image: none; -webkit-mask-image: none; }
  .encabezado__acciones { display: flex; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: clamp(2.5rem, 8vw, 5.5rem) 1rem clamp(3rem, 9vw, 6rem);
  color: var(--tinta);
}
.hero__cartel {
  /* hoja de papel viejo apoyada sobre la madera */
  position: relative; isolation: isolate;
  max-width: 640px; margin-inline: auto;
  padding: clamp(2.25rem, 8vw, 3.75rem) clamp(1.5rem, 6vw, 3.5rem);
  text-align: center;
  color: #3a220e;
  filter: drop-shadow(0 18px 22px rgba(10, 4, 0, 0.55)) drop-shadow(0 2px 3px rgba(10, 4, 0, 0.4));
}
/* Hoja de papel viejo (componente <Papel />): va detrás del contenido */
.papel { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
/* Fondo de todo el sitio: una hoja de papel viejo fija detrás de las secciones */
.fondo-papel { position: fixed; pointer-events: none; }
.hero__papel {
  /* esquina superior derecha rota */
  clip-path: polygon(0 0, 84% 0, 86% 0.8%, 88.5% 0.3%, 91% 1.6%, 94% 1%, 96.5% 2.6%, 100% 3.4%, 100% 100%, 0 100%);
}
.hero__sobre {
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
  color: #5a3414; margin-bottom: 0.75rem;
}
.hero__titulo { margin: 0 0 1rem; }
.hero__resto {
  display: block; font-family: var(--f-texto); font-weight: 800; letter-spacing: 0.35em;
  text-transform: uppercase; font-size: clamp(0.9rem, 3.5vw, 1.15rem); color: var(--bordo);
  padding-left: 0.35em;
}
.hero__gloria {
  display: block; font-style: italic; font-weight: 800;
  font-size: clamp(4.2rem, 21vw, 8.5rem); line-height: 0.9; color: #2e1a0a;
  letter-spacing: -0.02em;
}
.hero__frase {
  /* misma letra antigua que usaba el libro de la intro */
  font-family: 'IM Fell English', Georgia, serif; font-style: italic;
  font-size: clamp(1.45rem, 6vw, 1.9rem); line-height: 1.3;
  max-width: 22ch; margin: 0 auto 1.6rem; padding: 0.7rem 0.5rem;
  border-top: 1px solid rgba(90, 52, 20, 0.45); border-bottom: 1px solid rgba(90, 52, 20, 0.45);
  color: #3a220e; text-wrap: balance;
}
.hero__botones { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 520px) {
  .hero__botones { flex-direction: row; justify-content: center; }
}
.hero__estado { justify-content: center; margin: 1.25rem 0 0; }

/* ===== Estado abierto/cerrado ===== */
.estado {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 0.98rem; color: var(--tinta-suave);
}
.estado__luz {
  width: 12px; height: 12px; border-radius: 50%; background: #9a8a74; flex: none;
  box-shadow: 0 0 0 3px rgba(154, 138, 116, 0.25);
}
.estado[data-abierto='true'] { color: var(--verde); }
.estado[data-abierto='true'] .estado__luz { background: #2f8a5c; box-shadow: 0 0 0 3px rgba(47, 138, 92, 0.25); }
.estado[data-pronto='true'] { color: #8a5a12; }
.estado[data-pronto='true'] .estado__luz { background: var(--mostaza); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.3); }
.estado[data-abierto='false'] { color: var(--bordo); }
.estado[data-abierto='false'] .estado__luz { background: var(--bordo); box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.2); }

/* ===== Historia ===== */
.historia__grilla { display: grid; gap: 1rem 3rem; }
.historia__texto { font-size: 1.1rem; max-width: 60ch; }
.historia__texto p:first-child::first-letter {
  font-family: var(--f-titulo); font-weight: 800; font-size: 3.4em; line-height: 0.8;
  float: left; margin: 0.08em 0.12em 0 0; color: var(--bordo);
}
@media (min-width: 860px) {
  .historia__grilla { grid-template-columns: 1fr 1.3fr; align-items: start; }
}
.sellos {
  list-style: none; padding: 0; margin-top: 2.5rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
.sellos li {
  background: rgba(255, 244, 214, 0.3); border: 1px dashed var(--madera-500); border-radius: var(--radio);
  padding: 1rem; text-align: center; display: grid; gap: 0.15rem;
}
.sellos strong { font-family: var(--f-titulo); font-size: 1.25rem; color: var(--madera-900); }
.sellos span { font-size: 0.92rem; color: var(--tinta-suave); }
@media (min-width: 760px) { .sellos { grid-template-columns: repeat(4, 1fr); } }

/* ===== Carta ===== */
.carta { position: relative; overflow: hidden; padding-bottom: 1rem; }
/* entre la carta y los horarios, poco espacio (la carta ya termina con aire) */
.carta + .seccion { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.aviso {
  border-left: 4px solid var(--bordo); background: rgba(255, 244, 214, 0.4);
  padding: 0.8rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; max-width: 70ch;
}
.aviso--ejemplo { border-left-color: var(--bordo); background: #fbefe9; }

/* Índice: medallones de cuero con ícono grabado */
.carta__indice ul {
  list-style: none; padding: 0; margin: 2rem 0 3rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 0.35rem;
}
@media (min-width: 600px) { .carta__indice ul { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .carta__indice ul { grid-template-columns: repeat(6, 1fr); } }
.carta__indice a {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center;
  color: #2e1a0a; text-decoration: none;
}
.medallon {
  flex: none; display: grid; place-items: center;
  width: clamp(72px, 24vw, 104px); aspect-ratio: 1; border-radius: 50%;
  color: #f3e6cc;
  background: radial-gradient(circle at 35% 30%, #4d3322, #22140a 72%);
  border: 1.5px solid rgba(243, 230, 204, 0.85);
  box-shadow: inset 0 0 0 4px #22140a, inset 0 0 0 5px rgba(243, 230, 204, 0.28), 0 6px 14px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.medallon { overflow: hidden; }
.medallon img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.3) contrast(1.05); }
.medallon__inicial, .plato__numero {
  font-family: var(--f-titulo); font-style: italic; font-weight: 600; line-height: 1;
  color: #e6cfa4;
}
.medallon__inicial { font-size: 1.35rem; letter-spacing: 0.02em; }
.medallon__nombre {
  font-family: var(--f-titulo); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.8rem; line-height: 1.2;
}
@media (max-width: 400px) {
  /* celulares chicos: que "GUARNICIONES" o "CAFETERÍA" entren sin cortarse */
  .medallon__nombre { letter-spacing: 0.03em; font-size: 0.74rem; }
}
.carta__indice a:hover .medallon { transform: translateY(-2px); border-color: var(--mostaza); color: var(--mostaza); }
.carta__indice a:hover .medallon__nombre { color: var(--bordo); }

/* Cada categoría "al costado": círculo grande contra el borde izquierdo y los platos pegados a su contorno.
   Las posiciones las calcula src/components/Carta.astro (MODOS); acá van los tamaños que deben coincidir. */
.carta__orbitas { display: grid; gap: 0.5rem; }
.orbita { scroll-margin-top: 5.5rem; margin-bottom: 1.25rem; }
.orbita__arco {
  --mini: 44px;
  position: relative; height: var(--hm);
  margin-inline: -1rem; /* en celular el círculo grande queda cortado por el borde de la pantalla */
}
.orbita__centro {
  position: absolute; overflow: hidden;
  width: calc(var(--rgm) * 2); aspect-ratio: 1; border-radius: 50%;
  left: calc(var(--cxm) - var(--rgm)); top: 50%; transform: translateY(-50%);
  background: radial-gradient(circle at 85% 50%, #4d3322, #22140a 60%);
  box-shadow: 0 0 0 1px rgba(243, 230, 204, 0.55), 0 0 0 8px rgba(34, 20, 10, 0.5), 0 18px 40px -12px rgba(30, 12, 2, 0.75);
}
.orbita__centro img {
  /* la foto ocupa la parte visible del círculo (el lado derecho) */
  /* ancho = la parte del círculo que se ve en pantalla (cx + radio), así se ve el plato elegido con fotoPos */
  position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, calc(var(--cxm) + var(--rgm))); height: 100%; object-fit: cover; object-position: 50% 75%;
  filter: sepia(0.4) contrast(1.05) brightness(0.8);
}
.orbita__centro--foto::after {
  content: ''; position: absolute; inset: 0;
  /* oscurece del lado del texto (izquierda de la parte visible) y deja ver el plato a la derecha */
  background: linear-gradient(90deg, rgba(22, 12, 4, 0.9) calc(100% - var(--cxm) - var(--rgm) + 40px), rgba(22, 12, 4, 0.6) calc(100% - 70px), rgba(22, 12, 4, 0.25));
}
.orbita__texto {
  /* texto en la parte visible del círculo grande */
  position: absolute; z-index: 1; left: 14px; width: 124px; top: 50%; transform: translateY(-50%);
  display: grid; gap: 0.3rem; text-align: left; color: #f6ecd8;
}
.orbita__inicial {
  /* inicial grande y tenue detrás del nombre, cuando la categoría no tiene foto */
  position: absolute; z-index: -1; right: -4px; top: 50%; transform: translateY(-52%);
  font-family: var(--f-titulo); font-style: italic; font-weight: 700; font-size: 5rem; line-height: 1;
  color: rgba(243, 230, 204, 0.09);
}
.orbita__sobre { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; font-weight: 700; color: var(--mostaza); }
.orbita__titulo {
  margin: 0; font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.4rem; line-height: 1; color: #f6ecd8;
}
.orbita__titulo--largo { font-size: 0.9rem; letter-spacing: 0.01em; line-height: 1.15; }
.orbita__linea { height: 1px; background: rgba(243, 230, 204, 0.7); }
.orbita__desde { font-family: var(--f-titulo); font-style: italic; font-size: 0.82rem; }

.orbita__items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.plato {
  /* el circulito queda sobre el contorno; el texto, a su derecha */
  position: absolute; right: 10px;
  left: calc(var(--xm) - var(--mini) / 2);
  top: calc(50% + var(--ym)); transform: translateY(-50%);
  display: flex; align-items: center; gap: 0.6rem;
}
.plato__circulo {
  flex: none; display: grid; place-items: center;
  width: var(--mini); aspect-ratio: 1; border-radius: 50%;
  color: #f3e6cc;
  background: radial-gradient(circle at 35% 30%, #4d3322, #22140a 72%);
  border: 1.5px solid rgba(243, 230, 204, 0.85);
  box-shadow: inset 0 0 0 3px #22140a, inset 0 0 0 4px rgba(243, 230, 204, 0.25), 0 5px 12px rgba(30, 12, 2, 0.5);
}
.plato__circulo { overflow: hidden; grid-row: 1 / span 2; } /* en celular abarca nombre y descripción */
.plato__circulo img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(2.4);
  filter: sepia(0.25) contrast(1.05);
}
.plato__circulo--foto { border-color: rgba(243, 230, 204, 0.95); box-shadow: 0 0 0 2px rgba(34, 20, 10, 0.75), 0 5px 12px rgba(30, 12, 2, 0.5); }
.plato__numero { font-size: 1.15rem; }
/* foto propia del plato: entera, sin el zoom que se usa para recortar la foto de la categoría */
.plato__circulo--propia img { transform: none; object-position: 50% 50%; }

/* Cada plato es un botón: al tocarlo se abre la foto grande */
.plato__boton {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: center; width: 100%;
  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
button.plato__boton { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
button.plato__boton:hover .plato__circulo, button.plato__boton:focus-visible .plato__circulo { transform: scale(1.08); }
.plato__circulo { transition: transform 0.2s ease; }
button.plato__boton:focus-visible { outline: 2px solid var(--bordo); outline-offset: 4px; border-radius: 999px; }

/* Visor de la foto grande */
.visor {
  width: min(92vw, 440px); padding: 1.75rem 1.25rem 1.4rem; border: 0; border-radius: 16px;
  color: #3a220e; text-align: center; overflow: visible;
  background: radial-gradient(ellipse at 50% 40%, #f0dcaa 35%, #dcb877 80%, #b9853f);
  box-shadow: inset 0 0 0 1px rgba(122, 46, 14, 0.4), inset 0 0 28px rgba(122, 46, 14, 0.5), 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}
.visor[open] { animation: visor-abrir 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.15); }
.visor::backdrop { background: rgba(20, 10, 3, 0.72); backdrop-filter: blur(3px); }
@keyframes visor-abrir { from { opacity: 0; transform: scale(0.6); } }
.visor__figura { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.visor__foto {
  width: min(76vw, 340px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(243, 230, 204, 0.95);
  box-shadow: 0 0 0 4px #22140a, 0 0 0 5px rgba(243, 230, 204, 0.5), 0 14px 30px -10px rgba(30, 12, 2, 0.8);
  background: #22140a;
}
.visor__foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.15) contrast(1.05); }
.visor__texto { display: grid; gap: 0.2rem; }
.visor__nombre { font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.15rem; color: #2e1a0a; }
.visor__precio { font-family: var(--f-titulo); font-weight: 700; font-style: italic; font-size: 1.15rem; color: var(--bordo); }
.visor__desc { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 1rem; line-height: 1.35; max-width: 30ch; margin: 0.2rem auto 0; }
.visor__cerrar {
  position: absolute; top: -14px; right: -10px;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font: 400 1.6rem/1 var(--f-titulo); color: #f3e6cc;
  background: radial-gradient(circle at 35% 30%, #4d3322, #22140a 72%);
  border: 1.5px solid rgba(243, 230, 204, 0.85);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.visor__cerrar:focus-visible { outline: 2px solid var(--mostaza); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .visor[open] { animation: none; } }
.plato__texto { display: grid; min-width: 0; }
.plato__nombre {
  font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.8rem; line-height: 1.15; color: #2e1a0a; overflow-wrap: break-word;
}
.plato__precio { font-family: var(--f-titulo); font-weight: 700; font-style: italic; font-size: 0.86rem; color: var(--bordo); }
/* Qué trae el plato: en celular debajo del precio, en computadora al costado del nombre */
.plato__desc {
  grid-column: 2; margin-top: 0.1rem;
  font-family: 'IM Fell English', Georgia, serif; font-style: italic;
  font-size: 0.88rem; line-height: 1.2; color: #4a2a10;
}

/* Debajo del arco: nota y qué trae cada plato */
.orbita__detalle {
  margin: 0.25rem 0 0; padding: 0.75rem 0.9rem;
  border-left: 3px solid rgba(122, 31, 43, 0.6);
  background: rgba(255, 244, 214, 0.3);
}
.orbita__nota, .orbita__ingredientes {
  margin: 0; font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 0.95rem; line-height: 1.35; color: #3a220e;
}
.orbita__nota + .orbita__ingredientes { margin-top: 0.4rem; }
.orbita__ingredientes { list-style: none; padding: 0; display: grid; gap: 0.25rem; }
.orbita__ingredientes strong { font-family: var(--f-titulo); font-style: normal; font-weight: 700; font-size: 0.85rem; }

/* Escritorio: más grande, el arco a la izquierda y el detalle al costado */
@media (min-width: 900px) {
  .orbita:has(.orbita__detalle) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: center; }
  .orbita__arco {
    --mini: 54px;
    height: var(--hd); margin-inline: 0;
  }
  .orbita__centro { width: calc(var(--rgd) * 2); left: calc(var(--cxd) - var(--rgd)); }
  .orbita__centro img { width: min(100%, calc(var(--cxd) + var(--rgd))); }
  .orbita__centro--foto::after {
    background: linear-gradient(90deg, rgba(22, 12, 4, 0.9) calc(100% - var(--cxd) - var(--rgd) + 150px), rgba(22, 12, 4, 0.55) calc(100% - 90px), rgba(22, 12, 4, 0.25));
  }
  .orbita__texto { left: calc(var(--cxd) + var(--rgd) - 250px); width: 220px; gap: 0.4rem; }
  .orbita__inicial { font-size: 7rem; }
  .plato__numero { font-size: 1.35rem; }
  .orbita__sobre { font-size: 0.7rem; }
  .orbita__titulo { font-size: 2rem; }
  .orbita__titulo--largo { font-size: 1.3rem; }
  .orbita__desde { font-size: 1rem; }
  .plato { left: calc(var(--xd) - var(--mini) / 2); right: 0; top: calc(50% + var(--yd)); gap: 0.8rem; }
  .plato__boton { grid-template-columns: auto 200px minmax(0, 1fr); column-gap: 0.9rem; }
  .plato__circulo { grid-row: auto; }
  .plato__desc {
    grid-column: 3; grid-row: 1;
    font-size: 1.05rem; padding-left: 0.9rem; max-width: 46ch;
    border-left: 1px solid rgba(74, 42, 16, 0.3);
  }
  .plato__nombre { font-size: 0.86rem; }
  .plato__precio { font-size: 0.95rem; }
  .orbita__detalle { margin: 0; }
}

.carta__aviso { text-align: center; margin: 0 auto; max-width: 60ch; font-size: 0.92rem; color: var(--tinta-suave); }
.carta__aviso a { color: var(--bordo); margin-left: 0.35rem; }

/* ===== Horarios ===== */
.horarios__estado { font-size: 1.1rem; margin-bottom: 1.5rem; }
.tabla-horarios {
  width: 100%; max-width: 640px; border-collapse: collapse;
  background: rgba(255, 244, 214, 0.35); border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(74, 42, 16, 0.35);
}
.tabla-horarios thead th {
  background: var(--madera-800); color: var(--crema); text-align: left;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.7rem 1rem;
}
.tabla-horarios tbody th, .tabla-horarios td { padding: 0.8rem 1rem; border-top: 1px solid rgba(74, 42, 16, 0.2); text-align: left; vertical-align: top; }
.tabla-horarios tbody th { font-weight: 700; white-space: nowrap; width: 40%; }
.turno { display: block; font-variant-numeric: tabular-nums; }
.turno--cerrado { color: var(--tinta-suave); font-style: italic; }
.tag-hoy {
  display: none; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px;
  background: var(--bordo); color: #fff; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  vertical-align: 0.15em;
}
.es-hoy { background: rgba(255, 244, 214, 0.55); }
.es-hoy th { box-shadow: inset 4px 0 0 var(--bordo); }
.es-hoy .tag-hoy { display: inline-block; }
@media (min-width: 560px) {
  .turno { display: inline; }
  .turno + .turno::before { content: ' · '; color: var(--tinta-suave); }
}

/* ===== Reservas ===== */
.reservas { color: var(--tinta); }
.reservas__caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 860px) { .reservas__caja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.aviso--noche { border-left-color: var(--bordo); }

.reserva-form {
  background: rgba(255, 244, 214, 0.45); color: var(--tinta);
  border-radius: 14px; padding: 1.25rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem;
  box-shadow: 0 0 0 1px rgba(74, 42, 16, 0.35), 0 18px 36px -20px rgba(40, 18, 4, 0.6);
}
.reserva-form .campo:first-child { grid-column: 1 / -1; }
.campo { display: grid; gap: 0.3rem; min-width: 0; }
.campo label { font-weight: 700; font-size: 0.92rem; }
.campo input {
  font: inherit; min-height: 48px; padding: 0.5rem 0.6rem; width: 100%; min-width: 0;
  border: 2px solid rgba(74, 42, 16, 0.4); border-radius: 8px; background: #fbf3df; color: var(--tinta);
}
.campo input:focus-visible { border-color: var(--bordo); outline-offset: 1px; }
.reserva-form__vista {
  grid-column: 1 / -1; margin: 0; font-family: var(--f-titulo); font-style: italic;
  background: rgba(255, 244, 214, 0.5); padding: 0.75rem 0.9rem; border-radius: 8px; color: var(--madera-700);
}
.reserva-form .boton { grid-column: 1 / -1; }
.reserva-form__alt { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 0.95rem; }
.reservas .reserva-form a:not(.boton) { color: var(--bordo); }
@media (min-width: 560px) {
  .reserva-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); padding: 1.5rem; }
  .reserva-form .campo:first-child { grid-column: auto; }
}

/* ===== Ubicación ===== */
.ubicacion__grilla { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .ubicacion__grilla { grid-template-columns: 1fr 1.5fr; } }
.ubicacion address { font-style: normal; font-size: 1.15rem; margin-bottom: 1.5rem; }
.ubicacion__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ubicacion__mapa {
  border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papel-2);
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--linea), var(--sombra);
}
.ubicacion__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== Galería ===== */
.galeria { padding-top: 0; }

/* Carrusel: fotos con borde de papel, una al centro y las vecinas asomando */
.carrusel { position: relative; margin-inline: -1rem; }
.carrusel__pista {
  list-style: none; margin: 0; padding: 0.75rem calc(50% - min(39vw, 190px)) 1.25rem;
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 2px solid var(--bordo); outline-offset: -2px; }
.carrusel__foto {
  flex: none; width: min(78vw, 380px); scroll-snap-align: center;
  padding: 0.6rem 0.6rem 0.8rem; background: #efe3c8;
  box-shadow: 0 1px 2px rgba(40, 20, 0, 0.45), 0 14px 26px -10px rgba(40, 20, 0, 0.6);
}
.carrusel__foto:nth-child(odd) { transform: rotate(-1deg); }
.carrusel__foto:nth-child(even) { transform: rotate(1deg); }
.carrusel__foto img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: sepia(0.15) contrast(1.03);
}
.carrusel__puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; padding: 0 1rem; }
.carrusel__punto {
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.carrusel__punto::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(74, 42, 16, 0.3); transition: transform 0.2s ease, background 0.2s ease;
}
.carrusel__punto[aria-current='true']::before { background: var(--bordo); transform: scale(1.4); }
@media (min-width: 760px) {
  .carrusel { margin-inline: 0; }
  .carrusel__pista { padding-inline: calc(50% - 190px); gap: 2rem; }
}

/* ===== Pie ===== */
.pie {
  background: var(--madera-900); color: var(--crema);
  padding: 3.5rem 0 1.5rem; border-top: 6px solid var(--bordo);
  font-size: 0.98rem;
}
.pie a { color: var(--crema); }
.pie a:hover { color: #fff; }
.pie__grilla { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pie__grilla { grid-template-columns: 1.2fr 1.3fr 1.5fr 1fr; } }
.pie__marca { font-family: var(--f-titulo); font-size: 1.6rem; margin-bottom: 0.4rem; }
.pie__marca em { color: var(--mostaza); }
.pie__titulo {
  font-family: var(--f-texto); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mostaza); margin-bottom: 0.75rem;
}
.pie address { font-style: normal; line-height: 1.8; }
.pie__horarios { margin: 0; display: grid; gap: 0.35rem; }
.pie__horarios div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; }
.pie__horarios dt { font-weight: 700; }
.pie__horarios dd { margin: 0; font-variant-numeric: tabular-nums; }
.pie__redes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.pie__redes a, .pie__pronto { display: inline-flex; align-items: center; gap: 0.5rem; }
.pie__pronto { opacity: 0.75; }
.pie__legal {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(245, 236, 217, 0.15);
  font-size: 0.85rem; opacity: 0.75;
}

/* ===== Barra fija mobile ===== */
.barra-movil {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.5rem;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  background: rgba(34, 21, 13, 0.96);
  border-top: 1px solid rgba(245, 236, 217, 0.15);
  backdrop-filter: blur(6px);
}
.barra-movil a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; border-radius: 999px; font-weight: 700; text-decoration: none; color: #fff;
}
.barra-movil__wa { background: var(--bordo); }
.barra-movil__tel { background: var(--verde); }
@media (min-width: 900px) {
  .barra-movil { display: none; }
  body { padding-bottom: 0; }
}