/* Variante A "Tre porte": header, snodo a tre pannelli, pagina sede, menù */

/* ---------- Snodo: tre porte ---------- */
.porte { position: relative; height: 100svh; min-height: 620px; display: flex; background: var(--nero); }
.porta {
	--apertura: 1;
	position: relative; flex: var(--apertura) 1 0; min-width: 0; overflow: hidden; isolation: isolate;
	transition: flex-grow var(--t-4) var(--ease);
	border-right: 1px solid rgba(0, 0, 0, .9);
}
.porta:last-child { border-right: 0; }
/* :focus-visible e non :focus-within: il focus lasciato da un click (es. chiusura della modale Prenota) non deve tenere aperta la porta */
.porte:hover .porta, .porte:has(:focus-visible) .porta { --apertura: .8; }
.porte .porta:hover, .porte .porta:has(:focus-visible) { --apertura: 1.7; }

.porta__foto { position: absolute; inset: 0; z-index: -2; }
/* picture (foto diversa per desktop e mobile) non deve aggiungere un contenitore: l'img resta a tutta porta */
.porta__foto picture { display: contents; }
.porta__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.62); transform: scale(1.06); transition: filter var(--t-4) var(--ease), transform 1.8s var(--ease); }
/* La luce della sede: il gradiente tinge la foto in bianco e nero */
.porta__luce { position: absolute; inset: 0; z-index: -1; background: linear-gradient(170deg, var(--g1) 0%, var(--g2) 100%); mix-blend-mode: color; opacity: .9; transition: opacity var(--t-4) var(--ease); }
.porta__buio { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .88) 100%); }
.porta:hover .porta__foto img, .porta:has(:focus-visible) .porta__foto img { filter: grayscale(0) contrast(1.05) brightness(.78); transform: scale(1); }
.porta:hover .porta__luce, .porta:has(:focus-visible) .porta__luce { opacity: .38; }

.porta__corpo { position: absolute; inset: calc(var(--header-h) + 24px) 0 0 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(20px, 2.6vw, 40px) 88px; }
/* Il nome in verticale, come un'insegna appesa */
.porta__nome {
	position: absolute; top: calc(var(--header-h) + 20px); left: clamp(12px, 1.8vw, 28px);
	writing-mode: vertical-rl; transform: rotate(180deg);
	font-size: clamp(5rem, 13.5vh, 10rem); line-height: .86; white-space: nowrap;
	transition: transform var(--t-4) var(--ease);
}
/* Tutta la porta è cliccabile: link steso sotto i bottoni */
.porta__link { position: absolute; inset: 0; z-index: 1; }
.porta__link:focus-visible { outline-offset: -6px; }
.porta__info { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; margin-left: clamp(90px, 13vh, 150px); }
.porta__indirizzo { font-size: .9375rem; font-weight: 600; line-height: 1.45; white-space: nowrap; transition: opacity var(--t-2) var(--ease); }
.porta__info [data-stato] { max-width: calc(100% - 8px); }
/* Nelle porte che si stringono resta solo lo stato */
.porte:hover .porta:not(:hover) .porta__indirizzo { opacity: 0; }
.porta__indirizzo span { display: block; color: var(--testo-2); font-weight: 500; font-size: .8125rem; }
/* Azioni che si aprono con grid-template-rows: niente animazione di altezza */
.porta__azioni { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-3) var(--ease), opacity var(--t-3) var(--ease); }
.porta__azioni > div { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; gap: 8px; }
.porta:hover .porta__azioni, .porta:has(:focus-visible) .porta__azioni { grid-template-rows: 1fr; opacity: 1; }
.porta__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--g1), var(--g2)); transform: scaleX(.2); transform-origin: left; transition: transform var(--t-4) var(--ease); }
.porta:hover .porta__barra, .porta:has(:focus-visible) .porta__barra { transform: scaleX(1); }

/* Striscia sotto le porte: la frase del brand */
.porte__piede {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	padding: 0 var(--gutter) 28px;
	font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--testo-2);
}
.porte__piede h1 { font: inherit; letter-spacing: inherit; color: var(--bianco); }

/* Home fatta solo di porte: niente scroll sotto, la pagina è lo schermo */
.solo-porte { height: 100svh; overflow: hidden; }
@media (max-height: 520px) { .solo-porte { height: auto; overflow: visible; } }


/* Entrata della home: le porte si aprono dal buio */
@media (prefers-reduced-motion: no-preference) {
	.porta { animation: porta-in 1.3s var(--ease) both; }
	.porta:nth-child(2) { animation-delay: .12s; }
	.porta:nth-child(3) { animation-delay: .24s; }
	.porta__nome { animation: nome-in 1.4s var(--ease) both; animation-delay: inherit; }
	@keyframes porta-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
	@keyframes nome-in { from { transform: rotate(180deg) translateY(-40%); opacity: 0; } }
	/* Con l'intro del nigiri aperta le porte restano chiuse e si aprono quando lei svanisce */
	.intro-attiva .porta, .intro-attiva .porta__nome { animation-play-state: paused; }
}

