/* =========================================================================
   Trattoria da Mario — progetto dimostrativo di NG Studio
   Nessuna libreria, nessuna richiesta a server esterni, nessun cookie.
   ========================================================================= */

/* Transizioni fra pagine: il passaggio da una pagina all'altra diventa una
   dissolvenza invece di un lampo bianco. Dove non e supportato, il sito
   funziona esattamente come prima. */
@view-transition { navigation: auto; }

:root {
  color-scheme: light;

  --crema:      #FAF5EC;
  --crema-2:    #F1E7D6;
  --carta:      #FFFFFF;
  --carbone:    #17120E;
  --carbone-2:  #241C16;

  --inchiostro:   #241B14;
  --inchiostro-2: #5B4B3D;
  --inchiostro-3: #8B7862;

  --linea:      #E2D5BE;
  --linea-2:    #CDBB9C;

  --ottone:     #B08432;
  --ottone-3:   #8A6520;
  --terra:      #A6421F;
  --bosco:      #2E4436;

  --sp:         clamp(20px, 5vw, 44px);
  --maxw:       1180px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ombra-1: 0 1px 2px rgba(36,27,20,.05), 0 8px 24px -8px rgba(36,27,20,.10);
  --ombra-2: 0 30px 70px -34px rgba(36,27,20,.45);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 17px; line-height: 1.65;
  color: var(--inchiostro-2);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--ottone); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}

/* ---------- Tipografia ------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif); color: var(--inchiostro);
  font-weight: 600; line-height: 1.08; letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { text-wrap: pretty; }

.occhiello {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ottone-3);
}
.occhiello::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.occhiello.solo::before { display: none; }
.guida { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; }
.piccolo { font-size: .9rem; }
.minuto  { font-size: .8rem; line-height: 1.55; color: var(--inchiostro-3); }

/* ---------- Impaginazione ---------------------------------------------- */
.contenitore { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp); }
.stretto { max-width: 760px; }
.sezione { padding-block: clamp(64px, 9vw, 128px); }
.sezione-corta { padding-block: clamp(40px, 5vw, 68px); }
.fondo-crema { background: var(--crema-2); }
.fondo-scuro { background: var(--carbone); color: #CFC3B4; }
.fondo-scuro h2, .fondo-scuro h3 { color: #fff; }
.fondo-scuro .occhiello { color: var(--ottone); }

.intestazione-sezione { max-width: 640px; margin-bottom: clamp(36px, 5vw, 64px); }
.intestazione-sezione.centro { margin-inline: auto; text-align: center; }
.intestazione-sezione h2 { margin-top: 18px; }
.intestazione-sezione p { margin-top: 18px; }

/* ---------- Bottoni ----------------------------------------------------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.9rem; border-radius: 100px;
  font-weight: 650; font-size: 1rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.bottone:hover { transform: translateY(-3px); }
.bottone:active { transform: translateY(-1px); }
.b-pieno  { background: var(--terra); color: #fff; box-shadow: 0 12px 30px -12px rgba(166,66,31,.65); }
.b-pieno:hover { background: #8E3517; box-shadow: 0 18px 40px -14px rgba(166,66,31,.7); }
.b-vuoto  { border-color: var(--linea-2); color: var(--inchiostro); }
.b-vuoto:hover { border-color: var(--inchiostro); background: rgba(36,27,20,.04); }
.b-chiaro { background: var(--crema); color: var(--inchiostro); }
.b-chiaro:hover { background: #fff; }
.b-bordo-chiaro { border-color: rgba(255,255,255,.35); color: #fff; }
.b-bordo-chiaro:hover { border-color: #fff; background: rgba(255,255,255,.10); }
.b-piccolo { padding: .6rem 1.15rem; font-size: .9rem; }
.fila { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fila.centro { justify-content: center; }

/* ---------- Barra di navigazione ---------------------------------------- */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--crema) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
  view-transition-name: barra;
}
.barra.staccata { border-bottom-color: var(--linea); }
.barra .contenitore { display: flex; align-items: center; gap: 20px; height: 76px; }

.marchio { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marchio-segno {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--carbone); color: var(--ottone);
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: .02em;
}
.marchio-testo { font-family: var(--serif); font-size: 1.22rem; color: var(--inchiostro); line-height: 1.05; }
.marchio-testo span {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--inchiostro-3); margin-top: 3px;
}

