/* Gigios — foglio di stile unico
   Direzione (passata di stile 01/10/2026): le foto vere sono piene di colori
   forti, quindi tutto intorno e' calmo — fondo "gesso" neutro, un solo verde
   serio, l'arancio solo sul bottone Chiama. L'unico elemento coraggioso
   della pagina resta la gru. */

:root {
  /* fondo: un bianco appena verde. Il crema di prima ingialliva le foto */
  --fondo: #f4f6f3;
  --verde: #1a4a3a;
  --verde-medio: #2f7a5f;
  --arancio: #ef6c1f;
  /* arancio più profondo solo per i bottoni: con il testo bianco l'arancio chiaro
     non arrivava al contrasto minimo richiesto e diventava faticoso da leggere */
  --arancio-bottone: #c2410c;
  --giallo: #ffc233;
  --azzurro: #2f9bd4;
  --rosa: #e8568a;
  --testo: #26302c;
  --testo-tenue: #55605b;
  /* filo sottile per separare, al posto delle ombre sotto ogni scheda */
  --filo: #dce3de;
  --bianco: #ffffff;
  /* ombra solo per cio' che "galleggia" davvero (vetrina, telefono) */
  --ombra: 0 4px 18px rgba(26, 74, 58, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--testo);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

/* Baloo 2 per i titoli: e' un carattere tondo e giocoso, pensato per marchi
   allegri (lo usano tante app per bambini). Nunito resta per il testo lungo,
   che con un font troppo decorativo diventerebbe faticoso da leggere. */
h1, h2, h3 {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  line-height: 1.15;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5.8vw, 3.6rem); letter-spacing: -.01em; font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--verde); font-weight: 700; letter-spacing: -.005em; }
h3 { font-size: 1.3rem; color: var(--verde); font-weight: 700; font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; }
p { margin: 0 0 1em; }
a { color: var(--verde-medio); }

/* ---- barra in alto ---- */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 22px;
  background: var(--verde);
  color: var(--bianco);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: .03em;
  color: var(--bianco);
  text-decoration: none;
}

/* la mascotte di Gigios (ritagliata dal logo): il tondino bianco la fa
   staccare dal verde della barra */
.marchio-mascotte {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--giallo);
}

.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }

/* il motto in minuscolo normale: il maiuscolo spaziato era uno dei
   segni da "sito fatto in serie" */
.marchio-testo span {
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--giallo);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
}

.menu a {
  color: var(--bianco);
  text-decoration: none;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  padding: 7px 13px;
  border-radius: 999px;
  opacity: .88;
}

.menu a:hover { background: rgba(255, 255, 255, .14); opacity: 1; }

.menu a[aria-current="page"] {
  background: rgba(255, 255, 255, .16);
  opacity: 1;
  box-shadow: inset 0 -3px 0 var(--giallo);
}

/* tre link veri in elenco (prima erano separati da puntini su una riga) */
.approfondisci {
  margin-top: 26px;
  font-size: .95rem;
  color: var(--testo-tenue);
}
.approfondisci p { margin: 0 0 4px; }
.approfondisci ul { margin: 0; padding-left: 20px; }
.approfondisci li { margin: 2px 0; }

.telefono-barra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  color: var(--verde);
  background: var(--giallo);
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 20px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.icona-tel { width: 18px; height: 18px; flex: none; }

/* sul computer WhatsApp c'e' gia' nei bottoni delle pagine: la barra serve
   solo sul telefono (vedi sotto, max-width 560px) */
.whatsapp-barra { display: none; }

/* ---- impaginazione generale ---- */

section {
  max-width: 940px;
  margin: 0 auto;
  padding: 60px 22px;
}

/* ---- apertura, con le palline ---- */

.apertura {
  position: relative;
  overflow: hidden;
  max-width: none;
  padding: 72px 22px 60px;
  /* un solo alone giallo dietro la gru: prima erano tre (giallo, azzurro,
     rosa) su crema, e la pagina partiva gia' "colorata" prima della gru */
  background: radial-gradient(520px circle at 74% 46%, rgba(255, 194, 51, .18), transparent 70%);
}

