/* =================================================================
   Dr. Guido Gabriele · Home
   Foglio di stile unico, organizzato per sezioni:
   00 Font · 01 Temi per area · 02 Base · 03 Utility e componenti
   04 Header · 05 Hero · 06 Posizionamento · 07 Aree cliniche
   08 Il dottore · 09 Internazionali · 10 Percorso · 11 Contatto
   12 Footer · 13 Responsive · 14 Animazioni (GSAP) e micro-interazioni
   15 Stampa · 16 Pagina Il Dottore · 17 Pagine d'area clinica
   18 Varianti scure e pagina Chirurgia Linfatica · 19 Pagina in inglese
   20 Scena a tutta larghezza
   (16-20 con il loro responsive in fondo alla sezione)

   Punti di interruzione (gli stessi in animazioni.js):
   1320 menu compatto · 1240 menu a tendina · 980 colonne singole
   720 logo solo monogramma · 640 mobile
   ================================================================= */


/* -----------------------------------------------------------------
   00 · FONT (Miriam Libre in locale, WOFF2 con sottoinsieme latino:
   Bold per titoli, Regular per testi)
   ----------------------------------------------------------------- */
@font-face {
  font-family: "Miriam Libre";
  src: url("../font/MiriamLibre-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Miriam Libre";
  src: url("../font/MiriamLibre-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------------------------------------
   01 · TEMI PER AREA
   Ogni area ha colore principale, sfumatura e logo che cambiano
   insieme. Un elemento con data-area="..." ridefinisce le variabili
   per sé e per i suoi figli.

   --colore-principale      colore del brand dell'area
   --testo-su-principale    colore dei testi/pulsanti SU quel colore
                            (lilla e verde sono chiari → blu scuro;
                             blu scuro → bianco). Contrasto AA.
   --tinta                  versione molto chiara per fondi di sezione
   --sfumatura              sfondo ufficiale della famiglia (materiali/sfondi)
   --sfumatura-card         sfumatura satura per le card piene d'area
   --velo-card              velo sulla sfumatura della card (contrasto)
   --logo / --logo-bianco   logo dell'area a colori / bianco
   --logo-compatto          solo monogramma (header stretto, punti)
   --card-fondo, --card-testo, --card-logo
                            come si presenta la card dell'area
   --btn-area-fondo, --btn-area-testo
                            pulsante dentro la card dell'area
   ----------------------------------------------------------------- */
:root {
  /* Palette brand (brand book v2) */
  --lilla: #a6a8c7;
  --verde: #3db5ab;
  --blu: #1c263b;
  --bianco: #ffffff;

  /* Neutri di servizio */
  --testo: var(--blu);
  --testo-tenue: #4a5269;            /* blu scuro attenuato: 7,8:1 su bianco */
  --testo-su-blu-tenue: #c9cbe0;     /* lilla chiaro: 9,4:1 sul blu */
  --bordo: #dfe0ea;                  /* bordi decorativi */
  --bordo-campo: var(--testo-tenue); /* bordi dei campi: 7,8:1 (WCAG 1.4.11) */
  --errore: #9b1c1c;                 /* messaggi di errore: 7,3:1 su bianco */
  --fondo-pagina: #ffffff;
  --giallo-da-confermare: #fff3b0;
  --placeholder: #d9dae1;

  /* Trasparenze del blu e del bianco */
  --blu-08: rgba(28, 38, 59, 0.08);
  --blu-12: rgba(28, 38, 59, 0.12);
  --blu-16: rgba(28, 38, 59, 0.16);
  --blu-25: rgba(28, 38, 59, 0.25);
  --bianco-16: rgba(255, 255, 255, 0.16);
  --bianco-60: rgba(255, 255, 255, 0.6);

  /* Misure: tre raggi (card e foto · controlli e interni · pillola) */
  --contenitore: 1440px;
  --margine: 24px;
  --raggio-l: 24px;
  --raggio-s: 12px;
  --raggio-pillola: 999px;
  --spazio-sezione: clamp(80px, 11vw, 144px);

  /* Hero: stesso spazio sopra (sotto l'header fisso) e sotto (dopo i
     riquadri). --fondo-header = dove finisce l'header fisso, misurato
     per ogni punto di interruzione (vedi sezione 13). */
  --fondo-header: 110px;
  --spazio-hero: clamp(40px, 5vw, 56px);

  /* Movimento: una sola curva per tutta la pagina */
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);

  --font: "Miriam Libre", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-area="generale"] {
  --colore-principale: var(--lilla);
  --testo-su-principale: var(--blu);
  --tinta: #f1f1f7;
  --sfumatura: url("../img/sfondi/sfondo-lilla-3.webp");
  --logo: url("../logo/logo-it-estesa.svg");
  --logo-bianco: url("../logo/logo-it-estesa-bianco.svg");
  --logo-compatto: url("../logo/monogramma-generale.svg");
  --logo-proporzione: 1217 / 278;
  --card-fondo: var(--tinta);
  --card-testo: var(--blu);
  --card-logo: var(--logo);
  --btn-area-fondo: var(--lilla);
  --btn-area-testo: var(--blu);
}

[data-area="maxillo"] {
  --colore-principale: var(--verde);
  --testo-su-principale: var(--blu);
  --tinta: #e9f6f4;
  --sfumatura: url("../img/sfondi/sfondo-verde-maxillo-5.webp");
  --sfumatura-card: url("../img/sfondi/sfondo-verde-maxillo-1.webp");
  --velo-card: none;
  --logo: url("../logo/logo-it-estesa-maxillo-facciale.svg?v=2");
  --logo-bianco: url("../logo/logo-it-estesa-maxillo-facciale-bianco.svg?v=2");
  --logo-compatto: url("../logo/monogramma-maxillo-facciale.svg");
  --logo-proporzione: 1217 / 278;
  --card-fondo: var(--tinta);
  --card-testo: var(--blu);
  --card-logo: var(--logo);
  --btn-area-fondo: var(--verde);
  --btn-area-testo: var(--blu);
}

[data-area="linfatica"] {
  --colore-principale: var(--blu);
  --testo-su-principale: var(--bianco);
  --tinta: #e8e9ee;
  --sfumatura: url("../img/sfondi/sfondo-blu-linfatica-2.webp");
  --sfumatura-card: url("../img/sfondi/sfondo-blu-linfatica-1.webp");
  /* velo blu sull'angolo chiaro della sfumatura: testo bianco sempre AA */
  --velo-card: linear-gradient(30deg, rgba(28, 38, 59, 0.75) 0%, rgba(28, 38, 59, 0.2) 60%, rgba(28, 38, 59, 0) 100%);
  --logo: url("../logo/logo-it-estesa-linfedema-e-lipedema.svg?v=2");
  --logo-bianco: url("../logo/logo-it-estesa-linfedema-e-lipedema-bianco.svg?v=2");
  --logo-compatto: url("../logo/monogramma-linfedema-e-lipedema.svg");
  --logo-proporzione: 1217 / 278;
  --card-fondo: var(--blu);
  --card-testo: var(--bianco);
  --card-logo: var(--logo-bianco);
  /* sulla card blu il pulsante è bianco per staccarsi dal fondo */
  --btn-area-fondo: var(--bianco);
  --btn-area-testo: var(--blu);
  /* dettaglio delle icone: lilla come nel logo dell'area (blu su blu non si vedrebbe) */
  --accento-area: var(--lilla);
}


/* -----------------------------------------------------------------
   02 · BASE
   ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-padding-top: 120px; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--testo);
  background: var(--fondo-pagina);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
h3 { font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.2; }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }

::selection { background: var(--lilla); color: var(--blu); }

/* Focus da tastiera: anello blu + alone bianco, visibile su qualsiasi
   fondo (anche sul blu della card ritratto e della card linfatica) */
:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--bianco);
}
/* l'elemento col focus non finisce mai sotto l'header fisso */
a, button, input, select, textarea { scroll-margin-top: 120px; }