.menu-nav { display: flex; align-items: center; gap: 2px; }
.menu-nav a:not(.bottone) {
  position: relative; padding: .5rem .85rem; border-radius: 8px;
  text-decoration: none; font-size: .95rem; font-weight: 550; color: var(--inchiostro-2);
  transition: color .2s;
}
.menu-nav a:not(.bottone)::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem; height: 1.5px;
  background: var(--terra); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.menu-nav a:not(.bottone):hover { color: var(--inchiostro); }
.menu-nav a:not(.bottone):hover::after,
.menu-nav a.attivo::after { transform: scaleX(1); }
.menu-nav a.attivo { color: var(--inchiostro); font-weight: 650; }

.apri-menu {
  display: none; width: 46px; height: 46px; flex: none; padding: 0;
  border: 1px solid var(--linea-2); border-radius: 12px; background: var(--carta); cursor: pointer;
}
.apri-menu i { display: block; width: 18px; height: 1.6px; background: var(--inchiostro); margin: 0 auto; position: relative; transition: .25s; }
.apri-menu i::before, .apri-menu i::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: var(--inchiostro); transition: .25s;
}
.apri-menu i::before { top: -6px; } .apri-menu i::after { top: 6px; }
.apri-menu[aria-expanded="true"] i { background: transparent; }
.apri-menu[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.apri-menu[aria-expanded="true"] i::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .apri-menu { display: block; }
  .menu-nav {
    position: absolute; top: 76px; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--carta); border-bottom: 1px solid var(--linea);
    padding: 16px var(--sp) 24px; box-shadow: var(--ombra-1);
  }
  .menu-nav.aperto { display: flex; }
  .menu-nav a:not(.bottone) { padding: .85rem .6rem; font-size: 1.05rem; }
  .menu-nav .bottone { margin-top: 12px; justify-content: center; }
}