/* colonna centrata senza wrapper: la griglia mette ogni figlio nella corsia di mezzo,
   così anche la pillola in alto parte esattamente dove parte il titolo */
.apertura {
  display: grid;
  /* 896 = 940 della colonna meno i 22 di padding per lato delle altre sezioni */
  grid-template-columns: 1fr min(896px, calc(100% - 44px)) 1fr;
  padding-left: 0;
  padding-right: 0;
}

.apertura > * {
  position: relative;
  z-index: 2;
  grid-column: 2;
}

.apertura .sopratitolo { justify-self: start; }

/* testo a sinistra, vetrina della gru a destra; su telefono la vetrina va
   sotto i bottoni, perche' chi arriva dal QR deve leggere subito l'offerta */
.apertura-contenuto {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.apertura h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); }

.vetrina {
  display: block;
  width: 100%;
  max-width: 340px;
  justify-self: center;
  overflow: visible;
  filter: drop-shadow(0 18px 28px rgba(26, 74, 58, .22));
}

/* "scorri" compare solo quando le animazioni sono attive: senza, non c'e'
   niente di speciale da scoprire scorrendo */
.scorri { display: none; }

/* galleggia nel margine in fondo all'apertura: quando sparisce (movimento.js)
   non lascia un buco tra la gru e i numeri */
.con-movimento .scorri {
  display: block;
  position: absolute;
  /* tutta la larghezza, non solo la colonna di mezzo: se no non e' centrata */
  grid-column: 1 / -1;
  left: 0;
  right: 0;
  bottom: 8px;
  margin: 0;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--verde-medio);
  text-align: center;
}

.con-movimento .scorri::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 6px auto 0;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  animation: scorri 1.6s ease-in-out infinite;
}

@keyframes scorri {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; }
  50%      { transform: translateY(6px) rotate(45deg); opacity: 1; }
}

/* ---- rotaia in alto: il carrellino segna quanto hai letto della pagina ---- */

.rotaia { display: none; }

.con-movimento .rotaia {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: rgba(127, 212, 176, .45);
  pointer-events: none;
  --avanzamento: 0;
}

.rotaia-carrello {
  position: absolute;
  top: -1px;
  left: calc(var(--avanzamento) * (100% - 28px));
  width: 28px;
  height: 30px;
}
.rotaia-carrello svg { width: 100%; height: 100%; display: block; }

/* pagine interne: al posto della gru, una foto vera di un'installazione.
   Stessa impaginazione della home (testo a sinistra, immagine a destra),
   cosi' si capisce che e' lo stesso sito */
.apertura-foto { display: block; width: 100%; max-width: 380px; justify-self: center; }
.apertura-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  background: var(--filo);
}
.apertura:has(.apertura-foto) { background: none; }

/* home, solo telefono: una foto vera subito sotto i bottoni. Tagliata in
   orizzontale (4:3) tenendo la parte bassa, dove ci sono le macchine */
.apertura-scatto { display: none; }

@media (max-width: 860px) {
  .apertura-scatto { display: block; margin: 28px 0 0; }
  .apertura-scatto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 80%;
    border-radius: 14px;
    background: var(--filo);
  }
  .apertura-scatto figcaption {
    margin-top: 8px;
    font-size: .95rem;
    color: var(--testo-tenue);
  }
}

@media (max-width: 860px) {
  .apertura-contenuto { grid-template-columns: minmax(0, 1fr); }
  .vetrina { max-width: 280px; }
  .apertura-foto { max-width: 420px; }
}

/* per chi e' la pagina, detto come una frase normale: niente pillola e
   niente maiuscolo spaziato (il "sopratitolo" tipico dei siti in serie) */
.sopratitolo {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--verde-medio);
  margin-bottom: 12px;
}

.apertura h1 { max-width: 15em; }

.occhiello {
  font-size: 1.18rem;
  color: var(--testo-tenue);
  max-width: 36em;
}

.rassicurazione {
  font-size: .92rem;
  color: var(--testo-tenue);
  margin-top: 18px;
}