/* -----------------------------------------------------------------
   03 · UTILITY E COMPONENTI
   ----------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + var(--margine) * 2);
  margin-inline: auto;
  padding-inline: var(--margine);
}

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

.salta-al-contenuto {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  background: var(--blu);
  color: var(--bianco);
  padding: 10px 16px;
  border-radius: var(--raggio-s);
}
.salta-al-contenuto:focus { top: 16px; }

/* Dati da confermare con Guido: restano visibili, evidenziati */
.da-confermare {
  background: var(--giallo-da-confermare);
  color: var(--blu);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}

/* Marchi (logo dell'header, delle card riquadro e delle card area):
   immagine di sfondo del tema, sempre in proporzione */
.logo,
.riquadro__logo,
.area__logo {
  display: block;
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Icone line-art (sprite in index.html): tratto 1.5 come il monogramma,
   linee in blu scuro e un dettaglio ("accento") nel colore dell'area.
   Il colore passa nel <use> tramite la variabile --accento-icona. */
.sprite-icone { position: absolute; width: 0; height: 0; overflow: hidden; }
.icona {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--blu);
  --accento-icona: var(--accento-area, var(--colore-principale));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.accento { stroke: var(--accento-icona); }
.icona--piccola { width: 18px; height: 18px; }
.icona--passo,
.icona--sede { width: 22px; height: 22px; }

/* Freccia: icona SVG unica (stesso tratto delle spunte) */
.freccia {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Contenitori delle foto: l'immagine ne copre sempre tutta l'area,
   a qualsiasi larghezza. */
.hero__foto,
.riquadro--foto,
.internazionali__foto,
.percorso__foto { position: relative; }

/* Foto: proporzioni originali, ritaglio con object-fit (mai deformata).
   Il punto di fuoco del ritaglio si regola per foto con --fuoco
   (es. style="--fuoco: 50% 22%") per tenere sempre il volto in quadro.
   In WordPress: --fuoco dal punto focale dell'immagine (es. campo ACF). */
.foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 50%);
  border-radius: inherit;
  background: var(--placeholder);
}

/* Etichetta a pillola sopra i titoli di sezione */
.pillola {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1;
  padding: 8px 14px;
  border-radius: var(--raggio-pillola);
  background: var(--tinta);
  color: var(--blu);
  border: 1px solid var(--bordo);
}
.pillola--su-colore {
  background: var(--bianco-60);
  border-color: var(--blu-12);
}

/* Intestazione di sezione: centrata (Wanantara) o a sinistra (Percorso) */
.intestazione {
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 20px;
}
.intestazione--sinistra {
  margin: 0 0 32px;
  text-align: left;
  justify-items: start;
}
.intestazione__testo {
  font-size: 1.125rem;
  color: var(--testo-tenue);
  max-width: 600px;
}

/* Pulsanti */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--raggio-pillola);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.25s var(--ease), background-color 0.25s var(--ease), translate 0.2s var(--ease);
}
.btn:active { translate: 0 1px; }
/* colore principale del tema + testo adatto (blu su lilla/verde, bianco su blu) */
.btn--principale {
  background: var(--colore-principale);
  color: var(--testo-su-principale);
}
/* CTA di conversione: sempre blu pieno con testo bianco */
.btn--scuro {
  background: var(--blu);
  color: var(--bianco);
}
.btn--contorno {
  background: transparent;
  color: var(--blu);
  border-color: var(--blu);
}
.btn--principale:hover,
.btn--scuro:hover { filter: brightness(1.15); }
.btn--contorno:hover { background: var(--bianco-60); }

.gruppo-pulsanti { display: flex; flex-wrap: wrap; gap: 12px; }
/* etichette lunghe: se vanno a capo, righe bilanciate e centrate */
.btn { text-wrap: balance; text-align: center; }
.senza-a-capo { white-space: nowrap; }

.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: var(--colore-principale);
  transition: text-decoration-color 0.25s var(--ease);
}
.link-freccia:hover { text-decoration-color: currentColor; }

/* Lista con spunte (elementi verificabili) */
.lista-spunte { display: grid; border-top: 1px solid var(--bordo); }
.lista-spunte li {
  position: relative;
  padding: 16px 0 16px 36px;
  border-bottom: 1px solid var(--bordo);
}
/* spunta: cerchio + segno di spunta in SVG inline (animazioni.js le disegna) */
.spunta {
  position: absolute;
  left: 0; top: 19px;
  width: 20px; height: 20px;
  overflow: visible;
  fill: none;
  stroke: var(--blu);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spunta path { stroke-width: 1.6; }
.lista-spunte__testo { display: block; }

/* Sezioni: stesso respiro sopra e sotto (144 px su desktop, 80 px su
   mobile). Quando due sezioni consecutive hanno lo stesso fondo bianco
   (Il dottore → International), la seconda non aggiunge spazio sopra:
   tra i due contenuti resta un solo respiro, come in tutta la pagina.
   --piena: sezione con un fondo suo (es. sfumatura), conta come tinta. */
.sezione { padding-block: var(--spazio-sezione); }
.sezione--tinta { background: var(--tinta); }
.sezione:not(.sezione--tinta, .sezione--piena) + .sezione:not(.sezione--tinta, .sezione--piena) { padding-top: 0; }


/* -----------------------------------------------------------------
   04 · HEADER flottante, arrotondato
   Nel codice: logo · pulsante menu · menu · CTA (ordine di
   tabulazione corretto); l'ordine visivo si sistema con "order".
   ----------------------------------------------------------------- */
.header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 50;
  padding-inline: var(--margine);
}
/* la barra ha la stessa larghezza del contenitore. Fondo quasi opaco
   senza backdrop-filter: la sfocatura andava ricalcolata a ogni
   fotogramma dello scroll fluido e faceva perdere fluidità */
.header__barra {
  max-width: var(--contenitore);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 14px 14px 28px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--blu-08);
  border-radius: var(--raggio-pillola);
  box-shadow: 0 8px 30px var(--blu-08);
}

/* Logo guidato dal tema: cambia con data-area dell'header.
   Versione estesa con payoff: mai sotto i 260px di larghezza (brand book) */
.header__brand { display: block; flex-shrink: 0; }
.logo {
  width: 280px;
  aspect-ratio: var(--logo-proporzione);
  background-image: var(--logo);
}

.header__nav { margin-left: auto; }
.header__nav ul { display: flex; gap: 2px; }
.header__nav a {
  display: block;
  white-space: nowrap;
  padding: 10px;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: var(--raggio-pillola);
  transition: background-color 0.25s var(--ease);
}
.header__nav a:hover { background: var(--tinta); }
/* pagina corrente (aria-current="page"): pillola tinta e grassetto */
.header__nav a[aria-current="page"] { background: var(--tinta); font-weight: 700; }

.header__cta { flex-shrink: 0; }

/* Pulsante menu: tre linee che diventano una X quando è aperto */
.header__toggle {
  display: none;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--blu);
  cursor: pointer;
}
.header__toggle-linee,
.header__toggle-linee::before,
.header__toggle-linee::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: transform 0.3s var(--ease), background-color 0.2s var(--ease);
}
.header__toggle-linee::before,
.header__toggle-linee::after { content: ""; position: absolute; left: 0; }
.header__toggle-linee::before { transform: translateY(-6px); }
.header__toggle-linee::after { transform: translateY(6px); }
.header.is-aperto .header__toggle-linee { background-color: transparent; }
.header.is-aperto .header__toggle-linee::before { transform: rotate(45deg); }
.header.is-aperto .header__toggle-linee::after { transform: rotate(-45deg); }


