/* components.css — componenti childcare_nursery: testata a pillola, bordo a nuvola fra le bande, testata
   split, pilastri su banda bosco, schede attività, mosaico degli ambienti, recapiti, piè di pagina.
   Due grammatiche fotografiche distinte, perché il parco foto di un nido è diviso in due:
   gli AMBIENTI vanno grandi in riquadri a raggio ampio, le foto di persone entrano piccole in cornici
   a pillola. Mescolarle è il difetto: la pillola ritaglia agli angoli e su una stanza mangia il murale. */

/* ---------------------------------------------------------------- testata a pillola galleggiante */
.site-header {
  position: fixed;
  top: var(--header-gap);
  left: var(--gutter); right: var(--gutter);
  z-index: 100;
  background: var(--brand);
  color: var(--on-dark);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
  transition: top .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--header-h);
  padding-inline: clamp(1rem, 0.6rem + 1.4vw, 1.9rem);
  width: 100%; max-width: var(--container); margin-inline: auto;
}
/* ⚠ Centratura verticale ESPLICITA: il blocco navigazione di WordPress porta margini propri sulla lista
   e sulle voci, e senza questo le voci restano più in alto del marchio e della CTA — lo spazio sopra e
   sotto non combacia. Si misura come |distanza dal bordo alto − distanza dal bordo basso| della riga. */
.site-header__row > * { align-self: center; margin-block: 0; }
.site-nav ul, .site-nav li { margin-block: 0; }
.site-nav .wp-block-navigation__container { align-items: center; }
/* allo scorrimento la pillola si stringe verso il bordo: il gesto è piccolo e non sposta il contenuto,
   perché l'altezza resta quella e il body ha già il suo padding-top */
.site-header.is-stuck { top: 6px; box-shadow: 0 14px 34px rgba(35, 33, 31, .26); }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; flex: none; }
.wordmark__mark { display: block; flex: none; }
.wordmark__mark img { width: 42px; height: 42px; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark__name { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; color: var(--on-dark); }
.wordmark__sub { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); }
/* Il marchio reale del cliente è un lockup orizzontale: si mostra intero, senza deformarlo.
   ⚠ È un disegno a tratto GRAFITE: sulla pillola verde bosco sparirebbe (scuro su scuro). Il filtro lo
   porta a silhouette bianca — è l'equivalente raster della lezione del logo nero su testata nera. Nel
   piè, dove il fondo è ancora più scuro, vale lo stesso. */
/* ⚠ La MISURA la detta la scritta, non l'albero: nel lockup del cliente la fascia del corsivo è il 28%
   dell'altezza totale, quindi a 40px il nome usciva a ~11px — illeggibile, ed è il rilievo del cliente.
   A 64px il corsivo sta a ~18px e si legge. La chioma scavalca la scritta, quindi il lockup NON si
   separa in due pezzi senza mutilarlo: si ingrandisce intero e la testata gli fa spazio. */
/* ⚠⚠ Il lockup del cliente NON è un lockup da testata: l'albero è alto e la scritta bassa, quindi a
   qualunque altezza sostenibile la scritta resta un filo — a 117px di lockup il nome aveva 4px per
   carattere. La testata usa perciò i due pezzi AFFIANCATI: il marchio quadrato e la scritta ritagliata
   sulle sole righe del testo (rapporto 4.8), che a 32px d'altezza dà 153px, cioè ~9px per carattere.
   Il lockup intero resta disponibile per le superfici che hanno spazio in altezza. */
.wordmark--logo { gap: var(--space-3); }
.wordmark--logo img { filter: brightness(0) invert(1); }
.wordmark__albero { width: auto; height: 52px; flex: none; }
.wordmark__scritta { width: auto; height: 32px; flex: none; }
@media (max-width: 720px) {
  .wordmark__albero { height: 42px; }
  .wordmark__scritta { height: 25px; }
}

.site-nav { margin-left: auto; }
.site-nav a { color: var(--on-dark); text-decoration: none; font-weight: 500; padding: .4em .1em; }
.site-nav a:hover { color: var(--coral-lt); text-decoration: underline; }
.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close { color: var(--on-dark); }
/* ⚠⚠ L'overlay del menu su telefono: WordPress core gli impone `background:#fff; color:#000`,
   `align-items:flex-end` e padding laterale ZERO. Il risultato con la nostra palette è il caso peggiore —
   voci color panna su fondo bianco (contrasto MISURATO 1.07) e incollate al bordo destro, cioè un menu
   che si apre e non si vede.
   ⚠ La regola del core è `.wp-block-navigation:not(.has-background) …:not(.disable-default-…)`, cioè
   specificità 0-5-0. Una catena da 0-3-1 applica il PADDING (che il core non tocca) ma perde sul COLORE,
   e il difetto sembra sparito a metà. Qui la catena è body + 5 classi = 0-5-1: appena sopra, senza
   `!important` e senza toccare gli attributi del blocco. */
