/* ============================================================
   VALENTINA LAGO HAIR STUDIO
   Design system — "Atelier editoriale"

   Principi:
   1. Una sola mossa d'autore per pagina, non dieci effetti.
   2. La fotografia porta la pagina. La grafica si toglie di mezzo.
   3. Filetti e spazio bianco al posto delle card.
   4. Due soli movimenti: risalita del testo, svelamento dell'immagine.
   ============================================================ */

:root {
  /* ---- Colore: neri caldi, osso, un solo accento ottone ---- */
  --ink:       #100f0d;
  --ink-2:     #191713;
  --ink-3:     #24201a;
  --bone:      #e8e2d7;
  --bone-2:    #dcd4c6;
  --bone-3:    #b9ae9b;
  --cream:     #f4f0e8;
  --brass:     #b08b5e;
  --brass-hi:  #d3ae7e;
  --brass-lo:  #8a6b44;

  /* ---- Testo su fondo scuro / chiaro ---- */
  --on-dark:      #f4f0e8;
  --on-dark-mid:  rgba(244, 240, 232, .68);
  --on-dark-dim:  rgba(244, 240, 232, .44);
  --on-dark-line: rgba(244, 240, 232, .16);
  --on-light:     #100f0d;
  --on-light-mid: rgba(16, 15, 13, .66);
  --on-light-dim: rgba(16, 15, 13, .42);
  --on-light-line: rgba(16, 15, 13, .16);

  /* ---- Tipografia: un solo font per tutto il sito ---- */
  --t-disp: 'Montserrat', system-ui, sans-serif;
  --t-ui:   'Montserrat', system-ui, sans-serif;

  /* ---- Ritmo ---- */
  --gut:   clamp(1.4rem, 4vw, 2.6rem);
  --sec:   clamp(5.5rem, 12vw, 11rem);
  --nav-h: 84px;

  --ease:     cubic-bezier(.22, .61, .21, 1);
  --ease-veil: cubic-bezier(.76, 0, .24, 1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--t-ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  background: var(--ink);
  color: var(--on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--brass); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 4px;
}

/* ============================================================
   IMPIANTO
   ============================================================ */
.wrap      { width: min(1320px, 100% - var(--gut) * 2); margin-inline: auto; }
.wrap--mid { width: min(1040px, 100% - var(--gut) * 2); margin-inline: auto; }
.wrap--nar { width: min(720px,  100% - var(--gut) * 2); margin-inline: auto; }

.sec        { position: relative; padding-block: var(--sec); }
.sec--tight { padding-top: clamp(2rem, 4vw, 3.4rem); padding-bottom: clamp(3.4rem, 7vw, 6rem); }

.on-bone { background: var(--bone); color: var(--on-light); }
.on-ink  { background: var(--ink);  color: var(--on-dark); }
.on-ink2 { background: var(--ink-2); color: var(--on-dark); }

.rule { height: 1px; border: 0; background: var(--on-dark-line); }
.on-bone .rule { background: var(--on-light-line); }

/* grana fotografica — usata SOLO sulle hero, come firma */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.d1, .d2, .d3, .d4 {
  font-family: var(--t-disp);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.012em;
}
.d1 { font-size: clamp(3rem,   9vw, 7.2rem); }
.d2 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.06; }
.d3 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.12; }
.d4 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.24; }

.it { font-style: italic; }

/* occhiello: piccolo, spaziato, mai più di uno per schermata */
.eyebrow {
  font-family: var(--t-ui);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
}
.on-bone .eyebrow { color: var(--brass-lo); }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 300;
  line-height: 1.72;
  color: var(--on-dark-mid);
  max-width: 60ch;
}
.on-bone .lead { color: var(--on-light-mid); }

/* corpo editoriale lungo */
.prose p {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.85;
  color: var(--on-dark-mid);
  max-width: 62ch;
}
.on-bone .prose p { color: var(--on-light-mid); }
.prose p + p { margin-top: 1.5em; }
.prose strong { font-weight: 500; color: var(--on-dark); }
.on-bone .prose strong { color: var(--on-light); }

.pull {
  font-family: var(--t-disp);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.34;
  color: var(--on-dark);
  max-width: 22ch;
}
.on-bone .pull { color: var(--on-light); }