/* -----------------------------------------------------------------
   05 · HERO
   Sfumatura lilla ufficiale con velo bianco a sinistra per il
   contrasto del testo blu scuro. Su desktop la riga di riquadri
   entra nella prima schermata (come Wanantara).
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--fondo-header) + var(--spazio-hero));
  padding-bottom: var(--spazio-hero);
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0.1) 100%),
    var(--sfumatura) center / cover no-repeat;
  overflow: hidden;
}
/* Monogramma a sole linee come texture leggera */
.hero::before {
  content: "";
  position: absolute;
  right: -12%;
  top: -18%;
  width: 62%;
  aspect-ratio: 1;
  background: url("../img/elementi/sfondo-pittogramma-bianco.svg") center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.hero .contenitore { position: relative; }

.hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.sopratitolo {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}

/* su desktop due righe: "Chirurgia maxillo-facciale" / "e del sistema
   linfatico" (nessuna parola isolata a fine riga) */
.hero__titolo {
  font-size: clamp(2.5rem, 3.75vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.hero__linea {
  border: 0;
  height: 1px;
  background: var(--blu-25);
  max-width: 520px;
  margin: 28px 0 22px;
}

.hero__lead {
  font-size: 1.125rem;
  max-width: 540px;
  margin-bottom: 28px;
}

/* Card ritratto + recapiti: fondo blu scuro del brand, la foto (fondo
   scuro) sfuma nel blu in basso e i recapiti sono in bianco. */
/* margin-right: la card si stacca dal bordo del contenitore per lasciare
   spazio al badge "Fellow" che sporge a destra */
.hero__card {
  background: var(--blu);
  color: var(--bianco);
  border-radius: var(--raggio-l);
  max-width: 340px;
  justify-self: end;
  width: 100%;
  margin-right: 48px;
}
.hero__foto {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: var(--raggio-l) var(--raggio-l) 0 0;
}
.hero__cornice {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.hero__foto .foto { background: var(--blu); }
/* sfumatura foto → blu della card */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px;   /* -1px: copre la linea sottile tra foto e card */
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(28, 38, 59, 0) 55%, rgba(28, 38, 59, 0.75) 85%, var(--blu) 100%);
  pointer-events: none;
}

/* Badge di credibilità sovrapposti alla foto (logica Sinigaglia):
   bordo sottile e un pallino nel colore dell'area */
.badge {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 224px;
  padding: 9px 13px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  background: var(--bianco);
  color: var(--blu);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  box-shadow: 0 4px 14px var(--blu-12);
  z-index: 1;
}
.badge::before {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--colore-principale);
  translate: 0 -1px;
}
.badge--alto { top: 18px; left: -88px; }
.badge--basso { bottom: 48px; right: -56px; }

/* Fluttuazione leggera dei badge: su e giù di 6 px, lenta e sfasata tra
   i due. Usa la proprietà "translate", separata dal transform con cui
   GSAP li fa entrare, quindi le due cose non si disturbano.
   Ferma con "riduci movimento" (vedi più sotto). */
@keyframes badge-fluttua {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
.badge--alto  { animation: badge-fluttua 5s ease-in-out infinite; }
.badge--basso { animation: badge-fluttua 5s ease-in-out -2.5s infinite; }

.hero__recapiti {
  margin: 0;
  padding: 6px 20px 16px;
  display: grid;
  gap: 8px;
}
.hero__recapiti div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.875rem;
}
.hero__recapiti div + div { border-top: 1px solid var(--bianco-16); padding-top: 8px; }
.hero__recapiti dt { color: var(--testo-su-blu-tenue); }
.hero__recapiti dd { margin: 0; font-weight: 700; white-space: nowrap; }
.hero__recapiti a { text-decoration: none; }
.hero__recapiti a:hover { text-decoration: underline; }

/* Riga di riquadri sotto la hero: foto · card maxillo · card linfatica */
.hero__riquadri {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.riquadro {
  border-radius: var(--raggio-l);
  min-height: 164px;
  overflow: hidden;
}

/* Card piena d'area: sfumatura ufficiale, logo bianco dell'area (il
   brand book prevede il logo bianco sulle texture di colore), titolo,
   freccia. Tutta la card è un link.
   Testo: blu scuro sul verde, bianco sul blu (via --testo-su-principale). */
.riquadro--area {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background: var(--velo-card), var(--sfumatura-card) center / cover no-repeat;
  color: var(--testo-su-principale);
  text-decoration: none;
}
.riquadro__logo {
  width: min(220px, 100%);
  aspect-ratio: var(--logo-proporzione);
  background-image: var(--logo-bianco);
}
.riquadro__titolo {
  padding-right: 56px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.riquadro__freccia {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bianco);
  color: var(--blu);
  font-size: 1.125rem;
  transition: background-color 0.25s var(--ease);
}
.riquadro--area:hover .riquadro__freccia { background: var(--tinta); }


/* -----------------------------------------------------------------
   06 · POSIZIONAMENTO: tre punti in card
   Monogramma dell'area (verde, blu scuro, lilla) e frase unica di
   01-home.md con l'inizio in evidenza.
   ----------------------------------------------------------------- */
.punti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.punto {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  padding: 28px;
  display: grid;
  align-content: start;
  gap: 18px;
}
.punto__icona {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--tinta);
}
.punto__icona .icona { width: 32px; height: 32px; stroke-width: 1.4; }
.punto p {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--testo-tenue);
}
.punto__titolo {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blu);
}


/* -----------------------------------------------------------------
   07 · LE DUE AREE CLINICHE
   Card orizzontali impilate: contenuto a sinistra (fondo e logo del
   tema), sfumatura ufficiale dell'area a destra con il monogramma.
   ----------------------------------------------------------------- */
.aree { display: grid; gap: 20px; }

.area {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  border-radius: var(--raggio-l);
  overflow: hidden;
  background: var(--card-fondo);
  color: var(--card-testo);
  min-height: 380px;
}
.area__contenuto {
  padding: clamp(28px, 4.5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.area__logo {
  width: min(320px, 100%);
  aspect-ratio: var(--logo-proporzione);
  background-image: var(--card-logo);
  margin-bottom: auto;
}
.area h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); letter-spacing: -0.02em; margin-top: 24px; }
.area p { max-width: 520px; }
.btn--area {
  margin-top: 8px;
  background: var(--btn-area-fondo);
  color: var(--btn-area-testo);
}

.area__sfumatura {
  position: relative;
  background: var(--sfumatura) center / cover no-repeat;
  min-height: 220px;
}
.area__sfumatura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/elementi/sfondo-pittogramma-bianco.svg") 140% 50% / 90% no-repeat;
  opacity: 0.5;
}


/* -----------------------------------------------------------------
   08 · IL DOTTORE IN BREVE
   ----------------------------------------------------------------- */
.dottore {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.dottore__foto {
  aspect-ratio: 3 / 2;
  border-radius: var(--raggio-l);
  overflow: hidden;
  position: sticky;
  top: 120px;
}
.dottore__testi { display: grid; gap: 32px; }
.dottore__testi > p { font-size: 1.125rem; }


/* -----------------------------------------------------------------
   09 · PAZIENTI INTERNAZIONALI
   Il link è il solo pulsante; il suo ::after copre tutta la card
   ("stretched link"), quindi l'intero blocco resta cliccabile.
   Raggi concentrici: card 24, padding 12, foto 12.
   ----------------------------------------------------------------- */
.internazionali {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: var(--raggio-l);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2)),
    var(--sfumatura) center / cover no-repeat;
}
.internazionali__testi {
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.internazionali__testi p:not(.pillola) { max-width: 480px; }
.internazionali__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                  /* sopra la foto, che è posizionata */
  border-radius: var(--raggio-l);
}
.internazionali:hover .internazionali__link { filter: brightness(1.15); }
.internazionali__foto {
  min-height: 380px;
  border-radius: var(--raggio-s);
  overflow: hidden;
}