body .site-header .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--brand-deep);
  color: var(--on-dark);
  padding: calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-7);
}
body .site-header .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 0;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
}
body .site-header .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--space-5); align-items: center; }
body .site-header .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  text-decoration: none;
}
body .site-header .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--coral-lt); }
body .site-nav .wp-block-navigation__responsive-container-close { color: var(--on-dark); padding: var(--space-4); }

.site-header__tel { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--on-dark); text-decoration: none; font-weight: 500; white-space: nowrap; }
.site-header__tel:hover { color: var(--coral-lt); }
.site-header__tel svg { width: 19px; height: 19px; }
.site-header__tel--compact { display: none; color: var(--on-dark); }
.site-header__tel--compact svg { width: 22px; height: 22px; }
.site-header__cta { padding: .7em 1.25em; font-size: .95rem; flex: none; }

@media (max-width: 1080px) {
  .site-header__tel { display: none; }
  .site-header__tel--compact { display: inline-flex; align-items: center; }
}
@media (max-width: 720px) {
  .site-header__cta { display: none; }   /* su telefono la CTA vive nella barra fissa in basso */
  .wordmark__sub { display: none; }
}

/* ---------------------------------------------------------------- bordo a nuvola fra le bande */
/* Il segno che tiene insieme il sito: le bande non finiscono dritte, si chiudono con un festone tondo.
   È un gradiente ripetuto, non un'immagine: nessuna richiesta in più e scala a qualunque larghezza.
   La variabile --cloud-fill dice DI CHE COLORE è la nuvola, cioè il colore della banda che ARRIVA. */
.cloud { position: relative; --cloud-fill: var(--paper); }
.cloud::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--scallop);
  background-image: radial-gradient(circle at 50% 100%, var(--cloud-fill) 0 calc(var(--scallop) / 2), transparent calc(var(--scallop) / 2 + 1px));
  background-size: var(--scallop) var(--scallop);
  background-repeat: repeat-x;
  pointer-events: none;
}
.cloud-top { position: relative; --cloud-fill: var(--paper); }
.cloud-top::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--scallop);
  background-image: radial-gradient(circle at 50% 0, var(--cloud-fill) 0 calc(var(--scallop) / 2), transparent calc(var(--scallop) / 2 + 1px));
  background-size: var(--scallop) var(--scallop);
  background-repeat: repeat-x;
  pointer-events: none;
}
.cloud--sage { --cloud-fill: var(--sage-tint); }
.cloud--paper { --cloud-fill: var(--paper); }
.cloud--brand { --cloud-fill: var(--brand); }
.cloud--surface { --cloud-fill: var(--surface); }
/* il contenuto della banda non deve finire sotto al festone */
.cloud > .container { position: relative; z-index: 1; }
/* ⚠ Il festone OCCUPA i suoi 30px dentro la sezione: con mezzo scallop di compenso lo spazio libero
   sotto i denti scendeva a 87px contro i 102px delle sezioni piane, e la banda sembrava più stretta
   pur avendo PIÙ padding. Si compensa lo scallop INTERO, così il respiro percepito è lo stesso ovunque. */
.cloud { padding-bottom: calc(var(--section-y) + var(--scallop)); }
.cloud-top { padding-top: calc(var(--section-y) + var(--scallop)); }

/* ---------------------------------------------------------------- testata */
/* ⚠ Il respiro sotto la testata deve pareggiare quello sopra, altrimenti la banda seguente sembra
   incollata ai bottoni. Sopra l'aria è: stacco della pillola + padding dell'hero; sotto c'è solo il
   padding, quindi va sommato lo stesso stacco. Misurato prima: 78px sopra contro ZERO sotto. */
