@charset "UTF-8";
/* ==========================================================================
   Davide Gonzo MCB — sistema grafico "Referto"
   Carta verde chiara, gabbia editoriale a filetti, un solo accento (verde),
   fotografia in duotono verde. Foglio unico condiviso da tutte le pagine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 116px;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. TOKEN
   -------------------------------------------------------------------------- */
:root {
  /* — colore —
     Toni del verde. #6B9F7F è il verde storico del cliente: torna come campitura
     piena. I valori scuri sono derivati nello stesso tono, perché i verdi chiari
     non arrivano a 4.5:1 e servono solo come superficie.
     Rapporti di contrasto verificati, in commento. */

  --fondo:            #F1F3EC;   /* pagina — bianco appena virato al verde */
  --salvia:           #8A9880;   /* 2.73:1 — filetti, decorativi */
  --oliva:            #7F8B74;   /* 3.21:1 — bordo dei controlli, WCAG 1.4.11 */
  --verde:            #6B9F7F;   /* il verde del cliente — fascia a campitura piena */
  --verde-2:          #8FBEA3;   /* variante chiara — hover */

  /* miscele */
  --fondo-2:          #DDE1D7;   /* salvia 24% + fondo — sezioni alternate */
  --filetto:          #C3CABB;   /* salvia 45% + fondo — righe leggere */
  --accento-tenue:    #D6E4D8;   /* verde-2 28% + fondo — stato selezionato */
  --duotono:          #353A31;   /* oliva scurito — base delle ombre nelle foto */

  /* ruoli */
  --carta:            var(--fondo);
  --carta-alta:       #FFFFFF;
  --filetto-marcato:  var(--salvia);
  --bordo-ui:         var(--oliva);
  --chiaro:           var(--fondo);

  /* derivati per il testo */
  --inchiostro:       #1E2620;   /* 13.87:1 su fondo */
  --inchiostro-80:    #414A3F;   /*  8.25:1 / 6.95:1 su sezione alternata */
  --inchiostro-60:    #565E52;   /*  6.02:1 / 5.07:1 */
  --accento:          #2F6145;   /*  6.44:1 su fondo, 7.20:1 con bianco sopra */
  --accento-cupo:     #27553C;   /*  7.66:1 */
  --accento-vivo:     #27553C;   /*  6.48:1 anche su sezione alternata */
  --wa:               #25D366;

  /* fondo della sezione corrente: serve al ritaglio della cifra e all'anello di focus */
  --fondo-sezione: var(--carta);

  /* — tipografia — */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --t-d1:    clamp(2.125rem, 1.0373rem + 4.6409vw, 4.75rem);    /* 34 → 76 */
  --t-d2:    clamp(1.75rem,  1.232rem  + 2.2099vw, 3rem);       /* 28 → 48 */
  --t-d3:    clamp(1.3125rem,1.1571rem + 0.663vw,  1.6875rem);  /* 21 → 27 */
  --t-d4:    clamp(1.125rem, 1.0473rem + 0.3315vw, 1.3125rem);  /* 18 → 21 */
  --t-lead:  clamp(1.125rem, 1.0214rem + 0.442vw,  1.375rem);   /* 18 → 22 */
  --t-corpo: clamp(1.0625rem,1.0366rem + 0.1105vw, 1.125rem);   /* 17 → 18 */
  --t-piccolo:clamp(0.9375rem,0.9116rem + 0.1105vw, 1rem);      /* 15 → 16 */
  --t-micro: clamp(0.6875rem,0.6616rem + 0.1105vw, 0.75rem);    /* 11 → 12 */

  --t-cifra-sezione: clamp(2.5rem,  2.0338rem + 1.989vw,  3.625rem); /* 40 → 58 */
  --t-cifra-voce:    clamp(1.875rem,1.5124rem + 1.547vw,  2.75rem);  /* 30 → 44 */
  --t-tel:           clamp(1.875rem,1.3052rem + 2.4309vw, 3.25rem);  /* 30 → 52 */

  /* — gabbia e ritmo — */
  --gabbia:  1160px;
  --margine: clamp(1.25rem, 0.5249rem + 3.0939vw, 3rem);        /* 20 → 48 */
  --misura:  66ch;

  --sp-sezione: clamp(4rem, 2.3425rem + 7.0718vw, 8rem);        /* 64 → 128 */
  --sp-blocco:  clamp(2rem, 1.1713rem + 3.5359vw, 4rem);        /* 32 → 64 */
  --sp-riga:    clamp(1.5rem, 1.0856rem + 1.768vw, 2.5rem);     /* 24 → 40 */

  /* — movimento — */
  --durata-1: 120ms;
  --durata-2: 180ms;
  --durata-3: 280ms;
  --curva: cubic-bezier(.22, .61, .36, 1);

  --raggio: 2px;
  --ombra-flottante: 0 2px 12px rgba(30, 38, 32, .16);
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
/* La sillabazione serve dove la misura è stretta: sotto i 900px le parole
   lunghe dell'italiano ("decontratturante") sfondano la colonna. */
@media (max-width: 899px) {
  body { hyphens: auto; }
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
  hyphens: none;
}
p, li { text-wrap: pretty; }

h1 {
  font-size: var(--t-d1);
  line-height: 1.04;
  letter-spacing: -.018em;
  font-variation-settings: "opsz" 40, "wght" 500;
}
@media (min-width: 900px) {
  h1 { font-variation-settings: "opsz" 72, "wght" 420; }
}
h1 em { font-style: italic; font-weight: 400; }

h2 { font-size: var(--t-d2); line-height: 1.10; letter-spacing: -.014em; }
h3 { font-size: var(--t-d3); line-height: 1.22; letter-spacing: -.008em; font-weight: 500; }
h4 { font-size: var(--t-d4); line-height: 1.35; font-weight: 500; }

strong { font-weight: 600; }

/* link inline nel corpo del testo */
.testo a,
a.link {
  color: var(--accento-vivo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--filetto-marcato);
  transition: text-decoration-color var(--durata-2) var(--curva);
}
.testo a:hover,
a.link:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   4. FOCUS — doppio anello: resta visibile anche sui fondi pieni
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--fondo-sezione),
    0 0 0 5px var(--accento-vivo);
  border-radius: var(--raggio);
}
.su-scuro :focus-visible,
.prenota :focus-visible,
.colophon :focus-visible {
  box-shadow:
    0 0 0 2px var(--fondo-sezione),
    0 0 0 5px var(--chiaro);
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--inchiostro);
  color: var(--carta);
  padding: 14px 20px;
  font-size: var(--t-piccolo);
}
.salta:focus { left: 0; }

