/* NOI — páginas de sala (Ristorante / Bar e Cucina) y carta */

/* ---------- Hero de sala ---------- */
.sala-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  color: var(--crema);
  isolation: isolate;
  overflow: hidden;
}
.sala-hero .slides { z-index: -2; }
.sala-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hero-shade, linear-gradient(180deg, rgb(20 10 8 / 35%) 0%, rgb(20 10 8 / 0%) 30%, rgb(20 10 8 / 70%) 100%));
}
.theme-verde .sala-hero { --hero-shade: linear-gradient(180deg, rgb(29 34 19 / 55%) 0%, rgb(29 34 19 / 0%) 35%, rgb(29 34 19 / 85%) 100%); }
.theme-rosso .sala-hero { --hero-shade: linear-gradient(180deg, rgb(58 11 14 / 45%) 0%, rgb(58 11 14 / 0%) 35%, rgb(58 11 14 / 82%) 100%); }
.sala-hero__content {
  width: 100%;
  padding: 0 var(--gutter) clamp(2.5rem, 2rem + 4vh, 5rem);
  display: grid;
  gap: 1.2rem;
}
.sala-hero__title { font-size: clamp(3.4rem, 1.6rem + 8vw, 11rem); font-weight: 300; line-height: 0.88; }
.sala-hero__title small { display: block; font-size: 0.2em; letter-spacing: 0.6em; margin-bottom: 0.6em; font-weight: 400; }
.sala-hero__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.sala-hero__meta .label { color: var(--accent); }
.theme-verde .sala-hero__content { justify-items: center; text-align: center; }
.theme-verde .sala-hero__title { letter-spacing: 0.06em; }
.theme-verde .sala-hero__meta { justify-content: center; }

.scroll-cue { display: inline-flex; align-items: center; gap: 0.8rem; }
.scroll-cue::after {
  content: ""; width: 1px; height: 2.6rem; background: currentColor;
  transform-origin: top; animation: cue 2.4s var(--ease-cut) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Intro de sala ---------- */
.sala-intro {
  padding: var(--space-section) var(--gutter);
  display: grid;
  gap: 2.5rem;
  justify-items: center;
  text-align: center;
}
.sala-intro__text { max-width: 58rem; font-size: clamp(1.7rem, 1.1rem + 2.3vw, 3.3rem); font-weight: 300; line-height: 1.16; }
.sala-intro__text em { color: var(--accent); }
.sala-intro__rule { width: 1px; height: 4rem; background: var(--line); }

/* Premios: el bloque solemne del Ristorante */
.awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  justify-content: center;
  border: 1px solid var(--line);
}
.awards li { display: grid; justify-items: center; gap: 0.5rem; padding: 1.8rem 1.2rem; }
.awards li + li { border-left: 1px solid var(--line); }
.awards svg { width: 2.2rem; height: 2.2rem; color: var(--accent); }
.awards strong { font-weight: 400; font-size: 1.4rem; line-height: 1.1; }

/* ---------- Bloques centrados con borde: carta pendiente y reserva ---------- */
.pending {
  margin: var(--space-section) var(--gutter);
  padding: clamp(2.5rem, 2rem + 4vw, 6rem) var(--gutter);
  border: 1px solid var(--line);
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}
.pending__title { font-size: var(--text-h2); font-weight: 300; line-height: 0.95; }
.pending__title em { font-style: italic; }
.pending p { max-width: 36rem; color: var(--fg-soft); }
.pending__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding-top: 0.6rem; }

/* ---------- Carta ---------- */
.carta {
  padding: var(--space-section) var(--gutter);
  background: var(--marmo);
  color: var(--ink);
  --line: rgb(28 19 17 / 22%);
}
.carta__brand { display: grid; justify-items: center; gap: 0.7rem; margin-bottom: 2rem; color: var(--ink); }
.carta__brand .noi-logo { width: 8.5rem; }
.carta__brand-tag { font-size: 1rem; letter-spacing: 0.2em; margin-right: -0.2em; }
/* Pestañas: una sección de la carta cada vez */
.carta__tabs {
  position: sticky; top: var(--carta-sticky, var(--header-h)); z-index: 5;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem clamp(1rem, 0.5rem + 2vw, 2.4rem);
  padding: 0.9rem 0;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background: var(--marmo);
  border-block: 1px solid var(--line);
}
.carta__tab { position: relative; padding: 0.45rem 0.1rem; font-size: 0.8rem; color: rgb(28 19 17 / 55%); transition: color var(--dur-fast); }
.carta__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rosso);
  transform: scaleX(0); transition: transform var(--dur) var(--ease-out);
}
.carta__tab:hover, .carta__tab[aria-selected="true"] { color: var(--ink); }
.carta__tab[aria-selected="true"]::after { transform: scaleX(1); }
.carta__panels { max-width: 76rem; margin-inline: auto; }
.carta__panel:not([hidden]) { animation: fadeIn 700ms var(--ease-out) both; }
.carta__panel + .carta__panel { margin-top: 3rem; } /* sin JS se ven todas seguidas */
.carta__panel-title {
  display: flex; align-items: center; gap: 1.2rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.carta__panel-title::after { content: ""; flex: 1; max-width: 6rem; height: 1px; background: currentColor; }
.carta__dishes { display: grid; gap: 0 clamp(2rem, 1rem + 4vw, 6rem); }
@media (min-width: 900px) { .carta__dishes { grid-template-columns: 1fr 1fr; } }
.dish { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1.5rem; padding-block: 0.85rem; border-top: 1px solid rgb(28 19 17 / 8%); align-content: start; }
.dish__name { font-size: 1.02rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; line-height: 1.35; }
.dish__price { font-size: 1.05rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.dish__price small { font-size: 0.85em; color: rgb(28 19 17 / 65%); }
.dish__desc { grid-column: 1 / -1; font-style: italic; color: rgb(28 19 17 / 74%); font-size: 1.08rem; line-height: 1.4; max-width: 30rem; }
.sheet .carta { padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--gutter) 3rem; --carta-sticky: 0px; }
.carta__quote {
  max-width: 44rem; margin: clamp(3rem, 2rem + 4vw, 6rem) auto 0;
  padding-top: 2rem; border-top: 1px solid var(--line);
  text-align: center; font-style: italic; font-size: var(--text-lead); font-weight: 300; line-height: 1.3;
}
.carta__foot { display: flex; justify-content: center; margin-top: 2.5rem; }
.carta .btn { --btn-ink: var(--crema); }

/* ---------- Pareja de fotos fija (Ristorante editorial) ---------- */
.photo-pair { display: grid; gap: 2px; background: var(--ink); }
.photo-pair figure { aspect-ratio: 4 / 5; overflow: hidden; }
.photo-pair img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 800px) { .photo-pair { grid-template-columns: 1fr 1fr; } }