.micro {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.on-bone .micro { color: var(--on-light-dim); }

/* ============================================================
   MOVIMENTO — contenuto sempre visibile, senza attese
   ============================================================ */

.rise { opacity: 1; transform: none; }

.unveil { overflow: hidden; position: relative; }
.unveil img { transform: none; clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover__img img,
  .book-success__ring { animation: none; }
  .book-step.on { animation: none; }
}

/* ============================================================
   AZIONI — link sottolineati, un solo bottone pieno per pagina
   ============================================================ */
.act {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--t-ui);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-bottom: .5rem;
  position: relative;
  cursor: pointer;
  background: none;
  border: 0;
}
.on-bone .act { color: var(--on-light); }
.act::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: .32;
  transform-origin: right;
  transition: transform .55s var(--ease), opacity .4s;
}
.act:hover::after { transform: scaleX(0); opacity: 0; }
.act i, .act .arr {
  font-style: normal;
  transition: transform .5s var(--ease);
}
.act:hover i, .act:hover .arr { transform: translateX(6px); }
.act--brass { color: var(--brass); }

/* bottone pieno — parsimonia: uno per schermata */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.15rem 2.4rem;
  font-family: var(--t-ui);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--bone);
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  /* isolation + z-index negativo: il riempimento resta SEMPRE sotto al testo,
     anche quando il JS riscrive il contenuto del bottone senza wrapper */
  isolation: isolate;
  transition: color .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
}
.btn span { position: relative; display: inline-flex; align-items: center; gap: .75rem; }
.btn i, .btn .arr { font-style: normal; transition: transform .5s var(--ease); }
.btn:hover i, .btn:hover .arr { transform: translateX(5px); }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s var(--ease-veil);
}
.btn:hover { color: var(--ink); border-color: var(--brass); }
.btn:hover::before { transform: scaleY(1); }

.btn--line {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark-line);
}
.btn--line:hover { color: var(--ink); }
.on-bone .btn--line { color: var(--on-light); border-color: var(--on-light-line); }

.btn--ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--ink:hover { color: var(--ink); }

.btn[disabled] { opacity: .3; pointer-events: none; }

.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }

/* ============================================================
   NAVIGAZIONE
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: height .5s var(--ease), background .5s, backdrop-filter .5s;
}
.nav::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--on-dark-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease);
}
.nav.solid,
.nav.stuck {
  height: 68px;
  background: rgba(16, 15, 13, .86);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.nav.solid::after,
.nav.stuck::after { transform: scaleX(1); }

.nav__in {
  width: min(1320px, 100% - var(--gut) * 2);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}

.brand { display: inline-flex; align-items: center; gap: .9rem; }
/* marchio reale: VL bianco su fondo trasparente, nessuna cornice */
.brand__logo {
  width: auto; height: 30px;
  flex: none;
  object-fit: contain;
  opacity: .94;
  transition: opacity .5s var(--ease);
}
.brand:hover .brand__logo { opacity: 1; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.14; }
.brand__txt b {
  font-family: var(--t-disp);
  font-weight: 400;
  font-size: 1.16rem;
  letter-spacing: .01em;
}
.brand__txt span {
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.nav__links { display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.4rem); list-style: none; }
.nav__links a {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
  padding-block: .4rem;
  position: relative;
  transition: color .45s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.nav__links a:hover { color: var(--on-dark); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--on-dark); }

.nav__end { display: flex; align-items: center; gap: 1.4rem; }
.nav__book {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bone);
  padding: .82rem 1.5rem;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.nav__book:hover { background: var(--brass); }
/* Il numero per intero accanto a "Chiama", ma solo dove c'è spazio: la barra
   ha già cinque voci di menu e sotto i 1100px il numero le spingerebbe fuori.
   Sugli schermi stretti resta comunque un tocco per chiamare, ed è lì che
   serve davvero. Il numero si legge anche nel menu e in fondo a ogni pagina. */
.nav__book b { display: none; font-weight: 400; }
@media (min-width: 1100px) {
  .nav__book { display: inline-flex; align-items: baseline; }
  .nav__book b { display: inline; letter-spacing: .14em; opacity: .74; }
  .nav__book b::before { content: '·'; margin: 0 .5rem 0 .55rem; opacity: .55; }
}

.burger {
  display: none;
  width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.burger span,
.burger::before,
.burger::after {
  content: '';
  position: absolute; left: 4px; right: 4px; height: 1px;
  background: var(--on-dark);
  transition: transform .45s var(--ease), opacity .3s;
}
.burger::before { top: 12px; }
.burger span    { top: 17px; }
.burger::after  { top: 22px; }
.burger.on::before { transform: translateY(5px) rotate(45deg); }
.burger.on span    { opacity: 0; }
.burger.on::after  { transform: translateY(-5px) rotate(-45deg); }

/* menu mobile a tenda */
.mnav {
  position: fixed; inset: 0;
  z-index: 89;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--gut) var(--gut);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-veil);
  pointer-events: none;
}
.mnav.on { clip-path: inset(0 0 0 0); pointer-events: auto; }
.mnav ol { list-style: none; }
.mnav li { border-top: 1px solid var(--on-dark-line); }
.mnav li:last-child { border-bottom: 1px solid var(--on-dark-line); }
.mnav a {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 1.15rem 0;
  font-family: var(--t-disp);
  font-weight: 300;
  font-size: 2rem;
}
.mnav a::before {
  content: none;
  min-width: 2.4em;
}
.mnav__foot { margin-top: 2.4rem; display: grid; gap: .5rem; }
.mnav__foot a { font-family: var(--t-ui); font-size: .82rem; color: var(--on-dark-mid); padding: 0; }
.mnav__foot a::before { content: none; }

