/* =========================================================
   KAO LOUNGE - Carta (página completa /carta/)
   Reutiliza variables y .menu-list de styles.css
   ========================================================= */

.cartapage{position:relative;z-index:1}

/* ----- Cabecera ----- */
.cartahead{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(8rem,16vw,11rem) var(--pad) clamp(1.5rem,4vw,2.5rem);
  text-align:center;
}
.cartahead__back{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);
  font-size:.82rem;font-weight:600;letter-spacing:.04em;margin-bottom:1.6rem;
  transition:color .25s var(--ease);
}
.cartahead__back svg{width:1rem;height:1rem}
.cartahead__back:hover{color:var(--gold-bright)}
.cartahead h1{
  font-family:var(--font-display);font-weight:200;line-height:1;
  font-size:clamp(3rem,11vw,5.5rem);letter-spacing:-.02em;
}
.cartahead h1 em{font-family:var(--font-serif);font-style:italic;color:var(--gold);font-weight:400}
.cartahead__sub{
  color:var(--muted);margin-top:1rem;font-size:clamp(1rem,2.2vw,1.12rem);
  max-width:46ch;margin-inline:auto;text-wrap:pretty;
}

/* ----- Navegación de categorías (chips) ----- */
.cartanav{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,var(--bg) 60%,transparent);
  padding:1rem 0 1.2rem;margin-bottom:.5rem;
}
.cartanav__row{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  max-width:var(--maxw);margin-inline:auto;
  padding:.3rem 0 .3rem var(--pad);
  scroll-padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch;
}
.cartanav__row::-webkit-scrollbar{display:none}
/* Espaciador final: garantiza que la última pestaña (Champagne) nunca quede recortada al hacer scroll */
.cartanav__row::after{content:"";flex:0 0 var(--pad)}
.cartanav a{
  flex:0 0 auto;font-family:var(--font-body);font-weight:600;
  font-size:.78rem;letter-spacing:.03em;color:var(--muted);
  padding:.5rem 1rem;border-radius:99px;border:1px solid var(--hair-white);
  background:rgba(255,255,255,.02);white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.cartanav a:hover{color:var(--gold-bright);border-color:var(--gold);background:rgba(193,153,119,.06)}

/* ----- Cuerpo: masonry de categorías ----- */
.cartabody{max-width:var(--maxw);margin-inline:auto;padding:1.5rem var(--pad) clamp(4rem,9vw,7rem)}
.cartacols{columns:3;column-gap:clamp(2rem,5vw,3.5rem)}
@media(max-width:900px){.cartacols{columns:2}}
@media(max-width:600px){.cartacols{columns:1}}

.cat{break-inside:avoid;margin-bottom:clamp(2.2rem,5vw,3rem);scroll-margin-top:7rem}
.cat__head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.cat__head h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.16em;font-size:1.02rem;color:var(--gold-bright);white-space:nowrap;
}
.cat__head .line{flex:1;height:1px;background:var(--hair-gold)}
.cat__note{color:var(--muted-2);font-size:.78rem;letter-spacing:.04em;margin:-.4rem 0 .7rem;font-style:italic}

/* Reutiliza .menu-list pero algo más compacto en carta */
.cartabody .menu-list li{padding:.5rem 0}
.cartabody .ml__name{font-size:.96rem}
.cartabody .ml__price{font-size:1rem;white-space:nowrap}
.ml__price--two{font-size:.92rem;color:var(--gold)}

/* ----- Nota al pie de la carta ----- */
.cartanote{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  color:var(--muted-2);font-size:.82rem;text-align:center;font-style:italic;
}

/* ----- CTA final ----- */
.cartafoot{
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;
  max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--pad);
}
.cartafoot p{color:var(--muted);max-width:42ch;text-wrap:pretty}
.cartafoot__btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}