/* =========================================================
   ART STUDIO — foglio di stile unico per tutte le pagine
   Palette e forme prese dai materiali di Esther:
   verde acqua della fascia del logo, azzurro dei riquadri,
   rosa/albicocca delle foto dello studio.
   ========================================================= */

/* ---------- Il carattere Atma ----------
   I file stanno nella cartella  caratteri  e vengono da Google Fonts, ma a
   servirli e' il nostro sito: cosi' chi lo visita non manda il suo indirizzo
   ai server di Google senza saperlo, e le pagine funzionano anche senza
   internet. Atma ha licenza SIL Open Font License: vedi caratteri\LEGGIMI.txt.
   Ogni peso ha due file: uno per le lettere di tutti i giorni e uno per quelle
   piu' rare: il browser scarica solo quello che gli serve davvero. */
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../caratteri/atma-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../caratteri/atma-400-est.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../caratteri/atma-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../caratteri/atma-500-est.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../caratteri/atma-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../caratteri/atma-600-est.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../caratteri/atma-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atma";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../caratteri/atma-700-est.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Variabili ---------- */
:root {
  --verde: #2e6e7d;          /* verde acqua della fascia con il logo */
  --verde-scuro: #235663;
  --azzurro: #6fb5e0;        /* azzurro dei fogli di Esther */
  --rosa: #c9738f;
  --giallo: #f0c36d;
  --carta: #fbf7f0;          /* sfondo carta */
  --inchiostro: #2f3436;     /* testo */
  --ombra: 0 6px 18px rgba(35, 86, 99, .18);
  --logo-d: 118px;           /* diametro del logo nella testata */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Atma: il carattere scelto da Esther, usato in tutto il sito */
  font-family: "Atma", "Segoe UI", system-ui, sans-serif;
  font-weight: 500;          /* il peso normale di Atma e' molto sottile */
  font-size: 1.3rem;        /* testo grande: il sito e' per tutte le eta' */
  line-height: 1.65;
  color: var(--inchiostro);
  background-color: var(--carta);
  /* macchie di colore in acquerello, molto tenui */
  background-image:
    radial-gradient(38rem 30rem at 12% 8%, rgba(111, 181, 224, .18), transparent 60%),
    radial-gradient(34rem 28rem at 88% 22%, rgba(201, 115, 143, .14), transparent 60%),
    radial-gradient(40rem 32rem at 70% 92%, rgba(240, 195, 109, .16), transparent 60%),
    radial-gradient(30rem 26rem at 8% 78%, rgba(46, 110, 125, .12), transparent 60%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }

a { color: var(--verde); }

h1, h2, h3 {
  font-family: "Atma", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* ---------- Testata con logo e titolo di pagina ----------
   Logo e titolo stanno insieme al centro della fascia. */
.testata {
  position: relative;
  background: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: .9rem 1.6rem;
  min-height: 96px;
  box-shadow: 0 4px 14px rgba(35, 86, 99, .25);
}

/* il tondo con la bambina (ritagliato dalla fascia originale da
   _strumenti/prepara-immagini.ps1) */
.marchio {
  flex: 0 0 auto;
  width: var(--logo-d);
  height: var(--logo-d);
  margin: calc(var(--logo-d) / -4) 0;   /* sborda sopra e sotto la fascia */
  border-radius: 50%;
  background-image: url("../immagini/logo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 3px var(--verde), 0 4px 12px rgba(0, 0, 0, .2);
  transition: transform .25s ease;
}

a.marchio:hover, a.marchio:focus-visible { transform: scale(1.04); }

/* Titolo non in grassetto: Atma nel peso normale del sito, piu' morbido e
   piu' vicino alla scrittura a mano di Esther. */
.testata-titolo {
  color: #fff;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.3vw, 2.6rem);
  letter-spacing: .02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  flex: 0 1 auto;
  text-align: center;
}

/* ---------- Contenitore dei contenuti ---------- */
/* Tutto il testo delle pagine e' centrato, come nei fogli scritti da Esther. */
.contenuto {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.4rem 1.4rem 3rem;
  text-align: center;
}

.contenuto.largo { max-width: 76rem; }

.titolo-sezione {
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  color: var(--verde);
  text-align: center;
  margin-bottom: 1rem;
}

.introduzione {
  text-align: center;
  font-size: 1.42rem;
  max-width: 46rem;
  margin: 0 auto 2.6rem;
}

/* ---------- Blocco di testo ----------
   Niente rettangolo bianco: il testo sta direttamente sulla carta dello
   sfondo, centrato. La classe resta per tenere insieme i paragrafi e dare
   l'aria giusta fra un blocco e l'altro. */
.scheda {
  padding: .2rem 0;
  margin: 0 auto 1.8rem;
  text-align: center;
}

.scheda p { margin: 0 0 1rem; }
.scheda p:last-child { margin-bottom: 0; }

.scheda h2 {
  font-size: 1.8rem;
  color: var(--verde);
  margin-bottom: .6rem;
}


/* La macchia di acquerello al posto del riquadro azzurro: niente scheda
   bianca, niente bordi, niente ombra: solo la macchia appoggiata sulla carta,
   con il testo in mezzo.
   Il file e' un PNG con il bianco reso trasparente (sfondo-riquadro.png,
   ricavato da sfondo-riquadro.jpg da _strumenti\prepara-macchia.ps1): con il
   JPEG resterebbe comunque un rettangolo bianco intorno alla macchia.
   L'immagine viene stirata per riempire tutto il blocco: e' una macchia
   astratta, la deformazione non si vede.
   Testo scuro e non bianco: l'acquerello e' chiaro e in gran parte
   trasparente, il bianco ci sparirebbe sopra. */
.riquadro {
  background: url("../immagini/sfondo-riquadro.png") center / 100% 100% no-repeat;
  color: #14313a;
  padding: 1.6rem 1.8rem;
  margin: 0 auto 1.8rem;
  text-align: center;
  font-size: 1.35rem;
}

.riquadro p { margin: 0 0 .6rem; }
.riquadro p:last-child { margin-bottom: 0; }

/* Elenchi senza pallino: con il testo centrato i pallini resterebbero
   sfalsati sulla sinistra. */
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { margin-bottom: .5rem; }

/* ---------- Calendario delle prossime date (pagina Novita) ----------
   Le date stanno tutte in appuntamenti.js: qui c'e' solo il vestito.
   Il giorno con un appuntamento diventa un tondo azzurro cliccabile. */
.calendario { margin: 2.6rem auto 2rem; max-width: 34rem; }

.calendario-aiuto {
  font-size: 1.05rem;
  color: #5b6b6f;
  margin: 0 0 1.2rem;
}

.calendario-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-bottom: 1rem;
}

.calendario-mese {
  font-size: 1.5rem;
  color: var(--verde);
  min-width: 11rem;
}

.calendario-freccia {
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--verde);
  cursor: pointer;
  transition: background .2s ease;
}

.calendario-freccia:hover,
.calendario-freccia:focus-visible { background: rgba(46, 110, 125, .14); }

.calendario-griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
}