/* ============================================================
   HOMEPAGE — copertina editoriale
   ============================================================ */
.cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.cover__img { position: absolute; inset: 0; z-index: 0; }
/* tre scatti che si danno il cambio in dissolvenza ogni 5 secondi */
.cover__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.cover__img img.is-on { opacity: 1; }
/* assestamento unico all'ingresso, solo sul primo scatto */
.cover__img img:first-child { animation: settle 2.6s var(--ease-veil) both; }
@keyframes settle {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cover__img img { transition: none; }
}
.cover__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(16,15,13,.94) 0%, rgba(16,15,13,.42) 42%, rgba(16,15,13,.55) 100%);
}
.cover__in {
  position: relative; z-index: 4;
  width: min(1320px, 100% - var(--gut) * 2);
  margin-inline: auto;
  padding-block: clamp(3.5rem, 9vh, 7rem);
}
.cover__in .eyebrow { color: var(--on-dark); }
.cover__name {
  font-family: var(--t-disp);
  font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .92;
  letter-spacing: -.02em;
  margin-block: 1.6rem .9rem;
}
.cover__name em { display: block; font-style: italic; color: var(--brass-hi); }
.cover__line {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  align-items: baseline;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
  max-width: 62ch;
}
.cover__claim {
  font-family: var(--t-disp);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.36;
  color: var(--on-dark);
  max-width: 26ch;
  margin-top: 2.2rem;
}
/* ============================================================
   TESTATA DELLE PAGINE INTERNE
   ============================================================ */
.phead {
  position: relative;
  min-height: clamp(60vh, 72vh, 78svh);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.phead__img { position: absolute; inset: 0; z-index: 0; }
.phead__img img { width: 100%; height: 100%; object-fit: cover; }
.phead__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(16,15,13,.92), rgba(16,15,13,.34) 55%, rgba(16,15,13,.5));
}
.phead__in {
  position: relative; z-index: 4;
  width: min(1320px, 100% - var(--gut) * 2);
  margin-inline: auto;
  padding-block: clamp(3rem, 7vh, 5.5rem);
}
.phead__title { margin-block: 1.2rem .8rem; }
.phead__sub { color: var(--on-dark-mid); max-width: 48ch; font-size: 1.02rem; }

/* ============================================================
   BLOCCHI EDITORIALI RIUSABILI
   ============================================================ */

/* due colonne: testo + immagine, senza card */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.duo--flip .duo__media { order: -1; }
.duo__media img { width: 100%; }

/* immagine con didascalia sotto, stile catalogo */
.plate figcaption {
  margin-top: .9rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  display: flex; gap: .8rem; align-items: baseline;
}
.on-bone .plate figcaption { color: var(--on-light-dim); }
.plate figcaption b { color: var(--brass); font-weight: 400; }

/* elenco di dati in righe con filetto */
.facts { display: grid; gap: 0; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: 1rem 2rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--on-dark-line);
  align-items: baseline;
}
.on-bone .facts > div { border-color: var(--on-light-line); }
.facts > div:last-child { border-bottom: 1px solid var(--on-dark-line); }
.on-bone .facts > div:last-child { border-color: var(--on-light-line); }
.facts dt, .facts b {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); font-weight: 400;
}
.on-bone .facts dt, .on-bone .facts b { color: var(--brass-lo); }
.facts dd, .facts p { color: var(--on-dark-mid); font-size: .96rem; }
.on-bone .facts dd, .on-bone .facts p { color: var(--on-light-mid); }

/* fascia immagine a tutta larghezza */
.band { position: relative; height: clamp(340px, 56vh, 620px); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band__cap {
  position: absolute; z-index: 3; left: var(--gut); bottom: var(--gut);
  font-family: var(--t-disp); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  color: var(--on-dark);
  max-width: 24ch;
  text-shadow: 0 2px 24px rgba(16,15,13,.6);
}

/* ============================================================
   SERVIZI — menù editoriale, non griglia di card
   ============================================================ */
.menu { border-top: 1px solid var(--on-dark-line); }
.on-bone .menu { border-color: var(--on-light-line); }

/* categorie a tendina: una aperta per volta senza chilometri di scroll */
.menu__cat { border-bottom: 1px solid var(--on-dark-line); }
.on-bone .menu__cat { border-color: var(--on-light-line); }

.menu__cat-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.8rem);
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  cursor: pointer;
  list-style: none;
  transition: padding-left .5s var(--ease);
}
.menu__cat-head::-webkit-details-marker { display: none; }
.menu__cat-head:hover { padding-left: .7rem; }
.menu__cat[open] > .menu__cat-head { padding-left: .7rem; }