/* ---- bottoni ---- */

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bottone {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--arancio-bottone);
  color: var(--bianco);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  text-decoration: none;
  /* solo il bordo duro sotto, come un pulsante da sala giochi */
  box-shadow: 0 4px 0 #8f300a;
  transition: transform .12s ease;
}

.bottone:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(2px); box-shadow: 0 1px 0 #8f300a; }

.bottone.secondario {
  background: var(--bianco);
  color: var(--verde);
  box-shadow: inset 0 0 0 2px var(--filo), 0 4px 0 var(--filo);
}

/* ---- i tre numeri ---- */

.numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  padding-top: 44px;
  padding-bottom: 10px;
}

/* bianche e piatte, senza ombra ne' riga colorata: il colore lo portano
   gia' i gettoni */
.numeri div {
  background: var(--bianco);
  border-radius: 18px;
  padding: 26px 18px 22px;
  text-align: center;
}

/* gettone: lo stesso linguaggio delle palline dei distributori, riusato come
   icona. Al posto delle emoji (che cambiano aspetto da telefono a telefono
   e non c'entrano nulla con lo stile disegnato del resto del sito). */
.gettone {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  position: relative;
  box-shadow: inset -5px -7px 0 rgba(0, 0, 0, .12);
}

.gettone::after {
  /* piccolo riflesso, la stessa cosa che rende le palline decorative meno piatte */
  content: "";
  position: absolute;
  top: 8px;
  left: 11px;
  width: 13px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: rotate(-25deg);
}

.gettone svg { width: 28px; height: 28px; position: relative; z-index: 1; }

.gettone-giallo  { background: var(--giallo); }
.gettone-azzurro { background: var(--azzurro); }
.gettone-rosa    { background: var(--rosa); }

.numeri strong {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--verde);
  line-height: 1.15;
}

.numeri span {
  font-size: .92rem;
  color: var(--testo-tenue);
}

/* ---- i tre passaggi ---- */

.passi {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

/* niente scheda: numero tondo e testo libero. Il numero resta perche'
   qui c'e' davvero un ordine (prima, poi, infine) */
.passi li {
  counter-increment: passo;
  padding: 6px 0 6px 64px;
  position: relative;
}

.passi li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--arancio);
  color: var(--bianco);
  font-weight: 800;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .12);
}

.passi li:nth-child(2)::before { background: var(--azzurro); }
.passi li:nth-child(3)::before { background: var(--rosa); }

.passi p { margin: 0; color: var(--testo-tenue); }

/* ---- blocco premio, il pezzo forte ---- */

