/* ===========================================================================
   Al-Noor Kebabish — mockup de pedidos
   Display: Patty Press ES · Cuerpo: Anteroly
   Tema claro por defecto; el oscuro vive en [data-theme="dark"].
   =========================================================================== */

/* --- Fuentes ------------------------------------------------------------ */
/* Patty Press original es ASCII puro (sin acentos, sin € ni ¡¿). Esta versión
   lleva esos glifos generados a partir de los de la propia fuente.
   Ver scripts/build_patty.py en las notas del README. */
@font-face {
  font-family: 'Patty Press ES';
  src: url('../fonts/PattyPress-ES.woff2') format('woff2'),
       url('../fonts/PattyPress-ES.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Anteroly';
  src: url('../fonts/Anteroly-Regular.woff2') format('woff2'),
       url('../fonts/Anteroly-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- Tokens: tema claro (por defecto) ----------------------------------- */
:root {
  --bg:        #faf6f0;
  --bg-2:      #f2ebe1;
  --card:      #ffffff;
  --card-2:    #fbf7f1;

  --line:      rgba(28,20,14,.11);
  --line-2:    rgba(28,20,14,.22);
  --tint:      rgba(28,20,14,.045);
  --tint-2:    rgba(28,20,14,.09);

  --ink:       #16110d;
  --ink-soft:  rgba(22,17,13,.76);
  --muted:     #6a6058;
  --muted-2:   #988d82;

  --red:       #d81e26;
  --red-hi:    #b8161d;
  --red-ink:   #b3141b;
  --red-deep:  #7d0d12;
  --red-glow:  rgba(216,30,38,.28);
  --on-red:    #ffffff;

  --amber-ink: #8a5d05;
  --amber-bg:  rgba(212,150,20,.11);
  --amber-ln:  rgba(180,132,26,.36);

  --green-ink: #2b7a34;
  --green-bg:  rgba(43,122,52,.09);
  --green-ln:  rgba(43,122,52,.3);

  --hdr-bg:    rgba(250,246,240,.7);
  --hdr-bg-2:  rgba(250,246,240,.94);
  --scrim:     rgba(30,22,16,.42);
  --shadow:    rgba(70,48,28,.16);
  --shadow-lg: rgba(70,48,28,.24);

  --footer-bg:  #16110d;
  --footer-ink: #f7f2ea;
  --footer-line: rgba(255,255,255,.12);
  --footer-mut: rgba(247,242,234,.6);

  --dam-a:  #d81e26;
  --dam-b:  #ffffff;
  --dam-ln: rgba(28,20,14,.14);

  --display: 'Patty Press ES', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --body:    'Anteroly', 'Century Gothic', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --wrap: 1200px;
  --pad:  clamp(18px, 4vw, 40px);

  --ease: cubic-bezier(.22,.75,.3,1);

  color-scheme: light;
}

/* --- Tokens: tema oscuro ------------------------------------------------ */
[data-theme="dark"] {
  --bg:        #0a0a0b;
  --bg-2:      #0f0f12;
  --card:      #17171b;
  --card-2:    #1f1f25;

  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.18);
  --tint:      rgba(255,255,255,.05);
  --tint-2:    rgba(255,255,255,.10);

  --ink:       #f6f1e9;
  --ink-soft:  rgba(246,241,233,.78);
  --muted:     #9d9da8;
  --muted-2:   #6f6f7a;

  --red:       #e01f26;
  --red-hi:    #ff3b33;
  --red-ink:   #ff5a52;
  --red-glow:  rgba(224,31,38,.34);

  --amber-ink: #f2b93b;
  --amber-bg:  rgba(242,185,59,.10);
  --amber-ln:  rgba(242,185,59,.28);

  --green-ink: #6fbf73;
  --green-bg:  rgba(111,191,115,.08);
  --green-ln:  rgba(111,191,115,.3);

  --hdr-bg:    rgba(10,10,11,.62);
  --hdr-bg-2:  rgba(10,10,11,.93);
  --scrim:     rgba(4,4,5,.68);
  --shadow:    rgba(0,0,0,.55);
  --shadow-lg: rgba(0,0,0,.8);

  --footer-bg:  #0f0f12;
  --footer-ink: #f6f1e9;
  --footer-line: rgba(255,255,255,.09);
  --footer-mut: #9d9da8;

  /* en oscuro el blanco puro deslumbra: crema apagada */
  --dam-a:  #cf1c23;
  --dam-b:  #e6dfd3;
  --dam-ln: rgba(255,255,255,.1);

  color-scheme: dark;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* deja libre el header (68px) + la barra de categorías (~54px) */
html { scroll-behavior: smooth; scroll-padding-top: 132px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s var(--ease), color .35s var(--ease);
}
body.is-locked { overflow: hidden; }

/* que [hidden] gane siempre a los display: flex/grid de más abajo */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
svg { fill: currentColor; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* --- Tipografía --------------------------------------------------------- */
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -.005em; }

.eyebrow {
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: .6em; flex-wrap: wrap;
}
.eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); flex: none; }

.stars { display: inline-flex; gap: 2px; color: #e8a317; }
[data-theme="dark"] .stars { color: #f2b93b; }
.stars .half { opacity: .38; }
.stars--lg { gap: 3px; }

/* --- Botones ------------------------------------------------------------ */
.btn {
  --bg-b: transparent; --fg: var(--ink); --bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .78em 1.5em; border-radius: 999px;
  background: var(--bg-b); color: var(--fg); border: 1px solid var(--bd);
  font-size: .95rem; letter-spacing: .01em; white-space: nowrap;
  transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--red { --bg-b: var(--red); --bd: var(--red); --fg: var(--on-red); box-shadow: 0 8px 22px -10px var(--red-glow); }
.btn--red:hover { --bg-b: var(--red-hi); --bd: var(--red-hi); box-shadow: 0 14px 30px -10px var(--red-glow); }
.btn--ghost { background: var(--tint); }
.btn--ghost:hover { background: var(--tint-2); border-color: var(--line-2); }
.btn--sm { padding: .58em 1.05em; font-size: .86rem; }
.btn--lg { padding: .95em 1.9em; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .42; pointer-events: none; }

.iconbtn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  color: var(--muted); transition: background .18s, color .18s;
}
.iconbtn:hover { background: var(--tint-2); color: var(--ink); }

/* --- Aviso / promo (ámbar sutil) ---------------------------------------- */
.promo { background: var(--amber-bg); border-bottom: 1px solid var(--amber-ln); font-size: .85rem; }
.promo__in { display: flex; align-items: center; gap: .85em; padding-block: .6em; }
.promo__tag {
  flex: none; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-ink); border: 1px solid var(--amber-ln); border-radius: 999px; padding: .3em .8em;
}
.promo__txt { color: var(--ink-soft); min-width: 0; }
.promo__txt strong { color: var(--amber-ink); font-weight: 400; }
.promo__more i { font-style: normal; color: var(--muted-2); margin-inline: .45em; }
.promo__x { margin-left: auto; flex: none; color: var(--muted); padding: .4em; transition: color .18s; }
.promo__x:hover { color: var(--amber-ink); }

/* --- Header ------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--hdr-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.hdr.is-stuck { background: var(--hdr-bg-2); border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); height: 68px; }

/* Logotipo: sólo tipografía. Patty Press arriba y, debajo, "Kebabish"
   espaciada en Anteroly con una regla roja que cierra el ancho del lockup. */
.brand { flex: none; display: inline-grid; justify-items: start; line-height: 1; }
.brand__a { font-family: var(--display); font-size: 1.3rem; letter-spacing: -.012em; }
.brand__b {
  justify-self: stretch;
  display: flex; align-items: center; gap: .55em;
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--red-ink); margin-top: .58em; white-space: nowrap;
}
.brand__b::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .5; }
.brand:hover .brand__b::after { opacity: .9; }

