/* ============================================================
   RAYUELA — carta.css (estilos exclusivos de la carta interactiva)
   ------------------------------------------------------------
   ESTRATEGIA DE PRODUCTO: esta página tiene un único trabajo —
   que decidir qué pedir sea rápido y agradable en el móvil (el
   80%+ del tráfico de una carta se consulta con el móvil en la
   mano, sentado en la mesa). Por eso: barra de filtros pegajosa
   siempre a mano, filtrado instantáneo sin recargar, y tarjetas
   con jerarquía clara (nombre → precio, sin ruido).
   ============================================================ */

.carta-hero{
  padding-top:8.5rem;
  padding-bottom:2rem;
  text-align:center;
  position:relative;
}
.carta-hero h1{
  font-size:clamp(2.6rem,7vw,5rem);
}
.carta-hero p{
  max-width:32rem; margin:1rem auto 0;
  color:var(--dark-soft);
}
.carta-hero__back{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display);
  font-size:.85rem;
  color:var(--dark-soft);
  margin-bottom:1.6rem;
}
.carta-hero__back svg{ width:1.1em; height:1.1em; transition:transform .3s var(--ease-out); }
.carta-hero__back:hover svg{ transform:translateX(-4px); }
.carta-hero__back:hover{ color:var(--cherry); }

/* ---------- Barra de filtros ---------- */
.filter-bar{
  position:sticky; top:0; z-index:60;
  display:flex; justify-content:center;
  padding-block:1rem;
  margin-bottom:1rem;
}
.filter-bar__inner{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  background:rgba(251,243,230,.85);
  backdrop-filter:blur(14px) saturate(140%);
  border:2px solid var(--dark);
  border-radius:100px;
  padding:.5rem;
  box-shadow:4px 4px 0 var(--dark);
}
.filter-btn{
  position:relative;
  font-family:var(--font-display);
  font-size:.92rem;
  padding:.6em 1.3em;
  border-radius:100px;
  color:var(--dark-soft);
  transition:color .35s var(--ease-out);
  white-space:nowrap;
}
.filter-btn__bg{
  position:absolute; inset:0;
  background:var(--dark);
  border-radius:100px;
  z-index:-1;
  opacity:0;
  transform:scale(.7);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-elastic);
}
.filter-btn.is-active{ color:var(--cream); }
.filter-btn.is-active .filter-btn__bg{ opacity:1; transform:scale(1); }
.filter-btn:hover:not(.is-active){ color:var(--dark); }

.filter-count{
  text-align:center;
  font-size:.85rem;
  color:var(--dark-muted);
  margin-bottom:2.2rem;
}
.filter-count strong{ color:var(--pink-deep); font-family:var(--font-display); }

/* ---------- Grid del menú ---------- */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.3rem;
  padding-bottom:6rem;
}

.menu-card{
  border:2px solid var(--dark);
  border-radius:var(--radius-lg);
  background:var(--paper);
  padding:1.5rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:
    opacity .45s var(--ease-out),
    transform .45s var(--ease-out),
    box-shadow .35s var(--ease-out);
}
.menu-card:hover{ box-shadow:6px 6px 0 var(--dark); transform:translateY(-4px); }

/* Estado oculto por el filtro: lo controla carta.js añadiendo/quitando
   esta clase; el display:none final llega tras la transición (en JS)
   para que la animación de salida se vea completa. */
.menu-card.is-hidden{
  opacity:0;
  transform:translateY(14px) scale(.92);
  pointer-events:none;
}

.menu-card__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem;
}
.menu-card__icon{
  width:3.6rem; height:3.6rem;
  border-radius:1rem;
  border:1.5px solid var(--dark);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.menu-card__icon svg{ width:60%; height:60%; }

.menu-card__price{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--cherry);
  white-space:nowrap;
}

.menu-card__name{
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.2;
}
.menu-card__desc{
  font-size:.9rem;
  color:var(--dark-soft);
  line-height:1.45;
}
.menu-card__tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:auto; }
.menu-card__tag{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:.3em .7em;
  border-radius:100px;
  border:1px solid var(--dark);
  color:var(--dark-soft);
}

.menu-card__badge{
  font-size:.68rem;
  font-family:var(--font-display);
  background:var(--mustard);
  border:1px solid var(--dark);
  padding:.25em .7em;
  border-radius:100px;
  position:absolute;
  transform:translate(-.6rem,-.6rem) rotate(-6deg);
}

.empty-state{
  text-align:center;
  padding-block:5rem;
  display:none;
}
.empty-state.is-visible{ display:block; }
.empty-state svg{ width:64px; margin-inline:auto 1rem; }

@media (max-width:980px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .menu-grid{ grid-template-columns:1fr; }
  .filter-bar__inner{ gap:.3rem; padding:.4rem; }
  .filter-btn{ font-size:.82rem; padding:.55em 1em; }
}