/* Foglio di stile del sito pubblico elenamantovaniyoga.it
   Estratto quasi identico dal prototipo approvato (elena-mantovani-yoga-homepage-variante-1-corretta-20260811.html),
   con alcune classi in più per le pagine generate dinamicamente (singolo articolo, elenco blog, form contatti). */

:root{
  --bg:#f8f6f2; --bg-alt:#f1eee7; --bg-contact:#eef0e8;
  --bg-dark:#2f2c25; --bg-dark-alt:#39352c; --bg-dark-alt2:#413c31;
  --text:#2c2822; --text-body:#5b5649; --text-muted:#4a463d;
  --text-faint:#6f6a5f; --text-label:#6f6a5f;
  --accent:#4a5943; --accent-strong:#3f4a39; --accent-hover:#2f382b; --accent-line:#b9c2ac;

  /* Due note di colore con territori separati (vedi sintesi-ottanio-cotto-…html).
     --via  = ottanio, tutto ciò che serve a orientarsi: filetti di navigazione,
              voce di menu corrente, collegamenti dentro il testo, frecce, messa a fuoco.
     --voce = cotto, tutto ciò che ha un nome o una voce umana: virgolette della
              citazione, firma dell'autore, numero del corso, data dell'articolo.
     Il verde salvia resta alle superfici — pulsanti pieni, fasce, sfondi — dove è
     talmente scuro e desaturato che l'occhio lo legge quasi come un neutro.
     La regola vive di disciplina: un colore fuori territorio e il patto si rompe. */
  --via:#517c85; --via-forte:#3f636b; --via-tenue:#b5c8cc;
  --voce:#96634f; --voce-tenue:#d9bfb2;
  --border:#e4dfd3; --border2:#ddd7c9; --border-dark:#4a4539;
  --light:#f4efe3; --light-muted:#cdc6b4; --light-faint:#b3ab98; --cream:#fdfcf8;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Outfit', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--via);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ max-width:1100px; margin:0 auto; padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px); }
.eyebrow{ margin:0 0 20px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
  gap:18px 32px; padding:20px clamp(20px,5vw,64px);
  background:var(--bg); border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand-logo{ width:42px; height:42px; object-fit:contain; flex-shrink:0; }
.brand-name{ display:block; font-size:clamp(17px,2vw,20px); font-weight:500; letter-spacing:.01em; color:var(--text); }
.brand-sub{ display:block; margin-top:4px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }

nav{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px; font-size:16px; color:var(--text-muted); }
.nav-link{ padding:6px 2px; color:var(--text-muted); border-bottom:2px solid transparent; }
.nav-social{ display:flex; align-items:center; gap:10px; order:3; }
.social-icona{ display:inline-flex; width:30px; height:30px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.social-icona svg{ width:100%; height:100%; display:block; }
.nav-link:hover{ color:var(--text); }
.nav-link.is-current{ color:var(--text); border-bottom-color:var(--via); }
.btn-outline{
  display:inline-flex; align-items:center; min-height:38px; padding:0 18px;
  border:1px solid #cfd6c4; border-radius:999px; font-size:14px; color:var(--accent);
}
.btn-outline:hover{ background:#eef0e8; color:var(--text); }

/* Pulsante del menu a comparsa — tre righette più la parola "Menu". Sui monitor
   larghi non esiste: le voci stanno già tutte in fila nell'intestazione. */
.menu-toggle{
  display:none; align-items:center; gap:10px; padding:8px 14px 8px 12px;
  background:transparent; border:1px solid var(--border2); border-radius:2px;
  font-family:inherit; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); cursor:pointer;
}
.menu-toggle:hover{ background:var(--bg-alt); color:var(--text); }
.menu-righe{ display:block; width:20px; height:14px; position:relative; }
.menu-righe span{
  position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  transition:transform .22s ease, opacity .16s ease;
}
.menu-righe span:nth-child(1){ top:0; }
.menu-righe span:nth-child(2){ top:6.25px; }
.menu-righe span:nth-child(3){ top:12.5px; }
/* Aperto, le tre righe diventano una croce: la riga di mezzo sparisce e le altre
   due ruotano l'una sull'altra. */
.menu-aperto .menu-righe span:nth-child(1){ transform:translateY(6.25px) rotate(45deg); }
.menu-aperto .menu-righe span:nth-child(2){ opacity:0; }
.menu-aperto .menu-righe span:nth-child(3){ transform:translateY(-6.25px) rotate(-45deg); }

/* Hero */
.hero{ position:relative; min-height:clamp(420px,62vh,640px); display:flex; align-items:flex-end; overflow:hidden; }
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; z-index:0; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(30,27,22,.82) 0%, rgba(30,27,22,.42) 48%, rgba(30,27,22,.18) 100%);
}
.hero-inner{ position:relative; z-index:1; width:100%; max-width:1100px; margin:0 auto; padding:clamp(48px,9vh,110px) clamp(20px,5vw,64px); }
/* Il contenuto del blocco Hero è testo libero (editor nel pannello): qui lo stile si
   applica ai tag generati dall'editor invece che a classi fisse (eyebrow/h1/due bottoni
   come nel prototipo originale) — meno rigido, un po' meno identico al mockup iniziale. */
.hero-inner p, .hero-inner h1{ margin:0 0 18px; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:#e6e0d2; animation: hero-comparsa .9s ease-out both; }
.hero-inner h2, .hero-inner h3{ max-width:19em; font-size:clamp(28px,4.4vw,52px); font-weight:500; line-height:1.28; letter-spacing:-.01em; color:var(--cream); margin:0 0 30px; animation: hero-comparsa 1s ease-out .15s both; }
@keyframes hero-comparsa{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-inner p, .hero-inner h1, .hero-inner h2, .hero-inner h3{ animation:none; }
}
/* Primo link = bottone pieno (es. "Guarda i corsi"). Un secondo link scritto
   subito dopo, sulla stessa riga, diventa automaticamente il bottone "ghost"
   (es. "Scrivimi due righe") — nessuna classe da scegliere nell'editor. */
.hero-inner a{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 26px; margin:20px 20px 0 0;
  background:var(--cream); color:var(--text); font-size:16px; text-decoration:none;
}
.hero-inner a:hover{ background:#eef0e8; }
.hero-inner a + a{
  background:transparent; min-height:auto; padding:0; color:var(--cream);
  text-decoration:underline; text-underline-offset:4px;
}
.hero-inner a + a:hover{ background:transparent; opacity:.8; }

/* Testo libero / intro — fascia quasi a piena larghezza (niente sfondo/box:
   il testo dentro resta comunque leggibile, vedi .intro p/ul max-width).
   Spaziatura verticale ridotta per non "staccare" troppo il blocco dal resto. */
.intro{ max-width:1400px; margin:0 auto; padding:clamp(12px,2vh,28px) clamp(20px,5vw,64px) clamp(32px,5vh,56px); }
.intro .lead{ margin:0 0 30px; font-size:clamp(21px,2.6vw,29px); font-weight:300; line-height:1.5; color:var(--text); }
.intro p{ font-size:17px; line-height:1.85; color:var(--text-body); max-width:34em; margin:0 0 20px; }
.intro h2{ font-size:clamp(21px,2.6vw,29px); font-weight:300; line-height:1.5; margin-bottom:20px; }
/* Titolo 3 nell'editor = occhiello (riga piccola maiuscoletta sopra il titolo,
   come "UNA PORTA APERTA" nel prototipo). Titolo 2 resta il titolo grande. */
.intro h3{ margin:0 0 20px; font-size:12px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.intro ul, .intro ol{ font-size:17px; line-height:1.85; color:var(--text-body); max-width:34em; padding-left:1.3em; margin:0 0 20px; }

/* Immagini nel testo libero (editor Quill, admin/pagina-modifica.php): di norma
   le immagini sono display:block (regola generale in cima al foglio) e un
   elemento block non risente del text-align del paragrafo che lo contiene -
   per questo un'immagine "centrata" scelta nel pannello restava sempre a
   sinistra. Qui diventa inline-block, così l'allineamento scelto nell'editor
   (sinistra/centro/destra, scritto come style inline sul paragrafo - vedi
   AllineamentoInline in pagina-modifica.php) la sposta davvero.
   Le due classi di dimensione già in uso altrove (.prosa, .articolo-corpo)
   funzionano ora anche qui, ma senza margin:auto: l'allineamento lo decide
   il text-align, non più una centratura automatica legata alla dimensione. */
.intro img{ display:inline-block; height:auto; margin-bottom:16px; border-radius:2px; }
.intro img.img-piccola{ max-width:320px; }
.intro img.img-media{ max-width:520px; }
/* Immagine sola in un suo paragrafo (nessun testo accanto): .intro p ha una
   misura di lettura (34em, vedi sopra) pensata per il testo, e quel paragrafo
   non è centrato nella fascia (margin:0 0 20px, non "auto") - resta a filo
   sinistro. Un'immagine non è testo da leggere: l'allineamento scelto
   nell'editor deve valere sulla larghezza intera della fascia, non su quella
   colonna stretta e spostata a sinistra, altrimenti "centrato" centra
   l'immagine solo dentro la colonna - che a sua volta sta a sinistra - e in
   pagina l'immagine resta visibilmente storta verso sinistra. */
.intro p:has(> img:only-child){ max-width:none; }

/* Testo libero costruito come citazione: occhiello, citazione, chiosa.
   Il riconoscimento è la sequenza "Titolo 3 seguito da Titolo 2" — gli altri blocchi
   di testo libero non vengono toccati. Le tre voci pesano in modo diverso e stanno
   in una sola colonna centrata: prima la citazione correva per tutti i 1400px del
   contenitore, righe lunghissime, e la chiosa le andava dietro allineata a sinistra
   su una misura sua, così il blocco si leggeva come due cose accostate per caso. */
/* L'occhiello va a filo con quelli delle altre sezioni ("Chi sono", "Contenuti",
   "Contatti"), che vivono dentro .wrap da 1100px: la fascia .intro è larga 1400px,
   quindi il suo bordo sinistro sporge di 150px. Un riquadro della stessa misura di
   .wrap, centrato qui dentro, riporta l'occhiello sulla stessa colonna a ogni
   larghezza di finestra, senza toccare le altre misure del blocco. */
.intro:has(h3 + h2):not(:has(h2 ~ h2)) h3{
  text-align:left; margin:0 auto 26px;
  max-width:calc(1100px - 2 * clamp(20px, 5vw, 64px));
}
.intro:has(h3 + h2):not(:has(h2 ~ h2)) h2{
  max-width:30em; margin:0 auto 14px; text-align:center; text-wrap:balance;
  font-size:clamp(22px,2.9vw,32px); font-weight:300; line-height:1.45; color:var(--text);
}
/* Virgolette aperte come segno grafico, non come carattere battuto nel testo. */
.intro:has(h3 + h2):not(:has(h2 ~ h2)) h2::before{
  content:"\201C"; display:block; margin-bottom:-.6rem;
  font-size:3.4rem; line-height:1; color:var(--voce-tenue);
}
/* Convenzione: la riga scritta subito sotto la citazione è la firma dell'autore.
   Va lasciata come testo normale nell'editor, su una riga sua. */
.intro:has(h3 + h2):not(:has(h2 ~ h2)) h2 + p{
  max-width:50em; margin:0 auto 32px; text-align:center;
  font-size:.85rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--voce); line-height:1.5;
}
.intro:has(h3 + h2):not(:has(h2 ~ h2)) p{
  max-width:50em; margin-left:auto; margin-right:auto;
  font-size:16px; line-height:1.85; color:var(--text-body); text-align:center;
}

/* Citazione in evidenza — scheda chiara con virgolette aperte in alto.
   Due modi per ottenerla: la classe .quote-card (per l'HTML scritto a mano) e il
   tasto "citazione" dell'editor, che produce un <blockquote> dentro il testo libero.
   I colori sono quelli del sito: il grigio-azzurro della proposta iniziale stonava
   sul fondo crema, che tira al caldo. */
.quote-card,
.intro blockquote{
  background:var(--cream); border:1px solid var(--border);
  border-radius:16px; padding:2.5rem 2rem;
  box-shadow:0 10px 30px rgba(44,40,34,.05);
  text-align:center; max-width:800px; margin:2rem auto;
}
.quote-card::before,
.intro blockquote::before{
  content:"\201C"; display:block; margin-bottom:-2.7rem;
  font-size:4rem; line-height:1; color:var(--voce-tenue);
}
.quote-card p,
.intro blockquote{
  font-size:1.25rem; line-height:1.6; color:var(--text); font-style:normal;
}
.quote-card p{ max-width:none; margin:0; }
.quote-card .author,
.intro blockquote cite{
  display:block; margin-top:1.5rem; font-style:normal; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; font-size:.9rem; color:var(--voce);
}
/* Il blocco è una composizione a tre voci, e le tre voci devono pesare in modo
   diverso: l'occhiello annuncia (piccolo, spaziato, quasi un sottotitolo di
   servizio), la citazione parla (grande, tonda, al centro), la chiosa spiega
   (più piccola della citazione, colonna più stretta della pagina, tono smorzato).
   Senza questa scala il testo esplicativo, largo e allineato a sinistra, finisce
   per pesare quanto la citazione e le toglie il primo piano. */
.intro:has(blockquote) h3{ text-align:center; max-width:800px; margin-left:auto; margin-right:auto; }
.intro blockquote{ font-weight:300; letter-spacing:-.005em; }
.intro blockquote + p{
  max-width:44em; margin:1.7rem auto 0; text-align:center;
  font-size:16px; line-height:1.8; color:var(--text-body);
}
.intro blockquote + p + p{ max-width:44em; margin-left:auto; margin-right:auto; text-align:center; }

/* L'editor manda a capo creando un <blockquote> per riga: righe contigue si
   ricuciono in un'unica scheda, invece di impilare tanti riquadri identici. */
.intro blockquote:has(+ blockquote){ margin-bottom:0; padding-bottom:0; border-bottom:none; border-radius:16px 16px 0 0; box-shadow:none; }
.intro blockquote + blockquote{ margin-top:0; padding-top:.6rem; border-top:none; border-radius:0 0 16px 16px; }
.intro blockquote + blockquote::before{ content:none; }

/* Testo libero generico dentro sezioni dinamiche (corsi/eventi/materiali/blog/contatti):
   stile "prosa" applicato ai tag prodotti dall'editor, non a classi fisse. */
.prosa{ margin-bottom:30px; max-width:36em; }
.prosa p{ margin:0 0 16px; font-size:16px; line-height:1.8; color:var(--text-body); }
.prosa h2, .prosa h3{ margin:24px 0 12px; font-weight:400; color:var(--text); }
.prosa ul, .prosa ol{ margin:0 0 16px; padding-left:1.3em; }
.prosa a{ color:var(--via); border-bottom:1px solid var(--via-tenue); }
.prosa a:hover{ color:var(--via-forte); border-bottom-color:var(--via); }

/* Immagini e video caricati dall'editor dei blocchi (vedi admin/pagina-modifica.php):
   stesse regole gia' in uso per gli articoli del blog (.articolo-corpo). */
.prosa img{ margin-bottom:16px; border-radius:2px; }
.prosa img.img-piccola{ max-width:320px; margin-left:auto; margin-right:auto; }
.prosa img.img-media{ max-width:520px; margin-left:auto; margin-right:auto; }
/* Immagini SENZA una delle due classi fisse sopra (quelle restano come sono
   sempre state, centrate a prescindere - non tocco quel comportamento per
   non spostare immagini già pubblicate): qui l'immagine diventa inline-block,
   così risponde davvero al text-align scelto nell'editor (vedi la stessa nota
   più sopra su .intro img) - serve alla nuova maniglia di ridimensionamento
   (admin/pagina-modifica.php e admin/blog.php), che scrive una percentuale
   come style inline
   invece di una delle due classi fisse. */
.prosa img:not(.img-piccola):not(.img-media){ display:inline-block; height:auto; }

.prosa iframe.ql-video{ width:100%; aspect-ratio:16/9; height:auto; border:0; margin-bottom:16px; border-radius:2px; }
.prosa .video-caricato{ margin-bottom:16px; }
.prosa .video-caricato video{ width:100%; display:block; border-radius:2px; }
.vuoto-pubblico{ color:var(--text-faint); font-style:italic; font-size:15px; }

/* Corsi */
.corsi{ border-top:1px solid var(--border); background:var(--bg-alt); }
.corsi-inner{ padding-top:clamp(56px,9vh,104px); padding-bottom:clamp(56px,9vh,104px); }
.section-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px; margin-bottom:clamp(34px,6vh,58px); }
.section-head h2{ font-size:clamp(24px,3vw,34px); font-weight:400; letter-spacing:-.01em; }
.section-head .note{ font-size:15px; color:var(--text-faint); }
.corso{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 44px; align-items:start;
  padding:clamp(26px,4vh,40px) 0; border-top:1px solid var(--border2); color:inherit;
}
.corso:hover{ background:rgba(255,255,255,.5); }
.corso-head{ display:flex; align-items:baseline; gap:18px; }
.corso-num{ font-size:13px; color:var(--voce); letter-spacing:.06em; }
.corso-num-icona{ display:inline-flex; }
.corso-num-icona img{ width:56px; height:56px; object-fit:contain; }
.corso-head:has(.corso-num-icona){ align-items:center; }
.corso-titolo{ display:block; font-size:clamp(20px,2.2vw,25px); font-weight:400; color:var(--text); }
.corso-quando{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; padding:5px 14px 5px 10px;
  background:rgba(150,99,79,.1); border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:.005em; color:var(--voce);
}
.icona-orario{ flex:0 0 auto; }
.corso-testo{ font-size:16px; line-height:1.8; color:var(--text-body); max-width:36em; }

/* Chi sono */
.chi-sono{ border-top:1px solid var(--border); }
.chi-sono-inner{
  padding-top:clamp(56px,10vh,120px); padding-bottom:clamp(56px,10vh,120px);
  display:grid; grid-template-columns:minmax(240px,1fr) auto;
  gap:clamp(28px,4.5vw,44px); align-items:stretch;
}
.chi-sono-testo-col{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }

/* Figura e pulsante sulla stessa riga: Nita è ritagliata su sfondo trasparente e
   indica in basso a destra, dove sta il collegamento alla pagina Chi sono estesa.
   flex-wrap:nowrap è la garanzia che il pulsante non scenda mai sotto la figura. */
.chi-sono-figura{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:clamp(10px,1.6vw,22px); }
/* Il riquadro ha larghezza propria e si allunga fino all'altezza della colonna di
   testo; l'immagine ci sta dentro senza deformarsi, appoggiata in basso. Le misure
   sono limitate, così la figura non può crescere fino a spingere via il pulsante. */
.chi-sono-nita-box{
  flex:0 0 auto; align-self:stretch;
  width:clamp(220px,27vw,350px); min-height:400px; max-height:620px;
}
.chi-sono-nita{
  width:100%; height:100%; max-width:100%;
  object-fit:contain; object-position:center bottom;
  filter:saturate(.92) drop-shadow(0 20px 28px rgba(44,40,34,.13));
}
/* Lo scarto verso il basso segue la diagonale del dito, invece di stare
   esattamente a metà altezza della figura. */
.btn-scopri-indicato{ flex:0 0 auto; align-self:center; margin-top:clamp(24px,5vh,56px); white-space:nowrap; transform:translateY(3cm); }

/* Bagliore di richiamo sul pulsante "Scopri di più": quando si arriva su questa
   sezione da un collegamento con #chi-sono (il menu principale, per esempio, da
   qualunque pagina del sito), :target riconosce da solo che questa è la sezione
   appena raggiunta - senza bisogno di JavaScript. L'animazione dura una volta
   sola (nessun "infinite"): un doppio alone morbido (verde salvia chiaro,
   --accent-line) si allarga e sfuma, mentre il pulsante si schiarisce un poco
   nell'istante di culmine; poi tutto resta fermo anche se il visitatore non
   lascia la pagina. */
@media (prefers-reduced-motion: no-preference){
  .chi-sono:target .btn-scopri-indicato{
    animation:bagliore-scopri-di-piu 2s cubic-bezier(.3,0,.2,1);
  }
}
@keyframes bagliore-scopri-di-piu{
  0%   {
    box-shadow:0 0 0 0 rgba(185,194,172,0), 0 0 0 0 rgba(185,194,172,0);
    filter:brightness(1);
  }
  28%  {
    box-shadow:0 0 8px 5px rgba(185,194,172,.85), 0 0 34px 15px rgba(185,194,172,.42);
    filter:brightness(1.2);
  }
  62%  {
    box-shadow:0 0 12px 7px rgba(185,194,172,.5), 0 0 42px 20px rgba(185,194,172,.25);
    filter:brightness(1.1);
  }
  100% {
    box-shadow:0 0 16px 10px rgba(185,194,172,0), 0 0 50px 26px rgba(185,194,172,0);
    filter:brightness(1);
  }
}
.chi-sono h2{ margin:0 0 26px; font-size:clamp(24px,3vw,34px); font-weight:400; line-height:1.32; letter-spacing:-.01em; }
.chi-sono-testo{ margin:0 0 30px; font-size:17px; line-height:1.85; color:var(--text-body); }
.chi-sono-testo p{ margin:0 0 16px; }
.chi-sono-testo ul, .chi-sono-testo ol{ margin:0 0 16px; padding-left:1.3em; }
.chi-sono-testo h3{ font-size:16px; color:var(--voce); font-weight:500; margin:24px 0 6px; }
.chi-sono-testo h2{ font-size:clamp(24px,3vw,34px); font-weight:400; line-height:1.32; letter-spacing:-.01em; color:var(--text); margin:0 0 26px; }
.btn-scopri{
  display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 28px; margin-top:6px;
  background:var(--accent-strong); color:var(--bg); font-size:16px; text-decoration:none; font-family:inherit;
}
.btn-scopri:hover{ background:var(--accent-hover); }

/* Contenuti / materiali (sfondo scuro) */
.contenuti{ border-top:1px solid var(--border); background:var(--bg-dark); color:var(--light); }
.contenuti-inner{ padding-top:clamp(56px,9vh,104px); padding-bottom:clamp(56px,9vh,104px); }
.contenuti .eyebrow{ color:var(--light-faint); }
.contenuti h2{ margin:0 0 clamp(30px,5vh,50px); max-width:22em; font-size:clamp(22px,2.8vw,32px); font-weight:300; line-height:1.42; }
.contenuti-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,3vw,36px); }
.contenuto-card{ display:block; padding:26px 24px 24px; background:var(--bg-dark-alt); border:1px solid var(--border-dark); }
.contenuto-card:hover{ background:var(--bg-dark-alt2); }
.contenuto-tipo{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--light-faint); }
.contenuto-titolo{ display:block; margin-top:14px; font-size:19px; font-weight:400; }
.contenuto-testo{ display:block; margin-top:12px; font-size:15px; line-height:1.75; color:var(--light-muted); }

