/* Astrea — Landing logopedia pediatrica
   Direzione creativa: "Carta e Soffio" (2026-08-23k). Due materie, non decorazioni: la carta
   (piegata, tagliata, con grana) per le superfici "umane"; il soffio/respiro (la girandola si fa
   girare soffiando, come nella logopedia si lavora sul respiro prima ancora che sul suono) come
   unico motivo di movimento della pagina. Storia dei font precedenti (Roboto/Playfair Display) e
   della palette in docs/design/design-system.md — qui aggiornati per uscire dal cliché "corsivo
   editoriale su un sans da app Android", non per cambiare i colori di brand già validati.

   IMPORTANTE (2026-09-09): questo è il file SORGENTE, quello da modificare a mano — i commenti
   sono il changelog del progetto. Le pagine (index.html, landing-team.html) caricano invece
   css/styles.min.css (versione minificata con clean-css, livello 1: solo spazi/commenti rimossi,
   nessuna riscrittura dei selettori, per non rischiare regressioni su un sito live). Dopo QUALSIASI
   modifica a questo file, rigenerare styles.min.css prima di zippare/pubblicare, altrimenti il
   sito live serve una versione vecchia. Comando: dentro public/, con clean-css installato via npm
   in una cartella scratch, `node -e "require('clean-css')...` (vedi sessione 2026-09-09) oppure
   qualunque minifier CSS equivalente con impostazioni "safe" (no restructuring/merging). */

:root {
  --blue-900: #0553B7;
  --blue-700: #1D66C2;
  --blue-500: #2B74D2;
  --blue-400: #4188E9;
  --blue-300: #70A8F4; /* SOLO decorativo (breath-lines): 2,44:1, non conforme come testo — vedi
    docs/design/design-system.md riga 23. Per testo chiaro su sfondo scuro usare --blue-200. */
  --blue-200: #AED0F9; /* 2026-08-24, terzo giro di correzione contrasto: sostituisce blue-300
    come colore-testo (eyebrow) su sfondo scuro. 4,5:1 anche nel punto più blu del gradiente
    hero (blue-900), 10,2:1 su navy — la vecchia scelta scendeva a 2,94:1 nella stessa zona. */

  --terracotta: #B85C2E;
  --terracotta-light: #D9713C;
  --terracotta-dark: #96491F;

  --navy: #12203A;
  --navy-700: #1B2E52;
  --bg: #FFFFFF; /* 2026-08-25: test bianco puro al posto del bianco caldo #FDFBF8 (Carta e
    Soffio v4) su richiesta dell'utente, che percepiva quest'ultimo come grigio — probabilmente
    per la grana di carta (--paper-grain, stipple navy) sovrapposta, non per il colore base in
    sé. Backup pre-modifica in docs/_backup/2026-08-25/ (index_v13.html, styles_v8.css). */
  --bg-tint: #EAF1FB;
  --bg-tint-warm: #FBEEE6;
  --border: #E9E0D6; /* 2026-08-23k: saturazione alzata (14%→30% circa), stessa luminosità —
    prima era troppo neutro, si leggeva come grigio anche se tecnicamente "caldo" */

  /* Neutri caldi (2026-08-24, seconda correzione: il "tortora" del 2026-08-23k aveva la luminosità
     giusta ma saturazione troppo bassa (8-12%) — a occhio si leggeva ancora come grigio, non come
     un colore della palette. Stessa H° e stessa luminosità di prima (contrasti WCAG identici o
     leggermente migliori), saturazione alzata (~30-40%) sulla stessa famiglia di hue del
     terracotta: ora è un marrone caldo (cioccolato) riconoscibile come "colore", non più un grigio
     travestito. Nome variabile invariato per non toccare i 24 punti che lo usano. */
  --taupe-700: #66412C; /* testo secondario (corpo) — 7,8-8,9:1 su tutti gli sfondi chiari */
  --taupe-600: #7A5139; /* testo terziario/minimo (etichette, meta, caption) — 6,0-6,6:1 */
  /* 2026-08-24, terzo giro di correzione contrasto: taupe-500 (4,2-5,4:1) e taupe-400
     (4,2-4,8:1) sono state ritirate come colori-testo — ai margini minimi WCAG si leggevano
     ancora "sbiadite", specialmente nei testi piccoli (etichette 12-13px, micro-copy legale).
     Ogni punto che le usava è stato spostato su taupe-600, che diventa così il pavimento unico
     della gerarchia (mai testo più chiaro di questo). Due soli livelli invece di quattro:
     gerarchia più semplice e sempre leggibile, non solo teoricamente conforme. */

  --radius: 24px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --max-width: 1080px;
  --max-width-wide: 1180px;
  --max-width-narrow: 720px;
  --shadow: 0 12px 32px -16px rgba(18, 32, 58, 0.18);
  --shadow-sm: 0 6px 16px -8px rgba(18, 32, 58, 0.14);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;

  --font-accent: "Fraunces", "Times New Roman", serif;

  /* Taglio d'angolo: firma di forma "carta piegata", alternativa al rettangolo tutto arrotondato.
     Usato solo sulle superfici "dato/editoriale" (Foglio), mai su quelle cliccabili (Rilievo),
     così la forma stessa comunica se un elemento è informativo o azionabile. */
  --cut: 22px;

  /* Grana di carta: rumore SVG inline a bassissima opacità, zero richieste di rete, applicato
     come background-image ripetuto sopra il colore di sfondo. */
  --paper-grain: 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%3CfeColorMatrix type='matrix' values='0 0 0 0 0.07  0 0 0 0 0.13  0 0 0 0 0.23  0 0 0 0 0.5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 2026-08-25: stessa grana ma con alpha molto più bassa (0.5→0.06), usata solo sullo sfondo
     pagina (body) ora che è bianco puro. La versione a piena intensità sopra restava visibile a
     occhio come una peluria grigio-blu diffusa su tutta la pagina — probabile causa reale del
     "grigio" segnalato, più del colore di base (#FDFBF8 era già quasi bianco). Su hero e
     reels-band (sfondo scuro) la grana piena resta invariata: lì si legge come texture, non come
     velo grigio. */
  --paper-grain-subtle: 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%3CfeColorMatrix type='matrix' values='0 0 0 0 0.07  0 0 0 0 0.13  0 0 0 0 0.23  0 0 0 0 0.06'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--navy);
  background:
    var(--paper-grain-subtle),
    var(--bg);
  background-size: 180px 180px, auto;
  font-size: 16px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

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

h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--space-2); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 34px; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 var(--space-2); }

.when-subtitle { margin-top: var(--space-4); }
.why-lede { font-size: 18px; max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ---------- "Cosa non è, cosa è": famiglia Foglio, piatta, angolo tagliato invece di card con
   ombra e hover-lift automatico (2026-08-23k: qui il contenuto è informativo, non cliccabile,
   quindi non deve promettere un'interazione che non c'è). La barra colore in alto resta come
   unico accento, senza ombra sotto. ---------- */
.reframe-list li {
  position: relative;
  overflow: hidden;
}
.reframe-list li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue-900);
}
.reframe-list li:nth-child(2)::before { background: var(--terracotta); }
.reframe-list li:nth-child(3)::before { background: var(--navy); }
.reframe-list .icon-badge { width: 52px; height: 52px; }
.reframe-list .icon-badge svg { width: 26px; height: 26px; }

/* ---------- "Come funziona": elenco numerato senza card (2026-08-23j, 7ª iterazione).
   Ispirato a un riferimento visivo condiviso dall'utente: titolo e testo accanto al numero,
   tutti i passi visibili insieme in griglia, niente card/bordo/ombra/icona. Numero in un
   quadrato pieno (2026-08-23k) invece del numero "fantasma" in trasparenza della prima
   versione, su richiesta dell'utente. Cronologia: v1 elenco → v2 stepper a riga → v3 slider a
   swipe → v4 griglia di card → v5 timeline → v6 carosello con card in rilievo → v7 elenco con
   numero fantasma → v8 (questa) elenco con numero in quadrato. ---------- */
.process-steps {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4) var(--space-4);
}
@media (min-width: 700px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}
.process-step { display: flex; gap: var(--space-2); align-items: flex-start; }
/* ---------- Slider mobile (2026-09-01, sostituisce la versione 2026-08-31): sotto i 700px i 5
   passi restano scorrimento orizzontale con snap, ma non più come card "Foglio" identiche a
   quelle delle recensioni — su segnalazione esplicita dell'utente le due cose si confondevano.
   Design proprio, coerente con la versione desktop (niente card/bordo/ombra): i badge numero
   restano pieni di colore e "camminano" lungo un filo tratteggiato, per rendere visivo il
   "percorso" del titolo di sezione. Pallini di paginazione sincronizzati via
   IntersectionObserver (js/mobile-swipe-dots.js), nessun contenuto nascosto dall'accessibility
   tree: è lo stesso scroll-snap nativo già in uso altrove. ---------- */