.brand--big .brand__a { font-size: 2.4rem; }
.brand--big .brand__b { font-size: .8rem; letter-spacing: .38em; margin-top: .8em; gap: .8em; }

.nav { display: flex; gap: 1.9em; font-size: .92rem; color: var(--muted); }
.nav a { position: relative; padding-block: .3em; transition: color .2s; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--red); transition: right .28s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }

.hdr__act { margin-left: auto; display: flex; align-items: center; gap: .5em; }
.cartbtn { position: relative; }
.cartbtn__n {
  min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 999px;
  background: var(--on-red); color: var(--red); display: grid; place-items: center;
  font-size: .72rem; line-height: 1;
}
.cartbtn.is-bump { animation: bump .42s var(--ease); }
@keyframes bump { 30% { transform: scale(1.13); } 60% { transform: scale(.97); } }

/* interruptor de tema */
.themebtn .i-moon { display: none; }
[data-theme="dark"] .themebtn .i-sun { display: none; }
[data-theme="dark"] .themebtn .i-moon { display: block; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__glow {
  position: absolute; z-index: -1; right: -6%; top: -14%; width: 66vw; height: 66vw;
  max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, var(--red-glow), transparent 64%);
  filter: blur(30px); pointer-events: none; opacity: .75;
}
.hero__in {
  display: grid; grid-template-columns: 1.02fr .98fr;
  column-gap: clamp(28px, 5vw, 70px); align-items: center;
  padding-block: clamp(44px, 7vw, 84px) clamp(30px, 5vw, 52px);
}