/* -----------------------------------------------------------------
   10 · PERCORSO DI VALUTAZIONE
   Intestazione e passi a sinistra, foto a destra.
   ----------------------------------------------------------------- */
.percorso {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}
.percorso__colonna { display: grid; align-content: start; }
.percorso__cta { justify-self: start; margin-top: 28px; }
.percorso__foto {
  border-radius: var(--raggio-l);
  overflow: hidden;
  min-height: 420px;
}

/* Linea che collega i cerchi dei passi. Posizione e altezza le calcola
   animazioni.js (dal centro del cerchio 1 al centro del cerchio 4);
   senza JS la linea non si vede. */
.percorso__passi { position: relative; }
.passi__linea {
  display: none;
  position: absolute;
  left: 51px;                  /* 24px padding passo + 28px metà cerchio - 1px */
  width: 2px;
  pointer-events: none;
}
.passi__traccia,
.passi__progresso {
  position: absolute;
  inset: 0;
  border-radius: 2px;
}
.passi__traccia { background: var(--bordo); }
.passi__progresso {
  background: var(--colore-principale);
  transform-origin: top center;
}
.passi { display: grid; gap: 12px; }
.passo {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px;
  border-radius: var(--raggio-l);
  background: var(--tinta);
}
.passo__numero {
  position: relative;
  z-index: 1;                  /* sopra la linea del percorso */
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bianco);
  border: 1.5px solid var(--colore-principale);
  font-size: 1.25rem;
  font-weight: 700;
}
/* "acceso": riempimento lilla in dissolvenza (solo opacity) quando la
   linea del percorso raggiunge il passo. Numero blu scuro su lilla: AA */
.passo__numero::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: 50%;
  background: var(--colore-principale);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.passo.is-acceso .passo__numero::after { opacity: 1; }
.passo__numero { transition: color 0.5s var(--ease); }
.passo.is-acceso .passo__numero { color: var(--testo-su-principale); }
.passo h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.passo__titolo { display: flex; align-items: flex-start; gap: 10px; }
.passo__titolo .icona { margin-top: 0; }
.sezione--tinta .passo { background: var(--bianco); }
.passo p { color: var(--testo-tenue); }
.passo a {
  color: var(--blu);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}


/* -----------------------------------------------------------------
   11 · CONTATTO FINALE: form + sedi
   Fondo tinta: si stacca dal footer lilla.
   ----------------------------------------------------------------- */
.contatto {
  padding-block: var(--spazio-sezione);
  background: var(--bianco);
}
.contatto .intestazione__testo { color: var(--blu); }

.contatto__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 16px;
  align-items: start;
}

.modulo {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  padding: clamp(24px, 4vw, 44px);
  display: grid;
  gap: 20px;
}
.modulo__legenda { font-size: 0.875rem; color: var(--testo-tenue); }
.campo { display: grid; gap: 8px; }
.campo-doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campo label { font-size: 0.9375rem; font-weight: 700; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--blu);
  background-color: var(--bianco);
  border: 1.5px solid var(--bordo-campo);
  border-radius: var(--raggio-s);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* freccia del menu a tendina in SVG, coerente con le icone */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231c263b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 2px var(--blu);
}
.campo [aria-invalid="true"] { border-color: var(--errore); }
.campo__nota { font-size: 0.875rem; color: var(--testo-tenue); }
.campo__errore { font-size: 0.875rem; font-weight: 700; color: var(--errore); }

.campo--consenso {
  grid-template-columns: 24px 1fr;
  align-items: start;
  column-gap: 12px;
  row-gap: 4px;
}
.campo--consenso input {
  width: 24px; min-height: 24px; height: 24px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--blu);
}
.campo--consenso label { font-weight: 400; }
.campo__nota--consenso,
.campo__errore--consenso { grid-column: 2; }
.campo__nota--consenso a { font-weight: 700; color: var(--blu); }

.modulo__invia {
  justify-self: start;
  min-height: 54px;
  padding-inline: 32px;
  font-size: 1.0625rem;
}
.modulo__stato {
  padding: 14px 18px;
  border-radius: var(--raggio-s);
  background: var(--tinta);
  font-weight: 700;
}
.modulo__stato:empty { display: none; }

.sedi {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 120px;
}
.sede {
  background: var(--tinta);
  border-radius: var(--raggio-l);
  padding: 24px;
  display: grid;
  gap: 6px;
}
.sede h3 { font-size: 1.0625rem; line-height: 1.3; margin-bottom: 4px; }
.sede__titolo { display: flex; align-items: flex-start; gap: 8px; }
.sede__titolo .icona { margin-top: -1px; }
.sede p { font-size: 0.9375rem; }
.sede__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px;
}
.sede__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
}
a.sede__link:hover { text-decoration: underline; text-underline-offset: 3px; }


/* -----------------------------------------------------------------
   12 · FOOTER pieno lilla, testi blu scuro
   Logo principale direttamente sul lilla, versione blu scuro (6,5:1).
   ----------------------------------------------------------------- */
