/* ============================================================
   MENÚ — carta impresa que además tiene realidad aumentada

   Ningún valor a mano: todo sale de css/tokens.css.
   Si ves un color, un px o una duración escritos acá, es un error.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--texto-fam);
  font-size:var(--t-16);
  font-weight:var(--peso-texto);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Grano: un SVG en línea al 3%. Le saca el brillo plano a la
   pantalla sin usar ninguna imagen de fondo. */
body::before{
  content:'';
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.envoltorio{position:relative;z-index:1;max-width:var(--medida);margin:0 auto;padding:0 var(--s-5)}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:var(--s-1)}

/* ============================================================
   ENCABEZADO — asimétrico, alineado a la izquierda
   ============================================================ */

.encabezado{padding:var(--s-12) 0 var(--s-6)}

.marca{
  margin:0;
  font-family:var(--display);
  font-weight:var(--peso-fuerte);
  font-size:var(--t-39);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  font-variation-settings:'opsz' 120;
}
.marca em{font-style:italic;color:var(--accent)}

.origen{
  margin:var(--s-3) 0 0;
  font-size:var(--t-12);
  font-weight:var(--peso-medio);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--texto-2);
}

.bajada{
  margin:var(--s-4) 0 0;
  max-width:46ch;
  font-size:var(--t-16);
  color:var(--texto-2);
}

/* la única línea de instrucción: reemplaza al viejo "Paso 1 / 2 / 3" */
.instruccion{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  margin:var(--s-5) 0 0;
  font-size:var(--t-14);
  color:var(--texto-2);
}
.instruccion svg{flex:0 0 auto;color:var(--accent)}

.mesa{
  display:inline-block;
  margin:var(--s-5) 0 0;
  padding:var(--s-1) var(--s-3);
  border:1px solid var(--filete-fuerte);
  border-radius:var(--r-pill);
  font-size:var(--t-12);
  font-weight:var(--peso-medio);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
}

/* ============================================================
   NAVEGACIÓN DE CATEGORÍAS — barra pegajosa
   ============================================================ */

.nav{
  position:sticky;
  top:0; z-index:20;
  background:var(--fondo);
  border-bottom:1px solid var(--filete);
}
.nav-pista{
  position:relative;
  display:flex;
  gap:var(--s-6);
  max-width:var(--medida);
  margin:0 auto;
  padding:0 var(--s-5);
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}
.nav-pista::-webkit-scrollbar{display:none}

.nav-pista a{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  min-height:var(--alto-nav);
  font-family:var(--display);
  font-size:var(--t-20);
  font-weight:var(--peso-medio);
  font-variation-settings:'opsz' 40;
  letter-spacing:var(--track-tight);
  color:var(--texto-2);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.nav-pista a[aria-current="true"]{color:var(--texto)}

/* el indicador se desliza: es UN solo elemento que se mueve,
   no un borde distinto por pestaña */
.nav-indicador{
  position:absolute;
  left:0; bottom:0;
  height:2px;
  width:0;
  background:var(--nav-activo);
  transition:transform var(--dur) var(--ease), width var(--dur) var(--ease);
  pointer-events:none;
}

/* ============================================================
   SECCIONES Y FILAS DE PLATO
   ============================================================ */

.seccion{scroll-margin-top:calc(var(--alto-nav) + var(--s-4))}

.seccion-titulo{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  margin:var(--s-12) 0 var(--s-2);
}
.seccion-titulo h2{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:var(--s-4);
  font-family:var(--texto-fam);
  font-size:var(--t-14);
  font-weight:var(--peso-fuerte);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  white-space:nowrap;
}
.seccion-titulo .num{color:var(--accent);font-variant-numeric:tabular-nums}
.seccion-titulo::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--accent);
  opacity:.55;
}

.lista{list-style:none;margin:0;padding:0}
.lista li + li .plato{border-top:1px solid var(--filete)}

/* --- la fila --- */
.plato{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:var(--s-4);
  width:100%;
  text-align:left;
  padding:var(--s-5) 0;
  transition:opacity var(--dur) var(--ease);
}
.plato:hover .plato-nombre{color:var(--accent)}

.retrato{
  position:relative;
  width:88px; height:88px;
  border-radius:var(--r-thumb);
  overflow:hidden;
  background:var(--fondo-elevado);
}
/* placeholder: la inicial del plato, nunca un ícono de cámara rota */
.retrato::before{
  content:attr(data-inicial);
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--display);
  font-size:var(--t-31);
  font-weight:var(--peso-fuerte);
  color:var(--texto-2);
  opacity:.2;
}
.retrato img{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  /* que todas las fotos se sientan de la misma sesión */
  filter:saturate(1.04) contrast(1.02);
}

.cuerpo{min-width:0;display:flex;flex-direction:column;gap:var(--s-2)}

