/*
  Cecilia Bonsignore — sito demo v5
  Base v3/v4 (8 settembre 2026) + strato "Acquerello" in fondo al file (18 settembre 2026).

  Sistema di stile: tema RAISE (disciplina: base 8px, un solo raggio, un solo
  accento saturo, gerarchia affidata al peso tipografico) applicato alla palette
  e ai due caratteri del brand manual di Cecilia (Fraunces + Hanken Grotesk,
  famiglia verde su fondo panna; dal 30 settembre 2026 palette calda: verde
  chiaro, pesca e albicocca, vedi i token qui sotto).

  Rispetto alla v2: via lo script del carosello a schede e la timeline animata
  a comparsa. Resta un movimento sobrio, un solo linguaggio: reveal leggero
  delle griglie allo scroll, feedback al tocco sui pulsanti, FAQ a fisarmonica
  con apertura morbida. Tutto neutralizzato da prefers-reduced-motion.
*/

/* Caratteri sul server del sito (20 ottobre 2026), non piu' da Google Fonts: cosi' il browser
   del visitatore non comunica il suo indirizzo IP a Google. File scaricati da Google Fonts
   (licenza SIL Open Font License 1.1, uso libero anche commerciale), stesse dichiarazioni
   che dava Google: un file variabile per stile, usato per tutti i pesi; "latin" per i testi
   italiani, "latin-ext" solo se compare una lettera accentata di un'altra lingua. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/fraunces-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/fraunces-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/fraunces-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/fraunces-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/fraunces-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/fraunces-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300; font-display: swap; src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300; font-display: swap; src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap; src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap; src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Sito pensato solo per la modalità chiara: impedisce ai browser/dispositivi
     con tema scuro di sistema di reinvertire i colori (vedi anche la meta
     color-scheme nell'head di ogni pagina). */
  color-scheme: light;

  /* Colore — famiglia verde, colore identitario (brand manual v2) */
  --color-verde: #3F8F4E;
  --color-verde-profondo: #1F5130;
  --color-verde-bottone: #2F6E3D;

  /* Palette calda (30 settembre 2026, richiesta di Cecilia): verde chiaro,
     pesca e albicocca, al posto di azzurro e viola. Il verde scuro resta
     per testi, pulsanti e fondi scuri. Quattro livelli per colore:
     pieno (campioni, linee, pulsanti), chiaro (riquadri con testo scuro),
     tenue (fondi e lavaggi), profondo (titoli sui riquadri: >= 5:1). */
  --color-salvia: #96B076;
  --color-pesca: #F89664;
  --color-albicocca: #FABB52;
  --color-salvia-chiaro: #CED9BC;
  --color-pesca-chiaro: #FACEB4;
  --color-albicocca-chiaro: #FBDEAC;
  --color-salvia-tenue: #ECEFE2;
  --color-pesca-tenue: #FBEBDF;
  --color-albicocca-tenue: #FCF1DC;
  --color-salvia-profondo: #3E5829;
  --color-pesca-profondo: #8A3A1C;
  --color-albicocca-profondo: #6E4708;
  /* albicocca per le linee sottili (1 ott 2026): il pieno #FABB52 su una
     linea di pochi pixel si legge giallo limone; questo e' piu' caldo */
  --color-albicocca-intenso: #F4A04A;

  --color-verde-chiaro: var(--color-salvia);
  /* l'evidenza rara (voce di menu attiva, campo mancante) ora e' albicocca */
  --color-agrume: var(--color-albicocca-intenso);

  /* Colore — base. Mai bianco puro come fondo pagina, mai nero puro sul testo */
  --color-fondo: #FCFBF6;
  --color-panna: #F5F2E8;
  --color-bianco: #FFFFFF;
  --color-bordo: #E3E0D3;

  /* Colore — testo */
  --color-testo: #262B23;
  --color-testo-secondario: #565B4C;

  /* Sfumature d'appoggio per lavaggi e riquadri tenui (dal 30 set 2026
     pesca e albicocca, prima erano verdi) */
  --tinta-1: var(--color-panna);
  --tinta-2: var(--color-pesca-tenue);
  --tinta-3: var(--color-albicocca-tenue);

  /* Tipografia */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Struttura */
  --radius: 12px;
  --radius-foto: 16px;
  --shadow-md: rgba(31, 81, 48, 0.08) 0px 10px 15px -3px, rgba(31, 81, 48, 0.08) 0px 4px 6px -4px;
  --page-max-width: 1180px;
  --misura-testo: 66ch;

  /* Movimento — un solo linguaggio, ripreso dalla v2 */
  --ease-dolce: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 620ms;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* le ancore delle situazioni non devono finire sotto l'header fisso */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-testo);
  background: var(--color-fondo);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.wrap {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0;
  color: var(--color-verde-profondo);
  letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: inherit; }
strong { font-weight: 600; }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  padding: 14px 26px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease-out;
}
.btn-primary { background: var(--color-verde-bottone); color: #ffffff; }
.btn-primary:hover {
  background: var(--color-verde-profondo);
  box-shadow: 0 6px 18px rgba(31, 81, 48, 0.28);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--color-bianco);
  color: var(--color-verde-profondo);
  border-color: var(--color-verde-bottone);
  border-width: 2px;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--color-verde-profondo);
  color: #ffffff;
  border-color: var(--color-verde-profondo);
  box-shadow: 0 6px 18px rgba(31, 81, 48, 0.22);
  transform: translateY(-1px);
}
.btn:active { transform: scale(0.975); }

/* CTA di fine sezione verso le pagine interne: pulsante ghost, uniforme in tutto il sito */
.btn.cta-interna { margin-top: 28px; }

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 251, 246, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-bordo);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 13px 24px;
}
.logo-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark img { height: 42px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-name {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-verde-profondo);
  font-size: 18px;
  white-space: nowrap;
}
.logo-tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1px;
  color: var(--color-testo);
  white-space: nowrap;
}
nav.main-nav { display: flex; align-items: center; gap: 28px; }
nav.main-nav a {
  text-decoration: none;
  color: var(--color-testo);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  padding-bottom: 3px;
  /* 3px (prima 1,5): la linea della pagina aperta si vede meglio; le voci non
     attive hanno la stessa linea trasparente, cosi' non si spostano */
  border-bottom: 3px solid transparent;
}
nav.main-nav a:hover { color: var(--color-verde-profondo); }
nav.main-nav a.active {
  color: var(--color-verde-profondo);
  border-bottom-color: var(--color-agrume);
}
/* voce presente solo nel menu mobile (su desktop c'e' il pulsante Scrivimi accanto al menu).
   "Contatti" dalla V9 e' una pagina vera e compare anche su desktop. */
.main-nav .nav-cta { display: none; }
.header-cta { flex-shrink: 0; }

/* burger, solo mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 9px;
  background: none;
  border: 1px solid var(--color-bordo);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-verde-profondo);
  border-radius: 2px;
  transition: transform 0.22s var(--ease-dolce), opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  nav.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-bordo);
    box-shadow: 0 14px 26px rgba(31, 81, 48, 0.10);
    padding: 6px 24px 20px;
    display: none;
  }
  nav.main-nav.is-open { display: flex; }
  nav.main-nav a {
    font-size: 16px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--color-bordo);
  }
  nav.main-nav a.active { border-bottom-color: var(--color-bordo); font-weight: 600; }
  .main-nav .nav-contatti { display: block; }
  .main-nav .nav-cta {
    display: inline-flex;
    margin-top: 16px;
    border-bottom: none;
    padding: 14px 26px;
  }
}
@media (max-width: 460px) {
  .header-inner { padding: 11px 16px; }
  nav.main-nav { padding-left: 16px; padding-right: 16px; }
  .logo-mark img { height: 36px; }
  .logo-name { font-size: 16px; }
  .logo-tag { font-size: 12px; }
}

/* ---------- Sezioni ---------- */
section { padding: 84px 0; }
section.stretta { padding: 60px 0; }

.eyebrow {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--color-testo-secondario);
  margin-bottom: 18px;
}
.eyebrow.centro { text-align: center; }

h2.section-title {
  font-size: clamp(1.55rem, 3vw, 1.95rem);
  line-height: 1.2;
  margin-bottom: 18px;
  max-width: 22ch;
}
h2.section-title.larga { max-width: 34ch; }
h2.section-title.centro { margin-left: auto; margin-right: auto; text-align: center; }

.lede {
  font-size: 19px;
  color: var(--color-testo-secondario);
  line-height: 1.55;
  max-width: 60ch;
}
.centro { text-align: center; margin-left: auto; margin-right: auto; }

/* sfondo acquerello della testata Home (immagine specchiata: rami a sinistra, sotto il testo).
   Il velo panna semitrasparente dietro il testo garantisce la leggibilita' e sfuma verso il ritratto. */

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 4.3 Come lavoro — tre aree ---------- */
.def-nome {
  max-width: none;
  font-size: 19px;
  color: var(--color-testo-secondario);
  line-height: 1.55;
  margin-bottom: 8px;
}

/* ---------- 4.7 Come si comincia ---------- */

.formula-pagamento {
  margin: 40px auto 0;
  max-width: none;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  color: var(--color-verde-profondo);
}
.nota-prezzo {
  margin: 18px auto 0;
  max-width: 58ch;
  text-align: center;
  font-size: 14px;
  color: var(--color-testo-secondario);
}

/* ---------- 4.8 / 6.8 FAQ a fisarmonica ---------- */
.faq-list { max-width: 780px; margin: 44px auto 0; }
.faq-item { border-bottom: 1px solid var(--color-bordo); }
.faq-item:first-child { border-top: 1px solid var(--color-bordo); }
.faq-item summary {
  cursor: pointer;
  padding: 22px 0;
  font-weight: 600;
  font-size: 17px;
  color: var(--color-testo);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--color-verde-profondo), var(--color-verde-profondo)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--color-verde-profondo), var(--color-verde-profondo)) center / 1.5px 100% no-repeat;
  transition: transform 0.24s var(--ease-dolce);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-verde); outline-offset: 3px; border-radius: 4px; }

.faq-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--ease-dolce); }
.faq-item[open] .faq-corpo { grid-template-rows: 1fr; }
.faq-corpo > div { overflow: hidden; }
.faq-corpo p {
  padding-bottom: 24px;
  color: var(--color-testo-secondario);
  font-size: 16px;
  line-height: 1.62;
}
.faq-corpo p + p { padding-top: 12px; }
.faq-corpo a { color: var(--color-verde-profondo); font-weight: 600; }

/* ---------- Blocco narrativo (Metodo / Chi sono) ---------- */
.narrativa { max-width: 68ch; margin: 0 auto; }
.narrativa p { margin-bottom: 20px; font-size: 17px; color: var(--color-testo-secondario); }
.narrativa p:last-child { margin-bottom: 0; }
.narrativa.centro { text-align: center; }