.premio {
  max-width: none;
  background: var(--verde);
  color: var(--bianco);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.premio > * { position: relative; z-index: 2; max-width: 780px; margin-left: auto; margin-right: auto; }
.premio h2 { color: var(--giallo); font-size: clamp(1.8rem, 5vw, 2.8rem); }
.premio p { font-size: 1.1rem; }
.premio strong { color: var(--giallo); }

/* ---- la gru che prende la pallina: tutto disegnato e animato in CSS ----
   Un ciclo dura 7 secondi: scende, chiude, sale, si sposta, lascia cadere, torna. */

.gru {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 26px;
  overflow: visible;
}

.gru .gruppo-braccio {
  animation: braccio 7s cubic-bezier(.45, .05, .35, 1) infinite;
}

@keyframes braccio {
  0%,  6%   { transform: translate(0, 0); }
  22%       { transform: translate(0, 78px); }   /* scende sul mucchio */
  32%       { transform: translate(0, 78px); }   /* si chiude sulla pallina */
  46%       { transform: translate(0, 0); }      /* risale */
  60%, 74%  { transform: translate(112px, 0); }  /* si sposta sullo scivolo */
  90%, 100% { transform: translate(0, 0); }      /* torna al punto di partenza */
}

/* le due pinze: aperte a riposo, chiuse mentre tiene la pallina */
.gru .pinza { transform-box: view-box; }
.gru .pinza-sx { transform-origin: 60px 74px; animation: pinza-sx 7s ease-in-out infinite; }
.gru .pinza-dx { transform-origin: 80px 74px; animation: pinza-dx 7s ease-in-out infinite; }

/* i segni erano invertiti (le pinze si stringevano scendendo e si aprivano
   tenendo la pallina): l'asse y va verso il basso, quindi una rotazione
   positiva sposta in fuori la punta della pinza sinistra */
@keyframes pinza-sx {
  0%, 24%   { transform: rotate(16deg); }
  32%, 70%  { transform: rotate(-2deg); }
  78%, 100% { transform: rotate(16deg); }
}

@keyframes pinza-dx {
  0%, 24%   { transform: rotate(-16deg); }
  32%, 70%  { transform: rotate(2deg); }
  78%, 100% { transform: rotate(-16deg); }
}

/* la pallina afferrata compare quando le pinze si chiudono */
.gru .pallina-presa { opacity: 0; animation: pallina-presa 7s linear infinite; }

@keyframes pallina-presa {
  0%, 30%   { opacity: 0; }
  32%, 72%  { opacity: 1; }
  74%, 100% { opacity: 0; }
}

/* quella nel mucchio sparisce nel momento in cui viene presa */
.gru .pallina-nel-mucchio { animation: pallina-mucchio 7s linear infinite; }

@keyframes pallina-mucchio {
  0%, 30%   { opacity: 1; }
  32%, 92%  { opacity: 0; }
  94%, 100% { opacity: 1; }
}

/* e ricompare in fondo allo scivolo, come premio */
.gru .pallina-che-cade { opacity: 0; animation: pallina-cade 7s cubic-bezier(.55, 0, .85, .6) infinite; }

@keyframes pallina-cade {
  0%, 72%   { opacity: 0; transform: translateY(0); }
  74%       { opacity: 1; transform: translateY(0); }
  86%, 92%  { opacity: 1; transform: translateY(96px); }
  96%, 100% { opacity: 0; transform: translateY(96px); }
}

/* con movimento.js la gru la comanda lo scroll (scena 4): il giro
   automatico qui sopra resta solo per chi non ha JavaScript */
.con-movimento .gru * { animation: none !important; }

/* chi ha chiesto meno animazioni al sistema operativo non le vede */
@media (prefers-reduced-motion: reduce) {
  .gru * { animation: none !important; }
  .gru .pallina-presa, .gru .pallina-che-cade { opacity: 0; }
}

/* ---- griglia dei servizi ---- */

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}

/* Schede dritte e piatte: filo sottile, angoli piccoli, niente ombra ne'
   effetto al passaggio del mouse. Prima erano storte e tratteggiate: carine,
   ma facevano concorrenza alla gru, che deve restare l'unica cosa
   "coraggiosa". Angoli piu' piccoli delle foto (14px) e dei numeri (18px):
   ogni tipo di riquadro ha la sua forma. */
.griglia article {
  background: var(--bianco);
  border-radius: 10px;
  border: 1px solid var(--filo);
  padding: 24px 22px 22px;
  position: relative;
}

.griglia p { margin: 0; color: var(--testo-tenue); font-size: .97rem; }

/* pagine interne (01/10/2026): vantaggi, occasioni e formule non sono
   oggetti da mostrare, quindi niente scheda e niente pallino colorato.
   Diventano un elenco: titolo e frase, separati da un filo sottile sopra,
   come si impagina un documento serio. Il colore resta alla gru */
.griglia.elenco { column-gap: 36px; row-gap: 0; }
.griglia.elenco article {
  background: none;
  border: 0;
  border-top: 1px solid var(--filo);
  border-radius: 0;
  padding: 18px 0 26px;
}
.griglia.elenco h3 { margin: 0 0 6px; }

/* home (01/10/2026): al posto del pallino colorato, la foto vera del gioco.
   Sei schede uguali con un pallino sono il segno tipico del sito fatto in
   serie; con la foto il gestore vede subito COSA arriva nel suo locale.
   La foto sta in cima, a filo con il bordo della scheda: il padding passa
   dalla scheda al testo. Solo foto non gia' usate nella galleria della home */