.hero__h1 {
  font-size: clamp(2.5rem, 6.6vw, 5.3rem);
  margin: .3em 0 .38em;
}
.hero__h1 span { display: block; }
.hero__h1 .l1 { color: var(--muted); font-size: .58em; }
.hero__h1 .l3 { margin-top: .02em; }
.hero__h1 em { font-style: normal; color: var(--red-ink); }

.hero__sub { max-width: 44ch; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.1rem); }
.hero__cta { display: flex; gap: .7em; flex-wrap: wrap; margin-top: 2em; }

/* foto en tarjeta: el fondo negro del bodegón hace de panel */
.hero__media { position: relative; }
.hero__frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/3.1; background: #08080a;
  box-shadow: 0 30px 60px -30px var(--shadow-lg), 0 2px 0 0 var(--line);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 62%; }
.hero__badge {
  position: absolute; left: -14px; bottom: 26px; z-index: 2;
  display: flex; align-items: center; gap: .7em;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .6em 1.1em .6em .75em;
  box-shadow: 0 14px 30px -14px var(--shadow-lg);
}
.hero__badge svg { color: var(--red); flex: none; }
.hero__badge b { font-weight: 400; font-size: .9rem; line-height: 1.2; display: block; }
.hero__badge small { display: block; font-size: .74rem; color: var(--muted); }