/* --------------------------------------------------------------------------
   5. GABBIA
   -------------------------------------------------------------------------- */
.pagina {
  display: grid;
  grid-template-columns:
    [vivo-start] minmax(var(--margine), 1fr)
    [gabbia-start] minmax(0, var(--gabbia))
    [gabbia-end] minmax(var(--margine), 1fr)
    [vivo-end];
}
.pagina > * { grid-column: gabbia; }
.pagina > .al-vivo { grid-column: vivo; }

.sezione { padding-block: var(--sp-sezione); }
.sezione--stretta { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.sezione--fondo { background: var(--fondo-2); --fondo-sezione: var(--fondo-2); }
.sezione--carta  { background: var(--carta);       --fondo-sezione: var(--carta); }

.griglia12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.75rem);
}
.testo > * + * { margin-top: 1em; }
.testo { max-width: min(var(--misura), 100%); }

/* --------------------------------------------------------------------------
   6. MAIUSCOLETTE E OCCHIELLI
   -------------------------------------------------------------------------- */
.mai {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--inchiostro-60);
  font-feature-settings: "tnum" 1;
}
.mai--chiaro { color: var(--chiaro); }
.prenota .mai--chiaro { color: var(--inchiostro); }
.mai--accento { color: var(--accento); }

.occhiello {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.occhiello::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--inchiostro-60);
  flex: none;
}

/* --------------------------------------------------------------------------
   7. FIRMA — il filetto interrotto dalla cifra di sezione
   -------------------------------------------------------------------------- */