.footer {
  background: var(--colore-principale);
  color: var(--testo-su-principale);
  padding-top: var(--spazio-sezione);   /* stesso respiro delle sezioni */
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -45%;
  width: 46%;
  aspect-ratio: 1;
  background: url("../img/elementi/sfondo-pittogramma-bianco.svg") center / contain no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.footer .contenitore { position: relative; }

.footer__griglia {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 48px;
}
.footer__brand { display: grid; gap: 20px; align-content: start; justify-items: start; }
.footer__logo { width: 300px; height: auto; }
.footer__titolo {
  font-weight: 700;
  margin-bottom: 12px;
}
.footer__colonna ul + .footer__titolo { margin-top: 32px; }
.footer address { font-style: normal; display: grid; gap: 18px; font-size: 0.9375rem; }
.footer__colonna li { font-size: 0.9375rem; padding-block: 3px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .footer__link-legale,
.footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

.footer__legale {
  margin-top: 56px;
  padding-block: 24px;
  border-top: 1px solid var(--blu-25);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: 0.875rem;
}


/* -----------------------------------------------------------------
   13 · RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 1320px) {
  :root { --fondo-header: 105px; }
  .header__nav a { padding-inline: 9px; font-size: 0.875rem; }
  .logo { width: 260px; }
}

/* Header: sotto questa larghezza logo esteso + menu + pulsante non
   stanno insieme sulla barra → menu a tendina. La CTA resta visibile,
   compatta, a destra; il pulsante menu è l'ultimo elemento a destra. */
@media (max-width: 1240px) {
  .header__toggle { display: block; order: 3; }
  .header__cta {
    order: 2;
    margin-left: auto;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.875rem;
  }
  .header__nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: var(--margine);
    right: var(--margine);
    background: var(--bianco);
    border-radius: var(--raggio-l);
    padding: 12px;
    box-shadow: 0 20px 40px var(--blu-16);
  }
  .header.is-aperto .header__nav { display: block; }
  .header__nav ul { flex-direction: column; }
  .header__nav a { padding: 14px 16px; font-size: 1rem; }
}

@media (max-width: 980px) {
  .hero__griglia { grid-template-columns: 1fr; }
  .hero__card { justify-self: center; margin-right: 0; }
  .hero__riquadri { grid-template-columns: 1fr 1fr; }
  .hero__riquadri .riquadro--foto { grid-column: 1 / -1; }

  .punti { grid-template-columns: 1fr; }

  .area { grid-template-columns: 1fr; }
  .area__sfumatura { order: -1; min-height: 120px; }

  .dottore,
  .percorso,
  .internazionali,
  .contatto__griglia { grid-template-columns: 1fr; }
  .dottore__foto { position: relative; top: auto; }
  .percorso__foto { min-height: 300px; }
  /* foto orizzontale 4:3: il Dr. Gabriele e il collega restano entrambi in quadro */
  .internazionali__foto { min-height: 0; aspect-ratio: 4 / 3; }
  .sedi { position: static; }

  .footer__griglia { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Sotto i 720px il logo esteso (≥ 260px) non sta accanto a CTA e
   pulsante menu → solo monogramma, nel colore del tema */
@media (max-width: 720px) {
  :root { --fondo-header: 94px; }
  .logo {
    width: 48px;
    aspect-ratio: 320 / 278;
    background-image: var(--logo-compatto);
  }
}

@media (max-width: 640px) {
  :root { --margine: 16px; }
  .header { top: 10px; }
  .header__barra { gap: 10px; padding: 8px 8px 8px 16px; }
  .header__cta { padding-inline: 14px; font-size: 0.875rem; }

  :root { --fondo-header: 76px; }
  .hero__riquadri { grid-template-columns: 1fr; }
  .riquadro { min-height: 180px; }
  .badge--alto { left: 12px; }
  .badge--basso { right: 12px; }
  .hero__recapiti div { flex-direction: column; gap: 2px; }

  .area__sfumatura { min-height: 88px; }
  .btn--area { width: 100%; justify-content: space-between; }

  .campo-doppio { grid-template-columns: 1fr; }
  .modulo__invia { justify-self: stretch; }
  .footer__griglia { grid-template-columns: 1fr; }
  .footer__logo { width: 240px; }
  .gruppo-pulsanti .btn,
  .percorso__cta { width: 100%; }
}


/* Telefoni molto stretti: barra e CTA più compatte (testo sempre ≥ 14px) */
@media (max-width: 380px) {
  :root { --fondo-header: 68px; }
  .header { padding-inline: 10px; }
  .header__barra { gap: 6px; padding: 6px 6px 6px 12px; }
  .logo { width: 40px; }
  .header__toggle { width: 44px; height: 44px; }
  .header__cta { padding-inline: 12px; }
}


/* -----------------------------------------------------------------
   14 · ANIMAZIONI (GSAP) E MICRO-INTERAZIONI
   Le animazioni sono in assets/js/animazioni.js. Qui solo:
   - lo stato di attesa della hero (classe aggiunta nel <head>, tolta
     da animazioni.js appena GSAP prende il controllo, o dopo 2,5 s se
     GSAP non parte): evita il flash di contenuto. Titolo H1 e ritratto
     NON sono mai nascosti (sono l'elemento LCP);
   - le micro-interazioni al passaggio del mouse, con la proprietà
     "translate" (indipendente dal transform che usa GSAP), solo sugli
     elementi cliccabili.
   ----------------------------------------------------------------- */
.anim-attesa .sopratitolo,
.anim-attesa .hero__linea,
.anim-attesa .hero__lead,
.anim-attesa .hero .gruppo-pulsanti,
.anim-attesa .hero__card .badge,
.anim-attesa .hero__recapiti,
.anim-attesa .hero__riquadri { opacity: 0; }

/* righe di SplitText: la maschera non deve tagliare le discendenti */
.riga-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* frecce di pulsanti, link e card: si spostano di qualche pixel */
  .btn .freccia,
  .link-freccia .freccia,
  .riquadro__freccia {
    transition: translate 0.35s var(--ease), background-color 0.25s var(--ease);
  }
  .btn:hover .freccia,
  .link-freccia:hover .freccia,
  .internazionali:hover .internazionali__link .freccia,
  .riquadro--area:hover .riquadro__freccia { translate: 4px 0; }

  /* card cliccabili: si sollevano leggermente */
  .riquadro--area,
  .internazionali { transition: translate 0.4s var(--ease); }
  .riquadro--area:hover,
  .internazionali:hover { translate: 0 -4px; }
}

/* Mentre la pagina scorre il mouse è fermo e gli elementi gli passano
   sotto: senza questa regola card e frecce si alzerebbero e
   abbasserebbero di continuo ("tremolio"). Lenis aggiunge la classe
   lenis-scrolling all'<html> solo durante lo scroll. */
html.lenis-scrolling body { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .badge--alto,
  .badge--basso { animation: none; }
  .btn,
  .header__nav a,
  .header__toggle-linee,
  .header__toggle-linee::before,
  .header__toggle-linee::after,
  .passo__numero,
  .passo__numero::after { transition: none; }
}


/* -----------------------------------------------------------------
   Lenis (scroll fluido, assets/js/scorrimento.js): stili di base dal
   pacchetto ufficiale. L'elemento raggiunto con un link interno riceve
   il focus (tabindex="-1") senza mostrare un riquadro intorno alla sezione.
   ----------------------------------------------------------------- */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }


/* -----------------------------------------------------------------
   15 · STAMPA
   Tutto visibile e fermo, niente header fisso né decorazioni.
   ----------------------------------------------------------------- */
@media print {
  .header { position: static; }
  .salta-al-contenuto,
  .header__toggle,
  .passi__linea,
  .hero::before,
  .footer::before { display: none !important; }
  .intestazione *,
  .hero *,
  .punto,
  .area,
  .riquadro,
  .lista-spunte *,
  .dottore__foto,
  .internazionali__foto,
  .percorso__foto,
  .internazionali__testi > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .dottore__foto,
  .sedi { position: static; }
}


/* =================================================================
   16 · PAGINA "IL DOTTORE" (il-dottore.html)
   Usa i componenti della Home (header, hero, intestazioni, pulsanti,
   .punti, footer) più quelli qui sotto. Il responsive della pagina è
   in fondo a questa sezione, con gli stessi punti di interruzione.
   ================================================================= */

/* --- 16.1 Hero profilo: nome come titolo, ritratto su fondo chiaro --- */
.hero--profilo .hero__griglia {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.hero--profilo .hero__titolo { font-size: clamp(2.75rem, 5vw, 4.5rem); }
.hero--profilo .hero__lead { max-width: 580px; }

/* sintesi delle due aree: icona su cerchio, nel colore dell'area */
.sintesi {
  display: grid;
  gap: 10px;
  max-width: 580px;
  margin-bottom: 32px;
}
.sintesi__voce {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  background: var(--bianco-60);
  border: 1px solid var(--blu-08);
  border-radius: var(--raggio-l);
}
.sintesi__icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tinta);
}
.sintesi__voce p { font-size: 1rem; line-height: 1.45; }

/* ritratto: cornice bianca semitrasparente, raggi concentrici (24 / 14) */
.profilo__ritratto {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 886 / 1222;
  border: 10px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--raggio-l);
  box-shadow: 0 30px 60px -24px var(--blu-25);
}
.profilo__ritratto .foto { border-radius: 14px; background: #e6e6ea; }

/* --- 16.2 Il mio percorso: ritratto verticale + testo --- */
.profilo {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.profilo__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--raggio-l);
  overflow: hidden;
}
.profilo__testi { display: grid; gap: 24px; }
.profilo__testi .intestazione { margin-bottom: 8px; }
.profilo__testi > p { max-width: 660px; }
.profilo__lead { font-size: 1.25rem; line-height: 1.55; }
/* il paragrafo sul metodo, messo in evidenza */
.profilo__metodo {
  padding: 24px 28px;
  font-size: 1.125rem;
  background: var(--tinta);
  border-radius: var(--raggio-l);
}