@media (max-width: 699px) {
  .process-steps {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    padding: 6px 2px var(--space-2);
    margin-top: var(--space-4);
    scrollbar-width: none;
  }
  .process-steps::-webkit-scrollbar { display: none; }
  .process-step {
    position: relative;
    flex: 0 0 auto;
    width: min(220px, 72vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  /* Il "filo" del percorso: un segmento tratteggiato per ogni step, dal centro del proprio
     badge al centro del badge successivo (23px = metà dei 46px del badge, gli item non hanno
     padding proprio). Sostituisce 2026-09-04 un'unica linea a piena larghezza su .process-steps
     (::before, ora rimossa): quella versione usava left/right relativi al contenitore SCROLLABILE,
     che si dimensiona sulla larghezza visibile (clientWidth) e non su quella reale del contenuto
     (scrollWidth) — la linea copriva solo il primo "schermo" di step e poi si interrompeva di
     colpo (bug segnalato dall'utente). Un segmento per item, ancorato all'item stesso (in flusso
     normale, dimensionato correttamente), scorre insieme al contenuto senza mai interrompersi. */
  .process-step::after {
    content: "";
    position: absolute;
    /* 23px = metà dei 46px del badge (stesso valore di top sotto): il segmento deve partire dal
       CENTRO del badge, non dal centro dell'intera card (50%, bug 2026-09-07 segnalato
       dall'utente — con align-items:flex-start il badge sta a sinistra, non al centro della
       card, quindi il segmento partiva 87px a destra del badge 1 (si vedeva "spezzato" subito
       dopo l'1) e finiva altrettanto oltre il badge 5 (sembrava "continuare" dopo il 5). */
    left: 23px;
    top: 23px;
    width: calc(100% + var(--space-4));
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(18, 32, 58, 0.28) 0 8px, transparent 8px 15px);
  }
  .process-step:last-child::after { display: none; }
  /* Selettore composto (non solo .process-step-num) apposta: serve più specificità della
     regola base più sotto in cascata (stesso .process-step-num, che imposta color: navy),
     altrimenti su mobile il colore del testo tornava navy su sfondo navy/blu — numero
     invisibile sui badge 1 e 4 (2026-09-04, bug segnalato dall'utente). */
  .process-step .process-step-num {
    position: relative;
    z-index: 1;
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
  }
  .process-step:nth-child(3n+2) .process-step-num { background: var(--terracotta); border-color: var(--terracotta); }
  .process-step:nth-child(3n) .process-step-num { background: var(--blue-700); border-color: var(--blue-700); }
  .process-step-body h3 { font-size: 17px; }
}
.process-step-num {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 21px;
  font-weight: 600;
}
.process-step-body h3 { font-size: 18px; margin-bottom: 4px; }
.process-step-body p { margin: 0; font-size: 14.5px; color: var(--taupe-700); }

/* ---------- Disponibilità mensile — ridisegnata 2026-08-23g: numero grande al centro invece
   del linguaggio a card/badge della v1 (ora rimosso, era condiviso col vecchio carosello
   "Come funziona" che non esiste più). Mese in maiuscolo sopra, numero enorme al centro,
   "inserimenti disponibili" sotto. Colore semantico in base alla disponibilità (non legato
   all'accento del brand): verde=5, giallo=3-4, rosso=1-2, card trasparente/desaturata=0
   (aggiornato 2026-09-04, vedi mappatura dettagliata più sotto). I mesi
   mostrati sono i 3 SUCCESSIVI a quello corrente (agosto escluso su richiesta dell'utente).
   I numeri sono quelli reali forniti dal cliente il 2026-08-23 — vedi js/availability-months.js
   per come aggiornarli quando cambiano. ---------- */
.availability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}
/* 2026-08-31: i 3 mesi restano sempre affiancati sulla stessa riga anche su mobile (prima
   sotto i 640px si impilavano) — stessa logica delle statistiche in trust-bar qui sopra. */
@media (max-width: 480px) {
  .availability-grid { gap: 8px; }
  .availability-card { padding: var(--space-2) 6px; }
  .availability-number { font-size: 34px; }
  .availability-month { font-size: 11px; }
  .availability-label { font-size: 9.5px; letter-spacing: 0.02em; }
}
/* Stessa famiglia "dato" della trust bar (blocco piatto, angolo tagliato): numeri veri, stesso
   linguaggio visivo in due punti diversi della pagina invece di uno stile isolato (2026-08-23k). */
.availability-card {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  box-shadow: var(--shadow);
  transition: opacity 0.25s ease, filter 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.availability-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 4px;
  background: var(--border);
}
.availability-month {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}
.availability-number {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--navy);
  margin: 0 0 4px;
  text-align: center;
}
.availability-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--taupe-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}
/* Colori semantici di disponibilità (non l'accento del brand: qui il colore porta
   un'informazione di stato, deve restare distinto dal terracotta usato altrove come brand).
   Mappatura aggiornata 2026-09-04 su richiesta esplicita dell'utente: 5=verde (invariato),
   3-4=giallo (prima arancione), 1-2=rosso (prima giallo scuro) — il rosso ora segnala urgenza
   vera (pochi posti), non più lo stato "esaurito". Lo stato is-full (0 posti) non usa più il
   rosso: il quadrato dell'intero mese diventa trasparente/desaturato, un linguaggio "assente"
   invece che "allarme", per non confondere "posti quasi finiti" con "mese chiuso". */
.availability-card.is-good::before { background: #1E8E5A; }
.availability-number.is-good { color: #1E8E5A; }
.availability-card.is-mid::before { background: #CA8A04; }
.availability-number.is-mid { color: #CA8A04; }
.availability-card.is-low::before { background: #C0392B; }
.availability-number.is-low { color: #C0392B; }
.availability-card.is-full {
  /* PERFORMANCE/ACCESSIBILITÀ (2026-09-09): rimosso `opacity: 0.45` — riduceva la luminosità di
     TUTTO il contenuto, testo incluso, portando "OTTOBRE"/"AL MOMENTO COMPLETO" sotto la soglia
     WCAG di contrasto (4.5:1) pur partendo da colori già validati (--navy, --taupe-600). L'aspetto
     "spento" resta tramite grayscale + sfondo leggermente diverso dalle card attive + bordo
     tratteggiato; il testo resta a piena opacità, leggibile. */
  filter: grayscale(100%);
  background: var(--bg-tint);
  box-shadow: none;
  border: 1.5px dashed var(--border);
}
.availability-card.is-full::before { background: var(--taupe-600); opacity: 0.4; }
.availability-number.is-full { color: var(--taupe-600); }
/* 2026-09-08: più respiro sopra il bottone dopo le card di disponibilità (richiesta esplicita
   dell'utente) — prima .wrap.narrow.center non aveva un margin-top proprio, quindi il bottone
   restava incollato subito sotto la griglia. Selettore composto .wrap.availability-cta (non solo
   .availability-cta): a parità di specificità con .wrap { margin: 0 auto } definita più sotto in
   questo file, quest'ultima vincerebbe per ordine di sorgente e azzererebbe il margin-top, stesso
   problema già risolto sopra per .wrap.when-closing (vedi commento lì). */
.wrap.availability-cta { margin-top: var(--space-4); }

/* ---------- "In età scolare": signal-cards, sezione distinta dalla timeline 0-3
   (2026-08-23, per staccare visivamente le due fasce d'età). Ridisegnata 2026-09-01: la vecchia
   card "Foglio" (angolo tagliato) era identica, a occhio, alle recensioni e alla timeline in
   scroll — su segnalazione esplicita dell'utente. Nuovo linguaggio preso in prestito da
   .team-callout, già presente altrove in pagina per contenuti informativi non cliccabili
   (arrotondato, ombra, bordo colorato a sinistra): qui diventa una terza famiglia riconoscibile,
   con un'icona a cerchio pieno colorato (invece che a contorno) e un numero fluttuante in alto
   a destra, un tocco da "scheda segnale" più diretto per un contenuto che parla di campanelli
   d'allarme da notare. ---------- */
.signal-grid {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Slider mobile (2026-08-31): stesso trattamento di .process-steps qui sopra, i cinque segnali
   restano le stesse card "Foglio" già in uso, solo in scorrimento orizzontale con snap invece
   che impilate. */
@media (max-width: 699px) {
  .signal-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    padding: var(--space-2) 2px var(--space-2);
    scrollbar-width: none;
  }
  .signal-grid::-webkit-scrollbar { display: none; }
  .signal-card {
    flex: 0 0 auto;
    width: min(258px, 80vw);
    scroll-snap-align: start;
  }
}
.signal-card {
  position: relative;
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--terracotta);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) calc(var(--space-3) + 14px) var(--space-3) var(--space-3);
}
.signal-card:nth-child(2) { border-left-color: var(--blue-700); }
.signal-card:nth-child(3) { border-left-color: var(--navy); }
.signal-card:nth-child(4) { border-left-color: var(--terracotta-light); }
.signal-card:nth-child(5) { border-left-color: var(--blue-500); }
.signal-card:nth-child(6) { border-left-color: var(--terracotta-dark); }
.signal-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.signal-card:nth-child(2) .signal-icon { background: var(--blue-700); }
.signal-card:nth-child(3) .signal-icon { background: var(--navy); }
.signal-card:nth-child(4) .signal-icon { background: var(--terracotta-light); }
.signal-card:nth-child(5) .signal-icon { background: var(--blue-500); }
.signal-card:nth-child(6) .signal-icon { background: var(--terracotta-dark); }
.signal-icon svg { width: 20px; height: 20px; }
.signal-card strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 2px; }
.signal-card p { margin: 0; color: var(--taupe-700); font-size: 14px; }

/* ---------- "Quando rivolgersi a un logopedista": LINEA ORIZZONTALE (2026-09-08, v9) per le
   tre fasce d'età (0-3/3-6/6-11). Colonna unica, stessa su mobile e desktop — richiesta esplicita
   dell'utente di portare la linea (prima verticale, a sinistra del pannello) in orizzontale,
   subito sotto il testo della fascia attiva ("Ti sei mai chiesta se..."), sia su mobile che su
   desktop: non più un selettore "a fianco" del contenuto, ma un passaggio in sequenza
   titolo → descrizione → selettore → segnali. .age-arc resta un elemento indipendente dai tre
   .age-panel (non annidato in nessuno): può quindi restare sempre visibile, posizionato TRA la
   descrizione e la lista di segnali, mentre js/age-wheel.js continua a mostrare/nascondere solo
   .age-panel-lede e .age-signal-list in base alla fascia scelta. Il trucco è display:contents su
   .age-panel: il div non genera più una sua "scatola" di layout, quindi i suoi due figli (lede e
   lista) diventano essi stessi grid item di .age-panels, posizionabili via grid-area assieme
   all'.age-arc che sta fuori da ogni pannello. Interazione JS invariata nella sostanza (stesso
   pattern ARIA tablist di .method-tabs): cambiano solo gli assi x/y del posizionamento dei tre
   pallini (prima fissi in x/variabili in y, ora il contrario). ---------- */
.age-arc-layout {
  margin: var(--space-4) auto 0;
  max-width: 720px;
}
.age-arc-title {
  text-align: center;
  margin: 0 0 var(--space-4);
}
.age-panels {
  display: grid;
  grid-template-areas:
    "lede"
    "arc"
    "list";
  row-gap: var(--space-3);
}
/* .age-panel non genera più una scatola propria (vedi commento sopra): i suoi figli
   (.age-panel-lede, .age-signal-list) diventano grid item diretti di .age-panels. Quando è
   hidden torna un normale display:none, nascondendo entrambi i figli come prima. */
.age-panel { display: contents; }
.age-panel[hidden] { display: none; }
.age-panel-lede { grid-area: lede; color: var(--taupe-700); margin: 0; }
.age-arc {
  grid-area: arc;
  position: relative;
  width: 100%;
  height: 96px;
}
.age-arc-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.age-arc-rim { stroke: var(--border); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.age-arc-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.age-arc-dot {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.age-arc-item.is-active .age-arc-dot {
  width: 15px;
  height: 15px;
  background: var(--navy);
  border-color: var(--navy);
}
/* Numero sopra al pallino, etichetta sotto — entrambi centrati orizzontalmente sul pallino
   (translateX(-50%)), non più "a fianco" come nella versione a linea verticale. */
.age-arc-num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 16px;
  color: var(--taupe-600);
  opacity: 0.55;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -28px);
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.4s ease, color 0.4s ease, font-size 0.4s ease;
}
.age-arc-item.is-active .age-arc-num {
  opacity: 1;
  color: var(--navy);
  font-size: 24px;
  transform: translate(-50%, -32px);
}
.age-arc-label {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: 110px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--taupe-700);
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity 0.3s ease 0.15s;
}
.age-arc-item.is-active .age-arc-label { opacity: 1; }
@media (min-width: 800px) {
  .age-arc-label { font-size: 13px; max-width: 130px; }
}
/* ---------- Segnali per fascia d'età dentro "Quando rivolgersi a un logopedista": griglia vera
   2x2 (2026-09-08, v3), non più una lista con una riga sopra e uno spazio vuoto tra le due
   colonne — richiesta esplicita dell'utente ("elimina la riga sopra i quadranti, crea proprio
   una griglia"). Niente column-gap: le due colonne si toccano, separate da un bordo verticale
   (border-right sulla prima colonna, nth-child dispari) invece che da uno spazio vuoto; il bordo
   orizzontale tra le due righe resta (border-bottom, tolto solo sull'ultima riga). Padding
   interno asimmetrico (0 sul lato esterno di ciascuna colonna) così il testo resta allineato a
   sinistra/destra con il resto della sezione invece di risultare rientrato. Stessa griglia da
   mobile a desktop, sempre 2 colonne (ogni fascia ha sempre esattamente 4 segnali). ---------- */
.age-signal-list {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.age-signal-item { padding: var(--space-3); border-bottom: 1px solid var(--border); }
.age-signal-item:nth-child(odd) { border-right: 1px solid var(--border); padding-left: 0; }
.age-signal-item:nth-child(even) { padding-right: 0; }
.age-signal-item:nth-child(n+3) { border-bottom: none; }
.age-signal-item strong {
  display: block;
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 4px;
}
.age-signal-item p { margin: 0; color: var(--taupe-700); font-size: 14px; line-height: 1.5; }
/* Nota di chiusura della sezione "Quando rivolgersi a un logopedista" (2026-09-07): spostata più
   in basso e centrata su richiesta esplicita dell'utente, poi ribilanciata ancora — deve leggersi
   come centrata nello spazio tra la griglia di segnali e il bottone della sezione subito dopo
   (.wrap.narrow.center col link WhatsApp), non solo staccata dalla griglia. Margine sopra E sotto
   più ampio di prima, non solo sopra. Margin-top dimezzato lo stesso giorno (era
   calc(--space-5 * 2) = 128px) per compattare la sezione, ora che i pannelli sono normalizzati a
   4 segnali ciascuno: la griglia è già più bassa, non serve più tanto stacco. */
/* .wrap.when-closing (non solo .when-closing): .wrap { margin: 0 auto } è definita più sotto in
   questo file e a parità di specificità (una sola classe ciascuna) vincerebbe lei per ordine di
   sorgente, azzerando il margin-top qui sotto — il selettore composto alza la specificità. */
.wrap.when-closing {
  margin-top: var(--space-5);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--taupe-700);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
/* Bottone finale della sezione, fuso qui 2026-09-07 (vedi commento HTML): spazio contenuto dal
   paragrafo sopra, non il padding di un'intera nuova section come prima. */
.when-closing .btn { margin-top: var(--space-3); }

/* ---------- "Un Team Multidisciplinare, un unico metodo": layout a due colonne (2026-08-23k).
   A colonna unica sotto i 900px (stesso ordine di lettura di sempre); da 900px in su il testo
   occupa la colonna più larga. Il callout "sospeso" più in basso della colonna stretta
   (margin-top asimmetrico voluto, unica rottura di simmetria insieme all'hero) è stato tolto il
   2026-09-02 su richiesta dell'utente ("allinea il quadrato al testo a sinistra"): il box ora
   parte alla stessa altezza del testo a sinistra. ---------- */
.team-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .team-grid { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
}
.team-lede { font-size: 18px; }
.team-callout {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--bg);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
  box-shadow: var(--shadow);
}
.team-callout-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tint-warm);
  color: var(--terracotta-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-callout-icon svg { width: 20px; height: 20px; }
.team-callout p { margin: 0; color: var(--navy); font-size: 15px; }
.team-note { color: var(--taupe-600); font-size: 13px; margin-bottom: 0; }

/* ---------- Sedi: orari + form contatti (2026-08-23) ---------- */
.sedi-info {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 800px) {
  .sedi-info { grid-template-columns: 1fr 1fr; align-items: start; }
}
.sedi-appointment-note { font-weight: 700; color: var(--navy); margin-bottom: var(--space-2); }
.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.hours-table th, .hours-table td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 400;
}
.hours-table th { color: var(--navy); font-weight: 700; width: 40%; }
.hours-table td { color: var(--taupe-700); }

.sedi-contact-form { background: var(--bg-tint); border-radius: var(--radius); padding: var(--space-3); }
.sedi-contact-form h3 { margin-bottom: var(--space-2); }
.sedi-contact-form form { display: grid; gap: 10px; }
.sedi-contact-form .field { display: grid; gap: 4px; }
.sedi-contact-form label { font-size: 13px; font-weight: 700; color: var(--navy); }
.sedi-contact-form input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
}
.sedi-contact-form input:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 1px;
  border-color: var(--blue-400);
}
.sedi-contact-form .consent-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--taupe-600);
}
.sedi-contact-form .consent-line input { margin-top: 3px; flex-shrink: 0; }
.sedi-contact-form .consent-line a { color: var(--blue-900); }
.sedi-form-note { font-size: 13px; color: var(--navy); margin-top: var(--space-1); }
.sedi-form-note[hidden] { display: none; }

