/* Byron Sanguchería · Gabriela Oriente
   "Neon diner night": near-black room, red neon sign, checkerboard floor.
   Mobile-first. Sections are marked with  ---------- name ----------  */

/* ---------- fonts ---------- */
@font-face {
  font-family: "BS Inline";
  src: url("../assets/fonts/big-shoulders-inline-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../assets/fonts/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: "Yellowtail";
  src: url("../assets/fonts/yellowtail-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Barlow: Californian highway-sign grotesk, a natural fit for a diner.
   Only two weights ship; every "bold" UI label uses 600. */
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --bg: #0b0909;
  --bg-deep: #070606;
  --panel: #161212;
  --panel-2: #1d1717;
  --line: rgba(255, 238, 232, 0.1);
  --line-dash: rgba(255, 238, 232, 0.16);
  --paper: #f7f1ea;
  --muted: #bdb1a7;
  --dim: #93877e;
  --red: #ff2e43;
  --red-soft: #ff7a87;
  --red-btn: #cf1229;
  --red-btn-hover: #e4182f;
  --glow: 255 46 67;
  --tile-light: #ddd5cb;
  --tile-dark: #0b0909;

  --f-inline: "BS Inline", "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-script: "Yellowtail", "Brush Script MT", cursive;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cats-h: 64px;
  /* glossy red ceiling glow that sits under each checkerboard floor */
  --ceiling: radial-gradient(120% 70% at 50% 0%, #400b12 0%, #20080c 42%, #110809 72%, var(--bg) 100%);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background-color: var(--bg);
  /* fine film grain, tiled; scrolls with the page so it never repaints */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  color: var(--paper);
  font: 400 1rem/1.55 var(--f-body);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.nowrap { white-space: nowrap; }

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 0.8rem 1.1rem;
  background: var(--paper);
  color: var(--bg);
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 50px;
  padding: 0.75em 1.35em;
  border-radius: 999px;
  font: 600 1.05rem/1.1 var(--f-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn .icon { width: 1em; height: 1em; }
button.btn { border: 0; cursor: pointer; }

.btn--solid {
  background: var(--red-btn);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px -10px rgba(0, 0, 0, 0.9);
}
.btn--solid:hover {
  background: var(--red-btn-hover);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 22px -10px rgba(0, 0, 0, 0.95);
}

.btn--ghost {
  color: var(--paper);
  background: rgba(11, 9, 9, 0.4);
  box-shadow: inset 0 0 0 1.5px rgba(247, 241, 234, 0.55);
}
.btn--ghost:hover {
  background: rgba(11, 9, 9, 0.6);
  box-shadow: inset 0 0 0 1.5px #fff;
  transform: translateY(-1px);
}

/* ---------- shared type ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font: 600 0.8rem/1 var(--f-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-soft);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}

.h2 {
  margin: 0.35em 0 0.3em;
  font: 800 clamp(2.7rem, 10vw, 5.4rem)/0.9 var(--f-display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lead {
  margin: 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.08rem;
}

/* ---------- topbar ---------- */
.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.75rem, env(safe-area-inset-top)) var(--gutter) 0;
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 800 1.7rem/1 var(--f-inline);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffd6da;
  text-decoration: none;
  text-shadow: 0 0 6px rgb(var(--glow) / 0.9), 0 0 18px rgb(var(--glow) / 0.55);
}

.topbar__nav {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--paper);
  transition: color 0.2s, background-color 0.2s;
}
.topbar__nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

/* Back layer: oversized upward so it can slide down without a gap. */
.hero__media {
  position: absolute;
  inset: -64px 0 0;
  z-index: -3;
  will-change: transform;
}
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* Chrome ignores images that exactly fill the viewport when picking LCP (it
   treats them as backgrounds), but it does count the video once it plays. Ending
   the poster 2px short of the hero bottom (inside the solid-black fade) makes the
   poster the LCP element and keeps it larger than the video, so LCP never moves to
   the moment the video starts. */
.hero__poster { height: calc(100% - 2px); }
.hero__video {
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero.has-video .hero__video { opacity: 1; }

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(11, 9, 9, 0.62) 0%, rgba(11, 9, 9, 0.18) 26%, rgba(11, 9, 9, 0.5) 50%, rgba(11, 9, 9, 0.9) 74%, var(--bg) 100%);
}

/* Front layer: text and buttons scroll normally. */
.hero__content {
  position: relative;
  padding-block: 5.5rem clamp(2.25rem, 7vh, 4.5rem);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 1.4rem;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: rgba(24, 6, 9, 0.62);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 92, 106, 0.95),
    inset 0 0 12px rgb(var(--glow) / 0.28),
    0 0 18px rgb(var(--glow) / 0.45);
  color: #ffe6e8;
  font: 600 0.82rem/1 var(--f-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.badge .icon { color: var(--red-soft); }
.badge strong {
  color: #ff5869;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgb(var(--glow) / 0.85);
}

/* The sign: "Sanguchería" in white script hangs over a red neon BYRON.
   DOM order is Byron → Sanguchería so it reads as the business name. */
.lockup {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  margin: 0;
  font-weight: 400;
  line-height: 1;
}
.lockup__script {
  position: relative;
  z-index: 1;
  margin: 0 0 -0.2em 0.18em;
  font: 400 clamp(2.5rem, 12vw, 5.2rem)/1 var(--f-script);
  color: #fff;
  transform: rotate(-7deg);
  transform-origin: left bottom;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(255, 255, 255, 0.4),
    0 0 34px rgb(var(--glow) / 0.35);
}
.lockup__byron {
  display: block;
  /* capped by window height too, so short laptop screens still show the buttons */
  font: 800 min(clamp(7.25rem, 36vw, 15.5rem), 33vh)/0.82 var(--f-inline);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #ffd9dd;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgb(var(--glow) / 0.95),
    0 0 22px rgb(var(--glow) / 0.75),
    0 0 48px rgb(var(--glow) / 0.5),
    0 0 90px rgb(var(--glow) / 0.3);
}

.hero__tagline {
  margin: 1.1rem 0 1.6rem;
  max-width: 24ch;
  font: 600 clamp(1.25rem, 4.6vw, 1.7rem)/1.3 var(--f-body);
  text-wrap: balance;
}

.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  max-width: 34rem;
}
/* with three buttons (404 page), the third spans the row */
.cta > .btn:nth-child(3) { grid-column: 1 / -1; }


.hero__addr {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 1.3rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Load sequence: the sign flickers on, then the rest settles in. */
.js .lockup__byron { animation: flicker 1.5s linear 0.15s both; }
.js .lockup__script { animation: rise-script 0.9s var(--ease) 0.9s both; }
.js .badge,
.js .hero__tagline,
.js .cta,
.js .hero__addr { animation: rise 0.8s var(--ease) both; }
.js .badge { animation-delay: 0.05s; }
.js .hero__tagline { animation-delay: 1.05s; }
.js .cta { animation-delay: 1.18s; }
.js .hero__addr { animation-delay: 1.3s; }

@keyframes flicker {
  0% { opacity: 0.18; }
  7% { opacity: 1; }
  10% { opacity: 0.22; }
  16% { opacity: 1; }
  21% { opacity: 0.4; }
  24%, 100% { opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
/* the script word keeps its tilt while it rises */
@keyframes rise-script {
  from { opacity: 0; transform: translate3d(0, 14px, 0) rotate(-7deg); }
  to { opacity: 1; transform: rotate(-7deg); }
}

/* ---------- checkerboard floor ----------
   The shop floor in true perspective, receding into the dark (the client's
   preferred version). The red glow that used to sit on it was removed on request. */
.floor {
  position: relative;
  height: clamp(64px, 10vw, 120px);
  overflow: hidden;
  background: var(--bg);
}
.floor::before {
  content: "";
  position: absolute;
  inset: 0 -60%;
  background: conic-gradient(var(--tile-light) 25%, var(--tile-dark) 0 50%, var(--tile-light) 0 75%, var(--tile-dark) 0) 0 0 / 64px 64px;
  transform: perspective(260px) rotateX(58deg);
  transform-origin: 50% 100%;
}
.floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 8%, rgba(11, 9, 9, 0.55) 55%, rgba(11, 9, 9, 0.15) 100%);
}

/* ---------- menu ---------- */
.menu {
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 8vw, 6rem);
  /* same glow as .visit, drawn at that section's height (~780px) so it doesn't
     stretch down the whole long menu */
  background: var(--ceiling) 50% 0 / 100% 780px no-repeat, var(--bg);
}
.menu:focus { outline: none; }

.section-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head .lead { margin-top: 0.4rem; }

.apps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  max-width: 30rem;
  margin-top: 1.6rem;
}

