/* ==========================================================================
   SAIMON — Pagine
   Ciò che appartiene a una pagina sola.
   ========================================================================== */

/* ==========================================================================
   HOME
   ========================================================================== */

/* --------------------------------------------------------------------------
   Eroe
   Il video resta visibile ma scurito: il lettering in panna deve stare
   sopra i 4.5:1 anche sui fotogrammi più chiari del girato.
   -------------------------------------------------------------------------- */
.eroe {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 7rem var(--margine-laterale) var(--spazio-16);
  background-color: var(--colore-antracite-900);
  overflow: hidden;
  isolation: isolate;
  /* Sopra le foglie della sezione dopo (.foglie è a z-index 2): il ramo in
     alto a destra deve infilarsi sotto il video, non coprirlo. */
  z-index: 3;
}

/* Copertina del video: il primo fotogramma, verticale o orizzontale come il
   video che parte (<picture> con <source media="(orientation: portrait)">),
   così il passaggio al video non si nota. Senza, prima che il video arrivi
   si vedrebbe un riquadro scuro vuoto, e su iPhone in risparmio energetico,
   dove l'autoplay è spento, resterebbe vuoto per sempre. */
.eroe__copertina img {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  filter: brightness(0.58) saturate(0.88);
}

.eroe__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  filter: brightness(0.58) saturate(0.88);
}

.eroe__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(41, 40, 45, 0.66) 0%,
      rgba(41, 40, 45, 0.28) 30%,
      rgba(41, 40, 45, 0.30) 66%,
      rgba(41, 40, 45, 0.70) 100%),
    radial-gradient(ellipse 78% 58% at 50% 48%, rgba(41, 40, 45, 0.46), transparent 78%);
}

.eroe__contenuto {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--spazio-8);
  max-width: 46rem;
}

.eroe__marchio { margin: 0; width: min(100%, 34rem); }
.eroe__marchio img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Il marchio che si fonde (js/logomorph.js)
   Il segnaposto tiene il posto della parola SAIMON, che viene disegnata dal
   palcoscenico SVG. Sotto, il sottotitolo del logo, che sfuma via appena
   l'animazione parte.
   -------------------------------------------------------------------------- */
.eroe__ancora,
.eroe__sottotitolo { display: none; }

.morph .eroe__statico { display: none; }

.morph .eroe__ancora {
  display: block;
  width: 100%;
  aspect-ratio: 1328 / 384;
}
/* Il sottotitolo si allinea alla parola SAIMON, non al centro del riquadro:
   dentro il viewBox 1328 il lettering occupa da 77 a 1204, cioè il 5,80%
   di margine a sinistra per l'84,86% di larghezza. Lo stacco verticale è
   già dentro l'altezza del riquadro, quindi il margine sopra è zero. */
.morph .eroe__sottotitolo {
  display: block;
  width: 84.86%;
  margin: 0 auto 0 5.80%;
  height: auto;
  will-change: opacity, transform;
}
/* Sul telefono lo stacco proporzionale si riduce a pochi pixel e il
   sottotitolo sembra appoggiato alla parola: un respiro in più. */
@media (max-width: 600px) {
  .morph .eroe__sottotitolo { margin-block-start: var(--spazio-2); }
}

#palcoscenico {
  position: fixed; inset: 0;
  z-index: var(--piano-morph);
  width: 100%; height: 100%;
  pointer-events: none;
  transition:
    opacity var(--durata-media) var(--uscita),
    transform var(--durata-media) var(--uscita);
}
html:not(.morph) #palcoscenico { display: none; }
.testata.e-nascosta ~ #palcoscenico {
  opacity: 0;
  transform: translateY(-100%);
}

/* --- La testata non c'è finché non si scorre --- */
.morph-nav .testata {
  color: var(--testo-principale);
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: none;
  pointer-events: none;
}
.morph-nav .testata::after { opacity: 0; }
.morph-nav.nav-pronta .testata { pointer-events: auto; }

/* Il fondo è un livello a parte: così l'animazione lo può far salire
   indipendentemente dalle voci di menu. */
.morph-nav .testata::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-color: rgba(255, 253, 249, 0.94);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-block-end: 1px solid var(--bordo-tenue);
  box-shadow: var(--ombra-sm);
  /* Stesso ragionamento delle voci: se le variabili non arrivano, il fondo
     c'è. Una barra con le voci sopra il video e senza fondo sarebbe
     illeggibile. */
  opacity: var(--nav-fondo, 1);
  transform: translateY(var(--nav-fondo-y, 0px));
  will-change: opacity, transform;
}

/* I valori di ripiego sono 1 e 0, cioè "navbar visibile", non "navbar
   nascosta". Non è un dettaglio: la classe .morph la mette js/logomorph.js
   prima di finire il proprio lavoro, quindi se qualcosa si rompe dopo
   quel punto le variabili non arrivano mai e con un ripiego a 0 la barra
   resterebbe invisibile per sempre, senza modo di aprire il menu. Quando
   l'animazione gira regolarmente scrive lei i valori fin dal primo
   fotogramma, prima che la pagina venga disegnata: il comportamento
   normale non cambia di una virgola. */
.morph-nav .testata__interno > nav,
.morph-nav .menu-mobile__pulsante {
  opacity: var(--nav-voci, 1);
  transform: translateY(var(--nav-voci-y, 0px));
  will-change: opacity, transform;
}

/* Il monogramma vero fa solo da bersaglio: a disegnarlo è la colata.
   Resta però un link vero, cliccabile e raggiungibile da tastiera. */
.morph .marchio__segno { opacity: 0; }

/* Col menu mobile aperto comanda di nuovo la testata, non l'animazione. */
.morph-nav body.e-bloccato .testata__interno > nav,
.morph-nav body.e-bloccato .menu-mobile__pulsante { opacity: 1; transform: none; }

/* --- La testata sul telefono ---
   Sotto i 900px js/logomorph.js non mette .morph-nav, quindi tutto il blocco
   qui sopra non si applica e la barra si comporta come in ogni altra pagina
   del sito: trasparente in cima, fondo panna e testo antracite appena
   compare e-scorsa. Un padrone solo.

   Prima non era così: il colore lo cambiava e-scorsa (subito, da navbar.js) e
   il fondo lo faceva salire --nav-fondo (l'animazione, che ha bisogno di
   scroll e di requestAnimationFrame). Quando i due non erano d'accordo
   restava un hamburger antracite su una barra trasparente sopra il video
   scuro: presente, opaco, al posto giusto e invisibile.

   All'eroe resta da chiedere una cosa sola: che l'hamburger non si veda
   finché non si scorre. */
@media (max-width: 899px) {
  .morph .menu-mobile__pulsante {
    opacity: 0;
    transform: none;
    transition: opacity var(--durata-media) var(--uscita);
  }
  .morph .testata.e-scorsa .menu-mobile__pulsante { opacity: 1; }
}

/* Lo scorrimento fra eroe e prima sezione sul telefono lo fa js/sezioni.js.
   Con lo snap nativo del CSS non si poteva: agganciando anche l'eroe, ogni
   piccolo scorrimento riportava la pagina a zero, e a zero l'animazione del
   marchio si riavvolge e la testata torna invisibile. Il rimedio era peggio
   del male. */