.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
}

@media (min-width: 800px) {
  h1 { font-size: 56px; }
  h2 { font-size: 38px; }
  h3 { font-size: 22px; }
  body { font-size: 17px; }
}
/* 2026-09-08: da 1200px in su l'H1 e il kicker dell'hero crescono col contenitore allargato
   sopra (.hero .wrap) invece di restare fermi a 56px/28px fino ai monitor più larghi — stessa
   causa del commento sopra .hero .wrap. Scoped solo a .hero-copy: il resto dei titoli in pagina
   (h1/h2/h3 generici) resta invariato. clamp() cresce in modo continuo, non a scatti: a 1200px
   coincide con i valori fissi già in uso sotto quella soglia, poi sale fino a un tetto a 1920px+. */
@media (min-width: 1200px) {
  .hero-copy h1 { font-size: clamp(56px, 3.7vw + 12px, 68px); }
  .hero-kicker { font-size: clamp(28px, 0.85vw + 17.8px, 32px); }
}

a { color: var(--blue-900); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}
.wrap.narrow { max-width: var(--max-width-narrow); }
.wrap.wrap-wide { max-width: var(--max-width-wide); }
.wrap.center { text-align: center; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Focus visibile ovunque, requisito accessibilità (sezione 27 master prompt) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 2px;
}

/* ---------- Barra superiore (SEO/message-match, sezione Red Team) ---------- */
.top-strip {
  margin: 0 auto 6px;
  max-width: fit-content;
  padding: 5px 18px;
  text-align: center;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  max-height: 40px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease, padding 0.25s ease;
}
/* Scomparsa in scroll (desktop e mobile): attivata da js/header-scroll.js che aggiunge
   .is-scrolled a .site-header dopo un piccolo scorrimento. */
.site-header.is-scrolled .top-strip {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ---------- Header: card fluttuante, non barra piena ---------- */
.site-header {
  position: sticky;
  top: var(--space-2);
  z-index: 20;
  padding: 0 var(--space-2);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  max-width: calc(var(--max-width) - 2 * var(--space-2));
  margin: 0 auto;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(18,32,58,0.06);
  transition: padding 0.25s ease;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy);
}
.brand-mark { width: 30px; height: auto; transition: width 0.25s ease; }
.brand-name { font-weight: 700; font-size: 19px; transition: font-size 0.25s ease; }

/* Su mobile la nav è più compatta già di base (non solo dopo lo scroll). */
@media (max-width: 639px) {
  .header-row { padding: 7px 8px 7px 16px; }
  .brand-mark { width: 25px; }
  .brand-name { font-size: 16px; }
}

/* Su mobile, in più, la nav si assottiglia con lo scroll (padding/logo/testo più piccoli, badge
   MioDottore nascosto): solo la barra superiore sopra sparisce del tutto, qui invece resta
   tutto il resto visibile ma molto più sottile. */
@media (max-width: 639px) {
  .site-header.is-scrolled .header-row {
    padding: 4px 6px 4px 14px;
  }
  .site-header.is-scrolled .brand-mark { width: 18px; }
  .site-header.is-scrolled .brand-name { font-size: 13px; }
  .site-header.is-scrolled .miodottore-badge { display: none; }
}
.header-right { display: flex; align-items: center; gap: var(--space-2); }
.site-header .header-call { display: none; }
@media (min-width: 640px) {
  .site-header .header-call { display: inline-flex; }
}

.miodottore-badge {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--bg-tint-warm), #fff);
  border: 1px solid rgba(184,92,46,0.25);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  white-space: nowrap;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.miodottore-badge:hover, .miodottore-badge:focus-visible {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.miodottore-badge-logo {
  width: 86px;
  height: 14px;
  flex-shrink: 0;
}
.miodottore-badge-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.miodottore-badge-count { color: var(--navy); }
.miodottore-badge-count span[aria-hidden] { color: var(--terracotta); }
@media (min-width: 480px) {
  .miodottore-badge { display: inline-flex; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
}
.btn-primary {
  background: var(--terracotta);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--terracotta-dark); }
.btn-outline {
  background: transparent;
  color: var(--blue-900);
  border-color: var(--blue-900);
}
.btn-outline:hover, .btn-outline:focus-visible { background: var(--blue-900); color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 17px; }

/* ---------- Hero: blocco pieno colore (nessuna foto reale ancora, Q6). "Carta e Soffio" v1
   (2026-08-23k): via il radial glow generico da SaaS-hero, sostituito con una grana di carta
   sottile e un unico chiaroscuro direzionale (non più un blob decorativo in un angolo). ---------- */
.hero {
  margin: var(--space-2);
  margin-top: calc(-1 * var(--space-4));
  padding-top: calc(var(--space-5) + var(--space-4));
  padding-bottom: var(--space-5);
  background:
    var(--paper-grain),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-700) 62%, var(--blue-900) 100%);
  background-size: 180px 180px, auto;
  border-radius: calc(var(--radius) + 8px);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.hero-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}
