/* ==========================================================================
   Restaurante Mestizos — menú digital
   Paleta tomada del logo: naranja fuego sobre azul-noche.
   Mobile-first. Todas las animaciones respetan prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------- Tokens -------------------------------- */
:root {
  /* Color — negro de base y superficies translúcidas por encima, para que
     todo el sitio comparta una misma profundidad sin bloques opacos. */
  --noche:        #000000;
  --noche-2:      rgba(255, 255, 255, .022);
  --superficie:   rgba(255, 255, 255, .045);
  --superficie-2: rgba(255, 255, 255, .075);
  --borde:        rgba(255, 255, 255, .1);
  --borde-fuerte: rgba(255, 255, 255, .16);
  --guia:         rgba(242, 239, 233, .2);   /* punteado nombre → precio */

  --fuego:        #f5821f;   /* naranja del logo */
  --fuego-claro:  #ff9f45;
  --fuego-tenue:  rgba(245, 130, 31, .14);

  --tinta:        #f2efe9;   /* texto principal  — 16.5:1 sobre --noche */
  --tinta-suave:  #b6afa6;   /* texto secundario —  7.8:1 sobre --noche */
  --tinta-tenue:  #7d7791;

  --verde-wa:     #25d366;

  /* Tipografía — League Spartan en toda la página (títulos y cuerpo) */
  --fuente-ui:      'League Spartan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-display: 'League Spartan', system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --ancho: 1180px;
  --radio: 16px;
  --radio-sm: 10px;

  /* Alto real de la barra sticky (lo calcula app.js) */
  --barra-alto: 128px;

  --sombra: 0 18px 40px -18px rgba(0, 0, 0, .85);
  --sombra-alta: 0 28px 60px -22px rgba(0, 0, 0, .9);

  /* Movimiento — curvas fuertes: las de CSS por defecto se sienten flojas.
     Nunca ease-in en UI: arranca lento justo cuando el usuario está mirando. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --dur-toque:  140ms;   /* respuesta al pulsar */
  --dur-rapida: 200ms;   /* hover, color, chips */
  --dur-media:  260ms;   /* tarjetas, imágenes */

  --transicion: var(--dur-rapida) var(--ease-out);
}

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

html {
  scroll-behavior: smooth;
  /* Deja aire para la barra sticky al saltar con anclas */
  scroll-padding-top: calc(var(--barra-alto) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Varias reglas de abajo fijan `display`, lo que anularía el `[hidden]` del
   navegador y dejaría visibles elementos que el buscador oculta. */
[hidden] { display: none !important; }

h1, h2, h3, p, dl, dd, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg[data-relleno], .boton__icono--relleno, .wa-flotante svg { fill: currentColor; stroke: none; }

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 3px solid var(--fuego-claro);
  outline-offset: 3px;
  border-radius: 6px;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.salta-al-contenido {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  transform: translateY(-160%);
  background: var(--fuego); color: #1a0c00;
  padding: .7rem 1.1rem; border-radius: var(--radio-sm);
  font-weight: 600; text-decoration: none;
  transition: transform var(--transicion);
}
.salta-al-contenido:focus { transform: translateY(0); }

/* -------------------------------- Botones --------------------------------- */
.boton {
  --bg: transparent; --fg: var(--tinta); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem;
  min-height: 48px;                        /* objetivo táctil cómodo */
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bd); border-radius: 100px;
  font-size: .98rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;              /* elimina el retardo de 300 ms */
  transition: transform var(--dur-toque) var(--ease-out),
              background var(--dur-rapida) var(--ease-out),
              border-color var(--dur-rapida) var(--ease-out),
              color var(--dur-rapida) var(--ease-out),
              box-shadow var(--dur-rapida) var(--ease-out);
}
/* El hover sólo en punteros reales: en táctil se quedaría pegado tras el tap */
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-2px); }
}
/* Feedback inmediato al pulsar: la interfaz responde al dedo */
.boton:active { transform: scale(.97); }
.boton__icono { width: 20px; height: 20px; flex: none; }