.eroe__frase {
  max-width: 28em;
  margin: 0;
  color: var(--colore-panna-100);
  font-size: var(--testo-md);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Comparsa in sequenza al caricamento */
.eroe__marchio, .eroe__frase {
  opacity: 0;
  transform: translateY(18px);
}
.js .e-caricato .eroe__marchio,
.js .e-caricato .eroe__frase {
  opacity: 1; transform: none;
  transition:
    opacity 900ms var(--uscita-lenta),
    transform 900ms var(--uscita-lenta);
}
.js .e-caricato .eroe__frase   { transition-delay: 220ms; }
html:not(.js) .eroe__marchio,
html:not(.js) .eroe__frase { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .eroe__marchio, .eroe__frase { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Chi siamo
   -------------------------------------------------------------------------- */
.filosofia-home {
  display: flex; align-items: center;
  min-height: 100svh;
  padding-block: var(--spazio-24);
  background-color: var(--sfondo-pagina);
  position: relative; z-index: auto;
  overflow: visible;
}
/* Telefono: la sezione dopo (Gelati) aveva lo stesso fondo, e i due respiri
   sommati sembravano uno schermo vuoto. Un gradino di tono, come nelle altre
   pagine, fa da stacco: panna scura qui, chiara ai gelati, scura ai semifreddi. */
@media (max-width: 899.98px) {
  .filosofia-home {
    background-color: var(--sfondo-sezione-alt);
    padding-block-end: var(--spazio-16);
  }
}

.chi-siamo__griglia {
  position: relative; z-index: 10;
  display: grid; gap: var(--spazio-12);
  grid-template-columns: 1fr;
  align-items: center;
  width: 100%;
}
@media (min-width: 900px) {
  .chi-siamo__griglia {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--spazio-16), 5vw, var(--spazio-32));
  }
}

.chi-siamo__testo > * + * { margin-block-start: var(--spazio-6); }
@media (min-width: 1280px) {
  .chi-siamo__testo p { max-width: 36em; }
  .chi-siamo__testo .testo-lead { font-size: clamp(var(--testo-md), 0.35vw + 1rem, 1.3rem); }
}

.citazione {
  margin: 0;
  padding-inline-start: var(--spazio-6);
  border-inline-start: 2px solid var(--bordo-decorativo);
}
.citazione p {
  font-size: var(--testo-md); font-weight: 300; font-style: italic;
  line-height: 1.6; color: var(--testo-principale);
}
.citazione figcaption {
  margin-block-start: var(--spazio-3);
  font-size: var(--testo-sm); color: var(--testo-tenue);
}

.chi-siamo__foto { aspect-ratio: 1 / 1; }
/* Foto inquadrata dall'alto: insegna e persona intere (Simone davanti
   alla gelateria). Il ritaglio al centro tagliava l'insegna; quello
   quadrato del telefono avrebbe tagliato o l'insegna o i piedi, quindi qui
   la cornice resta 4:5 anche lì. Niente cornice--parallasse: per scorrere
   la foto deve sporgere dalla cornice, e la cima dell'insegna resterebbe
   sempre nascosta. */
.chi-siamo__foto--dall-alto { aspect-ratio: 4 / 5; }
.chi-siamo__foto--dall-alto img { object-position: center top; }
@media (min-width: 900px) { .chi-siamo__foto { aspect-ratio: 4 / 5; max-height: 74svh; } }

/* Foto quadrata e meno alta: dove il testo accanto è corto, una foto 4/5 fino
   a 74svh detta l'altezza della riga e lascia un vuoto sotto al testo. Il
   rimedio è accorciare la foto, non allungare il testo. */
@media (min-width: 900px) {
  .chi-siamo__foto--quadrata { aspect-ratio: 1 / 1; max-height: 56svh; }
}

/* Foto in 4:5 ma più bassa: subito sotto l'eroe, una foto a 74svh centrava
   il testo troppo in basso e il titolo partiva lontano dal video. Resta 4:5
   dove il soggetto è alto (la torta a piani) e un quadrato lo taglierebbe. */
@media (min-width: 900px) {
  .chi-siamo__foto--bassa { max-height: 60svh; }
}

/* Foto a sinistra. L'ordine si scambia solo da due colonne in su: in colonna
   unica il testo deve restare primo, come nel resto del sito. */
@media (min-width: 900px) {
  .chi-siamo__griglia--rovesciata .chi-siamo__foto { order: -1; }
  /* La foto in 4:5 è quasi sempre più stretta della sua colonna (la frena
     max-height): appoggiata al lato del testo ci finiva incollata, con il
     vuoto tutto dall'altra parte. Al centro della colonna lo stacco si
     divide in due, e vale sia con la foto a destra sia a sinistra. */
  .chi-siamo__foto { justify-self: center; }
}

/* Telefono: in colonna unica tutto il testo veniva prima della foto, uno
   schermo intero di sole parole. Il blocco testo si scioglie nella griglia
   (display: contents) e la foto si infila fra la frase grande e il resto.
   Il gap va a zero: le spaziature le danno già i margini di .chi-siamo__testo,
   che seguono il DOM e non il display. */
@media (max-width: 899.98px) {
  .chi-siamo__griglia { gap: 0; }
  .chi-siamo__testo { display: contents; }
  .chi-siamo__testo > * { order: 3; }
  .chi-siamo__testo > h2,
  .chi-siamo__testo > .testo-lead { order: 1; }
  /* Sotto basta poco: il paragrafo che segue porta già il suo margine. */
  .chi-siamo__foto { order: 2; margin-block: var(--spazio-8) var(--spazio-2); }
}

/* --------------------------------------------------------------------------
   I tre mondi — sezioni a tutto schermo
   -------------------------------------------------------------------------- */
.mondi { position: relative; }

/* L'aggancio fra sezioni lo gestisce js/sezioni.js, non il CSS: scendendo
   si avanza sempre di una sezione intera, salendo lo scroll resta libero.
   Regole CSS di snap qui darebbero fastidio al JS. */

.mondo {
  position: relative; z-index: auto;
  display: flex; align-items: center;
  min-height: 100svh;
  padding-block: var(--spazio-24);
  /* Trasparenza verticale per i rami di continuità tra sezioni */
  overflow: visible;
}
.mondo--gelati     { background-color: var(--colore-panna-100); }
.mondo--semifreddi { background-color: var(--colore-panna-200); }
.mondo--matrimoni  { background-color: var(--sfondo-sezione-legno); color: var(--colore-panna-100); }

.mondo--matrimoni h2 { color: var(--colore-panna-100); }
.mondo--matrimoni p  { color: rgba(250, 246, 239, 0.88); }

.mondo__griglia {
  position: relative; z-index: 10;
  display: grid; gap: var(--spazio-12);
  grid-template-columns: 1fr;
  align-items: center;
  width: 100%;
}
@media (min-width: 900px) {
  .mondo__griglia { grid-template-columns: 1fr 1fr; gap: var(--spazio-16); }
  .mondo--semifreddi .mondo__foto { order: 2; }
}
/* In colonna si legge prima il racconto e poi si guarda la foto. */
@media (max-width: 899px) {
  .mondo__foto { order: 2; }
}
@media (min-width: 1200px) {
  .mondo__griglia { gap: clamp(var(--spazio-16), 5vw, var(--spazio-32)); }
}
@media (min-width: 1600px) {
  .mondo__testo p { max-width: 32em; }
  .mondo__testo .testo-lead { font-size: clamp(var(--testo-md), 0.3vw + 1rem, 1.3rem); }
}

.mondo__testo > * + * { margin-block-start: var(--spazio-6); }
.mondo__nome {
  font-size: var(--testo-sm); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--testo-caldo);
  margin-block-end: var(--spazio-3);
}
.mondo--matrimoni .mondo__nome { color: var(--colore-legno-300); }

.mondo__foto { aspect-ratio: 1 / 1; }
.mondo--matrimoni .mondo__foto { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .mondo__foto { max-height: 74svh; }
}

/* --- La barra dei tre mondi --- */
.barra-mondi {
  position: fixed;
  inset-inline-start: var(--spazio-6);
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: var(--piano-barra);
  display: none;
  padding-inline-start: var(--spazio-4);
  opacity: 0; visibility: hidden;
  transition:
    opacity var(--durata-media) var(--uscita),
    visibility 0s linear var(--durata-media);
}
.barra-mondi.e-visibile { opacity: 1; visibility: visible; transition-delay: 0s; }

@media (min-width: 1200px) {
  .js .barra-mondi { display: block; }
}
@media (min-width: 1800px) {
  .barra-mondi { inset-inline-start: var(--spazio-12); }
}

/* La barra ha bisogno della sua corsia. Quando il margine naturale del
   contenitore è già abbastanza largo (monitor molto grandi) non serve
   aggiungere niente; quando non lo è, il contenuto si scosta quel tanto
   che basta perché testo e foto non finiscano sopra le etichette. */
@media (min-width: 1200px) {
  .mondi .contenitore {
    padding-inline-start: clamp(11rem, 14vw, 16rem);
  }
}

.barra-mondi__binario {
  position: absolute; inset-inline-start: 0;
  inset-block-start: 0.55rem; inset-block-end: 0.55rem;
  width: 1px;
  background-color: var(--colore-legno-300);
}
.barra-mondi__avanzamento {
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 1px; height: var(--avanzamento, 0%);
  background-color: var(--colore-salvia-700);
  transition: height 120ms linear;
}
.barra-mondi ol { display: flex; flex-direction: column; gap: var(--spazio-6); }

.barra-mondi a {
  position: relative;
  display: block;
  padding-inline-start: var(--spazio-6);
  font-size: var(--testo-xs); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--colore-antracite-500);
  transition: color var(--durata-media) var(--uscita);
}
.barra-mondi a::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em;
  width: var(--spazio-3); height: 1px;
  background-color: currentColor;
  transition: width var(--durata-media) var(--uscita);
}
.barra-mondi a:hover { color: var(--colore-antracite-900); }
.barra-mondi a[aria-current='true'] {
  color: var(--colore-antracite-900);
}
.barra-mondi a[aria-current='true']::before { width: var(--spazio-4); background-color: var(--colore-salvia-700); }

/* Sul fondo scuro la barra si schiarisce */
.barra-mondi.su-fondo-scuro a { color: rgba(250, 246, 239, 0.62); }
.barra-mondi.su-fondo-scuro a:hover,
.barra-mondi.su-fondo-scuro a[aria-current='true'] { color: var(--colore-panna-100); }
.barra-mondi.su-fondo-scuro a[aria-current='true']::before { background-color: var(--colore-salvia-300); }
.barra-mondi.su-fondo-scuro .barra-mondi__binario { background-color: rgba(223, 199, 168, 0.35); }
.barra-mondi.su-fondo-scuro .barra-mondi__avanzamento { background-color: var(--colore-salvia-300); }

/* --------------------------------------------------------------------------
   Dicono di noi
   Niente fascia colorata: la sezione sta sul panna come il resto della pagina.
   Le schede scorrono in orizzontale a ogni larghezza, con frecce vere.

   Niente deriva laterale legata allo scroll verticale (rimossa): la pista è
   già un contenitore a scroll nativo con scatto, largo quasi quanto lo
   schermo. Una transform esterna che la sposta di lato la fa sporgere oltre
   il bordo della finestra, tagliando anche la scheda che dovrebbe restare
   ferma — e il taglio peggiora proprio mentre si scorre la sezione per
   leggerla. js/scena.js non scrive più --deriva su questo elemento.
   -------------------------------------------------------------------------- */
.recensioni { position: relative; overflow: visible; }

.recensioni__intestazione {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--spazio-6);
  margin-block-end: var(--spazio-12);
}

.recensioni__comandi { display: flex; gap: var(--spazio-4); }
.recensioni__freccia {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background-color: var(--colore-panna-100);
  border: 1.5px solid var(--colore-antracite-900);
  border-radius: var(--raggio-tondo);
  color: var(--colore-antracite-900);
  box-shadow: 0 4px 14px rgba(51, 43, 36, 0.08);
  cursor: pointer;
  transition:
    background-color var(--durata-breve) var(--uscita),
    border-color var(--durata-breve) var(--uscita),
    color var(--durata-breve) var(--uscita),
    transform var(--durata-breve) var(--uscita),
    box-shadow var(--durata-breve) var(--uscita);
}
.recensioni__freccia svg {
  width: 1.35rem; height: 1.35rem;
  stroke-width: 2.2px;
}
.recensioni__freccia:hover {
  background-color: var(--colore-antracite-900);
  border-color: var(--colore-antracite-900);
  color: var(--colore-panna-100);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(51, 43, 36, 0.18);
}
.recensioni__freccia:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(51, 43, 36, 0.12);
}
.recensioni__freccia[disabled] {
  opacity: 1;
  cursor: pointer;
}

/* La pista parte perfettamente allineata a sinistra con il contenitore e
   si estende a destra fino al bordo dello schermo: le schede a destra
   escono dal bordo della finestra facendo capire che l'elenco è scorrevole. */
.recensioni__pista {
  position: relative; z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 25rem);
  gap: var(--spazio-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: var(--spazio-4);
  /* Solo a destra la pista esce dallo schermo: è da quel lato che le schede
     devono sbordare per far capire che l'elenco continua. A sinistra parte
     allineata al contenitore — con la rientranza negativa anche qui la prima
     scheda finiva incollata al bordo del telefono e sembrava tagliata.
     Niente padding sulla pista: js/recensioni.js calcola la lunghezza di un
     giro come scrollWidth/3, e un padding falserebbe il conto. */
  margin-inline-end: calc(50% - 50vw);
  scrollbar-width: none;
}
.recensioni__pista::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .recensioni__pista { grid-auto-columns: 24rem; gap: var(--spazio-8); }
}
/* Sul telefono la scheda si stringe perché di quella dopo se ne veda un dito:
   a 86vw ne restava visibile una fessura di pochi pixel, che non si legge
   come "c'è altro" ma come un errore di impaginazione. */