/* 2026-09-08: contenitore hero leggermente più ampio del .wrap standard (1080px) da 1200px in su
   — su monitor larghi il testo/girandola restavano alla stessa dimensione fissa mentre il navy
   intorno cresceva, lasciando uno spazio vuoto sproporzionato ai lati (richiesta esplicita
   dell'utente "adatta meglio la hero allo schermo desktop"). Solo l'hero: .wrap altrove resta
   1080px, nessun'altra sezione tocca larghezze diverse dalle sue. */
@media (min-width: 1200px) {
  .hero .wrap { max-width: 1280px; }
}
.eyebrow {
  color: var(--blue-200);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: var(--space-1);
}
.hero-copy h1 { max-width: 20ch; color: #fff; margin-bottom: var(--space-3); }
.hero-kicker {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  max-width: 18ch;
  min-height: 2.6em; /* riserva lo spazio di 2 righe: evita che l'H1 sotto si sposti mentre
    l'effetto macchina da scrivere (js/hero-typewriter.js) riempie il testo un carattere alla volta */
  color: var(--terracotta-light);
  margin-bottom: var(--space-2);
}
@media (min-width: 800px) {
  .hero-kicker { font-size: 28px; }
}
.hero-kicker-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.1em;
  animation: hero-kicker-cursor 0.8s step-end infinite;
}
@keyframes hero-kicker-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kicker-typing::after { animation: none; }
}
/* 2026-08-24: colore portato da #B7C3D9 (4,04:1 nel punto più blu del gradiente hero, sotto
   soglia AA) a #C9D2E5 (4,73:1). .micro-copy resta usata da guida-rientro-a-scuola.html. */
.micro-copy { color: #C9D2E5; font-size: 14px; margin-top: var(--space-1); }
/* 2026-08-31: nell'hero principale micro-copy e sublede sono unite in un solo paragrafo
   (.hero-sublede) sintetizzato, sotto il tasto. */
.hero-sublede { color: #C9D2E5; font-size: 14px; max-width: 46ch; margin-top: var(--space-1); }
/* 2026-09-08: kicker/h1 su mobile NON hanno (più) una regola propria qui — l'utente ha indicato
   come riferimento della "dimensione perfetta" la versione live di centroastrea.it/logopedista-
   napoli (deploy del 2026-09-04, precedente a tutti gli esperimenti hero del 06-09/09), che sotto
   i 900px usa semplicemente le stesse dimensioni di base (34px/22px, con i tetti max-width:20ch/
   18ch invariati) senza alcun ingrandimento o rimpicciolimento specifico per mobile. Il primo
   tentativo di "scritte più grandi" (clamp() + niente tetto in ch) andava oltre quello che
   l'utente intendeva ed è stato tolto. Resta invece la disattivazione di js/hero-mobile-fit.js
   (vedi HTML) e del relativo display:flex/align-items su .hero più sotto: quello script non
   esisteva nella versione live di riferimento, e stirava la hero fino alla sticky-cta lasciando
   spazio blu vuoto sopra/sotto su schermi alti — cosa che la versione live non fa. */
@media (max-width: 639px) {
  .hero-sublede { font-size: 13px; }
  .hero-copy .btn-lg {
    display: flex;
    width: fit-content;
    padding: 12px 24px;
    font-size: 15px;
  }
}
/* 2026-08-31: variante hero B (index-b.html, A/B test metodo OVT). Riprova sociale già dentro
   l'hero, non solo nella trust-bar sotto lo scroll: stessi dati (contrasto #C9D2E5 e
   --terracotta-light già validati su questo sfondo dalle regole sopra), qui solo per compattarli
   su una riga sotto il CTA. */
.hero-proof-row { color: #C9D2E5; font-size: 13px; font-weight: 600; max-width: 46ch; margin-top: var(--space-2); }
.hero-proof-row span[aria-hidden] { color: var(--terracotta-light); }
/* ---------- Girandola nell'hero: oggetto, non logo animato. Le linee curve tratteggiate
   ("breath-lines") suggeriscono il soffio che la fa girare; lo stecco la ancora come oggetto di
   carta reale invece che come icona astratta. Un solo giro all'apertura pagina (non un loop
   infinito), più una lieve reazione al passaggio del mouse su desktop: il movimento ha un motivo
   (il soffio), non è decorazione di sottofondo. ---------- */
/* Mobile (<900px): la girandola resta nascosta (display:none), solo il testo dell'hero è
   visibile, a tutto schermo. */
.hero-visual {
  display: flex;
  justify-content: center;
  margin-top: clamp(38px, 11vw, 64px); /* allinea la girandola all'altezza dell'H1 "Forse...",
    non al top del kicker sopra di esso: .hero-grid è align-items:start sotto i 900px */
}
.pinwheel-object {
  position: relative;
  width: 100%;
  max-width: 130px;
}
.breath-lines {
  position: absolute;
  top: 8%;
  left: -34%;
  width: 70%;
  color: var(--blue-300);
  opacity: 0.55;
  pointer-events: none;
}
.pinwheel-stick {
  position: absolute;
  left: 50%;
  bottom: -31px;
  width: 3px;
  height: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08));
  transform: translateX(-50%) rotate(-3deg);
  border-radius: 2px;
}
.pinwheel-giant {
  width: 100%;
  filter: drop-shadow(0 20px 34px rgba(0,0,0,0.4));
  transform-origin: 51% 54%;
  animation: pinwheel-settle 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}
@media (max-width: 899px) {
  /* 2026-09-07: tornato alla card compatta (niente più override di margin/border-radius qui) —
     richiesta esplicita dell'utente di ridurre al minimo lo sfondo navy su mobile dopo le
     sperimentazioni a tutto schermo del 06-07/09. L'hero eredita le regole base (.hero sopra) per
     margini/angoli/padding. 2026-09-08: tolto il display:flex/align-items:center che c'era qui —
     serviva solo a centrare verticalmente il testo dentro l'altezza forzata da
     js/hero-mobile-fit.js (ora disattivato): senza quello script .hero si dimensiona da sola sul
     contenuto, niente più da centrare in uno spazio più alto del necessario. */
  .hero-grid { grid-template-columns: 1fr; width: 100%; }
  .hero-visual { display: none; }
}
@media (min-width: 900px) {
  .hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    position: relative;
    order: 0;
  }
  .pinwheel-object {
    width: 100%;
    max-width: 320px;
  }
  .pinwheel-stick {
    bottom: -76px;
    height: 92px;
  }
  .pinwheel-giant {
    transition: transform 0.5s ease;
  }
  .hero-visual:hover .pinwheel-giant { transform: rotate(24deg); }
}
/* 2026-09-08: la girandola cresce insieme al contenitore/testo allargati sopra da 1200px in su,
   invece di restare ferma a 320px mentre il resto dell'hero si ingrandisce intorno a lei. */
@media (min-width: 1200px) {
  .pinwheel-object {
    max-width: clamp(320px, 186.7px + 11.11vw, 400px);
  }
}
@keyframes pinwheel-settle {
  0% { transform: rotate(-130deg); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotate(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pinwheel-giant { animation: none; transition: none; }
  .hero-visual:hover .pinwheel-giant { transform: none; }
}

/* ---------- Trust bar: overlap sul bordo inferiore dell'hero. "Carta e Soffio" v1
   (2026-08-23k): via il glass scuro preso in prestito da una landing di un altro settore (il
   riferimento aveva una foto dietro le card; qui non c'è, quindi "vetro scuro su sfondo scuro"
   non aveva nemmeno senso ottico). Sostituito con blocchi "dato" opachi color carta che
   staccano nettamente dal navy dell'hero, angolo tagliato invece di rettangolo arrotondato:
   questa forma (--cut) è la firma di tutte le sezioni "numeri veri" della pagina (qui e in
   Disponibilità), per farle riconoscere come un'unica famiglia. ---------- */
.trust-bar {
  position: relative;
  z-index: 2;
  margin: calc(-1 * var(--space-4)) var(--space-2) 0;
}
@media (min-width: 700px) {
  .trust-bar { margin-top: calc(-1 * var(--space-5)); }
}
/* 2026-08-31: le 3 statistiche restano sempre affiancate sulla stessa riga, anche sotto i
   700px (prima si impilavano su mobile) — card più strette invece di card a piena larghezza
   una sotto l'altra, vedi compattazione tipografica qui sotto per i telefoni più piccoli. */
.trust-bar-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, 1fr);
}
/* 2026-08-31: le 3 card sono in un grid a colonne uguali (stretch di default), ma i contenuti
   hanno lunghezze molto diverse ("2 sedi" contro "Un unico team multidisciplinare" su due righe):
   con solo text-align:center i numeri non restavano allineati tra loro, ogni card si "appoggiava"
   in alto nella riga stretchata. Flex a colonna centrata pareggia il baricentro di tutte e tre
   indipendentemente da quante righe fa l'etichetta sotto; min-height dà alle card una proporzione
   coerente invece di un'altezza che dipende dal wrapping del testo più lungo. */
.trust-stat {
  position: relative;
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 112px;
  text-align: center;
  box-shadow: var(--shadow);
}
.trust-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 4px;
  background: var(--blue-700);
}
.trust-bar-grid .trust-stat:nth-child(2)::before { background: var(--terracotta); }
.trust-bar-grid .trust-stat:nth-child(3)::before { background: var(--blue-700); }
.trust-stat-number {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--navy);
  margin: 0;
  text-align: center;
}
.trust-stat-label {
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--taupe-600);
  margin: 0;
  text-align: center;
  max-width: 15ch;
}
@media (max-width: 480px) {
  .trust-bar-grid { gap: 8px; }
  .trust-stat { padding: var(--space-2) 8px; min-height: 96px; gap: 5px; }
  .trust-stat-number { font-size: 21px; }
  .trust-stat-label { font-size: 10px; line-height: 1.25; letter-spacing: 0.01em; }
}

/* ---------- Sections. Assegnazione dei tint rifatta in modo intenzionale (2026-08-23k): prima
   bianco/azzurro/pesca si alternavano quasi a rotazione automatica, senza legame col contenuto.
   Ora: pesca caldo (tint-warm) marca il registro "umano/emotivo" — recensioni e la fascia 0-3
   anni, la più delicata — e ricorre in due punti non adiacenti apposta, per essere riconoscibile
   come codice, non per riempire; azzurro (tint) marca il registro "fiducia/numeri veri" — il
   differenziatore del team e la disponibilità mensile, entrambi promesse concrete del Centro. Le
   sezioni puramente funzionali (obiezioni, sedi, FAQ) restano sulla carta bianca di base, senza
   colore, per lasciare risaltare i due registri sopra invece di annacquarli. ---------- */