.boton--primario { --bg: var(--fuego); --fg: #1a0c00; --bd: var(--fuego); }
.boton--primario:hover { --bg: var(--fuego-claro); --bd: var(--fuego-claro); }

.boton--fantasma { --bd: rgba(242, 239, 233, .28); }
.boton--fantasma:hover { --bd: var(--fuego); --fg: var(--fuego-claro); }

.boton--contorno { --bd: var(--fuego); --fg: var(--fuego-claro); }
.boton--contorno:hover { --bg: var(--fuego-tenue); }

.boton--whatsapp { --bg: var(--verde-wa); --fg: #04240f; --bd: var(--verde-wa); }
.boton--whatsapp:hover { --bg: #3ee27a; --bd: #3ee27a; }

.boton--grande { padding: 1.05rem 2rem; font-size: 1.06rem; }

/* ============================== HERO ====================================== */
.hero {
  position: relative;
  display: grid; place-items: center;
  min-height: 100svh;
  padding: 5rem 1.25rem 4.5rem;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__fondo { position: absolute; inset: 0; z-index: -1; }

/* Loop de fondo: las fotos se cruzan por opacidad (compuesto en GPU) y la
   activa hace un zoom lento, así el hero respira sin costar un video. */
.hero__loop { position: absolute; inset: 0; }
.hero__foto {
  position: absolute; inset: 0; display: block;
  opacity: 0;
  transition: opacity 1.4s var(--ease-in-out);
}
.hero__foto.es-activa { opacity: 1; }
.hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  transform: scale(1.06);
  transition: transform 7.5s linear;
}
.hero__foto.es-activa img { transform: scale(1); }

/* Velo en tres capas: oscurece lo justo para que el texto cumpla AA
   y deja respirar la comida en los bordes */
.hero__velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 65% at 50% 45%, rgba(0, 0, 0,.70) 0%, rgba(0, 0, 0,.90) 62%, var(--noche) 100%),
    linear-gradient(180deg, var(--noche) 0%, rgba(0, 0, 0,.35) 26%, rgba(0, 0, 0,.55) 62%, var(--noche) 100%);
}

/* Dos manchas de luz que respiran lentamente */
.hero__brillo {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}
.hero__brillo--uno {
  top: -22%; left: -18%;
  background: radial-gradient(circle, rgba(245,130,31,.42) 0%, transparent 66%);
  animation: deriva-a 20s ease-in-out infinite alternate;
}
.hero__brillo--dos {
  bottom: -28%; right: -20%;
  background: radial-gradient(circle, rgba(120,40,180,.30) 0%, transparent 66%);
  animation: deriva-b 26s ease-in-out infinite alternate;
}
@keyframes deriva-a { to { transform: translate3d(9%, 7%, 0) scale(1.12); } }
@keyframes deriva-b { to { transform: translate3d(-8%, -6%, 0) scale(1.08); } }

/* Chispas tenues, puro CSS: sin canvas ni librerías */
.hero__particulas {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,175,90,.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,175,90,.40), transparent),
    radial-gradient(2px   2px   at 42% 68%, rgba(255,175,90,.30), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,175,90,.45), transparent),
    radial-gradient(1.5px 1.5px at 25% 84%, rgba(255,175,90,.35), transparent),
    radial-gradient(2px   2px   at 62% 38%, rgba(255,175,90,.25), transparent);
  animation: chispas 9s ease-in-out infinite alternate;
}
@keyframes chispas {
  from { opacity: .35; transform: translateY(0); }
  to   { opacity: .85; transform: translateY(-14px); }
}

/* Cenefa con el motivo geométrico del logo */
.hero__cenefa {
  position: absolute; left: 0; right: 0; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='22' viewBox='0 0 60 22'%3E%3Cpath d='M0 21L15 3l15 18M30 21L45 3l15 18' fill='none' stroke='%23f5821f' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 60px 22px;
  background-repeat: repeat-x;
  opacity: .5;
}
.hero__cenefa--arriba { top: 22px; }
.hero__cenefa--abajo  { bottom: 22px; transform: scaleY(-1); }

.hero__contenido { max-width: 44rem; }

/* Contenedor del logo: ancla el humo que sube por detrás */
.hero__marca {
  position: relative;
  width: min(272px, 62vw);
  margin: 0 auto 1.6rem;
  aspect-ratio: 1;
}