/* --- 16.3 Formazione ed esperienza: timeline + colonna laterale --- */
.formazione {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.formazione__lato {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 16px;
}
.formazione__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raggio-l);
  overflow: hidden;
}
.strutture {
  padding: 24px 28px;
  background: var(--bianco);
  border-radius: var(--raggio-l);
}
.strutture__titolo { font-size: 1.125rem; margin-bottom: 8px; }
.strutture li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 12px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.strutture li + li { border-top: 1px solid var(--bordo); }

/* Timeline: un pallino per tappa e un tratto che lo collega alla
   successiva. Pallino e tratto leggono --punto e --tratto (1 = pieni):
   animazioni.js li porta da 0 a 1 quando la tappa entra nello schermo.
   Senza JS valgono 1 e la timeline è completa. */
.cronologia__lista { border-top: 1px solid var(--blu-08); }
.tappa {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0 18px 40px;
  border-bottom: 1px solid var(--blu-08);
}
.tappa::before {
  content: "";
  position: absolute;
  left: 2px; top: 25px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--tinta);
  border: 2px solid var(--blu);
  scale: var(--punto, 1);
  z-index: 1;
}
/* la tappa più recente: pallino pieno nel colore dell'area */
.tappa:first-child::before { background: var(--colore-principale); }
.tappa:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px; top: 31px; bottom: -31px;
  width: 2px;
  background: var(--colore-principale);
  transform-origin: top center;
  scale: 1 var(--tratto, 1);
}
.tappa__anno {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tappa p { color: var(--testo-tenue); }
.tappa strong { color: var(--blu); }
.formazione__da-completare { margin-top: 20px; font-size: 0.9375rem; }

/* --- 16.4 Aree di competenza: due card affiancate per area --- */
.competenze {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.competenza {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--raggio-l);
  overflow: hidden;
  background: var(--card-fondo);
  color: var(--card-testo);
}
.competenza__testata {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--velo-card), var(--sfumatura-card) center / cover no-repeat;
  overflow: hidden;
}
.competenza__testata::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/elementi/sfondo-pittogramma-bianco.svg") 115% 40% / 60% no-repeat;
  opacity: 0.35;
}
.competenza__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(260px, 100%);
  aspect-ratio: var(--logo-proporzione);
  background: var(--logo-bianco) left center / contain no-repeat;
}
.competenza__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(24px, 3.5vw, 40px);
}
.competenza h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.competenza__corpo p { max-width: 460px; margin-bottom: 8px; }
.competenza__link { margin-top: auto; }
/* tutta la card è cliccabile: l'area del link copre la card */
.competenza__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--raggio-l);
}

/* --- 16.5 Ricerca: testo a sinistra, voci in card a destra --- */
.ricerca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.ricerca__testi > p { font-size: 1.125rem; max-width: 540px; }
.ricerca__voci { display: grid; gap: 12px; }
.ricerca__voce {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px 16px 16px;
  background: var(--bianco);
  border-radius: var(--raggio-l);
}
.ricerca__icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--tinta);
}
.ricerca__voce p { line-height: 1.5; }

/* --- 16.6 Insegnamento: righe su due colonne --- */
.incarichi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--bordo);
}
.incarico {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-block: 22px;
  border-bottom: 1px solid var(--bordo);
}
.incarico .icona { margin-top: 2px; }
.incarico p { line-height: 1.45; }
.incarico__ruolo,
.incarico__ente { display: block; font-size: 0.9375rem; color: var(--testo-tenue); }
.incarico__ruolo { margin-bottom: 2px; }
.incarico strong { display: block; font-size: 1.0625rem; }

/* --- 16.7 CTA finale: card sulla sfumatura, raggi concentrici 24/12 --- */
.invito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: var(--raggio-l);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2)),
    var(--sfumatura) center / cover no-repeat;
}
.invito__testi {
  padding: clamp(24px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
.invito__testi p { font-size: 1.125rem; max-width: 460px; }
.invito__foto {
  position: relative;
  min-height: 380px;
  border-radius: var(--raggio-s);
  overflow: hidden;
}

/* --- 16.8 Micro-interazioni (come sezione 14) --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .competenza { transition: translate 0.4s var(--ease); }
  .competenza:hover { translate: 0 -4px; }
}

/* --- 16.9 Attesa delle animazioni (come sezione 14) --- */
.anim-attesa .hero .sintesi { opacity: 0; }

/* --- 16.10 Responsive --- */
@media (max-width: 980px) {
  .hero--profilo .hero__griglia { grid-template-columns: 1fr; }
  .profilo__ritratto { justify-self: center; max-width: 400px; }

  .profilo,
  .formazione,
  .ricerca,
  .invito { grid-template-columns: 1fr; }
  /* su colonna singola il ritratto va dopo il testo e in 4:3, per non
     seguire subito il ritratto verticale della hero */
  .profilo__foto { order: 2; aspect-ratio: 4 / 3; }
  .profilo__foto .foto { object-position: 50% 18%; }
  .formazione__lato { position: static; }

  .competenze,
  .incarichi { grid-template-columns: 1fr; }

  .invito__foto { min-height: 0; aspect-ratio: 3 / 2; }
}

@media (max-width: 640px) {
  .profilo__ritratto { max-width: 340px; border-width: 8px; }
  .profilo__lead { font-size: 1.125rem; }
  .profilo__metodo { padding: 20px; font-size: 1.0625rem; }

  .tappa { grid-template-columns: 1fr; gap: 2px; padding-left: 36px; }
  .tappa::before { top: 25px; }

  .competenza__testata { min-height: 140px; }
  .competenza__link { width: 100%; justify-content: space-between; }

  .ricerca__voce { padding: 14px 18px 14px 14px; gap: 14px; }
  .ricerca__icona { width: 44px; height: 44px; }

  .invito .btn { width: 100%; }
}

/* --- 16.11 Stampa --- */
@media print {
  .sintesi,
  .profilo__ritratto,
  .profilo__foto,
  .formazione__foto,
  .invito__foto,
  .invito__testi > *,
  .tappa,
  .tappa > *,
  .competenza,
  .ricerca__voce,
  .incarico {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    --punto: 1 !important;
    --tratto: 1 !important;
  }
  .formazione__lato { position: static; }
}


/* =================================================================
   17 · PAGINE D'AREA CLINICA (chirurgia-maxillo-facciale.html)
   Tutto legge le variabili del tema (data-area): la pagina della
   chirurgia linfatica userà gli stessi componenti nel suo colore.
   ================================================================= */

/* --- 17.1 Hero clinico: testi + foto in cornice --- */
.hero--area .hero__griglia {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.hero--area .hero__titolo { font-size: clamp(2.5rem, 4.4vw, 4rem); }
.hero--area .hero__lead { max-width: 560px; }
.hero__scatto {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 5 / 4;
  border: 10px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--raggio-l);
  box-shadow: 0 30px 60px -24px var(--blu-25);
}
.hero__scatto .foto { border-radius: 14px; }

/* --- 17.2 Di cosa si occupa: testo + foto --- */
.descrizione {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.descrizione__testi { display: grid; gap: 24px; }
.descrizione__testi .intestazione { margin-bottom: 8px; }
.descrizione__lead { font-size: 1.25rem; line-height: 1.55; }
.descrizione__evidenza {
  padding: 24px 28px;
  font-size: 1.125rem;
  background: var(--tinta);
  border-radius: var(--raggio-l);
}
.descrizione__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raggio-l);
  overflow: hidden;
}

/* --- 17.3 Quando rivolgersi: cinque card, tre sopra e due sotto --- */
.ambiti {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.ambito {
  grid-column: span 2;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px;
  background: var(--bianco);
  border-radius: var(--raggio-l);
}
.ambito:nth-child(n + 4) { grid-column: span 3; }
.ambito__icona {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--tinta);
}
.ambito__icona .icona { width: 32px; height: 32px; stroke-width: 1.4; }
.ambito p { line-height: 1.5; color: var(--testo-tenue); }
.ambito__titolo { font-size: 1.1875rem; letter-spacing: -0.01em; color: var(--blu); }

/* --- 17.4 Focus sui nervi: fondo pieno con la sfumatura dell'area --- */
.focus {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0.1) 100%),
    var(--sfumatura) center / cover no-repeat;
}
.focus::before {
  content: "";
  position: absolute;
  left: -14%;
  bottom: -30%;
  width: 52%;
  aspect-ratio: 1;
  background: url("../img/elementi/sfondo-pittogramma-bianco.svg") center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.focus .contenitore { position: relative; }
.focus__alto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.focus__intro > p { font-size: 1.1875rem; max-width: 560px; }
.focus__card {
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--bianco);
  border-radius: var(--raggio-l);
}
.focus__sintomi h3 { font-size: 1.25rem; margin-bottom: 16px; }
.focus__basso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.focus__titolo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 1.25rem;
}
.focus__basso p { color: var(--testo-tenue); }