.section { padding: var(--space-5) 0; scroll-margin-top: 90px; }
.section-tint {
  background: var(--bg-tint);
  border-radius: calc(var(--radius) + 8px);
  margin: 0 var(--space-2);
}
.section-tint-warm {
  background: var(--bg-tint-warm);
  border-radius: calc(var(--radius) + 8px);
  margin: 0 var(--space-2);
}

/* ---------- WHY, testo grande (2026-09-02 v7, sintesi di due revisioni di design
   indipendenti dopo v5 "leggibile ma piatta"). Ritmo scatto→tenuta invariato da v6: apertura
   breve in --navy, salita al blu di brand, TENUTA piatta su --blue-700 (due tappe, 30%→68% —
   quasi il 40% di ogni riga, ed è anche il punto di massimo contrasto, 5,6:1). BUG v6 corretto
   qui: --background-clip:text era dichiarato in una regola condivisa PRIMA dello shorthand
   `background` di ciascun elemento — lo shorthand `background` resetta anche `background-clip`
   al suo valore iniziale (border-box), quindi il clip veniva annullato e il testo appariva come
   un blocco di colore pieno invece che ritagliato sulle lettere. Ora clip/color/
   text-fill-color sono dichiarati DOPO il gradiente, dentro la stessa regola per elemento.
   Direzione differenziata titolo/paragrafo (seconda revisione): il titolo (1-2 righe) resta
   orizzontale (108deg), dove un gradiente laterale legge bene. Il paragrafo (3-4 righe,
   centrato) passa invece a quasi-verticale (170deg): con un gradiente orizzontale ogni riga
   ripartiva da zero sulla propria larghezza — visibile a schermo come una riga corta (es.
   "...Dal primo") che raggiungeva prematuramente le tappe finali e appariva slavata/sporca
   rispetto alle righe più lunghe. In verticale ogni riga è invece un passo coerente di un'unica
   dissolvenza dall'alto in basso. Guizzo terracotta di v6 rimosso dal gradiente per lo stesso
   motivo (con l'orientamento sbagliato cadeva a metà riga, non in chiusura); il tentativo
   successivo di un accento solido terracotta su "mai soli" (.why-accent) è stato scartato su
   feedback diretto dell'utente ("non mi piace") — il paragrafo chiude ora nello stesso blu del
   resto, nessun accento arancione/terracotta residuo.

   Glow "a respiro" (2026-09-02 v8, su richiesta esplicita "effetto WOW senza strafare con i
   colori"): il gradient lineare sopra resta identico byte per byte, contrasto e leggibilità
   invariati in ogni istante dell'animazione. Sopra, un secondo layer — un alone radiale morbido
   nello stesso --blue-400 già presente come tappa finale del gradiente, fuso con
   background-blend-mode:screen invece che sovrapposto in piena opacità — si sposta sulla porzione
   del testo già più chiara (fine titolo, base del paragrafo), mai su navy/blue-900/blue-700 dove
   serve il contrasto pieno. Deliberatamente NON uno shimmer che attraversa il testo (scartato:
   troppo "SaaS/loading skeleton" per un brand sanitario caldo) ma un respiro, coerente con "sempre
   accanto" del copy. Sotto prefers-reduced-motion l'animazione si ferma e l'alone resta fermo
   nella sua posizione di riposo: il risultato coincide col design statico, zero regressioni.

   v9 (2026-09-02, stesso giorno): su segnalazione dell'utente ("non vedo l'animazione") il v8
   (ciclo 9-11s, spostamento di soli 10 punti percentuali, alone 0.45-0.55 di opacità) era troppo
   lento e troppo piccolo per notarsi a un primo sguardo. Ciclo sceso a 4s/4.5s, escursione quasi
   raddoppiata, opacità dell'alone salita a 0.7/0.6 — ma anche così il "respiro" localizzato
   restava poco percepibile: un alone che si muove di pochi punti percentuali su una piccola zona
   del testo è strutturalmente un effetto sottile, indipendentemente da quanto lo si acceleri.

   v10 (2026-09-02, su richiesta esplicita dell'utente "cambiamo con una più animata"): abbandonato
   l'alone radiale, sostituito con un gradiente che scorre sull'intera scritta — stessa tecnica del
   classico "animated gradient text", qui limitata alla sola famiglia di blu di brand (mai un
   colore nuovo) così resta riconoscibile come Astrea. La sequenza di tappe è palindroma (parte e
   torna a --navy) e il background-size è il doppio della scritta. La maggioranza del ciclo (~60%)
   resta su navy/blue-900/blue-700 (tappe ad alto contrasto, già validate in v7); il passaggio su
   blue-500/blue-400 è una parentesi breve, mai un punto di sosta — stessi colori già presenti nel
   design statico originale, qui solo in movimento invece che fissi.

   v11 (2026-09-02, su richiesta "meno veloce e più elegante apple style"): il loop v10 era lineare
   e unidirezionale — velocità costante, nessuna decelerazione, e uno scatto impercettibile ma
   presente al riavvio del ciclo (jump-cut da -220% a 0%). Qui l'animazione diventa un pendolo
   (alternate) con easing ease-in-out, e più lenta (10-11s a tratta). Cambia solo il "come" si
   muove: stessa ampiezza enorme (-220%) e stessa sequenza di bande di v10.

   v12 (2026-09-02, su richiesta "ancora troppo cafonə/caotico, molto più dolce e lento"): il vero
   problema non era la velocità ma l'ampiezza — spostare di -220% l'intera sequenza di bande
   (navy→blue-900→blue-700→blue-500→blue-400→blue-700→navy) faceva scorrere colori molto diversi
   per luminosità sotto ogni lettera, leggibile come "movimento" vistoso qualunque fosse il timing.
   Qui si torna al gradiente quasi-statico di v7 (stesse tappe, stessa TENUTA su blue-700 dal 30% al
   68%, niente più sequenza palindroma aggiunta per il loop) e lo si fa solo scivolare di 30 punti
   percentuali su un background appena più largo del testo (130%, non 220%): un'oscillazione minima,
   lentissima (18-20s a tratta), che si legge come una scritta "viva" invece che come un'onda di
   colore che attraversa il titolo. Sotto prefers-reduced-motion l'animazione si ferma sul frame di
   partenza (0% 0%), identico al design statico originale.

   PERFORMANCE (2026-09-09): l'animazione non girava più in loop infinito ma solo una volta, alla
   comparsa in scroll (.why-section.is-visible, vedi js/scroll-reveal.js), perché `animation` su
   `background-position` non è compositabile (forza repaint a ogni frame) e un loop di 18-20s
   perenne per tutta la permanenza sulla pagina risultava tra le animazioni non composite segnalate
   da PageSpeed Insights. Stesso identico effetto visivo alla prima comparsa, poi il testo resta
   fermo sul frame finale (animation-fill-mode: both): nessun costo di rendering continuo. */