.hero { position: relative; background: var(--paper);
  padding-block: var(--hero-respiro) calc(var(--hero-respiro) + var(--header-gap)); }
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.02fr 0.98fr; } }
.hero__title { margin-bottom: var(--space-5); }
.hero__lead { font-size: var(--text-md); color: var(--ink-soft); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
/* la fogliolina del marchio, grande e tenue, dietro la fotografia: il tratto disegnato a mano che torna */
.hero__leaf { position: absolute; width: 132px; height: 132px; background: var(--sage); opacity: .55; z-index: -1;
  -webkit-mask: var(--leaf-mask) center / contain no-repeat; mask: var(--leaf-mask) center / contain no-repeat; }
.hero__leaf--a { top: -46px; left: -38px; transform: rotate(-18deg); }
.hero__leaf--b { bottom: -40px; right: -30px; transform: rotate(148deg); width: 96px; height: 96px; }
@media (max-width: 700px) { .hero__leaf { display: none; } }

/* testata senza fotografia idonea: campitura di marca col segno del marchio (nessuna foto finta) */
.hero--design .hero__panel {
  background: var(--sage-tint);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: grid; place-items: center; min-height: 320px;
}
.hero--design .hero__panel::after {
  content: ""; width: min(230px, 60%); aspect-ratio: 1; background: var(--brand); opacity: .5;
  -webkit-mask: var(--leaf-mask) center / contain no-repeat; mask: var(--leaf-mask) center / contain no-repeat;
}

/* ---------------------------------------------------------------- pilastri (i motivi) su banda bosco */
.pillars { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
/* padding orizzontale più stretto del verticale: la copy del cliente è lunga (128 caratteri) e in tre
   colonne ogni riga stava su 38 caratteri — stretta da leggere. Così il testo guadagna larghezza senza
   togliere aria sopra e sotto. */
.pillar { background: var(--brand-mid); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); }
.pillar__ico { width: 46px; height: 46px; border-radius: var(--radius-pill); background: var(--paper); color: var(--brand);
  display: grid; place-items: center; margin-bottom: var(--space-4); }
.pillar__ico svg { width: 24px; height: 24px; }
.pillar h3 { color: var(--on-dark); margin-bottom: var(--space-2); }
/* ⚠ Sulle tessere il fondo è --brand-mid, più chiaro della banda: lì --on-dark-muted fa 3,76 (sotto AA),
   mentre sulla banda piena faceva 6,15. Il testo tenue NON si usa su questa superficie: serve --on-dark
   (5,49). È il token verificato su un fondo e usato su un altro. */
.pillar p { color: var(--on-dark); margin: 0; }

/* ---------------------------------------------------------------- blocco a due campi (chi siamo) */
.split { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--flip .split__media { order: 2; } }
.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.split__body p { color: var(--ink-soft); }

/* ---------------------------------------------------------------- aree e percorso */
.areas { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .areas { grid-template-columns: 1fr 1fr; } }
.areas__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
@media (min-width: 900px) { .areas__media img { aspect-ratio: 4 / 5; } }

/* ---------------------------------------------------------------- schede attività */
.cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__media { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.card__ico { width: 34px; height: 34px; color: var(--coral-ink); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--ink-muted); }
/* una tessera su tre porta la campitura: l'arcobaleno è controllato, non caos */
.card:nth-child(2) { background: var(--sage-tint); }
.card:nth-child(3) { background: var(--surface); }

/* ---------------------------------------------------------------- mosaico degli ambienti */
/* Gli ambienti sono il patrimonio visivo del nido: vanno GRANDI. Le campate CHIUDONO la griglia:
   su 4 colonne, 2+1+1 e 2+1+1 = 12 celle esatte. ⚠ Una tessera a doppia RIGA sembrava più ricca ma
   lasciava un buco: la campata larga che la seguiva non entrava nella riga rimasta e scivolava giù. */
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.mosaic a { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mosaic a:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .mosaic a:hover img { transform: none; } }
@media (min-width: 900px) { .mosaic__item--wide { grid-column: span 2; } }
.mosaic__item--wide img { aspect-ratio: 16 / 10; }
.mosaic a:not(.mosaic__item--wide) img { aspect-ratio: 1; }

/* cornice a pillola: la grammatica delle foto di PERSONE, mai degli ambienti */
.photo-pill { border-radius: var(--radius-pill); overflow: hidden; border: 6px solid var(--sage); background: var(--sage); }
.photo-pill img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-pill--coral { border-color: var(--coral-lt); background: var(--coral-lt); }
.photo-pill__cap { display: block; text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: .95rem; color: var(--ink); padding: var(--space-2) var(--space-4) var(--space-3); }

/* ---------------------------------------------------------------- recapiti */
.contact-cols { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contact-cols { grid-template-columns: 1.05fr 0.95fr; } }
.contact-card { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-card); }
.contact-dl { margin: 0; display: grid; gap: var(--space-4); }
.contact-dl dt { font-family: var(--font-display); font-weight: 400; font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--coral-ink); }
.contact-dl dd { margin: .2rem 0 0; }
.contact-dl a { color: var(--ink); text-decoration: none; }
.contact-dl a:hover { color: var(--coral-deep); text-decoration: underline; }
.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); }
.hours li span:last-child { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- WhatsApp e social, icona che pulsa */
/* ⚠ Il richiamo lampeggia sull'ALONE, non sul segno: se a pulsare fosse l'opacità dell'icona o del testo,
   per metà del ciclo starebbero sotto le soglie di contrasto. Così il segno resta pieno e ciò che respira
   è un anello dietro. Sotto `prefers-reduced-motion` l'anello si ferma e resta un contorno statico:
   il richiamo non sparisce, smette solo di muoversi. */
.ico-blink { position: relative; display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
.ico-blink::before { content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-blink::after { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .55; animation: fp-pulsa 1.9s ease-in-out infinite; }
.ico-blink[data-social="whatsapp"] { --ico: url("../assets/img/icons/social-whatsapp.svg"); }
.ico-blink[data-social="facebook"] { --ico: url("../assets/img/icons/social-facebook.svg"); }
@keyframes fp-pulsa {
  0%   { transform: scale(.82); opacity: .75; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(.82); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ico-blink::after { animation: none; opacity: .5; transform: none; } }

.btn--wa { background: var(--brand); color: var(--on-dark); }
.btn--wa:hover { background: var(--brand-deep); color: var(--on-dark); transform: translateY(-2px); }
.contact-dl dd.social { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.social__link { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.social__link:hover { color: var(--coral-deep); text-decoration: underline; }
.site-footer .social__link { color: var(--on-dark); }
.site-footer .social__link:hover { color: var(--coral-lt); }

/* ---------------------------------------------------------------- modulo di contatto */
/* Il modulo statico ha comunque un <form> vero, etichette collegate e campi obbligatori dichiarati:
   un insieme di campi nudi non è un modulo, e chi verifica il sito lo cerca come tale. */
.fp-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); max-width: 34rem; }
.fp-field { display: grid; gap: var(--space-2); margin: 0; }
.fp-field label { font-weight: 500; font-size: .95rem; color: var(--ink); }
.fp-field input, .fp-field textarea {
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75em .9em;
  width: 100%;
}
.fp-field input:focus-visible, .fp-field textarea:focus-visible { border-color: var(--coral-ink); }
.fp-field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); }
.fp-field--check input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; }
.fp-field--check label { font-size: .9rem; color: var(--ink-muted); font-weight: 400; }
.fp-form .btn { justify-self: start; }
.form-note { font-size: .9rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- banda d'invito (CTA finale) */
.invite { text-align: center; }
.invite h2 { color: var(--on-dark); }
.invite .lead { color: var(--on-dark-muted); margin-inline: auto; }
.invite__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }

/* ---------------------------------------------------------------- testata delle pagine interne */
.page-head { background: var(--sage-tint); padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { max-width: 56ch; }

/* Testata con figura: la pagina Contatti non deve essere la più spoglia del sito solo perché è l'ultima.
   La composizione è fatta di FORME NOSTRE — non si spacciano per materiale del cliente e non portano
   informazione (aria-hidden), quindi non c'è nulla che un lettore di schermo perda. */
.page-head--figura { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.page-head__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .page-head__grid { grid-template-columns: 1.05fr 0.95fr; } }
.figura { position: relative; justify-self: center; width: min(360px, 82%); aspect-ratio: 1; }
.figura__foto { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-pill); border: 8px solid var(--paper); box-shadow: var(--shadow-panel); }
.figura__forma { position: absolute; z-index: 1; display: block; }
.figura__forma--cerchio { width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); top: -7%; right: -6%; }
.figura__forma--anello { width: 26%; aspect-ratio: 1; border-radius: 50%; border: 7px solid var(--brand); bottom: -5%; left: -8%; }
.figura__forma--quadro { width: 19%; aspect-ratio: 1; border-radius: var(--radius); background: var(--sage); transform: rotate(-14deg); bottom: 12%; right: -10%; }
.figura__forma--foglia { width: 22%; aspect-ratio: 1; background: var(--brand-mid); top: 6%; left: -12%; transform: rotate(-24deg);
  -webkit-mask: var(--leaf-mask) center / contain no-repeat; mask: var(--leaf-mask) center / contain no-repeat; }