.hero__logo {
  position: relative; z-index: 2;
  width: 100%; height: auto;
  filter: drop-shadow(0 12px 34px rgba(245, 130, 31, .34));
  /* Entra desde 0.92, nunca desde 0: nada aparece de la nada */
  animation: entra-logo 1s var(--ease-out) both;
  will-change: transform;
}
@keyframes entra-logo {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* Aros que orbitan el sello, con el punteado del patrón tribal.
   Rotación muy lenta (0,02 Hz): da vida sin llamar la atención. */
.hero__aro {
  position: absolute; z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: aparece-aro 900ms var(--ease-out) 500ms both,
             gira-aro 44s linear infinite;
}
.hero__aro--uno {
  inset: -7%;
  border: 1.5px dashed rgba(245, 130, 31, .32);
}
.hero__aro--dos {
  inset: -14%;
  border: 1px dotted rgba(245, 130, 31, .2);
  animation-duration: 900ms, 68s;
  animation-direction: normal, reverse;
}
@keyframes gira-aro   { to { transform: rotate(360deg); } }
@keyframes aparece-aro { from { opacity: 0; } to { opacity: 1; } }

/* Destello: una luz recorre el sello, recortada con el propio PNG del logo
   para que sólo brille sobre la marca. Se repite 3 veces y se detiene. */
.hero__destello {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  -webkit-mask: url(../img/logo-mestizos.png) center / contain no-repeat;
          mask: url(../img/logo-mestizos.png) center / contain no-repeat;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(255, 246, 232, .85) 50%,
    transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  /* Movimiento constante: lineal, como un reflejo que cruza de verdad */
  animation: destello 5.5s linear 1.4s 3 both;
}
@keyframes destello {
  0%        { background-position: 170% 0; }
  30%, 100% { background-position: -70% 0; }
}

/* Humo de parrilla: cinco volutas que suben, se ensanchan y se disuelven
   detrás del logo. Puro CSS, sin canvas. */
.hero__humo {
  position: absolute; z-index: 1;
  left: 50%; bottom: 42%;
  width: 60%; height: 90%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: .8;
}
.hero__humo span {
  position: absolute; bottom: 0; left: 50%;
  width: 36%; aspect-ratio: 1;
  border-radius: 50%;
  /* Núcleo blanco-cálido (humo) con reborde naranja (brasa) */
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 240, 224, .6) 0%,
    rgba(255, 190, 130, .32) 40%,
    rgba(245, 130, 31, .14) 62%,
    transparent 74%);
  transform: translateX(-50%) scale(.4);
  animation: sube-humo 6s ease-in infinite;
}
.hero__humo span:nth-child(1) { left: 38%; animation-delay: 0s;   animation-duration: 6.5s; }
.hero__humo span:nth-child(2) { left: 54%; animation-delay: 1.3s; animation-duration: 7.2s; }
.hero__humo span:nth-child(3) { left: 46%; animation-delay: 2.6s; animation-duration: 6.8s; }
.hero__humo span:nth-child(4) { left: 60%; animation-delay: 3.7s; animation-duration: 7.6s; }
.hero__humo span:nth-child(5) { left: 42%; animation-delay: 4.8s; animation-duration: 6.2s; }
@keyframes sube-humo {
  0%   { opacity: 0; transform: translate(-50%, 10%) scale(.35); }
  22%  { opacity: .85; }
  100% { opacity: 0; transform: translate(-64%, -115%) scale(1.5); }
}

.hero__kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .34rem .95rem .34rem .8rem;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(245, 130, 31, .34);
  border-radius: 100px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fuego-claro);
  animation: entra-arriba 900ms cubic-bezier(.16,1,.3,1) 120ms both;
}
.hero__punto {
  width: 7px; height: 7px; flex: none;
  background: var(--fuego); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(245, 130, 31, .22);
}

.hero__titulo {
  margin: .55rem 0 1.1rem;
  font-family: var(--fuente-display);
  text-transform: uppercase;
  line-height: .96;
  animation: entra-arriba 900ms cubic-bezier(.16,1,.3,1) 200ms both;
}
/* Dos pesos y tamaños contrastados en vez de itálica genérica:
   la primera línea fina y espaciada, la segunda gruesa y grande. */
.hero__linea-uno {
  display: block;
  font-size: clamp(1.15rem, 4.2vw, 1.9rem);
  font-weight: 500; letter-spacing: .16em;
  color: var(--tinta-suave);
}
.hero__linea-dos {
  display: block;
  margin-top: .14em;
  /* Denk One: display de un solo peso, ancho y con carácter */
  font-family: 'Denk One', var(--fuente-display);
  font-size: clamp(2.6rem, 10.5vw, 5rem);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: .98;
}
/* Palabra clave en naranja, subrayada por un trazo de pincel dibujado */
.hero__realce {
  position: relative; color: var(--fuego); white-space: nowrap;
}
.hero__realce::after {
  content: ''; position: absolute; left: -2%; right: -2%; bottom: -.06em;
  height: .14em;
  background: var(--fuego);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: traza-realce 700ms var(--ease-out) 1s forwards;
}
@keyframes traza-realce { to { transform: scaleX(1); } }