.cats {
  background: rgba(11, 9, 9, 0.55);
  border-block: 1px solid var(--line);
}
.cats__bar { display: flex; align-items: center; gap: 1rem; }
.cats__list {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.35rem;
  min-height: var(--cats-h);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.cats__list::-webkit-scrollbar { display: none; }
.cats__list li { scroll-snap-align: start; flex: none; }
.cats__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.05rem;
  border-radius: 999px;
  font: 800 1.12rem/1 var(--f-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.cats__list a:hover { color: var(--paper); }
.cats__list a[aria-current="true"] {
  color: #fff;
  background: rgb(var(--glow) / 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 82, 97, 0.85);
}

/* desktop arrows for the sideways menu (shown from 640px, only when JS runs) */
.carta-arrows { display: none; flex: none; gap: 0.5rem; }
.carta-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 238, 232, 0.06);
  box-shadow: inset 0 0 0 1.5px rgba(247, 241, 234, 0.35);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.carta-arrow:hover:not(:disabled) {
  background: rgb(var(--glow) / 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 82, 97, 0.85);
}
.carta-arrow:disabled { opacity: 0.3; cursor: default; }
.carta-arrow .icon { width: 1.25rem; height: 1.25rem; }
.carta-arrow[data-dir="1"] .icon { transform: scaleX(-1); }

/* ---------- menu track ----------
   The whole menu is one sideways strip: the page stays short, you can scroll
   straight past it, and you browse it by swiping / the arrows / the chips. */
.menu { container-type: inline-size; }
.menu__track {
  /* left edge of the page content (same as .wrap), so the first card lines up
     with the heading above while cards still slide out to the screen edge */
  --edge: max(var(--gutter), (100cqi - 1200px) / 2);
  --card-w: clamp(240px, 72vw, 280px);
  display: flex;
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 4rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--edge);
  padding: 2rem var(--edge) 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 82, 97, 0.6) rgba(255, 238, 232, 0.06);
}
.menu__track:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 0; }
/* soft fade on the right edge hints that there is more; removed at the end */
.js .menu__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade-r, 64px)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade-r, 64px)), transparent);
}
.js .menu__track.is-end { --fade-r: 0px; }