@media (max-width: 767px) {
  .recensioni__pista { grid-auto-columns: min(78vw, 22rem); }
}

.recensione {
  display: flex; flex-direction: column; gap: var(--spazio-4);
  padding: var(--spazio-8);
  background-color: var(--colore-panna-50);
  border: var(--bordo-sottile);
  border-radius: var(--raggio-lg);
  scroll-snap-align: start;
}
.recensione__testa { display: flex; align-items: center; gap: var(--spazio-4); }
.recensione__testa p { margin: 0; max-width: none; }
.recensione__foto {
  width: 3.5rem; height: 3.5rem; flex: none;
  border-radius: var(--raggio-tondo); object-fit: cover;
  border: 1px solid var(--bordo-decorativo);
}
.recensione__nome { font-size: var(--testo-base); font-weight: 500; color: var(--testo-principale); line-height: 1.3; }
.recensione__occasione { font-size: var(--testo-xs); color: var(--testo-tenue); letter-spacing: 0.02em; }
.recensione blockquote { margin: 0; }
.recensione p {
  font-size: var(--testo-base); font-weight: 300; line-height: 1.7;
  color: var(--testo-principale); max-width: none;
}
.recensione__stelle { display: flex; gap: 2px; color: var(--colore-salvia-700); }
.recensione__stelle svg { width: 0.9rem; height: 0.9rem; }
.recensione__stelle .e-vuota { opacity: 0.28; }

/* Recensioni da Google (js/recensioni.js). Al posto della foto del profilo,
   che vorrebbe dire far chiamare i server di Google al browser di chi
   visita, l'iniziale del nome. */
.recensione__iniziale {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; flex: none;
  border-radius: var(--raggio-tondo);
  background-color: var(--colore-salvia-100);
  border: 1px solid var(--bordo-decorativo);
  color: var(--colore-salvia-900);
  font-size: var(--testo-lg); font-weight: 400;
}
.recensione__nome a { color: inherit; text-decoration: none; }
.recensione__nome a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Una recensione lunga non deve allungare tutte le schede della fila. */
.recensione--google blockquote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}

.recensioni__fonte {
  position: relative; z-index: 5;
  margin-block-start: var(--spazio-6);
  font-size: var(--testo-sm);
  color: var(--testo-tenue);
  max-width: none;
}
.recensioni__fonte a { color: inherit; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Invito a prenotare — la sola superficie salvia estesa della pagina
   -------------------------------------------------------------------------- */
.invito {
  position: relative; z-index: 5;
  margin-block-start: var(--spazio-16);
  padding: clamp(var(--spazio-8), 3.5vw, var(--spazio-16)) var(--margine-laterale);
  background-color: var(--sfondo-invito);
  border-radius: var(--raggio-lg);
  overflow: hidden;
  text-align: center;
}
/* Il filetto interno: lo stesso gesto della cornice legno delle foto, qui in
   salvia scuro perché il marrone sul verde intorbida. È questo dettaglio a
   dare l'aria rifinita, invece del semplice rettangolo colorato. */
.invito::after {
  content: '';
  position: absolute; inset: var(--spazio-4);
  border: 1px solid rgba(60, 74, 52, 0.28);
  border-radius: calc(var(--raggio-lg) - 8px);
  pointer-events: none;
}
.invito__contenuto {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spazio-4);
  max-width: 52rem; margin-inline: auto;
}
.invito__occhiello {
  margin: 0;
  font-size: var(--testo-xs); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--colore-salvia-900);
}
/* L'occhiello deve stare vicino al titolo, non alla distanza degli altri
   blocchi: il margine negativo recupera parte del gap del contenitore. */
.invito__occhiello + h2 { margin-block-start: calc(var(--spazio-3) - var(--spazio-6)); }
.invito h2 {
  font-size: clamp(var(--testo-2xl), 3.4vw + 0.8rem, var(--testo-3xl));
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.invito p {
  margin: 0; color: var(--testo-principale);
  font-size: clamp(var(--testo-base), 0.35vw + 0.95rem, 1.25rem);
  line-height: 1.6;
}
.invito .bottone { margin-block-start: var(--spazio-2); }
@media (max-width: 480px) {
  .invito { padding-inline: var(--spazio-3); }
  .invito::after { inset: var(--spazio-2); }
  .invito .bottone {
    padding: var(--spazio-3) var(--spazio-4);
    font-size: var(--testo-xs);
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .invito__nota {
    font-size: var(--testo-xs);
    word-break: break-word;
  }
  .invito__nota a {
    display: inline-block;
  }
}
/* Sul salvia saturo il grigio tenue si spegne: qui il testo secondario è
   l'antracite pieno, che sul Pantone 16-1124 tiene 8,92:1. */
.invito__nota { font-size: clamp(var(--testo-sm), 0.2vw + 0.85rem, 1.05rem); color: var(--colore-antracite-700); }
.invito__nota a { color: var(--colore-antracite-900); }
/* Dentro il pannello verde le foglie non ci vanno: il riquadro le taglierebbe
   di netto sui suoi angoli arrotondati. Stanno nello sfondo della sezione,
   dietro al pannello. */

/* ==========================================================================
   PAGINE INTERNE
   ========================================================================== */
.testata-pagina {
  padding-block: 9rem var(--spazio-16);
  background-color: var(--sfondo-pagina);
  border-block-end: var(--bordo-sottile);
}
.testata-pagina__interno { display: flex; flex-direction: column; gap: var(--spazio-6); }
.testata-pagina p { font-size: var(--testo-md); color: var(--testo-secondario); }

.briciole {
  display: flex; flex-wrap: wrap; gap: var(--spazio-2);
  font-size: var(--testo-xs); color: var(--testo-tenue); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.briciole a { color: var(--testo-tenue); text-decoration: none; }
.briciole a:hover { color: var(--testo-accento); text-decoration: underline; }
.briciole li + li::before { content: '·'; margin-inline-end: var(--spazio-2); }
.briciole ol { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }

/* Due colonne testo + foto, usato in più pagine interne */
.duetto {
  display: grid; gap: var(--spazio-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .duetto { grid-template-columns: 1fr 0.8fr; gap: var(--spazio-24); }
  .duetto--rovesciato { grid-template-columns: 0.8fr 1fr; }
  .duetto--rovesciato .duetto__foto { order: -1; }
}
.duetto__testo > * + * { margin-block-start: var(--spazio-6); }
.duetto__foto { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   Gli impegni della filosofia — niente scatole: sopra ogni impegno un disegno
   che viene dal suo testo (il foglietto con poche righe, la bottiglia del
   latte, il cucchiaio), con lo stesso tratto a mano dei pozzetti e dei
   formati in prodotti.html. Il filtro #segno-mano sta in fondo alla sezione.
   -------------------------------------------------------------------------- */
.impegni {
  display: grid;
  gap: var(--spazio-8);
  margin-block-start: var(--spazio-12);
}
@media (min-width: 768px) {
  .impegni {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--spazio-8), 4vw, var(--spazio-16));
  }
}

.impegno {
  position: relative;
  isolation: isolate;
  padding: var(--spazio-8) var(--spazio-6);
  text-align: center;
}

/* La cornice, tracciata a mano come i disegni: lati appena ondulati, angoli
   ognuno diverso, e la fine che scavalca l'inizio come una penna che chiude
   il giro. Il tracciato (#cornice-tratto, in fondo alla sezione) si stira
   sulla card con preserveAspectRatio="none"; non-scaling-stroke tiene il
   filo dello stesso spessore in ogni direzione. Niente filtro qui: su un
   disegno stirato il tremolio verrebbe schiacciato da una parte sola.
   E niente tracciatura animata: con non-scaling-stroke Chrome ignora
   pathLength, e il tratteggio si fermava a metà giro. La cornice arriva
   intera, insieme alla card. Stesso legno pieno dei disegni: quello più
   chiaro si perdeva sulla carta panna. */
.impegno__cornice {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: color-mix(in srgb, var(--colore-panna-50) 55%, transparent);
  stroke: var(--colore-legno-700);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--durata-media) var(--uscita);
}
/* Tre cornici identiche si noterebbero: quella di mezzo è specchiata. */
.impegno:nth-child(3n + 2) .impegno__cornice { scale: -1 1; }

.impegno__segno {
  display: block;
  width: clamp(6rem, 8vw, 7.5rem);
  height: auto;
  margin: 0 auto var(--spazio-4);
  overflow: visible;
  fill: none;
  stroke: var(--colore-legno-700);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#segno-mano);
  transition: rotate 700ms var(--uscita);
}

/* Le campiture: la carta e il latte color panna, la foglia e il pistacchio
   salvia. Sono gli unici pieni, sotto al tratto. */
.impegno__segno .campitura { stroke: none; }
.campitura--carta  { fill: var(--colore-panna-50); }
.campitura--salvia { fill: var(--colore-salvia-300); }

/* Il disegno si traccia dopo che il blocco è salito al suo posto, poi
   arriva il colore. I tracciati hanno pathLength="1", quindi un solo valore
   vale per tutti. Senza JS il disegno è già intero. */
.js .impegno__segno path:not(.campitura) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms var(--uscita) calc(var(--ritardo, 0ms) + 260ms);
}
.js .impegno__segno .campitura {
  opacity: 0;
  transition: opacity 700ms var(--uscita) calc(var(--ritardo, 0ms) + 900ms);
}
.js .impegno.e-visibile .impegno__segno path:not(.campitura) { stroke-dashoffset: 0; }
.js .impegno.e-visibile .impegno__segno .campitura { opacity: 1; }

.impegno h3 {
  font-size: var(--testo-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--colore-legno-700);
  margin-block-end: var(--spazio-2);
}
.impegno p {
  max-width: 24em;
  margin-inline: auto;
  font-size: var(--testo-base);
  color: var(--testo-secondario);
}

/* Un cenno, non un salto: il disegno si inclina appena, come preso in mano. */
@media (hover: hover) {
  .impegno:hover .impegno__segno { rotate: -4deg; }
  .impegno:hover .impegno__cornice { stroke: var(--colore-legno-900); }
}
@media (prefers-reduced-motion: reduce) {
  .js .impegno__segno path:not(.campitura) { stroke-dashoffset: 0; }
  .js .impegno__segno .campitura { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Le interviste — qui la card ha senso: è tutta un collegamento, con la foto
   dell'articolo. All'hover si muove la foto, non la card.
   -------------------------------------------------------------------------- */
.interviste {
  display: grid;
  gap: var(--spazio-8);
  width: 100%;
  margin-block-start: var(--spazio-8);
}
@media (min-width: 768px) { .interviste { grid-template-columns: repeat(3, 1fr); } }

.intervista {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background-color: var(--sfondo-sezione-alt);   /* un gradino di tono, niente filo */
  border-radius: var(--raggio-md);
}
.intervista__foto { display: block; overflow: hidden; }
.intervista__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: scale 900ms var(--uscita);
}
.intervista__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--spazio-6);
}
.intervista__testata {
  margin-block-end: var(--spazio-2);
  font-size: var(--testo-sm);
  font-weight: 500;
  color: var(--testo-caldo);
}
.intervista__titolo {
  font-size: 1.25rem;
  transition: color var(--durata-media) var(--uscita);
}
.intervista__invito {
  margin-block-start: auto;
  padding-block-start: var(--spazio-4);
  font-size: var(--testo-base);
  color: var(--testo-secondario);
}
.intervista__freccia {
  display: inline-block;
  transition: translate var(--durata-media) var(--uscita);
}
@media (hover: hover) {
  .intervista:hover .intervista__foto img { scale: 1.04; }
  .intervista:hover .intervista__titolo { color: var(--colore-salvia-700); }
  .intervista:hover .intervista__freccia { translate: 4px 0; }
}