.why-title {
  font-size: 32px;
  letter-spacing: -0.02em;
  text-wrap: balance;
  background-image: linear-gradient(108deg,
    var(--navy) 0%, var(--blue-900) 9%, var(--blue-700) 30%, var(--blue-700) 68%,
    var(--blue-500) 88%, var(--blue-400) 100%);
  background-size: 130% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.why-section.is-visible .why-title {
  animation: why-glow-title 2.2s ease-in-out 1 both;
}
@media (min-width: 700px) {
  .why-title { font-size: 42px; }
}
@keyframes why-glow-title {
  from { background-position: 0% 0%; }
  to   { background-position: -30% 0%; }
}
.why-lede {
  font-weight: 700;
  font-size: 21px;
  line-height: 1.5;
  max-width: 58ch;
  background-image: linear-gradient(170deg,
    var(--navy) 0%, var(--blue-900) 10%, var(--blue-700) 35%, var(--blue-700) 65%,
    var(--blue-500) 85%, var(--blue-400) 100%);
  background-size: 100% 130%;
  background-position: 0 0%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.why-section.is-visible .why-lede {
  animation: why-glow-lede 2.2s ease-in-out 1 both;
  animation-delay: 0.12s;
}
@media (min-width: 700px) {
  .why-lede { font-size: 25px; }
}
@keyframes why-glow-lede {
  from { background-position: 0 0%; }
  to   { background-position: 0 -30%; }
}
@media (prefers-reduced-motion: reduce) {
  .why-title, .why-lede,
  .why-section.is-visible .why-title, .why-section.is-visible .why-lede {
    animation: none;
  }
}
.why-lede + .why-lede { margin-top: var(--space-3); }

/* Comparsa in scroll (2026-09-04, spostata qui da .cta-final): qui è il testo ad animarsi in
   sequenza (titolo poi paragrafo), non il riquadro (questa sezione non ne ha uno). Attivata da
   js/scroll-reveal.js che aggiunge .is-visible a .why-section. Convive con il glow sopra: quello
   (dal 2026-09-09 one-shot, vedi nota sopra) anima background-position, questo anima
   opacity/transform, nessun conflitto — partono insieme allo stesso trigger .is-visible. */
.why-section .why-title,
.why-section .why-lede {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.why-section.is-visible .why-title { opacity: 1; transform: translateY(0); }
.why-section.is-visible .why-lede { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .why-section .why-title, .why-section .why-lede {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.reframe-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .reframe-list { grid-template-columns: repeat(3, 1fr); }
}
.reframe-list li {
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  padding: var(--space-3);
}
.reframe-list strong { display: block; color: var(--navy); margin-bottom: 6px; font-size: 17px; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--blue-900);
  margin-bottom: var(--space-2);
}
/* Peso del tratto unificato a 2.5 su tutti i badge circolari (2026-08-23k): stessa "voce" di
   disegno invece di un kit di icone stock intercambiabili con qualunque altro sito. */
.icon-badge svg, .signal-icon svg, .team-callout-icon svg { stroke-width: 2.5; }
.icon-badge svg { width: 22px; height: 22px; }

.steps {
  padding-left: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-2);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: var(--space-2) var(--space-2) var(--space-2) 60px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-sm);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Timeline "quando rivolgersi" ---------- */
.timeline {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.timeline-item {
  position: relative;
  padding: 0 0 var(--space-4) 36px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 4px solid var(--bg-tint-warm);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: -8px;
  width: 2px;
  background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-age {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 2px;
}
.timeline-item p { margin: 0; color: var(--taupe-700); }

@media (min-width: 800px) {
  .timeline {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .timeline-item {
    flex: 1;
    padding: 40px var(--space-1) 0;
  }
  .timeline-dot { left: 50%; top: 0; transform: translateX(-50%); }
  .timeline-item::before {
    left: 0;
    right: 0;
    top: 9px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .timeline-item:first-child::before { left: 50%; }
  .timeline-item:last-child::before { right: 50%; display: block; }
  .timeline-age, .timeline-item p { text-align: center; }
}

/* Slider mobile (2026-09-01, sostituisce la versione 2026-08-31): sotto gli 800px resta uno
   scorrimento orizzontale con snap, ma non più come card "Foglio" — su segnalazione esplicita
   dell'utente si confondeva col design delle recensioni, e per una sezione che si chiama
   "timeline" perdeva pure il senso: qui il filo e il pallino restano visibili anche in scroll,
   la linea diventa un'unica riga continua sopra tutta la corsia invece di spezzarsi bordo a
   bordo. Ogni tappa è testo puro sotto il pallino, allineato al centro, senza sfondo/bordo. */
@media (max-width: 799px) {
  .timeline {
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    padding: 44px 2px var(--space-2);
    margin: var(--space-3) 0;
    scrollbar-width: none;
  }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline-item,
  .timeline-item:last-child {
    position: relative;
    flex: 0 0 auto;
    width: min(190px, 62vw);
    scroll-snap-align: start;
    padding: 0;
    text-align: center;
  }
  .timeline-item::before { display: none; }
  /* Segmento per tappa (dal centro del proprio pallino al centro del successivo), stesso
     principio di .process-step::after: sostituisce 2026-09-04 un'unica linea su .timeline
     (::before, rimossa) che usava left/right relativi al contenitore scrollabile — si
     dimensionava sulla larghezza visibile e non su quella reale del contenuto, quindi la linea
     si interrompeva a metà percorso invece di coprire tutte le tappe (bug segnalato
     dall'utente). 12px = metà dei 24px del pallino, che è il primo elemento della tappa senza
     offset sopra di sé. */
  .timeline-item::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: calc(100% + var(--space-4));
    height: 2px;
    background: rgba(102, 65, 44, 0.25);
  }
  .timeline-item:last-child::after { display: none; }
  /* display:inline-block aggiunto 2026-09-04: .timeline-dot è uno <span> (inline di default).
     Sul desktop position:absolute lo rende block automaticamente (block-ification dello spec),
     ma qui su mobile passa a position:relative, che NON forza il block — senza display esplicito
     width/height/border-radius venivano ignorati e il pallino si schiacciava in una sottile
     ellisse-contorno, quasi invisibile (bug segnalato dall'utente sopra "12 mesi" ecc.). */
  .timeline-dot {
    display: inline-block;
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: 24px;
    height: 24px;
    margin: 0 auto 14px;
    border-width: 3px;
    border-color: var(--bg-tint-warm);
  }
  .timeline-age, .timeline-item p { text-align: center; }
}

.sedi-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .sedi-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Slider mobile (2026-09-08, richiesta esplicita dell'utente): sotto i 700px le due sedi restano
   scorrimento orizzontale con snap invece di impilate, stesso trattamento già in uso per
   .process-steps. Pallini di paginazione sincronizzati via js/mobile-swipe-dots.js
   (#sedi-dots). */
@media (max-width: 699px) {
  .sedi-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    padding: 2px 2px var(--space-2);
    scrollbar-width: none;
  }
  .sedi-grid::-webkit-scrollbar { display: none; }
  .sedi-grid .card {
    flex: 0 0 auto;
    width: min(320px, 86vw);
    scroll-snap-align: start;
  }
}
/* Famiglia "Rilievo": contiene azioni vere (chiama, WhatsApp, mappa), per questo resta
   arrotondata con ombra, in contrasto deliberato con l'angolo tagliato della famiglia Foglio
   usata per i contenuti informativi (2026-08-23k: la forma comunica se un elemento è cliccabile). */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}
.card-actions { display: flex; gap: var(--space-1); margin-top: var(--space-2); flex-wrap: wrap; }
.sedi-note { margin-top: var(--space-3); color: var(--taupe-600); }

/* ---------- Mappa cliccabile (click-to-load: nessuna richiesta a Google finché l'utente non
   clicca esplicitamente, coerente con l'approccio "niente terze parti prima di un'azione
   dell'utente" già usato per il consent banner/GA4) ---------- */
.map-preview {
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-trigger {
  width: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 28% 22%, rgba(43,116,210,0.14), transparent 55%),
    radial-gradient(circle at 76% 78%, rgba(184,92,46,0.12), transparent 50%),
    var(--bg-tint);
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--blue-900);
  padding: var(--space-2);
  transition: filter 0.2s ease;
}
.map-trigger:hover, .map-trigger:focus-visible { filter: brightness(0.97); }
.map-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--terracotta);
  box-shadow: var(--shadow-sm);
}
.map-trigger-icon svg { width: 22px; height: 22px; }
.map-preview iframe { display: block; width: 100%; height: 220px; border: 0; }

/* ---------- Recensioni: slider orizzontale con scroll-snap (accessibile: nessun contenuto
   nascosto dall'accessibility tree, a differenza dei classici carousel JS) ---------- */
.reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.reviews-head h2 { margin-bottom: 0; }
.slider-nav { display: flex; gap: var(--space-1); flex-shrink: 0; }
.slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.slider-btn:hover, .slider-btn:focus-visible { background: var(--navy); color: #fff; }

.reviews-slider {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  padding: var(--space-3) 2px var(--space-2);
  margin-top: var(--space-2);
  scrollbar-width: none;
}
.reviews-slider::-webkit-scrollbar { display: none; }

/* Famiglia "Foglio": contenuto umano/voci reali, piatto, senza ombra decorativa, angolo tagliato
   in alto a sinistra invece del rettangolo arrotondato usato per gli elementi cliccabili
   (famiglia "Rilievo", vedi .card più sotto). Una lieve rotazione alternata suggerisce fogli
   veri appoggiati uno accanto all'altro, non card di uno stesso stampo. */
.review {
  margin: 0;
  position: relative;
  flex: 0 0 auto;
  width: min(300px, 78vw);
  scroll-snap-align: start;
  background: var(--bg);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  border-bottom: 2px solid var(--border);
  padding: var(--space-4) var(--space-3) var(--space-3);
  transform: rotate(-0.5deg);
  transition: transform 0.25s ease;
}
.review:nth-of-type(even) { transform: rotate(0.5deg); }
.review:hover, .review:focus-within { transform: rotate(0deg); }

.review-quote {
  position: absolute;
  top: 6px;
  left: var(--space-3);
  font-family: var(--font-accent);
  font-size: 64px;
  line-height: 1;
  color: var(--bg-tint-warm);
  font-weight: 700;
  pointer-events: none;
}
.review p {
  position: relative;
  margin: 0 0 var(--space-2);
  color: var(--navy);
  font-size: 15px;
}
.review footer { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-900);
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
.review:nth-of-type(3n+2) .review-avatar { background: var(--terracotta); }
.review:nth-of-type(3n) .review-avatar { background: var(--blue-500); }
.review-name { font-weight: 700; font-size: 14px; color: var(--navy); }

.slider-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: var(--space-1);
}
.slider-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s ease, transform 0.2s ease;
}
.slider-dots span.active { background: var(--terracotta); transform: scale(1.3); }

/* Pallini di paginazione per gli slider mobile aggiunti il 2026-08-31 (Come funziona/Quando
   rivolgersi/In età scolare): visibili solo mentre la sezione è davvero uno slider, spariscono
   appena si torna al layout a griglia/timeline di desktop. */
#process-dots, #timeline-dots, #signal-dots, #sedi-dots { margin-top: var(--space-2); }
@media (min-width: 700px) { #process-dots, #signal-dots, #sedi-dots { display: none; } }
@media (min-width: 800px) { #timeline-dots { display: none; } }

.reviews-source { margin-top: var(--space-2); font-size: 13px; color: var(--taupe-600); }
.reviews-source a { color: var(--blue-900); }

/* ---------- "Il nostro metodo" — 4 pilastri a tab (2026-09-04). Bottoni impilati (mobile e
   desktop) sopra/a fianco di un unico pannello di contenuto: niente scroll orizzontale qui,
   a differenza degli altri elenchi della pagina, perché sono solo 4 voci e il contenuto di
   ciascuna è denso — un tab esplicito si legge meglio di uno slider per questo caso. ---------- */
/* Trattamento diverso da .why-title/.why-lede (niente testo in gradiente animato, richiesto
   esplicitamente): qui il colore terracotta resta piatto, l'impatto viene da (1) un trattino
   decorativo sotto al titolo che si "disegna" da 0 a piena larghezza e (2) un ingresso a comparsa
   con un piccolo effetto di rimbalzo (scale + opacity, easing con overshoot) invece dello
   scorrimento verticale usato sopra. Comparsa condivisa con .why-section/.cta-final via
   js/scroll-reveal.js (.method-section aggiunto ai target). */
.method-heading {
  font-size: 26px;
  text-wrap: balance;
  color: var(--terracotta);
}
@media (min-width: 700px) {
  .method-heading { font-size: 32px; }
}
.method-heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--terracotta-dark), var(--terracotta-light));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.method-lede {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  margin-top: var(--space-2);
  color: var(--taupe-700);
}
@media (min-width: 700px) {
  .method-lede { font-size: 19px; }
}
.method-section .method-heading {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.method-section .method-lede {
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
.method-section.is-visible .method-heading { opacity: 1; transform: scale(1); }
.method-section.is-visible .method-heading::after { transform: scaleX(1); }
.method-section.is-visible .method-lede { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .method-heading::after,
  .method-section .method-heading,
  .method-section .method-lede {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .method-heading::after { transform: scaleX(1); }
}
/* I pulsanti (.method-tabs) stanno sempre a destra del pannello contenuto, a ogni larghezza
   (richiesta esplicita 2026-09-06): grid a due colonne fin da mobile, con order per invertire
   la posizione visiva senza toccare l'ordine nel DOM (i tab restano prima dei pannelli per
   lettori di schermo/tastiera, coerente col pattern ARIA tablist). */
.method-grid {
  display: grid;
  grid-template-columns: 1fr 108px;
  gap: var(--space-2);
  margin-top: var(--space-4);
  align-items: start;
}
@media (min-width: 800px) {
  .method-grid { grid-template-columns: 1fr 280px; gap: var(--space-4); }
}
.method-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  order: 2;
}
.method-panels { order: 1; }
.method-tab {
  text-align: left;
  background: none;
  border: none;
  border-right: 3px solid var(--border);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--taupe-600);
  cursor: pointer;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (min-width: 800px) {
  .method-tab { padding: 10px var(--space-2); font-size: 15px; line-height: normal; }
}
.method-tab:hover { background: var(--bg-tint); color: var(--navy); }
.method-tab.is-active {
  background: var(--bg-tint);
  border-right-color: var(--terracotta);
  color: var(--navy);
}
.method-panels {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.method-panel h3 { margin: 0 0 var(--space-1); font-size: 19px; color: var(--navy); }
.method-panel p { margin: 0; color: var(--taupe-700); }

/* ---------- Reel Instagram v2 (2026-08-24): fascia a piena larghezza, sfondo scuro come
   l'hero, deliberatamente staccata dalle sezioni chiare sopra/sotto. Video self-hosted "nudi"
   (nessuna cornice/header/footer come nell'embed ufficiale, che non era restilizzabile perché
   dentro un iframe cross-origin): solo il video, angoli smussati, badge Instagram discreto per
   segnalare che il click porta al profilo. ---------- */
.reels-band {
  padding: var(--space-5) 0;
  background:
    var(--paper-grain),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-700) 100%);
  background-size: 180px 180px, auto;
  color: #fff;
}
.reels-band .reviews-head h2 { color: #fff; }
.slider-btn-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.slider-btn-dark:hover, .slider-btn-dark:focus-visible { background: #fff; color: var(--navy); }

.reels-slider {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--space-3) var(--space-2) var(--space-2);
  padding-left: max(var(--space-2), calc((100vw - var(--max-width)) / 2));
  padding-right: max(var(--space-2), calc((100vw - var(--max-width)) / 2));
  scrollbar-width: none;
}
.reels-slider::-webkit-scrollbar { display: none; }

.reel-card {
  position: relative;
  flex: 0 0 auto;
  width: min(220px, 58vw);
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy-700);
  transition: transform 0.25s ease;
}
.reel-card:hover, .reel-card:focus-visible { transform: scale(1.03); }
.reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--navy-700);
}
.reel-card-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 32, 58, 0.55);
  backdrop-filter: blur(2px);
  color: #fff;
  pointer-events: none;
}
.reel-card-badge svg { width: 16px; height: 16px; }