/* ---------- Sezione contatti (chiude ogni pagina) ---------- */
.contatti { background: var(--color-verde-profondo); color: #ffffff; }
.contatti h2 { color: #ffffff; }
.contatti .lede { color: rgba(255, 255, 255, 0.8); }
.contatti .btn-wa { background: #ffffff; color: var(--color-verde-profondo); align-self: flex-start; }
.contatti .btn-wa:hover { background: var(--color-fondo); }

/* ---------- Footer ---------- */
footer {
  background: var(--color-testo);
  color: rgba(255, 255, 255, 0.6);
  padding: 44px 0 100px;
  font-size: 14px;
}
footer .foot-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
}
footer strong { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
footer a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
footer a:hover { color: #ffffff; }
footer .foot-legale { font-size: 13px; opacity: 0.8; }
/* V12, 19 ott 2026: crediti sotto la partita IVA */
footer .foot-crediti { display: block; margin-top: 6px; font-size: 13px; opacity: 0.8; }
footer .foot-crediti > span { display: inline-block; } /* i nomi non si spezzano a capo */
/* 2 ott 2026: telefono e link alla pagina Contatti, sottolineati perche' si
   riconoscano come link (gli altri link del footer sono solo grigi) */
footer .foot-contatti a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
footer .foot-contatti a:hover { color: #ffffff; text-decoration-color: transparent; }

/* ---------- Pulsante WhatsApp fisso su telefono ----------
   1 ott 2026: non piu' una fascia larga quanto lo schermo e attaccata al
   fondo, ma una pillola sospesa 12px sopra il bordo. Su iPhone, Safari con
   la barra degli indirizzi fluttuante colorava di verde anche la zona sotto
   i suoi comandi: la fascia sembrava alta il triplo e copriva la pagina.
   Staccata dal bordo, Safari non ha piu' niente da allungare. */
.wa-bar { display: none; }
@media (max-width: 820px) {
  .wa-bar {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    transform: translateX(-50%);
    transition: transform 0.4s var(--ease-dolce), visibility 0s linear 0s;
  }
  /* 2 ott 2026: quando la fascia verde in fondo alla pagina e' sullo schermo
     la pillola scende e sparisce (main.js), cosi' non ci sono due pulsanti
     WhatsApp uguali insieme. visibility la toglie anche dalla tastiera. */
  .wa-bar.is-nascosta {
    transform: translate(-50%, calc(100% + 40px));
    visibility: hidden;
    transition: transform 0.4s var(--ease-dolce), visibility 0s linear 0.4s;
  }
  .wa-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--color-verde-bottone);
    color: #ffffff;
    font-weight: 600;
    font-size: 15.5px;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(31, 81, 48, 0.55), 0 2px 6px rgba(31, 81, 48, 0.18);
    transition: transform 0.12s ease-out;
  }
  .wa-bar a:active { transform: scale(0.97); }
  /* niente spazio in piu' sotto la pagina (2 ott 2026): lasciava una striscia
     chiara sotto il footer scuro; i 100px in fondo al footer bastano perche'
     la pillola non copra il testo nelle pagine senza fascia verde */
}

/* ---------- Movimento: reveal allo scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-dolce), transform var(--dur-reveal) var(--ease-dolce);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:active { transform: none; }
  .faq-corpo { transition: none; }
  .wa-bar, .wa-bar.is-nascosta { transition: none; }
  
}

/* =====================================================================
   V5 "Acquerello" (18 settembre 2026). Strato che sovrascrive la base V4.
   L'acquerello d'ulivo diventa il filo conduttore: forme morbide e irregolari
   per le foto, lavaggi di colore al posto delle bande piatte, niente bordi.
   Il movimento e' lento e organico: le sagome respirano, il sentiero dei
   quattro passi si disegna da solo. Font e colori del brand invariati.
   ===================================================================== */

:root {
  --radius: 14px;
  --radius-foto: 28px;
  --aq-pannello: 30px;
  --blob-1: 58% 42% 46% 54% / 48% 40% 60% 52%;
  --blob-2: 44% 56% 52% 48% / 58% 44% 56% 42%;
  --blob-3: 52% 48% 40% 60% / 46% 58% 42% 54%;
}

section { padding: 96px 0; position: relative; }

/* ---------- Lavaggi di fondo: macchie morbide, mai bande piatte ---------- */
.aq-lavaggio-1 {
  background:
    radial-gradient(52% 70% at 8% 30%, var(--tinta-2) 0%, rgba(251, 235, 223, 0) 70%),
    var(--color-fondo);
}
.aq-lavaggio-2 {
  background:
    radial-gradient(48% 62% at 92% 20%, var(--color-panna) 0%, rgba(245, 242, 232, 0) 70%),
    radial-gradient(40% 50% at 10% 90%, var(--tinta-3) 0%, rgba(252, 241, 220, 0) 70%),
    var(--color-fondo);
}
/* Metodo 5.3 "Nutrizione sensibile, cosa vuol dire?" (1 ott 2026): le bolle
   verde chiaro, pesca e albicocca (sfondo-bolle.jpg, 2058x948) al posto
   dell'acquerello d'ulivo, come riempimento: la sezione resta alta quanto il
   testo (padding di .aq-frase-panna) e l'immagine e' ritagliata ("cover",
   centrata sulle bolle). Trasparente al 70% (richiesta di Fabio): un velo
   panna al 70% sopra l'immagine, che si vede quindi al 30%.
   In parallasse (stesso componente di 5.5, .aq-parallasse + .parallasse-fondo
   + script in main.js): qui cambiano solo l'immagine e il velo, uniforme. */
.aq-fondo-bolle { background: var(--color-fondo); }
/* immagine ancorata in basso (1 ott 2026, richiesta di Fabio): all'apertura
   della pagina si vede la parte bassa delle bolle e le colline; scorrendo lo
   strato scende e mostra la parte alta, cosi' il movimento si nota di piu' */
.aq-fondo-bolle .parallasse-fondo {
  background-image: url("assets/sfondo-bolle.jpg");
  background-position: center 100%;
}
.aq-fondo-bolle.aq-parallasse::before { background: rgba(252, 251, 246, 0.7); }
/* Chi sono 7.5 "Oltre lo studio" (8 ott 2026, scelta di Fabio): cerchi pesca, albicocca e salvia
   raccolti al centro (oltre-sfondo-cerchi-centro.jpg, 2000x2000) nello stesso componente in parallasse,
   anche su telefono (lo strato e' alto il 170% della sezione). I cerchi stanno dietro il testo:
   velo panna al 55% (a .35 "affaticava la lettura") e paragrafi in color-testo. Contrasto minimo
   calcolato in tutte le posizioni dello scorrimento gia' con il velo al 35%: titoli 4,6, paragrafi 7,3. */
.aq-fondo-fiore { background: var(--color-fondo); }
/* 8 ott 2026, Fabio: fiore piu' piccolo, piu' movimento, piu' trasparente. L'immagine non copre piu'
   lo strato: e' larga 900px (fiore ~570px; 560px e fiore ~350px su telefono), centrata, e la carta
   intorno al fiore sfuma nel fondo con una maschera radiale (la carta #FCF9F2 e' quasi uguale al
   fondo #FCFBF6, nessun bordo visibile). Movimento +/-60% dell'altezza della sezione
   (data-ampiezza="1.2" nell'HTML, letto da main.js), quindi lo strato e' alto il 220%. Velo da .55 a .65.
   V11, 12 ott 2026 (Fabio: con la fascia delle colline sopra "l'effetto viene un po' incasinato"):
   movimento dimezzato, +/-30% (data-ampiezza="0.6"), e tutta la corsa spostata in giu' del 15%
   dell'altezza della sezione (data-abbassa="0.15"), cosi' all'ingresso il fiore non sbuca piu' dal
   bordo alto, sotto le colline. Il velo sfuma nel fondo pieno in alto e in basso: il fiore non ha
   piu' un taglio netto ai bordi della sezione. Lo strato resta alto il 220% (serve solo a centrare
   il fiore: fuori dal fiore e' trasparente). */
.aq-fondo-fiore .parallasse-fondo {
  top: -60%; height: 220%;
  background: url("assets/oltre-sfondo-cerchi-centro.jpg") center / 900px auto no-repeat;
  -webkit-mask: radial-gradient(closest-side, #000 78%, transparent 100%) center / 900px 900px no-repeat;
          mask: radial-gradient(closest-side, #000 78%, transparent 100%) center / 900px 900px no-repeat;
}
@media (max-width: 760px) {
  .aq-fondo-fiore .parallasse-fondo { background-size: 560px auto; -webkit-mask-size: 560px 560px; mask-size: 560px 560px; }
}
.aq-fondo-fiore.aq-parallasse::before { background: linear-gradient(to bottom, var(--color-fondo) 0%, rgba(252, 251, 246, 0.65) 20%, rgba(252, 251, 246, 0.65) 80%, var(--color-fondo) 100%); }
.aq-fondo-fiore .oltre-testo p { color: var(--color-testo); }

/* ---------- Foto in box stondato (23 settembre 2026) ----------
   Cecilia ha chiesto di togliere la forma organica che "respira": tornano i
   box rettangolari con angoli arrotondati (--radius-foto), come nella V4,
   ovunque nel sito. Fa eccezione, per sua richiesta esplicita, la sola
   sezione Home "Se hai già provato più diete..." (le tre situazioni), dove
   la sagoma organica resta: li' si aggiunge il modificatore .organica. */
.aq-sagoma {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-foto);
}
.aq-sagoma img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Sagoma organica: solo dove serve ancora (.organica) ---------- */

@keyframes aq-respiro {
  0%   { border-radius: 58% 42% 46% 54% / 48% 40% 60% 52%; }
  50%  { border-radius: 48% 52% 56% 44% / 54% 46% 54% 46%; }
  100% { border-radius: 44% 56% 50% 50% / 42% 56% 44% 58%; }
}

/* ---------- 4.1 Testata ---------- */
.aq-hero {
  padding: 64px 0 100px;
  position: relative;
  isolation: isolate;
  background: var(--color-fondo);
  overflow: hidden;
}
/* Sfondo della testata in parallasse (7 ott 2026): i cerchi specchiati stanno su uno strato
   alto il 140% della testata, ancorato in basso; scorrendo, main.js lo sposta in giu' del 35%
   dello scorrimento (al massimo il 40% dell'altezza), quindi i cerchi scendono piu' lenti del testo.
   Immagine piu' alta di Fabio (1672x1108, carta vuota in alto). Il velo panna e' il ::before,
   sopra lo strato: alleggerito il 7 ott (era .82/.6/.1/0); contrasti minimi misurati a riposo sui
   pixel dell'immagine: titoli 6,0, sottotitolo (color-testo) 10,7 a 1024-1440px. */
.hero-fondo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140%;
  z-index: -2;
  background: url("assets/hero-sfondo-cerchi-alta-specchiata.jpg") center bottom / cover no-repeat;
  /* 7 ott 2026, Fabio: un po' piu' chiaro di com'era con il velo leggero, ma meno del velo pieno
     iniziale. L'opacita' schiarisce i cerchi in modo uniforme (anche a destra, sotto la foto). */
  opacity: 0.86; /* via di mezzo tra 1 (troppo forte) e 0.72 (troppo chiaro), scelta di Fabio */
  will-change: transform;
}
.aq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(252, 251, 246, 0.4) 0%, rgba(252, 251, 246, 0.3) 42%, rgba(252, 251, 246, 0) 60%, rgba(252, 251, 246, 0) 100%);
}
.aq-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.aq-hero h1 { font-size: clamp(2.8rem, 6.4vw, 4.6rem); line-height: 1.02; margin-bottom: 22px; }
/* Titoletto sotto l'H1: più piccolo del titolo ma ancora in evidenza (Fraunces,
   stesso verde profondo dei titoli), un po' di spazio sopra per staccarlo
   dall'H1. Il nuovo sottotitolo lo segue subito, gap minimo. */
.aq-hero .hero-titoletto {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-verde-profondo);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.28;
  max-width: 24ch;
  margin-top: 10px;
  margin-bottom: 10px;
}
.aq-hero .sottotitolo { font-size: 20px; color: var(--color-testo); line-height: 1.5; max-width: 38ch; margin-bottom: 34px; text-wrap: balance; } /* 7 ott 2026: color-testo (prima testo-secondario) per stare sopra i cerchi con un velo leggero */
.aq-hero-foto { position: relative; max-width: 460px; margin-left: auto; }
.aq-hero-foto::before {
  content: "";
  position: absolute;
  inset: -10% -14% -6% -18%;
  background: radial-gradient(closest-side, rgba(251, 235, 223, 0.95), rgba(251, 235, 223, 0) 72%);
  z-index: 0;
}
.aq-hero-foto .aq-sagoma { position: relative; z-index: 1; aspect-ratio: 1 / 1; } /* V12, 20 ott 2026: quadrata come in Chi sono (prima 4:5) */
.js .aq-hero-foto .aq-sagoma { animation: aq-entra 1100ms var(--ease-dolce) both; }
.js .aq-hero h1, .js .aq-hero .hero-titoletto, .js .aq-hero .sottotitolo, .js .aq-hero .hero-actions { animation: aq-sale 760ms var(--ease-dolce) both; }
.js .aq-hero .hero-titoletto { animation-delay: 120ms; }
.js .aq-hero .sottotitolo { animation-delay: 240ms; }
.js .aq-hero .hero-actions { animation-delay: 360ms; }
@keyframes aq-entra { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aq-sale { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .aq-hero { padding: 36px 0 64px; }
  .hero-fondo { background-position: 25% bottom; }
  /* nessun velo sopra (foto e margini), velo leggero solo dove c'e' il testo: contrasto minimo
     misurato a riposo 4,8 sul titolo grande, 5,6 sul titoletto, 9,0 sul sottotitolo (390px) */
  .aq-hero::before { background: linear-gradient(180deg, rgba(252, 251, 246, 0) 0%, rgba(252, 251, 246, 0) 48%, rgba(252, 251, 246, 0.2) 53%, rgba(252, 251, 246, 0.25) 100%); }
  .aq-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .aq-hero-foto { order: -1; max-width: 320px; margin: 0 auto; }
  .aq-hero .hero-titoletto { max-width: none; }
  .aq-hero .sottotitolo { max-width: none; }
}

/* ---------- Reveal morbido (scala + opacita') ---------- */
.js .reveal { transform: translateY(12px) scale(0.985); }
.js .reveal.is-visible { transform: none; }

/* ---------- 4.2 Chi e', in breve ---------- */
.aq-chi { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.aq-chi-foto .aq-sagoma { aspect-ratio: 4 / 5; }
.aq-chi-foto .aq-sagoma img { object-position: 40% 30%; } /* 1 ott 2026: foto orizzontale
   (Cecilia-Bonsignore-nutrizionista.jpg): il 40% tiene intera la mano con la forchetta */
.aq-chi-testo h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.1; margin-bottom: 14px; text-wrap: balance; } /* V11: 14px (prima 6) sopra il testo piu' piccolo; balance per non spezzare il nome su telefono */

/* V11, 12 ott 2026: "Piacere, sono Cecilia Bonsignore", un solo paragrafo in corpo piu' piccolo (prima 17,5px, due paragrafi) */
.aq-chi-testo .racconto { font-size: 16.5px; line-height: 1.7; color: var(--color-testo-secondario); max-width: 60ch; text-wrap: pretty; }
.aq-firma { display: block; width: 150px; height: auto; margin: 26px 0 6px; opacity: 0.85; }
@media (max-width: 900px) {
  .aq-chi { grid-template-columns: 1fr; gap: 30px; }
  .aq-chi-foto { max-width: 300px; margin: 0 auto; }
}

/* ---------- 4.4 Per chi e' pensato: illustrazioni nelle sagome ---------- */
/* V11, 12 ott 2026 (Fabio): titolo grande come "Piacere, sono Cecilia Bonsignore" (.aq-chi-testo h2) */
h2.section-title.titolo-grande { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.1; }

.aq-situazioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.aq-situazione { scroll-margin-top: 100px; }
/* V13, 22 ott 2026 (Fabio): illustrazioni nuove con sfondo trasparente (la macchia di colore e' nel disegno),
   quindi niente piu' box: niente fondo tinta, angoli arrotondati e ritaglio di .aq-sagoma */
.aq-situazione .aq-illustrazione { aspect-ratio: 1 / 1; max-width: 300px; margin-bottom: 26px; }
.aq-illustrazione img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.9s var(--ease-dolce); }
.aq-situazione:hover .aq-illustrazione img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .aq-illustrazione img { transition: none; } }
.aq-situazione strong { display: block; color: var(--color-testo); font-size: 17.5px; line-height: 1.4; margin-bottom: 8px; }
/* V10, 5 ott 2026: testi nuovi piu' lunghi, niente parole sole sull'ultima riga */
#cosa-ti-porta-qui .lede, .aq-situazione p, .chiusura-situazioni p,
#come-lavoro .def-nome, .aq-fase-mini p { text-wrap: pretty; }
.aq-situazione strong { text-wrap: balance; }
.aq-situazione p { color: var(--color-testo-secondario); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 880px) { .aq-situazioni { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* ---------- 4.7 Come si comincia: il sentiero ---------- */
.aq-passi { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.aq-sentiero {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 96px;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}
.aq-sentiero path {
  fill: none;
  stroke: var(--color-pesca);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease-dolce) 0.2s;
}
.aq-passi.is-visible .aq-sentiero path { stroke-dashoffset: 0; }
.aq-passo { position: relative; padding-top: 0; text-align: center; }
.aq-passo .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-verde-profondo);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 600; font-size: 16px;
  margin-bottom: 40px;
  position: relative;
  box-shadow: 0 0 0 8px var(--color-fondo);
  transition: transform 0.5s var(--ease-dolce);
}
.aq-passo:hover .n { transform: scale(1.1); }
.aq-passo:nth-of-type(2) .n { margin-top: 42px; margin-bottom: 26px; }
.aq-passo p { font-size: 15.5px; color: var(--color-testo-secondario); max-width: 32ch; margin: 0 auto; text-wrap: pretty; } /* V10, 6 ott 2026: 26ch -> 32ch per i testi nuovi, piu' lunghi */
.aq-passo p strong { display: block; color: var(--color-testo); margin-bottom: 4px; }
@media (max-width: 860px) {
  .aq-sentiero { display: none; }
  .aq-passi { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin-inline: auto; }
  .aq-passo { display: grid; grid-template-columns: 44px 1fr; gap: 20px; text-align: left; padding-bottom: 30px; }
  .aq-passo .n, .aq-passo:nth-of-type(2) .n { margin: 0; }
  .aq-passo p { margin: 8px 0 0; max-width: none; }
  .aq-passo:not(:last-child)::before {
    content: ""; position: absolute; left: 21px; top: 44px; bottom: 0;
    border-left: 2px dotted var(--color-pesca);
  }
}