/* Gusti */
.gusti { display: grid; gap: var(--spazio-4); }
@media (min-width: 600px) { .gusti { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gusti { grid-template-columns: repeat(3, 1fr); } }
.gusto {
  padding: var(--spazio-6);
  background-color: var(--colore-panna-50);
  border: var(--bordo-sottile);
  border-radius: var(--raggio-md);
}
.gusto h3 { font-size: var(--testo-lg); font-weight: 400; margin-block-end: var(--spazio-2); }
.gusto p { font-size: var(--testo-base); color: var(--testo-secondario); margin-block-end: var(--spazio-4); }
.gusto__note {
  display: flex; flex-wrap: wrap; gap: var(--spazio-2);
  font-size: var(--testo-xs); color: var(--testo-caldo);
}
.gusto__note li { display: inline-flex; align-items: center; gap: var(--spazio-1); }
.gusto__note svg { width: 0.8rem; height: 0.8rem; }

/* --------------------------------------------------------------------------
   Le tappe del servizio matrimoni — qui l'ordine è informazione, quindi resta
   il numero; al posto delle righe orizzontali c'è un disegno per ogni tappa,
   con lo stesso tratto dei pozzetti.
   -------------------------------------------------------------------------- */
.tappe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-12);
}
@media (min-width: 768px) {
  .tappe { grid-template-columns: repeat(4, 1fr); gap: clamp(var(--spazio-6), 3vw, var(--spazio-12)); }
}

/* L'icona è l'unico ornamento: un disegno a tratto sottile, con molta aria
   sotto. Il color legno pieno e non uno più chiaro perché a tratto 1.25 una
   linea schiarita sparirebbe; è la sottigliezza a renderla leggera, non il
   colore. */
.tappa { text-align: center; }
.tappa__icona {
  display: block;
  width: clamp(3.25rem, 4.5vw, 4rem);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto var(--spazio-6);
  color: var(--colore-legno-700);
}
.tappa h3 {
  font-size: var(--testo-lg); font-weight: 400; font-style: italic;
  color: var(--colore-legno-700);
  margin-block-end: var(--spazio-2);
}
.tappa p { font-size: var(--testo-base); color: var(--testo-secondario); }

/* Qui non c'è una foto accanto al testo: è un blocco introduttivo autonomo,
   come l'intestazione del banco a pozzetti in prodotti.html. Le quattro tappe
   sotto sono già centrate sul proprio numero, quindi titolo e coda seguono lo
   stesso asse invece di restare a sinistra: un solo centro per tutta la
   sezione, non tre allineamenti diversi in croce. Misura più stretta perché il
   testo centrato regge meno caratteri per riga di quello a bandiera. */
/* Flex con align-items, non text-align su un blocco: la regola tipografica
   globale «p { max-width: 34em }» (base.css) rende i paragrafi più stretti
   del contenitore, e un blocco più stretto senza margin-inline:auto si
   appoggia a sinistra — text-align centrerebbe il testo dentro quel blocco
   storto, non il blocco stesso. Stesso schema del pannello .invito__contenuto. */
.tappe__intestazione {
  display: flex; flex-direction: column; align-items: center;
  max-width: 38rem; margin-inline: auto; text-align: center;
}
.tappe__intestazione > * + * { margin-block-start: var(--spazio-4); }

.tappe__coda {
  display: flex; flex-direction: column; align-items: center;
  max-width: 68rem; margin: var(--spazio-16) auto 0; text-align: center;
}
.tappe__coda > * + * { margin-block-start: var(--spazio-4); }
.tappe__coda p {
  color: var(--testo-secondario);
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Galleria dei lavori — griglia di 3 colonne per 2 righe, con la grande che
   occupa entrambe le righe della prima colonna.

   Tutte le cornici sono --intera, la grande compresa: prendono l'altezza
   dalla foto invece di imporgliela. È questo che garantisce il non-ritaglio,
   e insieme fa sì che una cornice vuota non possa proprio esistere — non c'è
   nessuna scatola da riempire, il riquadro È la foto.
   -------------------------------------------------------------------------- */
.galleria-matrimonio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--spazio-6), 2.5vw, var(--spazio-8));
}
@media (min-width: 700px) {
  /* La prima colonna è più larga delle altre due, e non per gusto: la grande
     deve arrivare alta quanto DUE piccole impilate, e una foto non può
     coprire un'altezza maggiore senza allargarsi in proporzione. A 1fr era
     larga 291px e alta 362, dentro uno slot alto 608: restavano 123px vuoti
     sopra e sotto, perché per riempire 608px senza tagliare le sarebbero
     serviti 488px di larghezza.

     Il valore viene dalla geometria: con le piccole quadrate e la grande in
     4:5, larghezza_grande = 4/5 x (2 x larghezza_piccola + stacco), cioè
     circa 1,68 volte una piccola. Resta stabile a ogni larghezza perché
     anche lo stacco cresce in proporzione.

     Se un giorno la foto grande cambia forma il valore va rivisto: con uno
     scatto orizzontale la grande resterebbe più bassa della colonna accanto.
     Non si romperebbe nulla — la cornice aderisce sempre alla foto, quindi
     al massimo finisce un po' più in alto, mai con un riquadro vuoto. */
  .galleria-matrimonio { grid-template-columns: 1.68fr 1fr 1fr; }
  .galleria-matrimonio__grande { grid-row: span 2; }
}

.galleria-matrimonio li:not(.galleria-matrimonio__grande) .cornice {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.galleria-matrimonio li:not(.galleria-matrimonio__grande) .cornice img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La foto larga: occupa le due colonne piccole della prima riga. In colonna
   unica è un 2:1. Da 700px in su non ha una forma sua: riempie la riga, che
   è alta quanto quella delle due quadrate sotto (righe 1fr 1fr). L'immagine
   è in assoluto proprio per non dare alla riga un'altezza propria: se lo
   facesse, la griglia spalmerebbe l'altezza della grande sulle due righe a
   metà ciascuna e le quadrate si ritroverebbero con un vuoto sotto. */
.galleria-matrimonio li.galleria-matrimonio__larga .cornice { aspect-ratio: 2 / 1; }
@media (min-width: 700px) {
  .galleria-matrimonio { grid-template-rows: 1fr 1fr; }
  .galleria-matrimonio__larga { grid-column: span 2; }
  .galleria-matrimonio li.galleria-matrimonio__larga .cornice { aspect-ratio: auto; height: 100%; }
  .galleria-matrimonio li.galleria-matrimonio__larga .cornice img { position: absolute; inset: 0; }
}

/* Le altre foto, sotto le nuove. Senza JavaScript sono semplicemente aperte.
   Con JavaScript partono chiuse e si aprono in altezza (0fr → 1fr: l'unico
   modo di animare un'altezza che non si conosce in anticipo). */
.galleria-altre { margin-block-start: clamp(var(--spazio-6), 2.5vw, var(--spazio-8)); }
.js .galleria-altre {
  display: grid;
  grid-template-rows: 0fr;
  margin-block-start: 0;
  visibility: hidden;
  transition:
    grid-template-rows 700ms var(--uscita-lenta),
    margin-block-start 700ms var(--uscita-lenta),
    visibility 0s linear 700ms;
}
.js .galleria-altre > .galleria-matrimonio { min-height: 0; overflow: hidden; }
.js .galleria-altre.e-aperta {
  grid-template-rows: 1fr;
  margin-block-start: clamp(var(--spazio-6), 2.5vw, var(--spazio-8));
  visibility: visible;
  transition-delay: 0s;
}
.js .galleria-altre li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--uscita-lenta), transform 600ms var(--uscita-lenta);
}
.js .galleria-altre.e-aperta li { opacity: 1; transform: none; }
.js .galleria-altre.e-aperta li:nth-child(2) { transition-delay: 80ms; }
.js .galleria-altre.e-aperta li:nth-child(3) { transition-delay: 160ms; }
.js .galleria-altre.e-aperta li:nth-child(4) { transition-delay: 240ms; }
.js .galleria-altre.e-aperta li:nth-child(5) { transition-delay: 320ms; }

