/* ============================================================
   ORIGINE — foglio di stile
   Costruito dalla tavola `design/fase1-origine-2026-09-01.pdf` (1440 × 8584).
   Ogni misura qui dentro è STATA MISURATA sulla tavola, non stimata:
   i corpi tipografici sono ricavati dalle altezze delle maiuscole
   divise per il cap-height dichiarato dentro ogni font.
   ============================================================ */

/* ---- 1 · La scala ------------------------------------------
   Tutto è in rem. 1rem = 16px quando la finestra è larga 1440,
   cioè quanto la tavola. Sotto i 1440 la pagina rimpicciolisce
   in proporzione — le proporzioni del disegno restano identiche.
   Sopra i 1440 si ferma, così su uno schermo grande non gonfia. */
html { font-size: calc(100vw / 90); }
@media (min-width: 1440px) { html { font-size: 16px; } }
@media (max-width: 820px)  { html { font-size: 16px; } }

/* ---- 2 · I caratteri ---------------------------------------
   ⚠️ Sono i file desktop (.otf/.ttf). Per un sito pubblico serve
   la licenza WEBFONT, che è un'altra cosa. Vedi LEGGIMI.md. */
@font-face { font-family: "Botanical"; src: url("font/origine_font.otf") format("opentype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Begum"; src: url("font/Begum-Regular.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Begum"; src: url("font/Begum-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Begum"; src: url("font/Begum-Italic.otf")   format("opentype"); font-weight: 400; font-style: italic;  font-display: swap; }
/* 🔴 `origine_mono.ttf` è un font VARIABILE: dentro non ha un disegno solo,
   ne ha sei — tre dritti e tre obliqui (Condensed/Regular/Extended, per due).
   Senza `font-style: normal` e `font-stretch: normal` qui, il browser non sa
   quale gli stiamo dichiarando ed è libero di pescare quello inclinato.
   Sul computer non succedeva; su iPhone sì. Trovato l'1/09/2026. */
@font-face { font-family: "Kotoheim"; src: url("font/origine_mono.ttf") format("truetype"); font-weight: 500; font-style: normal; font-stretch: normal; font-display: swap; }
@font-face { font-family: "Bickley"; src: url("font/origine_script.otf") format("opentype"); font-weight: 400; font-display: swap; }

/* ---- 3 · La tavolozza --------------------------------------
   Campionata pixel per pixel dalla tavola. Fra parentesi il
   campione del brand book, dove non coincide. */
:root {
  --crema:  #F6EFDF;   /* brand: #f5efe1 */
  --verde:  #2A3D31;   /* brand: #2e3d32 */
  --salvia: #759477;   /* brand: #7b9379 */
  --rosa:   #C8296F;   /* brand: #b8396e — nella tavola è più acceso */
  --terra:  #6B5142;   /* terra tostata, il marrone del brand */
  --campo:  #B9B9AB;   /* fondo dei campi del modulo */
  --margine: 5rem;     /* 80px — vale a sinistra e a destra */
  --colonna: 80rem;    /* 1280px — la larghezza utile */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--verde);
  font-family: "Begum", Georgia, serif;
  /* Misurato sulla tavola: passo delle righe 24 px, stacco fra
     capoversi 48 px, glifi alti 20-21 px con la discendente e 15-16
     senza. Con Begum quei numeri danno 20 px di corpo su 24 di
     interlinea — stretta, ma è la sua: i capoversi sono corti e lo
     stacco è largo, quindi regge. */
  font-size: 1.25rem;        /* 20px */
  line-height: 1.5rem;       /* 24px */
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.dentro { width: var(--colonna); margin: 0 auto; }

/* Etichette in monospazio: nav, bottoni, campi, footer */
.mono { font-family: "Kotoheim", ui-monospace, monospace; font-weight: 500; letter-spacing: .06em; }

/* I due titoli giganti, CATERING e DELIVERY. Sulla tavola la maiuscola
   era alta 138 px, cioè 160 di corpo; ridotti tutti e due a 120 —
   scelta di Oscar — e il corpo sta QUI, una volta sola, così non
   possono più essere diversi fra loro. */
.titolone {
  font-family: "Botanical", Impact, sans-serif;
  font-weight: 800;
  font-size: 7.5rem;
  line-height: .86;
  text-align: center;
  margin: 0;
}

/* ============================================================
   4 · LA BARRA
   ============================================================ */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem var(--margine);
  transition: background-color .35s ease, padding .35s ease;
}
.barra .marchio { width: 11.28rem; display: block; }   /* 150 → 180 px */
.barra .marchio .segno { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- Il logo al passaggio del mouse ------------------------
   Due cose piccole, non una grande:
   ① il fiocco fa un giro intero. È un'animazione e non una
      transizione: così quando togli il mouse NON torna indietro
      girando al contrario — il giro si compie e finisce.
   ② tutto il marchio schiarisce al bianco burro, con la stessa
      durata e la stessa curva delle voci accanto — la barra parla
      una lingua sola.
   Cliccandolo si torna alla hero, con lo scorrimento morbido.
   `transform-box: fill-box` fa ruotare il fiocco attorno a sé stesso
   e non attorno all'origine dell'SVG. */
.barra .marchio { transition: color .38s cubic-bezier(.22,.61,.36,1); }
.barra .marchio .fiocco { transform-box: fill-box; transform-origin: center center; }
@keyframes giraTondo { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.barra .marchio:hover .fiocco { animation: giraTondo .9s cubic-bezier(.5,0,.3,1); }

.barra.sul-video .marchio:hover { color: var(--salvia); }
.barra.attaccata .marchio:hover { color: var(--passaggio, var(--verde)); }
.barra .voci {
  display: flex; gap: 2.75rem;      /* 44 px fra una voce e l'altra */
  margin-left: auto;                /* tutte a destra, addossate al tasto */
  margin-right: 2.75rem;            /* e 44 px anche prima del tasto: stessa misura */
}
.barra .voci a {
  position: relative; font-size: .875rem; text-decoration: none; letter-spacing: .12em;
  transition: color .3s ease;
}
/* La sottolineatura non compare: si DISEGNA da sinistra a destra.
   Sta su currentColor, quindi è sempre del colore della voce. */
.barra .voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.125rem; height: 1px;   /* 2 px sotto la parola */
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.barra .voci a:hover::after { transform: scaleX(1); }
/* Sopra il video la voce schiarisce fino al bianco burro.
   Da scorso il fondo È bianco burro: lì schiarire la farebbe sparire,
   quindi scurisce al verde e la sottolineatura resta. */
.barra.sul-video  .voci a:hover { color: var(--salvia); }
/* 🔑 Il colore del passaggio del mouse non è fisso: lo decide moto.js
   guardando quanto è scuro il fondo della sezione sotto la barra.
   Sul crema e sul salvia serve il verde bosco; sul verde bosco il
   verde bosco sparirebbe, e allora serve il salvia. */
.barra.attaccata  .voci a:hover { color: var(--passaggio, var(--verde)); }
/* 🔑 LA PILLOLA. Definita una volta sola e usata in tutti i punti in
   cui compare `ORDINA ORA`: nella barra e sotto le box del Delivery.
   Scritta così non possono divergere. */
.pillola {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rosa); color: var(--crema);
  font-family: "Kotoheim", ui-monospace, monospace; font-weight: 500;
  font-size: .8125rem; letter-spacing: .12em;
  /* 🔑 Larghezza minima uguale per tutte: ORDINA ORA nella barra e
     TORNA ALL'ORIGINE nel footer stanno tutti e due nell'angolo in
     alto e in basso a destra, e con larghezze diverse combaciavano
     solo a destra. Con la stessa misura combaciano da due parti. */
  min-width: 12.875rem;
  padding: .75rem 1.25rem; text-decoration: none;
  transition: background-color .25s ease;
}
.pillola:hover { background: var(--salvia); }
/* La pillola spenta: stessa faccia, ma non porta da nessuna parte, e
   passandoci sopra CAMBIA SCRITTA — ORDINA ORA lascia il posto a
   COMING SOON. Le due scritte stanno nella stessa cella della griglia:
   il tasto prende la larghezza della più lunga e non si muove più. */
.pillola.terra { background: var(--terra); }
.pillola.spento { cursor: default; display: inline-grid; grid-template-areas: "s"; place-items: center; }
.pillola.spento > span { grid-area: s; transition: opacity .26s ease; }
.pillola.spento .presto { opacity: 0; }
.pillola.spento:hover .ora,
.pillola.spento.mostra .ora { opacity: 0; }
.pillola.spento:hover .presto,
.pillola.spento.mostra .presto { opacity: 1; }

/* Marchio e voci restano salvia in tutti e due gli stati: sopra il
   video e sul fondo bianco burro. Il logo è una maschera riempita con
   currentColor, quindi segue da solo. */
.barra.sul-video { color: var(--crema); }
.barra.attaccata {
  background: var(--crema); color: var(--salvia);
  padding-top: 1rem; padding-bottom: 1rem;
}


/* ============================================================
   5 · HERO
   Sulla tavola è alto 900px su 1440 di larghezza: una schermata piena.
   ============================================================ */
/* 🔑 Alta una schermata MENO 50 px: così sotto la foto si vede già
   una striscia di bianco burro, e si capisce che la pagina continua
   senza doverlo scrivere. È la stessa cosa che dice il filo, detta
   dal formato invece che da un elemento. */
.hero { position: relative; height: calc(100vh - 3.125rem); min-height: 34rem; overflow: hidden; }
.hero .sfondo, .hero video, .hero .sfondo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero .velo {
  /* Nero al 60%, uniforme: è la velatura che Oscar ha sopra la
     fotografia dentro Illustrator. Non è una sfumatura. */
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .65);
}
.hero .scritta {
  position: absolute; left: var(--margine); right: var(--margine); bottom: 0;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; text-align: center;      /* i tre elementi in colonna, centrati */
  padding-bottom: 1.5rem;
}
.hero .claim {
  font-family: "Bickley", cursive;
  font-size: 8.25rem; line-height: .9; color: var(--crema);   /* 120 → 132 px */
  margin: 0 0 4.5rem 0;
  text-shadow: 0 .1rem 2rem rgba(0,0,0,.18);
}
/* Scritta e filo in un blocco solo, gemello del TORNA ALL'ORIGINE in
   fondo alla pagina: là il filo sale e la scritta sta sotto, qui il
   filo scende e la scritta sta sopra. Al passaggio del mouse tutti e
   due schiariscono fino al bianco burro. */
.hero .scendi {
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  text-decoration: none; color: var(--crema);
}
.hero .scendi:hover { color: var(--salvia); }
.hero .scendi .mono { font-size: .9375rem; letter-spacing: .22em; }
.hero .filoGiu {
  position: relative; width: 1px; height: 3.25rem;
  /* la linea è BIANCA; quello che ci scorre dentro è salvia */
  background: rgba(246,239,223,.55); overflow: hidden; flex: none;
}
.hero .filoGiu::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%;
  background: var(--salvia);
  animation: filoScende 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes filoScende {
  0%   { transform: translateY(-100%); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(222%); opacity: 0; }
}

/* ------------------------------------------------------------
   5b · L'APERTURA — cosa succede quando il sito si apre
   Quattro tempi, in quest'ordine:
     0,00 s  la fotografia sfuma dentro  (domani: il video)
     0,45 s  la velatura la raggiunge
     0,60 s  la barra
     1,00 s  etichetta e filo
     1,45 s  🖋 il claim SI SCRIVE da sinistra a destra
   Il claim non appare in dissolvenza: viene scoperto da una lama
   che corre da sinistra a destra. Su un corsivo questo si legge
   come una mano che scrive.
   ------------------------------------------------------------ */
/* `apertura` è lo stato di partenza; `aperta` arriva da JS quando i
   font sono pronti e fa partire tutte le transizioni insieme. */
.apertura:not(.aperta) .hero .sfondo,
.apertura:not(.aperta) .hero .velo,
.apertura:not(.aperta) .barra,
.apertura:not(.aperta) .hero .scendi { opacity: 0; }
.apertura:not(.aperta) .hero .claim  { clip-path: inset(0 100% 0 0); }

.hero .sfondo    { transition: opacity 1.35s ease; }
.hero .velo      { transition: opacity 1.20s ease .45s; }
.barra           { transition: opacity .85s ease .60s, background-color .35s ease, padding .35s ease; }
.hero .scendi    { transition: opacity .85s ease 1.00s, color .3s ease; }
/* 🔑 L'apertura del claim è un'ANIMAZIONE, non una transizione.
   Con la transizione restava una regola appesa all'elemento: quando
   l'animazione del passaggio del mouse si staccava, quella ripartiva
   e si vedeva uno sfarfallio. Due animazioni distinte non si toccano. */
.aperta .hero .claim {
  animation: scriveDiNuovo 2s cubic-bezier(.36,.06,.28,1) 1.45s backwards;
}
.hero .claim { will-change: clip-path; }
/* il claim si stringe sul testo: così la lama parte dall'inchiostro
   e non dal bordo sinistro della pagina */
.hero .claim { display: inline-block; cursor: default; }

/* La lama che scrive. Sono DUE animazioni identiche con due nomi
   diversi, e il nome diverso è il punto:
   🔑 il browser riconosce le animazioni dal NOME. Con lo stesso nome
   su apertura e passaggio del mouse non ne fa ripartire una nuova —
   aggiorna quella già finita, e non si vede più niente. */
@keyframes scriveDiNuovo {   /* apertura: 2 s, dopo 1,45 s di attesa */
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes riscriveAlPassaggio {   /* mouse: 0,6 s, e parte SUBITO */
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* 🔑 La curva conta più della durata. Quella dell'apertura parte
   quasi ferma — su una presentazione va bene, al passaggio del mouse
   quel rallentamento iniziale si legge come RITARDO. Qui la lama
   scatta al primo istante e rallenta solo alla fine. */
.hero .claim:hover { animation: riscriveAlPassaggio .6s cubic-bezier(.08,.75,.25,1); }

/* ============================================================
   6 · STORIA — la sezione agganciata
   Due elementi e basta: un contenitore ALTO che dà lo scorrimento,
   e dentro uno schermo APPICCICATO che resta fermo. È tutto qui il
   trucco. Quanto dura la sezione si tara da una riga sola:
   --storia-lunghezza.
   ============================================================ */
/* Quanto scorrimento dura la sezione. Tarata perché finisca poco dopo
   l'ultima parola in corsivo: oltre quel punto sarebbe scroll a vuoto. */
:root { --storia-lunghezza: 240vh; }

.storia { position: relative; height: var(--storia-lunghezza); }
.storia .schermo { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.storia .colonna {
  position: absolute; left: var(--margine); width: 40rem;
  top: calc(50% + 1.25rem);   /* 20 px più giù: il titolo finiva sotto la barra */
  transform: translateY(-50%);
  transform-origin: left center;   /* se lo schermo è basso, moto.js la rimpicciolisce da qui */
}
.storia h2 {
  font-family: "Botanical", Impact, sans-serif; font-weight: 800;
  font-size: 3.5rem;     /* 56px — rimpicciolito perché il titolo resti
                            sempre dentro lo schermo agganciato */
  line-height: 1.06; margin: 0 0 1.6rem;
  text-transform: uppercase;
}
.storia p { margin: 0 0 1.5rem; max-width: 35rem; }

/* ogni lettera è un elemento suo: parte INVISIBILE e si accende quando
   tocca a lei. ⚠️ Lo spazio lo occupa comunque — il paragrafo non si
   sposta mentre si scrive, cambia solo quello che si vede. */
.storia .testo i { font-style: normal; opacity: 0; }
.storia .testo i.scritta { opacity: 1; }

.storia .terzine { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.8rem; }
.storia .terzine span {
  font-family: "Bickley", cursive; font-size: 3rem; line-height: 1;
  color: var(--rosa);
  clip-path: inset(0 100% 0 0);   /* la stessa lama della hero */
}

/* Il flusso di foto: occupa la metà destra dello schermo agganciato.
   Posizioni e misure sono volutamente irregolari — nessuna colonna,
   nessun allineamento, come i box di Ippo. Le percentuali sono sulla
   larghezza della finestra, quindi lo sparpagliamento resta lo stesso
   a ogni misura di schermo.
   🔑 Nessuna dissolvenza: le foto attraversano l'inquadratura. */
.storia .flusso { position: absolute; inset: 0; pointer-events: none; }
.storia .flusso figure {
  position: absolute; margin: 0;
  aspect-ratio: 1276 / 1786; overflow: hidden;
}
.storia .flusso img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le quattro posizioni finali. Si accavallano di proposito: chi arriva
   dopo passa davanti, e alla fine sono un mucchio composto, non una
   griglia.
   🔑 L'altezza è in `vh` e la larghezza viene dal rapporto: così su una
   finestra bassa le foto rimpiccioliscono invece di uscire dal fondo.
   Con le misure in rem l'ultima veniva tagliata. */
.storia .flusso figure { height: var(--h); width: auto; }
/* Il mucchio, tutto insieme, va da 14% a 86% dell'altezza dello
   schermo: 72vh centrati esatti, con 14vh d'aria sopra e sotto.
   I 14vh sopra servono anche a un'altra cosa — la barra è alta ~10vh,
   e la prima foto le finiva sotto. */
.storia .flusso .f1 { left: 50%; top: 14%; --h: 46vh; z-index: 1; }
.storia .flusso .f2 { left: 66%; top: 22%; --h: 42vh; z-index: 2; }
.storia .flusso .f3 { left: 56%; top: 44%; --h: 42vh; z-index: 3; }


/* ============================================================
   7 · CATERING — la seconda sezione agganciata
   Stesso impianto della Storia: un contenitore alto che dà lo
   scorrimento, e dentro uno schermo che resta fermo.
   ============================================================ */
:root { --catering-lunghezza: 260vh; }

/* Come i Contatti: la sezione si tinge SCORRENDO. Qui il fondo va da
   crema a verde SALVIA e titolo e sottotitolo passano a bianco burro.
   Stessa meccanica, stesse due variabili guidate da `--t`. */
.catering {
  position: relative; height: var(--catering-lunghezza);
  --t: 0;
  --fondo:      color-mix(in srgb, var(--salvia) calc(var(--t) * 100%), var(--crema));
  --inchiostro: color-mix(in srgb, var(--crema)  calc(var(--t) * 100%), var(--verde));
  background: var(--crema); color: var(--verde);
  background: var(--fondo); color: var(--inchiostro);
}
/* Il tasto a filo segue la stessa coppia, o sul salvia resterebbe scuro */
.catering .filo { border-color: var(--inchiostro); color: var(--inchiostro); }
.catering .filo:hover { background: var(--inchiostro); color: var(--fondo); }
.catering .schermo {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  /* 🔑 L'aria è DISTRIBUITA, non ammucchiata ai bordi. Prima titolo,
     schede e tasto erano incollati fra loro a 52 px e tutto lo spazio
     avanzato stava sopra e sotto: da lì la sensazione di stretto.
     Con `space-between` il titolo sta in alto, il tasto in basso, e
     quello che avanza si apre in mezzo — dove serve. */
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 7rem 0 6rem;
}
/* 🔴 SU UNA FINESTRA BASSA `space-between` NON HA PIÙ NIENTE DA
   DISTRIBUIRE, e il tasto si incolla alle schede.
   Misurato l'1/09/2026 su 1512 × 740, la finestra di Oscar: i tre
   blocchi sommano 529 px in 532 px utili — fra le schede e il tasto
   restava 1 px, fra il sottotitolo e le schede 2.
   Non si toccano né le schede né il tasto: si toglie aria AI BORDI,
   dove non serve, e `space-between` torna ad averne da mettere in
   mezzo. Sopra gli 880 px di altezza non cambia assolutamente nulla:
   il disegno approvato resta identico.
   ⚠️ `min-width: 821px` non è pignoleria: senza, questa regola
   prenderebbe anche il telefono (844 px di altezza) e gli
   azzererebbe i margini laterali. */
@media (min-width: 821px) and (max-height: 880px) {
  .catering .schermo { padding: 3.5rem 0 3rem; }
  .catering .occhiello { margin-top: 1.25rem; }
}
@media (min-width: 821px) and (max-height: 720px) {
  .catering .schermo { padding: 2.5rem 0 2rem; }
}

.catering .testa { text-align: center; }
.catering .occhiello { font-size: 1.125rem; margin: 1.75rem 0 0; }
.catering .occhiello i { font-style: normal; opacity: 0; }
.catering .occhiello i.scritta { opacity: 1; }

/* 🔑 IL MAZZO. Le tre schede stanno tutte nello stesso posto, una
   sopra l'altra. Sono pannelli pieni: chi arriva copre chi c'era,
   e non serve nessuna dissolvenza per farlo sparire. */
.mazzo { position: relative; width: var(--colonna); height: 20rem; flex: none; }
/* Le tre schede stanno nello stesso posto ma restano OGGETTI SINGOLI:
   ognuna sale per conto suo, intera, e passa davanti a quella prima.
   Niente riquadro che le taglia e niente ombra: con quelli diventavano
   un mazzo di fogli, e Oscar le vuole indipendenti. */
.mazzo .scheda { position: absolute; inset: 0; margin: 0; }

/* Un colore per scheda: salvia, bosco, terra tostata. Testo bianco
   burro su tutte e tre — scelta di Oscar.
   ⚠️ Sulla salvia il contrasto è 2,7 a 1: si legge, ma è la scheda da
   riguardare se un giorno il testo si allunga. Sulle altre due 9,7 e 6,7. */
/* 🔑 La prima scheda si ROVESCIA: era salvia su crema, ma adesso la
   sezione È salvia e sparirebbe dentro il proprio fondo. Diventa
   bianco burro con la scritta verde. */
.mazzo .scheda:nth-child(1) .testo { background: var(--crema); color: var(--verde); }
.mazzo .scheda:nth-child(2) .testo { background: var(--verde);  color: var(--crema); }
.mazzo .scheda:nth-child(3) .testo { background: var(--rosa);   color: var(--crema); }
.mazzo .scheda:nth-child(1) { z-index: 1; }
.mazzo .scheda:nth-child(2) { z-index: 2; }
.mazzo .scheda:nth-child(3) { z-index: 3; }

.scheda {
  display: grid; grid-template-columns: 30rem 50rem;   /* 480 + 800 = 1280 */
  height: 20rem;                                        /* 320px */
}
.scheda .foto { overflow: hidden; }
.scheda .foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda .testo {
  background: var(--verde); color: var(--crema);
  padding: 2.2rem 5.25rem 2.2rem 5rem;
}
.scheda h3 {
  font-family: "Botanical", Impact, sans-serif; font-weight: 800;
  font-size: 2.1875rem;    /* 35px */
  line-height: 1; margin: 0 0 .55rem; text-transform: uppercase;
}
/* Il sottotitolo di ogni scheda, in monospazio: la stessa lingua
   delle voci della barra e delle etichette del modulo. */
.scheda .sotto {
  font-family: "Kotoheim", ui-monospace, monospace; font-weight: 500;
  font-size: .875rem; letter-spacing: .12em; text-transform: lowercase;
  line-height: 1; margin: 0 0 1.15rem; opacity: .85;
}
.scheda p { margin: 0; }
/* La frase finale è staccata dal resto: è la chiamata all'azione di
   ogni scheda, e attaccata al corpo si perdeva dentro il paragrafo. */
.scheda .chiusa { margin-top: 1.2rem; font-weight: 600; }

/* Bottone a filo, quello con la cornice sottile */
.filo {
  display: inline-flex; align-items: center; justify-content: center;
  /* 🔑 Non più una larghezza fissa: il tasto si adatta alla scritta e
     tiene 40 px d'aria per lato. Con i 242 px fissi «COMPILA IL MODULO»
     usciva dalla cornice. I 242 restano come minimo, così le scritte
     corte non diventano bottoncini. */
  min-width: 15.125rem; height: 3.375rem; padding: 0 2.5rem;
  border: 1px solid var(--verde);
  font-size: .9375rem; letter-spacing: .40em; text-indent: .40em;
  text-decoration: none; background: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.filo:hover { background: var(--verde); color: var(--crema); }
.centrato { display: flex; justify-content: center; flex: none; }
/* niente margine sotto il tasto: la simmetria la fa il centraggio */

/* ============================================================
   8 · DELIVERY
   🔴 Le immagini di questa sezione NON SONO QUELLE DEFINITIVE.
   Le piramidi e le box vanno rifatte scontornate su fondo
   trasparente. La coreografia qui sotto è già quella giusta.
   ============================================================ */
.delivery { padding: 8.3125rem 0 12.5rem; }   /* 🎯 133 px: esattamente quelli che
                                                  restano sotto il tasto del
                                                  Catering, misurati */   /* 200 px sotto ORDINA ORA: un blocco
                                             pieno a tutta pagina ha bisogno di
                                             aria prima, o sembra che spinga */
.delivery .titolone { margin-bottom: 0; }
/* stesso carattere, stesso corpo e stesso stacco del sottotitolo di
   Catering: sono la stessa cosa in due sezioni diverse */
.delivery .occhiello { text-align: center; font-size: 1.125rem; margin: 1.75rem 0 0; }
.delivery .occhiello i { font-style: normal; opacity: 0; }
.delivery .occhiello i.scritta { opacity: 1; }

.piramidi { position: relative; height: 38.2rem; margin-top: 10.8rem; }
.piramidi figure { position: absolute; margin: 0; }
.piramidi figure img { width: 100%; height: 100%; object-fit: contain; }
/* larghezza e altezza sono quelle misurate sulla tavola: le piramidi
   non hanno tutte lo stesso taglio, come le box di Ippo. */
.piramidi .p1 { left: 40.6rem; top: 0;       width: 16.9rem; height: 15.3rem; }
.piramidi .p2 { left: 21.6rem; top: 11.8rem; width: 22.2rem; height: 20.5rem; }
.piramidi .p3 { left: 46.1rem; top: 18.4rem; width: 22.1rem; height: 20.5rem; }

.scatole { position: relative; height: 55.2rem; margin-top: 14.3rem; }
.scatole figure { position: absolute; margin: 0; }
.scatole .b1 { left: 15.6rem; top: 0;       width: 31.6rem; height: 19.9rem; }
.scatole .b2 { left: 44.4rem; top: 9.2rem;  width: 31.6rem; height: 19.7rem; }
.scatole .b3 { left: 14.7rem; top: 25.8rem; width: 28.1rem; height: 21.3rem; }
.scatole .b4 { left: 41.9rem; top: 35.2rem; width: 28.1rem; height: 18.8rem; }
/* 🔴 `contain` serve SOLO finché le foto hanno il fondo nero del mockup.
   Con gli scontorni su fondo trasparente si può togliere. */
.scatole img { width: 100%; height: 100%; object-fit: contain; }

/* La fascia che scorre. Sulla tavola il testo esce dai due lati.
   Sta dentro Delivery, sotto le box: provata anche fra le due sezioni,
   ma lì funzionava meno. */
.fascia { overflow: hidden; margin: 8.8rem 0; }   /* 141 px sopra e sotto, uguali */
.fascia .nastro {
  display: flex; width: max-content;
  font-family: "Botanical", Impact, sans-serif; font-weight: 800;
  font-size: 12rem; line-height: .87; color: var(--salvia);
  white-space: nowrap;
}
.fascia .nastro span { padding-right: 4rem; }

.didascalia {
  width: var(--colonna); margin: 0 auto;   /* lo stacco lo dà la fascia sopra */
  /* 🔑 660 px, cioè esattamente la colonna del modulo dei Contatti qui
     sotto: le due partono dallo stesso x. Era 506 e tre righe finivano
     orfane con una parola sola a capo. */
  display: grid; grid-template-columns: 1fr 41.25rem;
}
.didascalia .destra p { margin: 0; }
/* Le due righe di ciascuna strada sono UN blocco: nessuno stacco fra
   loro, perché sono la stessa frase detta in due tempi. */
.didascalia .guida { font-weight: 600; }
/* Il perno fra le due strade. In corsivo, non in monospazio: è la
   voce che sul sito fa già da raccordo — il claim in copertina, i tre
   «di misura · di forma · di contrasto», i sottotitoli delle schede.
   In monospazio maiuscolo sembrava un'etichetta di sistema finita lì
   per sbaglio. */
.didascalia .oppure {
  /* ⚠️ 48 px e non 38: il Bickley ha l'occhio a 257 millesimi contro i
     508 del Begum, quindi a parità di corpo rende grande la metà. */
  font-family: "Bickley", cursive; font-size: 3rem; line-height: 1;
  color: var(--rosa); margin: 1.55rem 0 1.45rem 1.75rem;
}
.didascalia .ordinare { margin-top: 2rem; }

/* ============================================================
   9 · CONTATTI
   ============================================================ */
/* 🔑 La sezione si rovescia SCORRENDO: il fondo va da crema a verde
   bosco e il testo fa il cammino opposto, tutti e due guidati da `--t`
   che moto.js muove da 0 a 1 in funzione dello scroll. Risalendo si
   disfa da solo.
   ⚠️ Il testo DEVE cambiare insieme al fondo: se cambiasse solo il
   fondo, a metà strada sarebbe verde su verde e illeggibile.
   Le due righe piene qui sotto sono la rete: se il browser non sa
   fare `color-mix`, la sezione resta crema con il testo verde. */
.contatti {
  --t: 0;
  --fondo:      color-mix(in srgb, var(--verde) calc(var(--t) * 100%), var(--crema));
  --inchiostro: color-mix(in srgb, var(--crema) calc(var(--t) * 100%), var(--verde));
  background: var(--crema); color: var(--verde);
  background: var(--fondo); color: var(--inchiostro);
  /* Sta in UNA schermata: scorrendo, lo schermo diventa verde tutto
     insieme, e risalendo torna crema. Non è agganciata — scorre. */
  /* una schermata più 100 px sopra e 100 sotto */
  min-height: calc(100vh + 12.5rem);
  display: flex; flex-direction: column; justify-content: center;
  padding: 11.25rem 0 10.25rem;
}
/* Tutto il contenuto rimpicciolito del 10%: è l'unico modo di
   ridurre insieme corpi, campi e stacchi senza rifare venti misure
   una per una — e senza toccare il resto della pagina. */
.contatti .griglia { zoom: .9; }
.contatti .griglia {
  width: var(--colonna); margin: 0 auto;
  display: grid; grid-template-columns: 38.75rem 41.25rem;   /* 620 + 660 */
}
.contatti h2 {
  font-family: "Botanical", Impact, sans-serif; font-weight: 800;
  /* Su una riga sola: a 60 px «RACCONTACI IL TUO EVENTO» misura 848 px
     e la colonna ne ha 620, quindi andrebbe a capo lo stesso. 44 px è
     il corpo che ce la fa stare intera. */
  font-size: 2.75rem;    /* 44px */
  line-height: 1.13; margin: 0 0 1.85rem; text-transform: uppercase; white-space: nowrap;
}
.contatti .sinistra p { margin: 0 0 1.5rem; max-width: 28.5rem; }
.contatti .sinistra .filo { margin-top: 5.6rem; }
.contatti .sinistra .posta {
  /* `block` + `fit-content`: va a capo sotto il tasto come prima, ma la
     sottolineatura resta larga quanto l'indirizzo e non quanto la colonna */
  position: relative; display: block; width: fit-content; margin-top: 4.6rem;
  font-size: 1rem; text-decoration: none;
}
/* Solo la sottolineatura, che si disegna da sinistra a destra: il
   colore non cambia. È l'indirizzo, non un tasto — deve restare
   riconoscibile per quello che è. */
.contatti .sinistra .posta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.contatti .sinistra .posta:hover::after { transform: scaleX(1); }

/* Tutto quello che sta dentro segue le stesse due variabili: cornici,
   filetti, freccia delle tendine, spunta. Così non c'è un solo pezzo
   che resta indietro durante la dissolvenza. */
.contatti .filo { border-color: var(--inchiostro); color: var(--inchiostro); }
.contatti .filo:hover { background: var(--inchiostro); color: var(--fondo); }

form { display: grid; grid-template-columns: 20rem 20rem; gap: 3rem 1.3125rem; }
form .largo { grid-column: 1 / -1; }
.campo { position: relative; }
.campo input, .campo textarea {
  width: 100%; height: 3.25rem;       /* 52px */
  background: var(--campo); border: 0; border-radius: 0;
  padding: 0 1rem;
  font-family: "Kotoheim", monospace; font-size: .9375rem; color: var(--verde);
}
/* interlinea uguale all'altezza del campo: il testo cade esattamente
   a metà, invece di appoggiarsi in basso */
.campo input { line-height: 3.25rem; }
.campo textarea { height: 12rem; padding: 1rem; resize: vertical; line-height: 1.45; }
/* L'etichetta sta dove starà il testo, non sopra: così quando sparisce
   il testo prende esattamente il suo posto, senza salti. */
.campo label {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  font-family: "Kotoheim", monospace; font-size: .8125rem; letter-spacing: .08em;
  color: var(--verde); pointer-events: none; transition: opacity .2s ease;
}
/* nel riquadro grande l'etichetta è lunga tre righe: sta in alto, dove
   comincia anche il testo */
.campo textarea + label { top: 1rem; transform: none; right: 1rem; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
/* 🔑 Appena si tocca un campo il suo nome SPARISCE del tutto, non si
   smorza: mezzo nome dietro a quello che si sta scrivendo è peggio di
   nessun nome. Vale per tutti, riquadro grande compreso. */
.campo input:focus + label, .campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label, .campo textarea:not(:placeholder-shown) + label { opacity: 0; }

.tendina { position: relative; }
.tendina select {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--inchiostro);
  padding: .35rem 0; font-family: "Kotoheim", monospace; font-size: .875rem;
  letter-spacing: .06em; color: var(--inchiostro); appearance: none; cursor: pointer;
}
/* ⚠️ le voci del menu a tendina le disegna il sistema operativo, non
   noi: vanno riportate a scuro su chiaro o su Windows escono bianche
   su bianco. */
.tendina select option { color: var(--verde); background: var(--crema); }
.tendina::after {
  content: ""; position: absolute; right: .2rem; top: .55rem;
  width: .6rem; height: .6rem; border-right: 1px solid var(--inchiostro); border-bottom: 1px solid var(--inchiostro);
  transform: rotate(45deg); pointer-events: none;
}
.privacy { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin-top: -1.4rem; }
.privacy input { accent-color: var(--inchiostro); }
.privacy label { font-family: "Kotoheim", monospace; font-size: .875rem; }

/* 🔗 `verso` è il link dentro a un testo: nessuna sottolineatura da
   fermo, la si disegna al passaggio del mouse, e il colore non cambia.
   È la stessa regola dell'indirizzo mail qui sopra. */
.verso { position: relative; text-decoration: none; }
.verso::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.verso:hover::after { transform: scaleX(1); }
/* Il tasto d'invio è il più importante della pagina: più grande degli
   altri e con più aria ai lati. */
/* ⚠️ Il tasto è una casella della griglia del modulo, larga 320 px:
   per quanto padding gli si desse restava lì dentro. `justify-self`
   lo libera e gli fa prendere la larghezza che gli serve. */
form .filo {
  justify-self: start; width: auto;
  height: 4.75rem; padding: 0 5.5rem; font-size: 1rem;
}

.torna {
  /* attaccato alla sezione sopra, e ben staccato dalle colonne sotto */
  width: var(--colonna); margin: 0 auto 8.5rem;
  display: flex; justify-content: center;
}
.risali {
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  text-decoration: none; color: var(--salvia);
  transition: color .3s ease;
}
.risali:hover { color: var(--rosa); }
.risali .mono { font-size: .9375rem; letter-spacing: .22em; }

/* Il filo che sale. Stessa misura e stesso passo di quello che scende
   nella hero, al contrario: il segmento parte dal basso ed esce sopra. */
.risali .filoSu {
  position: relative; width: 1px; height: 3.25rem;
  background: rgba(117, 148, 119, .22); overflow: hidden;
}
.risali .filoSu::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 45%;
  background: currentColor;
  animation: filoSale 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes filoSale {
  0%   { transform: translateY(100%);  opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(-222%); opacity: 0; }
}

/* ============================================================
   10 · FOOTER
   ============================================================ */
footer { padding: 3.25rem 0 1.5rem; }   /* la riga in fondo scende: 48 → 24 px dal bordo */
footer .colonne {
  width: var(--colonna); margin: 0 auto;
  /* tre colonne uguali che riempiono i 1280. Erano quattro: ORDINI è
     stata tolta l'1/09 perché conteneva una voce sola, e quella voce
     non porta da nessuna parte finché storekit non esiste. */
  display: grid; grid-template-columns: repeat(3, 1fr);
}
footer h4 { font-family: "Begum", serif; font-weight: 400; font-size: 1.625rem; margin: 0 0 1.9rem; text-transform: uppercase; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 1.35rem; }
/* Nel footer niente sottolineature: solo il colore che passa a fucsia.
   La sottolineatura che si disegna resta la lingua della BARRA, e tenerla
   solo lì la rende un gesto di quella e non un vezzo ripetuto ovunque. */
footer li a, footer .fondo a {
  text-decoration: none;
  transition: color .3s ease;
}
footer li a { font-family: "Kotoheim", monospace; font-size: 1rem; }
/* Le voci in maiuscolo, come nella barra — ma NON la mail e il numero:
   un indirizzo scritto tutto maiuscolo si legge peggio e si copia male. */
footer li a:not([href^="mailto"]):not([href^="tel"]) { text-transform: uppercase; letter-spacing: .1em; }
footer li a:hover, footer .fondo a:hover { color: var(--rosa); }
footer .social { display: flex; gap: 1.1rem; }
footer .social a { transition: color .3s ease; }
footer .social a:hover { color: var(--rosa); }   /* le icone sono in currentColor: seguono */
footer .social a svg { width: 2.4rem; height: 2.4rem; }
footer .fondo {
  width: var(--colonna); margin: 7.5rem auto 0;   /* erano 272 px: un buco */
  /* appoggiati in basso, non centrati fra loro: il fiocco è alto 77 px
     e la riga di testo 13, e centrandoli il testo galleggiava a metà */
  display: flex; align-items: flex-end; justify-content: space-between;
}
footer .fondo .fiore {
  display: block; width: 5.6rem; aspect-ratio: 148.94 / 127.77;
  background: var(--verde);
  -webkit-mask: url("img/origine_icon.svg") no-repeat center / contain;
          mask: url("img/origine_icon.svg") no-repeat center / contain;
}
/* Gira di un giro intero, come il fiocco della barra: è un'animazione
   e non una transizione, così togliendo il mouse non torna indietro
   girando al contrario — il giro si compie e finisce. */
footer .fondo .fiore:hover { animation: giraTondo .9s cubic-bezier(.5,0,.3,1); }
footer .fondo .righe { display: flex; gap: 3rem; font-family: "Kotoheim", monospace; font-size: .8125rem; }
footer .fondo a { text-decoration: none; }

/* ============================================================
   11 · IL MOVIMENTO
   Qui c'è solo lo STATO DI PARTENZA. Tutto il resto lo calcola
   moto.js a ogni fotogramma, in funzione della posizione dello
   scroll — non con una durata in secondi. Da lì viene, gratis,
   il fatto che tornando indietro si disfa al contrario.

   ⚠️ Valgono solo dentro `.moto`, che aggiunge JavaScript: se
   JavaScript non parte, la pagina resta tutta visibile invece
   di restare bianca.
   ============================================================ */
.moto .sale,
.moto .sube,
.moto .daSinistra { opacity: 0; }
.moto .scrive     { clip-path: inset(0 100% 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* niente apertura: la pagina è già lì */
  .apertura:not(.aperta) .hero .sfondo, .apertura:not(.aperta) .hero .velo,
  .apertura:not(.aperta) .barra, .apertura:not(.aperta) .hero .scendi { opacity: 1; }
  .apertura:not(.aperta) .hero .claim { clip-path: none; }
  .barra .marchio:hover .fiocco, footer .fondo .fiore:hover { animation: none; }
  .hero .claim:hover, .aperta .hero .claim { animation: none; }
  .scambia > span { transition: none; }
  .hero .sfondo, .hero .velo, .barra, .hero .scendi, .hero .claim { transition: none; }
  /* i due fili restano, fermi: dicono la stessa cosa senza muoversi */
  .hero .filoGiu::after, .risali .filoSu::after { animation: none; height: 100%; opacity: .55; }
  .sale, .daSinistra { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fascia .nastro { animation: none !important; }
}

/* ============================================================
   12 · TELEFONO
   🔑 LA REGOLA: sul telefono il sito fa LE STESSE COSE del desktop —
   le sezioni si agganciano, il testo si scrive, le foto si impilano,
   le schede si danno il cambio. Cambiano solo le misure e la
   disposizione: dove il desktop mette due colonne affiancate, qui
   c'è una colonna sopra e una sotto.

   ⚠️ Gli `!important` non sono pigrizia: moto.js scrive gli
   spostamenti sull'elemento, e da CSS quello si batte solo così.

   🔴 La tavola per il telefono non esiste: è un adattamento, e va
   guardato su un telefono vero prima di pubblicare.
   ============================================================ */
@media (max-width: 820px) {
  :root {
    --margine: 1.5rem; --colonna: 100%;
    --storia-lunghezza: 300vh; --catering-lunghezza: 300vh;
  }

  /* ---- barra ---- */
  .barra { padding: 1rem var(--margine); }
  .barra .voci { display: none; }
  .barra .marchio { width: 8.5rem; }
  .pillola { min-width: 0; font-size: .75rem; padding: .65rem 1rem; }

  /* 🔑 SUL TELEFONO LA BARRA C'È SUBITO, e non aspetta l'apertura.
     Sul computer entra insieme al resto: la pagina si apre quando i
     caratteri sono pronti, ed è un momento solo. Sul telefono quel
     momento è più lungo — sei file di font su rete mobile — e chi
     arriva vede una foto senza logo e senza il tasto ORDINA ORA.
     L'apertura del claim resta com'è: qui si scopre solo la barra.
     Chiesto da Oscar, 1/09/2026. */
  .apertura:not(.aperta) .barra { opacity: 1; }

  /* ---- il monospazio deve stare DRITTO ----
     La causa vera sta nella @font-face in cima al foglio, che non
     dichiarava lo stile. Questa è la cintura oltre alle bretelle:
     niente corsivo, niente inclinazione sintetizzata dal browser, e
     l'asse `slnt` del font variabile inchiodato a zero. */
  .mono, .scheda .sotto, .filo,
  footer li a, footer .fondo .righe,
  .campo label, .tendina select, .privacy label,
  form input, form textarea, form button {
    font-style: normal;
    font-synthesis: none;
    font-variation-settings: "slnt" 0;
  }

  /* ---- hero ---- */
  .hero { height: calc(100vh - 3.125rem); }
  .hero .claim { font-size: 3.4rem; margin: 0 0 1.6rem; }
  .hero .scritta { padding-bottom: 2.6rem; }

  /* ================= STORIA — resta agganciata =================
     Sul desktop: testo a sinistra, mucchio di foto a destra.
     Qui: testo in alto, mucchio in basso. Stesso meccanismo. */
  .storia .schermo { padding: 0; }
  .storia .colonna {
    left: var(--margine); right: var(--margine); width: auto;
    top: 4.5rem; transform: none !important;
  }

  /* 🔴 IL TESTO QUI È PIÙ PICCOLO CHE SUL COMPUTER, ed è una misura,
     non un gusto. Sul telefono la colonna non si rimpicciolisce da
     sola (`transform: none` qui sopra annulla la scala di moto.js),
     quindi ai corpi di prima il testo era alto 589 px su 844: gli
     ultimi due capoversi e le tre parole in Bickley finivano sotto
     il bordo dello schermo agganciato e NON SI VEDEVANO MAI.
     Con questi corpi sta in ~510 px e resta tutto dentro, e sotto
     avanza la fascia in cui sale il mucchio. */
  .storia h2 { font-size: 1.9rem; line-height: 1.05; margin-bottom: .9rem; }
  .storia p { max-width: none; font-size: .875rem; line-height: 1.25rem; margin-bottom: 1.1rem; }
  .storia .terzine { margin-top: .8rem; gap: .1rem; }
  .storia .terzine span { font-size: 1.7rem; }

  /* 🔑 IL MUCCHIO STA NELLA FASCIA BASSA, sotto il testo — non
     addosso. Sul computer testo e foto sono affiancati e possono
     accavallarsi senza coprirsi; qui sono uno sopra l'altro, e una
     foto grande finiva esattamente sull'ultimo capoverso.
     Le tre restano irregolari e sovrapposte fra loro: è il collage,
     solo più piccolo. */
  .storia .flusso { transform: none !important; }
  .storia .flusso .f1 { left:  5%; top: 69%; --h: 21vh; }
  .storia .flusso .f2 { left: 37%; top: 66%; --h: 24vh; }
  .storia .flusso .f3 { left: 66%; top: 71%; --h: 20vh; }

  /* ================= CATERING — resta agganciata ================= */
  .catering .schermo { padding: 4.5rem var(--margine) 2rem; gap: 1.25rem; }
  .catering .titolone { font-size: 3rem; }
  .catering .occhiello { font-size: .9375rem; margin-top: .9rem; }

  /* la scheda diventa foto sopra e testo sotto, e il mazzo si adatta */
  .mazzo { width: 100%; height: 23rem; }
  .scheda { grid-template-columns: 1fr; grid-template-rows: 10rem 1fr; height: 23rem; }
  .scheda .foto { height: 10rem; }
  .scheda .testo { padding: 1.2rem 1.3rem 1.4rem; }
  .scheda h3 { font-size: 1.5rem; margin-bottom: .3rem; }
  .scheda .sotto { font-size: .8125rem; margin-bottom: .7rem; }
  .scheda p { font-size: .875rem; line-height: 1.3rem; }

  /* 🔑 VIA LA RIGA FINALE IN BEGUM SEMIBOLD — solo qui.
     Sul computer è una riga sola larga 800 px e fa da chiamata
     all'azione. Sul telefono la colonna è larga 305: la stessa frase
     diventa tre righe in grassetto sotto un paragrafo di cinque, e
     la scheda «diventa lunga e pastosa» — parole di Oscar, 1/09/2026.
     Non è tolta dall'HTML: sul computer resta esattamente com'era. */
  .scheda .chiusa { display: none; }
  #cateringTasto { margin-bottom: 0; }

  /* ---- delivery ---- */
  .delivery { padding: 5rem 0 5rem; }
  .titolone { font-size: 3rem; }
  .delivery .occhiello { font-size: .9375rem; }
  /* 🔑 QUI STAVA IL TASTO ORDINA ORA TAGLIATO A METÀ, e la causa non
     era la barra. Le piramidi e le box ARRIVANO DA FUORI: moto.js
     sposta l'immagine dentro la figura, e in volo sporgeva fino a
     513 px su uno schermo largo 390. Un documento più largo dello
     schermo allarga anche il riquadro della barra, che è `fixed`
     su tutta la larghezza — e il tasto, spinto a destra, usciva.
     Misurato l'1/09/2026: `documentElement.scrollWidth` 513.
     Si taglia QUI, sul contenitore, non sulla figura: se si tagliasse
     sulla figura l'immagine non potrebbe più entrare da fuori.
     ⚠️ `clip` e non `hidden`: `hidden` farebbe di questi due un
     contenitore di scorrimento — è la stessa trappola che il
     commento in fondo a questo blocco racconta per `sticky`. */
  .piramidi, .scatole { overflow-x: clip; }

  .piramidi { height: 22rem; margin-top: 2.5rem; }
  .piramidi .p1 { left: 52%; top: 0;   width: 42%; height: auto; }
  .piramidi .p2 { left: 4%;  top: 24%; width: 54%; height: auto; }
  .piramidi .p3 { left: 44%; top: 48%; width: 54%; height: auto; }
  .scatole { height: 40rem; margin-top: 3rem; }
  .scatole .b1 { left: 2%;  top: 0;   width: 68%; height: auto; }
  .scatole .b2 { left: 30%; top: 22%; width: 68%; height: auto; }
  .scatole .b3 { left: 2%;  top: 47%; width: 64%; height: auto; }
  .scatole .b4 { left: 34%; top: 70%; width: 64%; height: auto; }
  .fascia { margin: 4rem 0; }
  .fascia .nastro { font-size: 4rem; }
  .didascalia { display: block; padding: 0 var(--margine); }
  .didascalia .oppure { font-size: 2.4rem; margin-left: 0; }

  /* ---- contatti: si tinge come sul desktop ---- */
  .contatti { min-height: 0; padding: 4.5rem 0; display: block; }
  .contatti .griglia { display: block; zoom: 1; padding: 0 var(--margine); }
  .contatti h2 { font-size: 2rem; white-space: normal; }
  .contatti .sinistra p { max-width: none; }
  .contatti .sinistra .filo { margin-top: 2rem; }
  .contatti .sinistra .posta { margin: 1.8rem 0 3rem; }
  form { grid-template-columns: 1fr; gap: 1.4rem; }
  form .largo { grid-column: auto; }
  .filo {
    min-width: 0; width: 100%; padding: 0 1rem;
    font-size: .8125rem; letter-spacing: .18em; text-indent: .18em;
  }
  form .filo { height: 4rem; justify-self: stretch; }

  /* ---- footer ---- */
  .torna { margin-bottom: 4rem; }
  footer { padding: 3rem 0 1.5rem; }
  footer .colonne { grid-template-columns: 1fr; gap: 2.75rem; padding: 0 var(--margine); }
  footer h4 { font-size: 1.3rem; margin-bottom: 1.2rem; }
  /* 🔑 IL FIORE E LE INFORMAZIONI, APPOGGIATI SULLA STESSA RIGA IN BASSO.
     Prima la riga «2026 ORIGINE CATERING SRLS — Tutti i diritti
     riservati» era troppo lunga per 390 px: andava a capo, e la
     seconda riga scavalcava il fiore. Tolta la coda (`.riservati`,
     nascosta qui sotto) quello che resta sta su una riga sola, e
     `align-items: flex-end` fa combaciare il suo piede con quello
     del fiore. Chiesto da Oscar, 1/09/2026. */
  footer .fondo { margin-top: 4rem; padding: 0 var(--margine); align-items: flex-end; gap: 1rem; }
  footer .fondo .righe { flex-direction: column; gap: .55rem; align-items: flex-end; text-align: right; }
  footer .fondo .riservati { display: none; }
  footer .fondo .fiore { width: 3.25rem; flex: none; }

  /* 🔴 QUI NON CI VA `overflow-x: hidden` su html/body.
     Rende il body un contenitore di scorrimento e da quel momento
     `position: sticky` non si attacca più allo schermo: le sezioni
     agganciate diventano schermate vuote. Verificato l'1/09/2026.
     Non serve comunque: la pagina è già larga esatti 390, e l'unica
     cosa che esce — il nastro del marquee — è già tagliata da `.fascia`. */
}