.hero__facts {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 38px);
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line);
}
.fact { display: flex; align-items: center; gap: .7em; }
.fact b { display: block; font-size: .98rem; font-weight: 400; line-height: 1.25; }
.fact small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.fact__i { color: var(--red); flex: none; }
.fact--live b { color: var(--green-ink); }
.fact--live.is-closed b { color: var(--amber-ink); }
.pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--green-ink); flex: none;
  box-shadow: 0 0 0 0 rgba(43,122,52,.55); animation: pulse 2.4s infinite;
}
.is-closed .pulse { background: var(--amber-ink); box-shadow: 0 0 0 0 rgba(180,132,26,.5); }
@keyframes pulse { 70% { box-shadow: 0 0 0 11px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* --- Cenefa de damero (a sangre) ---------------------------------------- */
/* Tres filas de cuadros rojo/blanco: la cenefa clásica del imbiss turco.
   repeating-conic-gradient dibuja el tablero con un solo fondo. */
.damero {
  --cell: clamp(11px, 1.35vw, 17px);
  height: calc(var(--cell) * 3);
  background: repeating-conic-gradient(var(--dam-a) 0% 25%, var(--dam-b) 0% 50%)
              0 0 / calc(var(--cell) * 2) calc(var(--cell) * 2);
  border-block: 1px solid var(--dam-ln);
}

/* --- Cabecera de sección ------------------------------------------------ */
.shead { max-width: 640px; padding-block: clamp(52px, 8vw, 88px) clamp(24px, 4vw, 38px); }
.shead--center { max-width: 720px; margin-inline: auto; text-align: center; }
.shead--center .eyebrow { justify-content: center; }
.shead__h { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: .35em 0 .4em; }
.shead__p { color: var(--muted); max-width: 48ch; }
.shead--tight { padding-bottom: clamp(14px, 2.4vw, 22px); }
.shead--tight .shead__h { margin: 0; }

/* --- Barra de categorías ------------------------------------------------ */
.catbar {
  position: sticky; top: 68px; z-index: 40;
  background: var(--hdr-bg-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(34px, 5vw, 54px);
}
.catbar__in { padding-inline: 0; }
.catbar__scroll {
  display: flex; gap: .4em; overflow-x: auto; scrollbar-width: none;
  padding: .7em var(--pad); scroll-padding-inline: var(--pad);
}
.catbar__scroll::-webkit-scrollbar { display: none; }
.cat {
  flex: none; padding: .55em 1.05em; border-radius: 999px;
  border: 1px solid transparent; color: var(--muted);
  font-size: .9rem; white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
}
.cat:hover { color: var(--ink); background: var(--tint); }
.cat.is-on { color: var(--on-red); background: var(--red); border-color: var(--red); box-shadow: 0 6px 18px -10px var(--red-glow); }

/* --- Panel de la carta (una categoría cada vez) -------------------------- */
.menu__panel { padding-bottom: clamp(48px, 7vw, 84px); }
.menu__panel.is-in { animation: panel .34s var(--ease) both; }
@keyframes panel { from { opacity: 0; transform: translateY(10px); } }
.menu__panel:focus { outline: none; }

.grp__hd { display: flex; align-items: baseline; gap: .8em; padding-bottom: 1em; margin-bottom: 1.3em; border-bottom: 1px solid var(--line); }
.grp__hd h3 { font-size: clamp(1.45rem, 2.8vw, 1.9rem); }
.grp__hd small { color: var(--muted-2); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.grp__hd .n { margin-left: auto; color: var(--muted-2); font-size: .8rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

/* Tarjeta que gira: el frente manda en la altura y el reverso va absoluto
   encima, rotado 180°. backface-visibility oculta la cara de atrás. */
/* min-height: el reverso lleva bastante texto y sin un suelo se queda
   con una rendija de scroll ridícula. */
.item { perspective: 1500px; cursor: pointer; min-height: 500px; }
.item__flip {
  position: relative; height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s var(--ease);
}
.item.is-flipped .item__flip { transform: rotateY(180deg); }

.item__face {
  border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.item__front { display: flex; flex-direction: column; height: 100%; }
.item__back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: flex; flex-direction: column;
}
.item:hover .item__face { border-color: var(--line-2); box-shadow: 0 12px 26px -20px var(--shadow-lg); }
.item.is-added .item__front { border-color: var(--red); }

.item__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #0b0b0d; }
.item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.item:hover .item__img img { transform: scale(1.05); }

.item__turn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,10,11,.55); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, transform .2s var(--ease);
}
.item__turn:hover { background: var(--red); transform: scale(1.1); }

.item__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: .95em 1.05em 1.05em; }
/* Patty Press cierra los contraformas en tamaños pequeños: un poco más de
   cuerpo y de prosa para que los nombres se lean bien. */
.item__name { font-family: var(--display); font-size: 1.12rem; line-height: 1.16; letter-spacing: .008em; }
.item__desc { font-size: .84rem; color: var(--muted); line-height: 1.5; margin-top: .4em; }
.item__foot { display: flex; align-items: center; gap: .7em; margin-top: auto; padding-top: .8em; }
.item__price { font-family: var(--display); font-size: 1.18rem; }
.item__add {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4em;
  padding: .48em .95em .48em .75em; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: .84rem;
  transition: background .2s, border-color .2s, color .2s;
}
.item__add:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }
.item__add svg { flex: none; }

/* --- Reverso de la tarjeta ---------------------------------------------- */
.back__hd {
  display: flex; align-items: center; gap: .6em;
  padding: .85em 1.05em .7em; border-bottom: 1px solid var(--line);
}
.back__hd h4 { font-family: var(--display); font-size: 1.1rem; line-height: 1.15; min-width: 0; letter-spacing: .008em; }
.back__x { margin-left: auto; flex: none; color: var(--muted); padding: .25em; border-radius: 50%; transition: color .18s, background .18s; }
.back__x:hover { color: var(--red); background: var(--tint); }

.back__scroll {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: .9em 1.05em; display: grid; gap: 1em; align-content: start;
  /* difumina el final para que se vea que hay más abajo */
  --f: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: var(--f); -webkit-mask-image: var(--f);
}
.back__scroll::-webkit-scrollbar { width: 5px; }
.back__scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.back__blk h5 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin-bottom: .6em;
}
.back__blk h5 i { font-style: normal; text-transform: none; letter-spacing: .02em; color: var(--muted-2); }
.back__blk p { font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.back__none { color: var(--muted); }

.back__al { display: flex; flex-wrap: wrap; gap: .4em; }
.back__al span {
  font-size: .85rem; letter-spacing: .01em;
  padding: .3em .8em; border-radius: 999px;
  color: var(--amber-ink); border: 1px solid var(--amber-ln); background: var(--amber-bg);
}

/* --- Opciones pulsables ------------------------------------------------- */
.opts { display: grid; gap: .3em; }
.opt {
  display: flex; align-items: center; gap: .65em; width: 100%;
  padding: .48em .6em .48em .5em; border-radius: 10px;
  border: 1px solid transparent; text-align: left;
  font-size: .92rem; color: var(--ink-soft);
  transition: background .16s, border-color .16s, color .16s;
}
.opt:hover { background: var(--tint); border-color: var(--line); }
.opt__box {
  flex: none; width: 21px; height: 21px; border-radius: 6px;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  color: transparent; transition: background .16s, border-color .16s, color .16s;
}
.opt__box svg { display: block; }
.opt__n { min-width: 0; }
.opt__p { margin-left: auto; flex: none; font-weight: 400; font-size: .86rem; color: var(--muted); }

.opt.is-on { color: var(--ink); border-color: rgba(216,30,38,.28); background: rgba(216,30,38,.06); }
.opt.is-on .opt__box { background: var(--red); border-color: var(--red); color: var(--on-red); }
.opt.is-on .opt__p { color: var(--red-ink); }

.item__back .item__foot { padding: .75em 1.05em .95em; border-top: 1px solid var(--line); margin-top: 0; }

.tags { display: flex; gap: .35em; flex-wrap: wrap; margin-top: .5em; }
.tag {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28em .65em; border-radius: 999px; border: 1px solid; line-height: 1.4;
}
.tag--plain { color: var(--muted); border-color: var(--line-2); background: var(--tint); }
.tag--amber { color: var(--amber-ink); border-color: var(--amber-ln); background: var(--amber-bg); }
.tag--red   { color: var(--red-ink); border-color: rgba(216,30,38,.34); background: rgba(216,30,38,.08); }
.tag--green { color: var(--green-ink); border-color: var(--green-ln); background: var(--green-bg); }

.qty { margin-left: auto; display: inline-flex; align-items: center; gap: .1em; border: 1px solid var(--red); border-radius: 999px; overflow: hidden; }
.qty button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--red); transition: background .18s; }
.qty button:hover { background: rgba(216,30,38,.12); }
.qty span { min-width: 22px; text-align: center; font-size: .9rem; }