.griglia.con-foto article { padding: 0; overflow: hidden; }
.griglia.con-foto article > :not(.scheda-foto) { margin-left: 22px; margin-right: 22px; }
.griglia.con-foto h3 { margin-top: 18px; }
.griglia.con-foto p { margin-bottom: 22px; }

.scheda-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 60%;
  background: var(--filo);
}

/* ---- galleria foto ---- */

/* Le foto sono le protagoniste: niente cornice bianca, niente ombra, la
   didascalia sotto in testo semplice. La sezione che contiene una galleria
   e' piu' larga del resto del testo, cosi' le foto hanno spazio. */
section:has(> .galleria) { max-width: 1180px; }
/* il titolo e il testo sopra restano alla larghezza delle altre sezioni */
section:has(> .galleria) > :not(.galleria) { max-width: 896px; margin-left: auto; margin-right: auto; }

/* foto verticali (3:4): 3 per riga sul computer, 2 sul telefono, cosi' le
   macchine (alte e strette) si vedono intere invece di essere tagliate */
.galleria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
  margin-top: 28px;
}

/* home: 4 per riga, con una foto "grande" (2 colonne x 2 righe) in mezzo.
   La grande e' una foto e non il video: il video e' piccolo (352 px di
   larghezza, passato da WhatsApp) e ingrandito si vedeva sgranato.
   La foto grande riempie esattamente l'altezza delle due righe accanto */
@media (min-width: 861px) {
  .galleria:has(> .grande) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galleria .grande { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .galleria .grande picture { flex: 1 1 auto; position: relative; }
  .galleria .grande img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* galleria da 5 foto (feste: la sesta e' salita nell'apertura): sul
   computer tutte su una riga, invece di 3 + 2 con un buco */
@media (min-width: 861px) {
  .galleria:has(> figure:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 560px) {
  /* "dense": la foto dopo la grande risale a riempire il posto accanto al
     video, invece di lasciare un buco */
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; grid-auto-flow: dense; }
  .galleria figcaption { font-size: .88rem; }
  /* telefono: la foto grande occupa tutta la riga */
  .galleria .grande { grid-column: span 2; }
}

.galleria figure { margin: 0; }

/* la cornice taglia la foto: serve alla scena 6 di movimento.js, che sposta
   la foto (ingrandita del 12%) dentro la sua finestra */
.galleria picture { display: block; overflow: hidden; border-radius: 14px; }

/* il video ha la stessa forma delle foto (3:4) */
.galleria video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  background: var(--verde);
}

/* telefono, 2 colonne: se le foto sono dispari l'ultima resterebbe da sola
   a meta' riga; allora occupa tutta la riga, in orizzontale (non serve
   dove c'e' la foto grande: quella occupa due posti e i conti tornano pari) */
@media (max-width: 560px) {
  .galleria:not(:has(> .grande)) figure:last-child:nth-child(odd) { grid-column: span 2; }
  /* 4:3 e inquadratura alta: le macchine hanno il premio in cima, e con il
     taglio 3:2 di prima la cupola con le palline spariva */
  .galleria:not(:has(> .grande)) figure:last-child:nth-child(odd) img { aspect-ratio: 4 / 3; object-position: 50% 15%; }
}

.galleria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* fondo neutro mentre la foto si sta ancora caricando */
  background: var(--filo);
}

.galleria figcaption {
  padding: 10px 2px 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--testo);
}

/* foto singola dentro la sezione verde del premio (pagina distributori):
   la prova scritta sulla macchina, appena inclinata come una foto appoggiata */