/* ---------- Sezioni home ---------- */
.sezione { padding: clamp(96px, 14vw, 180px) var(--gutter); max-width: 1440px; margin: 0 auto; }
/* Arrivando a una sezione da un link, il titolo non finisce sotto l'header fisso */
.sezione, .banda-sede, .apri-menu, .dove, .altre, .piede { scroll-margin-top: var(--header-h); }
.manifesto { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.manifesto h2 { font-size: clamp(3rem, 7.2vw, 6rem); }
.manifesto h2 em { font-style: normal; color: var(--rosso); }
.manifesto p { font-size: 1.125rem; color: var(--testo-2); max-width: 44ch; margin: 28px 0 32px; }
.manifesto__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.manifesto__foto img { width: 100%; height: 100%; object-fit: cover; }


/* Banda app: il gradiente del cliente come superficie piena */
.app { position: relative; overflow: hidden; background: url("../assets/gradiente-brand.jpg") center / cover; color: var(--bianco); }
.app__dentro { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter) 0; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.app h2 { font-size: clamp(3.25rem, 8vw, 7rem); max-width: 9ch; }
.app p { font-size: 1.125rem; font-weight: 600; max-width: 38ch; margin: 24px 0 32px; }
.app__telefono { width: clamp(220px, 24vw, 340px); align-self: end; filter: drop-shadow(0 30px 40px rgba(60, 0, 40, .45)); }
.app .btn--nero { background: var(--nero); color: var(--bianco); }
.app .btn--nero:hover { background: #222; }
.app__testo { padding-bottom: clamp(80px, 10vw, 140px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {

	/* Porte impilate: tutte e tre nel primo schermo, senza scorrere */
	.porte { flex-direction: column; height: 100svh; min-height: 0; padding-top: var(--header-h); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
	.porta { flex: 1 1 0; min-height: 132px; border-right: 0; border-bottom: 1px solid #000; }
	.porta__foto img { filter: grayscale(.2) contrast(1.05) brightness(.6); transform: none; }
	.porta__luce { opacity: .55; }
	.porta__corpo { inset: 0; padding: 0 16px 16px; }
	.porta__nome { writing-mode: horizontal-tb; transform: none; top: auto; bottom: 44px; left: 16px; font-size: clamp(3.25rem, 15vw, 4.5rem); }
	.porta__info { margin: 0; }
	.porta__indirizzo { display: none; }
	/* Su ogni fascia la città accanto allo stato e il Take away della sede (Prenota resta nella barra fissa) */
	.porta__nome { bottom: 98px; }
	.porta__info { grid-template-columns: auto 1fr; gap: 10px 6px; align-items: center; }
	.porta__citta { display: block; font-size: .8125rem; font-weight: 600; color: var(--bianco); }
	.porta__citta::after { content: " ·"; }
	.porta__azioni { grid-column: 1 / -1; grid-template-rows: 1fr; opacity: 1; transition: none; }
	.porta__azioni [data-link="prenota"], .porta__azioni .btn--bianco { display: none; }
	.porta__azioni .btn { min-height: 48px; padding-inline: 14px; font-size: .75rem; }
	.porta__freccia { position: absolute; right: 16px; bottom: 16px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--bianco); color: var(--nero); }
	.porta__barra { transform: scaleX(1); height: 3px; }
	/* Su mobile la frase del brand non c'è: la striscia sparisce */
	.porte__piede { display: none; }
	@keyframes nome-in { from { transform: translateX(-30%); opacity: 0; } }

	.manifesto { grid-template-columns: 1fr; }
	.manifesto__foto { aspect-ratio: 4 / 3; }
		.app__dentro { grid-template-columns: 1fr; }
	.app__telefono { justify-self: center; width: 240px; }
	.app__testo { padding-bottom: 0; }
}
/* Telefoni bassi (es. 320x568): fasce più corte, nome e bottoni un filo più piccoli per non tagliare il nome */
@media (max-width: 900px) and (max-height: 600px) {
	.porta__nome { bottom: 88px; font-size: 2.75rem; }
	.porta__azioni .btn, .porta__freccia { min-height: 44px; height: 44px; }
	.porta__freccia { width: 44px; }
}
@media (min-width: 901px) {
	.porta__freccia { display: none; }
	.porta__citta { display: none; }
}

/* ---------- Pagina sede ---------- */
.sede-hero { position: relative; min-height: max(640px, 100svh); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.sede-hero__foto { position: absolute; inset: 0; z-index: -3; }
.sede-hero__foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(1.1); }
/* Video della sede sopra la foto (che resta come poster e per la transizione dalla home): compare appena va in riproduzione */
.sede-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(1.1); opacity: 0; transition: opacity .8s var(--ease); }
.sede-hero.video-pronto .sede-hero__video { opacity: 1; }
.sede-hero__luce { position: absolute; inset: 0; z-index: -2; background: linear-gradient(200deg, var(--g1), var(--g2)); mix-blend-mode: soft-light; }
.sede-hero__buio { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .92) 100%); }
/* Testo dell'hero nascosto finché sede.js non ha messo nome, indirizzo e stato: niente salti durante il caricamento */
.sede-hero:not(.is-pronto) .sede-hero__dentro { visibility: hidden; }
.sede-hero__dentro { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end; }
.sede-hero h1 { font-size: clamp(5.5rem, 19vw, 17rem); line-height: .9; margin-left: -.04em; }
/* Nomi su due righe (Roma Pontina): corpo più piccolo per non coprire la foto */
.sede-hero h1.lungo { font-size: clamp(4.5rem, 13vw, 12rem); }
.sede-hero__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 28px 0 28px; font-weight: 600; }
.sede-hero__riga address { font-style: normal; }
.sede-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sede-hero__cta .btn { min-height: 56px; }
.sede-hero__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--g1), var(--g2)); }

/* Informazioni: tre colonne tipografiche, niente card */
/* Orari: lista giorno per giorno o compatta (data-orari="compatto"), nella sezione Dove siamo */
.orari { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: .9375rem; }
.orari dt { color: var(--testo-2); }
.orari dd { margin: 0; font-weight: 600; }
.orari .oggi dt, .orari .oggi dd { color: var(--bianco); }
.orari .oggi dt::after { content: " · oggi"; color: var(--g1); font-weight: 700; }
.orari .chiuso dd { color: var(--testo-3); }
/* Orari compatti: giorni in piccolo, pranzo e cena affiancati in grande */
.orari[data-orari="compatto"] { grid-template-columns: auto 1fr; gap: 4px 8px; }
.orari[data-orari="compatto"] :not(.chiuso) > * { grid-column: 1 / -1; }
.orari[data-orari="compatto"] :not(.chiuso) > dt { margin-bottom: 12px; }
.orari[data-orari="compatto"] dd { display: flex; flex-wrap: wrap; gap: 8px 32px; font: 400 1.75rem/1.05 var(--display); margin-bottom: 8px; }
.orari[data-orari="compatto"] dd small { display: block; font: 600 .6875rem/1 var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--testo-2); margin-bottom: 6px; }
/* Giorno di chiusura: "Lunedì chiuso" su una riga, sotto le fasce */
.orari[data-orari="compatto"] .chiuso dd { font: 600 .9375rem/1.4 var(--corpo); text-transform: lowercase; margin: 0; }