/* --- Reseñas ------------------------------------------------------------ */
.rv { position: relative; background: var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.rv__score { display: flex; align-items: center; justify-content: center; gap: .7em; margin-top: 1.1em; }
.rv__score b { font-family: var(--display); font-size: 2rem; line-height: 1; }
.rv__score small { color: var(--muted); font-size: .84rem; }
.rv__hint {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 1.4em;
  font-size: .8rem; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: 999px; padding: .45em 1.1em;
}
.rv__hint svg { color: var(--muted-2); }
.rv__demo { margin-top: .9em; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); opacity: .8; }

.rv__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; height: clamp(480px, 74vh, 700px);
  padding: 0 var(--pad) clamp(58px, 8vw, 90px);
  max-width: var(--wrap); margin-inline: auto;
}
.rv__col {
  position: relative; overflow: hidden;
  cursor: grab; touch-action: pan-y;   /* en móvil manda el scroll de la página */
  -webkit-user-select: none; user-select: none;
  --fade: linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
  mask-image: var(--fade); -webkit-mask-image: var(--fade);
}
.rv__col.is-drag { cursor: grabbing; }
.rv__track { display: flex; flex-direction: column; gap: 16px; will-change: transform; }

.rvcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15em 1.25em 1.3em;
  box-shadow: 0 2px 10px -8px var(--shadow);
  transition: border-color .25s;
}
.rv__col:hover .rvcard { border-color: var(--line-2); }
.rvcard__hd { display: flex; align-items: center; gap: .7em; margin-bottom: .75em; }
.rvcard__av {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--display); font-size: .82rem; color: #fff;
  background: linear-gradient(140deg, var(--red), var(--red-deep));
}
.rvcard__who { min-width: 0; }
.rvcard__who b { display: block; font-weight: 400; font-size: .93rem; line-height: 1.25; }
.rvcard__who small { display: block; font-size: .74rem; color: var(--muted-2); }
.rvcard__st { margin-left: auto; flex: none; }
.rvcard__st svg { width: 13px; height: 13px; }
.rvcard p { font-size: .89rem; line-height: 1.62; color: var(--ink-soft); }
.rvcard__src { display: flex; align-items: center; gap: .45em; margin-top: .9em; font-size: .7rem; color: var(--muted-2); letter-spacing: .06em; }
.rvcard__src::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); }