.slider-dots-dark span { background: rgba(255, 255, 255, 0.3); }
.slider-dots-dark span.active { background: var(--terracotta-light); }
.reviews-source-dark { color: #DCE4F2; }
.reviews-source-dark a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }

/* ---------- FAQ (native <details>, accessibile senza JS) ---------- */
.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--blue-900);
  margin-left: var(--space-2);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-top: var(--space-1); color: var(--taupe-700); }

/* ---------- CTA finale ---------- */
.cta-final {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 60%, var(--blue-900) 100%);
  color: #fff;
  margin: 0 var(--space-2);
  border-radius: calc(var(--radius) + 8px);
}
.cta-final h2 { color: #fff; }
.cta-final p { color: #C8D2E0; margin-bottom: var(--space-3); }
.cta-final-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.cta-final .btn-outline { color: #fff; border-color: #fff; }
.cta-final .btn-outline:hover, .cta-final .btn-outline:focus-visible { background: #fff; color: var(--navy); }

/* Comparsa in scroll (2026-09-04): qui si anima il riquadro intero (non il testo dentro), a
   differenza della sezione "Siamo a fianco delle famiglie" dove è il testo ad animarsi.
   Attivata da js/scroll-reveal.js che aggiunge .is-visible. */
.cta-final {
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cta-final.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cta-final { opacity: 1; transform: none; transition: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: var(--space-4) 0 calc(var(--space-3) + 70px);
  font-size: 13px;
  color: var(--taupe-600);
  border-top: 1px solid var(--border);
}
.footer-links a { color: var(--taupe-600); }
.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--taupe-600);
  text-decoration: underline;
  cursor: pointer;
}
.footer-link-btn:hover, .footer-link-btn:focus-visible { color: var(--navy); }

/* Blocco newsletter (2026-08-24, restyling): headline grande + freccia decorativa che indica
   il form, ispirato a un riferimento esterno ma nella palette chiara "Carta e Soffio" del sito
   (mai sfondo scuro: sarebbe l'unica sezione fuori stile). Due colonne da 800px in su
   (headline+freccia | form), impilate sotto, freccia ruotata a puntare in basso quando è
   impilata invece che verso destra. */
.footer-hero {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 800px) {
  .footer-hero {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-4);
  }
}
.footer-hero-head { display: grid; gap: var(--space-2); }
/* Dimensioni riequilibrate 2026-09-04 su richiesta dell'utente: il titolo a 26px, andando a
   capo su 3 righe (con il <br> manuale più il wrap naturale), sovrastava la freccia (allora
   18px di "lunghezza" da ruotata) e il paragrafo sotto, che restavano visivamente troppo
   piccoli al confronto. Titolo più contenuto, freccia più presente, paragrafo con un po' più
   di peso (weight 500 invece del default) per stare in proporzione. */
.footer-hero-head h2 {
  font-size: 22px;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 0;
}
@media (min-width: 800px) { .footer-hero-head h2 { font-size: 28px; } }
.footer-arrow {
  color: var(--terracotta);
  width: 34px;
  height: 30px;
  transform: rotate(90deg);
}
@media (min-width: 800px) { .footer-arrow { width: 60px; height: 24px; transform: none; } }
.footer-hero-head p { color: var(--taupe-700); font-size: 15.5px; font-weight: 500; margin: 0; max-width: 42ch; }
.footer-newsletter {
  background: var(--bg-tint);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.footer-newsletter form { display: grid; gap: 10px; }
.footer-newsletter .field { display: grid; gap: 4px; }
.footer-newsletter label { font-size: 13px; font-weight: 700; color: var(--navy); }
.footer-newsletter input[type="email"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
}
.footer-newsletter input:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 1px;
  border-color: var(--blue-400);
}
.footer-newsletter .consent-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--taupe-600);
}
.footer-newsletter .consent-line input { margin-top: 3px; flex-shrink: 0; }
.footer-newsletter .consent-line a { color: var(--blue-900); }
.footer-newsletter .btn { justify-self: start; }
.footer-newsletter-note { font-size: 13px; color: var(--navy); margin-top: var(--space-1); }
.footer-newsletter-note[hidden] { display: none; }

/* Riga inferiore: dati legali/link a sinistra, social a destra (2026-08-24, stesso principio
   del riferimento esterno: barra unica sotto il blocco newsletter, non più colonna affiancata). */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.footer-legal { margin: 0; }
.footer-bottom .footer-links { margin: 0; }
.footer-bottom .social-links { margin-top: 0; }

/* ---------- Pagine legali (privacy/cookie) ---------- */
.policy-content h1 { margin-bottom: 4px; }
.policy-updated { color: var(--taupe-600); font-size: 14px; margin-bottom: var(--space-4); }
.policy-content h2 { font-size: 20px; margin-top: var(--space-4); }
.policy-content p { color: var(--taupe-700); }
.policy-content a { color: var(--blue-900); }
.policy-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-3);
  font-size: 14px;
}
.policy-content th, .policy-content td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.policy-content th { background: var(--bg-tint); font-weight: 700; }
.policy-content code {
  background: var(--bg-tint);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.social-links { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--blue-900);
}
.social-icon svg { width: 18px; height: 18px; }
.social-icon:hover, .social-icon:focus-visible { background: var(--blue-900); color: #fff; }

/* ---------- Bolla WhatsApp flottante ---------- */
.whatsapp-fab {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + 92px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  z-index: 25;
  transition: transform 0.2s ease;
}
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab:hover, .whatsapp-fab:focus-visible { transform: scale(1.06); }
body.consent-open .whatsapp-fab { bottom: calc(var(--space-2) + 92px + 84px); }
@media (min-width: 900px) {
  .whatsapp-fab { bottom: var(--space-2); transition: transform 0.2s ease, bottom 0.2s ease; }
  body.consent-open .whatsapp-fab { bottom: calc(var(--space-2) + 84px); }
}

/* Notifica sulla bolla: sparisce non appena l'utente apre il popup o clicca la bolla stessa
   (gestito in js/whatsapp-popup.js), non è un contatore reale. */
.whatsapp-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}
.whatsapp-fab-badge[hidden] { display: none; }

/* Popup di messaggio sopra la bolla WhatsApp (2026-08-24). Card "Foglio" come il resto del
   sito (bordo, ombra, radius-sm), bottone .btn-primary già usato per le altre CTA di contatto:
   nessun verde WhatsApp, per restare nella palette brand. */
.whatsapp-popup {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + 92px + 66px);
  width: min(280px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: var(--space-2);
  z-index: 26;
}
.whatsapp-popup[hidden] { display: none; }
@media (min-width: 900px) {
  .whatsapp-popup { bottom: calc(var(--space-2) + 76px); }
}
.whatsapp-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tint);
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.whatsapp-popup-close:hover, .whatsapp-popup-close:focus-visible { background: var(--border); }
.whatsapp-popup-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--terracotta);
  margin: 0 24px 6px 0;
}
.whatsapp-popup p { font-size: 14px; color: var(--navy); margin: 0 0 var(--space-2); }
.whatsapp-popup .btn { width: 100%; min-height: 42px; font-size: 14.5px; }