.apertura {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-top: 1px solid var(--inchiostro);
  margin-bottom: var(--sp-blocco);
}
.apertura .cifra {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-cifra-sezione);
  line-height: 1;
  color: var(--accento);
  background: var(--fondo-sezione);
  padding-inline-end: 14px;
  transform: translateY(-52%);
}
.apertura .eti {
  background: var(--fondo-sezione);
  padding-inline: 0 14px;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   8. BOTTONI
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  font-family: var(--sans);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  cursor: pointer;
  white-space: nowrap;
  hyphens: none;
  transition: background-color 160ms var(--curva), border-color 160ms var(--curva), color 160ms var(--curva);
}
.btn--inchiostro { background: var(--accento); color: var(--carta); border-color: var(--accento); }
.btn--inchiostro:hover { background: var(--accento-cupo); border-color: var(--accento-cupo); }

.btn--linea { background: transparent; color: var(--inchiostro); border-color: var(--bordo-ui); }
.btn--linea:hover { border-color: var(--inchiostro); background: var(--fondo); }

.btn--chiaro { background: var(--fondo); color: var(--accento); border-color: var(--fondo); }
.btn--chiaro:hover { background: var(--verde-2); color: var(--inchiostro); border-color: var(--verde-2); }

.btn--testo {
  background: transparent;
  color: var(--inchiostro);
  padding-inline: 4px;
  min-height: 44px;
  font-weight: 500;
}
.btn--testo:hover { color: var(--accento); }

.btn--largo { width: 100%; }
.btn .wa { width: 20px; height: 20px; flex: none; color: var(--wa); }

/* --------------------------------------------------------------------------
   9. TESTATA
   -------------------------------------------------------------------------- */
.testata {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 243, 236, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filetto-marcato);
}
.testata__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 100px;
}
.marchio {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--inchiostro);
}
/* Logo: il file SVG fornito, senza ridisegni né ritocchi ai tratti.
   Il suo wordmark diventa leggibile dai ~70px: la testata è dimensionata lì. */
.marchio__logo { width: 84px; height: 84px; }
@media (max-width: 599px) { .marchio__logo { width: 66px; height: 66px; } }

/* Nel colophon c'è spazio per la versione grande, dove il wordmark si legge. */
.colophon__logo { width: 132px; height: 132px; margin-bottom: 18px; filter: invert(1) sepia(.1); opacity: .92; }
@media (max-width: 899px) { .colophon__logo { width: 108px; height: 108px; } }

.nav-principale { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.nav-principale a.voce-nav {
  text-decoration: none;
  font-size: var(--t-piccolo);
  font-weight: 500;
  white-space: nowrap;
  hyphens: none;
  color: var(--inchiostro-80);
  padding-block: 10px;
  border-bottom: 1px solid transparent;
  transition: color var(--durata-2) var(--curva), border-color var(--durata-2) var(--curva);
}
.nav-principale a.voce-nav:hover { color: var(--inchiostro); border-bottom-color: var(--accento); }
.testata__azioni { display: flex; align-items: center; gap: 10px; }

@media (max-width: 979px) {
  .nav-principale .voce-nav { display: none; }
}
@media (max-width: 599px) {
  .testata__int { min-height: 80px; }
  .testata__azioni .btn--testo { display: none; }
}

/* --------------------------------------------------------------------------
   10. APERTURA DI PAGINA (hero tipografico — nessuna immagine: LCP su testo)
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 1.6rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }

/* Apertura a due colonne: testo a sinistra, ritratto scontornato a destra.
   Il ritratto è allineato in basso, così la sua base e la fine del testo
   chiudono sulla stessa linea. */
.hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
/* Su due colonne il titolo ha meno misura: lo riduco, altrimenti spezza in
   quattro righe e lascia una parola orfana in fondo. */
@media (min-width: 900px) {
  .hero__griglia h1 {
    font-size: clamp(2.75rem, 1.3125rem + 2.5vw, 3.75rem);
    letter-spacing: -.02em;
  }
  .hero .hero__sommario { max-width: 44ch; }
}
@media (max-width: 899px) {
  .hero__griglia { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
}

.hero__testo { min-width: 0; }

.hero__ritratto {
  position: relative;
  margin: 0;
  align-self: end;
}
/* Lastra di fondo dietro il soggetto: gli dà un campo su cui posarsi,
   e la testa che ne esce sopra è il dettaglio che rende viva la composizione. */
.hero__ritratto::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 17%;
  background: var(--fondo);
}
.hero__ritratto img {
  position: relative;
  width: 100%;
  height: auto;
  filter: saturate(.96) contrast(1.02);
}
.hero__firma {
  position: relative;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--filetto-marcato);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inchiostro-60);
  line-height: 1.5;
}
@media (max-width: 899px) {
  .hero__ritratto { max-width: 260px; }
  .hero__ritratto::before { top: 20%; }
}