/* remate inferior de la sección */
.rv::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 2;
  background: linear-gradient(to top, var(--bg-2), transparent); pointer-events: none;
}

/* --- Local -------------------------------------------------------------- */
.visit__in {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 68px);
  align-items: center; padding-block: clamp(64px, 9vw, 108px);
}
.visit__p { color: var(--muted); margin-top: 1.3em; max-width: 44ch; }
.visit__meta { display: grid; gap: 1.05em; margin-top: 2.1em; }
.visit__meta li { display: flex; gap: .9em; align-items: flex-start; }
.visit__meta svg { color: var(--red); flex: none; margin-top: 3px; }
.visit__meta b { font-weight: 400; display: block; line-height: 1.3; }
.visit__meta small { color: var(--muted); font-size: .82rem; }
.visit__cta { display: flex; gap: .7em; flex-wrap: wrap; margin-top: 2.3em; }

/* Foto real de la fachada: para encontrar el sitio vale más que un mapa falso */
.mapcard {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 20px 44px -30px var(--shadow-lg);
}
.mapcard img { width: 100%; height: 100%; object-fit: cover; }
.mapcard__label {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: .75em;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .7em 1em;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.5);
}
.mapcard__label svg { color: var(--red); flex: none; }
.mapcard__label b { display: block; font-family: var(--display); font-size: 1rem; font-weight: 400; }
.mapcard__label small { color: var(--muted); font-size: .78rem; }

/* --- Aviso en bloque (ámbar sutil) -------------------------------------- */
.notice {
  display: flex; gap: .85em; align-items: flex-start; margin-top: 16px;
  background: var(--amber-bg); border: 1px solid var(--amber-ln);
  border-radius: var(--r); padding: .95em 1.15em;
  font-size: .86rem; color: var(--ink-soft);
}
.notice b { color: var(--amber-ink); font-weight: 400; }
.notice__tag {
  flex: none; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-ink); border: 1px solid var(--amber-ln); border-radius: 999px; padding: .28em .7em; margin-top: 1px;
}
.notice--slim { margin: 0 0 14px; padding: .75em .95em; font-size: .82rem; }

/* --- Footer (siempre oscuro: cierra la página) -------------------------- */
.ftr { background: var(--footer-bg); color: var(--footer-ink); }
.ftr__in { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 5vw, 60px); padding-block: clamp(48px, 7vw, 78px) 40px; }
.ftr .brand__b { color: #ff5a52; }
.ftr__brand p { color: var(--footer-mut); font-size: .88rem; margin-top: 1.1em; max-width: 34ch; }
.ftr__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ftr__nav h3 { font-size: .96rem; margin-bottom: .9em; }
.ftr__nav a { display: block; color: var(--footer-mut); font-size: .87rem; padding-block: .28em; transition: color .18s; }
.ftr__nav a:hover { color: var(--footer-ink); }
.ftr__bot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 22px; border-top: 1px solid var(--footer-line);
  color: var(--footer-mut); font-size: .78rem;
}