.cat { flex: none; display: flex; flex-direction: column; gap: 1rem; }
/* the category name stays pinned at the left while its products scroll by
   (sticky offsets are measured inside the track's padding, so 0 = the content edge) */
.cat__head {
  position: sticky;
  left: 0;
  align-self: flex-start;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.cat__num {
  font: 800 clamp(1.4rem, 4vw, 1.9rem)/1 var(--f-inline);
  color: #ffd2d6;
  text-shadow: 0 0 6px rgb(var(--glow) / 0.95), 0 0 18px rgb(var(--glow) / 0.5);
}
.cat__title {
  margin: 0;
  font: 800 clamp(1.9rem, 5vw, 2.6rem)/0.9 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.cat__items { display: flex; gap: 1rem; }
.cards {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* every product card is the same width */
.cards > li { flex: none; width: var(--card-w); scroll-snap-align: start; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "media" "body" "opts";
  height: 100%;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 90, 104, 0.45);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.9);
}
.card__media {
  grid-area: media;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0f0c0c;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--shift, 0px), 0) scale(var(--zoom, 1));
}
.card__media .tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
}
.card__body {
  grid-area: body;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.05rem 1.15rem 0.95rem;
}
.card__name {
  margin: 0;
  font: 800 1.65rem/0.98 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
/* The name links to the product on Uber Eats and its ::after stretches over the
   whole card, so clicking anywhere on the card (chips included) opens the listing. */
.card__link {
  color: inherit;
  text-decoration: none;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.card__link .icon {
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.3em;
  vertical-align: 0.05em;
  color: var(--red-soft);
  opacity: 0.6;
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
.card:hover .card__link .icon { opacity: 1; transform: translate(2px, -2px); }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after {
  outline: 3px solid #fff;
  outline-offset: -3px;
  border-radius: var(--radius);
}
.card__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.card__opts {
  grid-area: opts;
  display: grid;
  gap: 0.7rem;
  padding: 0 1.15rem 1.15rem;
}
.opts__label {
  margin: 0 0 0.35rem;
  font: 600 0.7rem/1 var(--f-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
/* chips grow to fill each row but never shrink below their longest word,
   so "Especialidad" wraps to a new row instead of spilling out */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opts > li { flex: 1 1 4.2rem; }
.opt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  height: 100%;
  min-height: 48px;
  padding: 0.5rem;
  border-radius: 10px;
  background: rgba(255, 238, 232, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--paper);
}
.opt__name { font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.opt__price { font-weight: 600; font-size: 0.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

.tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
}
.card__body {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 1.05rem 1.15rem 1.3rem;
}
.card__name {
  margin: 0;
  font: 800 1.65rem/0.98 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.card__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}


.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.75em;
  border-radius: 999px;
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--hot {
  background: var(--red-btn);
  color: #fff;
}
.tag--pop {
  background: rgba(11, 9, 9, 0.78);
  color: #ffc2c8;
  box-shadow: inset 0 0 0 1.5px rgba(255, 82, 97, 0.8);
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--line-dash);
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  min-height: 80px;
  padding: 1rem 0.15rem;
  border-bottom: 1px dashed var(--line-dash);
}
.row__name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 800 clamp(1.7rem, 5.6vw, 2.2rem)/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: color 0.25s, text-shadow 0.25s;
}
.row:hover .row__name { color: #fff; }
.row__name::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.row__meta { display: flex; align-items: center; gap: 0.75rem; }
.row .card__opts { flex-basis: 100%; padding: 0; }

.menu__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 2.25rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--muted);
}
.menu__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  padding: 0 0.5rem;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.menu__more a:hover { color: #fff; text-decoration-color: #fff; }

/* Scroll reveal for menu items (only when JS is running). */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- visit ---------- */
.visit {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  /* the glossy red ceiling from the shop */
  background: var(--ceiling);
}
.visit__grid { display: grid; gap: 2.25rem; }

.visit__addr {
  margin: 1.2rem 0 0;
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.55;
}
.visit__hours {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 1.9rem;
  color: var(--muted);
}
.neon-num {
  flex: none;
  font: 800 3.4rem/1 var(--f-inline);
  color: #ffd6da;
  text-shadow: 0 0 2px #fff, 0 0 10px rgb(var(--glow) / 0.95), 0 0 26px rgb(var(--glow) / 0.6);
}

.visit__map {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 238, 232, 0.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 238, 232, 0.05) 39px 40px),
    #181111;
  box-shadow: 0 0 0 1.5px rgba(255, 82, 97, 0.7), 0 30px 60px -24px rgba(0, 0, 0, 0.85);
}
.visit__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.2rem;
  border-radius: 999px;
  background: rgba(11, 9, 9, 0.7);
  box-shadow: inset 0 0 0 1.5px rgba(247, 241, 234, 0.4);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.visit__map-link:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.visit__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* night-mode map: invert, then rotate hue back so reds stay red */
  filter: invert(0.9) hue-rotate(180deg) saturate(0.7) contrast(0.92);
}