.galleria-piede {
  margin-block-start: var(--spazio-16);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--spazio-6) var(--spazio-12);
}
.galleria-piede .collegamento-avanti { margin-inline-start: auto; }
html:not(.js) .galleria-piede__altre { display: none; }
.galleria-piede__segno {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--durata-media) var(--uscita);
}
.galleria-piede__altre[aria-expanded="true"] .galleria-piede__segno {
  transform: translateY(2px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .js .galleria-altre, .js .galleria-altre li { transition: none; }
}
/* Prenotazioni */
.prenotazioni__griglia { display: grid; gap: var(--spazio-16); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .prenotazioni__griglia { grid-template-columns: 1.25fr 0.75fr; gap: var(--spazio-24); }
}
.scheda-contatti {
  padding: var(--spazio-8);
  background-color: var(--sfondo-sezione-verde);
  border-radius: var(--raggio-lg);
}
.scheda-contatti h2 { font-size: var(--testo-xl); margin-block-end: var(--spazio-6); }
.scheda-contatti dl { margin: 0; display: grid; gap: var(--spazio-6); }
.scheda-contatti dt {
  font-size: var(--testo-xs); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--testo-caldo);
  margin-block-end: var(--spazio-1);
}
.scheda-contatti dd { margin: 0; color: var(--testo-principale); }
.scheda-contatti a { color: var(--colore-salvia-900); }
.scheda-contatti__telefono { display: flex; align-items: center; gap: var(--spazio-3); }
.scheda-contatti__whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  transition: background-color 0.2s ease;
}
.scheda-contatti__whatsapp:hover { background-color: var(--colore-salvia-100); }
.scheda-contatti__whatsapp svg { inline-size: 1.5rem; block-size: 1.5rem; }

.modulo__esito {
  margin-block-start: var(--spazio-6);
  padding: var(--spazio-4) var(--spazio-6);
  border-radius: var(--raggio-md);
  background-color: var(--colore-salvia-100);
  border: 1px solid var(--colore-salvia-300);
  color: var(--testo-principale);
  font-size: var(--testo-sm);
}
.modulo__esito:empty { display: none; }

/* ==========================================================================
   Il banco a pozzetti (prodotti.html)
   --------------------------------------------------------------------------
   Il ripiano è un SVG, i pozzetti sono elementi HTML posati sopra: così i nomi
   dei gusti restano testo vero, indicizzabile e leggibile dagli screen reader
   anche a coperchio chiuso.

   Tutta la geometria è in cqw, cioè in centesimi della larghezza del banco:
   il disegno di partenza è largo 1200px, quindi ogni misura qui sotto è il
   valore in pixel diviso 12. Il banco intero è 1200 × 780, cioè 100 × 65cqw,
   e il ripiano ne occupa solo la fascia centrale, dall'11% all'89%.
   ========================================================================== */

/* Flex con align-items, non text-align: la regola tipografica globale
   «p { max-width: 34em }» (base.css) rende i paragrafi più stretti del
   contenitore, e un blocco stretto senza margin-inline:auto si appoggia a
   sinistra. Con align-items ogni figlio si centra da solo, qualunque sia la
   sua larghezza. */
.banco__intestazione {
  display: flex; flex-direction: column; align-items: center;
  max-width: var(--contenitore-stretto); margin-inline: auto; text-align: center;
}
.banco__intestazione > * + * { margin-block-start: var(--spazio-4); }

/* Le sagome riusate dai disegni: nel DOM, invisibili e senza ingombro. */
.banco__sagome,
.sagome-nascoste { position: absolute; width: 0; height: 0; overflow: hidden; }

.banco {
  container-type: inline-size;
  position: relative;
  margin-block-start: var(--spazio-2);
  /* Non `height: 61cqw`: un contenitore non può interrogare sé stesso, e quel
     valore finirebbe per misurarsi sulla finestra. Le proporzioni le tiene
     aspect-ratio, che parte dalla larghezza vera del banco. */
  aspect-ratio: 100 / 61;
}

.banco__piano {
  position: absolute;
  left: 13%;
  top: 17.42cqw;
  width: 74%;                     /* 888 unità di disegno, come il viewBox */
  height: 25cqw;
}
.banco__contorno {
  fill: none;
  stroke: var(--colore-legno-700);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.banco__gusti { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }

/* Il ripiano verticale serve solo su schermo stretto: da 900px in su c'è
   quello orizzontale vero. */
.banco__verticale { display: none; }

/* --------------------------------------------------------------------------
   Il singolo pozzetto: una scatola di 8cqw centrata su --x / --y, che fa da
   origine a freccia, coppetta e scheda.
   -------------------------------------------------------------------------- */
.pozzetto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8cqw;
  height: 8cqw;
  transform: translate(-50%, -50%);
}

.pozzetto__scatto {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pozzetto__scatto:focus-visible {
  outline: 2px solid var(--focus-anello);
  outline-offset: 6px;
  border-radius: var(--raggio-tondo);
}

.pozzetto__disegno {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;              /* il coperchio scivola fuori dal riquadro */
  filter: url(#segno-mano);       /* il tratto trema, come sul foglio */
  fill: none;
  stroke: var(--colore-legno-700);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pozzetto__foro { fill: var(--colore-legno-900); stroke: none; opacity: 0.82; }
.pozzetto__coperchio {
  fill: var(--sfondo-sezione-alt);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--durata-media) var(--uscita);
}

.pozzetto__freccia {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 3.08cqw;
  height: 6.67cqw;
  fill: none;
  stroke: var(--colore-legno-700);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#segno-mano);
  opacity: 0.72;
  transform: translateX(-50%);
  transition: opacity var(--durata-media) var(--uscita);
}
.pozzetto--giu .pozzetto__freccia {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) rotate(180deg);
}

/* --------------------------------------------------------------------------
   La coppetta: ferma e minuscola dentro il pozzetto, poi esce e cresce fino a
   posarsi accanto agli ingredienti.
   -------------------------------------------------------------------------- */
.pozzetto__coppetta {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 5cqw;
  height: auto;
  fill: none;
  stroke: var(--colore-legno-700);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#segno-mano);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.12);
  transition:
    transform var(--durata-media) var(--uscita),
    opacity 160ms linear;
}

/* --------------------------------------------------------------------------
   La scheda: nome sempre visibile, ingredienti che compaiono a pozzetto aperto.
   Gli ingredienti occupano lo spazio anche da chiusi, così nulla si sposta.
   Il nome ha due righe riservate: i nomi lunghi non spostano gli ingredienti e
   la coppetta trova sempre il suo posto.
   -------------------------------------------------------------------------- */
.pozzetto__scheda {
  position: absolute;
  left: 50%;
  width: 18cqw;                   /* le colonne distano 19.33cqw: resta 1.33cqw di aria */
  transform: translateX(-50%);
  text-align: center;
}
.pozzetto--su  .pozzetto__scheda { bottom: 15.32cqw; }
.pozzetto--giu .pozzetto__scheda { top: 15.23cqw; }

/* Nella fila di sopra la scheda è appesa per il fondo: se gli ingredienti
   stessero sotto il nome, una lista più lunga lo spingerebbe più in alto e i
   nomi finirebbero ciascuno a un'altezza diversa. Invertita, il nome resta
   sempre in punta alla freccia e gli ingredienti si aprono verso l'esterno,
   come nella fila di sotto. */
@media (min-width: 900px) {
  .pozzetto--su .pozzetto__scheda { display: flex; flex-direction: column-reverse; }
  .pozzetto--su .pozzetto__nome { margin: var(--spazio-3) 0 0; }
}

/* Il ponte tra pozzetto e scheda: senza, andando col mouse dal coperchio al
   nome si attraversa un tratto vuoto, il pozzetto perde l'hover e
   l'animazione riparte per un attimo. */
.pozzetto::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 18cqw;
  height: 7.4cqw;                 /* dal bordo del pozzetto fin dove comincia la scheda */
  transform: translateX(-50%);
}
.pozzetto--su::before  { bottom: 100%; }
.pozzetto--giu::before { top: 100%; }

.pozzetto__nome {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.6em;
  margin: 0 0 var(--spazio-3);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.55cqw, 1.3rem);
  line-height: 1.25;
  color: var(--colore-legno-700);
  transition: color var(--durata-media) var(--uscita);
}

.pozzetto__ingredienti {
  list-style: none;
  margin: 0;
  padding: 0 0 0 5.7cqw;          /* lo spazio in cui atterra la coppetta */
  text-align: start;
  font-size: clamp(0.72rem, 1.15cqw, 0.95rem);
  line-height: 1.45;
  color: var(--testo-caldo);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--durata-media) var(--uscita),
    transform var(--durata-media) var(--uscita);
}

/* --------------------------------------------------------------------------
   Stato aperto: passaggio del mouse, fuoco da tastiera o tocco (js/pozzetti.js).
   I ritardi stanno solo qui, così alla chiusura tutto rientra subito.
   -------------------------------------------------------------------------- */
.pozzetto:hover .pozzetto__coperchio,
.pozzetto:has(.pozzetto__scatto:focus-visible) .pozzetto__coperchio,
.pozzetto.e-aperto .pozzetto__coperchio {
  transform: translate(20%, -24%) rotate(-14deg);
}

.pozzetto:hover .pozzetto__coppetta,
.pozzetto:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
.pozzetto.e-aperto .pozzetto__coppetta {
  opacity: 1;
  transition:
    transform var(--durata-lunga) var(--uscita-lenta) 180ms,
    opacity 200ms linear 180ms;
}
.pozzetto--su:hover .pozzetto__coppetta,
.pozzetto--su:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
.pozzetto--su.e-aperto .pozzetto__coppetta {
  transform: translate(-50%, -50%) translate(-6.17cqw, -18.8cqw) scale(1);
}
.pozzetto--giu:hover .pozzetto__coppetta,
.pozzetto--giu:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
.pozzetto--giu.e-aperto .pozzetto__coppetta {
  transform: translate(-50%, -50%) translate(-6.17cqw, 19cqw) scale(1);
}
/* L'invito di Instagram è una riga sola, non tre: il marchio sale di conseguenza. */
.pozzetto--instagram:hover .pozzetto__coppetta,
.pozzetto--instagram:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
.pozzetto--instagram.e-aperto .pozzetto__coppetta {
  transform: translate(-50%, -50%) translate(-6.17cqw, 18.6cqw) scale(1);
}

.pozzetto:hover .pozzetto__ingredienti,
.pozzetto:has(.pozzetto__scatto:focus-visible) .pozzetto__ingredienti,
.pozzetto.e-aperto .pozzetto__ingredienti {
  opacity: 1;
  transform: none;
  transition-delay: 380ms;
}

.pozzetto:hover .pozzetto__freccia,
.pozzetto:has(.pozzetto__scatto:focus-visible) .pozzetto__freccia,
.pozzetto.e-aperto .pozzetto__freccia { opacity: 1; }