/* --- Barra móvil -------------------------------------------------------- */
.mbar {
  position: fixed; z-index: 55; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  display: none; align-items: center; gap: .8em;
  background: var(--red); color: var(--on-red); border-radius: 999px;
  padding: .85em 1.3em; box-shadow: 0 16px 36px -14px rgba(0,0,0,.5);
  animation: rise .32s var(--ease);
}
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.mbar__n { min-width: 24px; height: 24px; border-radius: 999px; background: rgba(0,0,0,.24); display: grid; place-items: center; font-size: .8rem; }
.mbar__l { font-size: .95rem; }
.mbar__t { margin-left: auto; font-family: var(--display); font-size: 1.05rem; }

/* --- Carrito ------------------------------------------------------------ */
.scrim {
  position: fixed; inset: 0; z-index: 70; background: var(--scrim);
  backdrop-filter: blur(3px); animation: fade .28s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.cart {
  position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 60px -40px var(--shadow-lg);
  animation: slide .34s var(--ease);
}
@keyframes slide { from { transform: translateX(100%); } }

.cart__hd { display: flex; align-items: center; gap: 1em; padding: 18px var(--pad) 14px; }
.cart__hd h2 { font-size: 1.45rem; }
.cart__hd .iconbtn { margin-left: auto; }

.modes { display: flex; gap: 6px; margin: 0 var(--pad) 4px; padding: 5px; background: var(--tint); border-radius: 999px; }
.modes__b { flex: 1; padding: .6em; border-radius: 999px; font-size: .87rem; color: var(--muted); transition: background .2s, color .2s; }
.modes__b.is-on { background: var(--red); color: var(--on-red); }

.cart__body { flex: 1; overflow-y: auto; padding: 18px var(--pad); display: grid; gap: 12px; align-content: start; }
.cart__body::-webkit-scrollbar { width: 8px; }
.cart__body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.empty { text-align: center; padding: 12vh 0; color: var(--muted); }
.empty svg { margin: 0 auto 1em; color: var(--line-2); }
.empty b { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--ink); font-weight: 400; margin-bottom: .35em; }
.empty p { font-size: .86rem; }

.line { display: grid; grid-template-columns: 56px 1fr auto; gap: .9em; align-items: center; }
.line__img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #0b0b0d; }
.line__nm { font-size: .92rem; line-height: 1.3; }
.line__opts { font-size: .76rem; line-height: 1.35; color: var(--red-ink); margin-top: .1em; }
.line__pr { font-size: .78rem; color: var(--muted); }
.line__rt { text-align: right; display: grid; gap: .4em; justify-items: end; }
.line__tot { font-family: var(--display); font-size: 1rem; }
.line .qty { border-color: var(--line-2); }
.line .qty button { width: 26px; height: 26px; color: var(--muted); }
.line .qty button:hover { color: var(--red); background: rgba(216,30,38,.1); }
.line .qty span { font-size: .84rem; }