/* ---------- reviews ---------- */
.reviews {
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3.5rem, 9vw, 6.5rem);
}
.reviews__list {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  margin: 0;
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* oversized quote mark, decorative */
.review::before {
  content: "“";
  position: absolute;
  top: 0.1rem;
  right: 1.1rem;
  font: 800 5rem/1 var(--f-display);
  color: var(--red);
  opacity: 0.35;
  pointer-events: none;
}
.review__stars { display: flex; gap: 0.2rem; margin: 0; color: var(--red-soft); }
.star { width: 1.15rem; height: 1.15rem; fill: currentColor; stroke: none; }
.star--empty { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.7; }
.review__quote { margin: 0; }
.review__quote p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--paper); }
.review__by {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
.review__src { color: var(--dim); font-size: 0.85rem; font-weight: 400; }

/* ---------- order chooser ----------
   "Pedir por las apps" opens #pedir, a native popover: a centred card on
   desktop, a bottom sheet on phones. These rules replace the browser defaults. */
.order {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(470px, calc(100vw - 2rem));
  height: fit-content;
  padding: 1.6rem 1.4rem 1.4rem;
  border: 0;
  border-radius: 20px;
  background: var(--panel);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 1.5px rgba(255, 82, 97, 0.5), 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.order:popover-open { opacity: 1; transform: none; }
@starting-style {
  .order:popover-open { opacity: 0; transform: translateY(14px); }
}
.order::backdrop {
  background: rgba(5, 4, 4, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.order__title {
  margin: 0 2.75rem 0.4rem 0;
  font: 800 clamp(1.8rem, 6vw, 2.2rem)/1.05 var(--f-display);
  text-transform: uppercase;
}
.order__note { margin: 0 0 1.3rem; color: var(--muted); }
.order__apps { display: grid; gap: 0.65rem; }
.order__apps .btn { width: 100%; min-height: 54px; font-size: 1.1rem; }
.order__close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.order__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.order__close .icon { width: 1.3rem; height: 1.3rem; }
@media (max-width: 639px) {
  .order {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .order:popover-open { transform: none; }
  @starting-style {
    .order:popover-open { transform: translateY(100%); }
  }
}

/* ---------- 404 ---------- */
/* the 404 page fills the screen, so its footer always sits at the bottom */
body:has(> .notfound) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.notfound {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 7rem 3rem;
  background: var(--ceiling) 50% 0 / 100% 780px no-repeat, var(--bg);
}
/* the error code as one more neon sign, same treatment as the BYRON wordmark */
.notfound__code {
  margin: 0 0 0.5rem;
  font: 800 clamp(6.5rem, 30vw, 12rem)/0.85 var(--f-inline);
  color: #ffd9dd;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgb(var(--glow) / 0.95),
    0 0 22px rgb(var(--glow) / 0.75),
    0 0 48px rgb(var(--glow) / 0.5),
    0 0 90px rgb(var(--glow) / 0.3);
}
.notfound .lead { margin-top: 0.5rem; }
.notfound .cta { margin-top: 2rem; }

/* ---------- footer ---------- */
.footer {
  background: var(--bg-deep);
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.footer__tiles {
  height: 20px;
  background: conic-gradient(var(--tile-light) 25%, var(--tile-dark) 0 50%, var(--tile-light) 0 75%, var(--tile-dark) 0) 0 0 / 20px 20px;
  opacity: 0.85;
}
.footer__grid {
  display: grid;
  gap: 1.75rem;
  padding-block: 3rem 2rem;
}
.footer__grid p { margin: 0; color: var(--muted); line-height: 1.6; }
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__script {
  position: relative;
  z-index: 1;
  margin: 0 0 -0.22em 0.15em;
  font: 400 2rem/1 var(--f-script);
  color: #fff;
  transform: rotate(-7deg);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}
.footer__byron {
  font: 800 4.6rem/0.85 var(--f-inline);
  text-transform: uppercase;
  color: #ffd9dd;
  text-shadow: 0 0 6px rgb(var(--glow) / 0.9), 0 0 22px rgb(var(--glow) / 0.5);
}
.footer__grid .footer__label {
  margin-bottom: 0.4rem;
  font: 600 0.78rem/1 var(--f-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-soft);
}
.footer__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.footer__ig:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__legal {
  margin-block: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.85rem;
}

/* ---------- phones ---------- */
@media (max-width: 639px) {
  .menu__track { scroll-snap-type: x mandatory; }
  .menu__more span { flex-basis: 100%; }
  .menu__more a:first-of-type { padding-left: 0; }
}

/* ---------- narrow phones ---------- */
@media (max-width: 479px) {
  .cta,
  .apps { grid-template-columns: 1fr; }
}

/* ---------- larger screens ---------- */
@media (min-width: 640px) {
  .cta {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
  }
  .apps { display: flex; flex-wrap: wrap; max-width: none; }
  .js .carta-arrows { display: flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  /* top-anchored so the whole block, buttons included, fits on first load */
  .hero { align-items: flex-start; }
  .hero__content { padding-block: clamp(5.5rem, 15vh, 8rem) clamp(1.5rem, 4vh, 3rem); }
  .hero__shade {
    background:
      linear-gradient(90deg, rgba(11, 9, 9, 0.88) 0%, rgba(11, 9, 9, 0.62) 34%, rgba(11, 9, 9, 0.12) 68%, rgba(11, 9, 9, 0.05) 100%),
      linear-gradient(180deg, rgba(11, 9, 9, 0.55) 0%, transparent 22%, transparent 72%, var(--bg) 100%);
  }

  .reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .visit__grid { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }

  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; align-items: start; }
}

/* very short desktop windows: shrink the sign a little more so the address still fits */
@media (min-width: 900px) and (max-height: 580px) {
  .lockup__byron { font-size: min(clamp(7.25rem, 36vw, 15.5rem), 27vh); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}