/* Blog */
.blog{ border-top:1px solid var(--border); }
.blog-inner{ padding-top:clamp(56px,9vh,104px); padding-bottom:clamp(56px,9vh,104px); }
.articolo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 40px; align-items:start;
  padding:24px 0; border-top:1px solid var(--border);
}
.articolo:hover{ background:var(--bg-alt); }
.articolo-head{ display:flex; flex-direction:column; gap:6px; }
.articolo-data{ font-size:13px; color:var(--voce); letter-spacing:.05em; }
.articolo-titolo{ font-size:clamp(18px,2vw,22px); font-weight:400; color:var(--text); }
.articolo-estratto{ font-size:15px; line-height:1.75; color:var(--text-body); }
/* Il pulsante "Leggi tutti gli articoli" sta ora accanto al titolo di
   sezione (vedi renderBloccoBlog): .section-head allinea sulla baseline del
   testo, che per un pulsante alto 50px risulterebbe storto - qui si
   centra rispetto al titolo invece di seguirne la base. */
.section-head .btn-scopri{ align-self:center; }

/* Singolo articolo */
.articolo-pagina{ max-width:720px; margin:0 auto; padding:clamp(56px,9vh,104px) clamp(20px,5vw,40px); }
.articolo-indietro{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:22px; border-radius:50%;
  border:1.5px solid var(--via-tenue); background:var(--cream);
  color:var(--text); font-size:18px; line-height:1;
}
.articolo-indietro:hover{ background:var(--via); color:var(--cream); border-color:var(--via); }
.articolo-pagina .articolo-data{ display:block; margin-bottom:16px; }
.articolo-pagina h1{ font-size:clamp(26px,3.6vw,40px); font-weight:400; line-height:1.3; margin-bottom:30px; }
.articolo-pagina img{ margin-bottom:30px; border-radius:2px; }
.articolo-corpo{ font-size:17px; line-height:1.9; color:var(--text-body); }
.articolo-corpo p{ margin:0 0 20px; }
.articolo-corpo h2, .articolo-corpo h3{ color:var(--text); margin:36px 0 16px; font-weight:400; }