.menu__cat-name h3 {
  font-family: var(--t-disp); font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.12;
  transition: color .45s var(--ease);
}
.menu__cat-head:hover h3 { color: var(--brass-lo); }
.menu__cat-name p { font-size: .86rem; color: var(--on-dark-dim); margin-top: .25rem; max-width: 46ch; }
.on-bone .menu__cat-name p { color: var(--on-light-dim); }

.menu__count {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); white-space: nowrap;
}
.on-bone .menu__count { color: var(--brass-lo); }

/* chevron disegnato con i bordi: nessuna icona da caricare */
.menu__chev {
  width: 9px; height: 9px; flex: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--brass);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .45s var(--ease);
}
.on-bone .menu__chev { color: var(--brass-lo); }
.menu__cat[open] .menu__chev { transform: rotate(-135deg) translate(-3px, -3px); }

.menu__body { padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.menu__cat[open] .menu__body { animation: menuOpen .55s var(--ease) both; }
@keyframes menuOpen { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .menu__cat[open] .menu__body { animation: none; }
}

.menu__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--on-dark-line);
  transition: padding-left .5s var(--ease);
}
.on-bone .menu__item { border-color: var(--on-light-line); }
.menu__item:first-child { border-top: 1px solid var(--on-dark-line); }
.on-bone .menu__item:first-child { border-color: var(--on-light-line); }
.menu__item:hover { padding-left: .9rem; }
.menu__item h4 {
  font-family: var(--t-disp); font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2;
}
.menu__item p { grid-column: 1 / -1; font-size: .9rem; color: var(--on-dark-mid); max-width: 58ch; }
.on-bone .menu__item p { color: var(--on-light-mid); }
.menu__dur {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); white-space: nowrap; padding-top: .35rem;
}
.on-bone .menu__dur { color: var(--brass-lo); }
.menu__free { color: var(--brass-hi); }
.on-bone .menu__free { color: var(--brass-lo); }

/* prezzo singolo, colonna destra della voce */
.menu__meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .1rem; text-align: right;
}
.menu__meta .menu__dur { padding-top: 0; }
.menu__price {
  font-family: var(--t-disp); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.2;
  white-space: nowrap; font-variant-numeric: lining-nums;
}

/* varianti per lunghezza: mini-tabella nella colonna destra */
.menu__vars { display: grid; gap: .45rem; min-width: min(255px, 100%); align-self: start; }
.menu__vars > div {
  display: grid; grid-template-columns: 5.6rem 1fr auto;
  align-items: baseline; gap: .9rem;
}
.menu__vars i {
  font-style: normal; font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-dark-dim);
}
.on-bone .menu__vars i { color: var(--on-light-dim); }
.menu__vars .menu__dur { padding-top: 0; }
.menu__vars b {
  font-family: var(--t-disp); font-weight: 400; font-size: 1.15rem;
  white-space: nowrap; text-align: right; font-variant-numeric: lining-nums;
}

/* ============================================================
   METODO — sequenza a passi
   ============================================================ */
.seq { display: grid; gap: 0; }
.seq__step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.6rem, 6vw, 5rem);
  border-top: 1px solid var(--on-dark-line);
}
.on-bone .seq__step { border-color: var(--on-light-line); }
.seq__step:last-child { border-bottom: 1px solid var(--on-dark-line); }
.on-bone .seq__step:last-child { border-color: var(--on-light-line); }
.seq__body h3 {
  font-family: var(--t-disp); font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.08;
}
.seq__body p { margin-top: 1rem; color: var(--on-dark-mid); font-size: 1rem; line-height: 1.8; }
.on-bone .seq__body p { color: var(--on-light-mid); }
.seq__media img { width: 100%; }

/* ============================================================
   GALLERY — impaginato da rivista
   ============================================================ */
.mag { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: repeat(12, 1fr); }
.mag figure { position: relative; cursor: zoom-in; overflow: hidden; }
.mag figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mag figure:hover img { transform: scale(1.045); }
.mag figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.3rem 1.15rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark);
  background: linear-gradient(to top, rgba(16,15,13,.82), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.mag figure:hover figcaption { opacity: 1; transform: none; }

.m-6  { grid-column: span 6; }
.m-4  { grid-column: span 4; }
.m-8  { grid-column: span 8; }
.m-12 { grid-column: span 12; }
.m-tall  { aspect-ratio: 3 / 4; }
.m-wide  { aspect-ratio: 16 / 9; }
.m-sq    { aspect-ratio: 1 / 1; }
.m-land  { aspect-ratio: 3 / 2; }   /* taglio naturale degli scatti ad alta risoluzione */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 9, 8, .96);
  display: grid; place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox__cap {
  margin-top: 1.2rem; text-align: center;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-dark-dim);
}
.lightbox__x {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--on-dark-line);
  color: var(--on-dark); font-size: 1.3rem; cursor: pointer;
  border-radius: 50%;
  transition: background .4s, color .4s;
}
.lightbox__x:hover { background: var(--bone); color: var(--ink); }

