/* ===========================================================
   Capricho Tapatío — Carta digital
   Carta visual de solo lectura: reutiliza .dish-card, .ph-frame
   y .wa-float de ../styles.css para mantener una sola identidad
   visual con el sitio principal.
   =========================================================== */

body{ padding-bottom: 0; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--black); padding:.75rem 1.25rem; z-index:999; font-weight:600; }
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------------- header compacto ---------------- */
.menu-header{
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,9,8,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(198,161,91,.14);
  padding: 1rem 0;
}
.menu-header-inner{
  max-width: var(--container); margin: 0 auto; padding: 0 clamp(1rem,4vw,3rem);
  display:flex; align-items:center; gap:.9rem;
}
.back-btn{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(250,247,241,.2); color: var(--white);
  transition: border-color var(--dur-micro) var(--ease-soft), color var(--dur-micro) var(--ease-soft);
}
.back-btn:hover{ border-color: var(--gold); color: var(--gold); }
.menu-header-badge{ width: 34px; height: 34px; border-radius: 50%; flex-shrink:0; }
.menu-header-title{ min-width:0; }
.menu-header-title .brand-line{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.menu-header-title h1{ font-family: var(--font-display); font-style: italic; font-weight:500; font-size: 1.35rem; color: var(--white); line-height:1.1; }
.menu-header-title p{ font-size: .78rem; color: var(--white-faint); margin-top:.2rem; }

.estado-negocio{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600;
  padding: .28rem .6rem; border-radius: 999px; letter-spacing:.02em; white-space:nowrap;
}
.estado-negocio::before{ content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
.estado-negocio.abierto{ color:#7fdc9a; background: rgba(127,220,154,.12); }
.estado-negocio.cerrado{ color:#e0a15c; background: rgba(224,161,92,.12); }

/* ---------------- categorías ---------------- */
.category-nav{
  position: sticky; top: 71px; z-index: 35;
  background: var(--black);
  border-bottom: 1px solid rgba(250,247,241,.08);
  display:flex; gap:.6rem; overflow-x:auto; padding: 1rem clamp(1rem,4vw,3rem);
  scrollbar-width:none;
}
.category-nav::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex-shrink:0; padding:.6rem 1.2rem; border-radius: 999px; font-size:.83rem; font-weight:600;
  letter-spacing:.01em;
  border: 1px solid rgba(250,247,241,.14); color: var(--white-dim); background: transparent;
  transition: border-color var(--dur-micro) var(--ease-soft), color var(--dur-micro) var(--ease-soft), background-color var(--dur-micro) var(--ease-soft);
}
.cat-pill[aria-current="true"]{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 70%); color: var(--black); border-color: transparent;
}

/* ---------------- secciones y tarjetas ---------------- */
.menu-sections{ max-width: var(--container); margin: 0 auto; padding: 3rem clamp(1rem,4vw,3rem) 6rem; }
.menu-section{ margin-bottom: clamp(3.5rem,7vw,5.5rem); scroll-margin-top: 136px; }
.menu-section-title{ font-family: var(--font-display); font-style: italic; font-weight:500; font-size: clamp(1.6rem,3.2vw,2.1rem); color: var(--white); margin-bottom: 1.8rem; }

.dish-tags{ display:flex; gap:.35rem; margin-bottom:.5rem; }
.tag{
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.2rem .5rem; border-radius:999px; background: rgba(198,161,91,.18); color: var(--gold-light);
}
.dish-footer{ display:flex; align-items:center; justify-content:space-between; margin-top: .8rem; gap:.6rem; }
.dish-price{ font-size:.95rem; font-weight:600; color: var(--gold-light); }
.badge-agotado{ font-size:.7rem; font-weight:700; color: var(--white-dim); border: 1px solid rgba(250,247,241,.2); padding:.3rem .65rem; border-radius:999px; }
.dish-card.agotado{ opacity:.5; }

.menu-legal-note{ color: var(--white-dim); font-size:.78rem; text-align:center; max-width: 560px; margin: 1rem auto 0; opacity:.75; }

@media (max-width: 640px){
  .menu-header-title p{ display:none; }
  .category-nav{ top: 57px; }
  .dishes-grid{ grid-template-columns: 1fr; gap: 1.6rem; }
}