/* Contenuti dall'editor del blog: immagini con dimensione scelta, video (da
   link o caricati) e carosello. Il carosello riusa le stesse classi della
   galleria orizzontale delle pagine (.galleria-nav-wrap e affini, già
   definite più sotto), così appare identico senza stili nuovi per la
   struttura: qui serve solo un po' di margine attorno. */
.articolo-corpo img.img-piccola{ max-width:320px; margin-left:auto; margin-right:auto; }
.articolo-corpo img.img-media{ max-width:520px; margin-left:auto; margin-right:auto; }
/* Stessa nota di .prosa più sopra: le immagini SENZA una delle due classi
   fisse diventano inline-block, per rispondere al text-align scelto
   nell'editor (ora scritto come style inline anche qui - vedi
   AllineamentoInline in admin/blog.php). Le immagini con classe fissa
   restano block + margin:auto, come sono sempre state. */
.articolo-corpo img:not(.img-piccola):not(.img-media){ display:inline-block; height:auto; }
.articolo-corpo iframe.ql-video{ width:100%; aspect-ratio:16/9; height:auto; border:0; margin-bottom:30px; border-radius:2px; }
.articolo-corpo .video-caricato{ margin-bottom:30px; }
.articolo-corpo .video-caricato video{ width:100%; display:block; border-radius:2px; }
.articolo-corpo .carosello-articolo{ margin:36px 0; }

/* Rientri di paragrafo: l'editor li applica con una classe, non con spazi
   nel testo, quindi senza queste regole sparirebbero fuori dal pannello admin. */
.articolo-corpo .ql-indent-1{ padding-left:3em; }
.articolo-corpo .ql-indent-2{ padding-left:6em; }
.articolo-corpo .ql-indent-3{ padding-left:9em; }
.articolo-corpo .ql-indent-4{ padding-left:12em; }
.articolo-corpo .ql-indent-5{ padding-left:15em; }
.articolo-corpo .ql-indent-6{ padding-left:18em; }
.articolo-corpo .ql-indent-7{ padding-left:21em; }
.articolo-corpo .ql-indent-8{ padding-left:24em; }

/* Elenco blog (blog.php) */
.blog-elenco{ padding:clamp(72px,10vh,120px) 0 clamp(56px,9vh,104px); }
.blog-elenco h1{ margin:0 0 clamp(28px,5vh,46px); font-size:clamp(28px,4vw,42px); font-weight:400; letter-spacing:-.01em; }
.blog-filtri{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,5vh,50px); }
.blog-filtro{ padding:7px 16px; font-size:14px; color:var(--text-muted); border:1px solid var(--border2); border-radius:999px; }
.blog-filtro:hover{ border-color:var(--via); color:var(--via-forte); }
.blog-filtro-attivo{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--bg); }
.blog-filtro-attivo:hover{ color:var(--bg); }

/* Due colonne: barra laterale (ultimi articoli + archivio) e flusso degli
   articoli. Su schermi stretti il flusso passa prima, la barra laterale
   segue sotto: chi apre da telefono vuole leggere, non sfogliare l'archivio. */
.blog-layout{ display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start; }
.blog-sidebar{ display:flex; flex-direction:column; gap:36px; }
.blog-sidebar-titolo{ margin:0 0 14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.blog-sidebar-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.blog-sidebar-lista a{ font-size:14px; line-height:1.5; color:var(--text-muted); }
.blog-sidebar-lista a:hover{ color:var(--via-forte); }
.blog-sidebar-anno{ margin:16px 0 6px; font-size:13px; font-weight:500; color:var(--text); }
.blog-sidebar-anno:first-child{ margin-top:0; }
.blog-sidebar-mese{ display:block; padding:5px 0; font-size:14px; color:var(--text-muted); }
.blog-sidebar-mese:hover{ color:var(--via-forte); }
.blog-sidebar-mese-attivo{ color:var(--via-forte); font-weight:500; }
.blog-sidebar-conteggio{ color:var(--text-faint); font-size:13px; }

.blog-paginazione{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(30px,5vh,50px); padding-top:24px; border-top:1px solid var(--border); font-size:14px;
}
.blog-paginazione a{ color:var(--via); border-bottom:1px solid var(--via-tenue); padding-bottom:2px; }
.blog-paginazione a:hover{ color:var(--via-forte); border-bottom-color:var(--via); }
.blog-paginazione-disabilitato{ color:var(--text-faint); }
.blog-paginazione-stato{ color:var(--text-faint); }

@media (max-width:780px){
  .blog-layout{ grid-template-columns:1fr; gap:40px; }
  .blog-sidebar{ order:2; flex-direction:row; flex-wrap:wrap; }
  .blog-stream{ order:1; }
}

/* Contatti — due colonne: a sinistra il modulo e i recapiti diretti, a destra
   la sede con la mappa. Sotto gli 860px le due colonne si mettono in fila
   (vedi in fondo al foglio). */
.contatti{ border-top:1px solid var(--border); background:var(--bg-contact); }
.contatti-inner{
  max-width:1100px; margin:0 auto;
  padding:clamp(56px,10vh,116px) clamp(20px,5vw,64px);
  text-align:left;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(36px,5vw,72px); align-items:start;
}
.contatti .eyebrow{ color:var(--via); }
.contatti h2{ margin:0 0 22px; font-size:clamp(23px,2.6vw,32px); font-weight:400; line-height:1.32; }
/* La misura del testo introduttivo. Prima questa regola parlava di ogni <p>
   dentro .contatti e finiva per governare anche messaggi, legende e recapiti,
   che hanno margini loro. */
.contatti-intro{ max-width:34em; margin:0 0 30px; }
.contatti-intro p{ margin:0 0 18px; font-size:17px; line-height:1.85; color:#4a5346; }
.contatti-ctas{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:flex-start; }
.btn-scrivi{
  display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 28px;
  background:var(--accent-strong); color:var(--bg); font-size:16px; border:none; cursor:pointer; font-family:inherit;
}
.btn-scrivi:hover{ background:var(--accent-hover); }
.btn-tel{
  display:inline-flex; align-items:center; min-height:50px; font-size:16px;
  color:var(--accent-strong); border-bottom:1px solid var(--accent-line);
}
.btn-tel:hover{ color:var(--text); }
.form-contatti{ max-width:480px; margin:0 auto; text-align:left; }
.form-contatti .campo{ margin-bottom:16px; }
.form-contatti label{ display:block; font-size:13px; color:var(--text-label); margin-bottom:6px; }
.form-contatti input, .form-contatti textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border2); border-radius:2px;
  font-family:inherit; font-size:15px; background:var(--cream);
}
.form-contatti textarea{ min-height:100px; resize:vertical; }
.messaggio-successo{ background:#e4ebe0; border:1px solid var(--accent-line); color:var(--accent-strong); padding:16px 20px; margin-bottom:24px; font-size:15px; }

/* Footer */
.site-footer{ background:var(--bg); border-top:1px solid var(--border); }
.footer-inner{
  padding-top:clamp(40px,6vh,64px); padding-bottom:clamp(40px,6vh,64px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px 40px;
}
.footer-brand{ display:flex; flex-direction:column; gap:12px; }
.footer-brand-riga{ display:flex; align-items:center; gap:12px; }
.footer-logo-yoga{ width:28px; height:28px; object-fit:contain; flex:0 0 28px; }
.footer-logo-associazione{ width:28px; height:28px; object-fit:contain; flex:0 0 28px; }
.footer-brand-nome{ margin:0; font-size:17px; font-weight:500; line-height:1.2; }
.footer-associazione{ margin:0; font-size:14px; line-height:1.5; color:var(--text-faint); }
.footer-links{ display:flex; flex-direction:column; gap:10px; font-size:15px; }
.footer-links a{ color:var(--text-body); }
.footer-links a:hover{ color:var(--text); }
.footer-legal{ margin:0; font-size:13px; line-height:1.8; color:var(--text-label); }

/* Pagina generica (senza blocchi hero) */
.pagina-semplice{ max-width:760px; margin:0 auto; padding:clamp(56px,9vh,104px) clamp(20px,5vw,40px); }
.pagina-semplice h1{ font-size:clamp(26px,3.6vw,40px); font-weight:400; margin-bottom:30px; }

/* Galleria orizzontale: pannelli affiancati che si scorrono col dito/trackpad
   (scroll-snap) o con le due frecce, sempre visibili perché sovrapposte ai
   lati della striscia invece che sotto. Altezza dei pannelli fissa: un testo
   lungo scorre in verticale dentro il pannello invece di allungarlo. */
.galleria-orizzontale{ border-top:1px solid var(--border); }
.galleria-orizzontale .wrap{ padding-top:clamp(56px,9vh,104px); padding-bottom:clamp(56px,9vh,104px); }

/* Foto ritratto + testo introduttivo, in testa alla pagina: un'unica colonna
   di testo che scorre in verticale al proprio interno quando supera
   l'altezza della foto, invece di allungare la pagina o (come nella
   versione a due colonne di prima) rischiare di tagliare parte del testo. */
.galleria-intro{ display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; margin-bottom:40px; }
.galleria-intro-foto{ flex:0 0 240px; width:240px; height:320px; object-fit:cover; }
.galleria-intro-testo{
  flex:2 1 380px; max-width:none; margin:0;
  max-height:320px; overflow-y:auto; padding-right:14px;
}

@media (max-width: 760px){
  .galleria-intro-foto{ flex-basis:100%; width:100%; height:260px; }
  .galleria-intro-testo{ flex-basis:100%; max-height:none; }
}

/* Corpo della galleria: menu di navigazione a sinistra, striscia a destra. */
.galleria-corpo{ display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; }
.galleria-menu{
  flex:0 0 230px; display:flex; flex-direction:column; gap:13px; padding:26px 24px;
  background:var(--bg-alt); border:1px solid var(--border2); align-self:flex-start;
  height:560px; overflow-y:auto;
}
.galleria-menu-titolo{ margin:0 0 4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.galleria-menu a{
  font-size:15px; font-weight:600; color:var(--via); line-height:1.2;
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.galleria-menu a:hover{ color:var(--via-forte); border-bottom-color:var(--via-tenue); }

@media (max-width: 760px){
  .galleria-menu{ flex-basis:100%; flex-direction:row; flex-wrap:wrap; gap:8px 22px; height:auto; }
  .galleria-menu-titolo{ flex-basis:100%; }
}

/* Spazio dedicato ai due lati per le frecce, così non si sovrappongono mai
   al testo dei pannelli: stanno nel margine, non sopra il contenuto. */
.galleria-nav-wrap{ position:relative; flex:1 1 420px; min-width:0; padding:0 54px; }
.galleria-scroller{
  display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; margin:0 -4px; scrollbar-width:none; -ms-overflow-style:none;
}
.galleria-scroller::-webkit-scrollbar{ display:none; }
.galleria-pannello{
  flex:0 0 100%; width:100%; height:560px; scroll-snap-align:start;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border2); background:var(--cream);
}
.galleria-pannello img{ width:100%; height:210px; object-fit:cover; flex:0 0 210px; }
.galleria-pannello-testo{ padding:22px 24px 26px; overflow-y:auto; flex:1; }
.galleria-pannello-testo h3{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:400; margin:0 0 12px; }
.galleria-pannello-testo p{ font-size:16px; line-height:1.8; color:var(--text-body); margin:0 0 14px; }
.galleria-pannello-testo p:last-child{ margin-bottom:0; }

.galleria-freccia{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--via-tenue); background:var(--cream);
  color:var(--text); font-size:22px; line-height:1; cursor:pointer; font-family:inherit;
  box-shadow:0 4px 16px rgba(30,27,22,.22);
}
.galleria-freccia:hover{ background:var(--via); color:var(--cream); border-color:var(--via); }
.galleria-freccia-prev{ left:0; }
.galleria-freccia-next{ right:0; }

@media (max-width: 900px){
  .galleria-nav-wrap{ padding:0 42px; }
}

/* Sotto gli 860px le sei voci non stanno più su una riga accanto al marchio:
   si ritirano dietro il pulsante Menu e scendono in colonna quando lo si tocca. */
@media (max-width: 860px){
  .site-header{ flex-wrap:wrap; }
  .menu-toggle{ display:inline-flex; }
  .site-header nav{
    display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0;
    margin-top:16px; border-top:1px solid var(--border);
  }
  .site-header.menu-aperto nav{ display:flex; }
  .site-header nav .nav-link{
    padding:15px 2px; font-size:17px; color:var(--text);
    border-bottom:1px solid var(--border); border-top:none;
  }
  .site-header nav .nav-link.is-current{ color:var(--via); }
  .site-header nav .nav-link:last-child{ border-bottom:none; }
  .site-header .nav-social{ order:0; }
}

@media (max-width: 640px){
  .site-header{ padding-top:16px; padding-bottom:16px; }
  .hero{ min-height:520px; }
}

/* Sotto i 780px il blocco Chi sono passa a colonna singola: il testo sopra,
   figura e pulsante sotto — sempre affiancati, ma centrati nella riga. */
@media (max-width: 780px){
  .chi-sono-inner{ grid-template-columns:1fr; align-items:start; }
  .chi-sono-figura{ justify-content:center; }
  .chi-sono-nita-box{ align-self:auto; width:clamp(170px,46vw,270px); min-height:0; height:clamp(330px,66vw,420px); }
  .btn-scopri-indicato{ margin-top:clamp(20px,5vh,44px); }
}

/* ---------------------------------------------------------------------------
   Corsi per categoria, pagina della categoria, prenotazione
   Aggiunta del 2026-08-17.
   --------------------------------------------------------------------------- */

/* Menu a tendina delle categorie sotto la voce "Corsi" (come nel prototipo).
   Compare al passaggio del mouse e alla messa a fuoco da tastiera: senza la
   seconda, chi naviga col tabulatore non lo raggiungerebbe mai. */
.nav-item{ position:relative; }
.nav-caret{ font-size:10px; color:var(--text-label); margin-left:6px; }
.sub{
  position:absolute; top:calc(100% + 8px); left:-18px; min-width:210px;
  background:var(--cream); border:1px solid var(--border); padding:8px 0;
  display:flex; flex-direction:column;
  box-shadow:0 18px 40px -24px rgba(44,40,34,.28);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:30;
}
.nav-item:hover .sub,
.nav-item:focus-within .sub{ opacity:1; visibility:visible; transform:translateY(0); }
.sub a{ padding:9px 18px; font-size:15px; color:var(--text-muted); }
.sub a:hover{ background:var(--bg-alt); color:var(--text); }
.sub-divisore{ display:block; height:1px; margin:8px 18px; background:var(--border2); }

/* Riga della categoria nella home: il pulsante "Scopri di più" chiude la riga
   a destra, allineato al testo. */
.corso-categoria{ border-top:1px solid var(--border2); }
.corso-link{
  justify-self:start; align-self:start; font-size:15px; color:var(--via);
  border-bottom:1px solid var(--via-tenue); padding-bottom:2px;
}
.corso-link:hover{ color:var(--via-forte); border-bottom-color:var(--via); }

/* Icona che accompagna il nome di ogni categoria (vedi iconaCategoria() in
   helpers.php): PNG con trasparenza, piccola accanto al numero in home,
   più grande in un cerchio sopra il titolo nella pagina della categoria. */
.icona-categoria{
  width:26px; height:26px; flex:0 0 auto; align-self:center;
  object-fit:contain; object-position:center;
}
.categoria-icona{
  width:64px; height:64px; margin-bottom:20px; border-radius:50%;
  background:var(--cream); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
}
.categoria-icona .icona-categoria{ width:32px; height:32px; }

/* Testata della pagina di una categoria: testo a sinistra, foto a destra. */
.categoria-testata{ border-top:1px solid var(--border); background:var(--bg-alt); }
.categoria-testata-inner{
  padding-top:clamp(48px,8vh,96px); padding-bottom:clamp(48px,8vh,96px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(30px,5vw,64px); align-items:center;
}
.categoria-testata h1{
  margin:0 0 10px; font-size:clamp(28px,4vw,44px); font-weight:400;
  line-height:1.2; letter-spacing:-.01em;
}
.categoria-titolo-riga{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.categoria-titolo-riga h1{ margin:0; }
.categoria-titolo-icona{ width:44px; height:44px; object-fit:contain; flex-shrink:0; }
.categoria-sottotitolo{ margin:0 0 22px; font-size:16px; color:var(--voce); }
.categoria-occhiello{ margin:0 0 30px; font-size:17px; line-height:1.8; color:var(--text-body); max-width:34em; }
.categoria-testata-foto{ width:100%; height:auto; object-fit:cover; filter:saturate(.92); }
.briciola{ color:var(--via); border-bottom:1px solid var(--via-tenue); padding-bottom:2px; }
.briciola:hover{ color:var(--via-forte); }
.categoria-corpo{ border-top:1px solid var(--border); }
.categoria-corpo .wrap{ padding-top:clamp(48px,7vh,88px); padding-bottom:clamp(48px,7vh,88px); }
.categoria-corpo .prosa{ max-width:38em; margin:0; }

/* Turno prenotabile: come la riga del corso, ma con il pulsante in fondo. */
.turno{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px 44px; align-items:start;
  padding:clamp(26px,4vh,40px) 0; border-top:1px solid var(--border2);
}
.turno:hover{ background:rgba(255,255,255,.5); }
.turno-prova{ margin:0; font-size:15px; color:var(--voce); white-space:nowrap; }
.turno-azione{
  display:flex; align-items:center; gap:18px;
  justify-self:end; align-self:center;
}

/* Sotto i 640px il turno passa già a colonna singola (vedi il grid di .turno
   più sopra): qui la nota "Prima lezione di prova gratuita" va a capo sopra
   il pulsante invece di restare su una riga sola, altrimenti — più lunga del
   prezzo che sostituisce — uscirebbe dal bordo della scheda. */
@media (max-width: 640px){
  .turno-azione{
    flex-direction:column; align-items:flex-start; gap:10px;
    justify-self:stretch; width:100%;
  }
  .turno-prova{ white-space:normal; }
}
.btn-prenota{
  display:inline-flex; align-items:center; min-height:46px; padding:0 26px;
  background:var(--accent-strong); color:var(--bg); font-size:15px; white-space:nowrap;
}
.btn-prenota:hover{ background:var(--accent-hover); }

/* Pagina di prenotazione: una colonna sola, centrata, senza distrazioni. */
.prenota{ border-top:1px solid var(--border); background:var(--bg-contact); }
.prenota-inner{
  max-width:640px; margin:0 auto;
  padding:clamp(48px,8vh,104px) clamp(20px,5vw,64px);
}
.prenota-inner h1{ margin:0 0 8px; font-size:clamp(26px,3.4vw,38px); font-weight:400; line-height:1.28; }
.prenota-quando{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 0 24px; padding:5px 14px 5px 10px;
  background:rgba(150,99,79,.1); border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:.005em; color:var(--voce);
}
.prenota-nota{ margin:0 0 30px; font-size:16px; line-height:1.8; color:var(--text-body); }
.prenota .form-contatti{ margin:0; max-width:none; }
.prenota .form-contatti select{
  width:100%; padding:12px 14px; border:1px solid var(--border2);
  background:var(--cream); font-family:inherit; font-size:15px; color:var(--text);
}
.prenota .contatti-ctas{ justify-content:flex-start; margin-top:26px; }
.prenota-privacy{ margin-top:20px; font-size:13px; line-height:1.7; color:var(--text-label); }
.messaggio-errore-pubblico{
  background:#f7ece9; border:1px solid var(--voce-tenue); color:var(--voce);
  padding:14px 18px; margin-bottom:24px; font-size:15px;
}

@media (max-width: 860px){
  /* A menu aperto la tendina non ha più senso: le categorie scendono in colonna
     sotto la voce "Corsi", come tutte le altre voci. */
  .site-header nav .nav-item{ border-bottom:1px solid var(--border); }
  .site-header nav .nav-item .nav-link{ border-bottom:none; }
  .site-header nav .nav-caret{ display:none; }
  .site-header nav .sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; background:transparent; padding:0 0 10px 14px;
  }
  .site-header nav .sub a{ padding:8px 0; font-size:15px; }
  .site-header nav .sub-divisore{ margin:8px 0; }
}

/* ---------------------------------------------------------------------------
   Pagina "Listino prezzi" (listino.php), raggiungibile dalla tendina Corsi.
   Aggiunta del 2026-09-20.
   --------------------------------------------------------------------------- */

.listino-testata{ border-top:1px solid var(--border); background:var(--bg-alt); }
.listino-testata .wrap{ padding-top:clamp(48px,8vh,88px); padding-bottom:clamp(40px,6vh,64px); }
.listino-testata h1{ margin:0 0 10px; font-size:clamp(28px,4vw,44px); font-weight:400; line-height:1.2; letter-spacing:-.01em; }
.listino-intro{ margin:0; font-size:16px; color:var(--text-body); max-width:34em; }

.listino-corpo{ border-top:1px solid var(--border); }
.listino-corpo .wrap{ padding-top:clamp(48px,7vh,88px); padding-bottom:clamp(48px,7vh,88px); }

.listino-sezione{ margin-bottom:clamp(40px,6vh,64px); }
.listino-sezione:last-of-type{ margin-bottom:clamp(30px,5vh,48px); }
.listino-sezione h2{ margin:0 0 4px; font-size:clamp(20px,2.6vw,26px); font-weight:400; letter-spacing:-.01em; }
.listino-indirizzo{ margin:0 0 18px; font-size:14px; color:var(--text-faint); }

.listino-tabella-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.listino-tabella{ width:100%; min-width:440px; border-collapse:collapse; }
.listino-tabella th{
  text-align:left; padding:0 16px 10px 0; font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
  border-bottom:1px solid var(--border2); white-space:nowrap;
}
.listino-tabella td{
  padding:14px 16px 14px 0; font-size:15px; color:var(--text-body);
  border-top:1px solid var(--border2); white-space:nowrap;
}
.listino-tabella th:last-child, .listino-tabella td:last-child{ text-align:right; padding-right:0; }
.listino-quota{ font-weight:600; color:var(--voce); }

.listino-nota{ margin:0 0 22px; font-size:15px; color:var(--text-faint); }

/* Sotto i 640px la tabella diventa un elenco di schede: l'intestazione di colonna
   si nasconde (resta per i lettori di schermo) e ogni cella porta la propria
   etichetta (attributo data-label nel markup), così su schermi stretti si legge
   in verticale invece di dover scorrere di lato. */
@media (max-width: 640px){
  .listino-tabella-wrap{ overflow-x:visible; }
  .listino-tabella{ min-width:0; }
  .listino-tabella thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .listino-tabella, .listino-tabella tbody, .listino-tabella tr, .listino-tabella td{ display:block; width:100%; }
  .listino-tabella tr{ padding:12px 0; border-top:1px solid var(--border2); }
  .listino-tabella tr:first-child{ border-top:none; }
  .listino-tabella td{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding:3px 0; border:none; white-space:normal; font-size:15px;
  }
  .listino-tabella td::before{ content:attr(data-label); font-size:13px; color:var(--text-faint); }
  .listino-tabella th:last-child, .listino-tabella td:last-child{ padding-right:0; }
}

/* ---------------------------------------------------------------------------
   Informativa privacy: asterischi, legenda, caselle di consenso nei moduli.
   Aggiunta del 2026-08-17.
   --------------------------------------------------------------------------- */

.obbligatorio{ color:var(--voce); font-weight:600; }
.legenda-obbligatori{
  margin:-6px 0 18px; font-size:13px; color:var(--text-label);
}
.campo-checkbox-privacy{ margin-bottom:14px; }
.campo-checkbox-privacy label{
  display:flex; align-items:flex-start; gap:10px; font-size:14px;
  line-height:1.6; color:var(--text-body); cursor:pointer;
}
.campo-checkbox-privacy input[type="checkbox"]{
  flex:0 0 auto; width:17px; height:17px; margin-top:3px; accent-color:var(--accent-strong);
}
.campo-checkbox-privacy a{ color:var(--via); border-bottom:1px solid var(--via-tenue); }
.campo-checkbox-privacy a:hover{ color:var(--via-forte); border-bottom-color:var(--via); }

/* Pagina dell'informativa: la data, poi il pulsante per il PDF ben visibile
   sopra il testo (prima era un piccolo link in riga, facile da perdere). */
.informativa-data{
  margin:0 0 16px; font-size:14px; color:var(--text-label);
}
.informativa-pdf{ margin:0 0 34px; }

/* ---------------------------------------------------------------------------
   Blocco contatti a due colonne, riquadro "Dove sono", pulsante WhatsApp.
   Aggiunta del 2026-08-18.
   --------------------------------------------------------------------------- */

/* Dentro la griglia il modulo occupa tutta la sua colonna: la misura da 480px
   centrati serviva quando il blocco era una colonna sola al centro della pagina. */
.contatti .form-contatti{ max-width:none; margin:0; }
.contatti .messaggio-successo,
.contatti .messaggio-errore-pubblico{ max-width:none; }

/* Recapiti diretti, in fondo alla colonna della sede: due righe cliccabili,
   l'etichetta piccola sopra e il recapito sotto, perché il numero e l'indirizzo
   si leggano a colpo d'occhio anche senza avvicinarsi allo schermo. */
.recapiti{
  margin-top:clamp(26px,3.5vh,36px); padding-top:24px;
  border-top:1px solid var(--accent-line);
  display:flex; flex-direction:column; gap:16px;
}
.recapiti-titolo{
  margin:0; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint);
}
.recapito{ display:block; }
.recapito-etichetta{
  display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:4px;
}
.recapito-valore{
  display:inline-block; font-size:17px; color:var(--accent-strong);
  border-bottom:1px solid var(--accent-line); padding-bottom:2px;
}
.recapito:hover .recapito-valore{ color:var(--text); border-bottom-color:var(--via); }

/* Colonna della sede. Sta appiccicata in alto mentre si scorre il modulo:
   l'indirizzo resta sott'occhio mentre si scrive. */
.contatti-dove{ position:sticky; top:104px; }
.dove-sede{ margin:0 0 6px; font-size:19px; font-weight:500; color:var(--text); }
.dove-indirizzo{
  margin:0 0 20px; font-style:normal; font-size:16px;
  line-height:1.7; color:var(--text-body);
}
.dove-indicazioni{
  display:inline-block; margin-top:16px; font-size:15px; color:var(--via);
  border-bottom:1px solid var(--via-tenue); padding-bottom:2px;
}
.dove-indicazioni:hover{ color:var(--via-forte); border-bottom-color:var(--via); }

/* Riquadro della mappa. Finché non lo si tocca è un segnaposto disegnato con
   due gradienti — una griglia di strade appena accennata — e non c'è alcuno
   scambio con Google. Al clic il segnaposto sparisce e al suo posto entra
   l'iframe (vedi lo script in render-blocchi.php). */
.mappa{
  position:relative; width:100%; aspect-ratio:4 / 3; min-height:230px;
  border:1px solid var(--border2); background:var(--bg-alt); overflow:hidden;
}
.mappa iframe{ display:block; width:100%; height:100%; border:0; }
.mappa-segnaposto{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:24px; cursor:pointer; font-family:inherit; text-align:center;
  border:none; color:var(--text-muted);
  background:
    linear-gradient(var(--border2) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, var(--border2) 1px, transparent 1px) 0 0 / 62px 100%,
    linear-gradient(148deg, transparent 46%, var(--via-tenue) 46%, var(--via-tenue) 49%, transparent 49%),
    var(--cream);
}
.mappa-segnaposto:hover{ color:var(--text); }
.mappa-invito{
  display:inline-flex; align-items:center; min-height:44px; padding:0 22px;
  background:var(--accent-strong); color:var(--bg); font-size:15px;
}
.mappa-segnaposto:hover .mappa-invito{ background:var(--accent-hover); }
.mappa-nota{
  max-width:24em; font-size:12px; line-height:1.5; color:var(--text-faint);
  background:rgba(253,252,248,.86); padding:4px 8px;
}

/* Pulsante WhatsApp fisso in basso a destra. Solo l'icona; la scritta esce da
   sotto l'icona al passaggio del mouse, e chi arriva col tabulatore la vede
   comparire allo stesso modo. */
.whatsapp-fluttuante{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:40;
  display:flex; align-items:center; gap:0;
  transition:opacity .22s ease, transform .22s ease;
}
/* Ritirato: scende fuori dal bordo e smette di intercettare i clic (senza
   pointer-events resterebbe una zona cieca sopra il modulo). */
.whatsapp-nascosto{
  opacity:0; transform:translateY(14px) scale(.92); pointer-events:none;
}
.whatsapp-cerchio{
  display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff;
  box-shadow:0 8px 22px -6px rgba(30,27,22,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.whatsapp-fluttuante:hover .whatsapp-cerchio,
.whatsapp-fluttuante:focus-visible .whatsapp-cerchio{
  transform:scale(1.06);
  box-shadow:0 12px 26px -6px rgba(30,27,22,.5);
}
.whatsapp-fluttuante:focus-visible{ outline:none; }
.whatsapp-fluttuante:focus-visible .whatsapp-cerchio{
  outline:2px solid var(--via); outline-offset:3px;
}
.whatsapp-etichetta{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:14px; color:var(--text); background:var(--cream);
  border:1px solid var(--border2); border-right:none;
  border-radius:999px 0 0 999px; padding:10px 0 10px 0; margin-right:-16px;
  box-shadow:0 8px 22px -10px rgba(30,27,22,.4);
  transition:max-width .24s ease, opacity .18s ease, padding .24s ease;
}
.whatsapp-fluttuante:hover .whatsapp-etichetta,
.whatsapp-fluttuante:focus-visible .whatsapp-etichetta{
  max-width:230px; opacity:1; padding:10px 30px 10px 18px;
}
/* Su schermo stretto l'etichetta non esce mai: ruberebbe mezza pagina e il
   dito non "passa sopra" niente. */
@media (max-width: 640px){
  .whatsapp-etichetta{ display:none; }
  .whatsapp-cerchio{ width:52px; height:52px; }
}
/* Chi ha chiesto al sistema operativo meno animazioni non le riceve. */
@media (prefers-reduced-motion: reduce){
  .whatsapp-fluttuante, .whatsapp-cerchio, .whatsapp-etichetta{ transition:none; }
  .whatsapp-fluttuante:hover .whatsapp-cerchio{ transform:none; }
  .whatsapp-nascosto{ transform:none; }
}

/* Sotto gli 860px contatti e sede si mettono in fila, e la sede smette di
   restare appiccicata in alto. */
@media (max-width: 860px){
  .contatti-inner{ grid-template-columns:1fr; gap:clamp(34px,6vh,52px); }
  .contatti-dove{ position:static; }
  .mappa{ aspect-ratio:16 / 10; }
}

/* ── Ritratti dentro il testo libero ─────────────────────────────────────────
   Un blocco di testo libero con più di un Titolo 2 non è una citazione: è una
   serie di presentazioni, una persona per titolo. Il riconoscimento sta nella
   struttura, non in una classe — nell'editor basta scrivere il nome come
   Titolo 2, la disciplina in corsivo sulla riga sotto, poi il testo.
   La riga in corsivo prende il cotto, lo stesso colore della firma sotto la
   citazione: è la stessa cosa, il modo in cui una persona si presenta.
   Lo schema citazione (Titolo 3 + Titolo 2) resta com'era: si riconosce ora
   per esclusione, un titolo solo invece di molti.
   Il ritratto rotondo (iniziali finché non c'è una foto vera) e il riquadro
   che lo affianca al nome li aggiunge renderBloccoTesto() in PHP — vedi
   aggiungiRitrattiPersone() — non l'editor: chi scrive continua a vedere solo
   Titolo 2 + corsivo + testo, la struttura sotto resta quella di sempre.
   Nota per chi tocca questo CSS in futuro: da qui in poi lo stile si aggancia
   direttamente alle classi ".persona-…" (create solo quando ci sono più
   persone), non più a ":has(h2 ~ h2)" — il Titolo 2 ora vive dentro
   ".persona-testo", non più fratello diretto degli altri Titolo 2, quindi
   quel selettore non li vedrebbe più come "fratelli". */
.intro .persona-riquadro{
  display:flex; align-items:flex-start; gap:22px;
  margin:52px 0 0; padding-top:30px;
  border-top:1px solid var(--border2);
}
.intro .persona-riquadro:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
/* Quando dopo l'ultima persona il discorso continua con un nuovo paragrafo
   (es. "Dove siamo"), gli si dà lo stesso distacco visivo che separa una
   persona dall'altra - una linea sottile sopra - così resta chiaro che non
   sta più parlando di nessuno in particolare. */
.intro .persona-riquadro + h3{ margin-top:52px; padding-top:30px; border-top:1px solid var(--border2); }
.intro .persona-testo{ min-width:0; flex:1 1 auto; }
.intro .persona-testo h2{
  max-width:22em; margin:0 0 6px;
  font-size:clamp(20px,2.2vw,26px); font-weight:400; line-height:1.32; color:var(--text);
}
/* La riga sotto il nome: solo corsivo, niente altro, altrimenti è testo normale. */
.intro .persona-testo h2 + p:has(em:only-child){
  margin:0 0 18px; font-size:.8rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--voce); line-height:1.5;
}
.intro .persona-testo h2 + p:has(em:only-child) em{ font-style:normal; }
.intro .persona-testo p{ max-width:38em; font-size:16px; }
/* Il ritratto: un cerchio con le iniziali, pronto a diventare una foto vera -
   quando render-blocchi.php (trovaFotoPersona()) trova un file già pronto in
   immagini-sito/, aggiunge anche la classe "persona-ritratto-foto" e l'immagine
   arriva via style inline, qui sotto solo taglio e posizione. Al passaggio del
   mouse su tutto il riquadro della persona, un piccolo richiamo: il cerchio si
   allarga appena e prende un'ombra morbida, come se si sporgesse un poco. */
.intro .persona-ritratto{
  flex:0 0 auto; width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--accent) 0%, var(--accent-strong) 100%);
  color:var(--cream); font-size:15px; font-weight:500; letter-spacing:.03em;
  transition:transform .22s ease, box-shadow .22s ease;
}
.intro .persona-ritratto-foto{ background-size:cover; background-position:center; }
.intro .persona-riquadro:hover .persona-ritratto{
  transform:scale(1.08);
  box-shadow:0 8px 22px rgba(63,74,57,.28);
}
@media (prefers-reduced-motion: reduce){
  .intro .persona-ritratto{ transition:none; }
}
@media (max-width:480px){
  .intro .persona-riquadro{ gap:16px; }
  .intro .persona-ritratto{ width:48px; height:48px; font-size:13px; }
}

/* Nome dell'associazione nel piè di pagina reso cliccabile: porta alla sua pagina. */
.footer-associazione-link:hover .footer-associazione{ color:var(--text-body); }

/* ── Testata con foto e scritta in sovrimpressione ────────────────────────────
   Parente stretta dell'hero, ma senza pulsanti e più bassa: per pagine come
   quella dell'associazione, dove la foto è un ritratto di gruppo e la scritta è
   una frase sola. Il velo scuro non copre tutta l'immagine, solo l'ultimo terzo
   in degradé: i visi restano leggibili, la frase pure.
   Nell'editor: la frase come Titolo 2, l'eventuale riga sopra come testo normale. */
.testata-foto{
  position:relative; min-height:clamp(280px,44vh,440px);
  display:flex; align-items:flex-end; overflow:hidden;
  background:linear-gradient(150deg, var(--accent) 0%, var(--bg-dark) 100%);
}
.testata-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%; z-index:0; }
.testata-foto::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(28,25,20,.78) 0%, rgba(28,25,20,.42) 34%, rgba(28,25,20,0) 70%);
}
.testata-foto-inner{
  position:relative; z-index:1; width:100%; max-width:1100px; margin:0 auto;
  padding:clamp(32px,6vh,64px) clamp(20px,5vw,64px);
}
.testata-foto-inner p{ margin:0 0 14px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#e6e0d2; }
.testata-foto-inner h1, .testata-foto-inner h2, .testata-foto-inner h3{
  max-width:16em; margin:0; font-size:clamp(26px,4.2vw,46px); font-weight:300;
  line-height:1.2; letter-spacing:-.01em; color:var(--cream); text-wrap:balance;
  text-shadow:0 1px 26px rgba(20,18,14,.45);
}
/* Sotto i 640px l'altezza fissa (clamp sopra) diventa troppo alta rispetto
   alla larghezza per una foto larga come un ritratto di gruppo: il ritaglio
   automatico arriva a tagliare le persone ai due bordi. Qui la fascia
   diventa proporzionale invece che alta un tot fisso, così la foto intera
   resta dentro l'inquadratura anche sui telefoni più stretti. */
@media (max-width:640px){
  .testata-foto{ min-height:auto; aspect-ratio:2/1; }
}

/* ── Testo libero con richiamo alla pagina Facebook ───────────────────────────
   Per il blocco "L'associazione": il testo a sinistra alla sua misura di lettura
   normale (una riga troppo lunga si legge peggio, non meglio), e a destra un
   piccolo riquadro fisso che rimanda alla pagina Facebook dell'associazione -
   logo, nome per esteso, un unico collegamento. Sotto gli 860px il riquadro
   scende sotto il testo, centrato: la stessa soglia gia usata per i contatti.
   Nome e indirizzo Facebook sono fissi nella funzione che genera il blocco,
   non nell'editor: cambiano raramente, e cosi restano scritti in un punto solo. */
.intro-facebook{
  display:grid; gap:40px 56px; align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}
.intro-facebook > .intro-facebook-testo{ min-width:0; }
.intro-facebook > .intro-facebook-testo p,
.intro-facebook > .intro-facebook-testo ul,
.intro-facebook > .intro-facebook-testo ol{ max-width:none; }
@media (max-width:860px){
  .intro-facebook{ grid-template-columns:1fr; }
}
.richiamo-facebook{
  background:var(--cream); border:1px solid var(--border); border-radius:16px;
  padding:2rem 1.75rem; text-align:center;
  box-shadow:0 10px 30px rgba(44,40,34,.05);
}
.richiamo-facebook img{ width:52px; height:52px; object-fit:contain; margin:0 auto 16px; }
.richiamo-facebook-nome{
  display:block; font-size:17px; font-weight:500; color:var(--text); line-height:1.4; margin-bottom:6px;
}
.richiamo-facebook-luogo{
  display:block; font-size:13px; color:var(--text-faint); margin-bottom:20px;
}
.richiamo-facebook-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--via); border-bottom:1px solid var(--via-tenue); padding-bottom:2px;
}
.richiamo-facebook-icona{ width:15px; height:15px; flex-shrink:0; fill:currentColor; }
.richiamo-facebook a:hover .richiamo-facebook-cta{ color:var(--via-forte); border-bottom-color:var(--via); }

/* ---------------------------------------------------------------------------
   Pulsante di iscrizione alla newsletter, fisso in basso a destra sopra il
   pulsante WhatsApp (solo in home). Al clic apre un pannello con email e
   consenso privacy; a iscrizione avvenuta il pannello mostra l'esito e si
   dissolve da solo. Sostituisce la tendina automatica, 2026-08-25.
   --------------------------------------------------------------------------- */

/* Testo per chi naviga con un lettore di schermo, invisibile a occhio: la
   label del campo email si affida al placeholder per la vista, ma un campo
   senza label leggibile è un problema per chi non vede lo schermo. */
.a-schermo-nascosto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.newsletter-fluttuante{
  position:fixed; right:clamp(16px,3vw,28px);
  bottom:calc(clamp(16px,3vw,28px) + 58px + 14px);
  z-index:41;
}
/* Stessa logica del pulsante WhatsApp: vicino ai contatti o al piè di
   pagina si ritira, per non coprire la casella di consenso privacy del
   modulo lì sotto. */
.newsletter-nascosto{
  opacity:0; transform:translateY(14px) scale(.92); pointer-events:none;
}
.newsletter-fluttuante{ transition:opacity .22s ease, transform .22s ease; }
.newsletter-pulsante{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:0;
}
.newsletter-cerchio{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  background:var(--accent-strong); color:var(--bg);
  box-shadow:0 8px 22px -6px rgba(30,27,22,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}

/* Tre cerchi concentrici che si allargano dal pulsante e svaniscono, a
   raffica ogni tre secondi, per farsi notare finché nessuno lo ha ancora
   cliccato. Sfalsati di poco l'uno dall'altro così sembrano un'unica onda
   a tre creste, non tre lampeggi identici sovrapposti. */
.newsletter-onda{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent-strong);
  opacity:0; pointer-events:none;
  animation:newsletter-richiamo 3s ease-out infinite;
}
.newsletter-onda:nth-child(2){ animation-delay:.3s; }
.newsletter-onda:nth-child(3){ animation-delay:.6s; }
.newsletter-notato .newsletter-onda{ animation:none; opacity:0; }

@keyframes newsletter-richiamo{
  0%{ transform:scale(1); opacity:.65; }
  40%{ transform:scale(1.85); opacity:0; }
  100%{ transform:scale(1.85); opacity:0; }
}
.newsletter-pulsante:hover .newsletter-cerchio,
.newsletter-pulsante:focus-visible .newsletter-cerchio{
  transform:scale(1.06);
  box-shadow:0 12px 26px -6px rgba(30,27,22,.5);
}
.newsletter-pulsante:focus-visible{ outline:none; }
.newsletter-pulsante:focus-visible .newsletter-cerchio{
  outline:2px solid var(--via); outline-offset:3px;
}
.newsletter-etichetta{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:14px; color:var(--text); background:var(--cream);
  border:1px solid var(--border2); border-right:none;
  border-radius:999px 0 0 999px; padding:10px 0 10px 0; margin-right:-16px;
  box-shadow:0 8px 22px -10px rgba(30,27,22,.4);
  transition:max-width .24s ease, opacity .18s ease, padding .24s ease;
}
.newsletter-pulsante:hover .newsletter-etichetta,
.newsletter-pulsante:focus-visible .newsletter-etichetta{
  max-width:230px; opacity:1; padding:10px 30px 10px 18px;
}
.newsletter-aperto .newsletter-etichetta{ max-width:0 !important; opacity:0 !important; padding:10px 0 !important; }