/* ============================================================
   CONTATTI
   ============================================================ */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); }
.cblock { padding-block: 1.5rem; border-top: 1px solid var(--on-dark-line); }
.on-bone .cblock { border-color: var(--on-light-line); }
.cblock h3 {
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); font-weight: 400; margin-bottom: .8rem;
}
.on-bone .cblock h3 { color: var(--brass-lo); }
.cblock p, .cblock a { font-size: 1rem; color: var(--on-dark-mid); }
.on-bone .cblock p, .on-bone .cblock a { color: var(--on-light-mid); }
.cblock .big {
  font-family: var(--t-disp); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2;
  color: var(--on-dark);
  display: block; margin-bottom: .4rem;
}
.on-bone .cblock .big { color: var(--on-light); }
.cblock a.big:hover { color: var(--brass); }

.hours { display: grid; gap: 0; }
.hours > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--on-dark-line);
  font-size: .92rem;
  color: var(--on-dark-mid);
}
.on-bone .hours > div { border-color: var(--on-light-line); color: var(--on-light-mid); }
.hours .shut { opacity: .42; }
.hours .now {
  color: var(--brass);
  position: relative; padding-left: 1.1rem;
}
.on-bone .hours .now { color: var(--brass-lo); }
.hours .now::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: currentColor;
}

.map { position: relative; min-height: 340px; height: 100%; overflow: hidden; filter: grayscale(1) contrast(.92) brightness(.86); transition: filter .8s var(--ease); }
.map:hover { filter: grayscale(0) contrast(1) brightness(1); }
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ============================================================
   RICHIAMO FINALE (in fondo a ogni pagina interna)
   ============================================================ */
.closer { position: relative; overflow: hidden; text-align: center; }
.closer__bg { position: absolute; inset: 0; z-index: 0; }
.closer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.closer__in { position: relative; z-index: 3; padding-block: clamp(4.5rem, 10vw, 8rem); }
.closer .actions { justify-content: center; margin-top: 2.4rem; }

/* ============================================================
   PIÈ DI PAGINA
   ============================================================ */
/* footer compatto: senza la parola gigante, il respiro si riduce */
.foot { background: var(--ink); color: var(--on-dark); padding-top: clamp(2.6rem, 5vw, 4rem); }
.foot__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.2rem;
  padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}
.foot__top h4 {
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); font-weight: 400; margin-bottom: 1.1rem;
}
.foot__top ul { list-style: none; display: grid; gap: .65rem; }
.foot__top a { font-size: .9rem; color: var(--on-dark-mid); transition: color .4s; }
.foot__top a:hover { color: var(--brass-hi); }
.foot__intro { font-size: .9rem; color: var(--on-dark-mid); max-width: 34ch; margin-top: 1.2rem; }

.foot__base {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-top: 1px solid var(--on-dark-line);
  font-size: .72rem;
  color: var(--on-dark-dim);
}

/* nota demo */
.demo-flag {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 80;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-dark-dim);
  background: rgba(16, 15, 13, .78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--on-dark-line);
  padding: .5rem .9rem;
}
.demo-flag b { color: var(--brass); font-weight: 400; }
@media (max-width: 760px) { .demo-flag { display: none; } }

/* ============================================================
   PRENOTAZIONE
   ============================================================ */
.book-page { padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(4rem, 9vw, 7rem); }
.book__head { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); display: grid; gap: 1rem; }

.stepper { display: flex; align-items: center; gap: .5rem; margin-bottom: 2.4rem; }
.stepper__step {
  display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-dim);
  transition: color .5s var(--ease);
  white-space: nowrap;
}
.stepper__dot {
  width: 27px; height: 27px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--on-dark-line);
  border-radius: 50%;
  font-size: .7rem;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.stepper__step.is-active { color: var(--on-dark); }