.hero__bajada {
  max-width: 34rem; margin: 0 auto;
  color: var(--tinta-suave); font-size: 1.06rem;
  animation: entra-arriba 900ms cubic-bezier(.16,1,.3,1) 300ms both;
}

.hero__acciones {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  margin-top: 2rem;
  animation: entra-arriba 900ms cubic-bezier(.16,1,.3,1) 400ms both;
}

@keyframes entra-arriba {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Indicador de scroll: una línea que se llena hacia abajo */
.hero__pista {
  position: absolute; bottom: 54px; left: 50%;
  width: 1px; height: 46px;
  transform: translateX(-50%);
  background: rgba(242, 239, 233, .16);
  overflow: hidden;
  animation: entra-arriba 900ms var(--ease-out) 700ms both;
}
.hero__pista-linea {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--fuego));
  animation: baja-linea 2.4s var(--ease-in-out) infinite;
}
@keyframes baja-linea {
  0%        { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

/* ====================== BARRA STICKY: BUSCADOR + TABS ===================== */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
/* Sombra sutil sólo cuando ya está pegada arriba */
.barra.esta-pegada { box-shadow: 0 12px 30px -18px #000; }

.barra__interior {
  max-width: var(--ancho); margin: 0 auto;
  padding: .7rem 1rem .55rem;
}

.barra__fila { display: flex; align-items: center; gap: .7rem; }

.barra__marca {
  flex: none; width: 40px; height: 40px;
  display: none; place-items: center;
  opacity: 0; transform: scale(.7);
  transition: opacity var(--transicion), transform var(--transicion);
}
.barra.esta-pegada .barra__marca { opacity: 1; transform: scale(1); }
@media (min-width: 700px) { .barra__marca { display: grid; } }

/* -------- Buscador -------- */
.buscador {
  position: relative; display: flex; align-items: center; flex: 1;
}
.buscador__icono {
  position: absolute; left: 14px;
  width: 19px; height: 19px;
  color: var(--tinta-tenue); pointer-events: none;
}
.buscador__campo {
  width: 100%;
  padding: .8rem 2.7rem;
  background: var(--superficie);
  color: var(--tinta);
  border: 1.5px solid var(--borde);
  border-radius: 100px;
  font: inherit; font-size: 1rem;         /* 16px evita el zoom en iOS */
  transition: border-color var(--transicion), background var(--transicion);
}
.buscador__campo::placeholder { color: var(--tinta-tenue); }
.buscador__campo:focus {
  outline: none;
  border-color: var(--fuego);
  background: var(--superficie-2);
}
.buscador__campo:focus-visible { outline: 3px solid var(--fuego-claro); outline-offset: 2px; }
.buscador__campo::-webkit-search-cancel-button { display: none; }

.buscador__limpiar {
  position: absolute; right: 8px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: none; border: 0; border-radius: 50%;
  color: var(--tinta-suave); cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.buscador__limpiar svg { width: 17px; height: 17px; }
.buscador__limpiar:hover { background: var(--superficie-2); color: var(--tinta); }

/* -------- Tabs / chips de categoría -------- */
.tabs {
  display: flex; gap: .45rem;
  margin-top: .6rem;
  padding-bottom: .3rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__chip {
  flex: none;
  padding: .5rem 1rem;
  min-height: 44px;                        /* mínimo táctil de 44 pt */
  display: inline-flex; align-items: center;
  background: var(--superficie);
  border: 1.5px solid transparent;
  border-radius: 100px;
  color: var(--tinta-suave);
  font-size: .9rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-rapida) var(--ease-out),
              background var(--dur-rapida) var(--ease-out),
              border-color var(--dur-rapida) var(--ease-out),
              transform var(--dur-toque) var(--ease-out);
}
.tabs__chip:hover { color: var(--tinta); border-color: var(--borde); }
.tabs__chip:active { transform: scale(.95); }
.tabs__chip[aria-current='true'] {
  background: var(--fuego); border-color: var(--fuego);
  color: #1a0c00; font-weight: 600;
}
.tabs__chip[hidden] { display: none; }

/* ============================== SECCIONES ================================= */
/* Textura tribal muy tenue: da materia al fondo sin competir con la comida */
.menu {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
}
.menu::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='46' viewBox='0 0 80 46'%3E%3Cpath d='M0 45L20 5l20 40M40 45L60 5l20 40' fill='none' stroke='%23f5821f' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 80px 46px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.estado-busqueda {
  min-height: 1.4em;
  margin-bottom: .5rem;
  color: var(--tinta-suave); font-size: .9rem;
}

/* El desplazamiento de las anclas lo maneja scroll-padding-top en <html>;
   añadir aquí scroll-margin-top duplicaría el desfase. */
.seccion { margin-bottom: 2rem; }
.seccion[hidden] { display: none; }

.seccion__encabezado { margin-bottom: 1.6rem; }

/* Panel de la sección: contiene la lista y, detrás, la foto de fondo */
.seccion__panel {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: linear-gradient(180deg, var(--superficie) 0%, var(--noche-2) 100%);
}
.seccion__contenido {
  position: relative; z-index: 1;
  padding: 1.6rem 1.25rem 1.8rem;
}
@media (min-width: 700px) { .seccion__contenido { padding: 2.2rem 2.2rem 2.4rem; } }

/* Foto de fondo: acompaña a la carta en lugar de ir plato por plato.
   Va tenue y desenfocada para que el texto siga siendo legible. */
.seccion__fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.seccion__fondo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
  opacity: .5;
  transform: scale(1.04);
}
/* Velo que oscurece la foto hacia la columna de texto (izquierda) y la
   asienta abajo, dejando ver la comida a la derecha sin perder contraste AA. */
.seccion__fondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0,.96) 0%, rgba(0, 0, 0,.9) 32%, rgba(0, 0, 0,.55) 70%, rgba(0, 0, 0,.42) 100%),
    linear-gradient(180deg, rgba(0, 0, 0,.5) 0%, rgba(0, 0, 0,.35) 45%, rgba(0, 0, 0,.72) 100%);
}