/* Box prezzo su fondo tenue (24 set 2026; pesca dal 30 set): stessi testi/font di prima
   (.formula-pagamento, .nota-prezzo), solo racchiusi in un riquadro. */
.box-prezzo { background: var(--tinta-2); border-radius: var(--aq-pannello); padding: 40px 44px; margin: 48px auto 0; max-width: 640px; }
.cta-passi { margin-top: 32px; }
/* pulsante ghost centrato sotto un blocco (Chi sono sotto il box verde, Metodo
   sotto "Forse ti riconosci...") */
.cta-centrata { margin-top: 36px; text-align: center; }
.box-prezzo .formula-pagamento { margin: 0; }
.box-prezzo .nota-prezzo { margin: 18px auto 0; }
@media (max-width: 520px) { .box-prezzo { padding: 32px 28px; } }

/* ---------- 4.8 FAQ ---------- */
.aq-faq .faq-list { background: rgba(255, 255, 255, 0.6); border-radius: var(--aq-pannello); padding: 6px 32px; }
.aq-faq .faq-item:first-child { border-top: none; }
.aq-faq .faq-item:last-child { border-bottom: none; }

/* ---------- Intestazione delle pagine interne: titolo + una foto in sagoma ---------- */
.aq-intestazione { padding: 56px 0 36px; overflow: hidden; }
.aq-intestazione .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.aq-intestazione h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); line-height: 1.08; max-width: 18ch; text-wrap: balance; }
.aq-intestazione-foto { position: relative; max-width: 400px; margin-left: auto; }
.aq-intestazione-foto::before {
  content: "";
  position: absolute;
  inset: -12% -16% -8% -20%;
  background: radial-gradient(closest-side, rgba(251, 235, 223, 0.95), rgba(251, 235, 223, 0) 72%);
}
.aq-intestazione-foto .aq-sagoma { position: relative; aspect-ratio: 5 / 4; }
/* intestazione senza foto (Percorso, 28 set 2026): una colonna, titolo centrato */
.aq-intestazione.senza-foto .wrap { grid-template-columns: 1fr; }
.aq-intestazione.senza-foto h1 { text-align: center; max-width: none; }
.aq-intestazione.senza-foto .wrap { row-gap: 16px; }
.aq-intestazione-sotto { max-width: none; text-wrap: balance; }
.js .aq-intestazione-sotto { animation: aq-sale 760ms var(--ease-dolce) both; animation-delay: 120ms; }
/* senza il titolo di sezione il sentiero parte subito: niente margine in piu' */
/* titolo presente per i lettori di schermo (gerarchia h1 > h2 > h3) ma
   invisibile a video */
.solo-lettori {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ps-sezione { padding-top: 40px; }
.ps-sezione .ps-fasi { margin-top: 0; }
.js .aq-intestazione-foto .aq-sagoma { animation: aq-entra 1100ms var(--ease-dolce) both; }
.js .aq-intestazione h1 { animation: aq-sale 760ms var(--ease-dolce) both; }
@media (max-width: 760px) {
  .aq-intestazione { padding: 28px 0 24px; }
  .aq-intestazione .wrap { grid-template-columns: 1fr; gap: 26px; }
  .aq-intestazione-foto { order: -1; max-width: 260px; margin: 0 auto; }
  .aq-intestazione h1 { text-align: center; max-width: none; }
}

/* Variante "con-testo" (solo Metodo, 23 settembre 2026): un paragrafo sotto
   al titolo, la foto resta laterale a titolo + paragrafo insieme. Modificatore
   a parte apposta, cosi' l'intestazione di Percorso (solo titolo + foto,
   stessa classe base .aq-intestazione) resta come prima, invariata. */
.aq-intestazione.con-testo .wrap {
  grid-template-areas: "titolo foto" "testo foto";
}
.aq-intestazione.con-testo h1 { grid-area: titolo; }
.aq-intestazione.con-testo .aq-intestazione-foto { grid-area: foto; }
.aq-intestazione-testo {
  grid-area: testo;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-testo-secondario);
}
.js .aq-intestazione-testo { animation: aq-sale 760ms var(--ease-dolce) both; animation-delay: 120ms; }
/* su desktop titolo e paragrafo restano uniti al centro della foto, qualunque
   sia la lunghezza del paragrafo (con un testo corto si aprivano due righe vuote) */
