@charset "utf-8";

/* ===========================================================================
   FISIOTERAPISTA.online — design system
   Palette e regole tipografiche derivate dal PDF madre.
   Priorità: leggibilità mobile, contrasto reale, zero orpelli.
   =========================================================================== */

/* --- 1. Font self-hosted (nessuna chiamata a CDN esterni) ---------------- */

/* Variabile 200–900 in un solo file: 29 KB per l'intero sito. */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Token ------------------------------------------------------------ */

:root {
  /* Palette istituzionale (PDF colori) */
  --blu:            #2B5DAA;   /* primario — blu medio dinamico */
  --blu-scuro:      #1F3A5F;   /* blu petrolio — footer, hero */
  --blu-hover:      #24509A;
  /* Quattro verdi, uno per ogni impiego. Non sono intercambiabili: ognuno è
     tarato sul contrasto del contesto in cui va usato.
       --verde         decorazione: icone, bordi, virgolette, segni grafici
       --verde-cta     FONDO dei pulsanti, con testo bianco sopra
       --verde-testo   TESTO verde su fondo chiaro
       --verde-chiaro  testo e link verdi sui fondi scuri (footer, fascia blu) */
  --verde:          #4CAF8D;   /* accento — verde sanitario, mai come testo */
  --verde-cta:      #2E8267;   /* fondo pulsante: 4,66:1 col bianco */
  --verde-testo:    #2B7A61;   /* testo: 5,17 bianco · 4,69 grigio · 4,57 verdino */
  --verde-chiaro:   #6BC9A8;   /* sui fondi scuri: 5,77:1 su #1F3A5F */
  --verde-cta-hover:#27795E;
  --verde-mov:      #3CB371;   /* secondario — verde movimento */
  --azzurro:        #6EC1E4;   /* accento chiaro */

  /* Neutri */
  --bianco:         #FAFAFA;   /* bianco caldo */
  --ghiaccio:       #EAF2FB;   /* bianco ghiaccio — titoli sui fondi blu */
  --grigio-chiaro:  #F2F4F6;   /* fondo sezioni alternate e card */
  --grigio-bordo:   #DEE3E9;
  --grigio-freddo:  #444444;
  --testo:          #2C2C2C;   /* corpo testo — mai nero puro */
  --testo-soft:     #55606D;

  /* Tipografia */
  --font: "Source Sans 3", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;

  /* Scala fluida — parte da 18px su mobile: leggibile senza zoom */
  --t-base: clamp(1.0625rem, 0.98rem + 0.42vw, 1.1875rem); /* 17 → 19 px */
  --t-lead: clamp(1.1875rem, 1.09rem + 0.5vw, 1.375rem);
  --t-h1:   clamp(1.875rem, 1.35rem + 2.6vw, 3.25rem);
  --t-h2:   clamp(1.5rem, 1.24rem + 1.3vw, 2.125rem);
  --t-h3:   clamp(1.25rem, 1.11rem + 0.7vw, 1.5rem);
  --t-h4:   clamp(1.0625rem, 1.02rem + 0.24vw, 1.1875rem);
  --t-small: 0.9375rem;

  /* Spazi */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 4rem;
  --sezione-y: clamp(3rem, 2rem + 5vw, 5.5rem);
  --contenuto: 74rem;   /* container largo */
  --lettura:   44rem;   /* misura di lettura ~72 caratteri */

  /* Forme */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-pill: 999px;
  --ombra-1: 0 1px 2px rgba(31, 58, 95, .06), 0 2px 8px rgba(31, 58, 95, .06);
  --ombra-2: 0 2px 4px rgba(31, 58, 95, .06), 0 8px 24px rgba(31, 58, 95, .09);
  --ombra-3: 0 4px 8px rgba(31, 58, 95, .08), 0 16px 40px rgba(31, 58, 95, .12);

  --tap: 48px; /* area di tocco minima */
}

/* --- 3. Reset ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bianco);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

/* Icona in mezzo a una riga di testo: cresce col testo e sta sulla linea di
   base, invece di stampare un quadrato di 20 px in mezzo alla frase. */
.prosa a > svg,
.duo__testo a > svg,
.sezione__intro a > svg { width: 1em; height: 1em; vertical-align: -.13em; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  color: var(--blu-scuro);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); margin-top: var(--sp-7); }
h3 { font-size: var(--t-h3); margin-top: var(--sp-6); }
h4 { font-size: var(--t-h4); margin-top: var(--sp-5); }

p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--blu-scuro); }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.35em; }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--verde-cta); }

a {
  color: var(--blu);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--blu-hover); }

blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 4px solid var(--verde);
  background: var(--grigio-chiaro);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--blu-scuro);
}
blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 700;
  color: var(--testo-soft);
}

:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: #cfe6dd; color: var(--blu-scuro); }

/* --- 4. Utility di layout ------------------------------------------------ */

.container {
  width: min(100% - 2.5rem, var(--contenuto));
  margin-inline: auto;
}
@media (min-width: 48rem) { .container { width: min(100% - 4rem, var(--contenuto)); } }

.prosa { max-width: var(--lettura); }
.prosa > :first-child { margin-top: 0; }

.sezione { padding-block: var(--sezione-y); }
.sezione--grigia { background: var(--grigio-chiaro); }
.sezione--blu {
  background: var(--blu-scuro);
  color: #E8EDF3;
}
.sezione--blu h2, .sezione--blu h3, .sezione--blu strong { color: #fff; }

.sezione__intro { max-width: var(--lettura); margin-bottom: var(--sp-7); }
.sezione__intro > :last-child { margin-bottom: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta-al-contenuto {
  position: absolute; left: var(--sp-4); top: -100%;
  z-index: 200;
  background: var(--blu-scuro); color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700; text-decoration: none;
}
.salta-al-contenuto:focus { top: 0; color: #fff; }

/* --- 5. Occhiello / etichette -------------------------------------------- */

.occhiello {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-cta);
}
.occhiello::before {
  content: ""; width: 22px; height: 2px; background: var(--verde);
  border-radius: 2px;
}
.sezione--blu .occhiello { color: var(--azzurro); }
.sezione--blu .occhiello::before { background: var(--azzurro); }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 700;
  background: var(--grigio-chiaro);
  color: var(--testo-soft);
  border: 1px solid var(--grigio-bordo);
}
.badge--verde { background: #E6F4EE; color: #1F6B52; border-color: #BFE3D5; }
.badge--blu   { background: #E7EEF9; color: #234B87; border-color: #C6D7EE; }

/* --- 6. Pulsanti --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn svg { width: 20px; height: 20px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario {
  background: var(--verde-cta);
  border-color: var(--verde-cta);
  color: #fff;
  box-shadow: var(--ombra-1);
}
.btn--primario:hover {
  background: var(--verde-cta-hover);
  border-color: var(--verde-cta-hover);
  color: #fff;
  box-shadow: var(--ombra-2);
}

.btn--blu {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
  box-shadow: var(--ombra-1);
}
.btn--blu:hover { background: var(--blu-hover); border-color: var(--blu-hover); color: #fff; }

.btn--secondario {
  background: #fff;
  border-color: var(--blu);
  color: var(--blu);
}
.btn--secondario:hover { background: #EDF2FB; color: var(--blu-hover); }

.btn--chiaro {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.btn--chiaro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.btn--largo { width: 100%; }
@media (min-width: 30rem) { .btn--largo { width: auto; } }

.btn-gruppo {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.btn-gruppo > .btn { flex: 1 1 100%; }
@media (min-width: 30rem) { .btn-gruppo > .btn { flex: 0 1 auto; } }

/* Link con freccia: segnale di direzione richiesto dalle linee guida */
.link-freccia {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  font-weight: 700;
  color: var(--blu);
  text-decoration: none;
}
.link-freccia svg { width: 18px; height: 18px; transition: transform .18s ease; }
.link-freccia:hover { color: var(--blu-hover); text-decoration: underline; }
.link-freccia:hover svg { transform: translateX(4px); }

/* --- 7. Header ----------------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--grigio-bordo);
}
/* Niente backdrop-filter qui: creerebbe un contenitore per i discendenti
   position:fixed e il pannello del menu resterebbe agganciato all'header. */
.header__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  min-height: 68px;
  padding-block: var(--sp-2);
}
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.logo img { width: 38px; height: 38px; }
.logo__testo {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--blu-scuro); line-height: 1.1;
}
.logo__testo span { font-weight: 400; color: var(--verde-cta); }

.header__azioni { display: flex; align-items: center; gap: var(--sp-2); }

.menu-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4);
  background: var(--grigio-chiaro);
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-pill);
  color: var(--blu-scuro); font: inherit; font-weight: 700; cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle[aria-expanded="true"] .icona-menu { display: none; }
.menu-toggle .icona-chiudi { display: none; }
.menu-toggle[aria-expanded="true"] .icona-chiudi { display: block; }

.nav { display: none; }
.nav__lista { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-2) 0;
  color: var(--blu-scuro); font-weight: 700; text-decoration: none;
}
.nav__desc {
  display: block; font-size: var(--t-small); font-weight: 400; color: var(--testo-soft);
}

/* Mobile: pannello a tutta larghezza */
@media (max-width: 61.99rem) {
  .nav {
    /* L'altezza vera dell'intestazione la scrive assets/js/main.js in
       --h-header: fissarla a mano lasciava scoperta una striscia di pagina. */
    position: fixed; inset: var(--h-header, 77px) 0 0;
    display: block;
    background: #fff;
    overflow-y: auto;
    /* Margini laterali veri: senza, i link toccavano i bordi dello schermo. */
    padding: var(--sp-5) var(--sp-5) var(--sp-8);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  body[data-menu="aperto"] .nav { transform: translateX(0); visibility: visible; }
  .nav__lista > li { border-bottom: 1px solid var(--grigio-bordo); }
  .nav__sub { list-style: none; margin: 0 0 var(--sp-4); padding: 0 0 0 var(--sp-4); }
  .nav__sub a {
    display: flex; align-items: center; min-height: var(--tap);
    color: var(--testo); text-decoration: none; font-weight: 600;
  }
  .nav__sub a::before {
    content: ""; width: 8px; height: 8px; margin-right: var(--sp-3);
    border-right: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
    transform: rotate(-45deg);
  }
  .nav__cta { margin-top: var(--sp-6); }
  .nav__cta .btn { width: 100%; }
}

/* Desktop: barra orizzontale con menu a tendina */
@media (min-width: 62rem) {
  .menu-toggle { display: none; }
  .nav { display: block; }
  .nav__lista { display: flex; align-items: center; gap: var(--sp-2); }
  .nav__lista > li { position: relative; }
  .nav__link {
    min-height: 44px; padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm); font-size: 1rem;
  }
  .nav__link:hover, .nav__link[aria-current="page"] { background: var(--grigio-chiaro); }
  .nav__link[aria-current="page"] { color: var(--blu); }
  .nav__desc { display: none; }
  .nav__sub {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 270px; margin: 0; padding: var(--sp-2);
    list-style: none;
    background: #fff; border: 1px solid var(--grigio-bordo);
    border-radius: var(--r-md); box-shadow: var(--ombra-3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  li:hover > .nav__sub, li:focus-within > .nav__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav__sub a {
    display: block; padding: var(--sp-3); border-radius: var(--r-sm);
    color: var(--testo); text-decoration: none; font-weight: 600; font-size: 1rem;
  }
  .nav__sub a:hover { background: var(--grigio-chiaro); color: var(--blu); }
  .nav__cta { display: none; }
}

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
  background: linear-gradient(160deg, var(--blu-scuro) 0%, #24528F 55%, var(--blu) 100%);
  color: #E8EDF3;
}
.hero::after {
  content: "";
  position: absolute; right: -14%; top: -30%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(110, 193, 228, .30), transparent 62%);
  pointer-events: none;
}
.hero__griglia {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-6);
}
@media (min-width: 62rem) {
  .hero__griglia { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--sp-8); }
}
.hero h1 { color: #fff; margin-bottom: var(--sp-5); }
.hero__lead { font-size: var(--t-lead); color: #D6E1EE; max-width: 34rem; }
.hero__lead strong { color: #fff; }
.hero .occhiello { color: var(--azzurro); }
.hero .occhiello::before { background: var(--azzurro); }

.hero__note {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--t-small); color: #C3D2E3;
}
.hero__note span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__note svg { width: 18px; height: 18px; color: var(--azzurro); }

/* --- 9. Card ------------------------------------------------------------- */

.griglia { display: grid; gap: var(--sp-4); }
@media (min-width: 34rem) { .griglia--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 34rem) { .griglia--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .griglia--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 34rem) { .griglia--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .griglia--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 34rem) { .griglia { gap: var(--sp-5); } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-md);
  box-shadow: var(--ombra-1);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card h3, .card h4 { margin-top: 0; margin-bottom: var(--sp-3); }
.card p { color: var(--testo-soft); }
.card > :last-child { margin-bottom: 0; margin-top: auto; }

.card--link:hover {
  box-shadow: var(--ombra-2);
  transform: translateY(-3px);
  border-color: #C6D7EE;
}
/* Tutta la card è cliccabile ma il link resta uno solo per gli screen reader */
.card--link .card__titolo a::after { content: ""; position: absolute; inset: 0; }
.card__titolo a { color: var(--blu-scuro); text-decoration: none; }
.card--link:hover .card__titolo a { color: var(--blu); }

.card__icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: #E6F4EE; color: var(--verde-cta);
}
.card__icona svg { width: 27px; height: 27px; }
.card__icona--blu { background: #E7EEF9; color: var(--blu); }

.card__numero {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  font-size: .8125rem; font-weight: 700; color: var(--testo-soft);
  background: var(--grigio-chiaro); border-radius: var(--r-pill);
  min-width: 30px; height: 26px; padding-inline: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}

.card--attesa { background: var(--grigio-chiaro); box-shadow: none; }
.card--attesa .card__titolo { color: var(--testo-soft); }

/* Card orizzontale a fascia, usata negli elenchi lunghi */
.card-fascia {
  position: relative;
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-left: 4px solid var(--verde);
  border-radius: var(--r-sm);
  transition: box-shadow .2s ease, border-left-color .2s ease;
}
.card-fascia:hover { box-shadow: var(--ombra-2); border-left-color: var(--verde-cta); }
.card-fascia h3 { font-size: var(--t-h4); margin: 0 0 var(--sp-1); }
.card-fascia p  { margin: 0; font-size: var(--t-small); color: var(--testo-soft); }
.card-fascia__freccia { margin-left: auto; align-self: center; color: var(--blu); }
.card-fascia__freccia svg { width: 22px; height: 22px; }

/* --- 10. Riquadri informativi ------------------------------------------- */

.riquadro {
  padding: var(--sp-5);
  background: var(--grigio-chiaro);
  border-radius: var(--r-md);
  border: 1px solid var(--grigio-bordo);
}
.riquadro > :first-child { margin-top: 0; }
.riquadro > :last-child { margin-bottom: 0; }
.riquadro--verde { background: #E6F4EE; border-color: #BFE3D5; }
.riquadro--blu   { background: #E7EEF9; border-color: #C6D7EE; }

.nota {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-5);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-left: 4px solid var(--blu);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.nota svg { width: 24px; height: 24px; color: var(--blu); margin-top: 3px; }
.nota > div > :last-child { margin-bottom: 0; }
.nota--limite { border-left-color: #C4842F; }
.nota--limite svg { color: #C4842F; }

/* Elenco con spunte / esclusioni */
.lista-segni { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.lista-segni li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0;
}
.lista-segni svg { width: 22px; height: 22px; margin-top: 4px; flex: none; }
.lista-segni--si svg { color: var(--verde-cta); }
.lista-segni--no svg { color: #B03A3A; }

/* --- 11. Tabelle --------------------------------------------------------- */

.tabella-wrap {
  overflow-x: auto;
  margin-block: var(--sp-5);
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
caption {
  padding: var(--sp-4) var(--sp-5);
  text-align: left; font-weight: 700; color: var(--blu-scuro);
  border-bottom: 1px solid var(--grigio-bordo);
}
th, td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--grigio-bordo);
}
thead th {
  background: var(--grigio-chiaro);
  color: var(--blu-scuro);
  font-weight: 700;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #FCFCFD; }

/* --- 12. FAQ (accordion) ------------------------------------------------- */

.faq { border-top: 1px solid var(--grigio-bordo); }
.faq details { border-bottom: 1px solid var(--grigio-bordo); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 60px; padding: var(--sp-4) 0;
  font-size: var(--t-h4); font-weight: 700; color: var(--blu-scuro);
  cursor: pointer; list-style: none;
}
/* La domanda e' un H3: il PDF madre marca cosi' ogni voce delle FAQ.
   Dentro <summary> deve pero' restare un titolo di riga, non un titolo di
   sezione: eredita corpo, peso e famiglia dal summary e non porta margini. */
.faq summary h3 {
  margin: 0; font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 12px; height: 12px; margin-right: 4px;
  border-right: 2.5px solid var(--verde-cta);
  border-bottom: 2.5px solid var(--verde-cta);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--blu); }
.faq__corpo { padding: 0 0 var(--sp-5); max-width: var(--lettura); }
.faq__corpo > :last-child { margin-bottom: 0; }

/* --- 13. Breadcrumb ------------------------------------------------------ */

.briciole {
  padding-block: var(--sp-4);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--grigio-bordo);
  background: var(--bianco);
}
.briciole ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  list-style: none; margin: 0; padding: 0;
}
.briciole li { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.briciole li + li::before {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid var(--testo-soft); border-bottom: 1.5px solid var(--testo-soft);
  transform: rotate(-45deg);
}
.briciole a { color: var(--testo-soft); }
.briciole [aria-current="page"] { color: var(--blu-scuro); font-weight: 700; }

/* --- 14. Intestazione di pagina interna ---------------------------------- */

.testata {
  padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  background: linear-gradient(170deg, #F4F7FB 0%, var(--grigio-chiaro) 100%);
  border-bottom: 1px solid var(--grigio-bordo);
}
.testata__lead { font-size: var(--t-lead); color: var(--testo-soft); max-width: var(--lettura); }
.testata__lead strong { color: var(--blu-scuro); }
.testata h1 { max-width: 22ch; }

/* --- 15. Placeholder immagine ------------------------------------------- */

.media {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3);
  aspect-ratio: 4 / 3;
  padding: var(--sp-5);
  background:
    repeating-linear-gradient(135deg, #EDF1F6 0 10px, #F4F7FB 10px 20px);
  border: 1px dashed #B9C6D6;
  border-radius: var(--r-lg);
  color: #7D8CA0;
  text-align: center;
  font-size: var(--t-small);
}
.media svg { width: 40px; height: 40px; color: #A7B6C8; }
.media--largo { aspect-ratio: 16 / 9; }
.media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }

/* --- 16. Indice laterale (pagine lunghe) --------------------------------- */

.pagina-doppia { display: grid; gap: var(--sp-6); }
@media (min-width: 64rem) {
  .pagina-doppia { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--sp-8); align-items: start; }
  .indice { position: sticky; top: 6rem; }
}
.indice {
  padding: var(--sp-5);
  background: var(--grigio-chiaro);
  border-radius: var(--r-md);
  border: 1px solid var(--grigio-bordo);
}
.indice h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em;
  /* E' un occhiello per misura e maiuscoletto, non per colore: come titolo
     su fondo chiaro resta nel blu del sito. */
  color: var(--blu-scuro);
}
.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.indice li { margin: 0; }
.indice a {
  display: block; padding: var(--sp-2) 0;
  color: var(--blu-scuro); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.indice a:hover { color: var(--blu); text-decoration: underline; }

/* --- 17. Versione e revisione (blocco fiducia) --------------------------- */

.revisione {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  background: var(--grigio-chiaro);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--testo-soft);
}
.revisione dl { display: grid; gap: var(--sp-2) var(--sp-4); margin: 0; }
@media (min-width: 34rem) { .revisione dl { grid-template-columns: max-content 1fr; } }
.revisione dt { font-weight: 700; color: var(--blu-scuro); }
.revisione dd { margin: 0; }

/* --- 18. Filtri (chip non interattivi in questa fase) -------------------- */

.filtri { display: grid; gap: var(--sp-5); }
.filtro__titolo {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-h4); font-weight: 700; color: var(--blu-scuro);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.chips li { margin: 0; }
.chips span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--sp-4);
  background: #fff; border: 1px solid var(--grigio-bordo); border-radius: var(--r-pill);
  font-size: var(--t-small); color: var(--testo);
}

/* --- 19. Blocco CTA di chiusura ------------------------------------------ */

.cta-finale {
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  background: linear-gradient(150deg, var(--blu-scuro), #24528F);
  border-radius: var(--r-lg);
  color: #E8EDF3;
  text-align: center;
}
.cta-finale h2 { margin-top: 0; }
.cta-finale p { max-width: 46rem; margin-inline: auto; }
.cta-finale .btn-gruppo { justify-content: center; }

/* --- 20. Footer ---------------------------------------------------------- */

.footer {
  padding-block: var(--sp-8) var(--sp-5);
  background: var(--blu-scuro);
  color: #C3D2E3;
  font-size: 1rem;
}
.footer__griglia { display: grid; gap: var(--sp-6); }
@media (min-width: 40rem) { .footer__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer__griglia { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-5); } }

.footer__marchio .logo__testo { color: #fff; }
.footer__marchio .logo__testo span { color: var(--verde); }
.footer__marchio p { margin-top: var(--sp-4); max-width: 30ch; }

.footer h2 {
  margin: 0 0 var(--sp-4); font-size: 1rem; color: #fff;
  text-transform: uppercase; letter-spacing: .05em;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-1); }
.footer a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: #C3D2E3; text-decoration: none;
}
.footer a:hover { color: var(--verde); text-decoration: underline; }

.footer__coda {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t-small);
}
.footer__coda ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__coda li { margin: 0; }