.seccion__kicker {
  display: flex; align-items: center; gap: .8rem;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* Numeración editorial: da ritmo y orienta dentro de una carta larga */
.seccion__numero {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1.5px solid rgba(245, 130, 31, .4);
  border-radius: 50%;
  color: var(--fuego);
  font-family: var(--fuente-display);
  font-size: .92rem; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.seccion__conteo::after {
  content: ''; display: inline-block;
  width: 30px; height: 1px; margin-left: .8rem; vertical-align: middle;
  background: linear-gradient(90deg, var(--borde), transparent);
}

.seccion__titulo {
  margin-top: .5rem;
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 6.5vw, 3rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
}

.seccion__descripcion {
  margin-top: .45rem;
  max-width: 46rem;
  color: var(--tinta-suave); font-size: .97rem;
}

/* ============================ LISTA DEL MENÚ ============================== */
/* La carta es una lista, no bloques grandes: nombre · guía de puntos · precio,
   con la descripción debajo. En pantallas anchas, dos columnas. */
.menu-lista { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .menu-lista--doble { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
}

.fila {
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: padding-left var(--dur-rapida) var(--ease-out);
}
.fila:last-child { border-bottom: 0; }
.fila[hidden] { display: none; }
/* Barra naranja que aparece al pasar el cursor: guía la lectura de la fila */
@media (hover: hover) and (pointer: fine) {
  .fila { position: relative; }
  .fila::before {
    content: ''; position: absolute; left: -1.25rem; top: 50%;
    width: 3px; height: 0; border-radius: 3px;
    background: var(--fuego);
    transform: translateY(-50%);
    transition: height var(--dur-rapida) var(--ease-out);
  }
  .fila:hover::before { height: 62%; }
  .fila:hover { padding-left: .5rem; }
}

.fila__cabeza {
  display: flex; align-items: baseline; gap: .7rem;
}
.fila__nombre {
  font-family: var(--fuente-display);
  font-size: 1.16rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em;
}
.fila--destacada .fila__nombre { color: #fff; }

/* "Más pedido": una estrella naranja junto al nombre, sin pastilla */
.fila__estrella {
  margin-left: .4rem;
  color: var(--fuego); font-size: .82em;
  vertical-align: 1px;
}

.fila__guia {
  flex: 1; min-width: 1.5rem;
  align-self: flex-end;
  height: 0; margin-bottom: .28em;
  border-bottom: 1.5px dotted var(--guia);
}
.fila__precio {
  flex: none;
  color: var(--fuego-claro);
  font-family: var(--fuente-display);
  font-size: 1.16rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Varios tamaños (6/12 alitas) en línea a la derecha */
.fila__precios { flex: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; justify-content: flex-end; }
.fila__opcion {
  display: inline-flex; align-items: baseline; gap: .35rem;
  color: var(--tinta-suave); font-size: .9rem;
}
.fila__opcion-et { font-size: .82em; }
.fila__opcion b {
  color: var(--fuego-claro);
  font-family: var(--fuente-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fila__desc {
  margin-top: .3rem;
  max-width: 52ch;
  color: var(--tinta-suave);
  font-size: .92rem; line-height: 1.5;
}

/* Subtítulos de grupo dentro de una sección (Tragos / Shots) */
.menu-lista__grupo {
  grid-column: 1 / -1;
  margin: 1.4rem 0 .3rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(245, 130, 31, .3);
  color: var(--fuego);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.menu-lista__grupo:first-child { margin-top: 0; }
.menu-lista__grupo[hidden] { display: none; }

/* ---------------------------- Sin resultados ------------------------------ */
.sin-resultados {
  padding: 3.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}
.sin-resultados[hidden] { display: none; }
.sin-resultados__titulo { font-family: var(--fuente-display); font-size: 1.5rem; font-weight: 700; }
.sin-resultados__texto { margin: .5rem 0 1.4rem; color: var(--tinta-suave); }

/* ------------------------------- Descarga --------------------------------- */
.descarga {
  margin-top: 1rem;
  padding: 2.4rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(245,130,31,.13), transparent 62%),
    var(--noche-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.descarga__texto { font-family: var(--fuente-display); font-size: 1.35rem; font-weight: 600; margin-bottom: 1.1rem; }
.descarga__nota { margin-top: .8rem; color: var(--tinta-tenue); font-size: .84rem; }

/* ============================== UBICACIÓN ================================= */
.ubicacion { border-top: 1px solid var(--borde); background: var(--noche-2); }
.ubicacion__interior { max-width: var(--ancho); margin: 0 auto; padding: 3.5rem 1rem; }

.ubicacion__grid { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 900px) { .ubicacion__grid { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.ubicacion__mapa {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--superficie);
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) { .ubicacion__mapa { aspect-ratio: 16 / 12; } }
.ubicacion__mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }

.ubicacion__datos { display: grid; gap: 1.2rem; }

.tarjeta-dato {
  padding: 1.4rem 1.35rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.tarjeta-dato__titulo {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fuego);
  margin-bottom: .6rem;
}
.tarjeta-dato__valor { font-size: 1.06rem; }
.tarjeta-dato__ciudad { margin-top: .15rem; color: var(--tinta-suave); font-size: .95rem; }
.tarjeta-dato__nota { margin-top: .9rem; color: var(--tinta-suave); font-size: .86rem; line-height: 1.5; }

.enlace-sutil {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .8rem;
  color: var(--fuego-claro);
  font-size: .92rem; font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.enlace-sutil:hover { border-bottom-color: currentColor; }
.enlace-sutil svg { width: 15px; height: 15px; flex: none; }

.horarios { display: grid; gap: .1rem; }
.horarios__fila {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.horarios__fila:last-child { border-bottom: 0; }
.horarios__dias { font-weight: 500; }
.horarios__guia { flex: 1; height: 1px; margin-bottom: 5px; border-bottom: 1.5px dotted var(--guia); }
.horarios__horas { flex: none; color: var(--tinta-suave); font-variant-numeric: tabular-nums; text-align: right; }
.horarios__fila--destacado .horarios__horas { color: var(--fuego-claro); font-weight: 600; }
.horarios__fila--cerrado .horarios__dias,
.horarios__fila--cerrado .horarios__horas { color: var(--tinta-tenue); }

/* ---------------------------- Carrusel del local -------------------------- */
.galeria { margin-top: 1.6rem; }

.galeria__marco {
  position: relative;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  overflow: hidden;
  background: var(--superficie);
}

.galeria__pista {
  display: flex;
  transition: transform 520ms var(--ease-in-out);
  will-change: transform;
  touch-action: pan-y;                     /* deja el scroll vertical libre */
}
.galeria__slide { flex: 0 0 100%; }
.galeria__slide img {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}

.galeria__flecha {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;               /* mínimo táctil */
  transform: translateY(-50%);
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease-out),
              border-color var(--dur-rapida) var(--ease-out),
              transform var(--dur-toque) var(--ease-out);
}
.galeria__flecha svg { width: 20px; height: 20px; }
.galeria__flecha--prev { left: .6rem; }
.galeria__flecha--next { right: .6rem; }
@media (hover: hover) and (pointer: fine) {
  .galeria__flecha:hover { background: rgba(0, 0, 0, .8); border-color: var(--fuego); }
}
.galeria__flecha:active { transform: translateY(-50%) scale(.92); }

.galeria__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem;
  margin-top: .8rem;
}
.galeria__texto { color: var(--tinta-tenue); font-size: .86rem; }

.galeria__puntos { display: flex; gap: .45rem; }
.galeria__punto {
  width: 30px; height: 4px;
  padding: 0;
  background: var(--borde-fuerte);
  border: 0; border-radius: 100px;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease-out);
}
/* Área táctil de 44px sin agrandar la barrita */
.galeria__punto::before {
  content: ''; position: absolute;
  width: 44px; height: 44px;
  transform: translate(-7px, -20px);
}
.galeria__punto { position: relative; }
.galeria__punto[aria-selected='true'] { background: var(--fuego); }

/* =============================== RESERVAR ================================= */
.reservar {
  border-top: 1px solid var(--borde);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,130,31,.16), transparent 60%),
    var(--noche);
}
.reservar__interior {
  max-width: 44rem; margin: 0 auto;
  padding: 4rem 1.25rem 4.5rem;
  text-align: center;
}
.reservar .seccion__kicker { justify-content: center; }
.reservar__texto { margin: .9rem auto 2rem; max-width: 34rem; color: var(--tinta-suave); font-size: 1.04rem; }
.reservar__nota { margin-top: 1.2rem; color: var(--tinta-tenue); font-size: .86rem; }

/* ================================= PIE ==================================== */
.pie { border-top: 1px solid var(--borde); background: var(--noche-2); }
.pie__interior {
  max-width: var(--ancho); margin: 0 auto;
  padding: 3rem 1rem 6.5rem;               /* espacio extra por el botón flotante */
  text-align: center;
}
.pie__logo { width: 88px; margin: 0 auto 1rem; opacity: .92; }
.pie__nombre { font-family: var(--fuente-display); font-size: 1.3rem; font-weight: 700; }
.pie__linea { color: var(--tinta-suave); font-size: .95rem; }
/* Redes sociales */
.redes { display: flex; gap: .7rem; justify-content: center; margin-top: 1.4rem; }
.redes__enlace {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--tinta-suave);
  transition: color var(--dur-rapida) var(--ease-out),
              border-color var(--dur-rapida) var(--ease-out),
              background var(--dur-rapida) var(--ease-out),
              transform var(--dur-toque) var(--ease-out);
}
.redes__enlace svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .redes__enlace:hover {
    color: var(--fuego-claro);
    border-color: var(--fuego);
    background: var(--fuego-tenue);
    transform: translateY(-2px);
  }
}
.redes__enlace:active { transform: scale(.92); }

.pie__enlaces { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; margin: 1.4rem 0 1.2rem; }
.pie__enlaces a { color: var(--tinta-suave); font-size: .95rem; text-decoration: none; transition: color var(--transicion); }
.pie__enlaces a:hover { color: var(--fuego-claro); }
.pie__legal { color: var(--tinta-tenue); font-size: .8rem; }
.pie__credito {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--borde);
  color: var(--tinta-tenue); font-size: .82rem; letter-spacing: .02em;
}
.pie__credito a {
  color: var(--tinta-suave); font-weight: 600; text-decoration: none;
  transition: color var(--transicion);
}
.pie__credito a:hover { color: var(--fuego-claro); }

/* ========================== WHATSAPP FLOTANTE ============================= */
.wa-flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  background: var(--verde-wa); color: #04240f;
  border-radius: 50%;
  box-shadow: 0 10px 26px -6px rgba(37, 211, 102, .55);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante svg { width: 30px; height: 30px; }
@media (hover: hover) and (pointer: fine) {
  .wa-flotante:hover { transform: scale(1.08); box-shadow: 0 14px 32px -6px rgba(37, 211, 102, .7); }
}
.wa-flotante:active { transform: scale(.94); }

/* Halo de entrada: llama la atención al cargar y se detiene.
   Un bucle infinito en un elemento siempre visible acaba molestando. */
.wa-flotante::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--verde-wa);
  animation: latido 2.4s var(--ease-out) 1.2s 3 both;
}
@keyframes latido {
  0%        { opacity: .7; transform: scale(1); }
  70%, 100% { opacity: 0;  transform: scale(1.5); }
}

/* ========================= REVELADO AL HACER SCROLL ======================= */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.revelar.es-visible { opacity: 1; transform: none; }

/* ====================== PREFERENCIA: MENOS MOVIMIENTO ===================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .hero__logo, .hero__kicker, .hero__titulo, .hero__bajada,
  .hero__acciones { opacity: 1; transform: none; }
  /* Sin loop ni zoom: se queda fija la primera foto */
  .hero__foto img { transform: none; }
  .hero__foto { transition: none; }
  .galeria__pista { transition: none; }
  .boton:hover, .wa-flotante:hover { transform: none; }
  /* Se conservan opacidad y color; se elimina todo lo que se desplaza */
  .wa-flotante::after, .hero__pista, .hero__humo, .hero__destello { display: none; }
  .hero__realce::after { transform: scaleX(1); animation: none; }
  /* Los aros se quedan, pero quietos: aportan marca sin movimiento */
  .hero__aro { animation: none; opacity: 1; }
  .boton:active, .tabs__chip:active, .wa-flotante:active { transform: none; }
}