.hero__sommario {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--inchiostro-80);
  max-width: 52ch;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.hero h1 { max-width: 20ch; }
.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 40px);
}
.hero__note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--filetto);
}
.hero__note li { display: flex; align-items: baseline; gap: 8px; }
.hero__note .n {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accento);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   11. LASTRA — trattamento fotografico in cianotipia
   -------------------------------------------------------------------------- */
.lastra {
  position: relative;
  isolation: isolate;
  background: var(--duotono);
  overflow: hidden;
}
.lastra img,
.lastra picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lastra img {
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: screen;
  transition: filter var(--durata-3) var(--curva);
}
.lastra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fondo);
  mix-blend-mode: multiply;
  opacity: .12;
  pointer-events: none;
  transition: opacity var(--durata-3) var(--curva);
}
.lastra:hover img { filter: grayscale(1) contrast(1.10); }
.lastra:hover::after { opacity: .06; background: var(--verde-2); }

@supports not (mix-blend-mode: screen) {
  .lastra img {
    mix-blend-mode: normal;
    filter: grayscale(1) sepia(1) hue-rotate(58deg) saturate(1.5) contrast(1.05) brightness(.95);
  }
  .lastra::after { display: none; }
}

.lastra--banda {
  aspect-ratio: 21 / 9;
  margin-block: 0;
}
@media (max-width: 719px) { .lastra--banda { aspect-ratio: 4 / 5; } }


/* Didascalia sotto la banda: fuori dall'immagine, così il contrasto è sempre garantito */
.banda-didascalia {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--inchiostro-60);
  max-width: 58ch;
  margin-top: 14px;
  hyphens: none;
}
.banda-didascalia strong {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inchiostro);
  margin-right: 10px;
}

.lastra__didascalia {
  position: absolute;
  left: var(--margine);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-piccolo);
  color: var(--fondo);
  max-width: 46ch;
  padding: 6px 12px 6px 0;
  text-shadow: 0 1px 10px rgba(53, 58, 49, .9);
}

figure.doc { margin: 0; }
figure.doc .lastra { aspect-ratio: 1 / 1; }
figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-60);
  margin-top: 10px;
  line-height: 1.4;
  hyphens: none;
}
.doc-griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 719px) { .doc-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419px) { .doc-griglia { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12. RAGGIO D'AZIONE
   -------------------------------------------------------------------------- */
.raggio__frase {
  font-family: var(--serif);
  font-size: var(--t-d3);
  line-height: 1.32;
  max-width: 50ch;
  hyphens: none;
}
.comuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin-top: clamp(20px, 2.5vw, 28px);
}
.comuni li { display: flex; align-items: center; }
.comuni li::after {
  content: "";
  width: 1px;
  height: 11px;
  background: var(--filetto-marcato);
  margin-inline: 14px;
}
.comuni li:last-child::after { display: none; }
.comuni a { text-decoration: none; color: var(--accento); border-bottom: 1px solid var(--filetto-marcato); padding-bottom: 2px; transition: border-color var(--durata-2) var(--curva); }
.comuni a:hover { border-bottom-color: var(--accento); }

/* --------------------------------------------------------------------------
   13. VOCE — riga a filetto (sintomi, comuni vicini, elenchi navigabili)
   -------------------------------------------------------------------------- */
.elenco-voci {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--filetto-marcato);
}
@media (max-width: 719px) { .elenco-voci { grid-template-columns: 1fr; } }