/* i cerchi respirano appena, sfalsati: il movimento è del DECORO, mai del testo */
@media (prefers-reduced-motion: no-preference) {
  .figura__forma--cerchio, .figura__forma--anello, .figura__forma--quadro { animation: fp-galleggia 6s ease-in-out infinite; }
  .figura__forma--anello { animation-delay: 1.6s; }
  .figura__forma--quadro { animation-delay: 3.1s; }
}
@keyframes fp-galleggia { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); } }
.figura__forma--quadro { --rot: -14deg; }

/* ---------------------------------------------------------------- piè di pagina */
.site-footer { background: var(--brand-deep); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--coral-lt); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer__claim { color: var(--on-dark-muted); margin-top: var(--space-4); max-width: 34ch; }
.footer__col h3 { font-size: 1rem; color: var(--on-dark); margin-bottom: var(--space-3); }
.footer__col p, .footer__col li { color: var(--on-dark-muted); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* ⚠ `space-between` NON centra la voce di mezzo: la sua posizione dipende dalle larghezze dei blocchi
   laterali, e qui il primo è largo il doppio del terzo — «Privacy & Cookie» finiva 84px a destra del
   centro. Con `1fr auto 1fr` la colonna centrale è centrata per COSTRUZIONE, qualunque cosa contengano
   le altre due. */
.footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(253, 246, 236, .16);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3) var(--space-5); align-items: center;
  color: var(--on-dark-muted); font-size: .9rem; }