/* --- 21. Torna su -------------------------------------------------------- */

.su {
  /* In basso a SINISTRA: l'angolo destro e' occupato dalla scorciatoia alla
     ricerca, e due bottoni tondi impilati nello stesso angolo si somigliano
     troppo per capire al volo quale fa cosa. */
  position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  background: #fff; color: var(--blu-scuro);
  border: 1px solid var(--grigio-bordo); border-radius: 50%;
  box-shadow: var(--ombra-2);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s, transform .2s ease;
}
.su[data-visibile="true"] { opacity: 1; visibility: visible; }
.su:hover { transform: translateY(-3px); color: var(--blu); }
.su svg { width: 24px; height: 24px; }

/* --- 22. Form ------------------------------------------------------------ */

.campo { margin-bottom: var(--sp-5); }
.campo label {
  display: block; margin-bottom: var(--sp-2);
  font-weight: 700; color: var(--blu-scuro);
}
.campo__aiuto { display: block; margin-bottom: var(--sp-2); font-size: var(--t-small); color: var(--testo-soft); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  font: inherit; color: var(--testo);
  background: #fff;
  border: 1.5px solid var(--grigio-bordo); border-radius: var(--r-sm);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--blu); outline: 3px solid rgba(43, 93, 170, .22); outline-offset: 0;
}
.campo--check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.campo--check input { width: 22px; height: 22px; min-height: 0; margin-top: 4px; flex: none; }
.campo--check label { font-weight: 400; color: var(--testo); }

.cerca {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-md);
  box-shadow: var(--ombra-1);
}
.cerca input { flex: 1 1 14rem; min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
  font: inherit; border: 1.5px solid var(--grigio-bordo); border-radius: var(--r-sm); }
.cerca .btn { flex: 1 1 100%; }
@media (min-width: 34rem) { .cerca .btn { flex: 0 0 auto; } }

/* --- 23. Stampa ---------------------------------------------------------- */

@media print {
  .header, .footer, .su, .btn, .nav { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- 24. Aggiunte di dettaglio ------------------------------------------ */

/* Pulsante Accedi: su schermi stretti resta solo l'icona, l'etichetta è per
   gli screen reader. Sopra i 26rem torna esteso. */
.btn--accesso { padding-inline: var(--sp-3); }
.btn--accesso span { display: none; }
@media (min-width: 26rem) {
  .btn--accesso { padding-inline: var(--sp-4); }
  .btn--accesso span { display: inline; }
}

/* Voce di elenco non ancora pubblicata */
.card-fascia--attesa {
  background: var(--grigio-chiaro);
  border-left-color: var(--grigio-bordo);
  cursor: default;
}
.card-fascia--attesa:hover { box-shadow: none; border-left-color: var(--grigio-bordo); }
.card-fascia--attesa h3 { color: var(--testo-soft); }
.card-fascia--attesa .badge { align-self: center; margin-left: auto; white-space: nowrap; }

a.card-fascia { text-decoration: none; color: inherit; }
a.card-fascia h3 { color: var(--blu-scuro); }
a.card-fascia:hover h3 { color: var(--blu); }

/* Elenco verticale a fasce */
.elenco { display: grid; gap: var(--sp-3); }
.elenco > * { margin: 0; }

/* Griglia due colonne per confronti "cosa è / cosa non è" */
.confronto { display: grid; gap: var(--sp-4); }
@media (min-width: 48rem) { .confronto { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
.confronto .riquadro h3 { margin-top: 0; font-size: var(--t-h4); }

/* Passi numerati */
.passi { list-style: none; counter-reset: passo; margin: 0 0 var(--sp-5); padding: 0; }
.passi li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 var(--sp-5) 3.25rem;
  margin: 0;
}
.passi li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: var(--blu); color: #fff;
  border-radius: 50%; font-weight: 700; font-size: 1rem;
}
.passi li::after {
  content: ""; position: absolute; left: 1.125rem; top: 2.5rem; bottom: .25rem;
  width: 2px; background: var(--grigio-bordo);
}
.passi li:last-child::after { display: none; }
.passi h3 { margin: 0 0 var(--sp-2); font-size: var(--t-h4); }
.passi p { margin: 0; }

/* Elenco chiave/valore per schede professionista e simili */
.dati { display: grid; gap: var(--sp-3); margin: 0; }
@media (min-width: 34rem) { .dati { grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); } }
.dati dt { font-weight: 700; color: var(--blu-scuro); }
.dati dd { margin: 0; color: var(--testo-soft); }

/* Riquadro di ricerca in evidenza */
.cerca-blocco { max-width: 40rem; }
.cerca-blocco .campo__aiuto { margin-top: var(--sp-2); }
.esito-ricerca { margin-top: var(--sp-3); font-size: var(--t-small); color: var(--testo-soft); }

/* Logo partner in griglia */
.loghi { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (min-width: 48rem) { .loghi { grid-template-columns: repeat(4, 1fr); } }
.loghi > div {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: var(--sp-4);
  background: #fff; border: 1px solid var(--grigio-bordo); border-radius: var(--r-md);
  color: var(--testo-soft); font-weight: 700; text-align: center; font-size: var(--t-small);
}

/* Codice inline: usato per mostrare gli schemi di URL */
code {
  padding: 2px 7px;
  background: var(--grigio-chiaro);
  border: 1px solid var(--grigio-bordo);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .875em;
  color: var(--blu-scuro);
  overflow-wrap: anywhere;
}

/* Il segnaposto immagine nell'hero non deve schiacciarsi su mobile */
.hero .media {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .28);
  color: #C3D2E3;
}
.hero .media svg { color: rgba(255, 255, 255, .5); }

/* --- 25. Header su schermi stretti --------------------------------------- */

/* Sotto i 416 px non ci stanno logo esteso + Accedi + Menu senza sovrapporsi.
   Priorità a ciò che serve di più: il marchio leggibile e un pulsante Menu
   con la sua etichetta (chi non è pratico non riconosce le tre righe da sole).
   L'accesso all'area riservata resta in cima al pannello del menu e nel footer. */
@media (max-width: 25.99rem) {
  .header__azioni .btn--accesso { display: none; }
  .logo { min-width: 0; }
  .logo__testo { font-size: 1rem; }
}

/* Nel pannello mobile il pulsante Accedi va in cima, non in fondo. */
@media (max-width: 61.99rem) {
  .nav { display: flex; flex-direction: column; }
  .nav__cta { order: -1; margin: 0 0 var(--sp-5); }
  .nav__lista { order: 0; }
}

/* --- 26. Marchio --------------------------------------------------------- */

/* Il file del logo contiene già simbolo + scritta: nell'header non serve
   ripetere il nome in HTML. Nel footer, su fondo blu, la versione a colori
   non si leggerebbe: lì si usa il solo simbolo più la scritta in bianco. */
.logo--esteso img { width: auto; height: 34px; }
@media (min-width: 48rem) { .logo--esteso img { height: 40px; } }

.logo--marchio img { width: 40px; height: 40px; }

/* Ripristino: con il logo immagine il pulsante Accedi ci sta anche a 375 px. */
@media (max-width: 25.99rem) {
  .header__azioni .btn--accesso { display: inline-flex; }
}

/* --- 27. Niente scroll orizzontale --------------------------------------- */

/* Il pannello del menu, quando è chiuso, sta fuori schermo a destra e
   allargherebbe la pagina. `clip` lo taglia senza creare un contenitore di
   scorrimento, così l'header sticky continua a funzionare.

   ATTENZIONE — il clip sul solo body NON bastava: il pannello del menu è
   `position: fixed`, quindi il suo blocco contenitore è il viewport e non il
   body, e il clip del body non lo toccava. Su tutte e 24 le pagine la pagina
   scorreva a destra fino a 678 px su uno schermo da 390 (misurato). Il clip
   sull'elemento radice si propaga al viewport e ritaglia anche i fixed.
   Verificato: header sticky sempre a top 0, pannello del menu che si apre
   ancora da 0 a 390. Non sostituire `clip` con `hidden`: `hidden` creerebbe
   un contenitore di scorrimento e romperebbe lo sticky. */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
}

/* --- 28. Ritratti nelle schede persona ---------------------------------- */
.media--ritratto { aspect-ratio: 3 / 2; }

/* --- 29. Menu mobile: blocco dello scorrimento sotto al pannello --------- */

/* Il blocco sta sull'elemento radice, non sul body. Da quando `html` ha un
   overflow proprio (sezione 27), l'overflow del body non si propaga piu' al
   viewport: `body { overflow: hidden }` trasformava il body in un contenitore
   di scorrimento tutto suo, e l'header `position: sticky` cominciava a
   incollarsi al body invece che allo schermo. Risultato: aprendo il menu a
   pagina scorsa la barra spariva (misurata a -182 px).
   Bloccando `html` il viewport resta il contenitore di scorrimento, quindi lo
   sticky continua a funzionare e la barra resta al suo posto. */
@media (max-width: 61.99rem) {
  html:has(body[data-menu="aperto"]) { overflow-y: hidden; }
  /* Rete di sicurezza: se `:has()` non c'e', il blocco qui sopra non viene
     applicato e la pagina scorrerebbe sotto al pannello arrivati in fondo
     all'elenco. Questa riga ferma comunque il trascinamento. */
  .nav { overscroll-behavior: contain; }
}

/* --- 30. Ritmo verticale ------------------------------------------------- */

/* Testata e prima sezione sommavano i rispettivi spazi: su mobile diventava
   un buco. La prima sezione dopo la testata parte piu vicina. */
.testata + .sezione { padding-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
.briciole + .testata { padding-top: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }

/* ===========================================================================
   31. STRATO VISIVO — blocchi, illustrazioni, comparsa allo scroll
   Nessun colore nuovo: solo la palette già definita nei token.
   =========================================================================== */

:root {
  --r-blocco: 24px;
  --r-grande: 32px;
  --ombra-morbida: 0 2px 6px rgba(31, 58, 95, .05), 0 18px 44px rgba(31, 58, 95, .10);
  --ombra-alta:    0 4px 10px rgba(31, 58, 95, .07), 0 28px 70px rgba(31, 58, 95, .16);
}

/* --- 31.1 Comparsa allo scroll ------------------------------------------ */

/* Senza JavaScript tutto resta visibile: l'animazione è un di più, mai una
   condizione per leggere. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  transition:
    opacity   .8s cubic-bezier(.22, .61, .36, 1),
    transform .8s cubic-bezier(.22, .61, .36, 1),
    filter    .8s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform, filter;
}
.js [data-reveal].e-visibile {
  opacity: 1;
  transform: none;
  filter: none;
}
.js [data-reveal="sx"]    { transform: translate3d(-32px, 0, 0); }
.js [data-reveal="dx"]    { transform: translate3d(32px, 0, 0); }
.js [data-reveal="scala"] { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* --- 31.2 Etichetta a pillola ------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 7px 16px 7px 12px;
  background: #E6F4EE;
  border: 1px solid #C9E6DA;
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 700; letter-spacing: .02em;
  color: #1F6B52;
}
.pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde-cta); flex: none;
}
.pill--blu { background: #E7EEF9; border-color: #C6D7EE; color: #234B87; }
.pill--blu::before { background: var(--blu); }
.pill--chiara {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.pill--chiara::before { background: var(--azzurro); }

/* --- 31.3 Titolo a due toni --------------------------------------------- */

/* Prima parte piena, seconda smorzata: dà ritmo senza aggiungere colori. */

/* Scritta senza :not(.lettera) colpiva ogni lettera: vedi sezione 48. */

/* --- 31.4 Sfondi decorativi --------------------------------------------- */

.sezione, .hero, .testata { position: relative; isolation: isolate; }

.alone::before {
  content: ""; position: absolute; z-index: -1;
  width: 46rem; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(110, 193, 228, .20), rgba(110, 193, 228, 0) 66%);
  pointer-events: none;
}
.alone--dx::before { right: -18rem; top: -12rem; }
.alone--sx::before {
  left: -20rem; bottom: -16rem;
  background: radial-gradient(circle at 50% 50%,
              rgba(76, 175, 141, .17), rgba(76, 175, 141, 0) 66%);
}

/* --- 31.5 Illustrazioni -------------------------------------------------- */

/* Le illustrazioni sono scontornate: appoggiano su una macchia tenue che le
   àncora alla pagina ed evita che sembrino ritagli sospesi. */
.ill {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.ill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: linear-gradient(150deg, #EAF1FA 0%, #E6F4EE 100%);
}
.ill img { width: 100%; height: auto; }
.ill--blu::before {
  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(110, 193, 228, .18));
}
.ill--tonda::before { border-radius: 50%; }
.ill--netta::before { display: none; }

/* --- 31.6 Blocco illustrazione + testo ---------------------------------- */

.duo { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
/* Su schermo stretto il testo viene sempre per primo: una sezione che si apre
   con un'immagine, prima ancora del titolo, lascia il lettore senza contesto.
   Nei blocchi invertiti l'illustrazione e' prima nel codice, quindi qui va
   spostata in coda. */
@media (max-width: 55.99rem) {
  .duo--invertito > :first-child { order: 2; }
}
@media (min-width: 56rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo--stretto { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  /* Su desktop l'illustrazione passa a sinistra, per alternare il ritmo. */
  .duo--invertito > :first-child { order: 2; }
}
.duo__testo > :first-child { margin-top: 0; }
.duo__testo > :last-child  { margin-bottom: 0; }

/* Riquadro che si sovrappone all'illustrazione */
.duo__scheda {
  position: relative;
  width: min(100%, 25rem);
  margin: -3rem auto 0;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-blocco);
  box-shadow: var(--ombra-alta);
}
@media (min-width: 56rem) { .duo__scheda { margin: -4rem 0 0 auto; } }
.duo__scheda h3 { margin: 0 0 var(--sp-3); font-size: var(--t-h4); }
.duo__scheda .lista-segni { margin: 0; }
.duo__scheda .lista-segni li { padding: var(--sp-1) 0; font-size: var(--t-small); }

/* --- 31.7 Card rinnovate ------------------------------------------------- */

.card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-blocco);
  box-shadow: var(--ombra-morbida);
}
.card--link::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .2s ease;
  pointer-events: none;
}
.card--link:hover { transform: translateY(-6px); box-shadow: var(--ombra-alta); }
.card--link:hover::after { box-shadow: inset 0 0 0 2px #C6D7EE; }
.card--link .link-freccia svg { transition: transform .2s ease; }
.card--link:hover .link-freccia svg { transform: translateX(5px); }

.card__icona {
  width: 58px; height: 58px;
  border-radius: 18px;
  transition: transform .25s ease;
}
.card__icona svg { width: 29px; height: 29px; }
.card--link:hover .card__icona { transform: rotate(-6deg) scale(1.06); }

/* Card con illustrazione in testa */
.card--ill { padding: 0; overflow: hidden; }
/* Altezza fissa, non proporzione: le illustrazioni hanno formati diversi
   (alcune verticali) e con aspect-ratio la card centrale cresceva, lasciando
   i titoli sfalsati. */
.card--ill .card__media {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  height: clamp(160px, 15vw, 220px);
  padding: var(--sp-4);
  background: linear-gradient(155deg, #EAF1FA, #E6F4EE);
}
.card--ill .card__media img {
  width: auto; max-width: 86%;
  max-height: 100%;
  object-fit: contain;
}
.card--ill .card__corpo {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--sp-5);
}
.card--ill .card__corpo > :last-child { margin-top: auto; }
.card--ill h3 { margin-top: 0; }

/* --- 31.8 Fascia numeri -------------------------------------------------- */

.numeri { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); margin: 0; }
@media (min-width: 56rem) { .numeri { grid-template-columns: repeat(4, 1fr); } }
.numeri > div { text-align: center; }
.numeri dt {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--blu-scuro);
}
.sezione--blu .numeri dt { color: #fff; }
.numeri dd { margin: var(--sp-2) 0 0; font-size: var(--t-small); color: var(--testo-soft); }
.sezione--blu .numeri dd { color: #B9CBE0; }

/* --- 31.9 Percorso numerato --------------------------------------------- */

.percorso { display: grid; gap: var(--sp-3); counter-reset: tappa; }
.percorso__voce {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-blocco);
  text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.percorso__voce:hover { transform: translateY(-3px); box-shadow: var(--ombra-morbida); }
.percorso__voce::before {
  counter-increment: tappa;
  content: counter(tappa, decimal-leading-zero);
  font-size: 1.5rem; font-weight: 700; color: #B9C6D6;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.percorso__voce:hover::before { color: var(--verde-cta); }
.percorso__voce h3 { margin: 0 0 var(--sp-1); font-size: var(--t-h4); }
.percorso__voce p  { margin: 0; font-size: var(--t-small); color: var(--testo-soft); }
.percorso__voce > svg { width: 22px; height: 22px; color: var(--blu); transition: transform .2s ease; }
.percorso__voce:hover > svg { transform: translateX(5px); }

/* --- 31.10 Rifiniture ---------------------------------------------------- */

.riquadro, .nota, .indice, .revisione, .cerca, .media { border-radius: var(--r-blocco); }
.cta-finale { border-radius: var(--r-grande); }
.media { background: linear-gradient(155deg, #EAF1FA, #E6F4EE); }

/* ===========================================================================
   32. APERTURA CHIARA
   Il PDF colori avverte: "hero blu + footer blu identico senza respiro" è un
   errore. L'apertura passa quindi su fondo chiaro, il blu resta per la fascia
   centrale e per il footer. Le illustrazioni, in gamma blu, si leggono meglio.
   =========================================================================== */

.hero--chiaro {
  padding-block: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F8FC 55%, var(--grigio-chiaro) 100%);
  color: var(--testo);
  overflow: visible;
}
.hero--chiaro::after { display: none; }

.hero--chiaro .hero__griglia { gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 62rem) {
  .hero--chiaro .hero__griglia { grid-template-columns: 1.02fr .98fr; align-items: center; }
}

.hero--chiaro h1 { color: var(--blu-scuro); margin-bottom: var(--sp-5); }
.hero--chiaro .hero__lead { color: var(--testo-soft); max-width: 36rem; }
.hero--chiaro .hero__lead strong { color: var(--blu-scuro); }

/* Righe di garanzia sotto ai pulsanti */
.hero__prove {
  list-style: none; margin: var(--sp-6) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--grigio-bordo);
  display: grid; gap: var(--sp-3);
}
/* Due colonne solo se ci stanno davvero, altrimenti le righe si spezzano. */
.hero__prove { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.hero__prove li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0; font-size: var(--t-small); color: var(--testo-soft);
}
.hero__prove svg { width: 22px; height: 22px; color: var(--verde-cta); margin-top: 1px; }

/* Colonna con l'illustrazione e il riquadro sovrapposto */
.hero__media { position: relative; }
/* La scheda non si sovrappone all'illustrazione: in queste illustrazioni le
   persone occupano tutta la larghezza e qualunque riquadro sopra ne taglia
   una. Resta agganciata al bordo inferiore, sfalsata di poco. */
.hero__media .ill { padding: clamp(.25rem, 1vw, .75rem); }

.hero__scheda {
  position: relative;
  width: min(100%, 21rem);
  margin: -1.25rem auto 0;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-blocco);
  box-shadow: var(--ombra-alta);
}
@media (min-width: 62rem) {
  /* In basso a sinistra: li' l'illustrazione ha il lettino, non i volti. */
  .hero__scheda { width: min(100%, 23rem); margin: -1.25rem auto 0; }
}
.hero__scheda h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo-soft);
}
.hero__scheda .lista-segni { margin: 0; }
.hero__scheda .lista-segni li { padding: var(--sp-1) 0; font-size: var(--t-small); }
.hero__scheda .lista-segni svg { width: 20px; height: 20px; margin-top: 2px; }