.stepper__step.is-active .stepper__dot { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.stepper__step.is-done .stepper__dot { border-color: var(--brass); color: var(--brass); }
.stepper__bar { flex: 1; height: 1px; background: var(--on-dark-line); }

.book-panel { border-top: 1px solid var(--on-dark-line); padding-top: clamp(2rem, 4vw, 3rem); }
.book-step { display: none; }
.book-step.is-active { display: block; animation: stepIn .7s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.book-step > h2 {
  font-family: var(--t-disp); font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.14;
}
.book-step > p { color: var(--on-dark-mid); margin-top: .7rem; max-width: 58ch; font-size: .96rem; }

/* --- step 1: colonna categorie + lista servizi dal listino --- */
.bwiz {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  margin-top: 2.2rem;
  align-items: start;
}
.bcats { display: grid; gap: .15rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
.bcat {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .74rem .95rem; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  border-left: 1px solid var(--on-dark-line);
  color: var(--on-dark-mid);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  transition: color .35s, border-color .35s, background .35s;
}
.bcat:hover { color: var(--on-dark); }
.bcat.is-active {
  color: var(--brass-hi);
  border-left-color: var(--brass);
  background: rgba(176, 139, 94, .07);
}

.bsvc-list { display: grid; gap: .7rem; }
.bsvc {
  border: 1px solid var(--on-dark-line);
  background: rgba(244, 240, 232, .02);
  padding: 1.15rem 1.3rem;
  display: grid; gap: .45rem;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
button.bsvc { text-align: left; cursor: pointer; }
.bsvc:hover { border-color: rgba(211, 174, 126, .55); }
.bsvc.is-selected { border-color: var(--brass); background: rgba(176, 139, 94, .1); }
.bsvc__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.4rem; flex-wrap: wrap;
}
.bsvc__head strong { font-family: var(--t-disp); font-weight: 400; font-size: 1.32rem; line-height: 1.2; }
.bsvc__head em {
  font-style: normal; font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass);
}
.bsvc__meta { display: flex; align-items: baseline; gap: .9rem; white-space: nowrap; }
.bsvc__meta i {
  font-style: normal; font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-dark-dim);
}
.bsvc__meta b { font-family: var(--t-disp); font-weight: 400; font-size: 1.18rem; }
.bsvc__meta b.is-free { color: var(--brass-hi); }
.bsvc > p { font-size: .85rem; color: var(--on-dark-mid); max-width: 60ch; }

/* varianti per lunghezza dentro la scheda servizio */
.bvars { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .5rem; }
.bvar {
  display: grid; gap: .1rem; justify-items: start;
  border: 1px solid var(--on-dark-line); background: transparent;
  padding: .6rem .95rem; min-width: 8.4rem;
  cursor: pointer; text-align: left;
  transition: border-color .35s, background .35s;
}
.bvar span {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-dim);
}
.bvar i { font-style: normal; font-size: .74rem; color: var(--on-dark-dim); }
.bvar b { font-family: var(--t-disp); font-weight: 400; font-size: 1.12rem; }
.bvar:hover { border-color: rgba(211, 174, 126, .55); }
.bvar.is-selected { border-color: var(--brass); background: rgba(176, 139, 94, .16); }
.bvar.is-selected span { color: var(--brass-hi); }

/* barra riepilogo della scelta, sopra i pulsanti di navigazione */
.booksel {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 2.4rem;
  display: grid; gap: .55rem;
  padding: .85rem 1.2rem;
  background: var(--ink-2);
  border: 1px solid var(--on-dark-line);
  border-left: 2px solid var(--brass);
}
.booksel__top {
  display: flex; align-items: baseline; gap: .6rem 1.2rem;
  flex-wrap: wrap; justify-content: space-between;
}
.booksel__label {
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--on-dark-dim); white-space: nowrap;
}
.booksel__tot {
  font-family: var(--t-disp); font-weight: 400; font-size: 1.1rem;
  color: var(--brass-hi); white-space: nowrap;
}
.booksel__when { font-size: .74rem; color: var(--on-dark-mid); }
.booksel__when[hidden] { display: none; }

/* un chip per servizio scelto, con la × per toglierlo */
.booksel__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bchip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(176, 139, 94, .12);
  border: 1px solid rgba(211, 174, 126, .35);
  color: var(--on-dark);
  padding: .3rem .5rem .3rem .7rem;
  font-size: .76rem; line-height: 1.3;
  cursor: pointer; text-align: left;
  transition: border-color .3s, background .3s;
}
.bchip span { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bchip i {
  font-style: normal; font-size: .95rem; line-height: 1;
  color: var(--brass-hi); opacity: .75;
}
.bchip:hover { border-color: var(--brass); background: rgba(176, 139, 94, .2); }
.bchip:hover i { opacity: 1; }

/* riepilogo finale: elenco dei servizi scelti */
.summary__list { display: grid; gap: .5rem; }
.summary__svc { display: grid; gap: .1rem; }
.summary__svc b { font-weight: 400; }
.summary__svc i {
  font-style: normal; font-size: .76rem; letter-spacing: .06em;
  color: var(--on-dark-dim);
}

.book-staff { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.bstaff {
  display: flex; align-items: center; gap: .85rem;
  background: transparent;
  border: 1px solid var(--on-dark-line);
  padding: .85rem 1.3rem .85rem .85rem;
  cursor: pointer;
  transition: border-color .45s var(--ease), background .45s var(--ease);
  text-align: left;
}
.bstaff:hover { border-color: var(--brass); }
.bstaff.is-selected { border-color: var(--brass); background: rgba(176, 139, 94, .12); }
.bstaff__avatar {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--brass); border-radius: 50%;
  font-family: var(--t-disp); font-size: .84rem; color: var(--brass-hi);
}
.bstaff strong { display: block; font-weight: 400; font-size: .95rem; }
/* solo il ruolo, non l'avatar: evita di sovrascrivere .bstaff__avatar */
.bstaff strong + span { display: block; font-size: .74rem; color: var(--on-dark-dim); }

.book-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); margin-top: 2rem; }