.footer__bottom > :first-child { justify-self: start; }
.footer__bottom > :last-child { justify-self: end; }
@media (max-width: 720px) {
  .footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__bottom > :first-child, .footer__bottom > :last-child { justify-self: center; }
}
.footer__by { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer__by img { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- lightbox del mosaico */
/* ⚠ stato NASCOSTO obbligatorio: reveal.js crea .fp-lb al caricamento e la apre con .is-open. Senza il
   display:none l'overlay resta steso sopra la pagina e INTERCETTA OGNI CLICK — un sito dove il crawl passa
   pulito e nulla è cliccabile. È già successo: se ne accorse il cliente, non i controlli. */
.fp-lb { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(34, 54, 47, .92);
  align-items: center; justify-content: center; padding: var(--space-5); }
.fp-lb.is-open { display: flex; }
.fp-lb img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.fp-lb__x { position: absolute; top: var(--space-5); right: var(--space-5); width: 48px; height: 48px;
  border-radius: 50%; border: 0; cursor: pointer; background: var(--paper); color: var(--ink); }
.fp-lb__x::before, .fp-lb__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: currentColor; }
.fp-lb__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.fp-lb__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fp-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  border-radius: 50%; border: 0; cursor: pointer; background: var(--paper); color: var(--ink);
  display: grid; place-items: center; transition: transform .18s ease, background-color .18s ease; }
.fp-lb__nav:hover { background: var(--coral-lt); transform: translateY(-50%) scale(1.09); }
.fp-lb__nav svg { width: 26px; height: 26px; }
.fp-lb__prev { left: clamp(.6rem, 3vw, 2rem); }
.fp-lb__next { right: clamp(.6rem, 3vw, 2rem); }
@media (max-width: 599.98px) {
  .fp-lb__nav { width: 46px; height: 46px; top: auto; bottom: var(--space-5); transform: none; }
  .fp-lb__nav:hover { transform: scale(1.09); }
  .fp-lb__prev { left: 25%; } .fp-lb__next { right: 25%; }
}
@media (prefers-reduced-motion: reduce) { .fp-lb__nav:hover { transform: translateY(-50%); } }

/* ---------------------------------------------------------------- barra CTA fissa (solo telefono) */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none;
  background: var(--brand); border-top: 1px solid rgba(253, 246, 236, .14); padding: .6rem var(--gutter); }
.cta-bar__row { display: flex; gap: var(--space-3); }
.cta-bar .btn { flex: 1; padding: .85em 1em; font-size: .95rem; }
@media (max-width: 720px) {
  .cta-bar { display: block; }
  body { padding-bottom: 74px; }
}

/* ---------------------------------------------------------------- elenco completo dei servizi */
/* Le tre tessere illustrate RIASSUMONO; l'elenco del cliente ha sette voci e va per intero, sennò il
   sito dice meno del materiale. Due colonne su schermo largo: sette voci in colonna unica farebbero
   una lista lunga e magra sotto una griglia larga. */
.servizi-elenco { margin-top: var(--space-7); }
.servizi-elenco__intro { color: var(--ink-muted); margin-bottom: var(--space-4); }
.checks--due { margin-top: 0; }
@media (min-width: 760px) { .checks--due { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }