/* =================================================================
   Movimento nel Bosco — restyling v3 ("la nuova veste")
   Design system — conversione prima di tutto:
   · una sola azione dominante: "Prenota la lezione di prova" (ambra)
   · mobile-first (il pubblico arriva da Instagram, col telefono)
   · frizione zero: WhatsApp sempre a portata di pollice
   · le insegnanti e le foto vere al centro
   Si mantengono: palette Brand DEF (Beamlight) + font Rubik / DM Sans.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* --- Palette ufficiale Beamlight (Brand DEF) — NON toccare --- */
  --viola:       #601d7d;  /* viola primario */
  --viola-scuro: #2e0644;  /* viola profondo (logo) */
  --melanzana:   #33252d;  /* testo scuro */
  --violetto:    #826fc5;  /* viola medio */
  --periwinkle:  #889be2;  /* azzurro-viola */
  --lilla:       #d1b4ed;  /* lilla chiaro */
  --lilla-tenue: #efe6fb;  /* lilla pastello (tint) */
  --lime:        #9dbf43;  /* verde lime accento */
  --ambra:       #f2ac20;  /* ambra — solo la CTA "prova" */
  --gold:        #7a5b17;  /* oro antico — occhielli e filetti raffinati (contrasto AA su crema) */
  --line:        rgba(46,6,68,.12); /* filo sottile */
  --panna:       #f4eee4;  /* crema calda (base) */
  --bianco:      #ffffff;

  /* Derivati (tint calcolati dalla palette, nessun colore nuovo) */
  --lime-tenue:  #f0f4e0;
  --ambra-tenue: #fdf3dd;
  --ink-soft:    #6d5f68;  /* melanzana attenuata per testi secondari */

  /* --- Codice colore delle lezioni (palinsesto) ---------------------------
     Una tinta per disciplina, scelta da Paola il 19/08/2026. Quattro su cinque
     escono dalla palette Beamlight (viola, lime, lilla, periwinkle); il Pilates
     e' l'unico fuori palette: un arancio piu' caldo dell'ambra della CTA, cosi'
     il riquadro di una lezione non si confonde con il bottone "Prenota".
     Tre valori per disciplina, e servono tutti e tre:
       --lez-NOME         il pieno: pallino della legenda e filetto
       --lez-NOME-tenue   lo sfondo del riquadro (il pieno annacquato di bianco)
       --lez-NOME-testo   la scritta sopra, scurita quanto basta per superare
                          4.5:1 (AA) sul proprio tenue
     Si cambia una tinta qui e cambiano insieme legenda, panoramica settimana e
     giorno per giorno: non ci sono colori di lezione scritti altrove. */
  --lez-vinyasa:           #601d7d;
  --lez-vinyasa-tenue:     #e2d6e8;
  --lez-vinyasa-testo:     #601d7d;
  --lez-pilates:           #f89f3d;
  --lez-pilates-tenue:     #fef1e2;
  --lez-pilates-testo:     #8a4a05;
  --lez-gravidanza:        #9dbf43;
  --lez-gravidanza-tenue:  #f0f4e0;
  --lez-gravidanza-testo:  #5c7317;
  --lez-mamma:             #d1b4ed;
  --lez-mamma-tenue:       #efe6fb;
  --lez-mamma-testo:       #6c29ad;
  --lez-meditazione:       #889be2;
  --lez-meditazione-tenue: #edf0fb;
  --lez-meditazione-testo: #2a46ac;

  --font-title: 'Rubik', system-ui, sans-serif;
  --font-body:  'DM Sans', system-ui, sans-serif;
  /* Etichette d'interfaccia (menu, bottoni, filtri, tab): Rubik, per dare
     carattere ai comandi. Il brand book non le classifica né come titoli né
     come testo: se le vuoi tutte in DM Sans, basta metterci var(--font-body). */
  --font-ui:    var(--font-title);

  --maxw: 1140px;
  /* Forma firma: l'ARCO (doorway) — il segno grafico che ricorre su immagini e card */
  --arch: 26px;
  --radius: 22px;
  --radius-lg: 30px;
  /* Sommità ad arco: gli angoli alti diventano una volta ellittica, quelli bassi restano dolci */
  --arch-top:      42px 42px var(--radius) var(--radius);
  /* Forme organiche (macchie / ovali irregolari) per le foto firma */
  --arch-top-tall: 60% 40% 55% 45% / 50% 62% 40% 52%;
  --blob:          63% 37% 58% 42% / 52% 60% 40% 55%;
  /* Card con testo: cima organica, base stabile (il testo in basso non sborda) */
  --arch-card:     57% 43% 30px 30px / 46% 40% 30px 30px;
  /* Tessera fotografica orizzontale (i corsi in home): arco largo e dolce,
     appena asimmetrico come tutte le forme del brand */
  --arch-tile:     60% 40% 30px 30px / 34% 34% 30px 30px;
  /* Ombre morbide e diffuse, con una punta di viola: "luce d'atmosfera" */
  --shadow: 0 26px 60px -28px rgba(46, 6, 68, .30);
  --shadow-sm: 0 12px 32px -16px rgba(46, 6, 68, .20);
  /* Aloni luminosi (tocco etereo) */
  --glow-oro:   0 0 40px -6px rgba(242, 172, 32, .45);
  --glow-lilla: 0 0 60px -10px rgba(130, 111, 197, .40);

  --header-h: 64px;
  --mobilebar-h: 62px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* `hidden` su body lo rende un contenitore di scorrimento e romperebbe il
     `position: sticky` dell'header; `clip` taglia allo stesso modo senza crearlo.
     Chi non conosce `clip` (Safari < 16) usa `hidden` come prima. */
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-body);
  color: var(--melanzana);
  /* Velo di luce: aloni pastello morbidi in alto, come luce che filtra */
  background:
    radial-gradient(130% 46% at 50% -12%, rgba(209,180,237,.15), transparent 62%),
    var(--panna);
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-size: 1.02rem;
  position: relative;
}
/* Grana sottile su tutto il sito: rompe la piattezza dei gradienti, dà un'aria
   più fatta a mano che digitale. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 500; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--lilla); color: var(--viola-scuro); }

/* Titoli: Rubik SemiBold (600). È il peso con cui il brand book Rev.1 compone
   OGNI titolo — dal claim "Il benessere è un movimento naturale." ai titoli di
   sezione. La spaziatura negativa (-.025em) ricalca il Tc -0.021 del documento. */
h1, h2, h3, h4 { font-family: var(--font-title); line-height: 1.05; margin: 0 0 .4em; color: var(--viola-scuro); font-weight: 600; letter-spacing: -.025em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2.05rem, 4.6vw, 3.5rem); }
h3 { font-size: 1.4rem; letter-spacing: -.015em; }
p  { margin: 0 0 1rem; }
.muted { color: var(--ink-soft); }

/* L'header sta sempre in cima (fisso sulla home, sticky altrove): gli ancoraggi
   devono fermarsi SOTTO di esso, altrimenti "Scopri i corsi ↓" porta il titolo
   della sezione a finire nascosto dietro il menu. */
section[id], div[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(72px, 10vw, 150px) 0; }
.section--slim { padding: clamp(34px, 5vw, 60px) 0; }
.center { text-align: center; }
.lead { font-size: 1.16rem; max-width: 62ch; color: var(--ink-soft); }
.center .lead { margin-left: auto; margin-right: auto; }

/* Sfondi alternati delle sezioni */
.tint-lilla { background:
  radial-gradient(ellipse 100% 82% at 50% -16%, rgba(209,180,237,.40), transparent 68%),
  var(--lilla-tenue); }
.tint-panna  { background: var(--bianco); }
.tint-lime { background:
  radial-gradient(ellipse 100% 82% at 50% -16%, rgba(157,191,67,.20), transparent 68%),
  var(--lime-tenue); }
.tint-scuro { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 92% 78% at 50% -20%, rgba(130,111,197,.42), transparent 66%),
  var(--viola-scuro); }
.tint-scuro h2, .tint-scuro h3 { color: #fff; }
.tint-scuro p { color: var(--lilla-tenue); }

/* ---------- Ritmo pulito della home (minimal, caldo-neutro) ---------- */
/* Sezioni su panna con appena un velo di colore tono-su-tono, alternato:
   aria e respiro, niente bordi strappati né macchie sature (ispirazione MYA). */
#presentazione, #struttura, #corsi, #esperienze, #prova, #abbonamenti-teaser,
#ambiente, #recensioni, #faq, .parent {
  position: relative; overflow: hidden;
}

/* Timbro (croco del brand) come firma discreta, in filigrana */
#struttura::before, #faq::before, .parent::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: url("../assets/timbro.svg") center / contain no-repeat;
  opacity: .05;
}
#struttura::before { width: 460px; height: 400px; top: -50px; right: -110px; transform: rotate(10deg); }
#faq::before { width: 400px; height: 350px; bottom: -70px; left: -90px; transform: rotate(-16deg); }
.parent::after { width: 440px; height: 380px; top: -30%; right: -6%; transform: rotate(-8deg); opacity: .12; filter: brightness(3); }
@media (max-width: 720px) {
  #struttura::before, #faq::before, .parent::after { width: 280px; height: 245px; }
}
/* Il velo si alterna lilla / lime scendendo, senza salti: nessuna sezione della
   home è bianca (il bianco resta ai soli elementi in rilievo: card, FAQ, form). */
#presentazione, #esperienze, #abbonamenti-teaser, #recensioni {
  background:
    radial-gradient(ellipse 120% 72% at 50% -22%, rgba(209,180,237,.16), transparent 72%),
    var(--panna);
}
#corsi, #prova, #ambiente {
  background:
    radial-gradient(ellipse 120% 72% at 50% -22%, rgba(157,191,67,.10), transparent 72%),
    var(--panna);
}
#struttura, #faq { background: var(--panna); }
#presentazione .container, #struttura .container, #corsi .container, #esperienze .container,
#prova .container, #abbonamenti-teaser .container, #ambiente .container,
#recensioni .container, #faq .container,
.parent .container { position: relative; z-index: 1; }

/* ---------- Struttura della scuola (due percorsi, solo home) ---------- */
.pillars { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 34px); margin-top: 44px; }
.pillars::after {
  content: "+"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 600; font-size: 1.3rem; color: var(--viola);
  box-shadow: var(--shadow-sm); z-index: 2;
}
@media (max-width: 720px) { .pillars::after { display: none; } }
.pillar { background: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px); box-shadow: 0 24px 50px -20px rgba(130,111,197,.45); border-top: 5px solid var(--violetto); }
.pillar--eventi { border-top-color: var(--lime); box-shadow: 0 24px 50px -20px rgba(157,191,67,.45); }
.pillar-tag { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--violetto); background: var(--lilla-tenue); padding: .3em 1em; border-radius: 999px; margin-bottom: 16px; }
.pillar--eventi .pillar-tag { color: #5c7317; background: var(--lime-tenue); }
.pillar p { color: var(--ink-soft); }
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; } }

/* Video di presentazione (home) — con segnaposto finché non arriva il file */
.video-placeholder { position: relative; max-width: 720px; margin: 40px auto 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.video-placeholder img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: brightness(.72); }
.video-placeholder .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.94); border: none; display: flex; align-items: center; justify-content: center; color: var(--viola); cursor: not-allowed; box-shadow: var(--shadow-sm); }
.video-placeholder .play-btn svg { width: 32px; height: 32px; margin-left: 4px; }
.video-placeholder__tag { position: absolute; bottom: 16px; left: 16px; background: var(--viola-scuro); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .82rem; padding: .4em 1.1em; border-radius: 999px; }
/* ---------- "Ci presentiamo": testo a sinistra, filmato a destra ----------
   Il video della scuola e' VERTICALE (480x864). Incolonnato al centro come
   erano prima queste sezioni occupava mezza pagina in altezza e lasciava due
   praterie vuote ai lati; di lato invece la prateria diventa la colonna del
   testo, e la sezione resta alta quanto il filmato.
   `1fr auto`: il testo prende quel che c'e', il video chiede la sua larghezza
   e non cede. `align-items: center` mette il titolo alla stessa altezza del
   video invece che appeso in cima. */
.presentazione { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
/* La colonna del testo si ferma a 520: su schermi larghi una riga di 700px si
   legge male, e lo spazio che avanza spinge il video tutto a destra - che e'
   dove lo vogliamo. */
.presentazione__testo { max-width: 520px; }
.presentazione__testo h2 { margin-top: 0; }
.presentazione__testo .lead { margin-bottom: 0; }
.presentazione__video { position: relative; justify-self: end; line-height: 0; }

/* Larghezza FISSA, non percentuale: il file e' largo 480 pixel veri, quindi
   mostrarlo piu' grande di cosi' lo sgrana e basta. A 340 ha ancora un buon
   margine di finezza sugli schermi fitti dei telefoni.
   `height: auto` lascia decidere la forma al filmato (e, finche' non e' stato
   letto, alla copertina - che infatti e' un suo fotogramma, stessa forma: se
   fosse di forma diversa il testo salterebbe nel momento in cui il video parte). */
.intro-video { display: block; width: 340px; max-width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--viola-scuro); }

/* IL PLAY GRANDE. Serve perche' i comandi nativi del browser hanno un play
   minuscolo (Chrome desktop) o non ne mostrano nessuno finche' non si tocca.
   Sparisce al primo avvio, quando subentrano i controlli veri.
   NON eredita da `.video-placeholder .play-btn`: quella e' una regola
   discendente e vale solo dentro il segnaposto, quindi qui va tutto ripetuto. */
.play-btn--grande { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.94); border: none; display: flex; align-items: center; justify-content: center; color: var(--viola); cursor: pointer; box-shadow: var(--shadow); transition: transform .16s ease, background .2s ease; }
.play-btn--grande svg { width: 38px; height: 38px; margin-left: 5px; }
.play-btn--grande:hover { transform: translate(-50%,-50%) scale(1.06); background: #fff; }

/* Sotto i 780 le due colonne non ci stanno piu' affiancate: si impilano
   nell'ordine in cui stanno nel markup - prima il testo, poi il video - e il
   testo si centra come nel resto del sito sui telefoni. */
@media (max-width: 780px) {
  .presentazione { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .presentazione__testo { max-width: 560px; text-align: center; }
  .presentazione__video { justify-self: center; }
}

/* Evidenziatore organico dietro a una parola/frase chiave */
.mark { position: relative; white-space: nowrap; z-index: 0; }
.mark::before {
  content: ""; position: absolute; inset: -.08em -.28em; z-index: -1;
  background: var(--lilla-tenue);
  border: 2px solid var(--violetto);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  transform: rotate(-2deg);
}
.mark--lime::before { background: var(--lime-tenue); border-color: var(--lime); transform: rotate(2deg); }
.mark--ambra::before { background: var(--ambra-tenue); border-color: var(--ambra); transform: rotate(-1.5deg); }

/* Carte leggermente storte, come appoggiate a mano — si raddrizzano al hover */
.disc, .review { transition: transform .25s ease; }
.disc:hover, .review:hover { transform: translateY(-4px); }

/* ---------- Icone ----------
   Regola: SEMPRE icone a contorno (tratto viola), mai piene o colorate.
   Sostituiscono le emoji: `.ico-i` eredita il colore dal contenitore
   (viola nelle sezioni chiare, chiaro nel footer scuro). */
.ico-i { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none; }
.info .ico .ico-i { width: 26px; height: 26px; vertical-align: 0; }
.step .n .ico-i { width: 22px; height: 22px; vertical-align: 0; }
.site-footer .ico-i, .note .ico-i { margin-right: .1em; }

/* ---------- Bottoni ----------
   Gerarchia voluta: la CTA "prova" è UNA e si vede (ambra).
   Tutto il resto è secondario. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-ui);
  font-weight: 600; font-size: 1rem; padding: .9em 1.7em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-cta { background: var(--ambra); color: var(--viola-scuro); box-shadow: 0 12px 26px -12px rgba(242,172,32,.65); }
.btn-cta:hover { background: #f7ba3f; box-shadow: 0 16px 32px -12px rgba(242,172,32,.7); }
.btn-primary { background: var(--viola); color: #fff; }
.btn-primary:hover { background: var(--viola-scuro); }
.btn-ghost { background: transparent; border-color: var(--lilla); color: var(--viola); }
.btn-ghost:hover { background: var(--viola); border-color: var(--viola); color: #fff; }
.btn-light { background: #fff; color: var(--viola); box-shadow: var(--shadow-sm); }
.btn-wa { background: var(--lime); color: var(--viola-scuro); }
.btn-wa:hover { background: #a9ca52; }
.btn--lg { font-size: 1.08rem; padding: 1em 2em; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.center .actions { justify-content: center; }

.more { font-family: var(--font-ui); font-weight: 600; color: var(--viola); display: inline-flex; align-items: center; gap: .35em; }
.more:hover { text-decoration: underline; }

/* Icona WhatsApp (inline SVG via mask, così prende il colore del testo) */
.ico-wa { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(244,238,228,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); padding: 8px 0; }
.brand { display: flex; align-items: center; flex: none; }
.logo-full { height: 44px; width: auto; }
.logo-footer { height: 52px; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-weight: 500; font-size: .97rem; }
.nav-links > li > a, .nav-links > li > .dropdown-parent > a, .nav-links .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: .3em; padding: .55em .8em; border-radius: 999px; color: var(--melanzana); transition: background .15s ease, color .15s ease; }
.nav-links > li > a:hover, .nav-links > li > .dropdown-parent > a:hover { background: var(--lilla-tenue); color: var(--viola); }
/* Voce con link + freccetta (es. Yoga): il link e il toggle stanno vicini */
.nav-links > li > .dropdown-parent > a { padding-right: .3em; }
.nav-links > li > .dropdown-parent > .nav-dropdown-toggle { padding-left: .2em; padding-right: .6em; }

/* LA RIGA DEL MENU DEVE RESTARE UNA RIGA.
   Aggiungendo "Open Days" fra le voci principali la barra ha superato lo
   spazio disponibile e quattro voci - Open Days, Info corsi, Classi al parco,
   Chi siamo - sono andate a capo su DUE righe, a ogni larghezza da 1025 a
   1920. Misurato con i font veri caricati: senza aspettare `document.fonts`
   il difetto non si vede, perche' i font di sistema sono piu' stretti e
   ci stanno.
   Il `nowrap` da solo risolve da 1180 in su; sotto, la riga sforerebbe (19px
   a 1100, 94px a 1025) e siccome il corpo pagina ha `overflow-x: clip` non
   comparirebbe nessuna barra di scorrimento: le ultime voci sparirebbero e
   basta. Per quella fascia si stringono spazi e padding - il testo non scende
   sotto gli 11.6px, quindi resta leggibile - e sotto i 1025 comanda gia'
   l'hamburger. */
.nav-links > li > a, .nav-links .nav-dropdown-toggle { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1180px) {
  .nav-links { gap: 0; font-size: .9rem; }
  .nav-links > li > a, .nav-links > li > .dropdown-parent > a, .nav-links .nav-dropdown-toggle { padding-left: .5em; padding-right: .5em; }
  .nav-links > li > .dropdown-parent > a { padding-right: .15em; }
  .nav-links > li > .dropdown-parent > .nav-dropdown-toggle { padding-left: .1em; padding-right: .35em; }
}

.nav-dropdown-toggle { background: none; border: 0; font: inherit; cursor: pointer; color: inherit; }
.nav-dropdown-toggle:hover { background: var(--lilla-tenue); color: var(--viola); }
.caret { width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-15%); transition: transform .15s ease; }
.has-dropdown.open > .dropdown-parent .caret { transform: rotate(225deg) translateY(-15%); }

.has-dropdown { position: relative; }
.dropdown-parent { display: inline-flex; align-items: center; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: #fff; border-radius: 16px;
  box-shadow: var(--shadow); padding: 8px; list-style: none; margin: 0; display: none; z-index: 70; }
.has-dropdown.open > .dropdown-menu { display: block; }
.dropdown-menu li { position: relative; }
.dropdown-menu a { display: block; padding: .6em .9em; border-radius: 10px; font-weight: 500; }
.dropdown-menu a:hover { background: var(--lilla-tenue); color: var(--viola); }
/* LA VOCE NUOVA DELLA TENDINA, in ambra perche' si noti fra le altre. Quale
   sia lo decide VOCI_NUOVE in src/components/Testata.tsx, dove c'e' scritto
   anche come si spegne quando la novita' non e' piu' tale.
   L'ambra e' quella della CTA 'prova' (--ambra) e l'oro antico e' --gold:
   nessun colore nuovo entra in palette per una voce che dura quindici
   giorni. Il testo scuro su fondo chiaro tiene il contrasto AA. */
.dropdown-menu a.voce-nuova { background: var(--ambra-tenue); color: var(--gold); font-weight: 700; }
.dropdown-menu a.voce-nuova:hover { background: var(--ambra); color: var(--viola-scuro); }
/* LA STESSA VOCE, MA IN PRIMA FILA. Gli Open Days sono usciti dalla tendina e
   stanno fra le voci principali: li' la versione tenue non si vedrebbe, perche'
   sulla home la testata e' trasparente sopra la foto. Ambra piena e testo
   scuro - la coppia della CTA 'prova', gia' verificata - che tiene su
   entrambi i fondi, la foto scura della home e la crema delle altre pagine.
   La pillola non va disegnata: le voci di primo livello hanno gia'
   `border-radius: 999px` e il loro padding.
   IL PREFISSO `.site-header` NON E' ORNAMENTALE: senza, questa regola pareggia
   in specificita' con `.site-header--over .nav-links > li > a` (piu' in basso
   nel foglio, dentro la media query da 1025px) e perderebbe il confronto
   proprio sulla home, cioe' dove serve. */
.site-header .nav-links > li > a.voce-nuova { background: var(--ambra); color: var(--viola-scuro); font-weight: 700; }
.site-header .nav-links > li > a.voce-nuova:hover { background: var(--gold); color: #fff; }
.dropdown-menu .dropdown-parent { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.dropdown-menu .dropdown-parent > a { flex: 1; }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-app { font-family: var(--font-ui); font-weight: 500; font-size: .92rem; color: var(--ink-soft); padding: .5em .6em; border-radius: 999px; }
.nav-app:hover { color: var(--viola); background: var(--lilla-tenue); }
.nav-cta .btn { padding: .7em 1.35em; font-size: .95rem; }

/* Hamburger */
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; position: relative; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; display: block; width: 22px; height: 2.5px; border-radius: 3px; background: var(--viola-scuro); position: absolute; left: 11px; transition: transform .2s ease, top .2s ease, opacity .2s ease; }
.nav-toggle-bars { top: 21px; }
.nav-toggle-bars::before { top: -7px; left: 0; }
.nav-toggle-bars::after { top: 7px; left: 0; }
.site-header.open .nav-toggle-bars { background: transparent; }
.site-header.open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-header.open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- Barra azione fissa (solo mobile) — frizione zero ---------- */
.mobile-cta { display: none; }

/* ---------- Hero HOME ---------- */
.hero { position: relative; overflow: hidden; }
.hero--big { min-height: min(94vh, 840px); display: flex; align-items: flex-end; color: #fff; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero--big::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(20,3,30,.55), transparent 20%),
    radial-gradient(ellipse 72% 55% at 22% 120%, rgba(130,111,197,.50), transparent 60%),
    linear-gradient(to top, rgba(46,6,68,.82) 0%, rgba(46,6,68,.35) 45%, rgba(46,6,68,.12) 100%); }
.hero--big .container { position: relative; z-index: 2; padding-bottom: clamp(22px, 3vw, 42px); padding-top: 140px; }
.hero--big h1 { color: #fff; max-width: none; }
.hero--big p.hero-sub { max-width: 52ch; font-size: 1.12rem; color: rgba(255,255,255,.92); }
/* Home hero: titolo su due righe (a sinistra), font un filo più contenuto perché stia in due righe */
@media (min-width: 760px) {
  .hero--big h1 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); }
}
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: .92rem; color: rgba(255,255,255,.85); flex-wrap: wrap; }
.hero-proof .stars { color: var(--ambra); letter-spacing: .1em; }
/* Hero in stile "concept": occhiello oro con filetto, sottotitolo arioso, invito allo scroll */
.hero-inner { max-width: 660px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .9em; font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: #e7c877; margin: 0 0 1.1rem; }
.hero-eyebrow::before { content: ""; width: 34px; height: 1px; background: #e7c877; opacity: .75; }
/* Lo stesso occhiello per le sezioni su fondo chiaro: oro antico e filetto,
   come negli occhielli dei varchi e delle tessere dei corsi. */
.eyebrow { display: inline-flex; align-items: center; gap: .8em; margin: 0 0 .9rem;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .75; }
.hero--big .hero-sub { margin-bottom: 1.7rem; }
.scroll-cue { margin: 2.4rem 0 0; font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(244,238,228,.7); }

/* Header sovrapposto all'hero (solo home). Due cose:
   1. È `fixed`, non `absolute`: con `absolute` scorreva via insieme al contenuto.
   2. Scorrendo si porta dietro una STRISCIA DEL BOSCO — lo stesso ritaglio di foto
      che gli sta sotto quando si è in cima alla pagina. Misurato: l'header copre
      il 5–12% superiore dell'immagine, e `100vw auto` la dipinge alla stessa scala
      della hero, quindi la striscia combacia invece di essere un ritaglio a caso.
      Il velo scuro ricalca il gradiente della hero (là in cima vale ~.55 e sfuma),
      così il menu chiaro resta leggibile: per questo il testo NON diventa scuro. */
.site-header--over { position: fixed; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: none;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.site-header--over.is-stuck {
  background-image:
    linear-gradient(to bottom, rgba(20,3,30,.60), rgba(20,3,30,.44)),
    url("../immagini/foto/vinyasa-hero.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, 100vw auto;
  background-position: center, center top;
  border-bottom: 1px solid rgba(231,200,119,.28);
  box-shadow: 0 16px 36px -26px rgba(20,3,30,.85);
}
.site-header--over .nav-toggle-bars,
.site-header--over .nav-toggle-bars::before,
.site-header--over .nav-toggle-bars::after { background: #fff; }
.site-header.site-header--over.open .nav-toggle-bars { background: transparent; }
@media (min-width: 1025px) {
  .site-header--over .nav-links > li > a,
  .site-header--over .nav-links > li > .dropdown-parent > a,
  .site-header--over .nav-links .nav-dropdown-toggle,
  .site-header--over .nav-app { color: rgba(255,255,255,.92); }
  .site-header--over .nav-links > li > a:hover,
  .site-header--over .nav-links > li > .dropdown-parent > a:hover,
  .site-header--over .nav-dropdown-toggle:hover,
  .site-header--over .nav-app:hover { background: rgba(255,255,255,.15); color: #fff; }
  /* CTA in navbar come pillola chiara a filo (come nel concept) */
  .site-header--over .nav-cta .btn-cta { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
  .site-header--over .nav-cta .btn-cta:hover { background: rgba(255,255,255,.16); }
}

/* ---------- Hero di pagina (compatto) ---------- */
.page-hero { position: relative; color: #fff; display: flex; align-items: flex-end; min-height: clamp(400px, 56vh, 560px); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 128%, rgba(130,111,197,.48), transparent 60%),
    linear-gradient(to top, rgba(46,6,68,.8), rgba(46,6,68,.22)); }
.page-hero .container { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 34px; }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
.page-hero p { max-width: 58ch; color: rgba(255,255,255,.92); margin-bottom: .4rem; }
.page-hero--plain { background: var(--viola-scuro); min-height: 0; }
.page-hero--plain::after { display: none; }

/* ---------- Foto ad arco (forma firma) ---------- */
.arch-img { border-radius: var(--arch-top-tall); overflow: hidden; box-shadow: var(--shadow); }
.arch-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 3.8; }

/* ---------- Griglia discipline ---------- */
.disc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; max-width: 680px; margin-left: auto; margin-right: auto; }
/* Variante a 4 corsi (home): una riga piena, senza il vincolo dei 680px. */
.disc-grid--4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
.disc { text-align: center; }
.disc__img { display: block; border-radius: var(--arch-top-tall); overflow: hidden; box-shadow: 0 30px 56px -30px rgba(46,6,68,.4); margin-bottom: 18px; position: relative; }
.disc__img img { aspect-ratio: 3 / 3.6; width: 100%; object-fit: cover; transition: transform .45s ease; }
.disc:hover .disc__img img { transform: scale(1.05); }
.disc h3 { margin-bottom: .25em; }
.disc p { font-size: .96rem; color: var(--ink-soft); margin-bottom: .5rem; }

/* ---------- Insegnanti ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 44px; }
/* Variante a 3 insegnanti (pagina Vinyasa): riga piena, senza colonna vuota. */
.team-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
/* Variante a 2 insegnanti (pagina Pilates) */
.team-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; }
/* Variante a 1 insegnante (Gravidanza, Mamma e Bimbo) */
.team-grid--1 { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
.teacher { text-align: center; }
.teacher__photo { display: block; width: min(200px, 70%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; box-shadow: 0 0 0 1px rgba(122,91,23,.5), var(--shadow-sm); border: 5px solid #fff; background: var(--lilla-tenue); }
.teacher__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Quando il tondino è un link (pagina Vinyasa → Le insegnanti) */
a.teacher__photo { transition: transform .2s ease, box-shadow .2s ease; }
a.teacher__photo:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.teacher h3 { margin-bottom: .1em; font-size: 1.15rem; }
.teacher h3 a { color: inherit; }
.teacher h3 a:hover { color: var(--viola); }
.teacher .role { font-size: .88rem; color: var(--viola); font-family: var(--font-body); font-weight: 500; margin-bottom: .4rem; }
.teacher p { font-size: .93rem; color: var(--ink-soft); }

/* ---------- Schede a tre (passi, ma anche caratteristiche con icona) ----------
   Pattern condiviso da dieci pagine: sulla home il blocco #prova ha una veste
   propria (più sotto, "I TRE PASSI DELLA PROVA"), qui resta la scheda bianca. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; counter-reset: step; }
.step { background: #fff; border-radius: var(--radius-lg); padding: 30px 26px; position: relative; }
/* Il tondino è pieno di lilla come le caselle degli elenchi della home:
   stesso fondo, niente filetto, così i segni della pagina si somigliano. */
.step .n { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(209, 180, 237, .30); border: none; color: var(--viola); font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }
.step h3 { font-size: 1.12rem; }
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
/* DUE SOLE SCHEDE IN UNA FILA PENSATA PER TRE.
   .steps e' una griglia a tre colonne: con due schede la terza colonna resta
   vuota e la coppia si appoggia a sinistra, con un buco a destra. Chiesto da
   Paola per le due formule di /meditazione/, e vale anche per i due
   appuntamenti della stessa pagina.
   Le colonne restano larghe quanto sarebbero in una fila da tre - 348px nel
   contenitore da 1096 - cosi' le schede non si gonfiano: cambia solo dove
   stanno. Il `minmax(0, ...)` evita che un testo lungo le allarghi oltre.
   PERIMETRO: oggi le uniche file da due sul sito sono quelle due, tutti gli
   altri blocchi `passi` e `formule` ne hanno tre o quattro (controllato pagina
   per pagina).
   IL `min-width: 561px` NON E' ORNAMENTALE. Questo selettore e' piu' specifico
   di `.steps` (il `:has()` porta la specificita' del suo argomento), quindi
   senza la media query vincerebbe anche sulle regole responsive in fondo al
   foglio: a 400px le schede restavano DUE, larghe 165px, invece di incolonnarsi
   una sotto l'altra. Misurato. Da 561px in su comanda questa regola - e sotto
   i 900 le colonne si stringono da sole, perche' 348px e' un massimo, non una
   larghezza fissa; sotto i 561 torna a comandare `grid-template-columns: 1fr`.
   Il `:has()` non e' una novita' qui: lo usano gia' .radio-pill e .ck-radio. */
@media (min-width: 561px) {
  .steps:has(> .step:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 348px));
    justify-content: center;
  }
}

/* ---------- Recensioni ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.review { background: #fff; border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: 0 20px 40px -18px rgba(136,155,226,.4); display: flex; flex-direction: column; }
.review .stars { color: var(--ambra); letter-spacing: .12em; margin-bottom: 10px; font-size: .95rem; }
.review p { font-size: .97rem; flex: 1; }
.review cite { font-style: normal; font-family: var(--font-body); font-weight: 600; color: var(--viola); font-size: .92rem; }
.review .src { font-size: .8rem; color: var(--ink-soft); }

/* ---------- Fascia full-bleed con citazione ---------- */

/* ---------- Split (testo + foto) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.split > img, .split .arch-img { border-radius: var(--arch-top-tall); box-shadow: var(--shadow); object-fit: cover; width: 100%; aspect-ratio: 4/4.6; }
.split.reverse > *:first-child { order: 2; }
.split.reverse > *:last-child { order: 1; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); margin-top: 40px; }

/* ---------- Lista esperienze ---------- */
/* L'impaginazione degli elenchi della home (corsi ed eventi) è una sola e sta
   più in basso, nel blocco "ELENCHI DELLA HOME": qui restano solo le eccezioni. */

/* ---------- Info / contatti ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.info { background: #fff; border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); text-align: center; }
.info .ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 12px;
  border: 1.5px solid var(--viola); border-radius: 50%; color: var(--viola); }
.info h3 { font-size: 1.08rem; }
.info p { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.info a { color: var(--viola); font-weight: 600; }

/* ---------- FAQ (accordion nativo, senza JS) ---------- */
.faq { max-width: 760px; margin: 40px auto 0; }
.faq details { background: #fff; border-radius: 18px; box-shadow: var(--shadow-sm); margin-bottom: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-family: var(--font-title); font-weight: 600; color: var(--viola-scuro); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--viola); font-weight: 500; transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq-a { padding: 0 22px 20px; color: var(--ink-soft); font-size: .97rem; }
.faq .faq-a p { margin-bottom: .5rem; }

/* ---------- CTA band (chiusura di ogni pagina) ---------- */
.cta-band { color: #fff; text-align: center; background:
  radial-gradient(ellipse 95% 120% at 50% -25%, rgba(130,111,197,.35), transparent 64%),
  var(--viola-scuro); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--lilla-tenue); max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-band .actions { justify-content: center; margin-top: 26px; }
.cta-band .note { font-size: .88rem; color: var(--lilla); margin-top: 16px; }

/* ---------- Banda Emporio (brand madre) ---------- */
.parent { background: var(--viola-scuro); color: var(--lilla-tenue); }
.parent h2 { color: #fff; }
.parent img { border-radius: var(--arch); box-shadow: var(--shadow); }

/* ---------- Timetable (orari) ----------
   Il codice colore sta nelle variabili --lez-* in cima al file: qui si applica
   soltanto. Il nome della classe e' il "tipo" scelto in Tina, non il nome per
   esteso: slot--yoga e' il Vinyasa, slot--mamma il Mamma e Bimbo. */
.slot--yoga { background: var(--lez-vinyasa-tenue); color: var(--lez-vinyasa-testo); }
.slot--pilates { background: var(--lez-pilates-tenue); color: var(--lez-pilates-testo); }
.slot--gravidanza { background: var(--lez-gravidanza-tenue); color: var(--lez-gravidanza-testo); }
.slot--mamma { background: var(--lez-mamma-tenue); color: var(--lez-mamma-testo); }
.slot--meditazione { background: var(--lez-meditazione-tenue); color: var(--lez-meditazione-testo); }
.tt-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; list-style: none; margin: 30px 0 0; padding: 0; font-size: .9rem; font-family: var(--font-body); font-weight: 500; }
.tt-legend .dot { display: inline-block; width: .85em; height: .85em; border-radius: 4px; margin-right: .45em; vertical-align: -1px; }

/* ---------- Palinsesto giornaliero (a tab, un giorno alla volta) ---------- */
.day-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.day-tab { font-family: var(--font-ui); font-weight: 600; font-size: .92rem; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--lilla); background: #fff; color: var(--viola-scuro); cursor: pointer; transition: background .18s, color .18s; }
.day-tab:hover { background: var(--lilla-tenue); }
.day-tab.is-active { background: var(--viola); border-color: var(--viola); color: #fff; }

.day-panels { max-width: 640px; margin: 28px auto 0; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.day-panel { display: none; }
.day-panel.is-active { display: block; }
.class-row { display: flex; align-items: center; gap: 20px; padding: 18px 28px; border-bottom: 1px solid var(--lilla-tenue); }
.class-row:last-child { border-bottom: none; }
.class-time { font-family: var(--font-body); font-weight: 700; color: var(--viola-scuro); min-width: 60px; font-size: 1.05rem; }
.class-name { display: inline-block; padding: 7px 16px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: .92rem; }

/* Interruttore fra le due viste del palinsesto (settimana / giorno) */
.view-switch { display: flex; width: fit-content; margin: 34px auto 0; padding: 5px; gap: 4px; background: var(--lilla-tenue); border-radius: 999px; }
.view-btn { font-family: var(--font-ui); font-weight: 600; font-size: .92rem; padding: 10px 22px; border-radius: 999px; border: none; background: transparent; color: var(--viola-scuro); cursor: pointer; transition: background .18s, color .18s; }
.view-btn:hover { color: var(--viola); }
.view-btn.is-active { background: var(--viola); color: #fff; box-shadow: var(--shadow-sm); }
.view-panel { display: none; }
.view-panel.is-active { display: block; }

/* Vista settimana: una colonna per giorno, con le classi impilate */
.week-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 34px; }
.week-col { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.week-col__head { background: var(--viola-scuro); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .92rem; text-align: center; padding: 12px 8px; }
.week-slot { font-size: .82rem; line-height: 1.3; padding: 10px 12px; border-bottom: 3px solid #fff; }
.week-slot:last-child { border-bottom: none; }
.week-slot b { display: block; font-family: var(--font-body); font-size: .95rem; }
.week-slot small { display: block; margin-top: 2px; font-size: .78rem; opacity: .75; }
/* ---------- Panoramica settimana a fasce orarie allineate ----------
   Sostituisce .week-grid nella pagina Orari: una riga per fascia oraria, una
   colonna per giorno, cosi' la settimana si legge anche in orizzontale. Le
   fasce le costruisce fasceDi() in Blocchi.tsx dagli orari che esistono
   davvero, non dalle ore dell'orologio: con le ore piene servirebbero venti
   righe quasi vuote e lo spazio verticale raddoppierebbe.
   ATTENZIONE alle regole qui sopra, prima di cancellarle. Oggi nessuna pagina
   del sito le usa (controllato in sito/content/), ma .week-grid e .week-slot
   vestono il blocco "palinsesto" semplice, che resta nell'elenco dei blocchi
   dell'editor: se Paola lo aggiunge e il CSS non c'e' piu', esce senza stile.
   .week-col e .week-col__head invece non hanno piu' nessuno, ne' qui ne' nel
   codice: si tolgono, ma dopo aver ricontrollato, non a occhio. */
.week-fasce-scroll { margin-top: 34px; }
.week-fasce { display: grid; gap: 4px; align-items: stretch; }
.week-fasce__testa { background: var(--viola-scuro); color: #fff; font-family: var(--font-body); font-weight: 600;
  font-size: .88rem; text-align: center; padding: 9px 6px; border-radius: 8px; }
.week-fasce__cella { display: grid; gap: 3px; align-content: start; }
.week-chip { display: block; font-size: .78rem; line-height: 1.25; padding: 7px 9px; border-radius: 8px; }
.week-chip b { font-family: var(--font-body); font-weight: 700; }
.week-chip small { display: block; margin-top: 1px; font-size: .74rem; opacity: .75; }
/* Su schermo stretto si scorre in orizzontale: impilare i giorni butterebbe via
   proprio l'allineamento per cui esiste questa griglia. */
@media (max-width: 760px) {
  .week-fasce-scroll { overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  .week-fasce { min-width: 620px; }
}

/* Nota sui periodi e intestazione di ciascun palinsesto */
.tt-note { max-width: 620px; margin: 26px auto 0; font-size: .95rem; color: var(--ink-soft); }
.tt-period { text-align: center; font-size: 1.15rem; margin: 30px 0 4px; }
.tt-period span { font-weight: 400; color: var(--ink-soft); font-size: .9rem; }
/* Su schermi stretti la griglia scorre in orizzontale, colonne a larghezza fissa */
@media (max-width: 760px) {
  .week-grid { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .week-col { flex: 0 0 190px; scroll-snap-align: start; }
}

/* ---------- Shop / catalogo abbonamenti (classi usate da js/shop.js) ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.chip { font-family: var(--font-ui); font-weight: 600; font-size: .95rem; padding: .55em 1.3em; border-radius: 999px;
  border: 2px solid var(--lilla); background: #fff; color: var(--viola); cursor: pointer; transition: all .15s ease; }
.chip:hover { border-color: var(--viola); }
.chip.is-active { background: var(--viola); border-color: var(--viola); color: #fff; }
.shop-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
/* Il chip "Open" è distinto (ambra): è l'opzione "tutto incluso" */
.chip--open { border-color: var(--ambra); color: #8a5f0a; }
.chip--open:hover { border-color: var(--ambra); }
.chip--open.is-active { background: var(--ambra); border-color: var(--ambra); color: #4a3208; }
/* La meditazione ha la sua tinta: l’azzurrino del palinsesto (--lez-meditazione),
   lo stesso con cui gli orari segnano le pratiche di Camilla. Il chip acceso usa
   il tono scuro della coppia e non il chiaro: bianco su #889be2 sta a 2,7:1 e non
   arriva al 4,5:1 che serve, su #2a46ac sta a 8,2:1. */
.chip--meditazione { border-color: var(--lez-meditazione); color: var(--lez-meditazione-testo); }
.chip--meditazione:hover { border-color: var(--lez-meditazione-testo); }
.chip--meditazione.is-active { background: var(--lez-meditazione-testo); border-color: var(--lez-meditazione-testo); color: #fff; }
/* Il gruppo tinto: titolo nel tono scuro e schede sull’azzurrino annacquato,
   come i riquadri della meditazione nel palinsesto. */
.pkg-group--meditazione .pkg-group__title { color: var(--lez-meditazione-testo); }
.pkg-group--meditazione .pkg { background: var(--lez-meditazione-tenue); }

/* ---- Catalogo abbonamenti: tutti i pacchetti di una disciplina, affiancati ---- */
.pkg-group__title { text-align: center; font-size: 1.5rem; margin: 40px 0 4px; }
.pkg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; max-width: 940px; margin: 26px auto 0; }
/* Con un solo pacchetto (Open) la card non si allarga a tutta riga */
.pkg-cards--single { grid-template-columns: minmax(240px, 340px); justify-content: center; }
.pkg { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 26px 24px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; text-align: center; border: 2px solid transparent; }
.pkg h4 { font-size: 1.12rem; margin-bottom: 8px; }
.pkg-price { font-family: var(--font-title); font-weight: 700; color: var(--viola-scuro); font-size: 2.1rem; line-height: 1; }
.pkg-per { font-size: .82rem; color: var(--viola); font-weight: 600; margin-top: 6px; }
.pkg-note { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }
.pkg .btn { margin-top: 18px; }
.pkg--best { border-color: var(--ambra); box-shadow: 0 14px 30px -16px rgba(214,158,46,.6); }
.pkg-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ambra); color: #4a3208; font-family: var(--font-body); font-weight: 700; font-size: .74rem; padding: .3em 1em; border-radius: 999px; box-shadow: var(--shadow-sm); }
/* Fascia Open: l'alternativa "tutto incluso", sotto le discipline */
.open-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  max-width: 940px; margin: 46px auto 0; background: var(--ambra-tenue); border: 2px solid var(--ambra);
  border-radius: var(--radius-lg); padding: 30px 34px; }
.open-band .tag { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: .78rem;
  color: #8a5f0a; background: #fff; border-radius: 999px; padding: .25em .9em; margin-bottom: 12px; }
.open-band__text { flex: 1 1 320px; }
.open-band__text h3 { font-size: 1.45rem; margin-bottom: 6px; }
.open-band__text p { color: var(--ink-soft); margin: 0; max-width: 54ch; }
.open-band__buy { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.open-band__buy .pkg-price { color: #8a5f0a; }

/* ---------- Checkout / form ---------- */
.form-card { background: #fff; border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
label { font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--viola-scuro); display: block; margin-bottom: .35em; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; padding: .75em 1em; border-radius: 12px;
  border: 2px solid var(--lilla-tenue); background: var(--panna); color: var(--melanzana); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--lilla); background: #fff; }
.radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-pill { display: flex; align-items: flex-start; gap: 10px; border: 2px solid var(--lilla-tenue); border-radius: 16px; padding: 14px 16px; cursor: pointer; flex: 1; min-width: 220px; background: var(--panna); }
.radio-pill:has(input:checked) { border-color: var(--viola); background: var(--lilla-tenue); }
.radio-pill input { margin-top: .3em; accent-color: var(--viola); }
.radio-pill .rp-txt { font-size: .93rem; color: var(--ink-soft); }
.radio-pill .rp-txt strong { display: block; font-family: var(--font-body); color: var(--viola-scuro); }
.ck-line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--lilla-tenue); font-size: .97rem; }
.ck-line strong { font-family: var(--font-body); color: var(--viola-scuro); }
.ck-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 26px; align-items: start; margin-top: 30px; }
.ck-card { background: #fff; border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 36px); box-shadow: var(--shadow-sm); display: grid; gap: 14px; }
.ck-card h2 { font-size: 1.3rem; margin: 0; }
.ck-pay { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.ck-pay legend { font-family: var(--font-body); font-weight: 600; color: var(--viola-scuro); margin-bottom: .4em; }
.ck-radio { display: block; border: 2px solid var(--lilla-tenue); border-radius: 14px; padding: 12px 14px; cursor: pointer; background: var(--panna); font-weight: 400; font-family: var(--font-body); color: var(--melanzana); }
.ck-radio:has(input:checked) { border-color: var(--viola); background: var(--lilla-tenue); }
.ck-radio input { accent-color: var(--viola); margin-right: .5em; }
.ck-radio small { color: var(--ink-soft); }
.ck-pay-note { font-size: .9rem; color: var(--ink-soft); background: var(--ambra-tenue); border-radius: 12px; padding: 12px 14px; }
.breadcrumb { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.breadcrumb a { color: var(--viola); }
@media (max-width: 860px) { .ck-grid { grid-template-columns: 1fr; } }

/* ---------- Tally embed ---------- */
.tally-wrap { background: #fff; border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 34px); box-shadow: var(--shadow-sm); }

/* ---------- Contenuti editoriali ---------- */
.prose { max-width: 720px; }
.prose .media, .media { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 26px 0; width: 100%; }
.checklist { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.checklist li { padding: 8px 0 8px 34px; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 4px; top: 8px; color: var(--lime); font-weight: 800; font-family: var(--font-title); }
.laura-video { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--viola-scuro); aspect-ratio: 9/12; object-fit: cover; }
.quote-band { position: relative; overflow: hidden; text-align: center; background: var(--viola-scuro); color: #fff; }
.quote-band blockquote { font-family: var(--font-title); font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.3; color: #fff; max-width: 24ch; margin: 0 auto .5em; letter-spacing: -.02em; }
.quote-band cite { font-style: normal; color: #e7c877; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; }

/* ---------- Card eventi / appuntamenti ---------- */
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.event { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.event img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.event .ev-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.event .when { font-size: .8rem; color: var(--viola); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-body); font-weight: 600; margin: 0 0 6px; }
.event h3 { font-size: 1.12rem; margin-bottom: .3em; }
.event p { font-size: .93rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.event .ev-body .more { margin-top: auto; }

/* ---------- Attrezzi Pilates (figure) ---------- */
.equip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 40px; }
.equip figure { margin: 0; text-align: center; }
.equip img { border-radius: var(--radius); box-shadow: var(--shadow-sm); aspect-ratio: 1; object-fit: cover; width: 100%; }
.equip figcaption { font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--viola-scuro); margin-top: 10px; }

/* ---------- Form "avvisami" (Netlify) ---------- */
.avvisami-form { max-width: 520px; margin: 36px auto 0; display: grid; gap: 14px; }
.avvisami-form .btn { justify-self: start; }
.ck-privacy { font-size: .82rem; color: var(--ink-soft); margin: 0; }

/* ---------- Blog dal Bosco ---------- */
/* Le "cartoline" della vetrina (blog.html) usano .cards/.card come da BLOG.md */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .thumb { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card .body h3 { font-size: 1.15rem; }
.card .body p { font-size: .94rem; color: var(--ink-soft); flex: 1; }
.card .body .tag { display: inline-block; align-self: flex-start; font-size: .78rem; font-family: var(--font-body); font-weight: 600; color: var(--viola); background: var(--lilla-tenue); border-radius: 999px; padding: .25em .9em; margin-bottom: 10px; }
.post-date { font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-body); font-weight: 500; margin-bottom: 8px; }

/* Il racconto (pagine blog-*.html) — classi documentate in BLOG.md */
.post-meta { font-size: .92rem; color: var(--lilla); font-family: var(--font-body); }
.post-meta .sep { opacity: .6; margin: 0 .35em; }
.post-body { max-width: 680px; margin: 0 auto; font-size: 1.08rem; line-height: 1.85; }
.post-body > p:first-of-type::first-letter { font-family: var(--font-title); font-weight: 700; font-size: 3.2em; float: left; line-height: .85; padding-right: .12em; color: var(--viola); }
.post-body h2 { font-size: 1.5rem; margin-top: 1.8em; }
.post-quote { font-family: var(--font-title); font-weight: 500; font-size: 1.3rem; color: var(--viola); border-left: 4px solid var(--lilla); padding-left: 20px; margin: 1.8em 0; line-height: 1.5; }
.post-figure { margin: 2em 0; }
.post-figure figure { margin: 0; }
.post-figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); width: 100%; }
.post-figure figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: 10px; text-align: center; }
.post-end { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--lilla-tenue); }
.post-signature { font-family: var(--font-title); font-weight: 600; color: var(--viola); font-size: 1.1rem; }
.btn-sm { font-size: .9rem; padding: .6em 1.2em; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.post-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-card .pc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card .date { font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-body); font-weight: 500; margin-bottom: 8px; }
.post-card h3 { font-size: 1.15rem; }
.post-card p { font-size: .94rem; color: var(--ink-soft); flex: 1; }

.article { max-width: 720px; margin: 0 auto; }
.article .art-head { text-align: center; padding: clamp(40px, 6vw, 70px) 0 10px; }
.article .art-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin: 26px 0; }
.article .art-body { font-size: 1.06rem; line-height: 1.8; }
.article .art-body h2 { font-size: 1.5rem; margin-top: 1.6em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--viola-scuro); color: var(--lilla-tenue); padding: clamp(48px, 7vw, 80px) 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55em; font-size: .95rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand p { font-size: .95rem; }
.footer-cta { margin-top: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid rgba(209,180,237,.25); margin-top: 44px; padding-top: 22px; font-size: .85rem; color: var(--lilla); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .disc__img img { transition: none; }
}

/* =================================================================
   Rifiniture "erbario luminoso" — arco firma, filetti sottili, timbro del croco
   ================================================================= */

/* Timbro del croco (lo stamp del brand) come ornamento sotto i titoli centrati */
.center > h2 { position: relative; }
.center > h2::after {
  content: ""; display: block; width: 44px; height: 40px; margin: 16px auto 0;
  background: url("../assets/timbro.svg") center / contain no-repeat;
  opacity: .72;
}

/* CTA "prova": un alone dorato discreto, senza riflessi appariscenti */
.btn-cta { box-shadow: 0 14px 30px -14px rgba(242,172,32,.6), var(--glow-oro); }

/* Card con foto in cima: sommità dolcemente ad arco (forma firma), senza bordi */
.card, .post-card, .event {
  border-radius: var(--arch-top);
  box-shadow: 0 44px 74px -48px rgba(46,6,68,.30);
}
/* Card di testo e contenitori: niente bordi né ombre colorate — si fondono nello sfondo */
.pillar, .step, .review, .info, .pkg, .form-card, .ck-card, .tally-wrap, .day-panels {
  box-shadow: 0 44px 74px -48px rgba(46,6,68,.24);
}
/* Il pacchetto in evidenza tiene l'unico accento: un filo d'ambra */
.pkg--best { box-shadow: 0 0 0 1.5px var(--ambra), 0 44px 74px -48px rgba(214,158,46,.36); }

/* Occhielli raffinati: piccole maiuscole in oro antico */
.teacher .role, .event .when, .post-date, .post-card .date, .post-meta {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; font-size: .74rem; color: var(--gold);
}
/* Etichette a pillola alleggerite: filo sottile invece del riempimento pieno */
.pillar-tag, .card .body .tag {
  color: var(--gold); background: transparent; border: 1px solid var(--line); letter-spacing: .14em;
}
/* Timbro del croco (in oro) in apertura delle fasce scure editoriali */
.cta-band::before, .quote-band::before {
  content: ""; display: block; width: 46px; height: 42px; margin: 0 auto 26px;
  background: #e7c877;
  -webkit-mask: url("../assets/timbro.svg") center / contain no-repeat;
  mask: url("../assets/timbro.svg") center / contain no-repeat;
}

/* --- Correzioni di coerenza (dall'audit) --- */
/* Occhiello data/byline sugli hero scuri: oro chiaro leggibile (non oro scuro). */
.page-hero .post-meta { color: #e7c877; }
/* I ruoli insegnante sono stringhe lunghe: tracking più contenuto degli occhielli. */
.teacher .role { letter-spacing: .1em; }
/* La fascia Open è vuota finché non la popola lo shop.js: non mostrare la scatola vuota. */
.open-band:empty { display: none; }
/* Vetrina blog con pochi racconti: card a larghezza naturale e centrate, mai "sole" a 1/3. */
.cards.blog-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); justify-content: center; }

/* =========== I QUATTRO CORSI SETTIMANALI (home) ===========
   Quattro tessere fotografiche in fila: sono il cuore dell'offerta, quindi
   parlano con le immagini. La foto ha la sommità ad arco — la porta, forma
   firma del brand, la stessa dei due varchi in apertura — e il testo sta
   sotto, senza cornici né fondi: la griglia resta invisibile.
   Le foto sono le copertine delle rispettive pagine: chi clicca ritrova la
   stessa immagine ingrandita, e la home non dipende da file esterni. */
.corsi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(30px, 4.2vw, 48px);
}
.corso { color: inherit; display: block; transition: transform .35s ease; }
.corso:hover { transform: translateY(-5px); }
.corso__foto { display: block; overflow: hidden; aspect-ratio: 4 / 3.4;
  border-radius: var(--arch-tile); background: var(--lilla-tenue);
  box-shadow: 0 26px 46px -30px rgba(46, 6, 68, .45); }
.corso__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.corso:hover .corso__foto img { transform: scale(1.06); }
.corso__tag { display: inline-flex; align-items: center; gap: .6em; margin: 16px 0 .25em;
  font-family: var(--font-body); font-weight: 600; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--gold); }
.corso__tag::before { content: ""; width: 18px; height: 1px; background: var(--gold); opacity: .75; }
.corso h3 { font-size: clamp(1.04rem, 1.4vw, 1.22rem); margin: 0; line-height: 1.25; transition: color .3s ease; }
.corso:hover h3 { color: var(--viola); }
.corso p { color: var(--ink-soft); font-size: .88rem; margin: .3em 0 0; }
@media (max-width: 980px) {
  /* Due colonne: le tessere restano grandi abbastanza da leggersi. */
  .corsi { grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 26px); }
}
@media (max-width: 560px) {
  /* Sul telefono resta la griglia 2×2, ma senza la riga di descrizione:
     il titolo basta, e le quattro foto si vedono tutte in una schermata. */
  .corso__foto { aspect-ratio: 1 / 1; }
  .corso__tag { margin-top: 12px; font-size: .6rem; letter-spacing: .16em; }
  .corso__tag::before { width: 12px; }
  .corso h3 { font-size: .98rem; }
  .corso p { display: none; }
}

/* =========== LA SALA NEL VERDE (solo home, #ambiente) ===========
   La sezione dice due cose insieme — il verde attorno e la sala dentro — e ora
   lo mostra: lo scatto orizzontale del bosco prende l'arco largo delle tessere
   dei corsi, quello verticale della sala si appoggia sopra nell'arco organico,
   staccato da un bordo panna. Dietro, un petalo lilla come quelli dei tre passi:
   è la stessa lingua, non un elemento nuovo. */
#ambiente .ambiente-foto { position: relative; margin: 0; padding-bottom: clamp(20px, 3vw, 38px); }
#ambiente .ambiente-foto::before {
  content: ""; position: absolute; z-index: 0; top: clamp(-26px, -2vw, -14px); right: -3%;
  width: 56%; aspect-ratio: 1 / 1; border-radius: var(--blob);
  background: rgba(209, 180, 237, .38);
}
#ambiente .ambiente-foto__verde {
  position: relative; z-index: 1; display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--arch-tile); box-shadow: var(--shadow);
}
#ambiente .ambiente-foto__sala {
  /* sporge nel margine sinistro (dentro il gap della griglia, non sul testo)
     per coprire il meno possibile le insegnanti nello scatto grande */
  position: absolute; z-index: 2; left: -8%; bottom: 0; width: 40%;
  aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%;
  border-radius: var(--arch-top-tall);
  box-shadow: 0 0 0 7px var(--panna), 0 26px 46px -26px rgba(46, 6, 68, .45);
}
@media (max-width: 720px) {
  /* Impilato: la foto della sala rientra nel margine e si fa più piccola. */
  #ambiente .ambiente-foto { padding-bottom: 26px; }
  #ambiente .ambiente-foto__verde { aspect-ratio: 16 / 11; }
  #ambiente .ambiente-foto__sala { left: 2%; width: 34%; box-shadow: 0 0 0 5px var(--panna), var(--shadow-sm); }
  #ambiente .ambiente-foto::before { width: 50%; top: -14px; }
}

/* =========== I TRE PASSI DELLA PROVA (solo home, #prova) ===========
   Tre petali su una ghirlanda, non tre scatole bianche: via il fondo e l'ombra,
   resta un tondo organico col numero e il testo sotto, centrato. I tre petali
   hanno tre forme diverse — le forme organiche del brand — così sembrano colti
   e non stampati; la linea tratteggiata che li unisce racconta il percorso.
   Fuori dalla home .step resta la scheda bianca condivisa dalle altre pagine. */
#prova .steps { position: relative; gap: clamp(22px, 3.2vw, 44px); margin-top: clamp(34px, 4.6vw, 56px); }
#prova .steps::before {
  content: ""; position: absolute; z-index: 0; top: 52px; left: 17%; right: 17%;
  border-top: 1.5px dashed var(--lilla); opacity: .8;
}
#prova .step { position: relative; z-index: 1; background: none; box-shadow: none;
  padding: 0; text-align: center; }
#prova .step .n { width: 104px; height: 104px; border-radius: var(--blob);
  /* petalo pieno (non trasparente: la ghirlanda gli passa dietro) con un velo
     di luce in alto a sinistra, come un fiore appena aperto */
  background: radial-gradient(circle at 34% 28%, #f8f4ff 0%, var(--lilla-tenue) 68%);
  font-weight: 600; font-size: 1.5rem; margin-bottom: 20px;
  transition: transform .5s ease, box-shadow .3s ease; }
#prova .step:nth-child(2) .n { border-radius: var(--arch-top-tall); }
#prova .step:nth-child(3) .n { border-radius: 55% 45% 48% 52% / 45% 55% 45% 55%; }
#prova .step:hover .n { transform: rotate(-4deg) scale(1.04); box-shadow: var(--glow-lilla); }
#prova .step h3 { font-size: 1.14rem; margin-bottom: .35em; }
#prova .step p { margin: 0 auto; max-width: 30ch; }
@media (max-width: 720px) {
  /* Impilati: la ghirlanda non serve più, il petalo passa a sinistra del testo
     e i passi prendono il ritmo delle righe degli eventi. */
  #prova .steps { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 30px); }
  #prova .steps::before { display: none; }
  #prova .step { display: grid; grid-template-columns: auto 1fr; column-gap: 18px;
    grid-template-areas: "petalo titolo" "petalo testo"; align-items: center; text-align: left; }
  #prova .step .n { grid-area: petalo; width: 76px; height: 76px; font-size: 1.3rem; margin-bottom: 0; }
  #prova .step h3 { grid-area: titolo; align-self: end; margin-bottom: .2em; }
  #prova .step p { grid-area: testo; align-self: start; max-width: none; }
}

/* =========== GLI EVENTI (home) ===========
   VIA IL TIMBRO DEL CROCO DA OGNI RIGA. Era pensato come sostituto della foto,
   ma essendo lo stesso disegno cinque volte di fila leggeva come un elenco
   puntato: il fiore non distingueva niente, riempiva e basta, e rubava un
   terzo della riga al testo.
   Al suo posto un riquadro per evento: fondo bianco sulla crema della sezione,
   filo sottile, angoli del raggio di casa. Il contenuto - titolo, freccia,
   descrizione - resta identico ma ha tutta la larghezza, e i riquadri si
   allineano da soli anche quando le descrizioni sono di lunghezza diversa.
   Tre colonne invece di due: gli eventi sono cinque, e a due per riga l'ultimo
   restava solo in fondo. */
.explist {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  max-width: none; margin: clamp(30px, 4.2vw, 48px) 0 0;
}
.exp-row {
  color: inherit; display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* L'effetto al passaggio del mouse SOLO su `a.exp-row`: la voce senza pagina
   esce come <div> (vedi Blocchi.tsx) e non deve sollevarsi come se portasse
   da qualche parte. */
a.exp-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--lilla); }
.exp-row h3 { font-size: clamp(1.04rem, 1.4vw, 1.22rem); margin: 0; line-height: 1.25;
  transition: color .3s ease; }
a.exp-row:hover h3 { color: var(--viola); }
.exp-row p { color: var(--ink-soft); font-size: .9rem; margin: .4em 0 0; max-width: none; }
/* La freccia in fila col titolo è la stessa nelle due sezioni: leggera a
   riposo, si fa avanti in hover. */
.corso__go, .exp-go { display: inline-block; color: var(--viola); opacity: .45;
  transition: transform .3s ease, opacity .3s ease; }
.corso:hover .corso__go, .exp-row:hover .exp-go { opacity: 1; transform: translateX(5px); }
/* Tre colonne stanno solo su schermo largo: a 980 si scende a due (cinque
   eventi = 2+2+1) e sul telefono si impilano. */
@media (max-width: 980px) {
  .explist { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .explist { grid-template-columns: 1fr; gap: clamp(14px, 3vw, 18px); }
  .exp-row p { font-size: .875rem; }
}

/* Blocco "Corsi ed eventi": due colonne editoriali (forma concept) — via card, bordi colorati e badge "+" */
/* "Corsi ed eventi": DUE VARCHI.
   L'arco è la forma-firma del brand: qui è preso alla lettera, due porte
   affiancate. Una è fotografica (la pratica in sala, ogni settimana), l'altra
   grafica — viola profondo e timbro del croco in filigrana (le stagioni).
   Ordine di pittura dentro .pillar: fondo viola → foto (z -2) → velo (z -1) →
   testo. `isolation: isolate` tiene tutto dentro il pannello. */
#struttura .pillars { grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(40px, 6vw, 66px); }
#struttura .pillars::after { display: none; }
#struttura .pillar {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(430px, 46vw, 570px);
  padding: clamp(28px, 3.2vw, 46px);
  border: none; border-top: none;
  background: var(--viola-scuro);
  border-radius: var(--arch-card);
  box-shadow: 0 44px 84px -46px rgba(46,6,68,.58);
  color: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}
#struttura .pillar:hover { transform: translateY(-6px); box-shadow: 0 56px 96px -46px rgba(46,6,68,.66); }

/* Varco 1 — la foto delle insegnanti, con velo viola che sale: il testo si legge */
#struttura .pillar__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
  transition: transform .7s ease;
}
#struttura .pillar:hover .pillar__photo { transform: scale(1.06); }
#struttura .pillar--corsi::after, #struttura .pillar--eventi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Velo viola che sale: soggetto in alto libero, testo in basso leggibile. */
  background: linear-gradient(to top, rgba(46,6,68,.96) 27%, rgba(46,6,68,.72) 52%, rgba(46,6,68,.16) 100%);
}
/* Varco 2 — Michele all'handpan (bagno sonoro). Lo scatto è orizzontale: se
   riempisse il varco lo zoom lo renderebbe un primo piano, fuori scala
   rispetto alle tre insegnanti del varco accanto. Il file è quindi già
   composto in verticale (foto in alto a tutta larghezza, sfumata nel viola
   profondo del fondo): la figura resta alla stessa scala di quella a fianco. */
#struttura .pillar--eventi { background: var(--viola-scuro); }
#struttura .pillar--eventi .pillar__photo { object-position: center top; }

/* Testo dentro i varchi: occhiello oro chiaro, titolo bianco, corpo su crema */
#struttura .pillar__body { position: relative; }
#struttura .pillar-tag { color: #e7c877; background: transparent; border: none; padding: 0; letter-spacing: .22em; margin-bottom: 14px; display: inline-flex; align-items: center; gap: .8em; }
#struttura .pillar-tag::before { content: ""; width: 26px; height: 1px; background: #e7c877; opacity: .8; }
#struttura .pillar h3 { color: #fff; font-size: clamp(1.6rem, 2.7vw, 2.15rem); margin-bottom: .5em; }
#struttura .pillar p { color: rgba(244,238,228,.90); max-width: 46ch; font-size: .97rem; }
#struttura .pillar .more { color: #e7c877; }
#struttura .pillar .more:hover { color: #fff; }
@media (max-width: 720px) {
  /* I due varchi si impilano; l'arco resta, un po' più basso */
  #struttura .pillars { grid-template-columns: 1fr; gap: 20px; }
  #struttura .pillar { min-height: 400px; }
}
/* Sui telefoni molto stretti il ritorno a capo forzato dell'hero si neutralizza. */
@media (max-width: 520px) { .hero--big h1 br { display: none; } }

/* =================================================================
   RESPONSIVE — mobile first nel comportamento:
   sotto i 1024px il menu testuale collassa nell'hamburger,
   sotto i 720px appare la barra CTA fissa in basso.
   ================================================================= */
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column;
    align-items: stretch; gap: 0; padding: 12px 18px 20px; box-shadow: var(--shadow); border-radius: 0 0 22px 22px; }
  .site-header.open .nav-links { display: flex; }
  .nav-links > li { border-bottom: 1px solid var(--lilla-tenue); }
  .nav-links > li:last-child { border-bottom: 0; }
  .nav-links > li > a, .nav-links .nav-dropdown-toggle { display: flex; width: 100%; justify-content: space-between; padding: .9em .4em; border-radius: 0; font-size: 1.05rem; }
  /* Voce con link + freccetta (es. Yoga): link a sinistra, freccetta compatta a destra */
  .nav-links > li > .dropdown-parent { display: flex; width: 100%; align-items: center; }
  .nav-links > li > .dropdown-parent > a { flex: 1; width: auto; }
  .nav-links > li > .dropdown-parent > .nav-dropdown-toggle { width: auto; flex: none; padding: .9em .4em; }
  .dropdown-menu { position: static; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; border-radius: 0; }
  /* L'ingresso all'app NON si nasconde sul telefono.
     Prima spariva sotto i 1024px: chi apriva il sito dal cellulare - cioe' la
     maggioranza - non aveva nessun modo di arrivare alle prenotazioni. Qui
     resta, ma vestito da pillola cosi' si legge come un bottone e non come una
     voce di menu persa accanto all'hamburger. */
  .nav-app {
    display: inline-flex; align-items: center;
    border: 1px solid var(--viola); color: var(--viola);
    padding: .5em 1em; font-size: .85rem; white-space: nowrap;
  }
  .site-header--over .nav-app { border-color: rgba(255,255,255,.6); color: #fff; }
}
/* Sotto i 560px il posto e' poco: resta il bottone dell'app, che porta dove si
   prenota, e cade la scritta lunga della prova (che e' comunque il primo
   bottone della pagina, subito sotto). */
@media (max-width: 560px) {
  .nav-cta .btn-cta { display: none; }
  .nav-app { font-size: .8rem; padding: .45em .85em; }
}

@media (max-width: 900px) {
  .disc-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .disc-grid--4 { max-width: 680px; }
  .reviews, .steps, .info-grid, .shop-grid, .blog-grid, .event-grid, .cards { grid-template-columns: repeat(2, 1fr); }
  .equip { grid-template-columns: repeat(3, 1fr); }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > *:first-child { order: 1; }
  .split.reverse > *:last-child { order: 2; }
  .split > img, .split .arch-img { aspect-ratio: 16/11; border-radius: var(--radius-lg); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { padding-bottom: var(--mobilebar-h); }
  .mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; height: var(--mobilebar-h);
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--lilla-tenue);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 10px; align-items: center; }
  .mobile-cta .btn { flex: 1; padding: .7em .5em; font-size: .93rem; }
  /* Regola rimasta senza bottone: il quadratino WhatsApp della barra e' stato
     tolto il 02/09/2026 (il perche' sta in PiePagina.tsx, sopra .mobile-cta).
     Si tiene perche' non costa niente e se un giorno il bottone tornasse
     ritroverebbe la sua misura. */
  .mobile-cta .btn-wa { flex: 0 0 auto; width: 48px; height: 46px; padding: 0; border-radius: 14px; }
  /* Il tondo verde di WhatsApp si alza sopra questa barra: la regola NON puo'
     stare qui, sta in fondo accanto a .wa-fab. Il perche' e' scritto la'. */
  .nav-cta .btn-cta { padding: .6em 1.05em; font-size: .88rem; }
  .hero--big { min-height: min(78vh, 620px); }
  .two-col { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer { padding-bottom: calc(28px + var(--mobilebar-h)); }
}

@media (max-width: 560px) {
  .disc-grid, .team-grid, .reviews, .steps, .info-grid, .shop-grid, .blog-grid, .event-grid, .cards { grid-template-columns: 1fr; }
  .equip { grid-template-columns: repeat(2, 1fr); }
  .disc__img { border-radius: var(--radius-lg); }
  .disc__img img { aspect-ratio: 16/10; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .actions .btn { flex: 1 1 auto; }
}

/* ---------- Il badge vero di Google nell'hero ----------------------------
   Componente: src/components/BadgeGoogle.tsx.

   LE MISURE SONO MISURATE, non scelte: il badge dentro il widget e' 187x114 e
   si tiene 20px di margine dal bordo in basso a sinistra della propria
   finestra. Da qui 227x154: piu' stretto lo taglia, piu' largo lascia vuoto.
   Se un domani in Elfsight si cambia la forma del widget, questi due numeri
   vanno rimisurati - non indovinati.

   LO SPAZIO E' RISERVATO PRIMA che l'iframe arrivi (min-width/min-height sul
   link): senza, il badge comparirebbe a caricamento avvenuto e farebbe saltare
   il titolo dell'hero, che e' il punto della pagina in cui uno spostamento si
   nota di piu'.

   SFONDO TRASPARENTE: verificato che la pagina dentro l'iframe non dipinge
   nessuno sfondo, quindi sopra la foto dell'hero si vede solo la cartolina
   bianca del badge e non un rettangolo. */
.badge-google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--melanzana);
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 10px 24px -12px rgba(46, 6, 68, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.badge-google:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(46, 6, 68, .55);
}
.badge-google:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.badge-google__g { width: 18px; height: 18px; flex: 0 0 auto; }
.badge-google__voto { font-family: var(--font-title); font-weight: 700; font-size: 1rem; }
.badge-google__quante { color: var(--ink-soft); font-size: .88rem; }

/* Le stelle: una fila grigia sotto e una ambra sopra, tagliata alla larghezza
   che corrisponde al voto. Cosi' un 4,6 mostra davvero quattro stelle e mezza
   invece di arrotondare, e cambiando il numero nel componente non c'e' niente
   da ridisegnare. */
.badge-google__stelle {
  position: relative;
  display: inline-block;
  letter-spacing: .06em;
  font-size: .95rem;
  color: #dcd6e2;
  white-space: nowrap;
}
.badge-google__stelle-piene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--ambra);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .badge-google { transition: none; }
  .badge-google:hover { transform: none; }
}

/* ---------- La prova sociale nell'hero, ora cliccabile -------------------
   Eredita tutto da .hero-proof: colore, dimensione, peso. Qui si toglie solo
   la sottolineatura di sistema e si mette un filetto discreto che compare al
   passaggio, perche' un link che non sembra un link non lo clicca nessuno -
   e questo deve invitare a verificare, non gridare. */
.hero-proof__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, opacity .18s ease;
}
.hero-proof__link:hover,
.hero-proof__link:focus-visible { border-bottom-color: currentColor; }
.hero-proof__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .hero-proof__link { transition: none; } }

/* ---------- Bottone WhatsApp fisso (in basso a destra) -------------------
   Il componente e' src/components/BottoneWhatsapp.tsx.

   IL VERDE E' QUELLO DI WHATSAPP e non quello del brand, di proposito: e' un
   affordance riconosciuto: la gente lo identifica prima di leggere l'etichetta.
   Vestirlo di viola lo renderebbe elegante e invisibile.

   Z-INDEX 55, SOTTO IL BANNER COOKIE (che sta a 60, in basso a tutta larghezza).
   Cosi' finche' il banner e' aperto il bottone gli sta dietro e non c'e' niente
   da coordinare fra i due; quando il banner sparisce, il bottone e' li'.

   Il padding di sicurezza in basso (env(safe-area-inset-bottom)) serve agli
   iPhone con la barra gestuale: senza, il tondo finisce mezzo sotto la barra. */
.wa-fab {
  position: fixed;
  right: clamp(14px, 3vw, 24px);
  bottom: calc(clamp(14px, 3vw, 24px) + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-title, inherit);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 14px 28px -10px rgba(37, 211, 102, .6), 0 4px 10px rgba(46, 6, 68, .18);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  background: #1fb855;
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -10px rgba(37, 211, 102, .7), 0 6px 14px rgba(46, 6, 68, .22);
}
/* Il contorno di messa a fuoco da tastiera: bianco dentro, scuro fuori, cosi'
   si vede sia sul verde sia su qualunque sfondo ci passi dietro. */
.wa-fab:focus-visible {
  outline: 3px solid var(--viola-scuro, #2e0644);
  outline-offset: 3px;
}
.wa-fab__icona { width: 28px; height: 28px; flex: 0 0 auto; }
.wa-fab__testo { white-space: nowrap; }

/* Su schermi stretti resta il solo tondo: l'etichetta ruberebbe larghezza al
   contenuto proprio dove ce n'e' meno. */
@media (max-width: 620px) {
  .wa-fab { width: 56px; padding: 0; justify-content: center; gap: 0; }
  .wa-fab__testo { display: none; }
}

/* IL TONDO SI ALZA SOPRA LA BARRA FISSA DEL TELEFONO.
   Sotto i 720px compare .mobile-cta, la barra col tasto "Prenota la lezione di
   prova": e' alta --mobilebar-h e parte da bottom 0. Il tondo invece sta a 14px
   dal fondo ed e' alto 56px, cioe' occupa i primi 70px, dallo stesso lato
   destro. Risultato, fino al 02/09/2026: il tondo si sedeva SOPRA la barra, le
   copriva il bottone WhatsApp (che infatti e' stato tolto, vedi PiePagina.tsx)
   e mangiava un pezzo del tasto ambra. Guardato a 390px.

   QUESTO BLOCCO VA TENUTO QUI, DOPO .wa-fab, E NON SU CON .mobile-cta.
   Le due regole hanno la stessa specificita' (una classe), quindi decide
   l'ordine: se questa stesse nella media query di .mobile-cta - che nel file
   viene PRIMA - il bottom del .wa-fab normale la sovrascriverebbe e il tondo
   resterebbe giu', esattamente come prima. Sembra una sistemazione che non
   funziona, ed e' solo messa nel punto sbagliato.

   PERCHE' SI SOMMA LA VARIABILE E NON UN NUMERO: se un giorno la barra cambia
   altezza si cambia --mobilebar-h e il tondo segue da solo.
   PERCHE' QUI NON C'E' env(safe-area-inset-bottom), che invece sta nel .wa-fab
   normale: la barra e' ancorata a bottom 0 e copre lei la zona della barra
   gestuale dell'iPhone, quindi scavalcare la barra basta. Sommarlo di nuovo
   alzerebbe il tondo di altri 34px per niente. */
@media (max-width: 720px) {
  .wa-fab { bottom: calc(var(--mobilebar-h) + 12px); }
}

/* Chi ha chiesto meno animazioni non deve vedere il bottone saltellare. */
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover, .wa-fab:focus-visible { transform: none; }
}

/* In stampa non serve a niente. */
@media print {
  .wa-fab { display: none; }
}