/* ---------- Consent banner (Fase 9) ---------- */
.consent-banner {
  position: fixed;
  left: var(--space-2); right: var(--space-2); bottom: var(--space-2);
  background: var(--navy);
  color: #fff;
  z-index: 40;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-width: calc(var(--max-width) - 2 * var(--space-2));
  margin: 0 auto;
}
.consent-banner-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.consent-banner-main { display: flex; flex-direction: column; gap: var(--space-2); }
.consent-banner p { margin: 0; font-size: 14px; color: #E3E8F0; }
.consent-banner-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.consent-banner .btn-outline { color: #fff; border-color: #fff; min-height: 40px; padding: 8px 16px; }
.consent-banner .btn-outline:hover, .consent-banner .btn-outline:focus-visible { background: #fff; color: var(--navy); }
.consent-banner .btn-primary { min-height: 40px; padding: 8px 16px; }
.consent-banner .btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
@media (min-width: 640px) {
  .consent-banner-main { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); }
}
/* Pannello "Personalizza" (2026-09-04): righe con etichetta + descrizione a sinistra, toggle
   a destra. Il primo (Necessari) è sempre attivo e disabilitato — non è una vera scelta,
   resta visibile solo per trasparenza su cosa viene comunque salvato (la preferenza stessa). */
.consent-banner-prefs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.consent-banner-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.consent-banner-pref span { display: block; }
.consent-banner-pref strong { display: block; font-size: 14px; color: #fff; }
.consent-banner-pref small { display: block; font-size: 12.5px; color: #C9D2E5; margin-top: 2px; }
.consent-banner-pref input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; accent-color: var(--terracotta); }
.consent-banner-prefs .btn { align-self: flex-start; }

/* ---------- Pop-up lead magnet (Fase 17) ---------- */
.lead-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 32, 58, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  z-index: 50;
  animation: lead-popup-overlay-in 0.25s ease;
}
.lead-popup-overlay[hidden] { display: none; }
/* Animazione di apertura (2026-09-13): l'overlay va in dissolvenza, la card fa un piccolo "pop"
   (scala + salita) invece di comparire di scatto. Riparte da sola ogni volta che l'elemento
   passa da display:none a visibile (rimozione dell'attributo hidden), niente JS necessario.
   Disattivata per chi preferisce meno animazioni. */
@keyframes lead-popup-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lead-popup-card-in {
  from { opacity: 0; transform: scale(0.9) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lead-popup-overlay, .lead-popup { animation: none; }
}
.lead-popup {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - var(--space-3));
  overflow-y: auto;
  background: var(--bg);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  animation: lead-popup-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lead-popup-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.lead-popup-close:hover, .lead-popup-close:focus-visible { background: rgba(255,255,255,0.32); }
.lead-popup-head {
  padding: var(--space-4) var(--space-3) var(--space-3);
  background:
    radial-gradient(900px 300px at 90% -20%, rgba(184,92,46,0.35), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 55%, var(--blue-900) 100%);
  color: #fff;
  border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
}
.lead-popup-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-200);
  margin-bottom: var(--space-1);
}
.lead-popup-head h2 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.lead-popup-head p { color: #DCE4F2; font-size: 14px; margin: 0; }
/* Variante "rettangolare" del pop-up newsletter (2026-09-13, su richiesta esplicita): stessa
   struttura del pop-up lead-magnet ma angoli quasi squadrati invece dei 28px di default, più la
   girandola del brand (assets/icon-astrea.png, stessa immagine dell'hero) come filigrana
   decorativa in alto a destra nell'header — .lead-popup-head ha già un overflow implicito dato
   dal border-radius del genitore, ma qui serve overflow:hidden esplicito per ritagliare la
   girandola che esce apposta dai bordi. Scoperta solo su .newsletter-popup: il pop-up lead-magnet
   resta con l'aspetto arrotondato originale. */
.newsletter-popup { border-radius: 6px; }
.newsletter-popup .lead-popup-head {
  border-radius: 6px 6px 0 0;
  position: relative;
  overflow: hidden;
}
.newsletter-popup-pinwheel {
  position: absolute;
  top: -34px;
  right: -34px;
  width: 150px;
  height: auto;
  opacity: 0.18;
  transform: rotate(8deg);
  pointer-events: none;
}
.lead-popup-body { padding: var(--space-3); }
.lead-popup-benefits {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: 8px;
}
.lead-popup-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--taupe-700);
}
.lead-popup-benefits svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--terracotta); }
.lead-popup-form { display: grid; gap: 10px; }
.lead-popup-field { display: grid; gap: 4px; }
.lead-popup-field label { font-size: 13px; font-weight: 700; color: var(--navy); }
.lead-popup-field input[type="email"],
.lead-popup-field input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
}
.lead-popup-field input:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 1px;
  border-color: var(--blue-400);
}
.lead-popup-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--taupe-600);
}
.lead-popup-consent input { margin-top: 3px; flex-shrink: 0; }
.lead-popup-consent a { color: var(--blue-900); }
.lead-popup-consent em { font-style: normal; color: var(--taupe-600); }
.lead-popup .btn { width: 100%; margin-top: 4px; }
.lead-popup-skip {
  display: block;
  text-align: center;
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--taupe-600);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 100%;
}
.lead-popup-skip:hover, .lead-popup-skip:focus-visible { color: var(--navy); }
.lead-popup-note {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--taupe-600);
  text-align: center;
}

/* ---------- Sticky mobile CTA (sezione 40 del master prompt): card fluttuante, non barra piena ---------- */
.sticky-cta {
  position: fixed;
  bottom: var(--space-2); left: var(--space-2); right: var(--space-2);
  display: flex;
  gap: var(--space-1);
  padding: 10px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  border: 1px solid rgba(18,32,58,0.06);
  z-index: 30;
  transition: transform 0.2s ease;
}
.sticky-cta .btn { flex: 1; min-height: 44px; }
body.consent-open .sticky-cta { transform: translateY(calc(100% + 16px)); }
@media (min-width: 900px) {
  .sticky-cta { display: none; } /* su desktop la CTA nel header/hero è già a portata */
}

/* ---------- Opt-in standalone "Guida Rientro a Scuola" (lead magnet landing dedicata,
   guida-rientro-a-scuola.html). Riusa .hero/.hero-grid/.hero-copy/.hero-visual/.card della
   pagina principale: .hero-visual qui ospita la card del form al posto della girandola, stesso
   comportamento mobile (order: -1, la card appare sopra al testo su schermi stretti). ---------- */
.optin-benefits {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.optin-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #E4E9F2;
}
.optin-benefits svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--terracotta-light); }

.optin-card { width: 100%; max-width: 420px; }
.optin-card-head { margin-bottom: var(--space-2); }
.optin-eyebrow {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  color: var(--terracotta-dark);
  margin-bottom: 6px;
}
.optin-card-head h2 { font-size: 22px; margin-bottom: 4px; }
.optin-card-head p { color: var(--taupe-700); font-size: 14px; margin: 0; }
.optin-form { display: grid; gap: 10px; margin-top: var(--space-2); }
.optin-field { display: grid; gap: 4px; }
.optin-field label { font-size: 13px; font-weight: 700; color: var(--navy); }
.optin-field input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
}
.optin-field input:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 1px;
  border-color: var(--blue-400);
}
.optin-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--taupe-600);
}
.optin-consent input { margin-top: 3px; flex-shrink: 0; }
.optin-consent a { color: var(--blue-900); }
.optin-consent em { font-style: normal; color: var(--taupe-600); }
.optin-form .btn { width: 100%; margin-top: 4px; }
.optin-form-note { font-size: 13px; color: var(--navy); margin-top: var(--space-1); }
.optin-form-note[hidden] { display: none; }
.optin-microtrust { margin: var(--space-2) 0 0; text-align: center; font-size: 12px; color: var(--taupe-600); }

/* Pagina a scopo unico, niente sticky-cta/newsletter-footer: il padding extra riservato dal
   footer del sito principale non serve qui. */
body.optin-page .site-footer { padding-bottom: var(--space-4); }

/* Niente header/nav su questa pagina: l'hero non deve più risalire sotto la pillola sticky che
   non esiste più, altrimenti risulterebbe tagliato in alto. */
body.optin-page .hero { margin-top: var(--space-2); }

/* Riga numeri minimal dentro "Astrea è un Centro" (spostati qui dalle card trust-bar rimosse):
   testo inline separato da punti, niente card/ombra — solo un richiamo discreto prima del titolo. */
.mini-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin: 0 0 var(--space-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--blue-200);
}
.mini-trust-row span[aria-hidden] { color: rgba(255,255,255,0.35); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- Mockup "ebook" della guida (guida-rientro-a-scuola.html). Rappresentazione
   dell'oggetto, non una foto finta (Q6 sempre aperta, nessuna fotografia reale disponibile).
   Stessa famiglia "Foglio" di .signal-card/.trust-stat (angolo tagliato, --cut), che qui
   raddoppia da scelta stilistica a corner piegato dell'ebook — coerente con la materia "carta"
   del resto del sito, non un elemento cliccabile. Un solo gesto d'ingresso (nessun loop), poi
   una leggera reazione al passaggio del mouse su desktop: stesso principio già usato per la
   girandola nella hero della landing principale. .hero-visual ora ha due figli (mockup + card
   form): da riga (default flex) a colonna, solo su questa pagina. ---------- */
body.optin-page .hero-visual { flex-direction: column; gap: var(--space-3); }
.ebook-mockup {
  position: relative;
  width: 168px;
  margin: 0 auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.35));
  animation: ebook-settle-in 1s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}
.ebook-page {
  position: absolute;
  inset: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ebook-page-1 { background: #F1E4D8; transform: rotate(-3deg) translate(3px, 4px); }
.ebook-page-2 { background: #E7D6C5; transform: rotate(-6deg) translate(6px, 8px); }
.ebook-cover {
  position: relative;
  padding: 18px 16px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--paper-grain), var(--bg);
  background-size: 180px 180px, auto;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transform: rotate(-6deg);
  transform-origin: 10% 90%;
  transition: transform 0.4s ease;
}
.ebook-eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 700;
  color: var(--terracotta-dark);
}
.ebook-title {
  margin: 0 0 10px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--navy);
}
.ebook-title em { font-style: italic; color: var(--terracotta-dark); }
.ebook-meta {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(18,32,58,0.12);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--taupe-600);
}
@keyframes ebook-settle-in {
  0% { transform: rotate(-24deg) scale(0.85) translateY(-14px); opacity: 0; }
  55% { opacity: 1; }
  75% { transform: rotate(-2deg) scale(1.03) translateY(2px); }
  100% { transform: rotate(0deg) scale(1) translateY(0); opacity: 1; }
}
@media (min-width: 900px) {
  .hero-visual:hover .ebook-cover { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ebook-mockup { animation: none; }
  .hero-visual:hover .ebook-cover { transform: rotate(-6deg); }
}

/* ---------- Thank you page (grazie.html) ---------- */
.grazie-hero { padding-bottom: var(--space-4); }
.community-card { max-width: 480px; margin: 0 auto; text-align: left; }
.community-benefits {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.community-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--taupe-700);
}
.community-benefits svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--terracotta); }
.community-card .btn { width: 100%; }
.community-note { margin: var(--space-2) 0 0; font-size: 13px; color: var(--navy); text-align: center; }
.community-note[hidden] { display: none; }
.community-microtrust { margin: var(--space-2) 0 0; font-size: 12px; color: var(--taupe-600); text-align: center; }
.community-microtrust a { color: var(--blue-900); }
.community-skip { margin: 0; }
.community-skip a { color: var(--taupe-600); text-decoration: underline; font-size: 14px; }
.community-skip a:hover, .community-skip a:focus-visible { color: var(--navy); }

/* Bottone verde WhatsApp standard, riservato ai CTA di questo canale (design-system.md: "pieno
   verde WhatsApp standard solo per l'icona/link WhatsApp", riconoscibilità del canale). */
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: #1DA851; }