/* ==========================================================
   Il Gattaccio — Rosolina Mare
   CAMBIA I COLORI SOLO QUI. Palette pastello. Contrasti verificati (WCAG):
   carbone su salvia 8.7:1 · carbone su cappuccino 8.2:1 · carbone su crema 13.3:1
   bosco su crema 6.8:1 · crema su carbone 13.3:1
   ATTENZIONE: bosco su salvia è 4.47 e grigio su salvia 4.3 → su salvia usa sempre carbone.
   ========================================================== */
:root {
  --caffe: #3A1D08;       /* testo del motto nell'hero (circa 12:1 su sabbia) */
  --sabbia: #E9DCC3;      /* fondo dell'hero, dal logo illustrato */
  --salvia: #A9CDB9;      /* pastello verde: hero, momento, barra */
  --cappuccino: #D9B99B; /* pastello nocciola: prodotti, evidenze */
  --crema: #F6F0E6;       /* sfondo principale */
  --carbone: #2B2522;     /* testo, pulsanti, footer */
  --bosco: #2D5B4B;       /* verde scuro: solo testo su crema (link, parole in corsivo) */
  --grigio: #5E534B;      /* testo secondario su crema (6.6:1) */
  --terracotta: #A4502F;  /* dettaglio nel terrazzo; sfondo caldo (testo crema 5.4:1) */
  --fucsia: #94506F;      /* dal cuore del pattern dei gatti, molto smorzato (prima #B03A78): sfondo con testo crema (5,1:1) */
  --rosa: #F3C9B8;        /* rosa cipria, dai marchi della maglia: solo sfondo, testo carbone 10:1 */

  /* DM Sans per i testi, Yellowtail (corsivo script) solo per le parole in <em> dei titoli.
     Entrambi licenza OFL, file locali in fonts/ */
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script: "Yellowtail", "Segoe Script", cursive;

  --ease: cubic-bezier(.2, .7, .2, 1);   /* un solo easing per tutte le micro-interazioni */

  --gutter: 20px;
  --barra: 64px;
  --strip: 96px;          /* altezza fascia info in fondo all'hero (mobile) */
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Yellowtail";
  src: url("fonts/Yellowtail-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--barra); }
body {
  margin: 0;
  background: url("img/pattern-gatti-tenue.svg") center top / 760px auto repeat var(--crema);
  color: var(--carbone);
  font: 1.0625rem/1.55 var(--sans);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--cappuccino); color: var(--carbone); }

a { color: var(--bosco); text-underline-offset: 0.2em; }
a:hover { color: var(--carbone); }
:focus-visible { outline: 3px solid var(--carbone); outline-offset: 3px; }

/* Titoli: maiuscolo bold + una parola in corsivo (<em>) come tocco. */
h2 { font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; font-size: clamp(1.875rem, 7.5vw, 3.75rem); }
h2 em { font-family: var(--script); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.15em; line-height: 1; color: var(--accento, var(--bosco)); }
h3 { font-size: 1.5rem; line-height: 1.15; font-weight: 700; }

/* Accessibilità: link "Vai al contenuto" (visibile solo con la tastiera) e testo solo per lettori di schermo / motori di ricerca. */
.salta { position: absolute; left: var(--gutter); top: -100px; z-index: 20; padding: 12px 20px; background: var(--carbone); color: var(--crema); font-weight: 700; }
.salta:focus { top: 8px; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Micro-interazioni */
html { -webkit-tap-highlight-color: transparent; }
/* Su iPhone la pagina non deve mai allargarsi oltre lo schermo: niente scorrimento laterale. "clip" (non "hidden") lascia funzionare le carte che si impilano. */
html { overflow-x: hidden; }   /* riserva per i browser senza "clip" */
html, body { overflow-x: clip; max-width: 100%; }
/* Ogni blocco taglia da sé ciò che sporge: anche se un elemento esce, la pagina non si allarga. */
main > *, footer { overflow-x: clip; }
.luogo > *, .prodotto-testo, .passo-testo, .footer-colonne > * { min-width: 0; }
a, button, summary { touch-action: manipulation; }   /* niente ritardo sul tocco */
.btn-menu, .pulsante { transition: translate .2s var(--ease), scale .2s var(--ease), background-color .2s ease; }
.barra-logo { transition: rotate .3s var(--ease); }
@media (hover: hover) {
  .btn-menu:hover, .pulsante:hover { translate: 0 -2px; }
  a:hover > .barra-logo { rotate: -8deg; }
}
/* Tocco: il pulsante si "preme" subito, senza aspettare il caricamento della pagina. */
.btn-menu:active, .pulsante:active, .video-tasto:active { scale: .95; }
.faq-voce summary:active { background: rgba(245, 220, 150, .35); }

/* ---------- BARRA IN ALTO ---------- */
.barra {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0;
  height: var(--barra);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  background: var(--salvia);
  color: var(--carbone);
}
.barra-logo { display: block; height: calc(var(--barra) - 14px); width: auto; aspect-ratio: 540 / 522; }
.btn-menu {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  background: var(--carbone); color: var(--crema);
  font-weight: 700; text-decoration: none;
}
.btn-menu:hover { background: var(--cappuccino); color: var(--carbone); }

/* ---------- 1. HERO ---------- */

/* Hero: il logo illustrato al centro su fondo sabbia; la fascia info sta in fondo. */
/* Sfondo: pattern dei gatti (img/pattern-gatti.svg, da PATTERN-PROPOSTA3.pdf) con un alone sabbia dietro logo e motto, per leggerli bene. */
.hero {
  position: relative; height: 82vh; height: 82svh; min-height: 520px; overflow: hidden;
  background:
    linear-gradient(rgba(233, 220, 195, .45), rgba(233, 220, 195, .45)),
    radial-gradient(ellipse 85% 55% at 50% 46%, var(--sabbia) 30%, rgba(233, 220, 195, 0) 100%),
    url("img/pattern-gatti.svg") center top / 380px auto repeat var(--sabbia);
}
.hero-centro {
  position: absolute; z-index: 1;
  top: var(--barra); bottom: var(--strip); left: 0; right: 0;
  padding: 0 var(--gutter) 56px;   /* telefono: il blocco sta un po' più in alto del centro */
  display: grid; place-content: center; justify-items: center; gap: 30px;
}
.hero h1 { margin: 0; line-height: 0; }
.logo { width: min(78vw, 400px, calc((82svh - var(--barra) - var(--strip) - 230px) * 1.069)); height: auto; aspect-ratio: 513 / 480; }
/* Motto: su telefono sotto il logo, centrato. Minuscolo, tutto uguale. */
.hero-motto { justify-self: center; text-align: center; font-weight: 400; letter-spacing: -0.02em; font-size: clamp(2.25rem, 10.5vw, 3.5rem); line-height: 1; color: var(--caffe); }
.hero-motto span { display: block; }
@media (min-width: 360px) { .hero-motto span { white-space: nowrap; } }

.hero-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  min-height: var(--strip);
  padding: 14px var(--gutter);
  background: var(--salvia);
  color: var(--carbone);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  font-size: 1rem;
}
.hero-info strong { font-weight: 800; }
.hero-info a { color: var(--carbone); display: inline-block; padding-block: 8px; font-weight: 700; }
.hero-info a:hover { color: var(--bosco); }
.premio { font-weight: 500; }


/* Ritaglio: contenitore che taglia la foto. */
.ritaglio { overflow: hidden; }
.ritaglio img { width: 100%; height: 100%; object-fit: cover; }


/* ---------- 2b. PASSO DOPO PASSO ---------- */
/* Carte che si impilano: ogni passo resta fermo in alto e il successivo gli scivola sopra. */
/* Sfondo col pattern dei gatti dell'hero, più piccolo e schiarito da un velo crema: i gatti respirano e il titolo si legge. */
.passi { background: transparent; padding: 96px var(--gutter) 96px; --accento: var(--carbone); }
.passi h2 { margin-bottom: 40px; color: var(--carbone); font-size: clamp(2.5rem, 11vw, 5.5rem); line-height: 1; }
.passi h2 em { font-size: 1em; }
.passi-lista { display: grid; gap: 28svh; margin: 0; padding: 0; list-style: none; }
.passo {
  position: sticky; top: calc(var(--barra) + 16px + var(--i) * 12px);
  display: grid; grid-template-rows: auto minmax(0, 1fr); height: min(86svh, 700px);
  background: var(--card, var(--cappuccino)); color: var(--carbone); overflow: hidden;
  border-radius: 24px; transform-origin: 50% 0;
}
.passo:nth-child(6n+1) { --card: var(--cappuccino); }
.passo:nth-child(6n+2) { --card: var(--salvia); }
.passo:nth-child(6n+3) { --card: var(--rosa); }
.passo:nth-child(6n+4) { --card: var(--fucsia); color: var(--crema); }
.passo:nth-child(6n+5) { --card: var(--bosco); color: var(--crema); }
.passo:nth-child(6n+6) { --card: var(--carbone); color: var(--crema); }
.passo-testo { padding: 24px 22px 20px; display: grid; gap: 4px; align-content: start; }
.passo-num { font-size: 1rem; opacity: .75; }
.passo h3 { font-family: var(--script); font-weight: 400; font-size: clamp(2.5rem, 11vw, 3.5rem); line-height: 1.05; }
.passo-testo p:last-child { font-size: 1.3rem; line-height: 1.3; max-width: 26rem; }
.passo-testo a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.passo-testo a:hover { color: var(--cappuccino); }
.passo-foto { margin: 0; position: relative; min-height: 0; }
.passo-foto { overflow: hidden; }   /* serve quando una foto è ingrandita con scale */
.passo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La colazione: inquadratura sul vassoio intero. Per spostare: object-position (x y, 0% = sinistra/alto, 100% = destra/basso), per ingrandire: scale (1 = nessuno zoom) e transform-origin (il punto che resta fermo). */
.passo:nth-child(2) .passo-foto img { object-position: 50% 100%; scale: 1.18; transform-origin: 100% 100%; }
/* Gin Caleri: zoom sul bicchiere (in basso a sinistra nella foto), così resta ancorato all'angolo. */
.passo:nth-child(5) .passo-foto img { scale: 1.4; transform-origin: 0% 100%; }
/* ---------- 2c. VIDEO ---------- */
.video { background: transparent; color: var(--carbone); padding: 72px var(--gutter); --accento: var(--carbone); }
.video-testo { max-width: 30rem; margin-bottom: 32px; }
.video-testo h2 { margin-bottom: 20px; font-size: clamp(3rem, 15vw, 5.5rem); line-height: .95; }   /* titolo di sezione, più grande del testo sotto */
.video-testo h2 em { display: block; }
.video-testo p { font-size: 1.7rem; line-height: 1.3; }
.video-cornice { position: relative; width: min(100%, 360px); margin-inline: auto; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: var(--carbone); box-shadow: 0 24px 48px -24px rgba(43, 37, 34, .6); }
.video-el { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-tasto { position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--crema); color: var(--carbone); display: grid; place-items: center; transition: scale .2s var(--ease), background-color .2s ease; }
.video-tasto:hover { scale: 1.08; background: var(--cappuccino); }
.video-icona { position: relative; width: 18px; height: 18px; }
.video-icona::before, .video-icona::after { content: ""; position: absolute; inset: 0; background: currentColor; }
.video-icona::before { clip-path: polygon(15% 0, 100% 50%, 15% 100%); }   /* triangolo: avvia */
.video-icona::after { display: none; }
.video-tasto[data-stato="play"] .video-icona::before { clip-path: polygon(12% 0, 38% 0, 38% 100%, 12% 100%); }   /* due barre: pausa */
.video-tasto[data-stato="play"] .video-icona::after { display: block; clip-path: polygon(62% 0, 88% 0, 88% 100%, 62% 100%); }


/* ---------- 4a. PREMIO ---------- */
.premio-banda { background: transparent; color: var(--carbone); padding: 72px var(--gutter); display: grid; justify-items: center; text-align: center; gap: 28px; --accento: var(--carbone); }
.bollino { width: min(62vw, 240px); height: auto; flex: none; rotate: -6deg; justify-self: center; }
.premio-testo { width: fit-content; max-width: 100%; }
.premio-fonte { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 28px; margin-top: 18px; font-size: 1.6rem; }
.premio-fonte img { width: min(64vw, 280px); height: auto; }
.premio-testo p { margin-top: 14px; font-size: 1.6rem; line-height: 1.3; }

/* ---------- 4c. DA PORTARE A CASA ---------- */

/* ---------- 3. PRODOTTI FIRMA ---------- */
/* Una foto grande e un elenco in righe (come un menu): niente tessere uguali. */
.prodotti { background: transparent; padding: 72px var(--gutter) 88px; --accento: var(--carbone); }
.prodotti h2 { margin-bottom: 36px; font-size: clamp(2.5rem, 11vw, 5.5rem); }
/* Carte chiare che si impilano, come nelle card sopra ma più leggere: poco spazio tra l'una e l'altra, nessun scurimento, ombra morbida. */
.prodotti-elenco { display: grid; gap: 28svh; }   /* stessa distanza e stesso scorrimento delle card della giornata (.passi-lista, .passo) */
.prodotto { position: sticky; top: calc(var(--barra) + 16px + var(--s, 0) * 12px); display: grid; background: var(--card, var(--cappuccino)); border-radius: 24px; overflow: hidden; transform-origin: 50% 0; box-shadow: 0 18px 36px -24px rgba(43, 37, 34, .45); }
.prodotto:nth-child(1) { --card: var(--cappuccino); }
.prodotto:nth-child(2) { --s: 1; --card: var(--salvia); }
.prodotto:nth-child(3) { --s: 2; --card: var(--rosa); }
.prodotto:nth-child(4) { --s: 3; --card: var(--cappuccino); }
.prodotto-foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.prodotto-foto img { width: 100%; height: 100%; object-fit: cover; }
.prodotto-sfoglia img { object-position: 50% 15%; scale: 1.6; transform-origin: 2% 35%; }  /* la sfoglia sta in alto a sinistra nella foto */
.prodotto-1 .prodotto-foto img { object-position: 50% 45%; }
.prodotto-3 .prodotto-foto { aspect-ratio: 1 / 1; }   /* foto verticale: riquadro quadrato, così il panino entra intero */
.prodotto-3 .prodotto-foto img { object-position: 50% 28%; }
.prodotto-4 .prodotto-foto { aspect-ratio: 1 / 1; }   /* foto verticale con la pizza a sinistra: riquadro quadrato, così si vede quasi tutta */
.prodotto-4 .prodotto-foto img { object-position: 50% 48%; }
.prodotto-testo { display: grid; gap: 8px; align-content: center; padding: 20px 22px 26px; }
.prodotto h3 { font-size: clamp(2.25rem, 10vw, 3.5rem); line-height: 1.05; }
.prodotto-testo p:last-child { font-size: 1.35rem; line-height: 1.35; max-width: 28rem; }

/* ---------- 4. IL MOMENTO ---------- */

/* ---------- 5a. DOMANDE FREQUENTI ---------- */
.faq { background: transparent; padding: 72px var(--gutter) 24px; --accento: var(--carbone); }
.faq h2 { margin-bottom: 28px; }
.faq-lista { border-top: 2px solid var(--carbone); max-width: 52rem; }
.faq-voce { border-bottom: 1px solid var(--carbone); }
.faq-voce summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 1.7rem; line-height: 1.2; }
.faq-voce summary::-webkit-details-marker { display: none; }
.faq-voce summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--cappuccino); font-size: 1.6rem; line-height: 1; transition: rotate .3s var(--ease), background-color .2s ease; }
.faq-voce[open] summary::after { rotate: 45deg; background: var(--rosa); }
.faq-voce summary:hover::after { background: var(--salvia); }
.faq-voce p { padding: 0 0 20px; max-width: 40rem; font-size: 1.5rem; line-height: 1.35; }