.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.cal__title { font-family: var(--t-disp); font-size: 1.35rem; text-transform: capitalize; }
.cal__nav { display: flex; gap: .5rem; }
.cal__nav button {
  width: 36px; height: 36px;
  background: none; border: 1px solid var(--on-dark-line);
  color: var(--on-dark); cursor: pointer;
  transition: border-color .4s, background .4s, color .4s;
}
.cal__nav button:hover:not([disabled]) { border-color: var(--brass); color: var(--brass); }
.cal__nav button[disabled] { opacity: .25; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow {
  text-align: center; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-dim); padding-bottom: .6rem;
}
.cal__day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--on-dark-mid);
  font-size: .88rem;
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s;
}
.cal__day:hover:not([disabled]) { border-color: var(--brass); color: var(--on-dark); }
.cal__day[disabled] { opacity: .2; cursor: not-allowed; }
.cal__day.is-today { border-color: var(--on-dark-line); }
.cal__day.is-selected { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.cal__legend { margin-top: 1rem; font-size: .72rem; color: var(--on-dark-dim); }

.slots h3 {
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); font-weight: 400; margin-bottom: .9rem;
}
.slots__hint { font-size: .84rem; color: var(--on-dark-dim); margin-bottom: 1rem; }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.slot {
  background: transparent;
  border: 1px solid var(--on-dark-line);
  color: var(--on-dark-mid);
  padding: .75rem .4rem;
  font-size: .86rem;
  cursor: pointer;
  transition: border-color .35s, background .35s, color .35s;
}
.slot:hover:not([disabled]) { border-color: var(--brass); color: var(--on-dark); }
.slot[disabled] { opacity: .22; cursor: not-allowed; text-decoration: line-through; }
.slot.is-selected { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.book-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: 2rem; }
.field { display: grid; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-dim); }
.field input, .field textarea {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--on-dark-line);
  padding: .8rem 0;
  font-size: 1rem;
  transition: border-color .4s;
}
.field textarea { min-height: 105px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-dim); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--brass); }
.field .err { font-size: .76rem; color: #d98b7a; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #d98b7a; }
.field.has-error .err { display: block; }

.summary { margin: 1.8rem 0; border-top: 1px solid var(--on-dark-line); }
.summary__row {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 1rem 2rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--on-dark-line);
  font-size: .95rem;
}
/* il JS genera <span>etichetta</span><strong>valore</strong> */
.summary__row > span {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); font-weight: 400; padding-top: .28rem;
}
.summary__row strong { font-weight: 400; }

.book-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; }