.foto-prova {
  max-width: 260px;
  margin: 26px auto 0;
  padding: 10px 10px 4px;
  background: var(--bianco);
  border-radius: 14px;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.foto-prova img { display: block; width: 100%; height: auto; border-radius: 8px; }
.foto-prova figcaption { color: var(--verde); font-weight: 700; font-size: .9rem; padding: 8px 4px; }

/* ---- vantaggi ---- */

/* fascia bianca piena, senza fili sopra e sotto: lo stacco dal fondo gesso basta */
.vantaggi { max-width: none; background: var(--bianco); }
/* 896 come le altre sezioni (940 meno il padding): prima i titoli di questa
   fascia partivano 22px piu' a sinistra di tutti gli altri */
.vantaggi > * { max-width: 896px; margin-left: auto; margin-right: auto; }

/* Righe semplici separate da un filo, non schede impilate: al segno di spunta
   uguale per tutti preferiamo una pallina colorata diversa a ogni riga —
   la stessa palette del resto del sito, non il verde da lista-spesa che
   mette qualsiasi generatore automatico. */
/* allineato a sinistra come il testo sopra (prima era centrato) */
.vantaggi > .elenco-vantaggi { margin-left: auto; margin-right: auto; }
.elenco-vantaggi { list-style: none; padding: 0; margin: 0; max-width: 896px; }

/* La pallina sta a lato (posizionata), titolo e testo scorrono insieme come
   una frase. Prima la riga era "flex": pallina, titolo in grassetto e testo
   diventavano tre colonne, e sul telefono il titolo finiva schiacciato in
   una colonna stretta ("Siamo / qui / vicino." su tre righe). */
.elenco-vantaggi li {
  position: relative;
  padding: 18px 4px 18px 42px;
  border-bottom: 1px solid var(--filo);
  color: var(--testo-tenue);
}

.elenco-vantaggi li:last-child { border-bottom: none; }

.elenco-vantaggi li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .14);
  /* scena 7: il pallino e' piccolo e sbiadito finche' la sua pallina non
     cade nel barattolo (movimento.js porta --accesa da 0 a 1). Senza
     JavaScript --accesa non c'e', vale 1: pallino pieno */
  opacity: calc(.25 + .75 * var(--accesa, 1));
  transform: scale(calc(.55 + .45 * var(--accesa, 1)));
}

/* il barattolo: a sinistra e fermo mentre l'elenco scorre (computer),
   sopra l'elenco sul telefono */
.vantaggi-corpo { max-width: 896px; }
.barattolo { display: block; width: 100%; max-width: 170px; height: auto; margin: 0 auto 10px; overflow: visible; }