/* ---------- Pastiglia "aperto ora" -------------------------------------- */
.stato {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem 1rem; border-radius: 100px;
  font-size: .85rem; font-weight: 600;
  border: 1px solid transparent;
}
.stato .punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stato.aperto  { background: rgba(46,68,54,.10); color: #2E4436; border-color: rgba(46,68,54,.22); }
.stato.aperto .punto  { background: #35855C; box-shadow: 0 0 0 4px rgba(53,133,92,.20); animation: pulsa 2.4s ease-in-out infinite; }
.stato.chiuso  { background: rgba(166,66,31,.09); color: var(--terra); border-color: rgba(166,66,31,.20); }
.stato.chiuso .punto  { background: var(--terra); }
.stato.su-scuro { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); color: #EDE3D6; }
@keyframes pulsa { 0%,100% { box-shadow: 0 0 0 4px rgba(53,133,92,.20); } 50% { box-shadow: 0 0 0 7px rgba(53,133,92,0); } }

/* ---------- Copertina --------------------------------------------------- */
.copertina { position: relative; overflow: hidden; background: var(--carbone); color: #E8DCCB; }
.copertina-sfondo { position: absolute; inset: 0; z-index: 0; }
.copertina-sfondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(23,18,14,.35) 0%, rgba(23,18,14,.55) 45%, rgba(23,18,14,.92) 100%),
    radial-gradient(70% 55% at 78% 18%, rgba(176,132,50,.30), transparent 65%);
}
.copertina-sfondo svg,
.copertina-sfondo img { width: 100%; height: 100%; object-fit: cover; }
.copertina .contenitore { position: relative; z-index: 1; padding-block: clamp(80px, 15vh, 168px) clamp(56px, 9vh, 104px); }
.copertina h1 { color: #fff; max-width: 13ch; margin-top: 22px; }
.copertina h1 em { font-style: italic; color: var(--ottone); }
.copertina .guida { margin-top: 24px; max-width: 46ch; color: #D6C9B8; }
.copertina .fila { margin-top: 34px; }
.copertina .occhiello { color: var(--ottone); }

/* fascia dei dati sotto la copertina */
.fascia-dati {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 760px) { .fascia-dati { grid-template-columns: repeat(2, 1fr); } }
.fascia-dati div { padding: 22px clamp(12px,2vw,24px); text-align: center; border-left: 1px solid rgba(255,255,255,.12); }
.fascia-dati div:first-child { border-left: none; }
@media (max-width: 760px) { .fascia-dati div:nth-child(3) { border-left: none; } }
.fascia-dati b { display: block; font-family: var(--serif); font-size: clamp(1.4rem,3vw,1.9rem); color: #fff; letter-spacing: -.02em; }
.fascia-dati span { display: block; font-size: .78rem; color: #A2937F; margin-top: 5px; letter-spacing: .04em; }

/* ---------- Comparsa allo scorrimento ----------------------------------- */
.rivela { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rivela.dentro { opacity: 1; transform: none; }
.rivela[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }
@media (prefers-reduced-motion: reduce) { .rivela { opacity: 1; transform: none; } }

/* Parallasse leggera, solo dove il browser la supporta a costo zero */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallasse { animation: sali linear both; animation-timeline: view(); animation-range: entry 0% cover 100%; }
    @keyframes sali { from { transform: translateY(6%) scale(1.06); } to { transform: translateY(-6%) scale(1.06); } }
  }
}

/* ---------- Blocco "oggi in cucina" ------------------------------------- */
.oggi { position: relative; }
.oggi-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 900px) { .oggi-griglia { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.piatto-oggi {
  position: relative; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px; padding: 26px 26px 28px; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, background-color .35s;
}
.piatto-oggi::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: radial-gradient(90% 70% at 50% 0%, rgba(176,132,50,.16), transparent 70%);
}
.piatto-oggi:hover { transform: translateY(-6px); border-color: rgba(176,132,50,.42); }
.piatto-oggi:hover::before { opacity: 1; }
.piatto-oggi > * { position: relative; }
.piatto-oggi .ruolo { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ottone); }
.piatto-oggi h3 { color: #fff; margin-top: 12px; }
.piatto-oggi p { font-size: .94rem; margin-top: 10px; color: #B0A190; }
.piatto-oggi .prezzo { display: block; margin-top: 18px; font-family: var(--serif); font-size: 1.5rem; color: var(--ottone); }

/* ---------- Sezione a due colonne --------------------------------------- */
.doppia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
@media (max-width: 900px) { .doppia { grid-template-columns: 1fr; } }
.doppia.stretta-dx { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px) { .doppia.stretta-dx { grid-template-columns: 1fr; } }

/* Cornice per le illustrazioni / fotografie */
.cornice { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--ombra-2); background: var(--carbone-2); }
.cornice svg,
.cornice img { width: 100%; height: auto; display: block; }
.cornice figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 22px 16px;
  font-size: .78rem; color: rgba(255,255,255,.82);
  background: linear-gradient(transparent, rgba(0,0,0,.62));
}
.cornice.alta { aspect-ratio: 3 / 4; }
.cornice.alta svg,
.cornice.alta img { height: 100%; object-fit: cover; }

/* ---------- Dove siamo -------------------------------------------------- */
/* Gli orari e le indicazioni sono due schede corte: affiancate lasciavano
   sotto due colonne di vuoto disuguali, e la fotografia della sala finiva
   infilata in fondo a una delle due, larga meta pagina. Adesso le schede
   stanno incolonnate a sinistra e la fotografia si prende tutta l'altezza
   della colonna di destra: e' l'unica cosa qui dentro che vale la pena
   guardare in grande.

   L'immagine e' in posizione assoluta e non alta il 100%: l'altezza della
   figura non gliela da' nessuno, gliela da' la riga della griglia, e una
   percentuale su un'altezza che non e' scritta da nessuna parte e' il modo
   piu' rapido per ritrovarsi una fotografia alta zero.

   La figura NON prende .cornice.alta, che pure sarebbe la classe giusta per
   una fotografia in piedi: quella impone aspect-ratio 3/4, e su una figura
   gia' alta quanto la colonna accanto l'aspect-ratio non decide l'altezza,
   decide la LARGHEZZA - 810 pixel di altezza diventavano 607 di larghezza e
   la fotografia usciva dalla colonna di una cinquantina di pixel. */
.dove-siamo {
  display: grid; grid-template-columns: 1fr .84fr;
  gap: clamp(24px, 4vw, 56px); align-items: stretch;
}
.dove-schede { display: grid; gap: clamp(20px, 3vw, 30px); align-content: start; }
.dove-foto { min-height: 460px; }
.dove-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .dove-siamo { grid-template-columns: 1fr; }
  .dove-foto { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- Elenco a passi ---------------------------------------------- */
.passi { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: p; }
.passi li {
  position: relative; padding: 26px 0 26px 76px; border-top: 1px solid var(--linea);
  counter-increment: p;
}
.passi li:last-child { border-bottom: 1px solid var(--linea); }
.passi li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: 26px;
  font-family: var(--serif); font-size: 1.5rem; color: var(--ottone); letter-spacing: -.02em;
}
.passi h3 { margin-bottom: .4rem; }
.passi p { font-size: .97rem; }

/* ---------- Menu (elenco piatti) ---------------------------------------- */
.gruppo-menu + .gruppo-menu { margin-top: clamp(44px, 6vw, 72px); }
.titolo-gruppo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 2px solid var(--inchiostro); margin-bottom: 6px;
}
.titolo-gruppo h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.titolo-gruppo span { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inchiostro-3); white-space: nowrap; }

.piatto {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 24px;
  padding: 20px 0; border-bottom: 1px solid var(--linea);
  transition: opacity .35s, filter .35s;
}
.piatto:last-child { border-bottom: none; }
.piatto-nome { font-size: 1.08rem; font-weight: 650; color: var(--inchiostro); font-family: var(--sans); }
.piatto-desc { grid-column: 1 / 2; font-size: .93rem; color: var(--inchiostro-3); margin-top: 4px; max-width: 60ch; }
.piatto-prezzo { font-family: var(--serif); font-size: 1.25rem; color: var(--terra); white-space: nowrap; align-self: start; }
.piatto.escluso { opacity: .22; filter: grayscale(1); }

.segni { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 8px; vertical-align: 2px; }
.segno {
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: var(--crema-2); color: var(--inchiostro-3);
}
.segno.veg  { background: #E4EFE3; color: #2C6B36; }
.segno.vegan{ background: #DCEFE0; color: #1F6B41; }
.segno.gluten { background: #F6E9D6; color: #8A5D0F; }
.segno.pesce  { background: #E1EBF3; color: #2A5C86; }
.segno.latte  { background: #F3EAF6; color: #6B3F80; }

/* filtri del menu */
.filtri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.filtro {
  padding: .55rem 1.05rem; border-radius: 100px; cursor: pointer;
  border: 1.5px solid var(--linea-2); background: transparent;
  font-size: .9rem; font-weight: 600; color: var(--inchiostro-2);
  transition: background-color .25s, border-color .25s, color .25s, transform .2s;
}
.filtro:hover { transform: translateY(-2px); border-color: var(--inchiostro-3); }
.filtro[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--crema); }
.esito-filtri { margin-top: 18px; font-size: .92rem; color: var(--inchiostro-3); }

/* ---------- Riquadri ---------------------------------------------------- */
.riquadro {
  background: var(--carta); border: 1px solid var(--linea); border-radius: 20px;
  padding: clamp(24px, 3vw, 34px);
}
.riquadro.caldo { background: var(--crema-2); border-color: var(--linea-2); }
.nota {
  border-left: 3px solid var(--ottone); background: rgba(176,132,50,.09);
  padding: 18px 22px; border-radius: 0 14px 14px 0; font-size: .96rem;
}
.nota b { display: block; color: var(--inchiostro); margin-bottom: .3rem; }

.orari { width: 100%; border-collapse: collapse; font-size: .97rem; }
.orari td { padding: .68rem 0; border-bottom: 1px dashed var(--linea); }
.orari tr:last-child td { border-bottom: none; }
.orari td:last-child { text-align: right; font-weight: 600; color: var(--inchiostro); }
.orari tr.oggi-riga td { color: var(--terra); font-weight: 700; }
.orari tr.oggi-riga td:first-child::before { content: "→ "; }
.serrato { color: var(--terra) !important; font-weight: 600; }

.riga-icona { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; margin-top: 16px; font-size: .96rem; }
.riga-icona svg { width: 22px; height: 22px; color: var(--terra); margin-top: 2px; }

/* ---------- Modulo ------------------------------------------------------ */
.modulo { display: grid; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo label { font-size: .88rem; font-weight: 650; color: var(--inchiostro); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .9rem 1.05rem; border-radius: 12px;
  border: 1.5px solid var(--linea-2); background: var(--carta); color: var(--inchiostro);
  font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px rgba(166,66,31,.14);
}
.campo .aiuto { font-size: .82rem; color: var(--inchiostro-3); }
.due-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .due-campi { grid-template-columns: 1fr; } }

/* selettore a pillole (coperti, orario) */
.pillole { display: flex; flex-wrap: wrap; gap: 9px; }
.pillola {
  min-width: 52px; padding: .6rem .95rem; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--linea-2); background: var(--carta);
  font-size: .95rem; font-weight: 600; color: var(--inchiostro-2);
  transition: all .22s cubic-bezier(.2,.7,.3,1);
}
.pillola:hover:not(:disabled) { border-color: var(--inchiostro-3); transform: translateY(-2px); }
.pillola[aria-pressed="true"] { background: var(--terra); border-color: var(--terra); color: #fff; box-shadow: 0 8px 20px -8px rgba(166,66,31,.6); }
.pillola:disabled { opacity: .32; cursor: not-allowed; text-decoration: line-through; }

.riepilogo {
  background: var(--carbone); color: #D9CDBD; border-radius: 18px;
  padding: 24px 26px; position: sticky; top: 96px;
}
.riepilogo h3 { color: #fff; font-size: 1.15rem; }
.riepilogo dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin-top: 18px; font-size: .95rem; }
.riepilogo dt { color: #9C8D7B; }
.riepilogo dd { margin: 0; text-align: right; color: #fff; font-weight: 600; }
.riepilogo .bottone { width: 100%; margin-top: 22px; }
.riepilogo .avviso { margin-top: 14px; font-size: .82rem; color: #9C8D7B; line-height: 1.5; }

/* ---------- Chiamata finale --------------------------------------------- */
.chiamata {
  position: relative; overflow: hidden; border-radius: 26px;
  background: var(--carbone); color: #CFC3B4; text-align: center;
  padding: clamp(40px, 7vw, 84px) clamp(24px, 5vw, 60px);
}
.chiamata::before {
  content: ""; position: absolute; inset: auto -20% -70% -20%; height: 420px;
  background: radial-gradient(50% 60% at 50% 100%, rgba(176,132,50,.34), transparent 70%);
}
.chiamata > * { position: relative; }
.chiamata h2 { color: #fff; }
.chiamata p { margin: 20px auto 0; max-width: 54ch; }
.chiamata .fila { margin-top: 32px; }

/* ---------- Piede ------------------------------------------------------- */
.piede { background: var(--carbone); color: #8E8071; padding-block: clamp(50px, 7vw, 78px) 30px; }
.piede a { color: #C0B2A1; text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.piede-griglia { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 4vw, 52px); }
@media (max-width: 760px) { .piede-griglia { grid-template-columns: 1fr; } }
.piede h4 { color: #fff; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 15px; }
.piede ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.piede-coda {
  margin-top: clamp(34px, 5vw, 54px); padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: .8rem; color: #766A5C; text-align: center; line-height: 1.7;
}

/* ---------- Fascia "progetto dimostrativo" ------------------------------ */
.avviso-demo {
  background: #B65A24; color: #fff; text-align: center;
  padding: .65rem var(--sp); font-size: .85rem; font-weight: 600;
  position: relative; z-index: 70;
}
.avviso-demo a { color: #fff; text-underline-offset: 3px; }

/* ---------- Utility ----------------------------------------------------- */
.solo-lettori { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--terra); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 10px;
  text-decoration: none; font-weight: 650; transition: top .2s;
}
.salta:focus { top: 0; }
.su-1 { margin-top: .6rem; } .su-2 { margin-top: 1.3rem; } .su-3 { margin-top: 2.2rem; } .su-4 { margin-top: 3.2rem; }
.centrato { text-align: center; }

/* Su schermo stretto il sottotitolo del gruppo non deve restare su una riga
   sola: con "white-space: nowrap" allargava la pagina e faceva comparire lo
   scorrimento orizzontale. */
@media (max-width: 620px) {
  .titolo-gruppo { flex-direction: column; align-items: flex-start; gap: 4px; }
  .titolo-gruppo span { white-space: normal; }
}

/* ---------- Fascia fotografica in cima alle pagine interne -------------- */
.fascia-foto { border-radius: 22px; overflow: hidden; box-shadow: var(--ombra-1); }
.fascia-foto img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .fascia-foto img { aspect-ratio: 16 / 9; } }

/* =========================================================================
   VETRINA — la parte "che si fa guardare"
   -------------------------------------------------------------------------
   Questo blocco e uguale su tutti e tre i siti dimostrativi: cambiano solo i
   colori, che vengono presi dalle variabili gia definite in cima al file con
   i nomi di questo locale. Le righe qui sotto fanno da ponte fra i due
   vocabolari: cosi lo stesso blocco funziona sul rosso della pizzeria, sul
   mattone della trattoria e sulla prugna del salone senza toccarne una riga.
   ========================================================================= */
:root {
  --v-accento:    var(--terra);
  --v-accento-2:  #8E3517;
  --v-oro:        var(--ottone);
  --v-fondo:      var(--crema);
  --v-fondo-2:    var(--crema-2);
  --v-carta:      var(--carta);
  --v-scuro:      var(--carbone);
  --v-testo:      var(--inchiostro);
  --v-testo-3:    var(--inchiostro-3);
  --v-linea:      var(--linea);
  --v-linea-2:    var(--linea-2);
}

/* ---------- 1. L'insegna del locale ------------------------------------- */
/* Al posto dell'iniziale dentro al cerchietto, che e il modo piu rapido per
   far capire a chi guarda che sta guardando un finto. I file li disegna
   _build/loghi.py: marchio.svg e l'emblema tondo (leggibile a 44 pixel),
   insegna.svg e l'insegna intera col nome. */
.marchio-emblema {
  width: 44px; height: 44px; flex: none;
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
}
.marchio:hover .marchio-emblema { transform: rotate(-9deg) scale(1.07); }
@media (max-width: 420px) { .marchio-emblema { width: 38px; height: 38px; } }

/* L'insegna grande in cima alla copertina. Sta su una fotografia scura,
   quindi ha un'ombra sotto: senza, il panna dell'insegna si appoggia sul
   grigio della foto e i bordi si perdono. */
.insegna-copertina {
  width: clamp(150px, 20vw, 218px); height: auto;
  margin-bottom: clamp(14px, 2.4vw, 26px);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
.piede .insegna-piede { width: 188px; height: auto; margin-bottom: 20px; }

/* ---------- 2. L'ingresso della copertina -------------------------------- */
/* Le righe della copertina non compaiono tutte insieme ma una dopo l'altra,
   dall'alto. Sono quattro decimi di secondo in tutto: non e un'attesa, e la
   differenza fra una pagina che "si apre" e una che "c'e gia". */
@media (prefers-reduced-motion: no-preference) {
  .copertina .contenitore > * { animation: v-sale .85s cubic-bezier(.2,.7,.3,1) both; }
  .copertina .contenitore > *:nth-child(1) { animation-delay: .05s; }
  .copertina .contenitore > *:nth-child(2) { animation-delay: .13s; }
  .copertina .contenitore > *:nth-child(3) { animation-delay: .21s; }
  .copertina .contenitore > *:nth-child(4) { animation-delay: .29s; }
  .copertina .contenitore > *:nth-child(5) { animation-delay: .37s; }
  .copertina .contenitore > *:nth-child(6) { animation-delay: .45s; }
  /* La fascia dei numeri sale dal basso, dopo tutto il resto. */
  .copertina .fascia,
  .copertina .fascia-dati { animation: v-sale .9s cubic-bezier(.2,.7,.3,1) .5s both; }
}
@keyframes v-sale { from { opacity: 0; transform: translateY(22px); } }

/* ---------- 3. La riga di avanzamento della lettura ---------------------- */
.avanzamento {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
  transform: scaleX(var(--letto, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--v-accento), var(--v-oro));
  transition: opacity .3s;
}
.avanzamento[data-spenta] { opacity: 0; }

/* ---------- 4. I numeri della copertina --------------------------------- */
/* Le celle erano disallineate: le etichette sotto ai numeri vanno a capo un
   numero di righe diverso ("Tavoli, non uno di piu" occupa due righe,
   "1974" una), e le cifre finivano ad altezze diverse. Con la griglia a due
   righe fisse le cifre stanno tutte sulla stessa linea e le etichette si
   appoggiano sotto, comunque vadano a capo. */
.fascia > div,
.fascia-dati > div {
  display: grid; grid-template-rows: auto 1fr; align-content: start;
  gap: 5px;
}
.fascia b, .fascia-dati b { font-variant-numeric: tabular-nums; }
/* Un filo di colore che si accende sotto alla cella su cui passi. */
.fascia > div, .fascia-dati > div { position: relative; }
.fascia > div::after,
.fascia-dati > div::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px;
  background: var(--v-oro); transform: scaleX(0); opacity: .9;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.fascia > div:hover::after,
.fascia-dati > div:hover::after { transform: scaleX(1); }

/* ---------- 5. Comparsa: due modi in piu ------------------------------- */
/* Quello che c'era gia (.rivela) fa salire il blocco. Questi due aggiungono
   la direzione e la tenda, che servono alle sezioni a due colonne e alle
   fotografie. */
.rivela.da-lato   { transform: translate3d(30px, 0, 0); }
.rivela.da-lato-sx{ transform: translate3d(-30px, 0, 0); }
.rivela.da-lato.dentro, .rivela.da-lato-sx.dentro { transform: none; }

/* La tenda: la fotografia non compare sfumando, si scopre dal basso verso
   l'alto mentre l'immagine dentro rientra dalla scala. Sono due movimenti
   opposti nello stesso istante ed e quello che la fa sembrare "stampata"
   invece che "accesa". */
/* Nota importante sull'ordine delle cose: la tenda parte APERTA, cioe la
   fotografia si vede. E lo script, quando parte, a chiuderla (.armata) per
   poi riaprirla al momento giusto (.dentro).

   Scritto al contrario — nascosta di partenza, e lo script la mostra — una
   fotografia resterebbe invisibile per sempre a chi ha JavaScript spento, a
   chi ha un blocco degli annunci troppo zelante, o se il file non arriva. Su
   una galleria di sei fotografie vorrebbe dire mezza pagina vuota, che e
   esattamente il difetto che questa galleria doveva risolvere. */
.tenda { transition: clip-path 1.05s cubic-bezier(.65,0,.25,1); }
.tenda img { transition: transform 1.3s cubic-bezier(.2,.7,.3,1); }
.tenda.armata { clip-path: inset(0 0 100% 0); }
.tenda.armata img { transform: scale(1.14); }
.tenda.armata.dentro { clip-path: inset(0 0 0 0); }
.tenda.armata.dentro img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .tenda.armata { clip-path: none; } .tenda.armata img { transform: none; }
}

/* ---------- 6. La galleria ---------------------------------------------- */
/* Le fotografie c'erano gia nella cartella ma stavano tutte nelle pagine
   interne: la prima pagina era un muro di testo con due immagini, e i vuoti
   sembravano immagini che non si erano caricate. */
.galleria {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}
.galleria figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 18px; background: var(--v-fondo-2);
  grid-column: span 2; aspect-ratio: 1;
}
.galleria figure.larga  { grid-column: span 3; aspect-ratio: 3 / 2; }
.galleria figure.altra  { grid-column: span 3; aspect-ratio: 3 / 2; }
.galleria img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.3,1); }
.galleria figure:hover img { transform: scale(1.07); }
/* La didascalia si alza da sotto al passaggio del mouse. Sul telefono, dove
   il passaggio del mouse non esiste, resta sempre visibile. */
.galleria figcaption {
  position: absolute; inset: auto 0 0 0; padding: 30px 16px 14px;
  font-size: .82rem; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  transform: translateY(100%); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .35s;
}
.galleria figure:hover figcaption { transform: none; opacity: 1; }
@media (hover: none) {
  .galleria figcaption { transform: none; opacity: 1; }
}
@media (max-width: 760px) {
  .galleria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galleria figure.larga, .galleria figure.altra { grid-column: span 4; }
  /* L'ultima fotografia, quando resta spaiata, si prende tutta la riga invece
     di lasciare mezza riga vuota accanto a se.

     Perche proprio ":last-child:nth-child(odd)": le due fotografie larghe in
     cima occupano una riga intera ciascuna, quindi le piccole si accoppiano a
     partire dalla terza, e restano spaiate esattamente quando il totale e
     dispari. La regola si aggiusta da sola se un giorno si aggiunge o si
     toglie una fotografia: non c'e nessun numero scritto a mano. */
  .galleria figure:last-child:nth-child(odd) { grid-column: span 4; aspect-ratio: 2 / 1; }
}
@media (max-width: 460px) {
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Anche le fotografie piccole vanno riportate a una colonna sola: la
     regola generale le fa larghe due colonne, e su una griglia che di
     colonne ne ha due si prendevano tutta la riga. Il risultato era una
     colonna sola di otto fotografie, cioe tre schermate di scorrimento. */
  .galleria figure { grid-column: span 1; }
  .galleria figure.larga, .galleria figure.altra { grid-column: span 2; }
  .galleria figure:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* ---------- 7. Il nastro di parole -------------------------------------- */
/* Una striscia che scorre piano con le parole del locale. Due copie
   affiancate: la seconda entra mentre la prima esce, cosi il giro non ha
   giunte. Si ferma per chi ha chiesto meno movimento. */
.nastro-parole {
  display: flex; overflow: hidden; padding-block: clamp(16px, 2.2vw, 26px);
  border-block: 1px solid var(--v-linea); background: var(--v-fondo-2);
  user-select: none;
}
.nastro-parole > div { display: flex; flex: none; animation: v-nastro 42s linear infinite; }
.nastro-parole span {
  font-family: var(--serif); font-size: clamp(1.35rem, 3.2vw, 2.3rem);
  color: var(--v-testo); letter-spacing: -.02em; white-space: nowrap;
  padding-inline: .45em; opacity: .9;
}
.nastro-parole span::after {
  content: "\2022"; color: var(--v-accento); padding-left: .9em; opacity: .55;
}
@keyframes v-nastro { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .nastro-parole > div { animation: none; } }
.nastro-parole:hover > div { animation-play-state: paused; }

/* ---------- 8. L'alone che segue il puntatore --------------------------- */
/* Le coordinate le scrive lo script; se non gira, il valore di partenza qui
   sotto tiene l'alone spento e le schede restano identiche a prima. */
.con-alone { position: relative; isolation: isolate; }
.con-alone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px),
              color-mix(in srgb, var(--v-oro) 20%, transparent), transparent 70%);
}
.con-alone:hover::before { opacity: 1; }

/* ---------- 9. Il trattino dei titoli si disegna ------------------------ */
.intestazione .occhiello::before,
.intestazione-sezione .occhiello::before {
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.2,.7,.3,1) .15s;
}
.dentro .occhiello::before,
.rivela.dentro .occhiello::before { transform: scaleX(1); }
/* Le intestazioni che NON hanno .rivela devono restare visibili comunque:
   senza questa riga il trattino resterebbe a zero per sempre. */
.intestazione:not(.rivela) .occhiello::before,
.intestazione-sezione:not(.rivela) .occhiello::before { transform: scaleX(1); }

/* ---------- 10. Il sigillo ---------------------------------------------- */
/* Un blocco che mostra l'insegna in grande, prima della chiamata finale.
   Serve a chiudere la pagina con il marchio, come fa il cartello sopra alla
   porta di un locale vero. */
.sigillo {
  display: grid; justify-items: center; text-align: center;
  gap: clamp(16px, 2.4vw, 24px);
}
.sigillo img { width: clamp(200px, 30vw, 330px); height: auto; }
.sigillo p { max-width: 46ch; color: var(--v-testo-3); font-size: .95rem; }
.sigillo .riga-fregio { display: flex; align-items: center; gap: 14px; width: min(420px, 80%); }
.sigillo .riga-fregio::before,
.sigillo .riga-fregio::after {
  content: ""; height: 1px; flex: 1; background: var(--v-linea-2);
}
.sigillo .riga-fregio i {
  width: 7px; height: 7px; flex: none; rotate: 45deg; background: var(--v-accento);
}

/* ---------- 11. Rifiniture di allineamento ------------------------------ */
/* I due riquadri affiancati (orari e indirizzo) avevano align-items: start e
   quindi altezze diverse: il fondo della pagina restava a scaletta. Con
   stretch finiscono alla stessa altezza e la riga si chiude dritta. */
.doppia.pari { align-items: stretch; }
.doppia.pari > .riquadro { display: flex; flex-direction: column; }
.doppia.pari > .riquadro > .fila:last-child { margin-top: auto; padding-top: 18px; }

/* Le tre schede delle persone / dei passi: stessa altezza e testo allineato
   in alto, cosi i titoli stanno tutti sulla stessa riga. */
.persone, .passi { align-items: stretch; }

/* ---------- 12. Il telefono --------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sezione { padding-block: 46px; }
  .sezione-corta { padding-block: 32px; }
  .intestazione, .intestazione-sezione { margin-bottom: 26px; }
  .riquadro { padding: 20px 18px; }
  .fila > .bottone { flex: 1 1 100%; }
  .insegna-copertina { width: min(168px, 46vw); }
}