@media (min-width: 761px) {
  .aq-intestazione.con-testo .wrap { row-gap: 22px; }
  .aq-intestazione.con-testo h1 { align-self: end; }
  .aq-intestazione.con-testo .aq-intestazione-testo { align-self: start; }
}
@media (max-width: 760px) {
  /* stesso ordine dell'immagine chiesto da Fabio: titolo, poi la foto, poi il
     paragrafo (non piu' il vecchio ordine foto-poi-titolo delle altre pagine) */
  .aq-intestazione.con-testo .wrap {
    grid-template-areas: "titolo" "foto" "testo";
  }
  .aq-intestazione.con-testo .aq-intestazione-foto { order: 0; }
  .aq-intestazione-testo { text-align: center; max-width: none; }
}

/* ---------- Metodo 5.6: "Forse ti riconosci..." usa la fisarmonica delle FAQ
   (.aq-faq .faq-list), la prima voce aperta; main.js chiude le altre. ---------- */
#per-chi-esteso .faq-item { scroll-margin-top: 100px; }

/* ---------- Metodo 5.7 + 5.8: due pannelli, il secondo scuro ---------- */
.aq-due-box { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.aq-box { background: rgba(255, 255, 255, 0.72); border-radius: var(--aq-pannello); padding: 38px 40px; }
.aq-box h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem; margin-bottom: 14px; }
.aq-box p { color: var(--color-testo-secondario); font-size: 16.5px; }
/* Metodo 5.7/5.8: i due riquadri colorati. Dal 6 ott 2026 (V10, proposta B
   "medio" scelta da Fabio) verde = cosa trovi ("I nostri strumenti") e
   terracotta = cosa non trovi ("Cosa non troverai"), come chiesto da Cecilia,
   in toni morbidi della palette. Testo scuro; contrasti: testo 7,25 e 5,86,
   titoli 6,77 e 5,78. Prima (30 set) albicocca e pesca chiari. */