.voce {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filetto-marcato);
  text-decoration: none;
  color: var(--inchiostro);
  transition: background-color 200ms var(--curva), padding-inline var(--durata-2) var(--curva);
}
.voce:hover { background: var(--fondo); box-shadow: -14px 0 0 var(--fondo), 14px 0 0 var(--fondo); }
.voce__t { font-weight: 500; font-size: var(--t-corpo); }
.voce__s { display: block; font-size: var(--t-piccolo); color: var(--inchiostro-60); margin-top: 2px; }
.voce__ch { width: 18px; height: 18px; color: var(--accento-vivo); flex: none; transition: transform var(--durata-2) var(--curva); }
.voce:hover .voce__ch { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   14. TRATTAMENTI — righe editoriali, non schede
   -------------------------------------------------------------------------- */
.trattamento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: 20px;
  padding-block: var(--sp-riga);
  border-top: 1px solid var(--filetto-marcato);
}
.trattamento:last-of-type { border-bottom: 1px solid var(--filetto-marcato); }
.trattamento__cifra {
  grid-column: 1 / 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-cifra-voce);
  line-height: 1;
  color: var(--accento);
}
.trattamento__testa { grid-column: 2 / 7; }
.trattamento__testa h3 { margin-bottom: 12px; }
.trattamento__testa p { color: var(--inchiostro-80); max-width: 42ch; }
.trattamento__testa .btn { margin-top: 20px; }
.trattamento__lista { grid-column: 8 / 13; }
.trattamento__lista li {
  padding: 9px 0;
  border-bottom: 1px solid var(--filetto);
  font-size: var(--t-piccolo);
  color: var(--inchiostro-80);
}
.trattamento__lista li:last-child { border-bottom: 0; }

@media (max-width: 899px) {
  .trattamento { grid-template-columns: 1fr; row-gap: 16px; }
  .trattamento__cifra, .trattamento__testa, .trattamento__lista { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   15. METODO
   -------------------------------------------------------------------------- */
.metodo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.5rem); }
@media (max-width: 899px) { .metodo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .metodo { grid-template-columns: 1fr; } }
.tempo { border-top: 1px solid var(--inchiostro); padding-top: 18px; }
.tempo__cifra {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-cifra-voce);
  line-height: 1;
  color: var(--accento);
  display: block;
  margin-bottom: 10px;
}
.tempo h3 { margin-bottom: 8px; }
.tempo p { font-size: var(--t-piccolo); color: var(--inchiostro-80); max-width: 34ch; }

/* --------------------------------------------------------------------------
   16. PROFESSIONISTA
   -------------------------------------------------------------------------- */
.profilo { row-gap: var(--sp-blocco); align-items: start; }
.profilo__foto { grid-column: 1 / 4; }
.profilo__testo { grid-column: 5 / 12; }
@media (max-width: 899px) {
  .profilo__foto { grid-column: 1 / -1; max-width: 260px; }
  .profilo__testo { grid-column: 1 / -1; }
}
.ritratto {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fondo-2);
}
.ritratto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) sepia(.10) contrast(1.04);
}
.profilo__foto .mai { display: block; margin-top: 12px; line-height: 1.5; }
.profilo__testo h2 { margin-bottom: 20px; }
.profilo__testo p { color: var(--inchiostro-80); }
.profilo__testo .testo > p:first-child { color: var(--inchiostro); font-size: var(--t-lead); line-height: 1.5; }

.credenziali {
  margin-top: var(--sp-blocco);
  background: var(--fondo-2);
  padding: clamp(20px, 2.4vw, 28px);
}
.credenziali .mai { margin-bottom: 14px; }
/* Niente flex qui: con display:flex ogni <strong> o <a> diventa un elemento
   flessibile a sé e il gap apre buchi in mezzo alla frase. Trattino in assoluto. */
.credenziali li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid rgba(30, 38, 32, .12);
  font-size: var(--t-piccolo);
  line-height: 1.6;
}
.credenziali li:last-child { border-bottom: 0; }
.credenziali li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--accento);
}