/* nombre ...... precio, como en una carta impresa */
.renglon{display:flex;align-items:flex-start;gap:var(--s-2)}
.plato-nombre{
  margin:0;
  flex:0 1 auto;
  min-width:0;
  font-family:var(--display);
  font-size:var(--t-20);
  font-weight:var(--peso-fuerte);
  font-variation-settings:'opsz' 40;
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  transition:color var(--dur) var(--ease);
}
.guia{
  flex:1 1 auto;
  min-width:var(--s-5);
  height:6px;
  /* a la altura de la primera linea del nombre, no de la ultima */
  align-self:flex-start;
  margin-top:calc(var(--t-20) * 0.72);
  background-image:radial-gradient(circle at 1px 1px,var(--texto-2) 1.1px,transparent 1.3px);
  background-size:5px 6px;
  background-repeat:repeat-x;
  background-position:left bottom;
  opacity:.5;
}
.plato-precio{
  flex:0 0 auto;
  font-family:var(--display);
  font-size:var(--t-20);
  font-weight:var(--peso-fuerte);
  font-variation-settings:'opsz' 40;
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--track-tight);
  line-height:var(--lh-tight);
}

.plato-desc{
  margin:0;
  font-size:var(--t-14);
  color:var(--texto-2);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pie-fila{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  flex-wrap:wrap;
  margin-top:var(--s-1);
}

/* --- etiquetas: pastilla de texto, borde de 1px, sin relleno --- */
.etiqueta{
  display:inline-flex;
  align-items:center;
  padding:var(--s-1) var(--s-2);
  border:1px solid var(--filete-fuerte);
  border-radius:var(--r-pill);
  font-size:var(--t-12);
  font-weight:var(--peso-medio);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--texto-2);
  white-space:nowrap;
}
.etiqueta.dieta{color:var(--accent-2);border-color:currentColor}
.etiqueta.agotado{color:var(--accent);border-color:currentColor}

/* --- botón AR: fantasma, chico, secundario --- */
.btn-ar{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:var(--tap);
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--filete-fuerte);
  border-radius:var(--r-thumb);
  font-size:var(--t-12);
  font-weight:var(--peso-medio);
  letter-spacing:.04em;
  color:var(--texto-2);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-ar:hover{color:var(--accent);border-color:var(--accent)}
.btn-ar svg{flex:0 0 auto}
.btn-ar[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* --- agotado --- */
.plato.agotado{opacity:.45}

/* ============================================================
   ESQUELETO DE CARGA — misma forma que la fila real
   ============================================================ */

.hueso{background:var(--esqueleto);border-radius:var(--s-1);animation:latir 1.4s ease-in-out infinite}
.hueso-retrato{width:88px;height:88px;border-radius:var(--r-thumb)}
.hueso-linea{height:var(--t-20)}
.hueso-texto{height:var(--t-14)}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.hueso{animation:none}}

/* ============================================================
   ESTADO VACÍO
   ============================================================ */

.vacio{
  padding:var(--s-16) 0;
  text-align:center;
  color:var(--texto-2);
  font-size:var(--t-14);
}

/* ============================================================
   PIE LEGAL
   ============================================================ */

.pie{
  margin-top:var(--s-16);
  padding:var(--s-10) 0 var(--s-16);
  border-top:1px solid var(--filete);
  font-size:var(--t-12);
  line-height:var(--lh-base);
  color:var(--texto-2);
}
.pie h2{
  margin:0 0 var(--s-3);
  font-family:var(--texto-fam);
  font-size:var(--t-12);
  font-weight:var(--peso-fuerte);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--texto);
}
.pie-cols{display:grid;gap:var(--s-8);grid-template-columns:1fr}
@media (min-width:560px){.pie-cols{grid-template-columns:1fr 1fr}}
.pie dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s-1) var(--s-4)}
.pie dt{color:var(--texto-2)}
.pie dd{margin:0;font-variant-numeric:tabular-nums}
.pie a{text-decoration:none;border-bottom:1px solid var(--filete-fuerte)}
.pie-legal{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--filete)}
.pie-legal p{margin:0 0 var(--s-2)}

/* ============================================================
   ESCRITORIO — contenedor centrado, nunca estirado
   ============================================================ */

@media (min-width:760px){
  .marca{font-size:var(--t-49);font-variation-settings:'opsz' 144}
  .encabezado{padding-top:var(--s-16)}
  .plato{grid-template-columns:108px minmax(0,1fr);gap:var(--s-5)}
  .retrato{width:108px;height:108px}
  .hueso-retrato{width:108px;height:108px}
}

/* ============================================================
   FICHA DEL PLATO — hoja que sube desde abajo
   ============================================================ */

.velo{
  position:fixed; inset:0;
  z-index:30;
  background:rgba(22,19,15,.34);
  opacity:0;
  transition:opacity var(--dur-sheet) var(--ease);
}
.velo.abierto{opacity:1}