.aq-box.salvia { background: #A9BF8E; }
.aq-box.terracotta { background: #D6967C; }
.aq-box.salvia h3 { color: #22331A; }
.aq-box.terracotta h3 { color: #4A1D0C; }
.aq-box.salvia p, .aq-box.terracotta p { color: var(--color-testo); }
@media (max-width: 720px) { .aq-due-box { grid-template-columns: 1fr; } }

/* ---------- Percorso 6.3: testo + riquadro laterale ---------- */

.aq-info-box { background: rgba(255, 255, 255, 0.72); border-radius: var(--aq-pannello); padding: 30px 32px; }
.aq-info-box dl { margin: 0; }
.aq-info-box dt { font-family: var(--font-serif); font-size: 1.15rem; color: var(--color-verde-profondo); margin: 0 0 4px; }
.aq-info-box dd { margin: 0 0 18px; font-size: 16px; color: var(--color-testo); }
.aq-info-box dd:last-child { margin-bottom: 0; }
/* V12, 19 ott 2026: frase d'apertura in "Dove possiamo incontrarci" (Percorso, In pratica) */
.aq-info-box .info-intro { font-size: 16px; line-height: 1.65; color: var(--color-testo); margin: 0 0 18px; text-wrap: pretty; }

/* ---------- Chi sono 7.1: apertura con ritratto in sagoma ---------- */
.aq-apertura-chi { padding: 56px 0 72px; overflow: hidden; }
.aq-apertura-chi h1 { font-size: clamp(2.2rem, 4.6vw, 3rem); line-height: 1.08; margin-bottom: 18px; }
.aq-apertura-chi .eyebrow { margin-bottom: 12px; }
.aq-apertura-chi .sottotitolo { font-size: 20px; color: var(--color-testo-secondario); line-height: 1.5; max-width: 40ch; }
@media (max-width: 900px) { .aq-apertura-chi { padding: 32px 0 56px; } }

/* ---------- Chi sono 7.4: formazione in pannello ---------- */
.aq-formazione {
  display: flex; align-items: center; gap: 36px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--aq-pannello);
  padding: 38px 42px;
}
.aq-formazione h2 { margin-bottom: 12px; }
.aq-formazione p { color: var(--color-testo-secondario); font-size: 17px; max-width: var(--misura-testo); }
@media (max-width: 640px) { .aq-formazione { flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 30px 26px; } }
/* V10, 6 ott 2026: la formazione diventa elenco + foto della laurea (via il sigillo).
   Nel testo di Cecilia nome e descrizione erano separati da un trattino lungo
   (vietato dal brief): qui il nome va su una riga e la descrizione sotto. */
.aq-formazione:has(.aq-formazione-testo) { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center; padding: 44px 48px; }
.aq-formazione-testo h2 { text-wrap: balance; }
.formazione-lista { margin: 22px 0 0; }
.formazione-lista dt { font-weight: 600; font-size: 17px; color: var(--color-testo); line-height: 1.45; }
.formazione-lista dd { margin: 2px 0 16px; font-size: 16.5px; line-height: 1.6; color: var(--color-testo-secondario); text-wrap: pretty; }
.aq-formazione p.formazione-albo { max-width: none; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-bordo); font-size: 16px; color: var(--color-testo-secondario); }
/* V12, 19 ott 2026: "Collaborazioni e progetti", riquadro salvia tenue a se' sotto la formazione
   (in call: "quei box colorati verdini", come la nota di Percorso e di "Cosa ti porta qui?") */
.chi-collaborazioni { margin-top: 24px; background: var(--color-salvia-tenue); border-radius: var(--aq-pannello); padding: 34px 48px; }
.chi-collaborazioni h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem; line-height: 1.25; color: var(--color-verde-profondo); margin-bottom: 10px; }
.chi-collaborazioni p { font-size: 16.5px; line-height: 1.7; color: var(--color-testo); max-width: 72ch; text-wrap: pretty; }
.chi-collaborazioni p + p { margin-top: 10px; }
.chi-collaborazioni a { color: var(--color-verde-profondo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chi-collaborazioni a:hover { text-decoration-thickness: 2px; }
@media (max-width: 860px) { .chi-collaborazioni { padding: 28px 26px; } }

/* V12, 20 ott 2026: pagina Privacy e cookie (/privacy/). Impaginata come un documento, non come le altre pagine:
   fondo panna senza lavaggi, titolo a sinistra, sezioni numerate con titoletti in Hanken, spazi compatti. */
section.privacy-pagina { padding: 44px 0 64px; }
.privacy-testo { max-width: 780px; }
.privacy-testo h1 { font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
.privacy-testo p.privacy-agg { margin-top: 6px; font-size: 14px; color: var(--color-testo-secondario); }
.privacy-testo p.privacy-intro { margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--color-bordo); }
.privacy-testo h2 { font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: 0; margin: 26px 0 6px; }
.privacy-testo h3 { font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--color-testo); margin: 12px 0 2px; }
.privacy-testo p, .privacy-testo li { font-size: 15.5px; line-height: 1.65; color: var(--color-testo); text-wrap: pretty; }
.privacy-testo p + p, .privacy-testo ul + p { margin-top: 8px; }
.privacy-testo ul { margin: 0; padding-left: 1.2em; }
.privacy-testo li + li { margin-top: 4px; }
.privacy-testo a { color: var(--color-verde-profondo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.privacy-testo a:hover { text-decoration-thickness: 2px; }
@media (max-width: 760px) { section.privacy-pagina { padding: 32px 0 48px; } }
.aq-formazione-foto { margin: 0; }
.aq-formazione-foto .aq-sagoma { aspect-ratio: 3 / 4; }
@media (max-width: 860px) {
  .aq-formazione:has(.aq-formazione-testo) { grid-template-columns: 1fr; gap: 28px; padding: 30px 26px; text-align: left; }
  .aq-formazione-foto { order: -1; width: 100%; max-width: 280px; margin-inline: auto; }
}

/* V10, 6 ott 2026: Chi sono 7.5 "Oltre lo studio". Titolo e frase d'attacco centrati
   (la frase, in grassetto nel testo di Cecilia, e' resa in Fraunces), poi i paragrafi
   in una colonna di lettura allineata a sinistra. */
.oltre-studio { max-width: 760px; }
.oltre-studio .oltre-attacco {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.38;
  color: var(--color-verde-profondo); text-align: center; text-wrap: balance; margin: 6px auto 30px; max-width: 34ch;
}
.oltre-testo p { font-size: 17.5px; line-height: 1.75; color: var(--color-testo-secondario); text-wrap: pretty; }
.oltre-testo p + p { margin-top: 18px; }
/* V12, 19 ott 2026: la foto da bambina con il papa' accanto al testo; titolo e frase d'attacco restano centrati sopra */
.oltre-studio.con-foto { max-width: 1060px; }
.oltre-corpo { display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: center; }
.oltre-foto { margin: 0; }
.oltre-foto .aq-sagoma { aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
  .oltre-corpo { grid-template-columns: 1fr; gap: 28px; }
  .oltre-foto { width: 100%; max-width: 300px; margin-inline: auto; }
}

/* ---------- Galleria di sagome "Lo studio, da vicino": Percorso 6.4 (dalla V11; prima Chi sono 7.6) ---------- */
.aq-galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.aq-galleria .aq-sagoma { aspect-ratio: 1 / 1; background: var(--tinta-2); }
.aq-galleria .aq-sagoma img { transition: transform 0.9s var(--ease-dolce); }
.aq-galleria figure { margin: 0; }
/* Chi sono, in fondo dopo la galleria (8 ott 2026): due collegamenti per continuare a navigare,
   verso Metodo e Percorso. Niente pulsanti e niente righe (la prima versione aveva linee sottili,
   estranee al sito): due pannelli morbidi affiancati nel linguaggio dei riquadri del sito
   (angoli --aq-pannello, nessun bordo), in salvia tenue e pesca tenue. Titolo della pagina in
   Fraunces con freccia, una riga di descrizione. Al passaggio del mouse il pannello sale di poco
   (come i riquadri colorati della Home) e la freccia si sposta. */
.chi-prosegui { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; } /* V11: margine sopra tolto, la galleria che stava sopra e' passata in Percorso */
.chi-prosegui-link {
  display: block; padding: 28px 30px; text-align: center; text-decoration: none; color: inherit;
  border-radius: var(--aq-pannello); background: var(--color-salvia-tenue);
  transition: transform 0.35s var(--ease-dolce), box-shadow 0.35s var(--ease-dolce);
}
.chi-prosegui-link + .chi-prosegui-link { background: var(--color-pesca-tenue); }
.aq-galleria + .chi-prosegui { margin-top: 64px; } /* V12, 20 ott 2026: Percorso, sotto le foto dello studio */
.chi-prosegui-titolo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.25; color: var(--color-verde-profondo);
}
.chi-prosegui-freccia { flex: 0 0 auto; transition: transform 0.35s var(--ease-dolce); }
.chi-prosegui-desc { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--color-testo-secondario); text-wrap: balance; } /* V11: "studio" restava solo a capo */
.chi-prosegui-link:hover, .chi-prosegui-link:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(31, 81, 48, 0.3); }
.chi-prosegui-link:hover .chi-prosegui-freccia, .chi-prosegui-link:focus-visible .chi-prosegui-freccia { transform: translateX(4px); }
.chi-prosegui-link:focus-visible { outline: 2px solid var(--color-verde); outline-offset: 4px; }
@media (max-width: 640px) {
  .chi-prosegui { grid-template-columns: 1fr; gap: 14px; }
  .chi-prosegui-link { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .chi-prosegui-link, .chi-prosegui-freccia { transition: none; }
  .chi-prosegui-link:hover, .chi-prosegui-link:focus-visible { transform: none; }
}
.aq-galleria figure:hover .aq-sagoma img { transform: scale(1.05); }

@media (max-width: 720px) { .aq-galleria { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; } }

/* ---------- Pannello di chiusura sezione (Percorso 6.4, Chi sono 7.5): frase sul lavaggio d'acquerello ---------- */
.aq-frase-panna { padding: 88px 0; }
/* V10, 6 ott 2026: Metodo 5.3 "cosa vuol dire?", tre paragrafi di Cecilia al posto della frase in Fraunces.
   Stile di .narrativa p (Hanken), un filo piu' grande e scuro per lo sfondo a bolle; grassetti = Hanken 600. */
.ns-cosa-vuol-dire { margin-top: 26px; }
.ns-cosa-vuol-dire p { font-size: 18px; line-height: 1.7; color: var(--color-testo); text-wrap: pretty; }
.aq-parallasse .narrativa p, #per-chi-esteso .faq-corpo p, .aq-due-box .aq-box p { text-wrap: pretty; } /* V10: testi nuovi di Metodo 5.5-5.8 */

/* =====================================================================
   Grafico "Nutrizione sensibile" (metodo.html, sezione 5.4).
   Seconda versione, 30 settembre 2026, su richiesta di Cecilia: colori
   caldi (verde chiaro, pesca, albicocca, presi dall'illustrazione di
   riferimento passata da Fabio) e disposizione nuova: ascolto in alto,
   piacere a sinistra, sapere nutrizionale a destra, al centro la ragazza
   seduta (assets/ns-ragazza-scarpe.webp dal 22 ott 2026, prima ns-ragazza.webp a piedi nudi; ritaglio trasparente), come se tutto
   partisse da lei. Attorno a lei le onde color panna della prima versione,
   che si allargano e sbiadiscono.
   Le tre macchie d'acquerello respirano (keyframe aq-respiro) e si
   sovrappongono in multiply come pigmenti. Quando un'area si restringe si
   ritira verso la ragazza (transform-origin rivolto al centro del
   diagramma) e la sua etichetta resta del tutto fuori dalla bolla.
   Coordinate: il diagramma ha le proporzioni del riferimento, 1024 x 885
   unita'; le percentuali qui sotto vengono da li'. Etichette in unita' del
   contenitore (cqw), cosi' a ogni larghezza stanno nello stesso punto.
   Prima versione (azzurro, viola, verde, persona dentro un cerchio): V8.
   ===================================================================== */

.ns-grafico {
  --ns-ascolto: 150, 176, 118;   /* verde chiaro #96B076 */
  --ns-piacere: 248, 150, 100;   /* pesca #F89664 */
  --ns-sapere: 250, 187, 82;     /* albicocca #FABB52 */
  /* versioni profonde: titolo del pannello ed etichette al passaggio del
     mouse, contrasto sopra 5:1 sul pannello tinto */
  --ns-ascolto-profondo: 62, 88, 41;    /* #3E5829, = --color-salvia-profondo */
  --ns-piacere-profondo: 138, 58, 28;   /* #8A3A1C, = --color-pesca-profondo */
  --ns-sapere-profondo: 110, 71, 8;     /* #6E4708, = --color-albicocca-profondo */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}

/* ---------- Il diagramma ---------- */
.ns-diagramma {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  aspect-ratio: 1024 / 885;
  isolation: isolate;
  container-type: inline-size;
}
.ns-macchia {
  position: absolute;
  width: 57%;
  height: 66%;
  border-radius: var(--blob-1);
  mix-blend-mode: multiply;
  animation: aq-respiro 16s ease-in-out infinite alternate;
  transition: transform 0.8s var(--ease-dolce), opacity 0.8s ease;
}
/* il pigmento si deposita sul bordo, come nell'acquerello vero; il verde
   e' piu' scuro degli altri due, per questo ha meno pigmento */
.ns-macchia.ascolto {
  left: 21.5%; top: 3.2%;
  transform-origin: 50% 81%;
  background: radial-gradient(closest-side, rgba(var(--ns-ascolto), 0.3) 0%, rgba(var(--ns-ascolto), 0.36) 78%, rgba(var(--ns-ascolto), 0.5) 100%);
}
.ns-macchia.piacere {
  left: 2.9%; top: 29.5%;
  transform-origin: 82.5% 41%;
  border-radius: var(--blob-2);
  animation-delay: -5s;
  background: radial-gradient(closest-side, rgba(var(--ns-piacere), 0.44) 0%, rgba(var(--ns-piacere), 0.52) 78%, rgba(var(--ns-piacere), 0.68) 100%);
}
.ns-macchia.sapere {
  left: 40.1%; top: 29.5%;
  transform-origin: 17.5% 41%;
  border-radius: var(--blob-3);
  animation-delay: -9s;
  background: radial-gradient(closest-side, rgba(var(--ns-sapere), 0.46) 0%, rgba(var(--ns-sapere), 0.54) 78%, rgba(var(--ns-sapere), 0.7) 100%);
}
.ns-macchia.is-ridotta { transform: scale(0.62); opacity: 0.7; }

/* ---------- La ragazza al centro, con le onde ---------- */
.ns-ragazza {
  position: absolute;
  z-index: 3;
  left: 50%; top: 24.5%;
  width: 50.5%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Onde concentriche color panna (non verdi: sulle bolle colorate un'onda
   chiara si vede, una scura si perde), bordi sfumati. Nascono dietro la
   ragazza, all'altezza del busto, e si allargano oltre la sua sagoma. */
.ns-tu-onda {
  position: absolute;
  z-index: 2;
  left: 50%; top: 58%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(252, 251, 246, 0.55);
  filter: blur(3px);
  animation: ns-tu-onda 3.9s ease-out infinite;
  pointer-events: none;
}
.ns-tu-onda.b2 { animation-delay: -1.3s; }
.ns-tu-onda.b3 { animation-delay: -2.6s; }
@keyframes ns-tu-onda {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}
/* ---------- Le etichette ---------- */
.ns-etichetta {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(13px, 4.2cqw, 23px);
  line-height: 1.1;
  color: var(--color-verde-profondo);
  text-align: center;
  white-space: nowrap;
  transition: left 0.8s var(--ease-dolce), top 0.8s var(--ease-dolce), opacity 0.8s ease, color 0.3s ease;
  /* Cliccabili (28 set 2026), senza sottolineatura (scelta di Fabio): area
     di tocco allargata col padding, al passaggio del mouse prendono il
     colore profondo della propria area. Doppione dei pulsanti per mouse e
     dita, per questo restano fuori dalla tastiera (aria-hidden). */
  cursor: pointer;
  padding: 8px 10px;
  -webkit-tap-highlight-color: transparent;
}
.ns-etichetta.ascolto { left: 50%; top: 17.5%; }
.ns-etichetta.piacere { left: 17%;  top: 55%; }
.ns-etichetta.sapere  { left: 82.5%; top: 55%; }
/* Area ristretta: la bolla si ritira verso la ragazza e l'etichetta resta
   fuori, sul lato esterno. "Sapere nutrizionale" va su due righe e a
   destra non ci sta: scende in basso a destra (in alto finirebbe nel
   verde dell'ascolto). Posizioni misurate: tra testo e bolla ristretta
   resta almeno un decimo del raggio, nessuna etichetta tocca la ragazza. */
.ns-etichetta.ascolto.is-ridotta { top: 15%; }
.ns-etichetta.piacere.is-ridotta { left: 11%; }
.ns-etichetta.sapere.is-ridotta  { left: 87%; top: 85%; }
.ns-etichetta.is-ridotta { opacity: 0.8; }
.ns-etichetta.ascolto:hover { color: rgb(var(--ns-ascolto-profondo)); }
.ns-etichetta.piacere:hover { color: rgb(var(--ns-piacere-profondo)); }
.ns-etichetta.sapere:hover  { color: rgb(var(--ns-sapere-profondo)); }

/* ---------- Titolo e paragrafo sopra il grafico (1 ottobre 2026) ----------
   Il titolo e' "Le tre dimensioni" (prima era un pulsante); il paragrafo
   e' il testo del vecchio pannello "Le tre dimensioni" riscritto in prosa.
   Le tre parole chiave hanno un segno d'evidenziatore nel colore chiaro
   della propria area, come un tratto d'acquerello sotto la parola. */
.ns-intro { max-width: 68ch; text-wrap: pretty; }
.ns-intro + .ns-intro { margin-top: 16px; } /* V10, 6 ott 2026: testo di Cecilia in due paragrafi */
.ns-parola {
  font-weight: 600;
  color: var(--color-testo);
  padding: 0 0.12em;
  margin: 0 -0.04em;
  border-radius: 0.3em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.ns-parola.ascolto { background: linear-gradient(transparent 52%, var(--color-salvia-chiaro) 52%, var(--color-salvia-chiaro) 92%, transparent 92%); }
.ns-parola.piacere { background: linear-gradient(transparent 52%, var(--color-pesca-chiaro) 52%, var(--color-pesca-chiaro) 92%, transparent 92%); }
.ns-parola.sapere  { background: linear-gradient(transparent 52%, var(--color-albicocca-chiaro) 52%, var(--color-albicocca-chiaro) 92%, transparent 92%); }

/* ---------- Le tre schede ---------- */
.ns-istruzione {
  max-width: 500px;
  margin: 30px auto 12px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-verde-profondo);
}
.ns-istruzione + .ns-schede { margin-top: 0; }
/* Disposte come le tre aree del disegno: ascolto in alto al centro,
   piacere sotto a sinistra, sapere sotto a destra. L'ordine nel codice (e
   da tastiera) resta quello del metodo: ascolto, piacere, sapere. */
.ns-schede {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 500px;
  margin: 32px auto 0;
}
.ns-scheda[data-stato="ascolto"] { grid-column: 2 / span 2; }
.ns-scheda[data-stato="piacere"] { grid-column: 1 / span 2; }
.ns-scheda[data-stato="sapere"]  { grid-column: 3 / span 2; }
.ns-scheda {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-verde-profondo);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.12s ease-out;
}
.ns-scheda:hover { background: #ffffff; box-shadow: 0 12px 28px -18px rgba(31, 81, 48, 0.35); }
.ns-scheda:active { transform: scale(0.975); }
.ns-scheda:focus-visible { outline: 2px solid var(--color-verde-bottone); outline-offset: 3px; }
/* scheda selezionata: pieno nel colore dell'area, testo scuro
   (contrasto 6:1 sul verde chiaro, 6,6:1 sulla pesca, 8,5:1 sull'albicocca) */
.ns-scheda[data-stato="ascolto"][aria-selected="true"] { background: rgb(var(--ns-ascolto)); color: var(--color-testo); box-shadow: 0 10px 24px -16px rgba(var(--ns-ascolto-profondo), 0.7); }
.ns-scheda[data-stato="piacere"][aria-selected="true"] { background: rgb(var(--ns-piacere)); color: var(--color-testo); box-shadow: 0 10px 24px -16px rgba(var(--ns-piacere-profondo), 0.7); }
.ns-scheda[data-stato="sapere"][aria-selected="true"]  { background: rgb(var(--ns-sapere));  color: var(--color-testo); box-shadow: 0 10px 24px -16px rgba(var(--ns-sapere-profondo), 0.7); }
/* campione di colore: lega la scheda alla sua macchia (legenda, non decorazione) */
.ns-campione {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--blob-1);
}
.ns-campione.ascolto { background: rgb(var(--ns-ascolto)); }
.ns-campione.piacere { background: rgb(var(--ns-piacere)); border-radius: var(--blob-2); }
.ns-campione.sapere  { background: rgb(var(--ns-sapere)); border-radius: var(--blob-3); }
/* scheda selezionata: il campione prende il tono profondo della sua area
   (sul pieno dello stesso colore sparirebbe) */
.ns-scheda[aria-selected="true"] .ns-campione.ascolto { background: rgb(var(--ns-ascolto-profondo)); }
.ns-scheda[aria-selected="true"] .ns-campione.piacere { background: rgb(var(--ns-piacere-profondo)); }
.ns-scheda[aria-selected="true"] .ns-campione.sapere  { background: rgb(var(--ns-sapere-profondo)); }

/* ---------- I pannelli ---------- */
.ns-pannello {
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--aq-pannello);
  padding: 36px 40px;
}
.ns-pannello h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  margin-bottom: 16px;
  text-wrap: balance;
}
.ns-pannello p { color: var(--color-testo-secondario); font-size: 16.5px; line-height: 1.7; }
.ns-pannello p + p { margin-top: 14px; }
/* Riferimento di colore dell'area selezionata: tinta leggera del pannello,
   titolo nel colore profondo, pallino-legenda davanti al titolo. */