/* ================================ IMPRESIÓN =============================== */
/* El botón "Descargar menú en PDF" imprime esta versión: carta limpia,
   sin fotos ni interfaz, con todas las secciones visibles. */
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }

  :root { --tinta: #000; --tinta-suave: #333; --fuego: #b35300; }

  body { background: #fff; color: #000; font-size: 10.5pt; }

  .hero__fondo, .hero__cenefa, .hero__acciones, .hero__pista, .hero__humo,
  .hero__aro, .hero__destello,
  .barra, .wa-flotante, .descarga, .reservar,
  .ubicacion__mapa, .galeria, .redes, .salta-al-contenido,
  .seccion__fondo, .estado-busqueda,
  .sin-resultados, .pie__enlaces {
    display: none !important;
  }

  .hero { min-height: auto; padding: 0 0 8mm; page-break-after: avoid; }
  .hero__marca { width: 34mm; margin: 0 auto 4mm; }
  .hero__logo { width: 34mm; filter: none; }
  .hero__titulo { color: #000; }
  .hero__linea-uno { font-size: 11pt; color: #444; }
  .hero__linea-dos { font-size: 20pt; }
  .hero__realce { color: #b35300; }
  .hero__realce::after { display: none; }
  .hero__bajada, .hero__kicker { color: #444; font-size: 9pt; }

  .menu { padding: 0; max-width: none; }
  .menu::before { display: none; }

  .seccion { margin-bottom: 6mm; page-break-inside: avoid; }
  .seccion__panel { background: none !important; border: 0; border-radius: 0; overflow: visible; }
  .seccion__contenido { padding: 0 !important; }
  .seccion__titulo { font-size: 15pt; border-bottom: 1.5pt solid #b35300; padding-bottom: 1.5mm; }
  .seccion__descripcion { color: #444; font-size: 9pt; }

  .menu-lista--doble { grid-template-columns: repeat(2, 1fr) !important; column-gap: 8mm; }
  .fila {
    padding: 1.4mm 0; border-bottom: .4pt dotted #bbb; page-break-inside: avoid;
  }
  .fila::before { display: none !important; }
  .fila__nombre { font-size: 11pt; }
  .fila__precio, .fila__opcion b { color: #b35300; }
  .fila__desc { color: #444; font-size: 9pt; }
  .menu-lista__grupo { color: #b35300; border-color: #bbb; }

  .ubicacion { border: 0; background: none; page-break-before: avoid; }
  .ubicacion__interior { padding: 4mm 0 0; }
  .ubicacion__grid { display: block; margin-top: 3mm; }
  .tarjeta-dato { background: none !important; border: 0; padding: 0 0 3mm; }
  .enlace-sutil { display: none; }

  .pie { border: 0; background: none; }
  .pie__interior { padding: 4mm 0 0; }
  .pie__logo { display: none; }

  .revelar { opacity: 1 !important; transform: none !important; }
  [hidden] { display: none !important; }
}