/* --- 17.5 Trattamenti: elenco numerato su due colonne (01-05, 06-10) --- */
.trattamenti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--bordo);
  counter-reset: trattamento;
}
.trattamenti li {
  counter-increment: trattamento;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 20px;
  border-bottom: 1px solid var(--bordo);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}
.trattamenti li::before {
  content: counter(trattamento, decimal-leading-zero);
  padding: 4px 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--tinta);
  border-radius: var(--raggio-pillola);
}

/* --- 17.6 Percorso senza foto: intestazione a sinistra, passi a destra --- */
.percorso--senza-foto { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.percorso--senza-foto .percorso__colonna { align-self: start; position: sticky; top: 120px; }
/* passi con solo il titolo: titolo centrato sul cerchio */
.passo:not(:has(p)) { align-items: center; }
.passo:not(:has(p)) h3 { margin-bottom: 0; }

/* --- 17.7 Domande frequenti: accordion nativo --- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.faq__lista { border-top: 1px solid var(--bordo); }
.faq__voce { border-bottom: 1px solid var(--bordo); }
.faq__voce summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  cursor: pointer;
  list-style: none;
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__domanda { font-size: 1.1875rem; line-height: 1.35; }
/* più che diventa meno: due linee, la verticale ruota */
.faq__segno {
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tinta);
  transition: background-color 0.25s var(--ease);
}
.faq__segno::before,
.faq__segno::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 1.75px;
  margin: -0.875px 0 0 -7px;
  border-radius: 2px;
  background: var(--blu);
  transition: rotate 0.3s var(--ease);
}
.faq__segno::after { rotate: 90deg; }
.faq__voce[open] .faq__segno::after { rotate: 0deg; }
.faq__voce summary:hover .faq__segno { background: var(--colore-principale); }
.faq__voce summary:hover .faq__segno::before,
.faq__voce summary:hover .faq__segno::after { background: var(--testo-su-principale); }
.faq__risposta { padding: 0 68px 24px 0; color: var(--testo-tenue); }
/* apertura morbida dove il browser la supporta; altrove si apre di colpo */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq__voce { interpolate-size: allow-keywords; }
    .faq__voce::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.35s var(--ease), content-visibility 0.35s allow-discrete;
    }
    .faq__voce[open]::details-content { height: auto; }
  }
}

/* --- 17.8 CTA finale piena: sfumatura satura dell'area, centrata --- */
.invito--pieno {
  position: relative;
  grid-template-columns: 1fr;
  padding: 0;
  overflow: hidden;
  background: var(--velo-card), var(--sfumatura-card) center / cover no-repeat;
  color: var(--testo-su-principale);
}
.invito--pieno::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -40%;
  width: 46%;
  aspect-ratio: 1;
  background: url("../img/elementi/sfondo-pittogramma-bianco.svg") center / contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.invito--pieno .invito__testi {
  position: relative;
  z-index: 1;
  align-items: center;
  text-align: center;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
}
.invito--pieno .invito__testi p { max-width: 520px; }

/* --- 17.9 Micro-interazioni --- */
@media (prefers-reduced-motion: reduce) {
  .faq__segno,
  .faq__segno::before,
  .faq__segno::after { transition: none; }
}

/* --- 17.10 Responsive --- */
@media (max-width: 980px) {
  .hero--area .hero__griglia { grid-template-columns: 1fr; }
  .hero__scatto { justify-self: center; }

  .descrizione,
  .focus__alto,
  .faq,
  .percorso--senza-foto { grid-template-columns: 1fr; }
  .percorso--senza-foto .percorso__colonna { position: static; }

  .ambiti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ambito,
  .ambito:nth-child(n + 4) { grid-column: auto; }
  .ambito:last-child { grid-column: 1 / -1; }

  .trattamenti {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

@media (max-width: 640px) {
  .hero__scatto { border-width: 8px; }
  .descrizione__lead { font-size: 1.125rem; }
  .descrizione__evidenza { padding: 20px; font-size: 1.0625rem; }

  .ambiti,
  .focus__basso { grid-template-columns: 1fr; }
  .ambito { padding: 24px; }

  .faq__domanda { font-size: 1.0625rem; }
  .faq__risposta { padding-right: 0; }

  .invito--pieno .btn { width: 100%; }
}

/* --- 17.11 Stampa: risposte aperte e tutto visibile --- */
@media print {
  .hero__scatto,
  .descrizione__foto,
  .ambito,
  .focus__card,
  .trattamenti li,
  .faq__voce {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .faq__voce::details-content { height: auto !important; content-visibility: visible !important; }
  .percorso--senza-foto .percorso__colonna { position: static; }
}


/* =================================================================
   18 · VARIANTI SCURE E PAGINA CHIRURGIA LINFATICA
   (chirurgia-linfatica.html). Il tema linfatica ha le sfumature
   blu scuro: hero e focus diventano scuri con testo bianco, così la
   pagina si distingue a colpo d'occhio dall'area maxillo-facciale.
   Su questi fondi i pulsanti usano .btn--area (bianco, testo blu).
   ================================================================= */

/* --- 18.1 Hero scura: velo blu sulla sfumatura, testi bianchi ---
   Contrasto: il velo resta ≥ 0,7 dietro i testi, bianco ≥ 7:1 */
.hero--scura {
  color: var(--bianco);
  background:
    linear-gradient(100deg, rgba(28, 38, 59, 0.9) 0%, rgba(28, 38, 59, 0.72) 55%, rgba(28, 38, 59, 0.4) 100%),
    var(--sfumatura) center / cover no-repeat;
}
.hero--scura::before { opacity: 0.18; }
.hero--scura .hero__linea { background: rgba(255, 255, 255, 0.3); }
.hero--scura .hero__scatto { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5); }

/* --- 18.2 Focus scuro: stessa logica, card bianche con testo blu --- */
.focus--scura {
  color: var(--bianco);
  background:
    linear-gradient(100deg, rgba(28, 38, 59, 0.88) 0%, rgba(28, 38, 59, 0.66) 60%, rgba(28, 38, 59, 0.5) 100%),
    var(--sfumatura) center / cover no-repeat;
}
.focus--scura::before { opacity: 0.16; }
.focus--scura .focus__card { color: var(--blu); }
/* etichetta a pillola sul blu: bianca piena (la versione semitrasparente esce grigia) */
.focus--scura .pillola--su-colore { background: var(--bianco); border-color: transparent; }
.focus--scura .focus__alto { align-items: start; }
.focus__intro { display: grid; gap: 24px; }
.focus__intro .intestazione { margin-bottom: 0; }
.focus__foto {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--raggio-l);
  overflow: hidden;
  margin-top: 8px;
}
.focus__card .trattamenti { margin-top: 8px; }
/* la nota sotto ha già la sua linea: niente doppia riga */
.focus__card .trattamenti:has(+ .focus__nota) li:last-child { border-bottom: 0; }
.focus__nota {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--bordo);
  color: var(--testo-tenue);
}