.ns-pannello.ascolto { background: linear-gradient(rgba(var(--ns-ascolto), 0.16), rgba(var(--ns-ascolto), 0.16)), rgba(255, 255, 255, 0.8); }
.ns-pannello.piacere { background: linear-gradient(rgba(var(--ns-piacere), 0.16), rgba(var(--ns-piacere), 0.16)), rgba(255, 255, 255, 0.8); }
.ns-pannello.sapere  { background: linear-gradient(rgba(var(--ns-sapere), 0.18), rgba(var(--ns-sapere), 0.18)), rgba(255, 255, 255, 0.8); }
.ns-pannello.ascolto h3 { color: rgb(var(--ns-ascolto-profondo)); }
.ns-pannello.piacere h3 { color: rgb(var(--ns-piacere-profondo)); }
.ns-pannello.sapere h3  { color: rgb(var(--ns-sapere-profondo)); }
.ns-pannello h3 .ns-campione { display: inline-block; vertical-align: 0.05em; margin-right: 10px; }

/* Con JavaScript: su desktop i pannelli stanno impilati nella stessa cella,
   cosi' la colonna ha sempre l'altezza del piu' lungo e la pagina non salta. */
.js .ns-pannelli { display: grid; }
.js .ns-pannello { grid-area: 1 / 1; align-self: start; }
.js .ns-pannello:not(.is-attivo) { visibility: hidden; }
.js .ns-pannello.is-attivo { animation: ns-compare 0.5s var(--ease-dolce) both; }
@keyframes ns-compare {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 880px) {
  .ns-grafico { grid-template-columns: 1fr; gap: 28px; }
  /* Su telefono e tablet (1 ott 2026, richiesta di Fabio): disegno,
     "Seleziona un'area", riquadro di testo, pulsanti. La colonna del
     diagramma si "scioglie" (display: contents) e i suoi figli vengono
     riordinati insieme ai pannelli. Il riquadro e' alto quanto il suo
     testo; toccando un pulsante la pagina risale all'inizio del testo
     nuovo (main.js, portaAlTesto). */
  .ns-colonna-diagramma { display: contents; }
  .ns-diagramma { order: 1; }
  .ns-istruzione { order: 2; margin: -10px auto 0; }
  .ns-pannelli { order: 3; }
  /* pulsanti lunghi quanto il riquadro, uno sotto l'altro (1 ott 2026):
     ascolto, piacere, sapere; niente piu' disposizione a triangolo */
  .ns-schede { order: 4; width: 100%; max-width: none; margin-top: 0; grid-template-columns: 1fr; }
  .ns-scheda[data-stato] { grid-column: 1; }
  .js .ns-pannelli { display: block; }
  .js .ns-pannello:not(.is-attivo) { display: none; }
}
@media (max-width: 520px) {
  /* su telefono il diagramma prende meta' dei margini laterali: la ragazza
     e' piu' grande e le etichette restano in proporzione come su desktop */
  .ns-diagramma { width: calc(100% + 24px); max-width: none; margin-inline: -12px; }
  .ns-schede { gap: 8px; }
  .ns-scheda { gap: 12px; min-height: 54px; padding: 12px 18px; font-size: 15px; }
  .ns-campione { width: 14px; height: 14px; }
  .ns-pannello { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-macchia { animation: none; transition: none; }
  .ns-etichetta, .ns-scheda { transition: none; }
  .js .ns-pannello.is-attivo { animation: none; }
  .ns-tu-onda { animation: none !important; opacity: 0.22; transform: translate(-50%, -50%) scale(1.35); }
}

/* =====================================================================
   4.3 "Le tre fasi del mio metodo" (Home), versione snella, 23 settembre
   2026. Sostituisce i tre box grandi con numero e il box di calibrazione
   "Da dove si parte...". Tre box piccoli, colorati come le tre dimensioni
   del grafico di Metodo (stessi colori, stesso testo del pannello base
   "Le tre dimensioni"). Immagine: vedi sotto (cambiata il 30 set 2026).
   ===================================================================== */

/* 30 set 2026: nuova immagine (fondometodohome-caldo.jpg, 1504x1166, la
   ragazza in poltrona tra i cerchi verde chiaro, pesca e albicocca; ritaglio
   destro di "Immagini Demo per stile di disegno v3/Ragazza-metodo-home.jpg",
   col fondo portato al panna del sito). Non e' piu' uno sfondo "cover": la
   ragazza finirebbe dietro i riquadri. Su desktop e' ancorata in basso;
   bordi sinistro e basso sfumati nel panna.
   1 ott 2026 (richiesta di Fabio): l'immagine non si rimpicciolisce piu'
   stringendo la finestra. E' sempre larga 900px; la ragazza (dal 27,5% al
   58,6% della larghezza dell'immagine, misurato sui contorni) resta sempre
   24px a destra dei riquadri, mai sotto; se manca spazio si taglia la parte
   destra dell'immagine (le colline), mai la ragazza. Quando lo spazio c'e',
   l'immagine arriva fino al bordo destro della finestra. */
#come-lavoro {
  background: var(--color-fondo);
  isolation: isolate;
  overflow: hidden;
}
#come-lavoro::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  /* left = il piu' grande tra:
     - riquadri + 24px - 27,5% di 900: i riquadri finiscono a 644px dal bordo
       se la finestra e' sotto 1180px, a 50vw + 54px sopra -> 420px o 50vw - 170px;
     - 100vw - 900px: l'immagine tocca il bordo destro della finestra.
     La ragazza resta intera fino al passaggio al layout da tablet (1079px). */
  left: max(420px, 50vw - 170px, 100vw - 900px);
  width: 900px;
  aspect-ratio: 1504 / 1166;
  background: url("assets/fondometodohome-caldo.jpg") right bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 70px), linear-gradient(to top, transparent 0, #000 50px);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 70px), linear-gradient(to top, transparent 0, #000 50px);
          mask-composite: intersect;
  pointer-events: none;
}

.aq-fasi-mini {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 620px;
  gap: 14px;
  margin-top: 36px;
}
.aq-fase-mini {
  padding: 24px 26px;
  border-radius: var(--aq-pannello);
  transition: transform 0.4s var(--ease-dolce), box-shadow 0.4s ease;
}
.aq-fase-mini:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(31, 81, 48, 0.3); }
.aq-fase-mini h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.aq-fase-mini p { color: var(--color-testo); font-size: 16px; line-height: 1.6; margin: 0; }

/* I tre riquadri nei colori delle tre dimensioni, come nel grafico di Metodo
   (ascolto verde chiaro, piacere pesca, sapere albicocca): versione chiara
   con testo scuro, titolo nel tono profondo (contrasto >= 5:1). */
.aq-fase-mini.ascolto { background: var(--color-salvia-chiaro); }
.aq-fase-mini.piacere { background: var(--color-pesca-chiaro); }
.aq-fase-mini.sapere  { background: var(--color-albicocca-chiaro); }
.aq-fase-mini.ascolto h3 { color: var(--color-salvia-profondo); }
.aq-fase-mini.piacere h3 { color: var(--color-pesca-profondo); }
.aq-fase-mini.sapere h3  { color: var(--color-albicocca-profondo); }

/* Sotto 1080px non c'e' spazio a destra dei riquadri: l'immagine (ritaglio
   sulla ragazza, fondometodohome-caldo-mobile.jpg 1040x1026) sta sopra i
   riquadri, agganciata a loro con un ::before, 4px sopra il primo riquadro
   (1 ott 2026: prima i riquadri coprivano gli ultimi 24px e tagliavano le
   scarpe, che finiscono al 3,3% dal fondo; il bordo basso sfuma in quel
   3%). Il margine sopra i riquadri e' calcolato sull'altezza
   dell'immagine, cosi' testo, ragazza e riquadri non si rincorrono. Bordo
   alto e lati sfumano nel panna (su tablet i lati del ritaglio si vedono). */
@media (max-width: 1079px) {
  #come-lavoro { --foto-l: min(100vw, 600px); }
  #come-lavoro::before { content: none; }
  .aq-fasi-mini { position: relative; margin-top: calc(var(--foto-l) * 0.9865 - 12px); }
  .aq-fasi-mini::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: calc(100% + 4px);
    width: var(--foto-l);
    aspect-ratio: 1040 / 1026;
    transform: translateX(-50%);
    background: url("assets/fondometodohome-caldo-mobile.jpg") center bottom / contain no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px), linear-gradient(to top, transparent 0, #000 3%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent 0, #000 70px), linear-gradient(to top, transparent 0, #000 3%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-composite: intersect;
    pointer-events: none;
  }
}
@media (max-width: 520px) {
  #come-lavoro { padding-top: 40px; }
  .aq-fasi-mini { max-width: none; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .aq-fase-mini { transition: none; }
}

/* ---------- Home 4.4 "Cosa ti porta qui?": box di sintesi (23 set 2026) ----------
   V11, 12 ott 2026 (Cecilia: "piu' sfumato"): non piu' verde scuro ma una nota chiara,
   stesso trattamento di .ps-arrivo-box in Percorso (salvia tenue, testo scuro, peso 500). */
.chiusura-situazioni {
  max-width: 760px; margin: 56px auto 0; padding: 32px 44px;
  background: var(--color-salvia-tenue); border-radius: var(--aq-pannello);
}
.chiusura-situazioni p { font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--color-testo); text-align: center; }
@media (max-width: 520px) { .chiusura-situazioni { margin-top: 44px; padding: 26px 24px; } .chiusura-situazioni p { font-size: 17px; } }