@media (min-width: 861px) {
  .vantaggi-corpo {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .barattolo { position: sticky; top: 120px; max-width: 200px; margin: 0; }
}

.elenco-vantaggi li:nth-child(5n+1)::before { background: var(--giallo); }
.elenco-vantaggi li:nth-child(5n+2)::before { background: var(--azzurro); }
.elenco-vantaggi li:nth-child(5n+3)::before { background: var(--rosa); }
.elenco-vantaggi li:nth-child(5n+4)::before { background: var(--arancio); }
.elenco-vantaggi li:nth-child(5n+5)::before { background: var(--verde-medio); }

.elenco-vantaggi strong { color: var(--testo); }

/* ---- contatti ---- */

.contatti {
  background: var(--verde);
  color: var(--bianco);
  max-width: none;
  text-align: center;
}

.contatti > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.contatti h2 { color: var(--bianco); }
.contatti .azioni { justify-content: center; }
.referente { color: var(--giallo); font-weight: 600; }

/* ---- piè di pagina ---- */

/* Piede: marchio, indirizzo e pagine sono tre blocchi diversi, uno per
   riga, invece di una fila unica di voci separate da puntini */
footer {
  padding: 40px 22px 48px;
  text-align: center;
  font-size: .95rem;
  color: var(--testo-tenue);
}

footer p { margin: 0 0 6px; }
footer address { font-style: normal; margin: 0 0 14px; }
.piede-marchio { color: var(--testo); }
.piede-marchio strong { font-family: 'Baloo 2', sans-serif; font-size: 1.25rem; color: var(--verde); }
.piede-legale { font-size: .85rem; margin: -6px 0 14px; }

/* ---- pagina privacy: solo testo, colonna stretta per leggere comodi ---- */

.legale { max-width: 720px; }
.legale h1 { font-size: clamp(2rem, 5vw, 2.6rem); color: var(--verde); margin-bottom: .2em; }
.legale h2 { font-size: 1.35rem; margin: 1.8em 0 .4em; }
.legale .aggiornata { color: var(--testo-tenue); font-size: .9rem; }

.piede-pagine {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
}

/* (01/10/2026) tolto lo "sfondo vivo" con le palline che fluttuavano dietro
   la pagina: faceva concorrenza alla gru, che resta l'unica protagonista.
   Il fondo ora e' il gesso fisso. */

.con-movimento main,
.con-movimento footer { position: relative; z-index: 1; }

.con-movimento body { background: var(--fondo); }

/* aloni con misure fisse e lontani dal fondo della sezione: con il fondo
   trasparente, un alone che tocca il bordo lascerebbe una riga netta */
.con-movimento .apertura {
  background: radial-gradient(520px circle at 74% 46%, rgba(255, 194, 51, .18), transparent 70%);
}

.con-movimento .vantaggi { background: rgba(255, 255, 255, .7); }

/* ---- scena 2: solo i gettoni si muovono (vedi movimento.js) ---- */

/* ---- scena 3: il furgoncino percorre i tre passaggi ---- */

.strada { display: none; }

.con-movimento .strada {
  display: block;
  position: relative;
  height: 112px;
  margin: 6px 0 22px;
  /* l'asfalto con la riga tratteggiata in mezzo, fatto solo di gradienti */
  background:
    repeating-linear-gradient(90deg, #fff 0 22px, transparent 22px 40px) 0 87px / 100% 3px no-repeat,
    linear-gradient(#5f574e, #4a433b) 0 72px / 100% 34px no-repeat;
  border-radius: 6px;
}

.tappa {
  position: absolute;
  left: var(--dove);
  top: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
}

/* il palo con il cartello tondo numerato, nei colori dei tre passaggi */
.tappa b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--arancio);
  color: var(--bianco);
  font-family: 'Baloo 2', sans-serif;
  font-size: 1rem;
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .14), 0 3px 8px rgba(0, 0, 0, .15);
}
.tappa::after { content: ""; width: 4px; height: 34px; background: #9a8f80; border-radius: 2px; }
/* posizioni qui e non nell'HTML: le regole di sicurezza (_headers) vietano
   gli stili scritti dentro le pagine */
.tappa:nth-of-type(1) { --dove: 16.6%; }
.tappa:nth-of-type(2) { --dove: 50%; }
.tappa:nth-of-type(3) { --dove: 83.3%; }
.tappa:nth-of-type(2) b { background: var(--azzurro); }
.tappa:nth-of-type(3) b { background: var(--rosa); }

.furgone {
  position: absolute;
  left: 0;
  top: 40px;
  width: 124px;
  height: 74px;
  overflow: visible;
  z-index: 2;
}

/* monete che saltano fuori alla terza tappa ("tu incassi") */
.monete { position: absolute; left: 83.3%; top: 70px; }
.monete i {
  position: absolute;
  left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc233 45%, #d99a0b);
  box-shadow: inset 0 0 0 2px #e0a514;
  opacity: 0;
}

/* sul computer i passaggi stanno in riga, ognuno sotto la sua tappa */
@media (min-width: 861px) {
  .con-movimento .passi { grid-template-columns: repeat(3, 1fr); }
  .con-movimento .passi li { padding: 70px 22px 22px; text-align: center; }
  .con-movimento .passi li::before { left: 50%; transform: translateX(-50%); }
}

/* ---- scena 5: tolta (01/10/2026), le schede sono una griglia normale ---- */

/* ---- scena 8: la mappa della zona servita ---- */

.mappa { display: block; width: 100%; max-width: 720px; height: auto; margin: 22px auto 0; overflow: visible; }

/* i testi sono dentro l'SVG, che sul telefono si rimpicciolisce: per questo
   sono piu' grandi di quanto sembri necessario sul computer */
.mappa .m-nome { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; fill: var(--verde); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; }
.mappa .m-nome-base { font-size: 20px; font-weight: 800; }
.mappa .m-nota { font-family: 'Nunito', sans-serif; font-size: 14px; font-style: italic; fill: #5f8fa6; }
.mappa .m-base .m-nota { fill: var(--arancio-bottone); font-weight: 700; }

/* ---- telefono ---- */

@media (max-width: 560px) {
  /* la barra non resta appiccicata: su uno schermo piccolo si mangiava mezza pagina */
  .barra { position: static; padding: 12px 18px; }

  /* il menu: griglia 2x2, cosi' si vedono tutte e 4 le voci. Prima era una
     riga che si scorreva col dito e "Distributori" restava fuori schermo:
     chi non sa che si scorre non lo trova mai (01/10/2026) */
  .menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    order: 3;
  }
  .menu a { white-space: nowrap; text-align: center; }

  /* barra dei contatti in fondo allo schermo: "Chiama" a sinistra, WhatsApp a
     destra (fino al 13/10/2026 c'era la chat con l'IA, tolta: online non
     avrebbe funzionato su un hosting statico). Prima erano due cerchi
     sovrapposti in un angolo, che coprivano i testi. Una barra a tutta
     larghezza, con lo stesso spazio lasciato in fondo alla pagina, non copre
     niente ed e' lo schema che i clienti conoscono dai siti dei negozi.
     Arancio: e' il bottone Chiama, l'unico posto dove l'arancio e' ammesso */
  .telefono-barra {
    position: fixed;
    left: 0;
    right: 50%;
    bottom: 0;
    z-index: 40;
    height: 60px;
    padding: 0 8px env(safe-area-inset-bottom);
    justify-content: center;
    border-radius: 0;
    background: var(--arancio-bottone);
    color: var(--bianco);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
    font-size: 1.05rem;
  }

  .icona-tel { width: 22px; height: 22px; }

  /* la meta' destra: stessa forma del Chiama, in verde */
  .whatsapp-barra {
    position: fixed;
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: 60px;
    padding: 0 8px env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--verde);
    color: var(--bianco);
    text-decoration: none;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
  }

  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  .azioni .bottone { width: 100%; text-align: center; }
  section { padding: 44px 18px; }
  .apertura { padding-top: 52px; padding-bottom: 20px; }
  /* qui la gru e' gia' sotto bottoni e foto, cioe' si sta gia' scorrendo:
     l'invito "scorri" lasciava solo un buco tra la gru e i numeri */
  .con-movimento .scorri { display: none; }
  .numeri { padding-top: 24px; }

  .apertura-contenuto { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vetrina { max-width: 250px; }

  /* qui la barra non resta in alto, quindi la rotaia si attacca allo schermo */
  .con-movimento .rotaia { position: fixed; top: 0; bottom: auto; z-index: 30; }
  /* "static" ignorerebbe lo z-index e lo sfondo vivo coprirebbe la barra */
  .con-movimento .barra { position: relative; }

  /* i passaggi uno sotto l'altro non ci stanno in uno schermo: la strada
     resta appiccicata in alto e i passaggi le scorrono sotto */
  /* il barattolo resta in alto mentre l'elenco gli scorre sotto, come la
     strada della scena 3 (stesso fondo pieno e stessa ombra che copre) */
  .con-movimento .barattolo {
    position: sticky;
    top: 12px;
    z-index: 5;
    max-width: none;
    height: 150px;
    padding: 8px 0;
    background: var(--bianco);
    border-radius: 14px;
    box-shadow: 0 -14px 0 var(--bianco), 0 6px 14px rgba(26, 74, 58, .10);
  }

  .con-movimento .strada {
    position: sticky;
    top: 12px;
    z-index: 5;
    /* pieno, non semitrasparente: anche al 94% il testo che passa sotto
       si leggeva in controluce */
    background-color: var(--fondo);
    border-radius: 14px;
    /* la prima ombra e' piena, color crema, e copre la striscia sopra la
       strada dove altrimenti si vedrebbe il testo che scorre */
    box-shadow: 0 -14px 0 var(--fondo), 0 6px 14px rgba(26, 74, 58, .10);
  }
  /* solo il carrellino: la pinza che pende copriva il testo mentre si legge */
  .rotaia-carrello { height: 9px; overflow: hidden; }
  .rotaia-carrello svg { height: 30px; }
}