/* ---------- 5. DOVE E QUANDO ---------- */
.orari-sez { background: transparent; }
.dove { padding: 40px var(--gutter) 80px; --accento: var(--bosco); }
/* Dove siamo: sezione a sé, su fondo salvia (testo sempre carbone, il verde scuro su salvia non regge il contrasto). */
.dove-luogo { background: var(--salvia); --accento: var(--carbone); }
.dove-luogo .dove { padding: 72px var(--gutter) 80px; --accento: var(--carbone); }
.dove-luogo h3 { color: var(--carbone); }
.dove-luogo .link-grande, .dove-luogo .mappa-nota, .dove-luogo .mappa-nota a { color: var(--carbone); }
.luogo { display: grid; gap: 36px; }
.dove-luogo .dove address { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.1; font-style: normal; }
.luogo-nota { margin-top: 12px; font-size: 1.25rem; color: var(--carbone); }
.luogo-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.luogo-azioni .pulsante { margin-top: 0; }
.pulsante.pulsante-chiaro { background: transparent; color: var(--carbone); box-shadow: inset 0 0 0 2px var(--carbone); }
.pulsante.pulsante-chiaro:hover { background: var(--carbone); color: var(--crema); }
.luogo-info > p:last-child { margin-top: 16px; }
.dove-luogo .mappa { border-width: 3px; }
/* Social: due schede grandi (Instagram e Facebook), solo link, senza foto. */
.social { background: var(--rosa); color: var(--carbone); padding: 80px var(--gutter) 48px; --accento: var(--carbone); text-align: center; }
.social-riga { margin: 16px auto 0; max-width: 30rem; font-size: 1.25rem; line-height: 1.35; }
.social-lista { display: grid; gap: 16px; margin: 40px auto 0; max-width: 56rem; }
.social-card { display: grid; justify-items: center; gap: 4px; padding: 32px 20px 28px; background: var(--crema); color: var(--carbone); text-decoration: none; border: 2px solid var(--carbone); transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
.social-card:hover { translate: 0 -4px; box-shadow: 0 14px 24px -14px rgba(43, 37, 34, .55); color: var(--carbone); }
.social-icona { width: 56px; height: 56px; margin-bottom: 8px; }
.social-rete { font-size: 1rem; color: var(--grigio); }
.social-nome { font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.social-vai { margin-top: 18px; padding: 12px 24px; background: var(--carbone); color: var(--crema); font-weight: 700; }
.stagioni { display: grid; gap: 28px; }
.orari-sez .dove { text-align: center; }
.orari-sez .orari { grid-template-columns: minmax(0, max-content) minmax(0, max-content); justify-content: center; text-align: left; }
.orari-sez .stagioni { justify-items: center; }
.dove h2 { margin-bottom: 36px; }
.dove h3 { font: italic 700 1.2rem/1.3 var(--sans); color: var(--grigio); margin: 0 0 8px; }
.dove h3:not(:first-child) { margin-top: 32px; }
.dove address { font-style: italic; font-size: 1.5rem; line-height: 1.4; }
/* Mappina: cartina OpenStreetMap del delta del Po, leggermente scolorita per stare con i colori del sito. Il segnaposto sta alle coordinate del locale (35,8% da sinistra, 29,2% dall'alto). Tutta cliccabile (apre Google Maps). */
.mappa-blocco { margin: 20px 0 0; max-width: 28rem; }
.mappa { position: relative; display: block; overflow: hidden; border: 2px solid var(--carbone); transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
.mappa img { display: block; width: 100%; height: auto; filter: saturate(.7) sepia(.18); }
.mappa:hover { translate: 0 -3px; box-shadow: 0 10px 20px -10px rgba(43, 37, 34, .5); }
.mappa-pin { position: absolute; left: 35.8%; top: 29.2%; translate: -50% -100%; display: flex; align-items: flex-end; gap: 6px; }
.mappa-pin svg { display: block; width: 28px; height: auto; filter: drop-shadow(0 3px 3px rgba(43, 37, 34, .4)); }
.mappa-nome { position: absolute; left: calc(100% + 4px); bottom: 14px; white-space: nowrap; background: var(--crema); color: var(--carbone); padding: 2px 8px; font-size: 1rem; line-height: 1.3; box-shadow: 0 2px 6px rgba(43, 37, 34, .25); }
.mappa-nota { margin-top: 6px; font-size: .85rem; color: var(--grigio); }
.mappa-nota a { color: inherit; }
/* Orari: la cosa più cercata, quindi il testo più grande della sezione. */
.stagione + .stagione { margin-top: 32px; }
.stagione h3 { font: italic 800 1.75rem/1.1 var(--sans); color: var(--carbone); text-transform: uppercase; letter-spacing: -0.01em; }
.periodo { margin: 4px 0 12px; color: var(--grigio); }
.stagione-nota { margin-top: 12px; max-width: 26rem; font-size: 1.1rem; line-height: 1.35; }
.stagione-nota a { color: inherit; }
.orari { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: 6px 24px; font-size: clamp(1.15rem, 5.2vw, 1.5rem); }
.orari dt { font-weight: 700; overflow-wrap: anywhere; }
.orari dd { overflow-wrap: anywhere; }
.link-grande { display: inline-flex; align-items: center; min-height: 44px; }
.pulsante {
  display: inline-block;
  margin-top: 32px;
  padding: 16px 28px;
  background: var(--carbone);
  color: var(--crema);
  font-weight: 700;
  text-decoration: none;
}
.pulsante:hover { background: var(--cappuccino); color: var(--carbone); }

/* ---------- 6. FOOTER ---------- */
footer { background: var(--carbone); color: var(--crema); padding: 56px var(--gutter) 28px; font-size: 1.15rem; display: grid; gap: 40px; }
footer a { color: var(--crema); }
footer a:hover { color: var(--cappuccino); }
/* Le sei teste dei gatti: una sola immagine con sei teste affiancate (img/teste-gatti.webp); ogni .testa ne mostra una. Telefono: due righe da tre, centrate. */
.footer-logo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: min(100%, 360px); justify-self: center; }
.testa { display: block; overflow: hidden; aspect-ratio: 416 / 333; }
.testa img { width: 600%; max-width: none; height: 100%; object-fit: fill; margin-left: calc(var(--n) * -100%); }
@media (min-width: 560px) { .footer-logo { grid-template-columns: repeat(6, 1fr); gap: 8px; width: min(100%, 760px); } }
.footer-colonne { display: grid; gap: 36px; }
.footer-titolo { font-size: 1.5rem; line-height: 1.1; color: var(--cappuccino); margin-bottom: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.footer-orari { display: grid; gap: 2px; }
.footer-orari dt { margin-top: 10px; }
.footer-orari dt span { opacity: .75; font-size: .95em; }
.footer-orari dd { line-height: 1.3; }
.footer-elenco li a { display: inline-flex; align-items: center; min-height: 44px; }
footer address { font-style: normal; line-height: 1.35; margin-bottom: 4px; }
.footer-legale { border-top: 1px solid rgba(246, 240, 230, .25); padding-top: 20px; font-size: .95rem; opacity: .9; }
.footer-legale .link { margin-top: 4px; display: flex; gap: 4px 24px; flex-wrap: wrap; }
.footer-legale .link a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- DESKTOP ---------- */
@media (min-width: 760px) {
  :root { --gutter: 48px; --barra: 76px; --strip: 64px; }
  body { font-size: 1.125rem; }

  /* Hero: il logo a sinistra, il motto a destra. */
  .hero-centro { grid-template-columns: 1fr 1fr; align-items: center; column-gap: clamp(32px, 6vw, 96px); padding: 0 clamp(var(--gutter), 9vw, 160px); }
  .hero-centro .logo { width: min(100%, 400px, calc((82svh - var(--barra) - var(--strip) - 80px) * 1.069)); }
  .hero h1 { justify-self: end; }
  .hero-motto { justify-self: start; text-align: left; font-size: clamp(2.5rem, 5vw, 5rem); }
  .hero-info { flex-direction: row; align-items: center; gap: 12px 32px; flex-wrap: wrap; }
  .hero-info a { padding-block: 0; }


  .passi { padding: 120px var(--gutter) 140px; }
  .passi h2 { margin-bottom: 64px; }
  .passo { grid-template-rows: minmax(0, 1fr); grid-template-columns: repeat(12, 1fr); height: min(76svh, 640px); }
  .passo-testo { grid-column: 1 / 6; padding: 48px 0 48px 48px; align-content: center; gap: 10px; }
  .passo h3 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .passo-testo p:last-child { font-size: 1.6rem; }
  .passo-foto { grid-column: 6 / 13; }
  .passo:nth-child(2) .passo-foto img { object-position: 50% 92%; scale: 1; }   /* riquadro orizzontale: basta abbassare l'inquadratura */
  .passo:nth-child(3) .passo-foto img { object-position: 50% 28%; }   /* pranzo: il calice e il panino al centro, poco tavolo sotto */
  .passo:nth-child(4) .passo-foto img { object-position: 50% 85%; }   /* aperitivo: i due drink e le mani del barista, poco soffitto */
  .passo:nth-child(5) .passo-foto img { object-position: 50% 80%; scale: 1.2; transform-origin: 0% 100%; }   /* gin: riquadro orizzontale, bicchiere in basso a sinistra */

  .video { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; padding: 120px var(--gutter); }
  .video-testo { grid-column: 1 / 6; margin: 0; }
  .video-testo h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
  .video-cornice { grid-column: 7 / 13; justify-self: center; width: 100%; max-width: 400px; margin: 0; }
  .premio-banda { grid-template-columns: auto 1fr; align-items: center; justify-items: start; text-align: left; gap: 56px; padding: 96px var(--gutter); }
  .bollino { width: 280px; margin-left: clamp(0px, 4vw, 80px); justify-self: start; }
  .premio-fonte img { width: 320px; }
  .prodotti { padding: 120px var(--gutter) 140px; }
  .prodotti h2 { margin-bottom: 64px; }
  .prodotti-elenco { max-width: 1280px; margin-inline: auto; }
  .prodotto { grid-template-columns: repeat(12, 1fr); align-items: stretch; height: min(60svh, 460px); }
  .prodotto-foto { grid-column: 1 / 7; aspect-ratio: auto; height: 100%; }
  .prodotto-testo { grid-column: 7 / 13; padding: 40px 48px; }
  .prodotto h3 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .prodotto-testo p:last-child { font-size: 1.6rem; }
  /* Club sandwich: come nella card del pranzo, foto un po' rimpicciolita su fondo sfocato della stessa foto, così entra tutta. */
  .prodotto-4 .prodotto-foto { aspect-ratio: auto; }
  .prodotto-3 .prodotto-foto { position: relative; aspect-ratio: auto; }
  .prodotto-3 .prodotto-foto::before { content: ""; position: absolute; inset: -24px; background: url("img/club-sandwich-640.webp") 50% 40% / cover; filter: blur(22px); }
  .prodotto-3 .prodotto-foto img { position: relative; object-position: 50% 25%; scale: .88; }
  .prodotto-2 .prodotto-foto, .prodotto-4 .prodotto-foto { grid-column: 7 / 13; grid-row: 1; }   /* le righe pari si specchiano */
  .prodotto-2 .prodotto-testo, .prodotto-4 .prodotto-testo { grid-column: 1 / 7; grid-row: 1; }



  .faq { padding: 120px var(--gutter) 40px; }
  .faq h2 { margin-bottom: 40px; }
  .dove { padding: 72px var(--gutter) 120px; }
  .dove h2 { margin-bottom: 56px; }
  .dove-luogo .dove { padding: 96px var(--gutter) 120px; }
  .stagioni { grid-template-columns: repeat(2, 1fr); gap: 48px; max-width: 60rem; margin-inline: auto; }
  .stagione + .stagione { margin-top: 0; }
  .luogo { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
  .luogo-info { grid-column: 1 / 6; }
  .social { padding: 120px var(--gutter) 64px; }
  .social-lista { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
  .social-card { padding: 48px 24px 40px; }
  .luogo .mappa-blocco { grid-column: 7 / 13; max-width: none; margin: 0; }
  .stagione h3 { font-size: 2.25rem; }
  .orari { font-size: 1.5rem; }
  footer { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 48px; padding: 88px var(--gutter) 32px; }
  .footer-logo { grid-column: 1 / -1; width: min(100%, 880px); margin-bottom: 8px; }
  .footer-colonne { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .footer-legale { grid-column: 1 / -1; display: flex; justify-content: flex-start; align-items: center; gap: 8px 40px; flex-wrap: wrap; }
  .footer-legale .link { margin: 0; }
}

/* Cosa dicono di noi: citazioni vere o niente. Card a tre pastelli, una colonna su telefono. */
.dicono { background: transparent; padding: 72px var(--gutter) 24px; --accento: var(--carbone); }
.dicono h2 { margin-bottom: 28px; }
.dicono-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.dicono-card { background: var(--card); color: var(--carbone); padding: 28px 24px; display: grid; gap: 20px; align-content: space-between; }
.dicono-card:nth-child(3n+1) { --card: var(--salvia); }
.dicono-card:nth-child(3n+2) { --card: var(--cappuccino); }
.dicono-card:nth-child(3n+3) { --card: var(--rosa); }
.dicono-card blockquote { margin: 0; }
.dicono-card blockquote p { font-size: 1.65rem; line-height: 1.3; }
.dicono-card blockquote p::before { content: "«"; }
.dicono-card blockquote p::after { content: "»"; }
.dicono-fonte { font-size: 1.2rem; line-height: 1.3; }
.dicono-fonte a { color: inherit; font-weight: 700; }   /* il verde bosco su salvia non arriva a 4.5:1 */
@media (min-width: 760px) {
  .dicono-lista { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* Sotto la piega il browser salta layout e paint finché non servono: scroll più leggero su telefono.
   Non su gesto/passi/carosello: usano sticky e view-timeline. */
.dicono, .faq, .orari-sez, .dove-luogo, .social, .recensione, footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* ---------- MOVIMENTO (solo CSS, spento con "riduci movimento") ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Cambio pagina (404, privacy, allergeni): dissolvenza invece dello stacco. */
  @view-transition { navigation: auto; }

  /* FAQ: la risposta si apre in altezza invece di comparire di colpo. */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq-voce::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
    .faq-voce[open]::details-content { block-size: auto; }
  }

  /* Apertura: il logo arriva. */
  .logo { animation: arriva 1.1s .15s var(--ease) both; }
  @keyframes arriva { from { opacity: 0; transform: scale(.9) rotate(-3deg); } to { opacity: 1; transform: none; } }

  /* Ingressi: ogni blocco compare con un fade una volta sola, quando entra in vista (classi messe dallo script in fondo alla pagina). */
  .js .rev { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rev.visibile { opacity: 1; translate: 0 0; }


  .hero-info { animation: arriva-su .8s .6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes arriva-su { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
  @supports (animation-timeline: view()) {
    /* HERO: scorrendo, il logo resta indietro e si rimpicciolisce. */
    .logo {
      animation-name: arriva, logo-esce;
      animation-duration: 1.1s, auto;
      animation-delay: .15s, 0s;
      animation-timing-function: var(--ease), linear;
      animation-fill-mode: both, both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 90vh;
    }
    @keyframes logo-esce { from { scale: 1; translate: 0 0; } to { scale: .72; translate: 0 18vh; } }
    .barra-logo { animation: compare-logo linear both; animation-timeline: scroll(root); animation-range: 30vh 70vh; }
    @keyframes compare-logo { from { opacity: 0; } to { opacity: 1; } }



    /* Passi: quando il successivo sale, quello sotto si rimpicciolisce e si scurisce un poco (ogni carta è guidata dalla successiva). */
    .passi-lista { timeline-scope: --c2, --c3, --c4, --c5, --c6; }
    .passo:nth-child(2) { view-timeline: --c2 block; }
    .passo:nth-child(3) { view-timeline: --c3 block; }
    .passo:nth-child(4) { view-timeline: --c4 block; }
    .passo:nth-child(5) { view-timeline: --c5 block; }
    .passo:nth-child(6) { view-timeline: --c6 block; }
    .passo:nth-child(1) { animation: passo-sotto linear both; animation-timeline: --c2; animation-range: entry 10% entry 100%; }
    .passo:nth-child(2) { animation: passo-sotto linear both; animation-timeline: --c3; animation-range: entry 10% entry 100%; }
    .passo:nth-child(3) { animation: passo-sotto linear both; animation-timeline: --c4; animation-range: entry 10% entry 100%; }
    .passo:nth-child(4) { animation: passo-sotto linear both; animation-timeline: --c5; animation-range: entry 10% entry 100%; }
    .passo:nth-child(5) { animation: passo-sotto linear both; animation-timeline: --c6; animation-range: entry 10% entry 100%; }
    /* Lo scurimento è un velo che cambia solo l'opacità (filter non gira sul compositor e su telefono scatta). */
    .passo:not(:last-child)::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; animation: passo-velo linear both; animation-timeline: inherit; animation-range: inherit; }
    /* I nostri best: stesso effetto delle card della giornata (la carta sotto si rimpicciolisce e si scurisce quando sale la successiva). */
    .prodotti-elenco { timeline-scope: --p2, --p3, --p4; }
    .prodotto:nth-child(2) { view-timeline: --p2 block; }
    .prodotto:nth-child(3) { view-timeline: --p3 block; }
    .prodotto:nth-child(4) { view-timeline: --p4 block; }
    .prodotto:nth-child(1) { animation: passo-sotto linear both; animation-timeline: --p2; animation-range: entry 10% entry 100%; }
    .prodotto:nth-child(2) { animation: passo-sotto linear both; animation-timeline: --p3; animation-range: entry 10% entry 100%; }
    .prodotto:nth-child(3) { animation: passo-sotto linear both; animation-timeline: --p4; animation-range: entry 10% entry 100%; }
    .prodotto:not(:last-child)::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; animation: passo-velo linear both; animation-timeline: inherit; animation-range: inherit; }
    @keyframes passo-sotto { from { scale: 1; } to { scale: .93; } }
    @keyframes passo-velo { from { opacity: 0; } to { opacity: .18; } }


  }
}

/* ---------- RECENSIONE ----------
   Un invito sottile sotto i social: una riga con cinque stelline, sullo stesso rosa, divisa da un filetto. */
.recensione { background: var(--rosa); color: var(--carbone); padding: 0 var(--gutter) 40px; text-align: center; }
.recensione-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; max-width: 56rem; margin: 0 auto; padding: 22px 0 0; border-top: 1px solid rgba(43, 37, 34, .25); color: var(--carbone); text-decoration: none; font-size: 1.15rem; }
.recensione-nota { max-width: 36rem; margin: 14px auto 0; font-size: 1rem; line-height: 1.4; color: var(--carbone); opacity: .85; }
.recensione-nota a { color: var(--carbone); text-underline-offset: .2em; }
.recensione-link u { text-underline-offset: .2em; text-decoration-thickness: 1px; }
.recensione-link:hover u { text-decoration-thickness: 2px; }
.stelle { display: flex; gap: 3px; }
.stelle li { width: 18px; }
.stelle svg { display: block; width: 100%; height: auto; fill: var(--carbone); transition: scale .2s var(--ease); }
.recensione-link:hover .stelle svg { scale: 1.15; }
.stelle li:nth-child(2) svg { transition-delay: .03s; } .stelle li:nth-child(3) svg { transition-delay: .06s; } .stelle li:nth-child(4) svg { transition-delay: .09s; } .stelle li:nth-child(5) svg { transition-delay: .12s; }

/* ---------- TORNA SU ---------- */
.su { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 2px solid var(--crema); border-radius: 50%; background: var(--terracotta); color: var(--crema); cursor: pointer; opacity: 0; translate: 0 12px; transition: opacity .25s ease, translate .25s var(--ease), background-color .2s ease, color .2s ease; box-shadow: 0 8px 18px -8px rgba(43, 37, 34, .6); }
.su[hidden] { display: none; }
.su.mostra { opacity: 1; translate: 0 0; }
.su svg { width: 24px; height: 24px; }
.su:hover { background: var(--carbone); }
.su:active { scale: .92; }
@media (min-width: 760px) { .su { right: 28px; bottom: 28px; width: 56px; height: 56px; } }

/* ---------- OMBRA SUL CAMBIO SEZIONE ----------
   Ogni sezione che cambia colore proietta una leggera ombra verso l'alto, sulla sezione precedente. Per cambiarla o toglierla: una sola riga. */
.passi, .video, .prodotti, .premio-banda, .dicono, .dove-luogo, .social, footer { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .mappa-pin svg { animation: pin-cade .9s .1s var(--ease) both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
  @supports not (animation-timeline: view()) { .mappa-pin svg { animation: none; } }
  @keyframes pin-cade { from { translate: 0 -24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
}

/* PROVA: tutto in Yellowtail (richiesta cliente). Per tornare a DM Sans, cancella da qui in giù
   e ripristina font-style: italic su body se serve il corsivo. Yellowtail ha un solo peso e non ha
   italic: niente grassetto/corsivo sintetico, niente maiuscolo, niente spaziatura negativa. */
html { font-synthesis: none; }
body, h1, h2, h3, h4, .dove h3, .stagione h3, .dove address, .orari dt, .hero-info, button, input {
  font-family: var(--script); font-style: normal; font-weight: 400;
}
body { font-size: 1.25rem; line-height: 1.45; }
h2, .stagione h3 { text-transform: none; letter-spacing: 0; }
h2 em { font-size: 1em; }
strong, b { font-weight: 400; }