/* --------------------------------------------------------------------------
   17. DOVE OPERO — schede comune
   -------------------------------------------------------------------------- */
.zone {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--filetto-marcato);
  border: 1px solid var(--filetto-marcato);
}
@media (max-width: 899px) { .zone { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .zone { grid-template-columns: 1fr; } }

/* Le due sedi fisiche: due sole celle, più grandi e con l'accento pieno.
   Devono leggersi come una cosa diversa dai comuni raggiunti a domicilio. */
.zone--sedi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 719px) { .zone--sedi { grid-template-columns: 1fr; } }
.zone--sedi .zona { min-height: 176px; }
.zone--sedi .zona h3 { font-size: var(--t-d3); }
.zone--sedi .zona__n {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sotto-titolo {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inchiostro-60);
  margin-bottom: 16px;
}

.zona {
  background: var(--fondo-sezione);
  padding: clamp(20px, 2.2vw, 28px);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 148px;
  transition: background-color var(--durata-2) var(--curva);
}
.zona:hover { background: var(--accento-tenue); }
.zona__n { font-family: var(--serif); font-style: italic; color: var(--accento-cupo); font-size: 1rem; line-height: 1; }
.zona h3 { font-size: var(--t-d4); }
.zona p { font-size: var(--t-piccolo); color: var(--inchiostro-60); }
.zona__vai { margin-top: auto; display: flex; align-items: center; gap: 7px; color: var(--accento-vivo); font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.zona__vai svg { width: 14px; height: 14px; transition: transform var(--durata-2) var(--curva); }
.zona:hover .zona__vai svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--inchiostro); }
.faq details { border-bottom: 1px solid var(--filetto-marcato); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 14px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-d4);
  line-height: 1.3;
  hyphens: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--accento), var(--accento)) center/14px 1px no-repeat,
    linear-gradient(var(--accento), var(--accento)) center/1px 14px no-repeat;
  transition: transform var(--durata-2) var(--curva);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { color: var(--accento); }
.faq__c { padding: 0 0 22px; max-width: var(--misura); color: var(--inchiostro-80); }
.faq__c > * + * { margin-top: .8em; }

/* --------------------------------------------------------------------------
   19. BLOCCO PRENOTAZIONE
   -------------------------------------------------------------------------- */
.prenota {
  background: var(--verde);
  --fondo-sezione: var(--verde);
  color: var(--inchiostro);
  padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
  text-align: center;
}
.prenota__int { max-width: 46ch; margin-inline: auto; }
.prenota h2 { color: var(--inchiostro); margin: 18px 0 20px; }
.prenota p { color: var(--inchiostro); }  /* 5.09:1 su verde */
.prenota__tel {
  display: inline-block;
  font-family: var(--serif);
  font-size: var(--t-tel);
  line-height: 1.1;
  color: var(--inchiostro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
  text-decoration-color: rgba(30, 38, 32, .35);
  margin-block: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
  transition: text-decoration-color var(--durata-2) var(--curva);
}
.prenota__tel:hover { text-decoration-color: rgba(30, 38, 32, .9); }
.prenota__azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --------------------------------------------------------------------------
   20. COLOPHON
   -------------------------------------------------------------------------- */
.colophon {
  background: var(--inchiostro);
  --fondo-sezione: var(--inchiostro);
  color: var(--fondo);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
}
.colophon__griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
@media (max-width: 899px) { .colophon__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .colophon__griglia { grid-template-columns: 1fr; } }
.colophon h2, .colophon h3 { font-family: var(--sans); }
.colophon .mai { margin-bottom: 14px; }
.colophon li { padding: 5px 0; font-size: var(--t-piccolo); }
.colophon a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--durata-2) var(--curva); }
.colophon a:hover { border-bottom-color: var(--chiaro); }
.social-riga { padding-top: 12px !important; }
.colophon .social a { width: 38px; height: 38px; }