.pozzetto:hover .pozzetto__nome,
.pozzetto:has(.pozzetto__scatto:focus-visible) .pozzetto__nome,
.pozzetto.e-aperto .pozzetto__nome { color: var(--colore-legno-900); }

/* --------------------------------------------------------------------------
   Su schermo tattile il passaggio del mouse non esiste, ma il browser lo
   simula al tocco e lo lascia appiccicato finché non si tocca altrove: era
   questo a tenere aperto il pozzetto anche ripremendolo per chiuderlo, e a
   farlo chiudere solo aprendone un altro.
   Qui, dove il mouse non c'è, un pozzetto che non è aperto davvero — cioè per
   classe (il tocco, via js/pozzetti.js) o per fuoco da tastiera — torna
   chiuso, qualunque cosa dica :hover.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .pozzetto:not(.e-aperto):not(:has(.pozzetto__scatto:focus-visible)) .pozzetto__coperchio {
    transform: none;
  }
  .pozzetto:not(.e-aperto):not(:has(.pozzetto__scatto:focus-visible)) .pozzetto__coppetta {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }
  .pozzetto:not(.e-aperto):not(:has(.pozzetto__scatto:focus-visible)) .pozzetto__ingredienti {
    opacity: 0;
    transform: translateY(-6px);
  }
  .pozzetto:not(.e-aperto):not(:has(.pozzetto__scatto:focus-visible)) .pozzetto__freccia {
    opacity: 0.72;
  }
  .pozzetto:not(.e-aperto):not(:has(.pozzetto__scatto:focus-visible)) .pozzetto__nome {
    color: var(--colore-legno-700);
  }
}

/* Il pozzetto dei gusti del giorno: il collegamento avvolge disegno, freccia,
   nome e invito, così tutto il gruppo è un unico bersaglio verso Instagram. */
.pozzetto--instagram .pozzetto__scatto { text-decoration: none; color: inherit; }
.pozzetto__invito { display: block; }

/* --------------------------------------------------------------------------
   I formati dei semifreddi — stessi tratti del banco, un disegno per misura.
   Il filtro #segno-mano vive nelle sagome della sezione dei gusti: sono nella
   stessa pagina, ma se un giorno quella sezione se ne va va spostato anche lui.
   -------------------------------------------------------------------------- */
.formati {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-12);
}
@media (min-width: 768px) { .formati { grid-template-columns: repeat(3, 1fr); } }

.formato { text-align: center; }
.formato__segno {
  width: clamp(7rem, 11vw, 10rem);
  height: auto;
  margin: 0 auto var(--spazio-6);
  fill: none;
  stroke: var(--colore-legno-700);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#segno-mano);
}
.formato h4 {
  font-size: var(--testo-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--colore-legno-700);
  margin-block-end: var(--spazio-2);
}
.formato p {
  margin: 0 auto;
  max-width: 22em;
  font-size: var(--testo-base);
  color: var(--testo-secondario);
}

/* Il richiamo al listino vive dentro la sezione beige dei formati: niente
   riquadro proprio, che sarebbe un pannello dentro un pannello. Basta un
   filetto sottile a separarlo dalle tre misure. */
.richiamo-listino {
  margin-block-start: var(--spazio-12);
  padding-block-start: var(--spazio-12);
  border-block-start: var(--bordo-accento);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-6);
  text-align: center;
}
.richiamo-listino p {
  margin: 0;
  max-width: 34em;
  font-size: var(--testo-md);
  color: var(--testo-secondario);
}

/* ==========================================================================
   LISTINO TORTE SEMIFREDDO (listino-semifreddi.html)
   Una torta per riga: foto, ingredienti e com'è fatta dentro. Il disegno della
   fetta e l'elenco degli strati si leggono in parallelo, entrambi dall'alto
   verso il basso.
   ========================================================================== */
.torte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-16); }

.torta {
  display: grid;
  gap: var(--spazio-8);
  grid-template-columns: 1fr;
  padding-block-end: var(--spazio-16);
  border-block-end: var(--bordo-sottile);
}
.torta:last-child { padding-block-end: 0; border-block-end: 0; }
/* In colonna prima la descrizione della torta, poi le foto. */
@media (max-width: 799px) {
  .torta__immagini { order: 2; }
}
@media (min-width: 800px) {
  .torta {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--spazio-12);
    align-items: center;
  }
}

/* Il taglio a strati non è più un disegno: sono arrivate le foto vere, e per
   quattro torte su cinque è già un'infografica con gli ingredienti scritti
   dentro. cornice--intera su entrambe le immagini: quel testo non deve mai
   essere ritagliato. */
.torta__immagini {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-4);
  align-items: start;
}
@media (min-width: 480px) {
  .torta__immagini { grid-template-columns: 1fr 1fr; }
}
/* Una foto sola (niente diagramma): occupa la colonna invece di lasciare
   un buco accanto a sé. */