.book-success { text-align: center; display: grid; gap: 1.1rem; justify-items: center; padding-block: 2rem; }
.book-success__ring {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border: 1px solid var(--brass); border-radius: 50%;
  color: var(--brass-hi); font-size: 1.7rem;
  animation: ringIn .9s var(--ease-veil) both;
}
@keyframes ringIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.book-success h2 { font-family: var(--t-disp); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.book-success p { color: var(--on-dark-mid); max-width: 52ch; }
.status-chip {
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); border: 1px solid var(--brass);
  padding: .45rem 1rem; border-radius: 999px;
}
.book-success .actions { justify-content: center; margin-top: .8rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .foot__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .burger { display: block; }
  /* Il bottone "Chiama" NON si nasconde più sul telefono. Quando la pagina
     serviva a portare al wizard di prenotazione, l'hamburger bastava; ora
     chiamare è la sola azione del sito, e il pubblico arriva da Instagram
     proprio da qui. Si stringe per stare accanto all'hamburger: il numero
     per intero resta nel menu e in fondo a ogni pagina. */
  .nav__book { padding: .72rem 1.1rem; font-size: .66rem; letter-spacing: .16em; }
  .nav__end { gap: .85rem; }
  .duo, .contact, .book-datetime, .seq__step { grid-template-columns: 1fr; }
  .duo--flip .duo__media { order: 0; }
  .m-6, .m-4, .m-8 { grid-column: span 12; }
  .m-tall, .m-wide, .m-sq { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  :root { --nav-h: 72px; }
  .cover__line { font-size: .62rem; letter-spacing: .18em; }
  .facts > div { grid-template-columns: 1fr; gap: .3rem; }
  .menu__item { grid-template-columns: 1fr; }
  .menu__dur { padding-top: 0; }
  /* su telefono: titolo e conteggio, il claim scende nel corpo */
  .menu__cat-head { grid-template-columns: 1fr auto; gap: .8rem; }
  .menu__cat-name p, .menu__count { display: none; }
  .menu__meta { flex-direction: row; align-items: baseline; gap: .9rem; text-align: left; }
  .menu__vars > div { grid-template-columns: 4.6rem 1fr auto; gap: .6rem; }
  .book-form { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  .stepper__step span:not(.stepper__dot) { display: none; }
  .stepper__step { font-size: 0; }
  .book-nav { flex-direction: column-reverse; }
  .book-nav .btn { width: 100%; }
  .bwiz { grid-template-columns: 1fr; }
  .bcats {
    position: static; display: flex; overflow-x: auto; gap: .3rem;
    border-bottom: 1px solid var(--on-dark-line); padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .bcats::-webkit-scrollbar { display: none; }
  .bcat {
    border-left: 0; border-bottom: 2px solid transparent;
    white-space: nowrap; padding: .45rem .7rem; flex: none;
  }
  .bcat.is-active { border-bottom-color: var(--brass); background: transparent; }
  .bsvc__head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .booksel { gap: .45rem; padding: .7rem .85rem; max-height: 45vh; overflow-y: auto; }
  .booksel__label { display: none; }
  .booksel__tot { font-size: 1rem; }
  .bchip span { max-width: 15ch; }
}


/* Errore restituito dal database in fase di invio della richiesta
   (slot appena occupato, orario fuori apertura, troppe richieste):
   compare sul riepilogo, dove i dati digitati restano recuperabili. */
.book-err {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-left: 3px solid #c25c45;
  background: rgba(194, 92, 69, .12);
  color: #e2a494;
  font-size: .9rem;
  line-height: 1.5;
  border-radius: 8px;
}

/* ------------------------------------------------------------------
   Pagina "il tuo appuntamento" (appuntamento.html)

   Si apre da un link ricevuto per messaggio, quasi sempre dal
   telefono: pochi elementi, molto grandi, nessuna colonna che possa
   stringersi. Riusa .slot e .slots__grid del wizard di prenotazione.
   ------------------------------------------------------------------ */
.appt-box {
  border: 1px solid var(--on-dark-line);
  border-radius: 12px;
  padding: 1.6rem;
  margin-top: 1.6rem;
}
.appt-box--bad  { border-left: 3px solid #c25c45; }
.appt-box--warn { border-left: 3px solid var(--brass); }
.appt-box--ok   { border-left: 3px solid #6f9c72; }
.appt-box .actions { margin-top: 1.6rem; }
.appt-box h2 { margin-bottom: .8rem; }

.appt-when {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding-bottom: 1.2rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--on-dark-line);
}
.appt-when strong {
  font-size: 1.45rem; font-weight: 500; color: var(--on-dark);
  line-height: 1.25;
}
.appt-when span { font-size: .84rem; color: var(--on-dark-dim); }

.appt-list { display: grid; gap: .7rem; }
.appt-list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.appt-list dt {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); font-weight: 400; padding-top: .18rem;
}
.appt-list dd { color: var(--on-dark-mid); font-size: .95rem; }

/* Il motivo per cui i pulsanti non ci sono: sempre visibile, mai un
   pulsante disattivato senza spiegazione. */
.appt-note {
  margin-top: 1.4rem; padding: .85rem 1rem;
  background: rgba(255, 255, 255, .04);
  border-left: 3px solid var(--on-dark-line);
  border-radius: 8px;
  font-size: .9rem; line-height: 1.55; color: var(--on-dark-mid);
}

.appt-field { display: grid; gap: .5rem; margin-bottom: 1.2rem; max-width: 18rem; }
.appt-field > span {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass);
}
.appt-field input {
  background: transparent; border: 1px solid var(--on-dark-line);
  color: var(--on-dark); padding: .75rem .9rem; font: inherit; font-size: .95rem;
  border-radius: 8px;
}
.appt-field input:focus { outline: none; border-color: var(--brass); }

.appt-hint { font-size: .88rem; color: var(--on-dark-dim); margin-bottom: 1rem; }

@media (max-width: 560px) {
  .appt-box { padding: 1.2rem; }
  .appt-list > div { grid-template-columns: 1fr; gap: .15rem; }
  .appt-when strong { font-size: 1.25rem; }
}