.colophon__legale {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 22px;
  border-top: 1px solid rgba(241, 243, 236, .22);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
}
.colophon__link-legali { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.colophon__link-legali li { padding: 0; }
.colophon__link-legali a { font-size: var(--t-piccolo); }

.colophon__nota {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 243, 236, .22);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  align-items: baseline;
  justify-content: space-between;
}
.colophon__disclaimer {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-piccolo);
  color: var(--chiaro);
  max-width: 60ch;
  hyphens: none;
}

/* --------------------------------------------------------------------------
   21. BRICIOLE
   -------------------------------------------------------------------------- */
.briciole { padding-block: 18px 0; }
.briciole ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.briciole li { display: flex; align-items: center; gap: 8px; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--inchiostro-60); }
.briciole li + li::before { content: "/"; color: var(--filetto-marcato); font-weight: 400; }
.briciole a { text-decoration: none; }
.briciole a:hover { color: var(--accento); }
.briciole [aria-current] { color: var(--accento); }

/* --------------------------------------------------------------------------
   22. BARRA AZIONI MOBILE
   -------------------------------------------------------------------------- */
.barra-azioni { display: none; }
@media (max-width: 767px) {
  .barra-azioni {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--carta);
    border-top: 1px solid var(--filetto-marcato);
    box-shadow: var(--ombra-flottante);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barra-azioni a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 56px;
    text-decoration: none;
    font-size: var(--t-piccolo);
    font-weight: 600;
    color: var(--inchiostro);
  }
  .barra-azioni a + a { border-left: 1px solid var(--filetto-marcato); }
  .barra-azioni svg { width: 19px; height: 19px; flex: none; }
  .barra-azioni .wa { color: var(--wa); }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   23. MODULO DI PRENOTAZIONE
   -------------------------------------------------------------------------- */
.modulo { max-width: 680px; }
.passo { padding-block: var(--sp-riga); border-top: 1px solid var(--filetto-marcato); }
.passo:first-of-type { border-top: 1px solid var(--inchiostro); }
.passo__testa { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.passo__cifra {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-cifra-voce);
  line-height: 1;
  color: var(--accento);
}
.passo h2 { font-size: var(--t-d3); }

.campo { display: block; }
.campo > .mai { display: block; margin-bottom: 8px; }
.campo input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: var(--t-corpo);
  color: var(--inchiostro);
  background: var(--carta-alta);
  border: 1px solid var(--bordo-ui);
  border-radius: var(--raggio);
  transition: border-color var(--durata-2) var(--curva);
}
.campo input::placeholder { color: var(--inchiostro-60); opacity: .8; }
.campo input:hover { border-color: var(--inchiostro-60); }
.campo input:focus { border-color: var(--accento); }
.campo input[aria-invalid="true"] { border-color: #A3312B; }

.scelte { display: grid; gap: 10px; }
.scelte--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 559px) { .scelte--due { grid-template-columns: 1fr; } }

.scelta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 13px 16px;
  text-align: left;
  font-family: var(--sans);
  font-size: var(--t-piccolo);
  font-weight: 500;
  color: var(--inchiostro);
  background: var(--carta-alta);
  border: 1px solid var(--bordo-ui);
  border-radius: var(--raggio);
  cursor: pointer;
  transition: background-color var(--durata-2) var(--curva), border-color var(--durata-2) var(--curva);
}
.scelta:hover { background: var(--fondo); border-color: var(--inchiostro-60); }
.scelta__sub { display: block; font-weight: 400; font-size: var(--t-micro); letter-spacing: .02em; text-transform: none; color: var(--inchiostro-60); margin-top: 3px; line-height: 1.4; }
.scelta__segno { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid var(--bordo-ui); }
.scelta[aria-pressed="true"] {
  background: var(--accento-tenue);
  border-color: var(--accento);
  color: var(--accento);
}
.scelta[aria-pressed="true"] .scelta__sub { color: var(--accento); opacity: .85; }
.scelta[aria-pressed="true"] .scelta__segno {
  border-color: var(--accento);
  background:
    radial-gradient(circle at center, var(--accento) 0 4px, transparent 4px);
}

.comune-campo { margin-top: 12px; }
.comune-campo[hidden] { display: none; }