.ficha{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:31;
  display:flex;
  flex-direction:column;
  max-height:92dvh;
  background:var(--fondo-elevado);
  border-top:1px solid var(--filete);
  border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:var(--shadow-sheet);
  transform:translateY(101%);
  /* resorte: pasa un poco y vuelve, sin rebotar como pelota */
  transition:transform var(--dur-sheet) cubic-bezier(.16,1.1,.3,1);
  touch-action:none;
}
.ficha.abierta{transform:translateY(0)}
.ficha.arrastrando{transition:none}

.ficha-agarre{
  flex:0 0 auto;
  display:block;
  width:100%;
  padding:var(--s-3) 0 var(--s-2);
}
.ficha-agarre::before{
  content:'';
  display:block;
  width:36px; height:4px;
  margin:0 auto;
  border-radius:var(--r-pill);
  background:var(--filete-fuerte);
}

.ficha-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom));
  touch-action:pan-y;
}

.ficha-foto{
  aspect-ratio:4/5;
  max-height:38dvh;
  margin:0 auto var(--s-5);
  border-radius:var(--r-thumb);
  overflow:hidden;
  background:var(--fondo);
}
.ficha-foto img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(1.04) contrast(1.02);
}

.ficha h2{
  margin:0;
  font-family:var(--display);
  font-size:var(--t-25);
  font-weight:var(--peso-fuerte);
  font-variation-settings:'opsz' 72;
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
}
.ficha-precio{
  font-family:var(--display);
  font-size:var(--t-25);
  font-weight:var(--peso-fuerte);
  font-variation-settings:'opsz' 72;
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--track-tight);
  line-height:var(--lh-tight);
}
.ficha-desc{margin:var(--s-4) 0 0;color:var(--texto-2)}
.ficha-origen{
  margin:var(--s-2) 0 0;
  font-size:var(--t-14);
  font-style:italic;
  color:var(--texto-2);
}

/* --- rejilla de datos --- */
.ficha-datos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-1) var(--s-5);
  margin:var(--s-6) 0 0;
  padding:var(--s-5) 0;
  border-top:1px solid var(--filete);
  border-bottom:1px solid var(--filete);
}
.dato span{
  display:block;
  font-size:var(--t-12);
  font-weight:var(--peso-medio);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--texto-2);
}
.dato b{
  display:block;
  margin-top:var(--s-1);
  font-size:var(--t-14);
  font-weight:var(--peso-medio);
  font-variant-numeric:tabular-nums;
}

/* --- bloques de lista --- */
.ficha-bloque{margin-top:var(--s-6)}
.ficha-bloque h3{
  margin:0 0 var(--s-3);
  font-size:var(--t-12);
  font-weight:var(--peso-fuerte);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--texto-2);
}
.ficha-bloque p{margin:0;font-size:var(--t-14)}
.ficha-etiquetas{display:flex;flex-wrap:wrap;gap:var(--s-2)}

.ficha-lista{list-style:none;margin:0;padding:0;font-size:var(--t-14)}
.ficha-lista li{
  display:flex;
  align-items:baseline;
  gap:var(--s-2);
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--filete);
}
.ficha-lista li:last-child{border-bottom:0}
.ficha-lista .guia{margin-top:0;align-self:flex-end;margin-bottom:var(--s-1)}
.ficha-lista b{font-variant-numeric:tabular-nums;font-weight:var(--peso-medio)}

/* --- botón principal --- */
.ficha-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  width:100%;
  min-height:var(--tap);
  margin-top:var(--s-8);
  padding:var(--s-4);
  border-radius:var(--r-thumb);
  background:var(--accent);
  color:var(--on-accent);
  font-size:var(--t-16);
  font-weight:var(--peso-fuerte);
}
.ficha-cta[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ficha-cerrar{
  display:block;
  width:100%;
  min-height:var(--tap);
  margin-top:var(--s-2);
  font-size:var(--t-14);
  color:var(--texto-2);
}

/* --- en escritorio es un cuadro centrado, no una hoja --- */
@media (min-width:760px){
  .ficha{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(560px,92vw);
    max-height:88dvh;
    border-radius:var(--r-card);
    border:1px solid var(--filete);
    transform:translate(-50%,-46%);
    opacity:0;
    transition:transform var(--dur-sheet) var(--ease), opacity var(--dur-sheet) var(--ease);
  }
  .ficha.abierta{transform:translate(-50%,-50%);opacity:1}
  .ficha-agarre{display:none}
  .ficha-scroll{padding-top:var(--s-6)}
}

@media (prefers-reduced-motion:reduce){
  .ficha,.velo{transition:none}
}

/* Los enlaces del pie son objetivos táctiles: tienen que llegar a 44px
   de alto aunque el texto sea de 12. */
.pie a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding:var(--s-1) 0;
}