.calendario-nome-giorno {
  font-size: .95rem;
  color: var(--verde);
  letter-spacing: .05em;
  padding-bottom: .3rem;
}

.calendario-giorno {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
}

.calendario-giorno.passato { color: rgba(47, 52, 54, .35); }
.calendario-giorno.oggi { box-shadow: inset 0 0 0 2px var(--verde); }

button.calendario-giorno {
  background: var(--azzurro);
  color: #14313a;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease;
}

button.calendario-giorno.passato { background: rgba(111, 181, 224, .4); }
button.calendario-giorno:hover,
button.calendario-giorno:focus-visible { transform: scale(1.1); }

.calendario-elenco { list-style: none; margin: 1.8rem 0 0; padding: 0; }

.appuntamento {
  margin: 0 0 1.2rem;
  padding: .5rem .8rem;
  border-radius: 16px;
  transition: background .3s ease;
}

.appuntamento.evidenziato { background: rgba(111, 181, 224, .3); }
.appuntamento.passato { opacity: .55; }

.appuntamento p { margin: 0; }

.appuntamento-data { font-size: 1.1rem; color: var(--verde); }
.appuntamento-titolo { font-size: 1.3rem; }
.appuntamento-nota { font-size: 1.05rem; color: #5b6b6f; }

.calendario-vuoto { color: #5b6b6f; font-size: 1.15rem; }

.frase-finale {
  text-align: center;
  font-family: "Atma", cursive;
  font-size: 1.9rem;
  color: var(--verde);
  margin: 2rem 0 .5rem;
}

/* ---------- Il pappagallino con il fumetto (home) ----------
   Sta sopra ai pulsanti e spiega che i cerchi si possono cliccare.
   Il fumetto e' un riquadro chiaro con la codina che punta all'uccellino:
   qui il fondo bianco ci vuole, e' quello che lo fa leggere come una nuvoletta
   di fumetto e non come uno dei blocchi di testo della pagina. */
.indicazione {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .2rem;
  margin: 0 auto 2.2rem;
}

/* l'uccellino sta un po' piu' in alto del fondo della nuvoletta, cosi' la
   codina gli arriva al becco */
.indicazione-uccellino {
  flex: 0 0 auto;
  width: 106px;
  height: 82px;
  overflow: visible;
}

/* La nuvoletta: tonda come nei fumetti, non un rettangolo con la punta.
   Sta in alto a destra dell'uccellino e la codina scende verso il suo becco. */
.fumetto {
  position: relative;
  margin: 0 0 5rem;
  padding: 1.4rem 1.9rem;
  background: #fff;
  border: 3px solid var(--verde);
  border-radius: 50% / 46%;
  color: var(--verde);
  font-size: 1.2rem;
  line-height: 1.3;
  transform: rotate(-1.5deg);   /* un filo storta: sembra disegnata a mano */
}

.fumetto p { margin: 0; }

.fumetto-codina {
  position: absolute;
  left: -6%;
  bottom: -29px;      /* sporge sotto, con il bordo alto dentro alla nuvoletta */
  width: 44px;
  height: 34px;
  overflow: visible;
}

/* ---------- Pulsanti tondi della home ---------- */
.pulsanti {
  list-style: none;
  margin: 0 auto 3rem;
  display: grid;
  position: relative;         /* ci appoggio sopra la liana */
  /* minmax(0,1fr) e non 1fr: con "1fr" le colonne si allargherebbero in base
     alla parola piu' lunga del titolo e verrebbero larghe in modo diverso */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5rem 2rem;             /* righe distanti: serve aria per gli spostamenti */
  max-width: 68rem;
  padding: 0 3.5rem;          /* margine di sicurezza per gli spostamenti laterali */
  --unita: 1px;               /* quanto sono marcati gli spostamenti */
}

/* Disposizione sparsa: ogni pulsante ha il suo spostamento, la sua
   grandezza e (solo quelli senza foto) una lieve inclinazione, cosi'
   la home sembra un collage appoggiato a mano invece di una griglia. */
.pulsanti > li {
  position: relative;
  z-index: 1;                 /* i pulsanti stanno davanti alla liana */
  display: flex;
  justify-content: center;
  align-items: center;        /* senza questo il cerchio si stira in altezza
                                 e diventa un ovale con la foto tagliata */
  --sposta-x: 0px;
  --sposta-y: 0px;
  --grandezza: 100%;
  --inclina: 0deg;
  transform: translate(var(--sposta-x), var(--sposta-y));
}

/* Ogni riga e' spostata di lato tutta insieme (a destra, a sinistra, a destra):
   cosi' nessun pulsante resta incolonnato sotto un altro, ma la distanza fra
   vicini di riga non cambia e non si toccano mai. */
.pulsanti > li:nth-of-type(1) { --sposta-x: calc( 42 * var(--unita)); --sposta-y: calc( 18 * var(--unita)); --grandezza: 96%;  --inclina: -2.5deg; }
.pulsanti > li:nth-of-type(2) { --sposta-x: calc( 54 * var(--unita)); --sposta-y: calc(-30 * var(--unita)); --grandezza: 100%; --inclina:  2deg; }
.pulsanti > li:nth-of-type(3) { --sposta-x: calc( 38 * var(--unita)); --sposta-y: calc( 34 * var(--unita)); --grandezza: 90%;  --inclina:  3deg; }
.pulsanti > li:nth-of-type(4) { --sposta-x: calc(-48 * var(--unita)); --sposta-y: calc(-26 * var(--unita)); --grandezza: 98%;  --inclina: -2deg; }
.pulsanti > li:nth-of-type(5) { --sposta-x: calc(-38 * var(--unita)); --sposta-y: calc( 30 * var(--unita)); --grandezza: 92%;  --inclina:  2.5deg; }
.pulsanti > li:nth-of-type(6) { --sposta-x: calc(-52 * var(--unita)); --sposta-y: calc(-20 * var(--unita)); --grandezza: 100%; --inclina: -3deg; }
.pulsanti > li:nth-of-type(7) { --sposta-x: calc( 40 * var(--unita)); --sposta-y: calc( 20 * var(--unita)); --grandezza: 92%;  --inclina:  2deg; }
.pulsanti > li:nth-of-type(8) { --sposta-x: calc( 52 * var(--unita)); --sposta-y: calc(-26 * var(--unita)); --grandezza: 100%; --inclina: -2deg; }
.pulsanti > li:nth-of-type(9) { --sposta-x: calc( 36 * var(--unita)); --sposta-y: calc( 30 * var(--unita)); --grandezza: 90%;  --inclina:  2.5deg; }
.pulsanti > li:nth-of-type(10) { --sposta-x: calc(-34 * var(--unita)); --sposta-y: calc(-22 * var(--unita)); --grandezza: 98%; --inclina: -2deg; }

/* con tre colonne il decimo pulsante resta da solo nell'ultima riga:
   lo sposto di una colonna intera (piu' il suo spazio) per tenerlo al centro */
.pulsanti > li:nth-of-type(10) {
  transform: translate(calc(100% + 2rem + var(--sposta-x)), var(--sposta-y));
}

.pulsante {
  display: block;
  width: var(--grandezza, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(35, 86, 99, .22);
  transition: transform .25s ease, box-shadow .25s ease;
  /* Le foto dei bottoni vengono rimpicciolite parecchio. Senza questo il
     browser le disegna con un ridimensionamento veloce e approssimativo e
     sembrano sgranate, finche' non ci passi sopra il mouse (e' l'effetto
     hover che le fa ridisegnare bene). Cosi' sono nitide fin da subito. */
  transform: translateZ(0);
}

.pulsante:hover,
.pulsante:focus-visible {
  transform: translate3d(0, -6px, 0) scale(1.03);
  box-shadow: 0 14px 30px rgba(35, 86, 99, .3);
}

.pulsante img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pulsante ancora senza foto: sfondo colorato + titolo.
   L'inclinazione la do solo a questi, dove si vede sul testo: su una foto
   tonda non si noterebbe e la farebbe solo ricalcolare al browser. */
.pulsante.senza-foto {
  rotate: var(--inclina, 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12%;
  background: #eaf4f7;
  box-shadow: inset 0 0 0 5px var(--verde), 0 8px 20px rgba(35, 86, 99, .22);
}

.pulsante.senza-foto span {
  font-family: "Atma", cursive;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  line-height: 1.05;
  color: var(--verde-scuro);
}

.pulsante.tinta-azzurra  { background: linear-gradient(150deg, #dceefa, #b9dcf3); }
.pulsante.tinta-rosa     { background: linear-gradient(150deg, #fbe4ea, #f2c3d1); }
.pulsante.tinta-gialla   { background: linear-gradient(150deg, #fdf0d5, #f7dfae); }
.pulsante.tinta-verde    { background: linear-gradient(150deg, #dff0ef, #b7ddda); }
.pulsante.tinta-lilla    { background: linear-gradient(150deg, #ece4f5, #d3c3e8); }

/* ---------- Liana con foglie e uccellini ----------
   Il disegno lo costruisce js/liane.js, che misura dove sono finiti
   davvero i pulsanti e ci fa passare dietro il filo. */
.fili {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;      /* non deve mai rubare i clic ai pulsanti */
}

/* Gli uccellini stanno sopra ai pulsanti: se stessero sotto sparirebbero ogni
   volta che attraversano un cerchio. La loro tela e' piu' larga della griglia
   (arriva ai bordi della finestra) e la misura gliela da' js/liane.js. */
.fili.volatili {
  z-index: 2;
  inset: auto;
}

.filo {
  fill: none;
  stroke: #5d9578;
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: .85;
}

.foglia { fill: #6aa87f; }
.foglia.chiara { fill: #8cc09b; }

/* le ali battono ogni tanto, non di continuo: e' piu' naturale e meno invadente */
@keyframes batti-ali {
  0%, 68%, 100% { transform: rotate(0deg); }
  74%           { transform: rotate(-34deg); }
  80%           { transform: rotate(8deg); }
  86%           { transform: rotate(-20deg); }
  92%           { transform: rotate(4deg); }
}

.ala {
  transform-box: fill-box;
  transform-origin: 12% 85%;
  animation: batti-ali 4.5s ease-in-out infinite;
  animation-delay: var(--ritardo, 0s);
}

/* mentre e' in volo: ali che sbattono in fretta e niente saltelli */
@keyframes sbatti-ali {
  0%, 100% { transform: rotate(-36deg); }
  50%      { transform: rotate(26deg); }
}

.uccellino.vola { animation: none; }

.uccellino.vola .ala {
  animation: sbatti-ali .26s ease-in-out infinite;
  animation-delay: 0s;
}

/* e ogni tanto l'uccellino fa un saltello sul filo */
@keyframes saltella {
  0%, 60%, 100% { transform: translate(0, 0) rotate(0deg); }
  68%           { transform: translate(2px, -10px) rotate(-8deg); }
  76%           { transform: translate(4px, -4px) rotate(-3deg); }
  84%           { transform: translate(1px, -1px) rotate(0deg); }
}

.uccellino {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: saltella 11s ease-in-out infinite;
}

/* ---------- Gocce di pittura (pagine interne) ----------
   Le crea js/gocce.js. Tutto lo strato sta dietro al testo e non
   intercetta i clic. Per farle piu' o meno evidenti si cambia
   l'opacita' di .macchia. */
/* absolute e non fixed: cosi' le macchie restano attaccate al punto della
   pagina dove sono cadute e scorrono insieme al resto */
.pittura {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

body { position: relative; }   /* serve alla .pittura per misurarsi sulla pagina */

/* la goccia che scende: accelera come se cadesse davvero */
.goccia {
  position: absolute;
  width: 13px;
  height: 20px;
  margin-left: -6px;
  /* stretta in cima e tonda in fondo, come una goccia vera */
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  opacity: .8;
  animation: cade var(--durata, .9s) cubic-bezier(.5, 0, .9, .4) forwards;
}

@keyframes cade {
  from { transform: translateY(0) scaleY(1); }
  to   { transform: translateY(var(--caduta, 400px)) scaleY(1.35); }
}

/* gli schizzi dell'impatto */
.schizzo {
  position: absolute;
  opacity: .75;
  animation: schizza .85s cubic-bezier(.15, .6, .5, 1) forwards;
}

@keyframes schizza {
  from { transform: translate(0, 0) scale(1) rotate(0); opacity: .75; }
  to   { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.25) rotate(var(--giro, 90deg));
         opacity: 0; }
}

/* l'onda che si allarga dal punto in cui la goccia ha colpito */
.onda {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: .5;
  animation: allarga-onda .6s ease-out forwards;
}

@keyframes allarga-onda {
  from { transform: scale(.3); opacity: .55; }
  to   { transform: scale(3.4) scaleY(.55); opacity: 0; }
}

/* La macchia che resta. L'opacita' finale e' quella normale dell'elemento e
   l'animazione ci arriva partendo da zero: cosi' la macchia c'e' comunque,
   anche se l'animazione non parte. Alza questo valore per macchie piu' forti. */
.macchia {
  position: absolute;
  opacity: .34;
  transition: opacity 3s ease-in;
  animation: allarga .5s cubic-bezier(.2, 1.4, .5, 1);
}

@keyframes allarga {
  from { opacity: 0; transform: scale(.2); }
}

.macchia.svanisce { opacity: 0; }

/* ---------- Pulsante "torna alla home" ---------- */
.torna-home {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--verde);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  box-shadow: var(--ombra);
  transition: background .2s ease, transform .2s ease;
}

.torna-home:hover,
.torna-home:focus-visible { background: var(--verde-scuro); transform: translateY(-2px); }

.barra-navigazione {
  max-width: 76rem;
  margin: 1.6rem auto 0;
  padding: 0 1.4rem;
}

/* ---------- Galleria che scorre verso il basso ---------- */
.galleria { margin: 2.6rem 0 2.6rem; }

.galleria-intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

.galleria-aiuto { margin: 0; font-size: 1.15rem; }

/* lo spazio della fila e' pronto prima che arrivino le foto: e' alto quanto
   loro, cosi' quando si caricano la pagina non fa un salto sotto le dita */
.galleria-vetrina {
  position: relative;
  min-height: clamp(150px, 24vh, 210px);
}

/* senza JavaScript le foto restano in fila, si scorrono con il dito o la barra */
/* niente "gap" ma un margine su ogni foto: cosi' le due meta' del nastro
   sono larghe esattamente uguali e il giro si chiude senza scatti */
.galleria-nastro {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}

/* Con JavaScript attivo la vetrina diventa un nastro di foto.

   Questo e' il caso in cui il nastro NON si muove da solo: succede quando nel
   telefono o nel computer sono state disattivate le animazioni. Allora resta
   una fila ferma, che si scorre col dito o con la barra. Se invece si muove,
   comanda la classe "col-nastro-animato" qui sotto. */
.galleria-vetrina.attiva {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* trascinando non si torna alla pagina prima */
  border-radius: 22px;
  /* sfumatura a destra e a sinistra, cosi' le foto entrano ed escono in morbido */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  /* la barra di scorrimento non si vede: il nastro va da solo */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.galleria-vetrina.attiva::-webkit-scrollbar { display: none; }

.galleria-vetrina.attiva .galleria-nastro {
  overflow: visible;
  width: max-content;
}

/* Il nastro che scorre da solo.

   A muoverlo e' il CSS, cioe' il browser per conto suo: e' l'unico modo per
   averlo davvero liscio. (Muovendolo da JavaScript, un pezzetto per
   fotogramma, si vedono dei microscatti: lo scorrimento si sposta solo di
   pixel interi e a queste velocita' lente la differenza si nota.)

   In cambio il browser deve tenersi pronta tutta la striscia, quindi non deve
   essere troppo lunga: per questo sul telefono js/sito.js ci mette dentro solo
   una decina di foto invece di tutte. */
.galleria-vetrina.col-nastro-animato { overflow: hidden; }

.galleria-vetrina.col-nastro-animato .galleria-nastro {
  animation: scorri-di-lato var(--durata, 90s) linear infinite;
  will-change: transform;
}

/* si ferma quando ci passi sopra con il mouse (cosi' e' facile cliccare),
   quando ci arrivi con la tastiera e mentre guardi una foto ingrandita */
.galleria-vetrina.col-nastro-animato:hover .galleria-nastro,
.galleria-vetrina.col-nastro-animato:has(:focus-visible) .galleria-nastro,
.galleria-vetrina.col-nastro-animato.in-pausa .galleria-nastro { animation-play-state: paused; }

@keyframes scorri-di-lato {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.galleria-foto {
  flex: 0 0 auto;
  border: none;
  padding: 0;
  margin: 0 1.4rem 0 0;
  background: none;
  cursor: zoom-in;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ombra);
  transition: transform .25s ease;
}

.galleria-foto:hover,
.galleria-foto:focus-visible { transform: scale(1.03); }

/* altezza uguale per tutte: la fila resta ordinata anche con foto
   verticali e orizzontali mescolate */
.galleria-foto img {
  height: clamp(150px, 24vh, 210px);
  width: auto;
  max-width: none;
  border-radius: 16px;
}

/* ---------- Finestra di ingrandimento ---------- */
.ingranditore {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 34, 38, .92);
  padding: 1rem;
}

.ingranditore[aria-hidden="false"] { display: flex; }

.ingranditore img {
  max-width: min(94vw, 1200px);
  max-height: 82vh;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.ingranditore-didascalia {
  position: absolute;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
}

.ingranditore button {
  position: absolute;
  font-family: inherit;
  color: var(--verde-scuro);
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transition: background .2s ease, transform .2s ease;
}

.ingranditore button:hover,
.ingranditore button:focus-visible { background: var(--giallo); transform: scale(1.06); }

.ingranditore .chiudi     { top: 1.2rem; right: 1.2rem; }
.ingranditore .precedente { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.ingranditore .successiva { right: 1.2rem; top: 50%; transform: translateY(-50%); }

.ingranditore .precedente:hover, .ingranditore .precedente:focus-visible,
.ingranditore .successiva:hover, .ingranditore .successiva:focus-visible {
  transform: translateY(-50%) scale(1.06);
}

body.bloccato { overflow: hidden; }

/* ---------- Pie' di pagina ---------- */
.pie {
  background: var(--verde);
  color: #fff;
  padding: 2.2rem 1.4rem 2.6rem;
  text-align: center;
  font-size: 1.18rem;
}

.pie a { color: #fff; }

.pie-contatti { margin: 0 0 1rem; }

/* Il pulsantino per scrivere su WhatsApp: bianco pieno, cosi' si stacca
   dalla fascia verde e si capisce che si puo' premere. */
.pie-whatsapp {
  display: inline-block;
  margin: .5rem 0 .2rem;
  padding: .35rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--verde) !important;
  text-decoration: none;
  font-size: 1.1rem;
  transition: transform .2s ease;
}

.pie-whatsapp:hover,
.pie-whatsapp:focus-visible { transform: scale(1.04); text-decoration: none; }

.pie-social {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.pie-mappa {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .35);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.4rem;
  font-size: 1.1rem;
}

/* ---------- Accessibilita' ---------- */
:focus-visible { outline: 4px solid var(--giallo); outline-offset: 3px; }

.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* se nel computer sono state disattivate le animazioni, le foto non scorrono
   da sole: restano in fila e si scorrono a mano */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ala, .uccellino { animation: none; }   /* liana e uccellini restano fermi */
  /* il nastro non parte da solo (ci pensa js/sito.js a non farlo partire):
     resta in fila e lo si scorre a mano, quindi via anche la sfumatura ai lati */
  .galleria-vetrina.attiva { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Schermi piccoli ---------- */
@media (max-width: 720px) {
  :root { --logo-d: 74px; }

  body { font-size: 1.2rem; }

  .testata {
    gap: .9rem;
    padding: .7rem 1rem;
    min-height: 74px;
  }

  .testata-titolo { font-size: clamp(1.1rem, 4.6vw, 1.7rem); }

  .indicazione-uccellino { width: 84px; height: 65px; }
  .fumetto { font-size: 1.05rem; padding: 1.2rem 1.5rem; margin-bottom: 4rem; }

  /* due colonne: gli spostamenti diventano piu' contenuti e gli ultimi due
     pulsanti riempiono la riga, quindi non vanno piu' centrati */
  .pulsanti {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.2rem;
    padding: 0 1.6rem;
    --unita: 0.42px;
  }

  /* con due colonne le righe sono tutte piene: il decimo pulsante non e' piu'
     da solo, quindi torna al suo posto senza lo spostamento di centratura */
  .pulsanti > li:nth-of-type(10) {
    transform: translate(var(--sposta-x), var(--sposta-y));
  }

  .ingranditore button { width: 54px; height: 54px; font-size: 1.6rem; }
  .ingranditore .precedente { left: .4rem; }
  .ingranditore .successiva { right: .4rem; }
}

@media (max-width: 420px) {
  /* Una colonna sola. Se restassero tutti larghi uguale e incolonnati
     sembrerebbe un elenco: quindi li rimpicciolisco un po' e li sposto a destra
     e a sinistra a turno, come sul computer. Lo spostamento e' in percentuale
     della colonna (non in pixel): cosi' resta dentro allo schermo sia su un
     telefono stretto che su uno largo, e non compare mai la barra laterale. */
  .pulsanti { grid-template-columns: 1fr; max-width: 22rem; padding: 0 1rem; --unita: 0.55px; }

  /* la fila si ripete ogni cinque, cosi' non si vede lo schema */
  .pulsanti > li:nth-of-type(5n+1) { --sposta-x:   9%; --grandezza: 84%; }
  .pulsanti > li:nth-of-type(5n+2) { --sposta-x:  -7%; --grandezza: 80%; }
  .pulsanti > li:nth-of-type(5n+3) { --sposta-x:   4%; --grandezza: 88%; }
  .pulsanti > li:nth-of-type(5n+4) { --sposta-x: -10%; --grandezza: 82%; }
  .pulsanti > li:nth-of-type(5n+5) { --sposta-x:   6%; --grandezza: 78%; }

  /* qui ogni riga ha un pulsante solo: anche il decimo sta gia' al centro */
  .pulsanti > li:nth-of-type(10) { transform: translate(var(--sposta-x), var(--sposta-y)); }
}