/* Il locale: testo + galleria che scorre */
.locale { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.locale h2 { font-size: clamp(3rem, 6vw, 5rem); }
/* Segno della sede sotto il titolo: stesso gradiente della lama */
.locale h2::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 18px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.locale p { color: var(--testo-2); font-size: 1.0625rem; margin-top: 24px; max-width: 42ch; }
/* Titolo SEO della sede (lungo): corpo ridotto per stare su tre righe sopra al testo */
.locale h2.lungo { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: .95; }
/* Titolo della cliente in due blocchi (nome, descrizione): ognuno va a capo per conto suo e si bilancia da solo */
.locale h2 span span { display: block; }
.locale p + p { margin-top: 16px; }
.locale p strong { color: var(--bianco); }
.galleria { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 12vw, 190px); gap: 10px; }
.galleria figure { margin: 0; overflow: hidden; background: var(--nero-3); }
.galleria img { width: 100%; height: 100%; object-fit: cover; }
.galleria figure:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.galleria figure:nth-child(2) { grid-column: span 2; }
.galleria figure:nth-child(3) { grid-column: span 2; }
.galleria figure:nth-child(4) { grid-column: span 3; }
.galleria figure:nth-child(5) { grid-column: span 3; }
/* Ingresso della galleria: la lama della sede la attraversa e scopre le foto al suo passaggio.
   .lama-pronta la mette sede.js solo con JS e movimento attivi: senza, le foto sono subito visibili */
@media (prefers-reduced-motion: no-preference) {
	.locale.lama-pronta .galleria { position: relative; overflow: hidden; }
	.locale.lama-pronta .galleria::after {
		content: ""; position: absolute; top: -10%; bottom: -10%; left: -30%; width: 30%; z-index: 2; pointer-events: none;
		background: linear-gradient(115deg, var(--g1), var(--g2)); transform: skewX(-14deg); visibility: hidden;
	}
	.locale.lama-pronta.in-scena .galleria::after { visibility: visible; animation: lama-griglia 1.1s cubic-bezier(.6, 0, .3, 1) forwards; }
	/* 480% della sua larghezza (30%): esce oltre il bordo destro */
	@keyframes lama-griglia { to { transform: translateX(480%) skewX(-14deg); visibility: hidden; } }
	.locale.lama-pronta figure { clip-path: inset(0 100% 0 0); transition: clip-path .45s cubic-bezier(.3, 0, .2, 1) calc(120ms + var(--x, 0) * 800ms); }
	.locale.lama-pronta.in-scena figure { clip-path: inset(0 0 0 0); }
	/* Testo nella stessa coreografia: il titolo sale con la partenza della lama (solo il contenitore, non i blocchi), poi segno, paragrafo e nota */
	.locale.lama-pronta h2 { overflow: hidden; }
	.locale.lama-pronta h2 > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
	.locale.lama-pronta h2::after { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .35s; }
	.locale.lama-pronta p, .locale.lama-pronta .nota { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s; }
	.locale.lama-pronta .nota { transition-delay: .5s; }
	.locale.lama-pronta.in-scena h2 > span, .locale.lama-pronta.in-scena h2::after, .locale.lama-pronta.in-scena p, .locale.lama-pronta.in-scena .nota { transform: none; opacity: 1; }
}

.titolo-sez { font-size: clamp(3rem, 6vw, 5rem); margin-bottom: 40px; }

/* Servizi: fascia col gradiente della sede che spezza il nero a metà pagina.
   In alto il nastro coi nomi dei servizi che scorre (costruito da sede.js), sotto righe a struttura fissa.
   Velo nero leggero sopra il gradiente per tenere leggibile il testo bianco */
.banda-sede { overflow: hidden; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(115deg, var(--g1), var(--g2)); }
.banda-sede__dentro { max-width: 1440px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(64px, 9vw, 120px); }
.nastro { padding-top: clamp(40px, 6vw, 72px); white-space: nowrap; }
.nastro__traccia { display: inline-flex; align-items: center; gap: .35em; font: 400 clamp(4rem, 10vw, 9rem)/1 var(--display); text-transform: uppercase; }
.nastro i { font-style: normal; opacity: .5; }
/* Un nome pieno e uno in contorno */
.nastro span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 2px var(--bianco); }
@media (prefers-reduced-motion: no-preference) {
	.nastro__traccia { animation: nastro 26s linear infinite; }
	/* Quattro ripetizioni: scorrere di un quarto riporta al punto di partenza */
	@keyframes nastro { to { transform: translateX(-25%); } }
}
.banda-sede__etichetta { font: 700 1rem/1 var(--corpo); letter-spacing: .14em; margin-bottom: 20px; }
.servizi { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--bianco); }
.servizi li {
	position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 40ch); align-items: center; gap: 24px;
	padding: 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, .5); transition: background-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.servizi svg { width: 26px; height: 26px; }