/* --- 32.1 Intestazioni di sezione centrate ------------------------------ */

.sezione__intro--centro {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.sezione__intro--centro .pill { margin-inline: auto; }
.sezione__intro--centro > :last-child { margin-bottom: 0; }

.prosa--centrata { margin-inline: auto; }

/* --- 32.2 Citazione in evidenza ----------------------------------------- */



/* --- 32.3 Fascia blu ----------------------------------------------------- */

.sezione--blu { border-radius: 0; }
.sezione--blu .duo__testo p { color: #C9D6E5; }
.sezione--blu .duo__testo strong { color: #fff; }
.sezione--blu .link-freccia { color: var(--azzurro); }

/* --- 32.4 Ritmo ---------------------------------------------------------- */

/* Fra due blocchi duo consecutivi serve aria, non un muro di testo. */
.duo + .prosa--centrata { margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
.riquadro + .prosa--centrata,
.prosa--centrata + .riquadro { margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }

/* ===========================================================================
   33. TESTATA DELLE PAGINE INTERNE
   =========================================================================== */

.testata {
  padding-block: clamp(2rem, 1.4rem + 3vw, 4rem);
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F8FC 60%, var(--grigio-chiaro) 100%);
  border-bottom: 1px solid var(--grigio-bordo);
}

.testata__griglia { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 62rem) {
  .testata--ill .testata__griglia { grid-template-columns: 1.15fr .85fr; }
}

.testata h1 { max-width: 18ch; margin-bottom: var(--sp-4); }
.testata__lead {
  font-size: var(--t-lead);
  color: var(--testo-soft);
  max-width: 40rem;
  margin-bottom: 0;
}
.testata__lead strong { color: var(--blu-scuro); }

/* Su mobile l'illustrazione starebbe fra titolo e testo: meglio nasconderla e
   lasciare che il contenuto parta subito. */
.testata__media { display: none; }
@media (min-width: 62rem) { .testata__media { display: block; } }
.testata__media .ill { padding: clamp(.5rem, 1.5vw, 1.25rem); }

/* La testata è già una fascia chiara: la sezione dopo non deve ripetere lo
   stesso fondo attaccato. */
.testata + .sezione { padding-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }

/* ===========================================================================
   34. PAGINE DI TESTO
   Il contenuto lungo non deve sembrare un documento incollato in una pagina:
   colonna di lettura centrata, titoli riconoscibili, respiro fra i blocchi.
   =========================================================================== */

/* La colonna di lettura sta al centro dello schermo, non appoggiata a
   sinistra dentro un contenitore largo. */
.container > .prosa,
.container > .faq,
.container > .revisione { margin-inline: auto; }

/* --- 34.1 Titoli riconoscibili ------------------------------------------ */

/* Un segno verde sopra l'H2 dà il ritmo di lettura senza aggiungere colori. */
.prosa h2,
.sezione__intro h2,
.container > h2 { padding-top: var(--sp-5); }
.prosa h2::before,
.sezione__intro h2::before,
.container > h2::before {
  content: ""; display: block;
  width: 34px; height: 3px; margin-bottom: var(--sp-4);
  background: var(--verde); border-radius: 3px;
}
.prosa--centrata h2::before,
.sezione__intro--centro h2::before { margin-inline: auto; }
.citazione h3::before, .duo__testo h2::before { display: none; }

/* Gli H3 introducono un sotto-argomento: vanno staccati da quello sopra. */
.prosa h3 {
  margin-top: var(--sp-7);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--grigio-bordo);
}
.prosa h3:first-child { margin-top: 0; }

/* --- 34.2 Respiro fra i blocchi ----------------------------------------- */

.prosa > .nota,
.prosa > .riquadro,
.prosa > .tabella-wrap,
.prosa > .lista-segni { margin-block: var(--sp-6); }

/* Due sezioni di seguito con lo stesso fondo si leggono come un muro unico:
   quella successiva parte con una linea sottile a separarle. */


/* --- 34.3 Elenchi puntati ----------------------------------------------- */

/* Elenco lungo dentro una pagina di testo: diventa una colonna leggibile con
   il pallino verde allineato, non una lista di sistema. */
.prosa ul:not(.lista-segni):not(.chips):not(.elenco-box) { list-style: none; padding-left: 0; }
.prosa ul:not(.lista-segni):not(.chips):not(.elenco-box) > li {
  position: relative;
  padding-left: 1.75rem;
}
.prosa ul:not(.lista-segni):not(.chips):not(.elenco-box) > li::before {
  content: ""; position: absolute; left: .35rem; top: .72em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde-cta);
}

/* --- 34.4 Tabelle -------------------------------------------------------- */

.tabella-wrap { box-shadow: var(--ombra-morbida); background: #fff; }
thead th { font-size: var(--t-small); letter-spacing: .02em; text-transform: uppercase; }

/* --- 34.5 Schede di testo ------------------------------------------------ */

/* La griglia esce dalla colonna di lettura: tre schede affiancate hanno
   bisogno di piu' spazio di un paragrafo. */
/* La griglia esce dalla colonna di lettura per usare tutta la larghezza
   della pagina. Ora che la colonna comincia sul margine sinistro, il margine
   negativo non serve piu': basta allargarla fino al bordo del contenitore. */
.griglia--testo {
  /* Il margine di pagina e' un token (sezione 49.5): scritto a mano qui
     restava a 2,5 rem mentre la pagina era passata a 3, e la griglia sbordava
     di 8 px dal suo contenitore su schermo stretto. */
  width: min(100vw - var(--margine-pagina) * 2, var(--contenuto));
  margin-inline: 0;
  margin-block: var(--sp-6);
}
.card--testo { background: #fff; }
.card--testo h3 {
  margin: 0 0 var(--sp-3);
  padding: 0; border: 0;
  font-size: var(--t-h4);
}
.card--testo > :last-child { margin-bottom: 0; }
.card--testo p { font-size: var(--t-small); }

/* Nelle card normali l'ultimo elemento è la CTA e va spinta in fondo; in una
   scheda di solo testo quella regola apriva un vuoto sotto al titolo. */
.card--testo > :last-child { margin-top: 0; }
.card--testo { justify-content: flex-start; }

/* ===========================================================================
   35. IDENTITÀ E DINAMICA
   Tipografia display, header che si rimpicciolisce, pulsanti lucidi,
   comparsa lettera per lettera, contatori, decori, mockup dell'applicazione.
   Nessun colore fuori dalla palette dei token.
   =========================================================================== */

/* --- 35.1 Tipografia display -------------------------------------------- */


:root {
  /* Una sola famiglia su tutto il sito. Il carattere dei titoli viene dal
     peso e dalla spaziatura, non da un secondo font. */
  --font-display: var(--font);
  --t-h1: clamp(2.125rem, 1.45rem + 3.2vw, 4rem);
  --t-h2: clamp(1.625rem, 1.25rem + 1.9vw, 2.625rem);
}

h1, h2, .titolo-display {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
}
h1 { letter-spacing: -0.032em; }

/* Seconda riga del titolo: stesso carattere, peso e colore più leggeri. */


/* --- 35.2 Header che si rimpicciolisce ---------------------------------- */

.header {
  --altezza-barra: 76px;
  transition: box-shadow .3s ease;
}
.header__barra {
  min-height: var(--altezza-barra);
  transition: min-height .3s cubic-bezier(.22, .61, .36, 1);
}
.logo--esteso img { transition: height .3s cubic-bezier(.22, .61, .36, 1); }

/* Il vetro sta su uno pseudo-elemento, non sull'header: backdrop-filter
   sull'header lo renderebbe contenitore dei figli position:fixed e il
   pannello del menu resterebbe agganciato lì invece che allo schermo. */
.header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: #fff;
  transition: background-color .3s ease, backdrop-filter .3s ease;
}

body[data-scorso="si"] .header { --altezza-barra: 61px; box-shadow: 0 6px 26px rgba(31, 58, 95, .10); }
body[data-scorso="si"] .header::before {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
body[data-scorso="si"] .logo--esteso img { height: 30px; }
@media (min-width: 48rem) {
  body[data-scorso="si"] .logo--esteso img { height: 33px; }
}
body[data-scorso="si"] .btn--accesso,
body[data-scorso="si"] .menu-toggle { min-height: 42px; }

/* --- 35.3 Pulsanti lucidi ------------------------------------------------ */

/* Il punto più chiaro del gradiente resta sopra 4,5:1 con il testo bianco. */
.btn--primario {
  background-image: linear-gradient(180deg, #2E8267 0%, #2A785F 52%, #25674F 100%);
  border-color: #25674F;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 6px 18px rgba(38, 106, 84, .30);
}
.btn--primario:hover {
  background-image: linear-gradient(180deg, #35906F 0%, #2E8267 52%, #276E58 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 10px 26px rgba(38, 106, 84, .38);
}

.btn--blu {
  background-image: linear-gradient(180deg, #3468B6 0%, #2B5DAA 52%, #234E90 100%);
  border-color: #234E90;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 6px 18px rgba(35, 78, 144, .28);
}
.btn--blu:hover {
  background-image: linear-gradient(180deg, #3B73C6 0%, #3066B8 52%, #27579C 100%);
}

/* Riflesso che attraversa il pulsante al passaggio del mouse. */
.btn--primario, .btn--blu { position: relative; overflow: hidden; }
.btn--primario::before, .btn--blu::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.btn--primario:hover::before, .btn--blu:hover::before { left: 120%; }
@media (prefers-reduced-motion: reduce) {
  .btn--primario::before, .btn--blu::before { display: none; }
}

.cta-finale {
  background-image:
    radial-gradient(120% 140% at 12% 0%, rgba(110, 193, 228, .28), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(76, 175, 141, .26), transparent 55%),
    linear-gradient(150deg, var(--blu-scuro), #24528F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--ombra-alta);
}

/* --- 35.4 Comparsa lettera per lettera ---------------------------------- */

/* Il testo originale resta nell'aria-label del titolo: le lettere sono
   decorazione visiva e i lettori di schermo leggono la frase intera. */
.js .lettere .lettera {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em);
  filter: blur(7px);
  transition:
    opacity   .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1),
    filter    .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--l, 0) * 26ms);
  will-change: opacity, transform, filter;
}
.js .lettere.e-visibile .lettera { opacity: 1; transform: none; filter: none; }

/* Ogni parola resta intera: le lettere sono inline-block, e senza questo
   contenitore il browser andava a capo in mezzo alle parole. */
.lettere .parola { display: inline-block; white-space: nowrap; }

/* Rete di sicurezza per i titoli lunghi, anche senza JavaScript: se una sola
   parola e' piu' larga della colonna, meglio spezzarla che farla uscire. */
.titolo-doppio, .testata h1, .hero h1 { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
  .js .lettere .lettera { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* --- 35.5 Contatori ------------------------------------------------------ */

.numeri--riquadri { gap: var(--sp-4); }
.numeri--riquadri > div {
  padding: var(--sp-5) var(--sp-4);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-blocco);
  box-shadow: var(--ombra-morbida);
}
.sezione--blu .numeri--riquadri > div {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.numeri dt { font-variant-numeric: tabular-nums; }
.numeri dt .unita { font-size: .5em; vertical-align: .35em; margin-left: .06em; }

/* --- 35.6 Decori -------------------------------------------------------- */

/* Anello tratteggiato dietro alle illustrazioni, come nel riferimento. */
.decoro-anello { position: relative; }
/* Il cerchio tratteggiato resta un cerchio anche se la colonna e' larga:
   ancorato al centro e con proporzione fissa. */
.decoro-anello { display: grid; place-items: center; }
.decoro-anello > * { grid-area: 1 / 1; }
.decoro-anello::after {
  content: "";
  grid-area: 1 / 1;
  width: min(100%, 27rem); aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(76, 175, 141, .32);
  pointer-events: none;
  z-index: -1;
}
.sezione--blu .decoro-anello::after { border-color: rgba(110, 193, 228, .35); }

/* Griglia di punti */
.decoro-punti { position: relative; }
.decoro-punti::before {
  content: "";
  position: absolute; z-index: -1;
  width: 130px; height: 130px;
  right: -14px; top: -22px;
  background-image: radial-gradient(rgba(43, 93, 170, .22) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  pointer-events: none;
}

/* --- 35.7 Mockup dell'applicazione -------------------------------------- */

/* Finestre disegnate in HTML e CSS: nessuna immagine, si adattano da sole e
   restano nitide su qualunque schermo. */
.app {
  --app-bordo: #E3E9F1;
  position: relative;
  background: #fff;
  border: 1px solid var(--app-bordo);
  border-radius: 18px;
  box-shadow: var(--ombra-alta);
  overflow: hidden;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--testo);
}
.app__barra {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 14px;
  background: linear-gradient(180deg, #F7F9FC, #EFF3F8);
  border-bottom: 1px solid var(--app-bordo);
}
.app__semafori { display: flex; gap: 5px; }
.app__semafori i { width: 9px; height: 9px; border-radius: 50%; background: #D7DEE8; }
.app__titolo {
  font-size: .75rem; font-weight: 700; color: var(--testo-soft);
  letter-spacing: .02em;
}
.app__corpo { padding: var(--sp-4); display: grid; gap: var(--sp-3); }

/* Campo di ricerca finto */
.app-cerca {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--grigio-chiaro);
  border: 1px solid var(--app-bordo);
  border-radius: var(--r-pill);
  color: var(--testo-soft);
}
.app-cerca svg { width: 15px; height: 15px; }

/* Etichette filtro */
.app-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #EEF3F9;
  border: 1px solid var(--app-bordo);
  font-size: .6875rem; font-weight: 600; color: #3D5A80;
  white-space: nowrap;
}
.app-chip--attivo { background: #E6F4EE; border-color: #C4E4D6; color: #1F6B52; }
.app-chip__punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Riga risultato */
.app-riga {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--app-bordo);
  border-radius: 12px;
  background: #fff;
}
.app-riga--viva { border-color: #C4E4D6; background: #F4FBF8; }
.app-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(145deg, #CFE0F5, #A9C6EA);
  display: flex; align-items: center; justify-content: center;
  color: #2B5DAA; font-weight: 700; font-size: .75rem;
}
.app-avatar--verde { background: linear-gradient(145deg, #CDEBDD, #A8DCC4); color: #1F6B52; }
.app-riga strong { display: block; font-size: .8125rem; color: var(--blu-scuro); }
.app-riga span { font-size: .6875rem; color: var(--testo-soft); }

/* Barre finte al posto del testo */
.app-barra { height: 7px; border-radius: 4px; background: #E8EDF4; }
.app-barra--corta { width: 42%; }
.app-barra--media { width: 68%; }

/* Etichetta di stato */
.app-stato {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 700;
  background: #E6F4EE; color: #1F6B52;
}
.app-stato--blu { background: #E7EEF9; color: #234B87; }

/* Riquadro dato con numero grande */
.app-dato {
  padding: 12px;
  border: 1px solid var(--app-bordo);
  border-radius: 12px;
  background: linear-gradient(160deg, #F8FAFD, #F1F5FA);
}
.app-dato b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1; color: var(--blu-scuro);
}
.app-dato span { font-size: .6875rem; color: var(--testo-soft); }

/* Istogramma */
.app-grafico { display: flex; align-items: flex-end; gap: 7px; height: 84px; }
.app-grafico i {
  flex: 1; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #6EC1E4, #2B5DAA);
  opacity: .85;
}
.app-grafico i:last-child { background: linear-gradient(180deg, #6FD3AE, #2E8267); opacity: 1; }

/* Lettore video finto */
.app-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: linear-gradient(150deg, #24528F, var(--blu-scuro));
  display: flex; align-items: center; justify-content: center;
}
.app-video__play {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center;
  color: var(--blu-scuro);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.app-video__play svg { width: 20px; height: 20px; }
.app-avanzamento { height: 5px; border-radius: 3px; background: #E8EDF4; overflow: hidden; }
.app-avanzamento i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #4CAF8D, #2E8267); }

/* Scheda che si stacca dalla finestra */
.app-fluttuante {
  position: absolute;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--app-bordo);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(31, 58, 95, .16);
  font-size: .6875rem;
}

/* Impilaggio di due finestre */
.app-gruppo { position: relative; padding-bottom: 2.5rem; padding-right: 2rem; }
.app-gruppo > .app:last-child {
  position: absolute; right: 0; bottom: 0;
  width: min(62%, 17rem);
  z-index: 2;
}
@media (max-width: 34rem) {
  .app-gruppo { padding: 0; display: grid; gap: var(--sp-4); }
  .app-gruppo > .app:last-child { position: static; width: 100%; }
}

/* Anello di riempimento in SVG */
.anello { display: block; width: min(100%, 22rem); margin-inline: auto; }
.anello circle { fill: none; stroke-linecap: round; }
.anello .anello__fondo { stroke: #E1EBF5; }
.anello .anello__valore {
  stroke: url(#gradAnello);
  stroke-dasharray: var(--giro);
  stroke-dashoffset: var(--giro);
  transition: stroke-dashoffset 1.4s cubic-bezier(.22, .61, .36, 1);
}
.e-visibile .anello .anello__valore { stroke-dashoffset: var(--resto); }
.anello__testo {
  font-family: var(--font-display); font-weight: 700;
  fill: var(--blu-scuro); font-size: 38px; text-anchor: middle;
}
.anello__eti { fill: var(--testo-soft); font-size: 11px; text-anchor: middle;
  font-family: var(--font); font-weight: 700; letter-spacing: .08em; }
.sezione--blu .anello__testo { fill: #fff; }
.sezione--blu .anello__eti   { fill: #A8BFD8; }
.sezione--blu .anello .anello__fondo { stroke: rgba(255, 255, 255, .12); }

/* Un titolo con le lettere animate non deve muoversi anche come blocco:
   l'osservatore gli serve solo per far partire le lettere. */
.js [data-reveal="nessuno"] { opacity: 1; transform: none; filter: none; }

/* --- 35.8 Numero di passo e nota grafica -------------------------------- */

.passo-numero {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: 2.25rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(140deg, var(--azzurro), var(--verde-cta));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.duo__testo .passo-numero + h3 { margin-top: 0; }

.nota-grafica {
  max-width: var(--lettura);
  margin: var(--sp-7) auto 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--grigio-bordo);
  font-size: var(--t-small);
  color: var(--testo-soft);
  text-align: center;
}

/* Due blocchi duo di fila hanno bisogno di aria in mezzo. */
.duo + .duo { margin-top: clamp(2.5rem, 1.8rem + 3.5vw, 5rem); }

/* Sulla fascia blu i numeri e l'anello stanno larghi. */
.sezione--blu .duo--stretto { align-items: center; }

/* --- 36. Correzioni di impaginazione ------------------------------------- */

/* Una griglia a colonna singola non deve poter crescere oltre il contenitore:
   senza minmax(0,...) il contenuto piu' largo allarga la traccia e la riga
   sborda. Succedeva con il badge "Scheda in preparazione", che non andava
   a capo. */
.elenco,
.griglia,
.griglia--2, .griglia--3, .griglia--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) {
  .griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* I figli in flex devono poter rimpicciolire sotto il loro contenuto. */
.card-fascia > div,
.percorso__voce > div,
.app-riga > span { min-width: 0; }

/* Su schermo stretto la riga va a capo invece di allargarsi. */
.card-fascia { flex-wrap: wrap; }
.card-fascia--attesa .badge { white-space: normal; }
@media (max-width: 30rem) {
  .card-fascia--attesa .badge { margin-left: 0; }
}

/* Etichette leggibili anche da chi non ha una vista perfetta. */
.badge, .app-chip { font-size: 0.875rem; }
.app-chip { font-size: 0.75rem; }

/* L'indice alfabetico del glossario si usa col pollice: ogni lettera deve
   essere un bersaglio vero, non una riga di testo alta 25 px. */
.chips a {
  display: inline-flex;
  min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
  text-decoration: none;
  border-radius: var(--r-pill);
}
.chips a > span {
  min-height: 44px; min-width: 44px;
  justify-content: center;
  font-weight: 700; color: var(--blu);
}
.chips a:hover > span { background: #E7EEF9; border-color: #C6D7EE; }

/* I titoli dei blocchi illustrati sono titoli di sezione a tutti gli effetti:
   devono pesare piu' di un sottotitolo di card. */
.duo__testo h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.12; }

/* ===========================================================================
   37. GERARCHIA
   Le regole GEO impongono la prima frase di ogni paragrafo in grassetto.
   Finché quel grassetto aveva lo stesso colore e lo stesso peso dei titoli,
   la pagina era un muro di blu e i titoli non si distinguevano.
   Qui si separano i tre livelli: titolo, frase guida, testo.
   =========================================================================== */

/* --- 37.1 Tre livelli distinti ------------------------------------------ */

/* Titolo: blu scuro, peso pieno. È l'unico elemento con questo colore. */
h1, h2, h3, h4 { color: var(--blu-scuro); }

/* Frase guida in grassetto: stesso colore del testo, peso intermedio.
   Resta evidente nel paragrafo ma non compete con il titolo. */
.prosa strong, .duo__testo strong, .sezione__intro strong,
.card strong, .nota strong, .lista-segni strong, .testata__lead strong,
.riquadro strong, .faq__corpo strong {
  font-weight: 600;
  color: var(--testo);
}
/* Sui fondi scuri il contrasto si ottiene col bianco, non col peso.
   Attenzione: dentro una sezione scura ci sono superfici chiare (card,
   riquadri, finestre dei mockup). Lì il bianco sparirebbe. */
.sezione--blu strong, .cta-finale strong { color: #fff; font-weight: 600; }
/* La nota NON e' piu' in questo elenco. Quando la riga fu scritta, dentro una
   sezione blu la nota aveva ancora il suo fondo chiaro. La sezione 44 l'ha poi
   trasformata in una superficie a vetro — misurata rgba(255,255,255,.07) —
   e il grassetto scuro ci finiva sopra a 1,22:1: praticamente invisibile.
   Si vedeva in /partner-formativi-tecnici/, "FISIOTERAPISTA.online mantiene
   la propria autonomia…". Ora eredita il bianco dalla riga qui sopra.
   Sul blu sono a vetro anche riquadro e app: le loro righe restano solo
   perche' regole piu' avanti nel foglio le riportano gia' al chiaro. Se si
   toccano quelle, ricontrollare qui. */
.sezione--blu .card strong,
.sezione--blu .riquadro:not(.riquadro--chiaro) strong,
.sezione--blu .app strong,
.hero__scheda strong,
.duo__scheda strong { color: var(--testo); }

/* --- 37.2 Scala dei titoli ---------------------------------------------- */

:root {
  --t-h1: clamp(2.375rem, 1.5rem + 3.9vw, 4.25rem);
  --t-h2: clamp(1.875rem, 1.35rem + 2.4vw, 3rem);
  --t-h3: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
}

h2 { margin-top: var(--sp-8); }
h3 { margin-top: var(--sp-7); }
.sezione__intro h2, .duo__testo h2, .duo__testo h3,
.testata h1, .hero h1, .card h3, .card h4 { margin-top: 0; }

/* Un titolo di blocco illustrato pesa come un H2 di sezione. */
.duo__testo h3 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); line-height: 1.1; }

/* --- 37.3 Allineamento: tutto a sinistra -------------------------------- */

/* Titolo centrato e testo a bandiera sotto era una incoerenza: il lettore
   non capisce dove comincia la riga. Le intestazioni di sezione stanno a
   sinistra come il testo che introducono. */
.sezione__intro--centro {
  max-width: 52rem;
  margin-inline: 0;
  text-align: left;
}
.sezione__intro--centro .pill { margin-inline: 0; }
.sezione__intro--centro h2::before { margin-inline: 0; }

.prosa--centrata { margin-inline: 0; }
.container > .prosa,
.container > .faq,
.container > .revisione { margin-inline: 0; }

/* L'unico blocco centrato resta la chiusura, che è un invito e non lettura. */
.cta-finale { text-align: center; }
.cta-finale h2::before { margin-inline: auto; }

/* --- 37.4 Chiusura di pagina -------------------------------------------- */

/* Il riquadro blu non deve galleggiare su una striscia bianca incastrata fra
   due sezioni colorate: la chiusura ha una sua fascia, e se la precedente è
   già grigia le due si uniscono senza stacco. */
/* Il fondo della striscia di chiusura e' nella sezione 48. */
.sezione--grigia + .sezione--chiusura { padding-top: 0; }
.sezione--chiusura + .footer { margin-top: 0; }

.cta-finale {
  padding: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
}
.cta-finale h2 { margin-top: 0; max-width: 24ch; margin-inline: auto; }
.cta-finale p { color: #C9D8E8; }

/* --- 37.5 Card più solide ----------------------------------------------- */

.card__icona {
  width: 64px; height: 64px;
  border-radius: 20px;
}
.card__icona svg { width: 32px; height: 32px; }

/* I titoli delle card di una stessa griglia partono tutti dalla stessa riga
   anche quando uno va a capo e gli altri no. */
.griglia--4 .card__titolo,
.griglia--3 .card__titolo { min-height: 2.4em; }
@media (max-width: 33.99rem) {
  .griglia--4 .card__titolo,
  .griglia--3 .card__titolo { min-height: 0; }
}

.card p { font-size: 1rem; line-height: 1.6; }

/* --- 37.6 Respiro ------------------------------------------------------- */

.sezione__intro { margin-bottom: var(--sp-8); }
.duo__testo > .pill { margin-bottom: var(--sp-4); }

/* --- 37.7 Tipografia dentro le card ------------------------------------- */

/* In una griglia a tre o quattro colonne un titolo alla scala H3 va a capo e
   spinge giù il testo di quella sola card. Dentro le card la scala parte da
   un gradino più basso. */
.card h3, .card__titolo { font-size: var(--t-h4); line-height: 1.25; }
.griglia--2 .card h3, .griglia--2 .card__titolo {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);
}

/* Il titolo occupa comunque due righe: così il paragrafo di ogni card della
   stessa riga comincia alla stessa altezza. */
.griglia--3 .card__titolo,
.griglia--4 .card__titolo { min-height: 2.5em; }
@media (max-width: 33.99rem) {
  .griglia--3 .card__titolo,
  .griglia--4 .card__titolo { min-height: 0; }
}

.card p { font-size: 1rem; color: var(--testo-soft); }
.card .link-freccia { font-size: 1rem; }

/* L'occhiello verde sopra il titolo basta da solo: con la pillola sopra
   diventano due segnali per la stessa cosa. */
.sezione__intro .pill + h2::before,
.duo__testo .pill + h2::before,
.duo__testo .pill + h3::before { display: none; }
.sezione__intro .pill + h2,
.duo__testo .pill + h2 { padding-top: 0; }

/* ===========================================================================
   38. CARATTERE DEI TITOLI — Plus Jakarta Sans
   Geometrico, compatto, con un grassetto pieno: dà ai titoli la presenza che
   Source Sans, più morbido, non aveva. Il testo di lettura resta Source Sans.
   Sottoinsieme ai soli caratteri italiani: 15 KB (docs/_prepara-font.py).
   =========================================================================== */

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta-display.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Jakarta", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4,
.titolo-display,
.numeri dt,
.passo-numero,
.anello__testo,
.app-dato b,
.btn,
.nav__link,
.pill,
.card__titolo,
.faq summary,
.logo__testo {
  font-family: var(--font-display);
}

/* Jakarta ha un'asta più corta e un grassetto più pieno: i titoli reggono
   una spaziatura più stretta e un peso più alto senza appesantirsi. */
h1 { font-weight: 800; letter-spacing: -0.035em; }
h2 { font-weight: 800; letter-spacing: -0.03em; }
h3, h4 { font-weight: 700; letter-spacing: -0.02em; }

.numeri dt, .passo-numero { font-weight: 800; }
.btn { font-weight: 700; letter-spacing: -0.005em; }
.nav__link { font-weight: 600; }

/* --- 38.1 I titoli non si spezzano a metà parola ------------------------- */

/* Jakarta è più largo di Source Sans: alla vecchia dimensione massima
   "fisioterapisti in Italia" non entrava nella colonna e il browser
   spezzava la parola. Scala ridotta e sillabazione disattivata. */
:root {
  --t-h1: clamp(2.25rem, 1.5rem + 3.1vw, 3.5rem);
  --t-h2: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
}
h1, h2, h3, h4 {
  /* `break-word` spezza una parola solo quando davvero non ci sta, al
     contrario di `anywhere`/`break-all` che spezzavano "Italia" a meta'.
     Serve su mobile, dove "FISIOTERAPISTA.online" e' piu' largo della
     colonna. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

/* Nell'apertura la colonna del testo ha bisogno di più spazio del riquadro
   con l'illustrazione. */
@media (min-width: 62rem) {
  .hero--chiaro .hero__griglia { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}

/* --- 38.2 Blocco citazione ---------------------------------------------- */

/* Anche qui il grassetto deve stare sotto al titolo, non accanto. */
.citazione strong { font-weight: 600; color: var(--testo); }



/* ===========================================================================
   39. CORREZIONI
   =========================================================================== */

/* --- 39.1 Titolo a due toni --------------------------------------------- */

/* Il JavaScript spezza i titoli in <span class="lettera">: un selettore
   `.titolo-doppio > span` colpiva anche quelli e trascinava tutto il titolo
   a peso 400 e colore tenue. Qui si escludono esplicitamente. */
.titolo-doppio > span:not(.lettera):not(.parola) {
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.025em;
}


/* La prima riga resta quella del titolo: blu scuro, peso pieno. */
h1, h2 { color: var(--blu-scuro); }
h1 .lettera, h2 .lettera { color: inherit; font-weight: inherit; }

/* --- 39.2 Stacco fra le sezioni ----------------------------------------- */

/* Il padding non va mai azzerato: il testo finiva incollato alla linea di
   separazione fra un blocco e l'altro. Due sezioni con lo stesso fondo si
   uniscono riducendo lo spazio, non togliendolo. */
.sezione { padding-block: var(--sezione-y); }

.sezione:not(.sezione--grigia):not(.sezione--blu):not(.sezione--chiusura)
  + .sezione:not(.sezione--grigia):not(.sezione--blu):not(.sezione--chiusura),
.sezione--grigia + .sezione--grigia {
  padding-top: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
}

/* Dopo la testata la prima sezione parte un po' più vicina, ma non attaccata. */
.testata + .sezione { padding-top: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem); }

/* La chiusura si unisce alla sezione grigia che la precede senza stacco
   visibile, ma il riquadro blu mantiene la sua aria. */
.sezione--grigia + .sezione--chiusura { padding-top: 0; }

/* --- 39.3 Spazi minimi garantiti ---------------------------------------- */

/* Su mobile gli spazi verticali scendevano fino a 26 px e il testo finiva
   incollato alla linea fra un blocco e l'altro. Il minimo è ora 56 px in
   ogni punto in cui un contenuto tocca il bordo di una sezione. */
:root { --sezione-y: clamp(3.5rem, 2.4rem + 5vw, 6rem); }

.testata { padding-block: clamp(3.5rem, 2.4rem + 4vw, 5rem); }
.briciole + .testata { padding-top: clamp(3rem, 2.2rem + 3vw, 4rem); }
.testata + .sezione { padding-top: clamp(3.5rem, 2.6rem + 3.5vw, 4.5rem); }

.sezione:not(.sezione--grigia):not(.sezione--blu):not(.sezione--chiusura)
  + .sezione:not(.sezione--grigia):not(.sezione--blu):not(.sezione--chiusura),
.sezione--grigia + .sezione--grigia {
  padding-top: clamp(3.5rem, 2.4rem + 3.5vw, 4.5rem);
}

/* Il riquadro di chiusura ha bisogno d'aria come ogni altra sezione: lo
   stacco non si vede comunque, perché il fondo è lo stesso di quella sopra. */
.sezione--grigia + .sezione--chiusura { padding-top: var(--sezione-y); }

/* L'ultimo elemento di una sezione non deve appoggiarsi al bordo. */
.sezione > .container > :last-child { margin-bottom: 0; }
.nota-grafica { margin-bottom: 0; }

/* ===========================================================================
   40. BLOCCO CITAZIONE
   Due colonne: a sinistra la citazione, a destra il commento. Tutto a
   bandiera sinistra. Prima era un riquadro bianco con tre blocchi centrati
   uno sotto l'altro, che non si leggeva e non stava in piedi graficamente.
   =========================================================================== */

.citazione {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  margin-block: var(--sp-8);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-grande);
  box-shadow: var(--ombra-morbida);
  text-align: left;
}
@media (min-width: 56rem) {
  .citazione { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

/* --- La citazione ------------------------------------------------------- */

.citazione__voce {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(2.75rem, 2rem + 2.5vw, 4rem);
  border: 0;
  background: none;
  border-radius: 0;
}
/* Virgolette grandi al posto della cornice: segnano la citazione senza
   rubarle spazio. */
.citazione__voce::before {
  content: "\201C";
  position: absolute; left: -.06em; top: -.22em;
  font-size: clamp(4.5rem, 3rem + 6vw, 7rem);
  line-height: 1;
  font-weight: 800;
  color: var(--verde);
  opacity: .3;
}
.citazione__voce p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.35vw, 1.875rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--blu-scuro);
  text-wrap: pretty;
}
.citazione__voce cite {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-style: normal;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--blu-scuro);
}
.citazione__voce cite::before {
  content: ""; width: 28px; height: 2px; flex: none;
  background: var(--verde); border-radius: 2px;
}
.citazione__voce cite span { font-weight: 400; color: var(--testo-soft); }

/* --- Il commento -------------------------------------------------------- */

.citazione__nota h3 {
  margin: 0 0 var(--sp-3);
  padding: 0;
  border: 0;
  font-size: var(--t-h4);
}
.citazione__nota p { margin: 0; color: var(--testo); }

@media (min-width: 56rem) {
  /* Filo di separazione fra citazione e commento, al posto di uno stacco
     lasciato al caso. */
  .citazione__nota {
    padding-left: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    border-left: 1px solid var(--grigio-bordo);
  }
}

/* Card impilate su mobile: 16 px di distanza le facevano sembrare incollate.
   Lo stacco parte da 20 px e sale con lo schermo. */
.griglia, .elenco { gap: var(--sp-5); }
.percorso { gap: var(--sp-4); }

/* ===========================================================================
   41. AUDIT GENERALE — correzioni
   =========================================================================== */

/* --- 41.1 Contrasto sul footer ------------------------------------------ */

/* Il verde #4CAF8D sul blu del footer dava 4,28:1, sotto il minimo. Sui fondi
   scuri serve una versione più chiara dello stesso verde. */

.footer .logo__testo span,
.footer a:hover,
.footer a:focus-visible { color: var(--verde-chiaro); }

/* --- 41.2 Scala dei titoli: gradini distinguibili ----------------------- */

/* Il titolo dei blocchi illustrati arrivava a 40 px contro i 42 px degli H2:
   due passi indistinguibili non fanno gerarchia. L'H3 scende di un gradino
   pieno. */
.duo__testo h3 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem); }

/* --- 41.3 Etichetta dell'anello ----------------------------------------- */

/* Era a 11 px: troppo piccola per un dato che si legge. */
.anello__eti { font-size: 13px; }

/* --- 41.4 Verde per il testo piccolo ------------------------------------ */

/* --verde-cta è tarato per il testo bianco su fondo verde (pulsanti). Come
   colore di testo su fondo chiaro dava 4,23:1 sul grigio e 4,12:1 sul verde
   pallido delle pillole. Per il testo serve una versione più scura, che passa
   su tutti e quattro i fondi chiari del sito. */

.occhiello { color: var(--verde-testo); }
li::marker { color: var(--verde-testo); }

/* --- 41.5 La colonna di testo si allinea al resto della pagina ----------- */

/* Dove `container` e `prosa` stanno sullo stesso elemento, il centraggio del
   contenitore veniva applicato alla colonna stretta: il testo partiva 240 px
   più a destra di titoli, illustrazioni e card. Ora la colonna resta larga
   quanto serve per leggere, ma comincia sul margine della pagina. */
.container.prosa {
  width: min(100% - 2.5rem, var(--lettura));
  margin-inline: max(1.25rem, calc(50% - var(--contenuto) / 2)) auto;
}
@media (min-width: 48rem) {
  .container.prosa {
    width: min(100% - 4rem, var(--lettura));
    margin-inline: max(2rem, calc(50% - var(--contenuto) / 2)) auto;
  }
}

/* I ritratti nelle schede persona sono segnaposto: finché non arrivano le
   foto vere non devono occupare mezzo schermo. */
.media--ritratto { aspect-ratio: 5 / 3; }
.card .media--ritratto { max-height: 190px; }

/* Nella pagina di accesso il blocco centrale resta centrato: è una singola
   azione, non un testo da leggere. La pillola va centrata con lui. */
.testo-centrato { text-align: center; }
.testo-centrato .pill { margin-inline: auto; }

.card__icona--grande { width: 72px; height: 72px; border-radius: 24px; }
.card__icona--grande svg { width: 34px; height: 34px; }
.testo-centrato .card__icona,
.testo-centrato .btn-gruppo { margin-inline: auto; }
.testo-centrato .testata__lead { margin-inline: auto; }
.testo-centrato .btn-gruppo { justify-content: center; }

/* ===========================================================================
   42. TESTO AFFIANCATO DA UNA GRAFICA
   Le pagine di contenuto usavano il 59% della larghezza e lasciavano vuota
   tutta la parte destra. Qui il testo mantiene la sua misura di lettura e
   accanto compare una schermata della web app.
   =========================================================================== */

/* La colonna della grafica deve essere alta quanto la riga: con align-items:
   start si accorciava al proprio contenuto e position: sticky non aveva piu'
   spazio in cui scorrere. Il disegno restava inchiodato in cima e sotto di se'
   lasciava anche mille pixel di colonna vuota. */
.duo--lato { align-items: stretch; }
@media (min-width: 62rem) {
  .duo--lato { grid-template-columns: minmax(0, var(--lettura)) minmax(0, 1fr); }
}
.duo--lato > .duo__testo { max-width: var(--lettura); }

/* La grafica resta in vista mentre si scorre il testo accanto. */
.lato-fisso { position: relative; }
@media (min-width: 62rem) {
  .lato-fisso { position: sticky; top: 7rem; }
}
.lato-nota {
  margin: var(--sp-5) 0 0;
  font-size: var(--t-small);
  color: var(--testo-soft);
  text-align: center;
}
@media (max-width: 61.99rem) {
  /* Su schermo stretto la grafica sta sotto al testo, con la sua aria. */
  .duo--lato > .duo__lato { margin-top: var(--sp-6); }
}

/* --- Passi numerati dentro una finestra --------------------------------- */

.app-passi {
  list-style: none;
  counter-reset: tappa;
  margin: 0;
  padding: 0;
}
.app-passi li {
  counter-increment: tappa;
  position: relative;
  margin: 0;
  padding: 0 0 14px 34px;
}
.app-passi li::before {
  content: counter(tappa);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #E6F4EE;
  color: #1F6B52;
  font-size: .6875rem; font-weight: 700;
}
/* Filo che unisce un passo al successivo. */
.app-passi li::after {
  content: "";
  position: absolute; left: 10.5px; top: 24px; bottom: 2px;
  width: 1.5px;
  background: var(--app-bordo, #E3E9F1);
}
.app-passi li.app-passi__ultimo { padding-bottom: 0; }
.app-passi li.app-passi__ultimo::after { display: none; }
.app-passi strong { display: block; font-size: .8125rem; color: var(--blu-scuro); }
.app-passi span { font-size: .6875rem; color: var(--testo-soft); }

/* --- Riquadri dato affiancati ------------------------------------------- */

.app-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app-dati .app-dato b { font-size: 1.0625rem; }

/* Campi finti dentro una finestra della web app. */
.app-campo {
  padding: 9px 12px;
  background: var(--grigio-chiaro);
  border: 1px solid var(--app-bordo, #E3E9F1);
  border-radius: 10px;
  color: var(--testo-soft);
  font-size: .75rem;
}
.app-campo--alto { padding-block: 22px; }

/* ===========================================================================
   43. GRAFICHE ESPLICATIVE
   Diagrammi disegnati in CSS e SVG che accompagnano il testo (inc/grafiche.php).
   Un solo insieme di regole serve sia i fondi chiari sia i fondi blu: i colori
   passano tutti dalle variabili --gr-*, ridefinite piu' sotto per .sezione--blu.
   L'animazione si accende con .e-visibile, che assets/js/main.js mette sul
   blocco quando entra nello schermo; senza JS il disegno resta nel suo stato
   finale, quindi non sparisce mai.
   =========================================================================== */

.gr {
  --gr-fondo:    #fff;
  --gr-bordo:    #E3E9F1;
  --gr-riquadro: #F6F9FC;
  --gr-testo:    #1F3A5F;
  --gr-soft:     #55606D;
  --gr-linea:    #E8EDF4;
  --gr-verde:    #2E8267;
  --gr-verde-s:  #2B7A61;   /* verde da TESTO: 4,57:1 sul verdino */
  --gr-verde-t:  #E6F4EE;
  --gr-verde-b:  #C4E4D6;
  --gr-blu:      #2B5DAA;
  --gr-blu-t:    #E7EEF9;
  --gr-spento:   #B9C6D6;
  --gr-ombra:    0 2px 4px rgba(31, 58, 95, .06), 0 10px 28px rgba(31, 58, 95, .09);

  position: relative;
  padding: var(--sp-5);
  background: var(--gr-fondo);
  border: 1px solid var(--gr-bordo);
  border-radius: var(--r-lg);
  box-shadow: var(--gr-ombra);
  overflow: hidden;
}

/* Sui fondi scuri cambiano solo le variabili: nessuna regola duplicata. */
.sezione--blu .gr,
.gr--scuro {
  --gr-fondo:    rgba(255, 255, 255, .06);
  --gr-bordo:    rgba(255, 255, 255, .16);
  --gr-riquadro: rgba(255, 255, 255, .05);
  --gr-testo:    #FFFFFF;
  --gr-soft:     #C2D2E4;
  --gr-linea:    rgba(255, 255, 255, .14);
  --gr-verde:    #6BC9A8;
  --gr-verde-s:  #6BC9A8;
  --gr-verde-t:  rgba(107, 201, 168, .16);
  --gr-verde-b:  rgba(107, 201, 168, .34);
  --gr-blu:      #8FB6E8;
  --gr-blu-t:    rgba(143, 182, 232, .16);
  --gr-spento:   #8AA2BD;
  --gr-ombra:    none;
}

/* Velo diagonale appena percettibile: toglie la piattezza al riquadro.
   Sta sotto al contenuto, non sopra: un velo davanti al testo ne abbasserebbe
   il contrasto senza che nessun controllo automatico se ne accorga. */
.gr::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(150deg, rgba(110, 193, 228, .09), transparent 52%);
  pointer-events: none;
}
.gr__eti, .gr__corpo { position: relative; z-index: 1; }

.gr__eti {
  margin: 0 0 var(--sp-4);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gr-soft);
}
.gr__corpo { display: grid; gap: var(--sp-4); }

.gr .gr-piede {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--gr-soft);
}

/* --- 43.1 Motore dell'animazione ----------------------------------------
   Lo stato di partenza vale solo con il JS attivo; lo stato finale arriva con
   .e-visibile, che sta sull'antenato (il lato del blocco) o sulla grafica. */

.js .gr [style*="--ritardo"] {
  opacity: 0;
  transform: translateY(10px);
}
.js .e-visibile .gr [style*="--ritardo"],
.js .gr.e-visibile [style*="--ritardo"] {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease var(--ritardo, 0ms),
              transform .5s cubic-bezier(.22, .68, .3, 1) var(--ritardo, 0ms);
}

/* --- 43.4 Crediti: anello e triennio ------------------------------------- */

.gr-misura { display: flex; align-items: center; gap: var(--sp-4); }
.gr-anello { flex: 0 0 auto; width: 104px; height: 104px; }
.gr-anello circle { fill: none; stroke-linecap: round; }
.gr-anello__fondo { stroke: var(--gr-linea); }
.gr-anello__valore {
  stroke: var(--gr-verde);
  stroke-dasharray: 327;
  stroke-dashoffset: 82;
}
.js .gr-anello__valore { stroke-dashoffset: 327; }
.js .e-visibile .gr-anello__valore {
  stroke-dashoffset: 82;
  transition: stroke-dashoffset 1.5s cubic-bezier(.3, .8, .3, 1) .2s;
}

.gr-misura__testo b {
  display: block;
  font-size: 2.25rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gr-testo);
}
.gr-misura__testo span {
  display: block;
  margin-top: 4px;
  font-size: .8125rem; line-height: 1.4;
  color: var(--gr-soft);
}

.gr-anni { display: grid; gap: 9px; }
.gr-anni__riga {
  display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center;
  font-size: .8125rem; color: var(--gr-soft);
}
.gr-anni__barra {
  height: 8px; border-radius: 5px;
  background: var(--gr-linea);
  overflow: hidden;
}
.gr-anni__barra i {
  display: block; height: 100%; width: var(--pc);
  border-radius: 5px;
  background: linear-gradient(90deg, var(--gr-blu), var(--gr-verde));
}
.js .gr-anni__barra i { width: 0; }
.js .e-visibile .gr-anni__barra i {
  width: var(--pc);
  transition: width 1.1s cubic-bezier(.3, .8, .3, 1) var(--ritardo, 0ms);
}

/* --- 43.5 Settimana della FAD -------------------------------------------- */

.gr-giorni, .gr-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gr-giorni span {
  text-align: center;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gr-soft);
}
.gr-griglia i {
  height: 20px;
  border-radius: 6px;
  background: var(--gr-riquadro);
  border: 1px solid var(--gr-bordo);
}
.gr-griglia i.gr-griglia__acceso {
  background: var(--gr-verde);
  border-color: var(--gr-verde);
  box-shadow: 0 0 0 3px var(--gr-verde-t);
}
.js .e-visibile .gr-griglia__acceso {
  animation: gr-accendi .5s ease both var(--ritardo, 0ms);
}
@keyframes gr-accendi {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.gr-ripresa { display: grid; gap: 7px; }
.gr-ripresa > span:first-child { font-size: .8125rem; color: var(--gr-soft); }
.gr-ripresa__barra {
  height: 6px; border-radius: 4px;
  background: var(--gr-linea);
  overflow: hidden;
}
.gr-ripresa__barra i {
  display: block; height: 100%; width: 64%;
  border-radius: 4px;
  background: var(--gr-verde);
  transform-origin: left;
}
.js .e-visibile .gr-ripresa__barra i {
  animation: gr-riempi 1.4s cubic-bezier(.3, .8, .3, 1) both .4s;
}
@keyframes gr-riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 43.6 Il confine: due colonne a confronto ---------------------------- */

/* Sotto i 380 px la grafica e' larga meno di 300: due colonne affiancate
   scendono a 119 px e le parole lunghe escono dal riquadro. Sotto quella
   soglia le due liste si incolonnano. */
.gr-colonne { display: grid; gap: 10px; }
@media (min-width: 23.75rem) {
  .gr-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gr-colonna {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--gr-riquadro);
  border: 1px solid var(--gr-bordo);
}
.gr-colonna--si { background: var(--gr-verde-t); border-color: var(--gr-verde-b); }
.gr-colonna__cima {
  margin: 0 0 8px;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gr-soft);
}
.gr-colonna--si .gr-colonna__cima { color: var(--gr-verde-s); }
.gr-colonna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-colonna li {
  display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 7px; align-items: start;
  font-size: .8125rem; line-height: 1.35;
  color: var(--gr-testo);
}
/* Nessuna parola lunga puo' allargare la colonna oltre la sua misura. */
.gr-colonna li > span,
.gr-ordinato li,
.gr-albero ul li { overflow-wrap: anywhere; }
.gr-colonna li svg { margin-top: 2px; }
.gr-colonna--si li svg { color: var(--gr-verde); }
.gr-colonna--no li { color: var(--gr-soft); }
.gr-colonna--no li svg { color: var(--gr-spento); }

/* --- 43.9 Rete sul territorio ------------------------------------------- */

.gr-mappa { display: block; width: 100%; max-width: 260px; margin-inline: auto; }
/* Il contorno e' quello reale (Natural Earth 1:10m): con il tratto a 1.5 le
   coste frastagliate si impastavano, a 1.1 si leggono golfi e penisole. */
.gr-mappa__terra path {
  fill: var(--gr-blu-t);
  stroke: var(--gr-blu);
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: .85;
}
.gr-mappa__pin circle { fill: var(--gr-verde); }
/* Punto vuoto = consulenza a distanza, come nella legenda sotto. */
.gr-mappa__pin circle.gr-mappa__remoto { fill: var(--gr-fondo); stroke: var(--gr-blu); stroke-width: 2; }
.js .gr-mappa__pin circle { transform: scale(0); transform-origin: center; transform-box: fill-box; }
.js .e-visibile .gr-mappa__pin circle {
  animation: gr-pin .55s cubic-bezier(.34, 1.5, .5, 1) both var(--ritardo, 0ms);
}
@keyframes gr-pin { from { transform: scale(0); } to { transform: scale(1); } }
.gr-mappa__eco {
  fill: none;
  stroke: var(--gr-verde);
  stroke-width: 2;
  transform-origin: center;
  transform-box: fill-box;
  animation: gr-onda 3s ease-out infinite 1s;
}
@keyframes gr-onda {
  0%   { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(4); opacity: 0; }
}
.gr-mappa__piede { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.gr-mappa__piede span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8125rem; color: var(--gr-soft);
}
.gr-mappa__piede i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gr-verde);
}
.gr-mappa__piede i.gr-vuoto { background: none; border: 2px solid var(--gr-blu); }

/* --- 43.10 Glossario ----------------------------------------------------- */

.gr-lettere { display: flex; flex-wrap: wrap; gap: 5px; }
.gr-lettere span {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  font-size: .8125rem; font-weight: 700;
  color: var(--gr-soft);
  background: var(--gr-riquadro);
  border: 1px solid var(--gr-bordo);
}
.gr-lettere__viva {
  color: #fff !important;
  background: var(--gr-verde) !important;
  border-color: var(--gr-verde) !important;
}
.sezione--blu .gr-lettere__viva, .gr--scuro .gr-lettere__viva { color: #17384C !important; }
.gr-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.gr-voci li {
  padding: 9px 12px;
  background: var(--gr-riquadro);
  border: 1px solid var(--gr-bordo);
  border-left: 3px solid var(--gr-verde);
  border-radius: 4px 10px 10px 4px;
}
.gr-voci strong { display: block; font-size: .8125rem; color: var(--gr-testo); }
.gr-voci span { font-size: .8125rem; color: var(--gr-soft); }

/* --- 43.11 Zone del corpo ------------------------------------------------ */

.gr-corpo { display: block; width: 100%; max-width: 190px; margin-inline: auto; }
.gr-corpo__sagoma > * {
  fill: var(--gr-blu-t);
  stroke: var(--gr-blu);
  stroke-width: 2;
  stroke-linejoin: round;
}
/* Braccia e gambe: tratti spessi con estremita' tonde, non contorni. */
.gr-corpo__sagoma line {
  stroke-width: 15;
  stroke-linecap: round;
  opacity: .55;
}
.gr-corpo__zone circle {
  fill: var(--gr-verde);
  fill-opacity: .22;
  stroke: var(--gr-verde);
  stroke-width: 2;
  transform-origin: center;
  transform-box: fill-box;
  animation: gr-pulsa 3.2s ease-in-out infinite var(--ritardo, 0ms);
}
@keyframes gr-pulsa {
  0%, 100% { transform: scale(.86); fill-opacity: .16; }
  50%      { transform: scale(1.06); fill-opacity: .34; }
}
.gr-zone-eti {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
  justify-content: center;
}
.gr-zone-eti li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: .8125rem; font-weight: 700;
  color: var(--gr-testo);
  background: var(--gr-riquadro);
  border: 1px solid var(--gr-bordo);
  border-radius: var(--r-pill);
}
.gr-zone-eti i { width: 7px; height: 7px; border-radius: 50%; background: var(--gr-verde); }

/* --- 43.12 Esercizi a casa ----------------------------------------------- */

.gr-video {
  position: relative;
  display: grid; place-items: center;
  height: 108px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--gr-blu-t), var(--gr-verde-t));
  border: 1px solid var(--gr-bordo);
}
.gr-video__play {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
  background: var(--gr-verde);
  padding-left: 3px;
  box-shadow: 0 4px 14px rgba(31, 58, 95, .18);
}
.sezione--blu .gr-video__play, .gr--scuro .gr-video__play { color: #17384C; }
.js .e-visibile .gr-video__play { animation: gr-batti 2.8s ease-in-out infinite 1s; }
@keyframes gr-batti {
  0%, 88%, 100% { transform: scale(1); }
  94%           { transform: scale(1.09); }
}
.gr-video__durata {
  position: absolute; right: 10px; bottom: 9px;
  padding: 2px 8px;
  font-size: .8125rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gr-testo);
  background: var(--gr-fondo);
  border-radius: var(--r-pill);
}
.gr-dati { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gr-dati > div {
  padding: var(--sp-3);
  text-align: center;
  background: var(--gr-riquadro);
  border: 1px solid var(--gr-bordo);
  border-radius: var(--r-md);
}
.gr-dati b {
  display: block;
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gr-testo);
}
.gr-dati span { font-size: .8125rem; color: var(--gr-soft); }
.gr-costanza { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gr-costanza i {
  display: grid; place-items: center;
  height: 26px;
  border-radius: 8px;
  color: #fff;
  background: var(--gr-riquadro);
  border: 1px solid var(--gr-bordo);
}
.gr-costanza i.gr-costanza__fatto { background: var(--gr-verde); border-color: var(--gr-verde); }
.sezione--blu .gr-costanza__fatto, .gr--scuro .gr-costanza__fatto { color: #17384C; }
.js .gr-costanza i { opacity: 0; transform: scale(.6); }
.js .e-visibile .gr-costanza i {
  opacity: 1; transform: none;
  transition: opacity .4s ease var(--ritardo, 0ms), transform .4s cubic-bezier(.34, 1.4, .5, 1) var(--ritardo, 0ms);
}

/* --- 43.15 Albero della struttura ---------------------------------------- */

.gr-albero, .gr-albero ul { list-style: none; margin: 0; padding: 0; }
.gr-albero { display: grid; gap: 11px; }
.gr-albero > li > strong {
  display: block;
  margin-bottom: 6px;
  font-size: .8125rem;
  color: var(--gr-testo);
}
.gr-albero ul { display: grid; gap: 5px; padding-left: 13px; border-left: 2px solid var(--gr-linea); }
.gr-albero ul li {
  position: relative;
  padding: 5px 10px 5px 14px;
  font-size: .8125rem;
  color: var(--gr-soft);
  background: var(--gr-riquadro);
  border-radius: 8px;
}
.gr-albero ul li::before {
  content: "";
  position: absolute; left: -13px; top: 50%;
  width: 11px; height: 2px;
  background: var(--gr-linea);
}

/* --- 43.17 La giornata di lavoro ----------------------------------------- */

.gr-giornata {
  display: flex;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gr-bordo);
}
.gr-giornata__fetta { width: var(--pc); }
.gr-giornata__fetta--a { background: var(--gr-blu); }
.gr-giornata__fetta--b { background: color-mix(in srgb, var(--gr-blu) 55%, transparent); }
.gr-giornata__fetta--c { background: color-mix(in srgb, var(--gr-blu) 28%, transparent); }
.gr-giornata__fetta--d { background: var(--gr-verde); }
.js .gr-giornata__fetta { width: 0; }
.js .e-visibile .gr-giornata__fetta {
  width: var(--pc);
  transition: width .9s cubic-bezier(.3, .8, .3, 1) var(--ritardo, 0ms);
}

.gr-fette { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.gr-fette li {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center;
  font-size: .8125rem;
  color: var(--gr-soft);
}
.gr-fette i { width: 12px; height: 12px; border-radius: 4px; }
.gr-fette b { color: var(--gr-testo); font-variant-numeric: tabular-nums; }
/* L'ultima riga e' quella che il testo accanto sta raccontando. */
.gr-fette li:last-child { color: var(--gr-testo); font-weight: 700; }

/* ===========================================================================
   44. RITMO DEL CONTRASTO
   Il sito alternava soltanto bianco e grigio: venti schermate di seguito con
   la stessa luminosita' fanno perdere il segno di dove si e' arrivati. Qui il
   fondo blu diventa una terza voce, usata come punteggiatura: una o due volte
   per pagina, sul blocco che vale la pena ricordare.
   Tutto cio' che puo' finire dentro una sezione blu ha qui la sua versione a
   contrasto invertito, verificata sul fondo #1F3A5F.
   =========================================================================== */

.sezione--blu {
  position: relative;
  /* Non un blu piatto: due sorgenti di luce fredde negli angoli. */
  background:
    radial-gradient(70rem 34rem at 12% -10%, rgba(110, 193, 228, .16), transparent 62%),
    radial-gradient(52rem 30rem at 96% 108%, rgba(76, 175, 141, .16), transparent 60%),
    var(--blu-scuro);
  color: #E3EBF4;
}
.sezione--blu strong, .sezione--blu b, .sezione--blu dt { color: #fff; }

/* Testo di servizio: 7,6:1 sul fondo, sopra il minimo anche in corpo piccolo. */
.sezione--blu .prosa,
.sezione--blu p,
.sezione--blu li,
.sezione--blu dd,
.sezione--blu .sezione__intro { color: #DCE6F1; }
.sezione--blu .testo-soft,
.sezione--blu .lato-nota,
.sezione--blu figcaption { color: #B9CBE0; }

/* I pulsanti restano fuori: sono link, ma hanno un fondo proprio e un testo
   gia' tarato su quello. Senza :not(.btn) il testo bianco del pulsante verde
   diventava azzurro su verde. */
.sezione--blu a:not(.btn) { color: var(--azzurro); text-decoration-color: rgba(110, 193, 228, .5); }
.sezione--blu a:not(.btn):hover { color: #97D6F0; text-decoration-color: currentColor; }
.sezione--blu :focus-visible { outline-color: var(--azzurro); }

/* Riquadri e note: vetro chiaro sul blu, mai il bianco pieno che accecherebbe. */
.sezione--blu .riquadro,
.sezione--blu .nota,
.sezione--blu .revisione,
.sezione--blu .indice {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: #DCE6F1;
}
.sezione--blu .riquadro--verde { background: rgba(107, 201, 168, .14); border-color: rgba(107, 201, 168, .32); }
.sezione--blu .riquadro--blu   { background: rgba(110, 193, 228, .13); border-color: rgba(110, 193, 228, .30); }
.sezione--blu .nota { border-left-color: var(--azzurro); }
.sezione--blu .nota svg { color: var(--azzurro); }
.sezione--blu .nota--limite { border-left-color: #E7B45C; }
.sezione--blu .nota--limite svg { color: #E7B45C; }

.sezione--blu .lista-segni--si svg { color: var(--verde-chiaro); }
.sezione--blu .lista-segni--no svg { color: #F09393; }

.sezione--blu .faq { border-top-color: rgba(255, 255, 255, .18); }
.sezione--blu .faq details { border-bottom-color: rgba(255, 255, 255, .18); }
.sezione--blu .faq summary { color: #fff; }
.sezione--blu .faq summary:hover { color: var(--azzurro); }
.sezione--blu .faq summary::after { border-color: var(--azzurro); }

.sezione--blu .badge {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #DCE6F1;
}
.sezione--blu .badge--verde { background: rgba(107, 201, 168, .16); border-color: rgba(107, 201, 168, .34); color: var(--verde-chiaro); }
.sezione--blu .badge--blu   { background: rgba(110, 193, 228, .16); border-color: rgba(110, 193, 228, .34); color: var(--azzurro); }

.sezione--blu .pill {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #DCE6F1;
}

/* Il pulsante secondario ha fondo bianco pieno: sul blu va svuotato, o resta
   una pastiglia bianca con dentro del testo bianco. */
.sezione--blu .btn--secondario {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.sezione--blu .btn--secondario:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  color: #fff;
}
.sezione--blu .link-freccia { color: var(--azzurro); }
.sezione--blu .link-freccia:hover { color: #97D6F0; }

/* Le card restano chiare: sono superfici cliccabili, il salto le stacca. */
.sezione--blu .card,
.sezione--blu .card-fascia,
.sezione--blu .percorso__voce { color: var(--testo); }
.sezione--blu .card p,
.sezione--blu .card-fascia p,
.sezione--blu .percorso__voce p { color: var(--testo-soft); }
.sezione--blu .card h3, .sezione--blu .card__titolo a,
.sezione--blu .card-fascia h3 { color: var(--blu-scuro); }
.sezione--blu .card a:not(.btn) { color: var(--blu); }

/* Le finestre della web app sul blu: stesso trattamento a vetro delle grafiche. */
.sezione--blu .app {
  --app-bordo: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
  color: #DCE6F1;
}
.sezione--blu .app__barra { background: rgba(255, 255, 255, .06); }
.sezione--blu .app__semafori i { background: rgba(255, 255, 255, .26); }
.sezione--blu .app__titolo,
.sezione--blu .app-riga span,
.sezione--blu .app-dato span,
.sezione--blu .app-passi span,
.sezione--blu .app-campo { color: #B9CBE0; }
.sezione--blu .app-riga strong,
.sezione--blu .app-dato b,
.sezione--blu .app-passi strong { color: #fff; }
.sezione--blu .app-cerca,
.sezione--blu .app-campo,
.sezione--blu .app-chip { background: rgba(255, 255, 255, .07); color: #C2D2E4; }
.sezione--blu .app-riga { background: rgba(255, 255, 255, .04); }
.sezione--blu .app-riga--viva { background: rgba(107, 201, 168, .14); border-color: rgba(107, 201, 168, .32); }
.sezione--blu .app-chip--attivo { background: rgba(107, 201, 168, .16); border-color: rgba(107, 201, 168, .34); color: var(--verde-chiaro); }
.sezione--blu .app-avatar { background: rgba(255, 255, 255, .12); color: #fff; }
.sezione--blu .app-avatar--verde { background: rgba(107, 201, 168, .24); color: #fff; }
.sezione--blu .app-stato { background: rgba(107, 201, 168, .16); color: var(--verde-chiaro); }
.sezione--blu .app-stato--blu { background: rgba(110, 193, 228, .16); color: var(--azzurro); }
.sezione--blu .app-barra,
.sezione--blu .app-avanzamento { background: rgba(255, 255, 255, .12); }

/* ===========================================================================
   45. TESTO AFFIANCATO — rifiniture
   =========================================================================== */

/* Quando la grafica sta a sinistra il testo mantiene la sua misura di lettura
   e il disegno prende il resto: alternare il lato spezza la monotonia della
   colonna sempre uguale. */
/* Un blocco affiancato che non apre la sezione va staccato da cio' che lo
   precede, altrimenti i due contenitori si toccano. */
.duo--staccato { margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }

@media (min-width: 62rem) {
  .duo--lato-sx { grid-template-columns: minmax(0, 1fr) minmax(0, var(--lettura)); }
  .duo--lato-sx > .duo__testo { order: 2; }
  .duo--lato-sx > .duo__lato  { order: 1; }
}

/* La grafica non deve mai diventare piu' larga del suo disegno. */
.lato-fisso > .gr,
.lato-fisso > .app,
.lato-fisso > .app-gruppo { max-width: 30rem; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .gr *,
  .gr-mappa__eco,
  .gr-corpo__zone circle,
  .gr-sparso__chip { animation: none !important; }
}

/* ===========================================================================
   46. APERTURA BLU
   Il PDF colori avverte che "hero blu + footer blu identico senza respiro" e'
   un errore: due blocchi dello stesso identico colore, uno in apertura e uno
   in chiusura, schiacciano tutto quello che sta in mezzo. L'avvertimento
   riguarda il blu *identico*, non il blu: qui l'apertura e' un blu piu' chiaro
   e piu' vivo del footer, con la luce che sale da sinistra, e sotto di essa la
   prima sezione e' chiara. Il respiro c'e'.

   La sezione porta anche la classe .sezione--blu, quindi eredita gia' tutto il
   trattamento a contrasto invertito della sezione 44: pillole, elenchi con i
   segni, pulsanti secondari, badge. Qui restano solo le parti proprie
   dell'apertura.
   =========================================================================== */

.hero--blu {
  padding-block: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);
  /* Piu' chiaro del footer (#1F3A5F) e non piatto: la luce sale da sinistra. */
  background:
    radial-gradient(58rem 40rem at 6% -20%, rgba(110, 193, 228, .30), transparent 60%),
    radial-gradient(46rem 34rem at 92% 118%, rgba(76, 175, 141, .26), transparent 58%),
    linear-gradient(168deg, #23538F 0%, #1F3A5F 100%);
  overflow: visible;
}
.hero--blu::after { display: none; }

.hero--blu .hero__griglia { gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 62rem) {
  .hero--blu .hero__griglia { grid-template-columns: 1.02fr .98fr; align-items: center; }
}

.hero--blu h1 { margin-bottom: var(--sp-5); }
/* Il colore delle due righe e' nella sezione 48. */
.hero--blu .hero__lead { color: #D7E3F1; max-width: 36rem; }
.hero--blu .hero__lead strong { color: #fff; }

.hero--blu .hero__prove { border-top-color: rgba(255, 255, 255, .22); }
.hero--blu .hero__prove li { color: #C2D2E4; }
.hero--blu .hero__prove svg { color: var(--verde-chiaro); }

/* La scheda sovrapposta diventa vetro, non un rettangolo bianco: un riquadro
   chiaro annidato dentro il blu costringerebbe a ri-invertire tutto quello che
   sta dentro (e' l'errore che ha gia' reso invisibile un grassetto una volta). */
.hero--blu .hero__scheda {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.hero--blu .hero__scheda h2 { color: var(--ghiaccio); }
.hero--blu .hero__scheda .lista-segni li { color: #E3EBF4; }
.hero--blu .hero__scheda .lista-segni li strong { color: #fff; }

/* L'illustrazione e' scontornata su fondo trasparente: sul blu regge, ma un
   alone morbido dietro la stacca dal fondo invece di lasciarla galleggiare. */
.hero--blu .hero__media .ill::before {
  content: "";
  position: absolute; inset: 4% 2% 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .16), transparent 68%);
}
.hero--blu .hero__media .ill { position: relative; isolation: isolate; }

/* ===========================================================================
   47. SCORCIATOIA ALLA RICERCA (inc/aiuto.php)
   Un fisioterapista in basso a destra con una nuvoletta. Sta sopra a tutto ma
   sotto al pannello del menu, e non copre mai il pulsante "torna su", che gli
   si sposta sopra.
   =========================================================================== */

.aiuto {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 95;
  display: flex;
  flex-direction: column;        /* la nuvoletta sta sopra al ritratto */
  align-items: flex-end;
  gap: var(--sp-2);
  pointer-events: none;          /* solo i figli sono cliccabili */
}
.aiuto > * { pointer-events: auto; }

/* --- Il ritratto --------------------------------------------------------- */

.aiuto__link {
  position: relative;
  display: block;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: linear-gradient(158deg, #EAF1FA, #E1F2EA);
  border: 3px solid #fff;
  box-shadow: 0 6px 22px rgba(31, 58, 95, .22);
  text-decoration: none;
  transition: transform .22s cubic-bezier(.34, 1.4, .5, 1), box-shadow .22s ease;
}
.aiuto__link:hover,
.aiuto__link:focus-visible { transform: scale(1.07) translateY(-2px); box-shadow: 0 10px 28px rgba(31, 58, 95, .3); }

/* Anello verde che pulsa: dice "qui si clicca" senza aggiungere altro testo. */
.aiuto__link::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  opacity: 0;
  animation: aiuto-eco 3.2s ease-out infinite 1.2s;
}
@keyframes aiuto-eco {
  0%   { transform: scale(1); opacity: .7; }
  60%, 100% { transform: scale(1.35); opacity: 0; }
}

/* L'illustrazione e' a figura intera: qui serve solo testa e spalle, quindi
   viene ingrandita e spostata dentro la maschera tonda. */
.aiuto__viso {
  position: absolute; inset: 0;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}
.aiuto__viso img {
  position: absolute;
  left: -14px; top: -2px;
  width: 186px; max-width: none; height: auto;
}
/* Un saluto appena accennato, non un rimbalzo da banner. */
.aiuto__link:hover .aiuto__viso img { animation: aiuto-saluto .9s ease-in-out; }
@keyframes aiuto-saluto {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-2.5deg); }
  70%      { transform: rotate(2.5deg); }
}

/* --- La nuvoletta -------------------------------------------------------- */

.aiuto__nuvola {
  position: relative;
  max-width: 15rem;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  color: var(--blu-scuro);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
  box-shadow: 0 6px 22px rgba(31, 58, 95, .16);
  transform-origin: 100% 100%;
}
/* La codina che punta al ritratto. */
.aiuto__nuvola::after {
  content: "";
  /* Punta in giu', sopra il centro del ritratto (78 / 2 = 39 px dal bordo). */
  position: absolute; right: 33px; bottom: -7px;
  width: 13px; height: 13px;
  background: #fff;
  border-right: 1px solid var(--grigio-bordo);
  border-bottom: 1px solid var(--grigio-bordo);
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}

.aiuto__chiudi {
  position: absolute;
  right: -4px; top: -10px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  color: var(--testo-soft);
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: 50%;
  box-shadow: var(--ombra-1);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.aiuto__chiudi:hover { color: var(--blu-scuro); border-color: #B9C6D6; }
.aiuto__chiudi svg { width: 14px; height: 14px; }

/* Con JavaScript la nuvoletta arriva dopo un attimo, cosi' non compete con la
   prima lettura della pagina. Senza JavaScript e' li' da subito. */
.js .aiuto__nuvola,
.js .aiuto__chiudi {
  opacity: 0;
  transform: scale(.85) translateY(6px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.4, .5, 1);
}
.js .aiuto[data-nuvola="aperta"] .aiuto__nuvola,
.js .aiuto[data-nuvola="aperta"] .aiuto__chiudi {
  opacity: 1;
  transform: none;
}
.aiuto[data-nuvola="chiusa"] .aiuto__nuvola,
.aiuto[data-nuvola="chiusa"] .aiuto__chiudi { display: none; }

/* --- Convivenza con gli altri elementi fissi ----------------------------- */

/* Il "torna su" sale sopra la scorciatoia invece di finirci sotto. */
/* Col pannello del menu aperto la scorciatoia sparisce: coprirebbe le voci. */
body[data-menu="aperto"] .aiuto { display: none; }

@media (max-width: 30rem) {
  .aiuto { right: var(--sp-3); bottom: var(--sp-3); }
  .aiuto__link { width: 62px; height: 62px; }
  .aiuto__viso img { left: -11px; top: -2px; width: 148px; }
  .aiuto__nuvola { max-width: 12.5rem; font-size: .8125rem; padding: var(--sp-2) var(--sp-3); }
  .aiuto__nuvola::after { right: 24px; }
  .su { left: var(--sp-3); bottom: var(--sp-3); }
}

@media print { .aiuto { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .aiuto__link::after,
  .aiuto__link:hover .aiuto__viso img { animation: none; }
}

/* ===========================================================================
   43. COLONNA DI LETTURA PIÙ LARGA
   A 44 rem le pagine diventavano lunghissime e la parte destra restava vuota.
   La misura di lettura sale; dove il testo è affiancato da una grafica resta
   più stretta, altrimenti la grafica non avrebbe spazio.
   =========================================================================== */

:root {
  --lettura: 56rem;            /* testo da solo */
  --lettura-affiancata: 38rem; /* testo con una grafica accanto */
}

.duo--lato > .duo__testo { max-width: var(--lettura-affiancata); }
@media (min-width: 62rem) {
  .duo--lato { grid-template-columns: minmax(0, var(--lettura-affiancata)) minmax(0, 1fr); }
}

/* Nei blocchi illustrati la colonna la decide la griglia, non la misura. */
.duo__testo:not(.prosa) { max-width: none; }

/* --- 43.1 Riquadro su fondo scuro --------------------------------------- */

/* Un riquadro chiaro dentro una sezione blu manteneva il testo grigio scuro:
   illeggibile. Questa variante è pensata per i fondi scuri e porta con sé
   tutti i colori del testo che contiene. */
.riquadro--chiaro {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #DCE6F1;
}
.riquadro--chiaro h3 { color: #fff; }
.riquadro--chiaro strong { color: #fff; font-weight: 600; }
.riquadro--chiaro .lista-segni svg { color: var(--verde-chiaro); }

/* Se per qualsiasi motivo un riquadro chiaro finisse su fondo scuro, il testo
   resta comunque leggibile. */
.sezione--blu .riquadro:not(.riquadro--chiaro) { color: var(--testo); }
.sezione--blu .riquadro:not(.riquadro--chiaro) h3 { color: var(--blu-scuro); }

/* ===========================================================================
   48. COLORE DEI TITOLI E FASCIA DELLA CHIUSURA
   =========================================================================== */

/* --- 48.1 Un solo colore per i titoli, per ogni fondo -------------------- */

/* Sui fondi scuri i titoli sono BIANCO GHIACCIO, sui fondi chiari il BLU del
   sito. Nessuna terza tinta: le due righe del titolo doppio si distinguono per
   peso e trasparenza, non cambiando colore.

   Il bug che si portavano dietro: il JavaScript spezza i titoli in
   <span class="lettera">, e i selettori `.titolo-doppio > span` scritti senza
   escluderle colpivano OGNI lettera. Il titolo intero prendeva la tinta
   smorzata prevista per la sola seconda riga, e sul blu diventava grigio
   azzurrino invece che bianco. Ogni regola su `> span` va scritta con
   `:not(.lettera)`. */

.sezione--blu h1,
.sezione--blu h2,
.sezione--blu h3,
.sezione--blu h4,
.hero--blu h1,
.cta-finale h2 { color: var(--ghiaccio); }

/* La seconda riga: stesso bianco ghiaccio, appena piu' tenue. */
.sezione--blu .titolo-doppio > span:not(.lettera):not(.parola),
.hero--blu .titolo-doppio > span:not(.lettera):not(.parola) {
  color: color-mix(in srgb, var(--ghiaccio) 72%, transparent);
}

/* Sui fondi chiari entrambe le righe restano nel blu del sito. */
.titolo-doppio > span:not(.lettera):not(.parola) { color: var(--blu); }

/* --- 48.2 La fascia della chiusura segue il blocco di sopra -------------- */

/* Il riquadro blu della chiusura stava sempre su una striscia grigia, anche
   quando la sezione sopra era chiara: si vedeva un gradino di grigio comparire
   dal nulla. La striscia prende il fondo di chi la precede. */

.sezione--chiusura { background: transparent; }
.sezione--grigia + .sezione--chiusura { background: var(--grigio-chiaro); }
.sezione--blu + .sezione--chiusura { background: var(--blu-scuro); }

/* Dopo una sezione blu la striscia e' blu, e un riquadro blu su fondo blu
   sparisce: li' la chiusura diventa vetro, come le altre superfici che il
   sito appoggia sul blu (schede, finestre, diagrammi). */
.sezione--blu + .sezione--chiusura .cta-finale {
  background-image: none;
  background-color: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
}

/* ===========================================================================
   49. REVISIONE DI IMPAGINAZIONE E SFONDI
   Nasce da una misurazione di tutte e 24 le pagine a 390 e 1440 px
   (docs/_audit-uiux.js). Quattro difetti veri, nessuno di gusto:

     1. scroll orizzontale su ogni pagina (risolto in sezione 27);
     2. testate alte da 296 a 955 px, decise dall'illustrazione e non dal
        progetto;
     3. blocchi affiancati con colonne squilibrate fino a 1690 px;
     4. riquadri con quattro spaziature interne diverse fra loro.

   Qui si correggono i punti 2, 3 e 4 e si dà agli sfondi una profondità che
   non tocca né i colori né i contrasti già verificati.
   =========================================================================== */

/* --- 49.1 Una sola scala di spaziatura interna -------------------------- */

/* I riquadri usavano quattro misure senza parentela: 16 px fissi nelle note,
   24 px fissi nei riquadri, 20-28 px fluidi nelle card e fino a 72 px nella
   chiusura. Affiancati si vedeva. Tre gradini, tutti fluidi, tutti
   derivati dallo stesso passo. */
:root {
  --pad-md: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);  /* 20 → 28 */
  --pad-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);   /* 24 → 36 */
  --pad-xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);     /* 32 → 52 */
}

.card { padding: var(--pad-md); }
.riquadro, .indice, .revisione, .cerca { padding: var(--pad-lg); }
.nota { padding: var(--pad-md) var(--pad-lg); }
.cta-finale { padding: var(--pad-xl); }
.duo__scheda { padding: var(--pad-lg); }

/* --- 49.2 Testate della stessa altezza ---------------------------------- */

/* L'altezza della testata la decideva l'immagine: sul glossario
   l'illustrazione era alta 772 px e portava la testata a 955, contro i 296
   di una pagina senza illustrazione. Ora il disegno ha un tetto e la riga ha
   un pavimento, così tutte le testate stanno nella stessa fascia.
   `min-height` e non `height`: un titolo lungo deve poter crescere, mai
   essere tagliato. */
.testata__griglia {
  min-height: clamp(10rem, 6rem + 12vw, 17rem);   /* 160 → 272 */
  align-items: center;
}

/* La colonna del testo prende più spazio: a 653 px l'occhiello andava a capo
   tre volte e alzava tutta la fascia. */
@media (min-width: 62rem) {
  .testata--ill .testata__griglia { grid-template-columns: 1.4fr .6fr; }
}
.testata h1 { max-width: 20ch; }
.testata__lead { max-width: 46rem; }

/* Il tetto del disegno. `width: auto` perché le illustrazioni sono verticali
   quanto orizzontali: vincolare l'altezza senza liberare la larghezza le
   avrebbe schiacciate. */
.testata__media { display: none; }
@media (min-width: 62rem) {
  .testata__media {
    display: flex; align-items: center; justify-content: center;
  }
  .testata__media .ill { max-width: 100%; }
  .testata__media .ill img {
    max-height: clamp(11rem, 15vw, 16rem);   /* 176 → 256 */
    width: auto; max-width: 100%;
  }
}

/* --- 49.3 Blocchi affiancati: le due colonne si guardano ---------------- */

/* Misurato su 1440: 50 blocchi con colonne di altezza molto diversa.
   Due casi opposti, due rimedi diversi.

   Caso A — il testo è molto più lungo della grafica (fino a 2170 px contro
   480). La grafica è già `sticky` e accompagna la lettura: qui basta togliere
   larghezza alla colonna vuota e darla al testo, che così sta in meno righe.
   Da 608/520 si passa a circa 690/440.

   Caso B — il testo è molto più corto della grafica (sul glossario 97 px
   contro 422): restava una colonna di bianco a sinistra. `align-content`
   centra il testo nella riga senza trasformare il blocco in un flex, quindi i
   margini fra titolo e paragrafi continuano a fondersi come prima. Quando il
   testo è il più alto dei due la regola non ha alcun effetto: si corregge da
   sola, caso per caso. */
@media (min-width: 62rem) {
  .duo--lato { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  /* Con la grafica a sinistra le due tracce vanno scambiate. Senza questa
     riga la regola qui sopra, che viene dopo nel foglio e ha la stessa forza,
     dava 686 px alla grafica e 442 al testo: le proporzioni al contrario. */
  .duo--lato-sx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .duo--lato > .duo__testo { max-width: none; align-content: center; }
}

/* La grafica non deve sfondare la sua colonna né diventare enorme. */
.lato-fisso > * { max-width: 100%; }

/* --- 49.4 Sfondi con un po' di profondità ------------------------------- */

/* Gli sfondi erano tre campiture piatte: bianco, grigio, blu. Qui prendono
   una texture appena percettibile. Nessun colore nuovo: solo i tre già in
   palette, a opacità bassissime, sotto al contenuto (z-index -1 dentro il
   contesto isolato che le sezioni hanno già). I contrasti del testo non
   cambiano: la trama sta sotto e non altera il fondo su cui si misura. */

/* Fascia grigia: reticolo di punti che sfuma ai bordi, così la sezione non
   ha un inizio e una fine netti. */
.sezione--grigia::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px,
                    rgba(31, 58, 95, .06) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

/* Fascia blu: due luci diagonali che le tolgono l'aria di rettangolo pieno.
   L'apertura della home è esclusa: ha già la sua. */
.sezione--blu:not(.hero)::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(46rem 26rem at 8% -12%, rgba(110, 193, 228, .17), transparent 62%),
    radial-gradient(40rem 24rem at 96% 112%, rgba(76, 175, 141, .15), transparent 60%);
}

/* L'alone delle sezioni chiare era un solo cerchio azzurro sempre nello
   stesso punto. Due macchie di dimensioni diverse leggono come luce, una sola
   leggeva come una macchia. */
.alone--dx::before { right: -20rem; top: -14rem; width: 52rem; }
.alone--sx::before { left: -22rem; bottom: -18rem; width: 50rem; }

/* La testata guadagna la stessa luce: prima era una sfumatura verticale
   piatta dal bianco al grigio. */
.testata {
  background-image:
    radial-gradient(38rem 22rem at 88% -20%, rgba(110, 193, 228, .20), transparent 64%),
    radial-gradient(30rem 20rem at -6% 118%, rgba(76, 175, 141, .13), transparent 62%),
    linear-gradient(168deg, #FFFFFF 0%, #F4F8FC 60%, var(--grigio-chiaro) 100%);
}

/* --- 49.5 Rifiniture emerse dalla misurazione --------------------------- */

/* A 390 px il contenuto aveva 20 px di margine per lato: sotto il minimo
   comodo per il pollice e stretto rispetto ai 32 px del resto della scala.

   Il margine è ora un token unico. Serve perché `.container` e
   `.container.prosa` lo scrivevano ognuno per conto proprio: alzando solo il
   primo, nella stessa pagina convivevano blocchi a 20 px e blocchi a 24 px e
   il testo non era più incolonnato (segnalato da docs/_audit-layout.js su
   sei pagine). */
:root { --margine-pagina: 1.5rem; }
@media (min-width: 48rem) { :root { --margine-pagina: 2rem; } }

/* Una regola sola per larghezza: e' il token a cambiare al breakpoint, non
   la dichiarazione. Le due copie in media query di prima erano il motivo per
   cui il margine si poteva alzare in un punto e non nell'altro. */
.container { width: min(100% - var(--margine-pagina) * 2, var(--contenuto)); }

.container.prosa {
  width: min(100% - var(--margine-pagina) * 2, var(--lettura));
  margin-inline: max(var(--margine-pagina), calc(50% - var(--contenuto) / 2)) auto;
}

/* Un blocco affiancato che apre una sezione non deve staccarsi due volte:
   la sezione ha già il suo spazio sopra. */
.sezione > .container > .duo--lato:first-child { margin-top: 0; }

/* Ma se il suo contenitore segue un altro contenitore nella stessa sezione,
   il blocco non apre la sezione: lo stacco serve. La regola sopra, piu'
   specifica di .duo--staccato, lo azzerava e lasciava la grafica incollata
   alle schede che la precedono (/professionisti/, /corsi-fisioterapisti/). */
.sezione > .container + .container > .duo--lato:first-child {
  margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}

/* --- 49.7 Segnaposto delle fotografie sui fondi scuri ------------------- */

/* I due segnaposto in attesa delle foto vere sono riquadri tratteggiati
   chiari: su una fascia blu quasi sparivano e sembravano un errore di
   caricamento. Sul fondo scuro prendono i colori del fondo scuro. */
.sezione--blu .media {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .05) 0 10px,
      rgba(255, 255, 255, .09) 10px 20px);
  border-color: rgba(255, 255, 255, .28);
  color: #C6D5E6;
}
.sezione--blu .media svg { color: rgba(255, 255, 255, .45); }

/* --- 49.8 I due pulsanti della barra sono una coppia -------------------- */

/* "Accedi" era alto 50 px e "Menu" 42: si vedeva che non erano allineati.
   La causa e' che i due sono costruiti in modo diverso — il pulsante ha
   padding verticale e bordo, quindi il contenuto lo faceva crescere oltre il
   `min-height`, mentre il menu ha solo il `min-height`. Qui l'altezza gliela
   si da' uguale a entrambi, azzerando il padding verticale: l'etichetta e'
   alta 22 px, sta comodamente dentro i 48, e nessuno dei due puo' piu'
   crescere per conto proprio.

   Da scorsi scendono insieme a 44 px e non piu' a 42: 44 e' il minimo che il
   sito si e' dato per le aree di tocco. */
.header__azioni .btn--accesso,
.header__azioni .menu-toggle {
  --h-barra: 48px;
  min-height: var(--h-barra);
  padding-block: 0;
}
body[data-scorso="si"] .header__azioni .btn--accesso,
body[data-scorso="si"] .header__azioni .menu-toggle {
  --h-barra: 44px;
  min-height: var(--h-barra);
}

/* --- 49.9 Il numero della card a fascia non copre la freccia ------------ */

/* `.card__numero` e' pensato per la card verticale, dove sta in alto a destra
   e il contenuto gli scorre sotto. Nella card a fascia, alta 89 px, quella
   posizione assoluta cadeva esattamente sopra la freccia allineata al centro:
   misurati 9 px di sovrapposizione, con il numero e la freccia sulla stessa
   colonna a 1505 px.
   Nell'HTML il numero e' il primo figlio, cioe' e' l'indice della riga: qui
   torna nel flusso e si mette dove il codice lo aveva gia' messo, a sinistra
   del titolo. */
.card-fascia > .card__numero {
  position: static;
  flex: 0 0 auto;
  align-self: center;
}

/* --- 49.10 L'icona non resta sola su una riga --------------------------- */

/* Nei link che finiscono con l'icona "apre in una nuova scheda" lo spazio
   prima dell'icona era un punto in cui andare a capo: l'icona finiva da sola
   su una riga sua e il punto fermo su quella dopo. Lo spazio diventa unito
   nelle pagine; qui si toglie anche l'appiglio dopo l'icona. */
/* La causa vera non era lo spazio ma il reset di riga 121:
   `img, svg, video { display: block }`. Un elemento di blocco dentro un link
   in linea si prende per forza una riga tutta sua, e trascina sulla riga dopo
   il punto fermo che segue il link. Le icone dentro un link tornano in linea.
   Il reset resta com'e' per tutte le altre immagini: li' `display: block`
   serve a togliere lo spazio fantasma sotto le figure. */
a > svg,
.link-freccia > svg {
  display: inline;
  vertical-align: -.13em;
}
a > svg:last-child,
.link-freccia > svg:last-child {
  margin-left: .25em;
}

/* --- 49.11 La nota sotto a un gruppo di pulsanti ------------------------ */

/* `.campo__aiuto` nasce sotto ai campi di un modulo, dove il margine sopra lo
   da' il campo stesso. Usata sotto a un pulsante restava incollata al bordo:
   nell'area riservata la nota "L'accesso sara' attivo" toccava il pulsante. */
.btn-gruppo + .campo__aiuto { margin-top: var(--sp-3); }

/* Il primo gruppo di pulsanti di una sezione non ha nulla sopra da cui
   staccarsi: il margine in cima raddoppierebbe lo spazio della sezione. */
.sezione > .container > .btn-gruppo:first-child { margin-top: 0; }

/* --- 49.12 Blocco affiancato rimasto senza grafica ---------------------- */

/* Sette diagrammi sono stati tolti (sezione 49.13): si limitavano a
   riscrivere il titolo dentro dei riquadri e non aggiungevano nulla al testo
   accanto. Dove sono spariti il blocco resta a due colonne con una sola
   dentro, cioe' un testo stretto a 686 px e mezzo blocco vuoto a destra:
   esattamente lo spazio bianco da cui si era partiti.
   Qui il blocco torna una colonna sola alla misura di lettura piena. */
@media (min-width: 62rem) {
  .duo--lato:not(:has(> .duo__lato)) {
    display: block;
    max-width: none;
  }
  .duo--lato:not(:has(> .duo__lato)) > .duo__testo {
    max-width: none;
    align-content: normal;
  }
  /* Il blocco e' largo quanto il contenitore, ma il testo tiene la sua misura
     di lettura: larga la griglia di schede, stretti i paragrafi. */
  .duo--lato:not(:has(> .duo__lato)) > .duo__testo > *:not(.griglia) {
    max-width: var(--lettura);
  }
  /* E qui la griglia non ha piu' bisogno di evadere dalla colonna: e'
     l'evasione a usare `100vw`, che comprende la barra di scorrimento e
     quindi sborda sui browser con la barra classica. */
  .duo--lato:not(:has(> .duo__lato)) .griglia--testo { width: auto; }
}

/* --- 49.13 Testo che segue una griglia di schede ------------------------ */

/* Un paragrafo dopo una griglia partiva a 0 px dal bordo delle card: le card
   hanno un fondo e un'ombra, e il testo ci finiva appoggiato sopra. Le card
   dentro la griglia si distanziano col `gap`, che non vale per cio' che sta
   fuori dalla griglia. */
.griglia + p,
.griglia + .prosa,
.griglia + .nota,
.griglia + .riquadro { margin-top: var(--sp-6); }

/* --- 49.14 Titoli delle schede dentro un blocco affiancato -------------- */

/* `.duo__testo h3` porta il titolo alla scala di un H2 di sezione (fino a
   40 px): giusto per il titolo di un blocco illustrato, sbagliato dentro una
   scheda di una griglia a tre colonne, dove finisce a competere con l'H2
   della sezione e schiaccia il testo che gli sta sotto.
   Le schede se le costruisce il JavaScript dai gruppi H3 + paragrafo, e da
   quando il raggruppamento vale anche nei blocchi senza grafica queste due
   regole si incontrano. Dentro una scheda vince la scala della scheda. */
.duo__testo .card--testo h3,
.duo__testo .card h3 {
  font-size: var(--t-h4);
  line-height: 1.25;
}

/* --- 49.15 Secondo paragrafo dell'apertura ------------------------------ */

/* Il primo paragrafo e' la risposta secca che le regole GEO chiedono in cima;
   il secondo la completa e sta un gradino sotto, cosi' l'occhio capisce
   quale dei due e' l'apertura vera. */
.testata__lead--seguito {
  margin-top: var(--sp-4);
  font-size: var(--t-base);
}

/* ===========================================================================
   50. ELENCHI PUNTATI COME RIQUADRI
   Un elenco puntato dentro una pagina lunga si legge come un documento. Qui
   ogni voce diventa un riquadro con un segno grafico davanti.

   La classe la mette assets/js/main.js, perche' la forma dipende da quanto e'
   lunga la voce piu' lunga e quello il CSS non lo sa:
     .elenco-box            voci lunghe: un riquadro per riga
     .elenco-box--griglia   voci brevi: riquadri affiancati

   Il segno e' una freccia, non una spunta: i 26 elenchi del sito dicono tutti
   "puo' comprendere", "contiene", "rientrano in". Una spunta verde avrebbe
   trasformato un elenco di contenuti in una dichiarazione di conformita', che
   su un sito sanitario e' un'altra cosa.
   =========================================================================== */

.elenco-box {
  list-style: none;
  margin: var(--sp-5) 0;
  padding-left: 0;
  display: grid;
  gap: var(--sp-4);
}

/* `auto-fit` e non un numero fisso di colonne: cosi' un elenco di due voci fa
   due riquadri larghi e uno di sei ne fa tre per riga, senza regole diverse. */
.elenco-box--griglia { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ATTENZIONE: la voce resta un blocco normale e il segno sta in posizione
   assoluta. Con `display: grid` sul <li> ogni figlio diventava una cella:
   una voce come "per capire che cosa significa <strong>formazione
   certificata</strong>, puoi leggere <a>Cos'e' un corso ECM</a>;" si spezzava
   in quattro pezzi incolonnati, uno per elemento. Il testo in linea deve
   restare in linea. */
.elenco-box > li {
  position: relative;
  margin: 0;
  /* Piu' stretto di una card: sono voci di elenco, non schede. Col padding
     da card una voce di trenta caratteri andava a capo due volte. */
  padding: var(--sp-3) var(--sp-4);
  padding-left: calc(var(--sp-4) + 22px + var(--sp-3));
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-md);
  box-shadow: var(--ombra-1);
}

/* Il segno sta dentro un tondino: senza, a fianco di un riquadro sembrerebbe
   un carattere rimasto li' per sbaglio. L'SVG e' scritto qui dentro, non
   caricato: nessuna richiesta di rete in piu'. */
.elenco-box > li::before {
  content: "";
  position: absolute;
  left: var(--sp-4);
  top: calc(var(--sp-3) + .2em);
  width: 22px; height: 22px;
  border-radius: 50%;
  background-color: #E6F4EE;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B52' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* Dentro il riquadro il testo non ha piu' bisogno del rientro che aveva da
   voce di elenco. */
.elenco-box > li > :first-child { margin-top: 0; }
.elenco-box > li > :last-child { margin-bottom: 0; }

/* Sulla fascia grigia il bianco pieno stacca gia' da solo: l'ombra diventa
   rumore. */
.sezione--grigia .elenco-box > li { box-shadow: none; }

/* Sui fondi scuri il riquadro e' a vetro, come tutte le altre superfici che
   il sito appoggia sul blu (sezione 44). */
.sezione--blu .elenco-box > li {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.sezione--blu .elenco-box > li::before {
  background-color: rgba(107, 201, 168, .18);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BC9A8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

/* Su schermo stretto i riquadri affiancati tornano incolonnati: a 15 rem di
   larghezza minima ci starebbe una colonna sola comunque, ma senza questa
   riga il `minmax` la farebbe sbordare sotto i 240 px. */
@media (max-width: 30rem) {
  .elenco-box--griglia { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   51. RIFINITURE CHIESTE DOPO IL GIRO SUGLI ELENCHI
   =========================================================================== */

/* --- 51.1 Le card illustrate avevano riavuto il padding ----------------- */

/* `.card--ill { padding: 0 }` sta a riga 1229; la scala dei padding della
   sezione 49.1 scrive `.card { padding: … }` piu' avanti nel foglio, con la
   stessa forza, e glielo rimetteva. Risultato: l'immagine non arrivava piu'
   ai bordi della card e gli angoli restavano vivi, perche' non c'era piu'
   niente da ritagliare. */
.card--ill { padding: 0; }

/* Il ritaglio lo fa gia' `overflow: hidden` sulla card, ma solo se l'immagine
   tocca il bordo. Il raggio esplicito lo rende indipendente dal padding. */
.card--ill .card__media {
  border-radius: var(--r-blocco) var(--r-blocco) 0 0;
}

/* --- 51.2 L'etichetta dentro l'anello ----------------------------------- */

/* L'etichetta e' un <text> dentro un SVG con viewBox 200: su schermo stretto
   l'anello e' largo 342 px, quindi tutto dentro viene ingrandito di 1,7 volte
   e gli 11 px diventavano 22. "ISCRITTI ALL'ALBO" arrivava a 210 px su 200 di
   viewBox e sbordava dal cerchio. */
.anello__eti { font-size: 8.5px; letter-spacing: .04em; }

/* --- 51.3 Spazio fra le schede ------------------------------------------ */

/* 16 px fra tre card larghe 380 le facevano sembrare un blocco solo. */
.griglia { gap: clamp(1rem, .7rem + 1.2vw, 2rem); }

/* --- 51.4 Schede di offerta di lavoro ----------------------------------- */

/* Sono l'unica card a fascia che contiene un blocco intero: etichetta,
   titolo, descrizione, tre dati e un link. Con il padding e le distanze delle
   righe di terapia — che sono una riga sola — tutto restava compresso.
   Si distinguono per il tag: le righe di terapia sono <a>, queste <article>. */
.elenco { gap: var(--sp-4); }

article.card-fascia {
  display: block;
  padding: var(--pad-lg);
}
article.card-fascia > div { display: grid; gap: var(--sp-4); }
article.card-fascia > div > * { margin: 0; }

/* Il titolo respira sopra e sotto: e' la riga che si legge per prima. */
article.card-fascia h3 {
  font-size: var(--t-h4);
  line-height: 1.3;
}

/* I tre dati sono la parte da consultare: vanno separati dal testo che li
   introduce e fra loro, o si leggono come un paragrafo unico. */
article.card-fascia .dati {
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--grigio-bordo);
  border-bottom: 1px solid var(--grigio-bordo);
}
@media (min-width: 34rem) {
  article.card-fascia .dati { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
}

/* --- 51.5 I riquadri di avviso non devono chiamare l'attenzione --------- */

/* Erano riquadri bianchi con un filo blu spesso a sinistra e un'icona
   circolare: nel mezzo di una pagina di testo si prendevano lo sguardo prima
   del testo stesso. Ora sono una velatura calda, senza icona e senza filo
   colorato: si notano se li si cerca, non prima.
   Il testo resta sul colore del corpo, quindi il contrasto non cambia. */
/* Le note sono di due tipi, e vale la pena distinguerli: su 24, sedici sono
   `limite` — "non e' una classifica", "non usare il modulo per le emergenze",
   "il progetto non eroga prestazioni sanitarie" — e otto sono informative,
   tipo "le schede qui sotto sono esempi di struttura".

   Il caldo va ai sedici avvisi, dove dice la cosa giusta. Le otto note
   informative prendono un grigio caldo neutro: il rosso e' gia' il colore che
   il sito usa per le esclusioni (#B03A3A nelle liste "cosa non facciamo"), e
   riusarlo per una nota neutra darebbe un segnale che non c'e'.
   In tutti i casi il testo resta sul colore del corpo: il contrasto non
   cambia. */
.nota {
  display: block;
  padding: var(--pad-md) var(--pad-lg);
  margin-block: var(--sp-5);
  background: rgba(122, 110, 98, .07);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(122, 110, 98, .18);
  border-radius: var(--r-md);
}
.nota svg { display: none; }

.nota--limite {
  background: rgba(198, 87, 87, .09);
  border-color: rgba(198, 87, 87, .26);
}

.sezione--blu .nota {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
}
.sezione--blu .nota--limite {
  background: rgba(233, 150, 150, .12);
  border-color: rgba(233, 150, 150, .28);
}

/* --- 51.6 Titoli piu' grandi su schermo stretto ------------------------- */

/* Su mobile i titoli erano tarati sulla larghezza, non sulla distanza di
   lettura: quattro pixel in piu' a ogni gradino. I massimi salgono della
   stessa misura, cosi' dentro la fascia mobile la scala resta fluida. */
@media (max-width: 47.99rem) {
  :root {
    --t-h1: clamp(2.5rem,   1.75rem + 3.1vw,  3.75rem);
    --t-h2: clamp(2rem,     1.55rem + 2vw,    2.875rem);
    --t-h3: clamp(1.625rem, 1.4rem + 1.1vw,   2.125rem);
    --t-h4: clamp(1.375rem, 1.3rem + 0.35vw,  1.5625rem);
  }
  /* Il titolo di un blocco affiancato ha una scala sua. */
  .duo__testo h3 { font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.375rem); }
}

/* --- 51.7 Il testo usa lo spazio che ha a destra ------------------------ */

/* La misura di lettura sale da 56 a 64 rem. Nelle sezioni senza grafica
   accanto restavano quasi 300 px vuoti a destra e le pagine erano piu' lunghe
   del necessario. Dove una grafica c'e', la colonna la decide la griglia e
   questa misura non entra in gioco. */
:root { --lettura: 64rem; }

/* --- 51.8 La colonna singola non deve seguire la parola piu' lunga ------ */

/* Su schermo stretto `.duo` e' una griglia a una colonna sola, e senza
   `grid-template-columns` quella colonna e' `auto`: si dimensiona sul
   min-content dei figli, cioe' sulla parola indivisibile piu' lunga.
   `overflow-wrap: break-word` sui titoli non aiuta, perche' spezza la parola
   quando non entra nella riga ma NON riduce il min-content usato per
   calcolare la traccia. Cosi' un H2 con "FISIOTERAPISTA.online", che con i
   titoli piu' grandi della sezione 51.6 misura 363 px, allargava la colonna
   oltre i 342 del contenitore.

   `minmax(0, 1fr)` blocca la traccia alla larghezza disponibile; a quel punto
   `break-word` fa il suo lavoro e la parola va a capo. E' la stessa regola
   gia' applicata alle griglie a due colonne dopo lo stesso difetto. */
/* ATTENZIONE: questa regola va tenuta DENTRO le media query in cui la
   griglia e' davvero a una colonna. Scritta senza, e in fondo al foglio,
   batteva tutte le regole a due colonne scritte prima — le media query non
   aumentano la specificita' — e su desktop le grafiche finivano sotto al
   testo in tutto il sito.
   `.duo` passa a due colonne a 56 rem, testata e apertura a 62. */
@media (max-width: 55.99rem) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 61.99rem) {
  .duo--lato,
  .testata__griglia,
  .hero__griglia { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   51. Ricerca nella rete professionale (/professionisti/)
   Pillole nell'ordine chiesto: Tutti, quattro menu, tre interruttori. Poi il
   conteggio e le schede. Classi proprie (.rp-*, .prof) e non .card: il JS
   della comparsa allo scroll marca da solo le .card, e una scheda che
   ricompare dopo un filtro non deve rifare l'animazione.
   Sulle pillole solo background-color, mai lo shorthand `background`: sul
   <select> cancellerebbe la freccia disegnata come background-image.
   =========================================================================== */

.rp { margin-top: var(--sp-6); }
.rp > h3 { margin-top: 0; }
.rp [hidden] { display: none !important; }

.rp-pannello {
  padding: var(--pad-md);
  background-color: var(--grigio-chiaro);
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-blocco);
}
.rp-filtri { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.rp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  max-width: 100%;
  padding: 0 var(--sp-4);
  background-color: #fff;
  border: 1.5px solid var(--grigio-bordo);
  border-radius: var(--r-pill);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  color: var(--blu-scuro);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.rp-pill:hover { background-color: #F5F8FD; border-color: #C6D7EE; }
.rp-pill.is-attivo,
.rp-pill[aria-pressed="true"],
.rp-interruttore:has(input:checked) {
  background-color: #E7EEF9; border-color: var(--blu); color: #1F3A5F;
}
.rp-pill:focus-visible,
.rp-interruttore:has(input:focus-visible) {
  outline: 3px solid rgba(43, 93, 170, .35); outline-offset: 2px;
}

select.rp-pill {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Largo quanto la voce scelta, non quanto la piu' lunga del menu:
     "Provincia" occupava lo spazio di "Provincia di Bologna (BO) (2)".
     Dove non e' supportato resta la larghezza classica. */
  field-sizing: content;
}
/* Su Windows il menu aperto prende i colori del <select>: li si fissa. */
.rp-pill option, .rp-pill optgroup { color: var(--testo); background-color: #fff; font-weight: 400; }
.rp-pill optgroup { font-weight: 700; }
.rp-pill option:disabled { color: #8A94A0; }

.rp-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; height: 1.7em; padding: 0 .45em;
  border-radius: var(--r-pill);
  background-color: var(--grigio-chiaro);
  color: var(--testo-soft);
  font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rp-pill.is-attivo .rp-n,
.rp-pill[aria-pressed="true"] .rp-n,
.rp-interruttore:has(input:checked) .rp-n { background-color: #fff; color: var(--blu); }

.rp-segno {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px;
  border: 1.5px solid #B9C6D6; border-radius: 6px;
  background-color: #fff; color: transparent;
}
.rp-segno svg { width: 14px; height: 14px; }
.rp-interruttore:has(input:checked) .rp-segno,
.rp-interruttore.is-attivo .rp-segno { background-color: var(--blu); border-color: var(--blu); color: #fff; }

/* Spento = porterebbe a zero risultati. Niente opacita': abbasserebbe il
   contrasto del testo; bastano il bordo tratteggiato e lo zero accanto. */
.rp-interruttore.is-spento,
.rp-interruttore:has(input:disabled) {
  border-style: dashed; color: var(--testo-soft); cursor: not-allowed;
}
.rp-interruttore.is-spento:hover,
.rp-interruttore:has(input:disabled):hover { background-color: #fff; border-color: var(--grigio-bordo); }

/* Senza JavaScript i filtri si applicano inviando il modulo. */
.rp-applica { margin-top: var(--sp-4); }
.js .rp-applica { display: none; }

@media (max-width: 47.99rem) {
  /* I menu hanno etichette lunghe: su telefono prendono la riga intera. */
  select.rp-pill { flex: 1 1 100%; }
}

.rp-esito {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-4);
}
.rp-esito p { margin: 0; }
.rp-conteggio { font-size: var(--t-h4); color: var(--blu-scuro); }
.rp-conteggio strong { color: inherit; font-weight: 700; }
.rp-ordine { font-size: var(--t-small); color: var(--testo-soft); }
.rp > .nota { margin: 0 0 var(--sp-5); }

.rp-griglia {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.rp-vuoto {
  margin-top: var(--sp-4);
  padding: var(--pad-md);
  border: 1.5px dashed var(--grigio-bordo);
  border-radius: var(--r-blocco);
}
.rp-vuoto p { margin: 0 0 var(--sp-4); }

/* --- La scheda ----------------------------------------------------------- */

.prof {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--pad-md);
  background-color: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-1);
}
.prof > * { margin: 0; }

.prof__testa { display: flex; align-items: center; gap: var(--sp-3); }
.prof__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background-color: #E7EEF9; color: var(--blu);
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
}
.prof h4.prof__nome { margin: 0; font-size: var(--t-h4); line-height: 1.25; }
.prof__luogo {
  display: flex; align-items: center; gap: 5px;
  margin: 3px 0 0;
  font-size: var(--t-small); color: var(--testo-soft);
}
.prof__luogo svg { width: 15px; height: 15px; flex: none; }

.prof__albo {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background-color: #E6F4EE; color: #1F6B52;
  font-size: .875rem; font-weight: 700;
}
.prof__albo svg { width: 14px; height: 14px; flex: none; }

.prof__ambiti { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.prof__ambiti li {
  margin: 0; padding: 4px 10px;
  border-radius: var(--r-pill);
  background-color: #E7EEF9; color: #234B87;
  font-size: .875rem; font-weight: 600;
}
.prof__ambiti li.prof__area { background-color: #fff; border: 1px solid var(--grigio-bordo); color: var(--testo); }

.prof__cert { font-size: var(--t-small); color: var(--testo); }
.prof__cert span {
  display: block; margin-bottom: 2px;
  font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--testo-soft);
}

/* I servizi stanno in fondo: in una riga di schede si leggono allineati. */
.prof .prof__servizi {
  display: grid; gap: 6px;
  margin-top: auto;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--grigio-bordo);
  list-style: none;
}
.prof__servizi li {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: var(--t-small); color: var(--testo-soft);
}
.prof__servizi svg { width: 16px; height: 16px; flex: none; color: #9AA6B4; }
.prof__servizi li.si { color: var(--testo); font-weight: 600; }
.prof__servizi li.si svg { color: var(--verde-testo); }

.prof__piede {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px;
  font-size: .875rem; color: var(--testo-soft);
}
.prof__prova {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background-color: #FFF4E0; color: #7A4B00;
  font-weight: 700;
}

/* ===========================================================================
   52. Scheda del professionista (/professionisti/nome-cognome-citta/)
   Contatti in una colonna laterale fissa, a destra su schermo largo; sotto
   l'apertura su telefono (nel codice vengono per primi). Nel corpo una
   domanda sola - "e' compatibile con cio' che cerco?" - e le prove.
   =========================================================================== */

/* --- Nell'elenco: il nome e' l'unico link, allargato a tutta la card ----- */
.prof { position: relative; transition: box-shadow .18s ease, border-color .18s ease; }
.prof__nome a { color: inherit; text-decoration: none; }
.prof__nome a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.prof:hover { border-color: #C6D7EE; box-shadow: var(--ombra-2); }
.prof:hover .prof__nome a { text-decoration: underline; }
.prof:has(.prof__nome a:focus-visible) { outline: 3px solid rgba(43, 93, 170, .4); outline-offset: 3px; }
.prof__nome a:focus-visible { outline: none; }
.prof__apri { font-size: var(--t-small); }

/* --- Apertura ------------------------------------------------------------ */
.scheda-testa { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 48rem) {
  .scheda-testa { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); }
}
.scheda-testa__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background-color: #E7EEF9; color: var(--blu);
  border: 4px solid #fff; box-shadow: var(--ombra-2);
  font-family: var(--font-display); font-weight: 800; font-size: 2rem;
}
@media (min-width: 48rem) {
  .scheda-testa__avatar { width: 136px; height: 136px; font-size: 2.75rem; }
}
.scheda-testa h1 { margin: 0 0 var(--sp-4); }
.scheda-testa .testata__lead { max-width: 52rem; }
.scheda-testa__segni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.scheda-segno {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 6px 12px;
  background-color: #fff; border: 1px solid var(--grigio-bordo); border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600; color: var(--testo-soft);
}
.scheda-segno svg { width: 16px; height: 16px; flex: none; }
.scheda-segno--verde { background-color: #E6F4EE; border-color: #BFE3D5; color: #1F6B52; }
.scheda-segno--prova { background-color: #FFF4E0; border-color: #F3DDB3; color: #7A4B00; }

/* --- Impianto a due colonne --------------------------------------------- */
.nota + .scheda { margin-top: var(--sp-6); }
.scheda { display: grid; gap: var(--sp-6); }
@media (min-width: 62rem) {
  .scheda { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: var(--sp-7); align-items: start; }
  .scheda-contatti { grid-column: 2; grid-row: 1; }
  .scheda-corpo { grid-column: 1; grid-row: 1; }
}
/* Fissa mentre si scorre solo se ci sta tutta: una colonna fissa piu' alta
   dello schermo nasconderebbe per sempre la sua parte bassa. */
@media (min-width: 62rem) and (min-height: 56rem) {
  .scheda-contatti {
    position: sticky; top: 6.5rem;
    /* Rete di sicurezza: se il contenuto cresce, scorre dentro la colonna. */
    max-height: calc(100vh - 7.5rem); overflow-y: auto; overscroll-behavior: contain;
  }
}

/* --- Colonna dei contatti ---------------------------------------------- */
.scheda-contatti {
  padding: var(--pad-md);
  background-color: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-blocco);
  box-shadow: var(--ombra-2);
}
.scheda-contatti h2 { margin: 0 0 var(--sp-4); font-size: var(--t-h4); }
.scheda-contatti h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font); font-size: .875rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--testo-soft);
}
.scheda-contatti__indirizzo { display: flex; gap: 10px; margin: 0 0 var(--sp-4); line-height: 1.45; }
.scheda-contatti__indirizzo svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--blu); }
.scheda-contatti__indirizzo small { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--testo-soft); }

.scheda-contatti__canali,
.scheda-contatti__servizi,
.scheda-social { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.scheda-contatti__canali li, .scheda-social li { margin: 0; }

.scheda-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 5px var(--sp-3);
  background-color: #fff;
  border: 1px solid var(--grigio-bordo); border-radius: var(--r-sm);
  color: var(--blu-scuro); font-weight: 600; line-height: 1.25; text-decoration: none;
}
.scheda-link svg { flex: none; width: 20px; height: 20px; color: var(--blu); }
.scheda-link span { min-width: 0; overflow-wrap: anywhere; }
a.scheda-link:hover { background-color: #F5F8FD; border-color: #C6D7EE; }
a.scheda-link:focus-visible { outline: 3px solid rgba(43, 93, 170, .4); outline-offset: 2px; }
.scheda-link--spento { background-color: var(--grigio-chiaro); color: var(--testo); cursor: default; }

.scheda-social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scheda-social__sito { grid-column: 1 / -1; }

.scheda-orari { font-size: var(--t-small); }
.scheda-orari th, .scheda-orari td { padding: 5px 10px; border-bottom: 1px solid var(--grigio-chiaro); }
.scheda-orari th { font-weight: 600; color: var(--testo); white-space: nowrap; }
.scheda-orari td { text-align: right; font-variant-numeric: tabular-nums; }
.scheda-orari tr.is-oggi th,
.scheda-orari tr.is-oggi td { background-color: #E7EEF9; color: var(--blu-scuro); font-weight: 700; }
.scheda-orari__oggi {
  margin-left: 6px; padding: 1px 8px;
  border-radius: var(--r-pill); background-color: var(--blu); color: #fff;
  font-size: .8125rem; font-weight: 700;
}
.scheda-orari__chiuso { color: var(--testo-soft); }
.scheda-orari tr:last-child > * { border-bottom: 0; }

.scheda-contatti__nota { margin: var(--sp-2) 0 0; font-size: var(--t-small); color: var(--testo-soft); }
.scheda-contatti__servizi { margin-top: var(--sp-4); }
.scheda-contatti__servizi li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--t-small); color: var(--testo-soft); }
.scheda-contatti__servizi svg { flex: none; width: 20px; height: 20px; color: #9AA6B4; }
.scheda-contatti__servizi li.si { color: var(--testo); font-weight: 600; }
.scheda-contatti__servizi li.si svg { color: var(--verde-testo); }
.scheda-contatti .btn { margin-top: var(--sp-5); }

/* --- Corpo della scheda ------------------------------------------------- */
.scheda-corpo { display: grid; gap: var(--sp-6); min-width: 0; }
.scheda-blocco { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--grigio-bordo); }
.scheda-blocco:last-child { padding-bottom: 0; border-bottom: 0; }
.scheda-blocco h2 { margin: 0 0 var(--sp-4); font-size: var(--t-h3); }
.scheda-blocco h3 { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--t-h4); }
.scheda-blocco p { max-width: var(--lettura); }
.scheda-blocco > .nota { margin-top: var(--sp-4); }
.scheda-fonte {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px;
  border-radius: var(--r-pill); background-color: var(--grigio-chiaro); color: var(--testo-soft);
  font-family: var(--font); font-size: .875rem; font-weight: 600; letter-spacing: 0;
}
.scheda-piccolo { margin-top: var(--sp-3); font-size: var(--t-small); color: var(--testo-soft); }

.scheda-risposte {
  display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .scheda-risposte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scheda-risposta { padding: var(--sp-4) var(--sp-5); background-color: var(--grigio-chiaro); border-radius: var(--r-md); }
.scheda-risposta__icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: var(--sp-2);
  border-radius: 12px; background-color: #fff; color: var(--blu);
}
.scheda-risposta__icona svg { width: 22px; height: 22px; }
.scheda-blocco .scheda-risposta h3 { margin: 0 0 var(--sp-1); font-size: 1.0625rem; }
.scheda-risposta p { margin: 0; }

.scheda-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.scheda-chips li {
  margin: 0; padding: 6px 14px;
  border-radius: var(--r-pill); background-color: #E7EEF9; color: #234B87;
  font-size: .9375rem; font-weight: 600;
}
.scheda-chips--chiare li { background-color: #fff; border: 1px solid var(--grigio-bordo); color: var(--testo); }

.scheda-righe { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.scheda-righe li {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--grigio-bordo); border-radius: var(--r-md);
}
.scheda-righe svg { flex: none; width: 22px; height: 22px; color: var(--blu); }
.scheda-righe strong { color: var(--blu-scuro); }
.scheda-righe small { margin-left: 6px; font-size: var(--t-small); color: var(--testo-soft); }

.scheda-dati { display: grid; margin: 0; border: 1px solid var(--grigio-bordo); border-radius: var(--r-md); overflow: hidden; }
.scheda-dati > div { display: grid; gap: 2px var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--grigio-bordo); }
.scheda-dati > div:last-child { border-bottom: 0; }
.scheda-dati > div:nth-child(odd) { background-color: #FAFBFC; }
@media (min-width: 40rem) { .scheda-dati > div { grid-template-columns: 11rem minmax(0, 1fr); } }
.scheda-dati dt { font-weight: 700; color: var(--blu-scuro); }
.scheda-dati dd { margin: 0; }
.scheda-verificato {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 1px 9px;
  border-radius: var(--r-pill); background-color: #E6F4EE; color: #1F6B52;
  font-size: .875rem; font-weight: 700; white-space: nowrap;
}
.scheda-verificato svg { width: 15px; height: 15px; }

.scheda-contenuti { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.scheda-contenuti li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center;
  margin: 0; padding: var(--sp-3) var(--sp-4);
  background-color: #fff; border: 1px solid var(--grigio-bordo); border-radius: var(--r-md);
}
@media (min-width: 40rem) { .scheda-contenuti li { grid-template-columns: auto minmax(0, 1fr) auto; } }
.scheda-contenuti__icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background-color: #E6F4EE; color: var(--verde-testo);
}
.scheda-contenuti__icona svg { width: 22px; height: 22px; }
.scheda-contenuti strong { display: block; color: var(--blu-scuro); font-weight: 700; line-height: 1.3; }
.scheda-contenuti div > span { font-size: var(--t-small); color: var(--testo-soft); }
.scheda-contenuti__area {
  grid-column: 2; justify-self: start;
  padding: 3px 10px; border-radius: var(--r-pill);
  background-color: var(--grigio-chiaro); color: var(--testo);
  font-size: .875rem; font-weight: 600;
}
@media (min-width: 40rem) { .scheda-contenuti__area { grid-column: auto; justify-self: end; } }

.scheda-fonti {
  display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.scheda-fonti > div { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background-color: var(--grigio-chiaro); }
.scheda-fonti > div:first-child { background-color: #E6F4EE; }
.scheda-blocco .scheda-fonti h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-2); font-size: 1.0625rem; }
.scheda-fonti h3 svg { flex: none; width: 20px; height: 20px; }
.scheda-fonti p { margin: 0; }
.scheda-aggiornata { display: flex; align-items: center; gap: 8px; margin: var(--sp-5) 0 0; color: var(--testo-soft); }
.scheda-aggiornata svg { flex: none; width: 18px; height: 18px; }

/* --- Altri professionisti ------------------------------------------------ */
.scheda-altri {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.scheda-altro {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--pad-md);
  background-color: #fff; border: 1px solid var(--grigio-bordo); border-radius: var(--r-lg);
  box-shadow: var(--ombra-1);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.scheda-altro:hover { border-color: #C6D7EE; box-shadow: var(--ombra-2); }
.scheda-altro:has(a:focus-visible) { outline: 3px solid rgba(43, 93, 170, .4); outline-offset: 3px; }
.scheda-altro h3 { margin: 0; font-size: var(--t-h4); }
.scheda-altro h3 a { color: inherit; text-decoration: none; }
.scheda-altro h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.scheda-altro h3 a:focus-visible { outline: none; }
.scheda-altro p { margin: 2px 0 0; font-size: var(--t-small); color: var(--testo-soft); }
.scheda-tutti { margin: var(--sp-5) 0 0; }

/* ===========================================================================
   53. Ricerca dei corsi (/corsi-fisioterapisti/)
   Stesso pannello della ricerca professionisti (sezione 51). Qui l'area del
   corpo e' il filtro principale (PDF madre): primo, e segnato in verde
   finche' non e' scelto; scelto, diventa blu come gli altri.
   =========================================================================== */

.rc { margin-top: 0; }
select.rp-pill--principale:not(.is-attivo) { background-color: #E6F4EE; border-color: #9FD3BF; color: #1F6B52; }
select.rp-pill--principale:not(.is-attivo):hover { background-color: #DCF0E7; }

.corso {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--pad-md);
  background-color: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-1);
}
.corso > * { margin: 0; }

.corso__testa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.corso__icona {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 11px;
  background-color: #E6F4EE; color: var(--verde-testo);
}
.corso__icona svg { width: 20px; height: 20px; }
.corso__tipo { font-size: .875rem; font-weight: 700; color: var(--testo-soft); }
.corso__area {
  margin-left: auto; padding: 3px 10px;
  border-radius: var(--r-pill); background-color: #E7EEF9; color: #234B87;
  font-size: .875rem; font-weight: 700;
}

.rp-griglia .corso__titolo { margin: 0; font-size: var(--t-h4); line-height: 1.3; }
.corso__autore { font-size: var(--t-small); color: var(--testo-soft); }
.corso__autore a { font-weight: 600; }

.corso__dati { display: grid; gap: 6px; margin: 0; }
.corso__dati > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 8px; }
.corso__dati dt {
  font-size: .875rem; font-weight: 700; letter-spacing: .02em;
  color: var(--testo-soft);
}
.corso__dati dd { margin: 0; font-size: var(--t-small); color: var(--testo); }

.corso__piede {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: auto !important; padding-top: var(--sp-3);
  border-top: 1px solid var(--grigio-bordo);
  font-size: .875rem; color: var(--testo-soft);
}
.corso__livello { font-weight: 700; color: var(--blu-scuro); }
.corso__piede .prof__prova { margin-left: auto; }