.anteprima {
  background: var(--fondo);
  border: 1px solid var(--filetto-marcato);
  border-radius: var(--raggio);
  padding: 18px 20px;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-80);
  white-space: pre-line;
  line-height: 1.7;
  min-height: 132px;
  transition: border-color var(--durata-3) var(--curva);
}
.anteprima--pronta { border-color: var(--accento); background: var(--accento-tenue); color: var(--inchiostro); }

.invio { margin-top: 18px; }
.invio .btn { width: 100%; min-height: 56px; font-size: var(--t-corpo); }
.btn[aria-disabled="true"] {
  background: var(--fondo-2);
  border-color: var(--fondo-2);
  color: var(--inchiostro-60);
  cursor: not-allowed;
}
.btn[aria-disabled="true"] .wa { color: var(--inchiostro-60); }
.suggerimento { margin-top: 12px; font-size: var(--t-piccolo); color: var(--inchiostro-60); }

/* --------------------------------------------------------------------------
   24. PAGINA DI ERRORE
   -------------------------------------------------------------------------- */
.errore { padding-block: clamp(4rem, 2rem + 8vw, 9rem); }
.errore__cifra {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(5rem, 3rem + 10vw, 10rem);
  line-height: .9;
  color: var(--accento);
  display: block;
  margin-bottom: 12px;
}
.errore h1 { margin-bottom: 18px; }
.errore .testo { margin-bottom: var(--sp-blocco); }

/* --------------------------------------------------------------------------
   25. SOCIAL
   -------------------------------------------------------------------------- */
.social { display: flex; gap: 10px; margin-top: 6px; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(241, 243, 236, .34);
  border-radius: var(--raggio);
  color: var(--fondo);
  transition: background-color var(--durata-2) var(--curva), border-color var(--durata-2) var(--curva);
}
.social a:hover { background: rgba(241, 243, 236, .14); border-color: var(--chiaro); }
.social svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   26. BANNER CONSENSO COOKIE
   -------------------------------------------------------------------------- */
.consenso {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--carta);
  --fondo-sezione: var(--carta);
  border-top: 1px solid var(--inchiostro);
  box-shadow: 0 -4px 24px rgba(30, 38, 32, .14);
  padding: clamp(18px, 2.4vw, 26px) var(--margine) calc(clamp(18px, 2.4vw, 26px) + env(safe-area-inset-bottom));
}
.consenso[hidden] { display: none; }
.consenso__int {
  max-width: var(--gabbia);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}
.consenso__testo { max-width: 62ch; }
.consenso__testo p { font-size: var(--t-piccolo); color: var(--inchiostro-80); }
.consenso__testo .mai { display: block; margin-bottom: 8px; }
.consenso__azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.consenso__azioni .btn { min-height: 46px; padding-inline: 22px; }
@media (max-width: 767px) {
  .consenso { bottom: calc(56px + env(safe-area-inset-bottom)); padding-bottom: clamp(18px, 2.4vw, 26px); }
  .consenso__int { grid-template-columns: 1fr; }
  .consenso__azioni .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   27. PAGINE LEGALI
   -------------------------------------------------------------------------- */
.legale { max-width: 72ch; }
.legale h2 {
  font-size: var(--t-d3);
  margin-top: var(--sp-blocco);
  padding-top: 22px;
  border-top: 1px solid var(--filetto-marcato);
}
.legale h3 { font-size: var(--t-d4); margin-top: 28px; }
.legale p, .legale li { color: var(--inchiostro-80); }
.legale > * + * { margin-top: 1em; }
.legale ul { margin-left: 0; }
.legale ul li {
  position: relative;
  padding-left: 22px;
  padding-block: 5px;
}
.legale ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accento);
}
.legale table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-piccolo);
  margin-top: 18px;
}
.legale th, .legale td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--filetto);
}
.legale th {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inchiostro-60);
  border-bottom-color: var(--filetto-marcato);
}
.tabella-scroll { overflow-x: auto; }


/* --------------------------------------------------------------------------
   28. UTILITÀ
   -------------------------------------------------------------------------- */
.mt-blocco { margin-top: var(--sp-blocco); }
.mt-riga { margin-top: var(--sp-riga); }
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}