.newsletter-pannello{
  position:absolute; right:0; bottom:calc(100% + 14px);
  width:min(320px, calc(100vw - 32px));
  background:var(--cream); border:1px solid var(--border2); border-radius:12px;
  box-shadow:0 20px 45px -12px rgba(30,27,22,.35);
  padding:20px 20px 18px; font-size:14px; color:var(--text);
  opacity:0; transform:translateY(8px) scale(.98); pointer-events:none;
  transform-origin:bottom right;
  transition:opacity .2s ease, transform .2s ease;
}
.newsletter-aperto .newsletter-pannello{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.newsletter-dissolvenza .newsletter-pannello{ transition:opacity .6s ease; opacity:0; }
.newsletter-pannello-titolo{ margin:0 22px 8px 0; font-size:15px; font-weight:600; color:var(--text); }
.newsletter-pannello-testo{ margin:0 22px 14px 0; line-height:1.5; }
.newsletter-pannello-form{ display:flex; flex-direction:column; gap:10px; }
.newsletter-pannello-form input[type="email"]{
  padding:9px 12px; border:1px solid var(--border2); border-radius:6px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--text);
}
.newsletter-pannello-privacy{
  display:flex; align-items:flex-start; gap:6px; font-size:12px; line-height:1.5;
  color:var(--text-label); cursor:pointer;
}
.newsletter-pannello-privacy input[type="checkbox"]{
  flex:0 0 auto; width:15px; height:15px; margin-top:2px; accent-color:var(--accent-strong);
}
.newsletter-pannello-privacy a{ color:var(--via); border-bottom:1px solid var(--via-tenue); }
.newsletter-pannello-privacy a:hover{ color:var(--via-forte); border-bottom-color:var(--via); }
.newsletter-pannello-form button{
  padding:9px 16px; border:none; border-radius:6px; cursor:pointer;
  background:var(--accent-strong); color:var(--bg); font-family:inherit; font-size:14px;
}
.newsletter-pannello-form button:hover{ background:var(--accent-hover); }
.newsletter-pannello-chiudi{
  position:absolute; top:10px; right:10px; width:22px; height:22px; border:none;
  background:transparent; color:var(--text-faint); font-size:18px; line-height:1; cursor:pointer;
}
.newsletter-pannello-chiudi:hover{ color:var(--text); }
.newsletter-pannello-msg{ margin:0 18px 0 0; }
.newsletter-pannello-msg-ok{ color:var(--accent-strong); }
.newsletter-pannello-msg-errore{ color:var(--voce); }

@media (max-width:640px){
  .newsletter-etichetta{ display:none; }
  .newsletter-cerchio{ width:46px; height:46px; }
  .newsletter-fluttuante{ bottom:calc(clamp(16px,3vw,28px) + 52px + 12px); }
}
@media (prefers-reduced-motion: reduce){
  .newsletter-pannello, .newsletter-cerchio, .newsletter-etichetta, .newsletter-fluttuante{ transition:none; }
  .newsletter-nascosto{ transform:none; }
  .newsletter-onda{ animation:none; opacity:0; }
}