/* Nomi contenuti: il protagonista della fascia è il nastro */
.servizi strong { font: 400 clamp(1.75rem, 3vw, 2.5rem)/1 var(--display); text-transform: uppercase; }
.servizi span { color: rgba(255, 255, 255, .88); font-weight: 500; font-size: .9375rem; }
/* Righe-azione (Prenota, Take away, Delivery): il link nel nome si stende su tutta la riga */
.servizi strong a { color: inherit; text-decoration: none; }
.servizi strong a::after { content: ""; position: absolute; inset: 0; }
.servizi strong a:focus-visible { outline: none; }
/* Al passaggio (tutte le righe) o col focus (righe-azione) la riga si inverte in bianco */
.servizi li:hover, .servizi .azione:focus-within { background: var(--bianco); color: var(--nero); }
.servizi li:hover span, .servizi .azione:focus-within span { color: var(--nero); }
.servizi li:hover svg, .servizi .azione:focus-within svg { color: var(--g1); }
/* Ingresso delle righe: i separatori si disegnano da sinistra, ogni riga compare a linea completa.
   .linee-pronte la mette sede.js solo con JS e movimento attivi; .senza-transizioni applica lo stato iniziale di colpo */
.senza-transizioni, .senza-transizioni *, .senza-transizioni *::before, .senza-transizioni *::after { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
	.linee-pronte .servizi { border-top-color: transparent; background: linear-gradient(var(--bianco), var(--bianco)) top left / 0% 2px no-repeat; transition: background-size .6s var(--ease-io); }
	.linee-pronte .servizi li { border-bottom-color: transparent; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) bottom left / 0% 1px no-repeat; transition: background-size .6s var(--ease-io) calc(200ms + var(--i) * 160ms), background-color var(--t-2) var(--ease), color var(--t-2) var(--ease); }
	.linee-pronte .servizi li > * { opacity: 0; transition: opacity .5s ease calc(500ms + var(--i) * 160ms), transform var(--t-2) var(--ease); }
	.linee-pronte.in-scena .servizi { background-size: 100% 2px; }
	.linee-pronte.in-scena .servizi li { background-size: 100% 1px; }
	.linee-pronte.in-scena .servizi li > * { opacity: 1; }
	/* Al passaggio la riga diventa bianca: il colore di fondo copre la linea disegnata */
	.linee-pronte .servizi li:hover, .linee-pronte .servizi .azione:focus-within { background-color: var(--bianco); }
}

/* Invito al menù: foto dei piatti che scorrono scure dietro al titolo (durata calcolata in sede.js) */
.apri-menu { position: relative; overflow: hidden; min-height: min(70svh, 620px); display: grid; align-items: center; }
.apri-menu__fondo { position: absolute; inset: 0; display: flex; align-items: center; opacity: .35; filter: grayscale(.4); }
.apri-menu__traccia { display: flex; gap: 12px; width: max-content; }
.apri-menu__traccia img { height: min(56svh, 480px); aspect-ratio: 4 / 5; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
	.apri-menu__traccia { animation: apri-menu 60s linear infinite; }
	/* Metà traccia = una serie di foto: il loop non si vede */
	@keyframes apri-menu { to { transform: translateX(calc(-50% - 6px)); } }
}
/* Ombra dietro al testo per la leggibilità */
.apri-menu::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 70% at 30% 50%, rgba(0, 0, 0, .85), transparent 80%); }
.apri-menu__testo { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter); }
.apri-menu__testo h2 { font-size: clamp(4.5rem, 12vw, 11rem); line-height: .85; }
.apri-menu__testo p { color: var(--testo-2); font-size: 1.0625rem; max-width: 44ch; margin: 20px 0 0; }
.apri-menu__testo p + p { margin-top: 14px; }
.apri-menu__testo p strong { color: var(--bianco); }
.apri-menu__testo .btn { margin-top: 32px; }


/* Dove siamo */
.dove { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0; background: var(--nero-2); }
/* Informazioni come una scheda: fondo nero e striscia col gradiente della sede in alto */
.dove__testo { position: relative; padding: clamp(32px, 5vw, 64px); display: grid; align-content: center; gap: 20px; justify-items: start; background: var(--nero); }
.dove__testo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
/* "Orari" allo stesso livello di "Dove siamo": due titoli, dove e quando */
.dove__testo h2, .dove__orari h3 { font-size: clamp(2.75rem, 5vw, 4.5rem); }
.dove__testo address { font-style: normal; font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
.dove__orari { display: grid; gap: 16px; padding-top: 28px; margin-top: 8px; border-top: 1px solid var(--linea); width: 100%; }
.dove iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(1) invert(.92) contrast(.9); display: block; }
/* Tabellone: le cifre degli orari in caselle (sede.js) */
.tabellone { display: inline-flex; }
.tabellone i, .tabellone b { font-style: normal; font-weight: inherit; display: inline-block; }
/* Ingresso: striscia della sede, poi la scheda sale; le cifre girano quando compare "Orari".
   .dove-pronta la mette sede.js solo con JS e movimento attivi */
@media (prefers-reduced-motion: no-preference) {
	.dove-pronta .dove__testo::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-io); }
	.dove-pronta .dove__testo > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease) calc(250ms + var(--i) * 90ms), transform .7s var(--ease) calc(250ms + var(--i) * 90ms); }
	.dove-pronta.in-scena .dove__testo::before, .dove-pronta.in-scena .dove__testo > * { opacity: 1; transform: none; }
	.dove-pronta .tabellone i { opacity: 0; transform: rotateX(90deg); transform-origin: 50% 60%; }
	/* Rotazione asciutta, senza rimbalzo: la cifra si ferma netta */
	.dove-pronta.in-scena .tabellone i { animation: tabellone .35s cubic-bezier(.2, .8, .2, 1) calc(650ms + var(--k) * 55ms) both; }
	@keyframes tabellone { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: none; } }
}

/* Altre sedi: due porte piccole */
.altre { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.altra { position: relative; height: 320px; overflow: hidden; isolation: isolate; display: flex; align-items: end; justify-content: space-between; padding: 28px; text-decoration: none; }
.altra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) brightness(.55); transition: filter var(--t-4) var(--ease), transform 1.6s var(--ease); transform: scale(1.04); }
.altra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--c1), var(--c2)); mix-blend-mode: color; transition: opacity var(--t-4) var(--ease); }
.altra:hover img { filter: grayscale(0) brightness(.7); transform: scale(1); }
.altra:hover::before { opacity: .4; }
.altra strong { font: 400 clamp(3rem, 6vw, 5.5rem)/.85 var(--display); text-transform: uppercase; }
.altra .btn { pointer-events: none; }
/* Ingresso delle altre sedi, come le porte della home: si aprono dal basso una dopo l'altra, la foto passa
   dal buio al colore della sede, poi nome e pulsante. Animazioni con fill "backwards": finite, la card torna
   allo stato normale e l'hover funziona come prima. .altre-pronte la mette sede.js solo con JS e movimento attivi */
@media (prefers-reduced-motion: no-preference) {
	.altra:nth-child(2) { --n: 1; }
	.altre-pronte .altra { clip-path: inset(100% 0 0 0); }
	.altre-pronte.in-scena .altra { clip-path: none; animation: porta-in 1.1s var(--ease) calc(var(--n, 0) * 150ms) backwards; }
	.altre-pronte.in-scena .altra img { animation: altra-luce 1.6s var(--ease) calc(var(--n, 0) * 150ms) backwards; }
	.altre-pronte.in-scena .altra::before { animation: altra-colore 1.2s var(--ease) calc(300ms + var(--n, 0) * 150ms) backwards; }
	.altre-pronte.in-scena .altra strong, .altre-pronte.in-scena .altra .btn { animation: altra-su .8s var(--ease) calc(450ms + var(--n, 0) * 150ms) backwards; }
	.altre-pronte.in-scena .altra .btn { animation-delay: calc(600ms + var(--n, 0) * 150ms); }
	@keyframes altra-luce { from { filter: grayscale(1) brightness(.2); transform: scale(1.12); } }
	@keyframes altra-colore { from { opacity: 0; } }
	@keyframes altra-su { from { opacity: 0; transform: translateY(40%); } }
}

@media (max-width: 900px) {
	.sede-hero { min-height: calc(100svh - 76px); }
	.sede-hero__dentro { grid-template-columns: 1fr; padding-bottom: 28px; }
	.sede-hero h1 { font-size: clamp(4.5rem, 24vw, 8rem); }
	.sede-hero__riga { margin: 18px 0 20px; gap: 8px 20px; font-size: .9375rem; }
	.sede-hero__cta .btn { flex: 1 1 auto; min-height: 52px; }
	.sede-hero__cta .btn--rosso { flex-basis: 100%; }
	.locale { grid-template-columns: 1fr; }
	/* Invito al menù: coi testi delle sedi il paragrafo è lungo, l'alone scuro copre tutta la colonna */
	.apri-menu::before { background: radial-gradient(110% 85% at 50% 50%, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 100%); }
	.galleria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
	.galleria figure:nth-child(n) { grid-column: span 1; grid-row: span 1; }
	.galleria figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.galleria figure:nth-child(4), .galleria figure:nth-child(5) { grid-column: span 1; }
	/* Righe mobile: icona | nome + descrizione, stessa griglia per tutte */
	.servizi li { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; padding: 16px 2px; align-items: start; }
	.servizi svg { width: 22px; height: 22px; margin-top: 4px; }
	.servizi span { grid-column: 2; grid-row: 2; }
	.nastro__traccia { font-size: clamp(3.25rem, 16vw, 4.5rem); }
		.dove { grid-template-columns: 1fr; }
	.dove iframe { min-height: 300px; }
	.altre { grid-template-columns: 1fr; }
	.altra { height: 200px; padding: 20px 16px; }
}

/* ---------- Menù ---------- */
.menu-testa { position: relative; padding: calc(var(--header-h) + clamp(40px, 6vw, 88px)) var(--gutter) 40px; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(280px, 440px); gap: 32px; align-items: end; }
/* Lo sfondo a tutta larghezza usa 100vw, che include la barra di scorrimento: la pagina del menù taglia l'eccedenza */
main:has(> .menu-testa) { overflow-x: clip; }
.menu-testa::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: radial-gradient(60% 90% at 85% 0%, color-mix(in srgb, var(--g2) 45%, transparent), transparent 70%), radial-gradient(50% 80% at 10% 10%, color-mix(in srgb, var(--g1) 35%, transparent), transparent 70%); }
/* Ritorno alla sede: sopra il titolo, la freccia scivola a sinistra */
/* position + z-index: il titolo gigante con interlinea stretta gli passa sopra e ruberebbe il click */
.menu-testa .torna { position: relative; z-index: 1; margin-bottom: 20px; color: var(--testo-2); }
.menu-testa .torna:hover { color: var(--bianco); }
.menu-testa .torna:hover svg { transform: translateX(-4px); }
.menu-testa .torna[hidden] { display: none; }
.menu-testa h1 { font-size: clamp(5rem, 14vw, 12rem); line-height: .82; }
.menu-testa p { color: var(--testo-2); margin-top: 18px; max-width: 46ch; }

/* Prima che menu.js costruisca i piatti la lista occupa già lo schermo: il footer non compare e poi salta via */
.lista:not(.is-costruita) { min-height: 100svh; }
.menu-corpo { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 120px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }

/* Indice categorie: barra laterale su desktop, striscia fissa su mobile */
.indice { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100svh - var(--header-h) - 32px); overflow-y: auto; scrollbar-width: none; }
.indice ol { list-style: none; margin: 0; padding: 0; display: grid; }
.indice a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 6px 8px 6px 0; text-decoration: none; font-weight: 600; font-size: .875rem; color: var(--testo-2); position: relative; transition: color var(--t-1) var(--ease); }
.indice a small { font-size: .75rem; color: var(--testo-3); font-weight: 600; }
.indice a:hover { color: var(--bianco); }
.indice a.is-attiva { color: var(--bianco); }
.indice a::after { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(180deg, var(--g1), var(--g2)); transform: scaleY(0); transition: transform var(--t-2) var(--ease); }
.indice a.is-attiva::after { transform: scaleY(1); }
.indice a[hidden] { display: none; }

.categoria { scroll-margin-top: calc(var(--header-h) + 24px); padding-bottom: 56px; }
.categoria[hidden] { display: none; }
.categoria__testa { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--linea); margin-bottom: 8px; }
.categoria__testa h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.categoria__testa small { display: block; margin-top: 8px; color: var(--testo-3); font-weight: 600; font-size: .8125rem; }
.piatti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
/* Righe senza miniatura: la foto è della categoria, non del piatto, e sta solo nell'intestazione */
.piatto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.piatto[hidden] { display: none; }
/* Prodotti con foto propria (bevande): miniatura a sinistra; vuota, ma col suo spazio, se manca la foto */
.piatto--foto { grid-template-columns: 56px minmax(0, 1fr) auto; }
.piatto__foto { display: block; width: 56px; height: 56px; object-fit: cover; background: var(--nero-3); }
.piatto__nome { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.piatto__desc { display: block; overflow-wrap: anywhere; margin-top: 3px; font-size: .8125rem; line-height: 1.45; color: var(--testo-2); font-weight: 500; }
.piatto__prezzo { font: 400 1.375rem/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
mark { background: color-mix(in srgb, var(--g1) 55%, transparent); color: var(--bianco); padding: 0 1px; }
.vuoto p { font: 400 2.5rem/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
/* Simboli * e # del ristorante e riga degli allergeni sotto la descrizione */
.piatto__sim { margin-left: 3px; font-size: .75rem; font-weight: 700; color: var(--testo-3); }
.piatto__allergeni { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; color: var(--testo-3); }
.piatto__allergeni [role="list"] { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.piatto__allergeni em { font-style: normal; color: var(--testo-2); }
.piatto__allergeni--nessuno { display: block; }
/* Icona allergene: il nome compare sopra la riga delle icone al passaggio (desktop) o al tocco (.is-aperto, menu.js).
   Ancorato all'inizio della riga, non all'icona, così non esce dallo schermo; esiste solo mentre è mostrato,
   altrimenti le nuvolette invisibili allargherebbero la pagina su mobile */
.al { display: block; width: 22px; height: 22px; color: rgba(255, 255, 255, .78); cursor: help; transition: color var(--t-1) var(--ease); }
.al svg { display: block; width: 100%; height: 100%; }
.al:hover, .al.is-aperto { color: var(--bianco); }
.al:hover::after, .al.is-aperto::after { content: attr(data-nome); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; max-width: calc(100vw - 112px); padding: 6px 9px; background: var(--bianco); color: var(--nero); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; animation: a-nome-al var(--t-1) var(--ease); }
@keyframes a-nome-al { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .al:hover::after, .al.is-aperto::after { animation: none; } }
/* Tessera con l'iniziale della categoria: nell'intestazione e negli indici (niente foto di categoria) */
.tessera { display: grid; place-items: center; background: linear-gradient(135deg, var(--g1), var(--g2)); color: var(--bianco); font: 400 1rem/1 var(--display); text-transform: uppercase; }
.indice a .tessera { width: 36px; height: 36px; filter: grayscale(1); opacity: .7; transition: filter var(--t-2) var(--ease), opacity var(--t-2) var(--ease); }
.indice a.is-attiva .tessera { filter: none; opacity: 1; }
.categoria__testa .tessera { width: 112px; height: 112px; font-size: 3.5rem; }

/* Ricerca e filtro allergeni nella colonna destra della testata */
.menu-strumenti { display: grid; gap: 12px; }
.filtro__apri {
	display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .55);
	color: var(--bianco); font: 700 .8125rem/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color var(--t-1) var(--ease);
}
.filtro__apri:hover, .filtro.is-attivo .filtro__apri, .filtro__apri[aria-expanded="true"] { border-color: var(--bianco); }
.filtro__apri svg { width: 18px; height: 18px; margin-left: auto; transform: rotate(90deg); transition: transform var(--t-2) var(--ease); }
.filtro__apri[aria-expanded="true"] svg { transform: rotate(-90deg); }
.filtro__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: linear-gradient(135deg, var(--g1), var(--g2)); font-size: .75rem; letter-spacing: 0; }
.filtro__n[hidden] { display: none; }
.filtro__pannello { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--bianco); border-top: 0; background: rgba(0, 0, 0, .7); }
.filtro__pannello[hidden] { display: none; }
/* Desktop: il pannello si apre sopra al menù, così la testata (allineata in basso) non sale */
@media (min-width: 901px) {
	.filtro { position: relative; }
	.filtro__pannello { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: rgba(0, 0, 0, .94); backdrop-filter: blur(12px); box-shadow: 0 24px 48px rgba(0, 0, 0, .6); }
}
.filtro fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.filtro__chip { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
/* Checkbox vera sopra la chip: tastiera e lettori di schermo la trattano come tale */
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--linea); color: var(--testo-2); font-weight: 600; font-size: .8125rem; transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease); }
.chip svg { width: 20px; height: 20px; flex: none; }
.chip:hover span { color: var(--bianco); border-color: rgba(255, 255, 255, .5); }
/* Allergene escluso: chip piena e nome barrato */
.chip input:checked + span { border-color: transparent; background: color-mix(in srgb, var(--g1) 60%, transparent); color: var(--bianco); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.chip input:focus-visible + span { outline: 2px solid var(--bianco); outline-offset: 2px; }
.filtro__piede { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.menu-testa .filtro__esito { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--bianco); }
.filtro__azzera { flex: none; padding: 4px 0; background: none; border: 0; color: var(--testo-2); cursor: pointer; }
.filtro__azzera:hover { color: var(--bianco); }
.menu-testa .filtro__nota { max-width: none; margin: 0; font-size: .75rem; line-height: 1.5; color: var(--testo-3); }

@media (max-width: 900px) {
	.menu-testa { grid-template-columns: 1fr; padding-bottom: 20px; gap: 20px; }
	.menu-testa h1 { font-size: clamp(4.5rem, 24vw, 7rem); }
	.menu-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 120px; }
	/* Mobile: niente indice laterale, al suo posto la barra "dove sei" con l'indice a tutto schermo */
	.indice { display: none; }
	.lista { padding: 0 16px; }
	.categoria { scroll-margin-top: calc(var(--header-h) + 72px); padding-top: 28px; padding-bottom: 12px; }
	.categoria__testa { grid-template-columns: 72px 1fr; gap: 14px; }
	.piatti { grid-template-columns: minmax(0, 1fr); }
	.piatto { gap: 12px; }
	.piatto--foto { grid-template-columns: 52px minmax(0, 1fr) auto; }
	.piatto__foto { width: 52px; height: 52px; }
	.categoria__testa .tessera { width: 72px; height: 72px; font-size: 2.25rem; }
}

/* Torna su (menu.js): terzo bottone della barra mobile; entra allargandosi (Prenota si stringe) */
.barra:has(.su) { grid-template-columns: 1fr auto auto; }
.barra .su {
	width: 0; min-width: 0; margin-left: -8px; padding: 0; overflow: hidden; border-color: transparent; opacity: 0;
	transition: width var(--t-2) var(--ease), margin-left var(--t-2) var(--ease), opacity var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.barra .su.is-visibile { width: 52px; margin-left: 0; border-color: rgba(255, 255, 255, .42); opacity: 1; }
.barra .su svg { flex: none; width: 20px; height: 20px; transform: rotate(-90deg); }
/* Con la freccia nella barra lo spazio cala: i testi restano su una riga, più stretti */
.barra:has(.su.is-visibile) .btn:not(.su) { padding-inline: .9em; letter-spacing: .08em; white-space: nowrap; }
/* Telefoni stretti: via l'icona del calendario e spaziatura minima, così la freccia entra senza sforare */
@media (max-width: 374px) {
	.barra:has(.su.is-visibile) .btn--rosso svg { display: none; }
	.barra:has(.su.is-visibile) .btn:not(.su) { padding-inline: .7em; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) { .barra .su { transition: none; } }

/* Footer, ingresso "Colonne in sequenza" (.colonne-pronte la mette piede.js): ogni blocco sale quando entra nello schermo,
   la striscia della sede si disegna mentre sale; su desktop le colonne entrano insieme, quindi in sequenza da sinistra */
@media (prefers-reduced-motion: no-preference) {
	.colonne-pronte .piede__griglia > :not(.in-scena), .colonne-pronte .piede__fondo:not(.in-scena) { opacity: 0; }
	.colonne-pronte .piede__griglia > .in-scena { animation: a-colonna .8s var(--ease) calc(var(--i) * 110ms) backwards; }
	.colonne-pronte .piede__sede::before { transform-origin: left; }
	.colonne-pronte .piede__sede:not(.in-scena)::before { transform: scaleX(0); }
	.colonne-pronte .piede__sede.in-scena::before { animation: a-striscia .7s cubic-bezier(.7, 0, .2, 1) calc(var(--i) * 110ms + 250ms) backwards; }
	.colonne-pronte .piede__fondo.in-scena { animation: a-riga-legale .6s ease .2s backwards; }
	@keyframes a-colonna { from { opacity: 0; transform: translateY(40px); } }
	@keyframes a-riga-legale { from { opacity: 0; } }
	@keyframes a-striscia { from { transform: scaleX(0); } }
}
/* Su mobile i blocchi entrano uno alla volta: niente ritardo in sequenza (sovrascrive --i messo in linea da piede.js) */
@media (max-width: 960px) {
	.colonne-pronte .piede__griglia > * { --i: 0 !important; }
}

/* ---------- Menù a sezioni (menu-a.js) ---------- */
body:not(.cerca-attiva) .fuori-sezione { display: none; }
/* Mobile e tablet: barra fissa con sezione e categoria in lettura; un tocco apre l'indice a tutto schermo (menu-a.js) */
.menu-dove, .menu-indice { display: none; }
.indice__sezione { display: none; }
@media (max-width: 900px) {
	.menu-dove { display: block; position: sticky; top: var(--header-h); z-index: 21; background: rgba(0, 0, 0, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
	.menu-dove button { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 16px; background: none; border: 0; color: var(--bianco); text-align: left; cursor: pointer; }
	.menu-dove button::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
	.menu-dove__qui { display: grid; gap: 4px; min-width: 0; }
	.menu-dove small { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-3); }
	.menu-dove strong { font: 400 1.5rem/1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.menu-dove__apri { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .42); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: border-color var(--t-1) var(--ease); }
	.menu-dove button:hover .menu-dove__apri { border-color: var(--bianco); }
	.menu-dove__apri svg { width: 18px; height: 18px; }
	/* Indice a tutto schermo: sezioni in Anton, sotto le loro categorie */
	.menu-indice { display: block; position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 40px; background: var(--nero); opacity: 0; transform: translateY(16px); transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease); }
	.menu-indice[hidden] { display: none; }
	.menu-indice.is-aperto { opacity: 1; transform: none; }
	.menu-indice__testa { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); margin: 0 -16px; padding: 0 8px 0 16px; background: var(--nero); border-bottom: 1px solid var(--linea); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-3); }
	.menu-indice__testa button { display: grid; place-items: center; width: 48px; height: 48px; background: none; border: 0; color: var(--bianco); cursor: pointer; }
	.menu-indice__testa svg { width: 24px; height: 24px; }
	.menu-indice h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 8px; font: 400 2.75rem/.95 var(--display); text-transform: uppercase; }
	.menu-indice h2 small, .menu-indice [data-vai] small { font: 600 .75rem/1 var(--corpo); color: var(--testo-3); }
	.menu-indice ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
	.menu-indice [data-vai] { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; min-height: 56px; padding: 0 8px 0 0; background: none; border: 0; border-bottom: 1px solid var(--linea); color: var(--testo-2); font: 600 1rem/1.3 var(--corpo); text-align: left; cursor: pointer; transition: color var(--t-1) var(--ease); }
	.menu-indice [data-vai]:hover { color: var(--bianco); }
	.menu-indice [data-vai] .tessera { width: 40px; height: 40px; }
	.menu-indice [data-vai] .tessera { font-size: 1.125rem; }
	.menu-indice [aria-current] { color: var(--bianco); background: color-mix(in srgb, var(--g1) 22%, transparent); }
	.indice-aperto { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.menu-indice { transition: none; }
}
/* Desktop: indice laterale a due livelli, sezioni in Anton e sotto le categorie della sezione aperta */
@media (min-width: 901px) {
	.menu-corpo { grid-template-columns: 290px minmax(0, 1fr); }
	.indice__sezione { display: block; border-top: 1px solid var(--linea); }
	.indice__sezione:first-child { border-top: 0; }
	.indice__sezione + li { margin-top: 2px; }
	.indice li:not(.indice__sezione) + .indice__sezione { margin-top: 14px; }
	.indice__sezione button { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 8px 12px 0; background: none; border: 0; color: var(--testo-2); text-align: left; cursor: pointer; transition: color var(--t-1) var(--ease); }
	.indice__sezione strong { font: 400 1.5rem/1.05 var(--display); text-transform: uppercase; }
	.indice__sezione small { font-size: .75rem; font-weight: 600; color: var(--testo-3); }
	.indice__sezione button::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 3px; background: linear-gradient(90deg, var(--g1), var(--g2)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-2) var(--ease); }
	.indice__sezione button:hover, .indice__sezione button[aria-expanded="true"] { color: var(--bianco); }
	.indice__sezione button[aria-expanded="true"]::before { transform: scaleX(1); }
	/* Sezione aperta raccolta col secondo clic: restano solo i titoli delle sezioni (la ricerca mostra comunque tutto) */
	body:not(.cerca-attiva) .indice ol.is-raccolto > li:not(.indice__sezione) { display: none; }
	.indice__sezione button.is-mostrata { color: var(--bianco); }
}
/* Ingresso "Linee", all'apertura e a ogni cambio di sezione: i separatori si disegnano, ogni riga compare a linea completa */
@media (prefers-reduced-motion: no-preference) {
	.menu-linee .piatto { position: relative; border-bottom-color: transparent; }
	.menu-linee .piatto::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(255, 255, 255, .08); transform-origin: left; animation: a-linea .6s cubic-bezier(.7, 0, .2, 1) calc(250ms + var(--k) * 60ms) backwards; }
	.menu-linee .categoria__testa { position: relative; border-bottom-color: transparent; }
	.menu-linee .categoria__testa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--linea); transform-origin: left; animation: a-linea .7s cubic-bezier(.7, 0, .2, 1) .1s backwards; }
	.menu-linee .piatto > * { animation: a-riga-legale .4s ease calc(650ms + var(--k) * 60ms) backwards; }
	.menu-linee .categoria__testa > * { animation: a-colonna .6s var(--ease) backwards; }
	@keyframes a-linea { from { transform: scaleX(0); } }
	/* Apertura: MENÙ sale, poi testo e ricerca, poi le voci dell'indice una dopo l'altra */
	.menu-apre .menu-testa h1 { animation: a-colonna .8s var(--ease) backwards; }
	.menu-apre .menu-testa > div > p, .menu-apre .menu-strumenti { animation: a-riga-legale .7s ease .3s backwards; }
	/* Pannello allergeni: compare in dissolvenza, le chip non si muovono */
	.filtro__pannello:not([hidden]) { animation: a-riga-legale var(--t-2) ease; }
	.menu-apre .indice li, .menu-apre .menu-dove { animation: a-riga-legale .5s ease calc(200ms + var(--k) * 35ms) backwards; }
}