.cart__foot { padding: 16px var(--pad) max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.sums { display: grid; gap: .45em; margin-bottom: 1.1em; font-size: .9rem; }
.sums > div { display: flex; justify-content: space-between; gap: 1em; }
.sums dt { color: var(--muted); }
.sums__tot { padding-top: .6em; border-top: 1px solid var(--line); }
.sums__tot dt { color: var(--ink) !important; }
.sums__tot dd { font-family: var(--display); font-size: 1.3rem; }

/* --- Checkout ----------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--scrim); backdrop-filter: blur(4px); animation: fade .25s var(--ease); overflow-y: auto; }
.modal__card {
  width: min(520px, 100%); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px clamp(18px, 4vw, 30px) clamp(20px, 4vw, 28px);
  box-shadow: 0 40px 80px -40px var(--shadow-lg);
  animation: pop .3s var(--ease); margin-block: auto;
}
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.modal__hd { display: flex; align-items: center; margin-bottom: 1.2em; }
.modal__hd h2 { font-size: 1.5rem; }
.modal__hd .iconbtn { margin-left: auto; }

.co__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fld { display: grid; gap: .4em; }
.fld--full { grid-column: 1 / -1; }
.fld > span { font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.fld > span i { font-style: normal; color: var(--muted-2); }
.fld input {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .72em .9em; font-size: .92rem;
  transition: border-color .18s, box-shadow .18s;
}
.fld input::placeholder { color: var(--muted-2); }
.fld input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,30,38,.14); }
.fld input.err { border-color: var(--red); background: rgba(216,30,38,.05); }

.pay { border: 0; padding: 0; margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pay legend { font-size: .78rem; color: var(--muted); letter-spacing: .04em; margin-bottom: .6em; }
.pay label { flex: 1; min-width: 110px; }
.pay input { position: absolute; opacity: 0; pointer-events: none; }
.pay span {
  display: block; text-align: center; padding: .68em; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); font-size: .88rem; color: var(--muted);
  background: var(--card);
  transition: border-color .18s, color .18s, background .18s;
}
.pay label:hover span { color: var(--ink); }
.pay input:checked + span { border-color: var(--red); color: var(--ink); background: rgba(216,30,38,.08); }
.pay input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.co__tot { display: flex; justify-content: space-between; align-items: baseline; padding: .9em 0 1.1em; border-top: 1px solid var(--line); }
.co__tot span { color: var(--muted); font-size: .9rem; }
.co__tot b { font-family: var(--display); font-size: 1.55rem; font-weight: 400; }

.done { text-align: center; padding: 1em 0 .5em; }
.done__ok {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 1.2em;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--red), var(--red-deep));
  box-shadow: 0 14px 30px -12px var(--red-glow);
  animation: pop .4s var(--ease) backwards .05s;
}
.done h3 { font-size: 1.7rem; margin-bottom: .5em; }
.done p { color: var(--muted); font-size: .92rem; margin-bottom: 1.8em; }

/* --- Toast (invertido respecto a la página) ----------------------------- */
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 26px; translate: -50% 0;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: .7em 1.3em; font-size: .88rem;
  box-shadow: 0 18px 40px -16px var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .26s, translate .26s var(--ease);
}
.toast.is-on { opacity: 1; translate: -50% -8px; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .rv__cols { grid-template-columns: repeat(2, 1fr); }
  .visit__in { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; row-gap: clamp(28px, 5vw, 42px); }
  .hero__media { order: -1; }
  .hero__frame { aspect-ratio: 16/10; }
  .hero__badge { left: auto; right: 14px; bottom: -16px; }
}

@media (max-width: 860px) {
  .nav, .hdr__tel { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .hero__facts { gap: 16px; }
  .fact { width: 100%; }
  .rv__cols { grid-template-columns: 1fr; height: clamp(430px, 66vh, 560px); }
  .rv__hint { font-size: .75rem; }
  .co__grid { grid-template-columns: 1fr; }
  .mbar { display: flex; }
  body:has(.mbar:not([hidden])) .ftr__bot { padding-bottom: 76px; }
  .cartbtn__lbl { display: none; }
  .promo__txt { font-size: .8rem; }
  .promo__more:last-child { display: none; }
  .catbar { top: 60px; }
  .hdr__in { height: 60px; }
  /* una por fila: a dos columnas la tarjeta queda demasiado estrecha para
     que el reverso se lea, y la foto es lo que manda aquí */
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .item { min-height: 0; }
  .item__img { aspect-ratio: 16/10; }
  .back__scroll { gap: .85em; }
  /* el título de la categoría a su línea; la nota y el recuento debajo */
  .grp__hd { flex-wrap: wrap; row-gap: .15em; }
  .grp__hd h3 { flex-basis: 100%; }
}

@media (max-width: 560px) {
  .promo__in { gap: .6em; }
  .promo__more { display: none; }
}

/* --- Accesibilidad ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv__col { overflow-y: auto; touch-action: auto; }
}