/* elenco dei trattamenti su una sola colonna (dentro una card) */
.trattamenti--colonna {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  grid-auto-flow: row;
}

/* --- 18.3 Che cos'è il linfedema --- */
.spiegazione__alto {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.spiegazione__alto .intestazione { margin-bottom: 0; }
.spiegazione__lead { font-size: 1.25rem; line-height: 1.55; }
.spiegazione__etichetta {
  margin: clamp(48px, 6vw, 72px) 0 16px;
  font-size: 1.25rem;
}
/* le due cause: card .ambito su due colonne, su fondo bianco */
.ambiti--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ambiti--due .ambito,
.ambiti--due .ambito:nth-child(n + 4) { grid-column: auto; background: var(--tinta); }
.ambiti--due .ambito__icona { background: var(--bianco); }
.spiegazione__basso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
}
.spiegazione__blocco {
  padding-top: 24px;
  border-top: 2px solid var(--colore-principale);
}
.spiegazione__blocco h3 { font-size: 1.25rem; margin-bottom: 10px; }
.spiegazione__blocco p { color: var(--testo-tenue); }

/* --- 18.4 Quando richiedere una valutazione: intestazione + elenco --- */
.richiesta {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.richiesta .intestazione { margin-bottom: 0; }
.richiesta__colonna { display: grid; justify-items: start; gap: 32px; }

/* --- 18.5 Lipedema: testo + riquadro "da completare" --- */
.segnaposto {
  padding: clamp(24px, 3.5vw, 40px);
  border: 1.5px dashed var(--bordo-campo);
  border-radius: var(--raggio-l);
  font-size: 1.0625rem;
}

/* --- 18.6 Footer sul blu: linea divisoria chiara --- */
.footer[data-area="linfatica"] .footer__legale { border-top-color: var(--bianco-16); }

/* --- 18.7 Responsive --- */
@media (max-width: 980px) {
  .spiegazione__alto,
  .richiesta { grid-template-columns: 1fr; }
  .spiegazione__basso { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ambiti--due { grid-template-columns: 1fr; }
  .spiegazione__lead { font-size: 1.125rem; }
  .richiesta__colonna .btn,
  .hero--scura .btn { width: 100%; }
}

/* --- 18.8 Stampa: fondi scuri tolti, testi in blu --- */
@media print {
  .hero--scura,
  .focus--scura { background: none; color: var(--blu); }
  .focus__foto,
  .spiegazione__blocco { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}


/* =================================================================
   19 · PAGINA IN INGLESE (international-patients.html, lang="en")
   Stesso tema generale, ma con i loghi inglesi del brand: la regola
   sostituisce i loghi di tutti i temi quando la pagina è in inglese.
   I file inglesi hanno gli stessi margini e proporzioni di quelli
   italiani (viewBox corretto in assets/logo/).
   ================================================================= */
html[lang="en"] [data-area="generale"] {
  --logo: url("../logo/logo-en-estesa.svg?v=2");
  --logo-bianco: url("../logo/logo-en-estesa-bianco.svg?v=2");
}
html[lang="en"] [data-area="maxillo"] {
  --logo: url("../logo/logo-en-estesa-maxillo-facciale.svg?v=2");
  --logo-bianco: url("../logo/logo-en-estesa-maxillo-facciale-bianco.svg?v=2");
}
html[lang="en"] [data-area="linfatica"] {
  --logo: url("../logo/logo-en-estesa-linfedema-e-lipedema.svg?v=2");
  --logo-bianco: url("../logo/logo-en-estesa-linfedema-e-lipedema-bianco.svg?v=2");
}

/* --- 19.1 Quattro punti (Why patients travel to Rome) --- */
.punti--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- 19.2 Card d'area senza link: niente sollevamento --- */
.competenze--statiche .competenza:hover { translate: none; }
.competenze--statiche .competenza__corpo p { margin-bottom: 0; }

/* --- 19.3 Lingue e informazioni pratiche --- */
.informazioni {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}
.informazioni__blocco {
  padding: clamp(24px, 4vw, 48px);
  background: var(--bianco);
  border-radius: var(--raggio-l);
}
.informazioni__blocco .intestazione { margin-bottom: 24px; }
.informazioni__blocco h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.lingue { display: grid; gap: 12px; }
.lingue li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--tinta);
  border-radius: var(--raggio-s);
}
.lingue .icona { margin-top: 1px; }
.pratiche { margin: 0; border-top: 1px solid var(--bordo); }
.pratiche > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 4px 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--bordo);
}
.pratiche dt { font-weight: 700; }
.pratiche dd { margin: 0; color: var(--testo-tenue); overflow-wrap: anywhere; }
.pratiche a { color: var(--blu); font-weight: 700; text-underline-offset: 3px; }

/* --- 19.4 Modulo da solo, centrato (senza la colonna delle sedi) --- */
.contatto--solo-modulo .modulo { max-width: 880px; margin-inline: auto; }

/* --- 19.5 Responsive --- */
@media (max-width: 1240px) {
  .punti--quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .informazioni { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .punti--quattro { grid-template-columns: 1fr; }
  .pratiche > div { grid-template-columns: 1fr; }
}


/* =================================================================
   20 · SCENA A TUTTA LARGHEZZA (.scena)
   Una foto vera a tutta larghezza, su fondo quasi nero, con
   vignettatura e una grana appena percettibile (effetto pellicola).
   Tre varianti di animazione in prova (data-variante, animazioni.js
   sez. 9). Senza JS o con "riduci movimento": foto ferma e visibile.
   ================================================================= */
.scena {
  position: relative;
  margin: 0;
  background: #0b0f18;
  overflow: hidden;
  --luce: 140%;                /* variante b: raggio del fascio di luce */
}
.scena__cornice {
  position: relative;
  height: clamp(420px, 72vh, 760px);
  overflow: hidden;
}
.scena__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 55%;
  filter: saturate(0.9) contrast(1.05);
  will-change: transform;
}
/* vignettatura + grana (SVG feTurbulence in linea, nessun file esterno) */
.scena__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 55% 55%, rgba(11, 15, 24, 0) 40%, rgba(11, 15, 24, 0.8) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* bande del "cinema" (variante c): partono a altezza 0, le apre il JS */
.scena__banda {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: #000;
  z-index: 1;
}
.scena__banda--alto { top: 0; }
.scena__banda--basso { bottom: 0; }

/* variante b: la foto si vede solo dentro un cerchio di luce, centrato
   sulle mani; il raggio (--luce) cresce con lo scroll */
.scena[data-variante="b"] .scena__foto {
  -webkit-mask-image: radial-gradient(circle at 55% 52%, #000 calc(var(--luce) - 30%), transparent var(--luce));
  mask-image: radial-gradient(circle at 55% 52%, #000 calc(var(--luce) - 30%), transparent var(--luce));
}

@media (max-width: 640px) {
  .scena__cornice { height: clamp(320px, 62vh, 520px); }
  .scena__foto { object-position: 50% 55%; }
}
@media print {
  .scena__foto { transform: none !important; -webkit-mask-image: none; mask-image: none; filter: none !important; }
  .scena__cornice { clip-path: none !important; }
  .scena__banda { display: none; }
}