/* =====================================================================
   Chi sono, il racconto in tre capitoli (V10, 6 ott 2026, proposta A).
   1: colonna di lettura senza foto, chiusa dalla domanda in Fraunces
   («Sto sbagliando qualcosa?», ponte verso il capitolo 2).
   2: testo a sinistra, foto in montagna a destra, ferma (sticky) mentre
   si legge il testo lungo. 3: foto da bambina a sinistra, testo, firma e
   "Vai al metodo" a destra (V11: il box verde e' diventato la fascia
   .chi-testimonianza dopo la formazione). Su telefono la foto va prima del testo.
   ===================================================================== */
.chi-capitolo-1 { padding-bottom: 88px; }
.chi-colonna { max-width: 720px; }
.chi-colonna p, .chi-capitolo-testo p { font-size: 17.5px; line-height: 1.75; color: var(--color-testo-secondario); text-wrap: pretty; }
.chi-colonna p + p, .chi-capitolo-testo p + p { margin-top: 18px; }
.chi-domanda {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.2;
  color: var(--color-verde-profondo); text-align: center; text-wrap: balance;
  margin: 56px auto 0; padding: 0 24px;
}
.chi-capitolo { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }
.chi-capitolo.inverso { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
.chi-capitolo-foto { position: sticky; top: 112px; }
.chi-capitolo.inverso .chi-capitolo-foto { position: static; }
.chi-capitolo-foto .aq-sagoma { aspect-ratio: 4 / 5; max-width: 440px; margin-inline: auto; }
/* Frase chiave evidenziata con lo stesso tratto d'evidenziatore delle parole di Metodo 5.4
   (.ns-parola), qui in albicocca chiaro (il salvia rendeva il testo poco leggibile); firma piu' grande che in Home (richiesta di Fabio, 6 ott 2026). */
.evidenzia {
  font-weight: 600; color: var(--color-testo);
  padding: 0 0.12em; margin: 0 -0.04em; border-radius: 0.3em;
  background: linear-gradient(transparent 52%, var(--color-albicocca-chiaro) 52%, var(--color-albicocca-chiaro) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.chi-capitolo-testo .aq-firma { width: 210px; margin-top: 30px; }
/* V12, 20 ott 2026: Chi sono, terzo capitolo: firma a sinistra e "Vai al metodo" a destra sulla stessa riga
   (prima una sotto l'altro, circa 165px; provata anche l'inversa, Fabio ha scelto firma a sinistra) */
.chi-firma-riga { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.chi-firma-riga .aq-firma { margin: 0; }
.chi-firma-riga .btn.cta-interna { margin-top: 0; margin-left: auto; } /* se la riga va a capo, il pulsante resta a destra */
@media (max-width: 480px) { .chi-firma-riga { gap: 12px; } .chi-capitolo-testo .chi-firma-riga .aq-firma { width: 140px; } }
@media (max-width: 900px) {
  .chi-capitolo-1 { padding-bottom: 64px; }
  .chi-capitolo, .chi-capitolo.inverso { grid-template-columns: 1fr; gap: 28px; }
  .chi-capitolo .chi-capitolo-foto { position: static; order: -1; }
  .chi-capitolo-foto .aq-sagoma { max-width: 340px; }
  .chi-domanda { margin-top: 44px; }
}

/* =====================================================================
   Chi sono 7.4 bis, la testimonianza (V11, 12 ott 2026). Prima era il box
   verde scuro in fondo al capitolo 3: ora una fascia leggera tra "La mia
   formazione" e "Oltre lo studio". Ferma, senza parallasse: "Oltre lo
   studio", subito sotto, ce l'ha gia'.
   Fondo (prova chiesta da Fabio il 12 ott, al posto delle nuvole calde):
   le colline ad acquerello (testimonianza-sfondo-colline.jpg, 1672x941,
   originale foto da sito/sfondo-colline-acquerello.webp). In alto l'immagine
   e' carta vuota, quasi il panna del sito: il testo sta li', le colline
   salgono da sotto. Lo strato sfuma in alto e in basso nel fondo, cosi' non
   ci sono bordi netti con le sezioni vicine. Niente velo: contrasto minimo
   del paragrafo sul pixel piu' scuro dell'immagine 5,9.
   ===================================================================== */
.chi-testimonianza {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 104px 0 210px;
  text-align: center;
  background: var(--color-fondo);
}
.chi-testimonianza::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("assets/testimonianza-sfondo-colline.jpg") center bottom / cover no-repeat;
  opacity: 0.5; /* 12 ott 2026, Fabio: fondo piu' trasparente (1 = pieno) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 86%, transparent 100%);
}
.chi-testimonianza-frase { margin: 0; }
.chi-testimonianza-frase p {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.2;
  color: var(--color-verde-profondo); text-wrap: balance;
}
.chi-testimonianza-testo {
  max-width: 60ch; margin: 22px auto 0;
  font-size: 17.5px; line-height: 1.75; color: var(--color-testo); text-wrap: balance;
}
@media (max-width: 760px) {
  .chi-testimonianza { padding: 80px 0 170px; }
  .chi-testimonianza::before { background-position: 62% bottom; }
}

/* =====================================================================
   Percorso 6.2 "Come si comincia": sentiero verticale (24-25 set 2026).
   Le tre fasi a zig-zag ai lati di un sentiero SVG che si disegna allo
   scroll (JS in fondo a main.js). Su mobile il sentiero corre a sinistra.
   6.3 "In pratica": tre riquadri .aq-info-box.
   ===================================================================== */
.ps-fasi { position: relative; max-width: 1000px; margin: 56px auto 0; }
.ps-traccia { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ps-traccia path { fill: none; stroke-linecap: round; }
.ps-traccia-base { stroke: var(--color-pesca); stroke-opacity: .45; stroke-width: 2; stroke-dasharray: 2 8; }
.ps-traccia-viva { stroke: var(--color-pesca); stroke-width: 3; }

.ps-fase, .ps-sosta { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: start; }
.ps-fase + .ps-fase, .ps-fase + .ps-sosta, .ps-sosta + .ps-fase { margin-top: 80px; }

.ps-n {
  grid-column: 2; grid-row: 1; justify-self: center;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.4rem; line-height: 1;
  color: var(--color-verde-profondo); background: var(--color-fondo);
  border: 2px solid var(--color-pesca);
  box-shadow: 0 0 0 10px var(--color-fondo);
  transition: background .5s ease, color .5s ease, border-color .5s ease, transform .6s var(--ease-dolce);
}
.ps-n.is-raggiunta { background: var(--color-verde-profondo); border-color: var(--color-verde-profondo); color: #ffffff; transform: scale(1.08); }

.ps-testo { grid-row: 1; }
.ps-destra .ps-testo { grid-column: 3; }
.ps-sinistra .ps-testo { grid-column: 1; }
.ps-testo h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.2;
  color: var(--color-verde-profondo); margin: 10px 0 16px;
}
.ps-testo p { color: var(--color-testo-secondario); font-size: 17px; line-height: 1.7; }
.ps-testo p + p { margin-top: 14px; }

.ps-foto { grid-column: 3; grid-row: 1; align-self: center; margin: 0; }
.ps-foto .aq-sagoma { max-width: 300px; margin: 0 auto; aspect-ratio: 4 / 5; } /* V12: foto vera (Cecilia alla scrivania, 20 ott 2026) */

.ps-sosta-segno { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--color-pesca); }
.ps-sosta-testo {
  grid-column: 1 / -1; grid-row: 1; justify-self: center; position: relative;
  max-width: 560px; background: var(--tinta-2); border-radius: var(--aq-pannello);
  padding: 26px 40px; text-align: center; text-wrap: balance;
  font-family: var(--font-serif); font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.35;
  color: var(--color-verde-profondo);
}

/* V10, 6 ott 2026: testi nuovi di Cecilia. La sosta ha ora due righe (frase in Fraunces +
   nota in Hanken); il sentiero finisce su un "arrivo" con il riquadro sulla frequenza. */
.ps-testo p, .ps-arrivo-box p, .aq-intestazione-sotto { text-wrap: pretty; }
.ps-sosta-testo { max-width: 620px; }
.ps-sosta-testo .ps-sosta-nota {
  margin-top: 10px; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55;
  color: var(--color-testo-secondario); text-wrap: balance;
}
.ps-fase + .ps-arrivo { margin-top: 80px; }
.ps-arrivo { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; row-gap: 22px; }
.ps-arrivo-segno {
  grid-column: 2; grid-row: 1; justify-self: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--color-pesca);
  box-shadow: 0 0 0 8px var(--color-fondo);
  transition: background .5s ease, transform .6s var(--ease-dolce);
}
.ps-arrivo-segno.is-raggiunta { background: var(--color-verde-profondo); transform: scale(1.15); }
.ps-arrivo-box {
  grid-column: 1 / -1; grid-row: 2; justify-self: center; position: relative;
  max-width: 760px; background: var(--color-salvia-tenue); border-radius: var(--aq-pannello);
  padding: 36px 44px;
}
.ps-arrivo-box p { color: var(--color-testo); font-size: 17px; line-height: 1.7; }
.ps-arrivo-box p + p { margin-top: 14px; }
@media (max-width: 860px) {
  .ps-fase + .ps-arrivo { margin-top: 48px; }
  .ps-arrivo { grid-template-columns: 48px 1fr; column-gap: 18px; row-gap: 18px; }
  .ps-arrivo-segno { grid-column: 1; grid-row: 1; }
  .ps-arrivo-box { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding: 26px 24px; }
  .ps-arrivo-box p { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .ps-arrivo-segno { transition: none; } }

.ps-pratica { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.ps-pratica h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.4rem; line-height: 1.25; color: var(--color-verde-profondo); margin-bottom: 18px; }
.ps-pratica .aq-info-box dt { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--color-testo-secondario); margin: 0 0 2px; }
.ps-pratica .aq-info-box dd { margin-bottom: 14px; }

@media (max-width: 860px) {
  .ps-fasi { margin-top: 40px; }
  .ps-fase, .ps-sosta { grid-template-columns: 48px 1fr; column-gap: 18px; }
  .ps-fase + .ps-fase, .ps-fase + .ps-sosta, .ps-sosta + .ps-fase { margin-top: 48px; }
  .ps-n { grid-column: 1; width: 48px; height: 48px; font-size: 1.2rem; box-shadow: 0 0 0 6px var(--color-fondo); }
  .ps-destra .ps-testo, .ps-sinistra .ps-testo { grid-column: 2; }
  .ps-testo h3 { margin-top: 8px; }
  .ps-foto { display: none; }
  .ps-sosta-segno { grid-column: 1; }
  .ps-sosta-testo { grid-column: 2; justify-self: stretch; text-align: left; padding: 22px 24px; }
  .ps-pratica { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-n { transition: none; }
}

/* =====================================================================
   Sfondo in parallasse (Metodo 5.5 "Da dove nasce questo approccio",
   28 set 2026). Lo strato .parallasse-fondo e' piu' alto della sezione
   (170%) e main.js lo sposta piu' lentamente del testo. Velo panna piu'
   forte al centro, dove sta il testo, piu' leggero ai bordi per lasciar
   vedere le nuvole. Immagini: fondonuvole-desktop.jpg 2000x1250 e
   fondonuvole-mobile.jpg 1200x1600 (nuvole azzurre; dal 30 set al 2 ott 2026
   c'era la versione ricolorata in pesca e albicocca, ora tenuta da parte).
   ===================================================================== */
.aq-parallasse { position: relative; overflow: hidden; isolation: isolate; }
.parallasse-fondo {
  position: absolute;
  left: 0; right: 0;
  /* margine sopra e sotto = ampiezza del movimento in main.js (+/-35%) */
  top: -35%;
  height: 170%;
  z-index: -2;
  /* 2 ott 2026, scelta di Fabio dopo una prova: di nuovo le nuvole azzurre
     originali. Il cielo caldo (fondonuvole-caldo-desktop.jpg / -mobile.jpg)
     non e' nella V11: resta nella V10 (Fabio ha chiesto di non cancellarlo). */
  background: url("assets/fondonuvole-desktop.jpg") center / cover no-repeat;
  will-change: transform;
}
.aq-parallasse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 55% 75% at 50% 50%,
    rgba(252, 251, 246, 0.82) 0%,
    rgba(252, 251, 246, 0.78) 60%,
    rgba(252, 251, 246, 0.35) 100%);
}
@media (max-width: 760px) {
  .parallasse-fondo { background-image: url("assets/fondonuvole-mobile.jpg"); }
  /* su mobile il testo occupa tutta la larghezza: velo uniforme */
  .aq-parallasse::before { background: rgba(252, 251, 246, 0.78); }
}

/* =====================================================================
   V9 (30 settembre 2026): una cartella per pagina e pagina Contatti.
   - .contatti-breve: la fascia verde che chiude ogni pagina. Dal 2 ott 2026
     solo titolo, frase e pulsante WhatsApp (telefono, email e sedi sono nella
     pagina Contatti; telefono e link "Contatti" anche nel footer).
   - .ct-*: la pagina /contact/ (blocco in fondo al file).
   - .pagina-404-link: i pulsanti della pagina "non trovata".
   ===================================================================== */
/* titolo verde senza parole sole a capo ("primo" su telefono) */
.contatti h2.section-title { text-wrap: balance; }
.contatti-breve { padding: 56px 0; }
/* testo a sinistra, pulsante a destra, centrati in altezza */
.contatti-breve-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: center; }
.contatti-breve .section-title { margin-bottom: 10px; max-width: none; text-wrap: balance; } /* V12: "Se quello che hai letto ti risuona…" su una riga quando c'e' spazio */
.contatti-breve .lede { margin-bottom: 0; }
.contatti-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
@media (max-width: 880px) {
  .contatti-breve { padding: 48px 0; }
  .contatti-breve-grid { grid-template-columns: 1fr; }
}


.pagina-404 { padding: 72px 0 96px; }
.pagina-404-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* =====================================================================
   Pagina Contatti (/contact/), ristudiata il 30 settembre 2026.
   Niente banda verde scura (quella chiude le altre pagine): tutto su panna,
   in riquadri come "Dove ricevo". Ordine: tre modi per scrivermi
   (WhatsApp in evidenza) / email preparata con mailto / sedi con mappa e
   indicazioni. Il modulo NON invia dal server: compone l'email e apre la
   posta di chi scrive (main.js, blocco "Pagina Contatti").
   Unico momento animato: la spunta di "La tua email e' pronta".
   ===================================================================== */
.ct-email { padding: 40px 0 72px; }
.ct-dove { padding: 72px 0 96px; }

.ct-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ct-dove .ct-griglia { margin-top: 32px; }

.ct-box {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--aq-pannello);
  padding: 30px 32px 28px;
  box-shadow: 0 1px 2px rgba(31, 81, 48, 0.04), 0 12px 28px -18px rgba(31, 81, 48, 0.22);
}
.ct-box h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--color-verde-profondo);
  margin-bottom: 10px;
}
.ct-tipo { font-size: 14px; font-weight: 600; color: var(--color-testo-secondario); margin-bottom: 12px; }
.ct-indirizzo { font-size: 16px; line-height: 1.6; color: var(--color-testo); }