/* ===== Privacy e cookie (a-privacy.html): testo legale in colonna leggibile ===== */
.legale { max-width: 76ch; margin: 0 auto; padding: calc(var(--header-h) + clamp(40px, 6vw, 88px)) var(--gutter) clamp(64px, 8vw, 120px); }
.legale__testa h1 { font-size: clamp(3.5rem, 10vw, 7.5rem); line-height: .86; }
.legale__testa > p { color: var(--testo-2); margin-top: 16px; }
/* Avviso di bozza: resta finché il testo non è verificato */
.legale__bozza { margin-top: 24px; padding: 14px 18px; border-left: 3px solid var(--rosso); background: var(--nero-3); color: var(--bianco); }
.legale__indice { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--linea); }
.legale__indice a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.legale section { padding-top: 48px; scroll-margin-top: var(--header-h); }
.legale h2 { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; }
.legale h3 { font-family: var(--corpo); font-size: 1.0625rem; font-weight: 700; margin-top: 32px; }
.legale p, .legale li { color: var(--testo-2); line-height: 1.7; }
.legale p { margin-top: 12px; }
.legale ul { margin-top: 12px; padding-left: 1.25em; }
.legale li + li { margin-top: 6px; }
.legale strong { color: var(--bianco); }
.legale section a, .legale__data a { color: var(--bianco); text-decoration: underline; text-underline-offset: 3px; }
/* Parti che dipendono da scelte ancora aperte */
.legale mark.da-confermare { background: color-mix(in srgb, var(--arancio) 22%, transparent); color: var(--bianco); padding: 0 .2em; border-radius: 2px; }
.legale__tabella { margin-top: 16px; overflow-x: auto; }
.legale table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linea); color: var(--testo-2); }
.legale th { color: var(--bianco); font-weight: 600; }
.legale__data { margin-top: 48px; font-size: .875rem; color: var(--testo-3); }