@media (min-width: 480px) {
  .torta__immagini--singola { grid-template-columns: 1fr; }
}
.torta__immagini .cornice {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.torta__immagini .cornice img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* I diagrammi a strati hanno le scritte fino al bordo dell'immagine: il filo
   interno della cornice ci passava sopra. Un margine bianco (lo stesso fondo
   dei diagrammi) le riporta dentro il filo. */
.torta__immagini .cornice--schema { background-color: #fff; }
.torta__immagini .cornice--schema img {
  padding: var(--spazio-6);
  object-fit: contain;
}

.torta__testo > * + * { margin-block-start: var(--spazio-4); }
.torta h3 { font-size: var(--testo-xl); font-weight: 300; }
.torta__ingredienti { color: var(--testo-secondario); }

/* L'abbinamento sotto il nome: è quello che si cerca scorrendo, quindi
   maiuscoletto spaziato come le etichette di sezione, non un altro paragrafo. */
.torta__abbinamento {
  font-size: var(--testo-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-accento);
}
.torta .torta__abbinamento { margin-block-start: var(--spazio-2); }
.torta__variante { font-style: italic; color: var(--testo-tenue); }

/* Torte ancora senza foto: solo testo, su una colonna di lettura. Quando
   arrivano le immagini si toglie il modificatore e torna la griglia. */
.torta--senza-foto { grid-template-columns: 1fr; }
.torta--senza-foto .torta__testo { max-width: 40rem; }

/* Personalizzazioni: testo a sinistra, sotto le foto delle ricorrenze in
   fila. Stesso taglio verticale per tutte, anche se le foto arrivano in
   formati diversi. */
.personalizzazioni > * + * { margin-block-start: var(--spazio-4); }
.personalizzazioni p { max-width: none; color: var(--testo-secondario); }

.ricorrenze {
  list-style: none;
  margin: var(--spazio-12) 0 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .ricorrenze { grid-template-columns: repeat(3, 1fr); }
}
.ricorrenza .cornice { aspect-ratio: 4 / 5; }
.ricorrenza__nome {
  margin-block-start: var(--spazio-3);
  font-size: var(--testo-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* --------------------------------------------------------------------------
   Sotto i 900px il banco si raddrizza: un pozzetto per riga, la freccia punta
   a destra verso il nome. Stessa animazione, ruotata di novanta gradi.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .banco { aspect-ratio: auto; height: auto; margin-block-start: var(--spazio-12); }
  .banco__piano { display: none; }

  /* Il ripiano in verticale: senza, i pozzetti sembrano cerchi qualsiasi in
     fila e si perde il senso del banco. Il tratteggio è in CSS e non in SVG
     perché una griglia SVG stirata in altezza si deformerebbe in rettangoli;
     così resta quadrata come sul desktop. Il tremolio del tratto è lo stesso
     filtro degli altri disegni, applicato al riquadro. */
  .banco__verticale {
    display: block;
    position: absolute;
    left: -0.75rem;
    top: -1.25rem;
    bottom: -1.25rem;
    width: 6rem;              /* il pozzetto è 4.5rem: resta centrato sopra */
    z-index: 0;
    border: 2px solid var(--colore-legno-700);
    background-image:
      repeating-linear-gradient(to right,  rgba(126, 96, 57, 0.34) 0 1px, transparent 1px 15px),
      repeating-linear-gradient(to bottom, rgba(126, 96, 57, 0.34) 0 1px, transparent 1px 15px);
    filter: url(#segno-mano);
    pointer-events: none;
  }

  .banco__gusti { position: static; display: grid; gap: var(--spazio-8); }
  /* Sopra il ripiano, altrimenti il tratteggio passa sopra i coperchi. */
  .pozzetto { z-index: 1; }
  .pozzetto::before { display: none; }

  .pozzetto {
    position: relative;
    left: auto; top: auto;
    width: auto; height: auto;
    transform: none;
    display: grid;
    grid-template-columns: 4.5rem 2rem 1fr;
    align-items: center;
    gap: var(--spazio-3);
  }

  .pozzetto__scatto { position: relative; inset: auto; width: 4.5rem; height: 4.5rem; }

  /* Nel pozzetto di Instagram è il collegamento a contenere tutto, quindi è lui
     a fare da griglia: il <li> gli lascia il posto. */
  .pozzetto--instagram { display: block; }
  .pozzetto--instagram .pozzetto__scatto {
    width: auto; height: auto;
    display: grid;
    grid-template-columns: 4.5rem 2rem 1fr;
    align-items: center;
    gap: var(--spazio-3);
  }
  .pozzetto--instagram .pozzetto__disegno { width: 4.5rem; height: 4.5rem; }

  .pozzetto__freccia {
    position: relative;
    left: auto; top: auto; bottom: auto;
    width: 2rem; height: 3.5rem;
    transform: rotate(90deg);
  }
  .pozzetto--giu .pozzetto__freccia { top: auto; transform: rotate(90deg); }

  .pozzetto--su .pozzetto__scheda,
  .pozzetto--giu .pozzetto__scheda {
    position: relative;
    left: auto; top: auto; bottom: auto;
    width: auto;
    transform: none;
    text-align: start;
  }

  .pozzetto__nome {
    justify-content: flex-start;
    min-height: 0;
    margin-block-end: var(--spazio-2);
    font-size: 1.05rem;
  }

  .pozzetto__ingredienti { padding-inline-start: 3.6rem; font-size: 0.82rem; }

  /* La coppetta parte dal centro del pozzetto (che la griglia tiene a metà
     altezza della riga) e atterra accanto agli ingredienti. Dove stiano gli
     ingredienti dipende da quante righe prende il nome, e sul telefono un
     nome lungo va a capo: lo scarto lo misura js/pozzetti.js. I valori di
     ripiego sono quelli di un nome su una riga. */
  .pozzetto__coppetta { left: 2.25rem; top: 50%; width: 3rem; }
  .pozzetto--su:hover .pozzetto__coppetta,
  .pozzetto--su:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
  .pozzetto--su.e-aperto .pozzetto__coppetta,
  .pozzetto--giu:hover .pozzetto__coppetta,
  .pozzetto--giu:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
  .pozzetto--giu.e-aperto .pozzetto__coppetta {
    transform: translate(-50%, -50%) translate(var(--coppetta-x, 7.4rem), var(--coppetta-y, 1.4rem)) scale(1);
  }
}

/* Meno movimento: niente coperchi che scivolano né palline che viaggiano. */
@media (prefers-reduced-motion: reduce) {
  .pozzetto__coperchio,
  .pozzetto__coppetta,
  .pozzetto__ingredienti { transition-duration: 1ms; }

  .pozzetto:hover .pozzetto__coperchio,
  .pozzetto:has(.pozzetto__scatto:focus-visible) .pozzetto__coperchio,
  .pozzetto.e-aperto .pozzetto__coperchio { transform: none; opacity: 0.2; }

  .pozzetto__coppetta { transform: translate(-50%, -50%) scale(1); }
  .pozzetto--su:hover .pozzetto__coppetta,
  .pozzetto--su:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
  .pozzetto--su.e-aperto .pozzetto__coppetta,
  .pozzetto--giu:hover .pozzetto__coppetta,
  .pozzetto--giu:has(.pozzetto__scatto:focus-visible) .pozzetto__coppetta,
  .pozzetto--giu.e-aperto .pozzetto__coppetta { transition-delay: 0ms; }

  .pozzetto:hover .pozzetto__ingredienti,
  .pozzetto:has(.pozzetto__scatto:focus-visible) .pozzetto__ingredienti,
  .pozzetto.e-aperto .pozzetto__ingredienti { transition-delay: 0ms; }
}



/* ==========================================================================
   PAGINA ALLERGENI (allergeni.html)
   Una voce per riga: il nome del prodotto e le chip di ciò che contiene.
   Le chip dicono l'allergene per esteso: il colore è ridondante, non
   portante, così restano leggibili anche in bianco e nero.
   ========================================================================== */

.legenda-allergeni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  padding: 0;
  margin: var(--spazio-6) 0 0;
  list-style: none;
}

.allergeni {
  padding: 0;
  margin: var(--spazio-8) 0 0;
  list-style: none;
  border-top: var(--bordo-sottile);
}

.allergene {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--spazio-2) var(--spazio-6);
  align-items: baseline;
  padding-block: var(--spazio-4);
  border-bottom: var(--bordo-sottile);
}

.allergene__nome {
  margin: 0;
  font-size: var(--testo-md);
  font-weight: 400;
  color: var(--testo-principale);
}

/* Le chip di una voce: una lista, non una riga di decorazioni. */
.allergene__elenco {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: var(--spazio-1) var(--spazio-3);
  border: 1px solid var(--colore-salvia-300);
  border-radius: var(--raggio-tondo);
  background-color: var(--colore-salvia-100);
  color: var(--colore-salvia-900);
  font-size: var(--testo-sm);
  line-height: 1.4;
}

/* Il rimando alla pagina allergeni da prodotti e listino: prima era una
   didascalia minuta e passava inosservato, ora si legge come testo vero. */
.rimando-allergeni {
  max-width: 100%;
  font-size: var(--testo-md);
  line-height: 1.6;
  color: var(--testo-principale);
}

.rimando-allergeni a {
  font-weight: 600;
  text-decoration-thickness: 2px;
}

.rimando-allergeni .solo-mobile { display: none; }

/* Smartphone: il link va a capo su una riga sua, intero. */
@media (max-width: 640px) {
  .rimando-allergeni .solo-mobile { display: inline; }
}

/* Gli ingredienti per esteso, sotto le chip: le chip si leggono a colpo
   d'occhio, la lista serve a chi vuole verificare. */
.allergene__ingredienti {
  grid-column: 2;
  margin: 0;
  max-width: none;
  font-size: var(--testo-sm);
  line-height: 1.6;
  color: var(--testo-tenue);
}

.allergene__ingredienti strong {
  font-weight: 600;
  color: var(--testo-principale);
}

/* Sotto i 700px il nome sale sopra le chip: due colonne strette
   spezzerebbero i nomi lunghi carattere per carattere. */
@media (max-width: 700px) {
  .allergene {
    grid-template-columns: 1fr;
    gap: var(--spazio-2);
  }

  .allergene__ingredienti { grid-column: 1; }
}

/* La misura di lettura globale (p { max-width: 34em }) qui stringe troppo:
   sotto titoli che corrono larghi il testo sembrava schiacciato in un angolo. */
.allergeni-intro p { max-width: 52em; }

/* ==========================================================================
   FOGLIE MESSE A MANO (dall'editor, js/foglie-editor.js)
   Le posizioni le ha scelte il cliente trascinando le foglie. Stessa logica
   delle classi in componenti.css: il lato è il bordo più vicino, l'altezza
   del centro è in % della sezione, lo scostamento in % della foglia.
   La grandezza è in proporzione alla finestra in cui sono state sistemate
   (min fra vw e svh): lì combacia al pixel, altrove cresce o cala insieme
   allo schermo e la composizione resta quella.
   ========================================================================== */

/* --- Home, desktop (finestra di lavoro 1280 x 551) --- */
@media (min-width: 768px) {
  .foglia[data-foglia="home-1"] {
    left: auto; right: 0; top: 14.9%; bottom: auto;
    --esce-x: 26.5%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -150deg;
  }
  .foglia[data-foglia="home-2"] {
    left: 0; right: auto; top: 105.3%; bottom: auto;
    --esce-x: -28.9%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 120deg;
  }
  .foglia[data-foglia="home-3"] {
    left: auto; right: 0; top: 100.3%; bottom: auto;
    --esce-x: 15.7%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -110deg;
  }
  .foglia[data-foglia="home-4"] {
    left: 0; right: auto; top: -9.7%; bottom: auto;
    --esce-x: -35.7%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 110deg;
  }
  .foglia[data-foglia="home-5"] {
    left: auto; right: 0; top: 99.7%; bottom: auto;
    --esce-x: 16.6%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -75deg;
  }
  .foglia[data-foglia="home-6"] {
    left: auto; right: 0; top: 95.7%; bottom: auto;
    --esce-x: 28.6%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -55deg;
  }
  .foglia[data-foglia="home-n3"] {
    left: 0; right: auto; top: -84.8%; bottom: auto;
    --esce-x: -18.2%; --esce-y: -50%;
    width: min(26.1vw, 60.6svh);
    --rotazione: 65deg;
    --velo: 0.5; display: block;
  }
}

/* --- Filosofia, desktop (finestra di lavoro 1280 x 551) --- */
/* Le due foglie non toccate con l'editor tengono su desktop la posizione
   che avevano scritta nella pagina; sul telefono decide il blocco più sotto. */
@media (min-width: 768px) {
  .foglia[data-foglia="filosofia-5"] { top: 10%; bottom: auto; }
  .foglia[data-foglia="filosofia-6"] { bottom: -10%; }
}
@media (min-width: 768px) {
  .foglia[data-foglia="filosofia-2"] {
    left: 0; right: auto; top: 110.4%; bottom: auto;
    --esce-x: -20.7%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 125deg;
  }
  .foglia[data-foglia="filosofia-4"] {
    left: 0; right: auto; top: 96.7%; bottom: auto;
    --esce-x: -19.4%; --esce-y: -50%;
    width: min(26.2vw, 60.8svh);
    --rotazione: 100deg;
  }
  .foglia[data-foglia="filosofia-7"] {
    left: auto; right: 0; top: 94.5%; bottom: auto;
    --esce-x: 23.3%; --esce-y: -50%;
    width: min(24.8vw, 57.5svh);
    --rotazione: -100deg;
  }
}

/* --- Prodotti, desktop (finestra di lavoro 1280 x 551) --- */
@media (min-width: 768px) {
  .foglia[data-foglia="prodotti-1"] {
    left: auto; right: 0; top: 7%; bottom: auto;
    --esce-x: 37.5%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -150deg;
  }
  .foglia[data-foglia="prodotti-2"] {
    left: 0; right: auto; top: 113.7%; bottom: auto;
    --esce-x: -20.4%; --esce-y: -50%;
    width: min(26.3vw, 61svh);
    --rotazione: 110deg;
  }
  .foglia[data-foglia="prodotti-3"] {
    left: auto; right: 0; top: 76.5%; bottom: auto;
    --esce-x: 27.3%; --esce-y: -50%;
    width: min(22.6vw, 52.5svh);
    --rotazione: -130deg;
  }
  .foglia[data-foglia="prodotti-4"] {
    left: 0; right: auto; top: 95.8%; bottom: auto;
    --esce-x: -22%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 100deg;
  }
  .foglia[data-foglia="prodotti-5"] {
    left: auto; right: 0; top: 333.7%; bottom: auto;
    --esce-x: 15.6%; --esce-y: -50%;
    width: min(26.2vw, 60.8svh);
    --rotazione: 245deg; --specchio: -1;
  }
  .foglia[data-foglia="prodotti-6"] {
    left: auto; right: 0; top: 103.3%; bottom: auto;
    --esce-x: 14%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -75deg;
  }
  .foglia[data-foglia="prodotti-7"] {
    left: 0; right: auto; top: 92.6%; bottom: auto;
    --esce-x: -26%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 45deg;
  }
}

/* --- Matrimoni, desktop (finestra di lavoro 1280 x 551) --- */
@media (min-width: 768px) {
  .foglia[data-foglia="matrimoni-1"] {
    left: auto; right: 0; top: 26.1%; bottom: auto;
    --esce-x: 22.4%; --esce-y: -50%;
    width: min(27.6vw, 64.1svh);
    --rotazione: -140deg;
  }
  .foglia[data-foglia="matrimoni-2"] {
    left: 0; right: auto; top: 114.9%; bottom: auto;
    --esce-x: -19.6%; --esce-y: -50%;
    width: min(23.8vw, 55.2svh);
    --rotazione: 75deg;
  }
  .foglia[data-foglia="matrimoni-3"] {
    left: 0; right: auto; top: 221%; bottom: auto;
    --esce-x: -23.2%; --esce-y: -50%;
    width: min(23.6vw, 54.8svh);
    --rotazione: 110deg;
  }
  .foglia[data-foglia="matrimoni-4"] {
    left: auto; right: 0; top: 111.3%; bottom: auto;
    --esce-x: 19.9%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -55deg;
  }
  .foglia[data-foglia="matrimoni-5"] {
    left: auto; right: 0; top: 148.1%; bottom: auto;
    --esce-x: 25.1%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -140deg;
  }
  .foglia[data-foglia="matrimoni-6"] {
    left: 0; right: auto; top: 144.7%; bottom: auto;
    --esce-x: -16.8%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 90deg;
    display: none;
  }
}

/* --- Prenotazioni, desktop (finestra di lavoro 1280 x 551) --- */
@media (min-width: 768px) {
  .foglia[data-foglia="prenotazioni-1"] {
    left: 0; right: auto; top: 26.8%; bottom: auto;
    --esce-x: -32.6%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 110deg;
  }
  .foglia[data-foglia="prenotazioni-2"] {
    left: auto; right: 0; top: 0.1%; bottom: auto;
    --esce-x: 25.3%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: -140deg;
  }
  .foglia[data-foglia="prenotazioni-3"] {
    left: auto; right: 0; top: 97.6%; bottom: auto;
    --esce-x: 19.7%; --esce-y: -50%;
    width: min(25vw, 58.1svh);
    --rotazione: 245deg; --specchio: -1;
  }
  .foglia[data-foglia="prenotazioni-n1"] {
    left: 0; right: auto; top: 31.4%; bottom: auto;
    --esce-x: -22.8%; --esce-y: -50%;
    width: min(26.4vw, 61.3svh);
    --rotazione: 125deg;
    --velo: 0.5; display: block;
  }
}

/* --- Allergeni, desktop (finestra di lavoro 1280 x 551) --- */
@media (min-width: 768px) {
  .foglia[data-foglia="allergeni-n1"] {
    left: auto; right: 0; top: 0%; bottom: auto;
    --esce-x: 15.4%; --esce-y: -50%;
    width: min(28vw, 65.2svh);
    --rotazione: 235deg;
    --velo: 0.45; display: block;
  }
  .foglia[data-foglia="allergeni-n2"] {
    left: 0; right: auto; top: 143.8%; bottom: auto;
    --esce-x: -25.7%; --esce-y: -50%;
    width: min(32.7vw, 76svh);
    --rotazione: 110deg;
    --velo: 0.5; display: block;
  }
  .foglia[data-foglia="allergeni-n5"] {
    left: auto; right: 0; top: -0.5%; bottom: auto;
    --esce-x: 19%; --esce-y: -50%;
    width: min(26.2vw, 60.8svh);
    --rotazione: 240deg; --specchio: -1;
    --velo: 0.5; display: block;
  }
}

/* --- Listino torte, desktop (finestra di lavoro 1280 x 551) --- */
@media (min-width: 768px) {
  .foglia[data-foglia="listino-1"] {
    left: auto; right: 0; top: -1.9%; bottom: auto;
    --esce-x: 21.9%; --esce-y: -50%;
    width: min(26.3vw, 61svh);
    --rotazione: -135deg;
  }
  .foglia[data-foglia="listino-2"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -15%; --esce-y: -50%;
    width: min(23.7vw, 55svh);
    --rotazione: 105deg;
  }
  .foglia[data-foglia="listino-n2"] {
    left: auto; right: 0; top: -2%; bottom: auto;
    --esce-x: 24.8%; --esce-y: -50%;
    width: min(30.9vw, 71.7svh);
    --rotazione: 225deg; --specchio: -1;
    --velo: 0.5; display: block;
  }
}

/* ==========================================================================
   FOGLIE SUL TELEFONO (sotto i 768px)
   Lo stesso ritmo del desktop: una foglia per ogni inizio di sezione, a lati
   alternati partendo da destra, mai due alla stessa altezza. Ogni attacco
   prende la foglia che su desktop gli sta più vicina (stesso mazzo; se cambia
   lato è specchiata); le altre sul telefono non ci sono.

   La posizione è agganciata al bordo della sezione (top: 0 o 100%) e lo
   scostamento è in % della foglia: così resta uguale su ogni telefono, invece
   di scivolare come le percentuali dell'altezza della sezione. La prima della
   pagina parte appena sotto l'eroe (o sotto il menu). Ognuna esce dal bordo
   del 22% (di più se il gambo è ripido, perché la punta resti fuori) e ha il
   gambo inclinato verso l'esterno; l'altezza esatta è quella,
   vicina al bordo della sezione, che meno copre testi e foto a 360, 390 e
   430px. Grandezza e trasparenza sono in componenti.css.
   ========================================================================== */
@media (max-width: 767px) {
  /* --- Home --- */
  .foglia[data-foglia="home-1"] {
    left: auto; right: 0; top: 0; bottom: auto;
    --esce-x: 28%; --esce-y: 0%;
    --rotazione: -145deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="home-2"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -50%;
    --rotazione: 130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="home-3"] {
    left: auto; right: 0; top: 100%; bottom: auto;
    --esce-x: 22%; --esce-y: -50%;
    --rotazione: -130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="home-4"] {
    left: 0; right: auto; top: 0; bottom: auto;
    --esce-x: -22%; --esce-y: -50%;
    --rotazione: 130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="home-5"] {
    left: auto; right: 0; top: 100%; bottom: auto;
    --esce-x: 22%; --esce-y: -50%;
    --rotazione: -50deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="home-n3"] {
    left: 0; right: auto; top: 0; bottom: auto;
    --esce-x: -22%; --esce-y: -55%;
    --rotazione: 50deg; --specchio: 1; --velo: 0.5;
    display: block;
  }
  .foglia[data-foglia="home-6"] { display: none; }
  /* --- Filosofia --- */
  .foglia[data-foglia="filosofia-1"] {
    left: auto; right: 0; top: 0; bottom: auto;
    --esce-x: 25%; --esce-y: 0%;
    --rotazione: -140deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="filosofia-2"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -50%;
    --rotazione: 130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="filosofia-5"] {
    left: auto; right: 0; top: 0; bottom: auto;
    --esce-x: 25%; --esce-y: -60%;
    --rotazione: -140deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="filosofia-6"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -35%;
    --rotazione: 50deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="filosofia-7"] {
    left: auto; right: 0; top: 100%; bottom: auto;
    --esce-x: 22%; --esce-y: -50%;
    --rotazione: -130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="filosofia-3"],
  .foglia[data-foglia="filosofia-4"] { display: none; }
  /* --- Prodotti --- */
  .foglia[data-foglia="prodotti-1"] {
    left: auto; right: 0; top: 0; bottom: auto;
    --esce-x: 28%; --esce-y: 0%;
    --rotazione: -145deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="prodotti-2"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -65%;
    --rotazione: 130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="prodotti-3"] {
    left: auto; right: 0; top: 100%; bottom: auto;
    --esce-x: 22%; --esce-y: -25%;
    --rotazione: -130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="prodotti-6"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -60%;
    --rotazione: 50deg; --specchio: -1;
    display: block;
  }
  .foglia[data-foglia="prodotti-7"] {
    left: auto; right: 0; top: 100%; bottom: auto;
    --esce-x: 22%; --esce-y: -40%;
    --rotazione: -45deg; --specchio: -1;
    display: block;
  }
  .foglia[data-foglia="prodotti-4"],
  .foglia[data-foglia="prodotti-5"] { display: none; }
  /* --- Listino torte --- */
  .foglia[data-foglia="listino-1"] {
    left: auto; right: 0; top: 4.25rem; bottom: auto;
    --esce-x: 22%; --esce-y: 30%;
    --rotazione: -135deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="listino-2"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -55%;
    --rotazione: 130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="listino-n2"] {
    left: auto; right: 0; top: 0; bottom: auto;
    --esce-x: 22%; --esce-y: -50%;
    --rotazione: -135deg; --specchio: -1; --velo: 0.5;
    display: block;
  }
  /* --- Matrimoni --- */
  .foglia[data-foglia="matrimoni-1"] {
    left: auto; right: 0; top: 0; bottom: auto;
    --esce-x: 25%; --esce-y: 0%;
    --rotazione: -140deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="matrimoni-2"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -60%;
    --rotazione: 50deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="matrimoni-4"] {
    left: auto; right: 0; top: 100%; bottom: auto;
    --esce-x: 22%; --esce-y: -50%;
    --rotazione: -50deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="matrimoni-5"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -25%; --esce-y: -85%;
    --rotazione: 140deg; --specchio: -1;
    display: block;
  }
  .foglia[data-foglia="matrimoni-3"],
  .foglia[data-foglia="matrimoni-6"] { display: none; }
  /* --- Prenotazioni --- */
  .foglia[data-foglia="prenotazioni-1"] {
    left: auto; right: 0; top: 4.25rem; bottom: auto;
    --esce-x: 22%; --esce-y: 25%;
    --rotazione: -130deg; --specchio: -1;
    display: block;
  }
  .foglia[data-foglia="prenotazioni-3"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -55%;
    --rotazione: 130deg; --specchio: 1;
    display: block;
  }
  .foglia[data-foglia="prenotazioni-n1"],
  .foglia[data-foglia="prenotazioni-2"] { display: none; }
  /* --- Allergeni --- */
  .foglia[data-foglia="allergeni-n1"] {
    left: auto; right: 0; top: 4.25rem; bottom: auto;
    --esce-x: 22%; --esce-y: 0%;
    --rotazione: -130deg; --specchio: 1; --velo: 0.45;
    display: block;
  }
  .foglia[data-foglia="allergeni-n2"] {
    left: 0; right: auto; top: 100%; bottom: auto;
    --esce-x: -22%; --esce-y: -55%;
    --rotazione: 130deg; --specchio: 1; --velo: 0.5;
    display: block;
  }
  .foglia[data-foglia="allergeni-n5"] {
    left: auto; right: 0; top: 0; bottom: auto;
    --esce-x: 22%; --esce-y: -50%;
    --rotazione: -130deg; --specchio: -1; --velo: 0.5;
    display: block;
  }
}