.ct-azioni { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ct-box .btn { padding: 12px 22px; }

/* azione secondaria scritta (Copia, Apri la mappa, Come arrivare) */
.ct-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font: 600 15px/1.3 var(--font-sans);
  color: var(--color-verde-profondo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.ct-link:hover { text-decoration-color: transparent; }
.ct-link:focus-visible,
.ct-box .btn:focus-visible,
.ct-pannello .btn:focus-visible { outline: 2px solid var(--color-verde-bottone); outline-offset: 3px; }

/* ---------- Telefono e WhatsApp (1 ott 2026) ----------
   Un solo riquadro al posto dei tre (WhatsApp, Telefono, Email), bianco come
   quello dell'email e sulla stessa griglia: a sinistra titolo, numero (a
   dimensione normale, si seleziona tutto con un clic per copiarlo) e frase;
   a destra i due pulsanti affiancati, larghi quanto i campi del modulo sotto
   e centrati in altezza. Spaziature ridotte: il riquadro resta basso. */
.ct-pannello.ct-telefono { padding-top: 36px; padding-bottom: 36px; align-items: center; }
.ct-telefono + .solo-lettori + .ct-pannello { margin-top: 20px; }
.ct-telefono .section-title { margin-bottom: 8px; }
.ct-pannello-intro .ct-numero {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-testo);
  margin-bottom: 2px;
  -webkit-user-select: all;
          user-select: all;
}
.ct-azioni-tel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-azioni-tel .btn { border-width: 2px; } /* stesso bordo: i due pulsanti alti uguali */

/* ---------- Scrivimi un'email ---------- */
.ct-pannello {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  background: rgba(255, 255, 255, 0.86);
  border-radius: var(--aq-pannello);
  padding: 52px 56px;
  box-shadow: 0 1px 2px rgba(31, 81, 48, 0.04), 0 18px 40px -24px rgba(31, 81, 48, 0.24);
}
.ct-pannello [hidden] { display: none !important; }
.ct-pannello-intro .section-title { margin-bottom: 14px; }
/* V12, 20 ott 2026: indirizzo email per esteso sotto "Scrivimi un'email", stesso stile del numero di telefono */
.ct-pannello-intro .ct-email-indirizzo { margin: -6px 0 12px; overflow-wrap: anywhere; }
.ct-email-indirizzo a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-bordo); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ct-email-indirizzo a:hover { text-decoration-color: currentColor; }
.ct-pannello-intro p { font-size: 17px; line-height: 1.65; color: var(--color-testo-secondario); max-width: 36ch; text-wrap: pretty; }
/* V13, 22 ott 2026: secondo paragrafo di Cecilia (niente referti nel primo messaggio), link alla privacy come in "Collaborazioni e progetti" */
.ct-pannello-intro .ct-nota-dati { margin-top: 14px; }
.ct-nota-dati a { color: var(--color-verde-profondo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.ct-form { display: flex; flex-direction: column; gap: 20px; }
.ct-campo label { display: block; font-size: 15px; font-weight: 600; color: var(--color-testo); margin-bottom: 7px; }
.ct-facoltativo { font-weight: 400; color: var(--color-testo-secondario); }
.ct-campo input,
.ct-campo textarea {
  display: block;
  width: 100%;
  font: 16px/1.5 var(--font-sans);
  color: var(--color-testo);
  background: var(--color-fondo);
  border: 1px solid var(--color-bordo);
  border-radius: 18px;
  padding: 13px 16px;
  caret-color: var(--color-verde-bottone);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.ct-campo textarea { min-height: 164px; resize: vertical; }
.ct-campo input::placeholder,
.ct-campo textarea::placeholder { color: #6B7061; opacity: 1; }
.ct-campo input:hover,
.ct-campo textarea:hover { border-color: #CFCABA; }
.ct-campo input:focus,
.ct-campo textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--color-verde-bottone);
  box-shadow: 0 0 0 3px rgba(63, 143, 78, 0.18);
}
/* campo mancante: bordo albicocca (l'evidenza del brand), testo in albicocca profondo leggibile */
.ct-campo.errore input,
.ct-campo.errore textarea { border-color: var(--color-agrume); box-shadow: 0 0 0 3px rgba(244, 160, 74, 0.25); }
.ct-errore { margin-top: 7px; font-size: 14px; font-weight: 500; color: var(--color-albicocca-profondo); }
.ct-invia { align-self: flex-start; margin-top: 4px; }

/* "La tua email e' pronta" */
.ct-pronta { animation: ct-entra 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ct-pronta-segno { display: block; width: 48px; height: 48px; margin-bottom: 18px; }
.ct-pronta-segno circle { fill: var(--tinta-2); stroke: var(--color-pesca); stroke-width: 1.5; }
.ct-pronta-segno path {
  fill: none;
  stroke: var(--color-verde-bottone);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  animation: ct-spunta 560ms 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ct-pronta h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--color-verde-profondo); margin-bottom: 10px; outline: none; }
.ct-pronta p { font-size: 16.5px; line-height: 1.6; color: var(--color-testo); max-width: 46ch; text-wrap: pretty; }
.ct-pronta .ct-pronta-aiuto { margin-top: 28px; font-weight: 600; }
.ct-pronta .ct-azioni { margin-top: 0; padding-top: 12px; }
.ct-pronta .ct-pronta-nota { margin-top: 14px; font-size: 14.5px; color: var(--color-testo-secondario); overflow-wrap: anywhere; }
.ct-indietro { margin-top: 24px; }
@keyframes ct-entra { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ct-spunta { to { stroke-dashoffset: 0; } }

@media (max-width: 960px) {
  .ct-griglia { grid-template-columns: 1fr; max-width: 560px; }
  .ct-pannello { grid-template-columns: 1fr; gap: 26px; padding: 40px 32px; }
  .ct-pannello-intro p { max-width: none; }
  .ct-pannello.ct-telefono { padding-top: 30px; padding-bottom: 30px; gap: 20px; }
}
@media (max-width: 760px) {
  .ct-email { padding: 28px 0 48px; }
  .ct-dove { padding: 48px 0 72px; }
}
@media (max-width: 520px) {
  .ct-box { padding: 26px 24px 24px; }
  .ct-pannello { padding: 30px 22px; }
  .ct-pannello.ct-telefono { padding-top: 26px; padding-bottom: 26px; gap: 18px; }
  .ct-invia { align-self: stretch; }
  /* pulsanti affiancati anche su telefono (meno altezza), a tutta larghezza
     come "Prepara l'email" */
  .ct-azioni-tel { gap: 10px; }
  .ct-azioni-tel .btn { padding: 14px 10px; }
  .ct-telefono + .solo-lettori + .ct-pannello { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-pronta { animation: none; }
  .ct-pronta-segno path { animation: none; stroke-dashoffset: 0; }
}