/* ==========================================================================
   Giovane Odontoiatria — foglio di stile

   Il linguaggio visivo e' quello della scheda Apple in
   awesome-design-md/design-md/apple/DESIGN.md: fotografia in primo piano e
   interfaccia che si fa da parte. In pratica significa tre regole che qui
   valgono ovunque:

   1. un solo colore interattivo. Nella scheda Apple e' l'Action Blue; qui il
      cliente lo ha voluto tolto, quindi l'azione e' **nera su fondo chiaro e
      bianca su fondo scuro** (`--azione` e `--azione-su-scuro`). Non ce n'e'
      un secondo, nemmeno per gli stati. Conseguenza: un collegamento dentro
      un testo non si distingue piu' per colore, e va sottolineato;
   2. nessuna ombra sulle schede, sui bottoni o sul testo. L'unica ombra del
      sistema sta sotto le fotografie appoggiate a una superficie;
   3. le sezioni sono fasce a tutta larghezza che si alternano chiaro/scuro:
      e' il cambio di fondo a fare da separatore, non una riga o un bordo.

   La scala tipografica e' quella misurata nella scheda (17px per il corpo,
   non 16; crenatura negativa dai 17px in su; pesi 300/400/600/700 senza il
   500).
   ========================================================================== */

/* ------------------------------------------------------------- variabili */

:root {
  /* colore */
  /* Niente blu: l'azione e' nera su fondo chiaro e bianca su fondo scuro.
     I nomi restano quelli, cosi' ogni pezzo che gia' li usava segue da solo. */
  --azione: #000000;
  --azione-fuoco: #333333;     /* il passaggio del puntatore schiarisce */
  --azione-su-scuro: #ffffff;

  /* L'anello di fuoco cambia con il fondo: nero sul chiaro, bianco sullo
     scuro. E' una variabile ereditata, quindi basta ridichiararla sul
     contenitore scuro e tutto quello che sta dentro la segue. */
  --fuoco: #000000;

  --inchiostro: #1d1d1f;
  --inchiostro-80: #333333;
  /* La scheda Apple dava #7a7a7a per il testo secondario: su bianco fa
     4,29:1 e su pergamena 3,94:1, sotto il 4,5:1 che WCAG chiede al testo
     normale — e qui e' usato per didascalie e aiuti dei campi, cioe' proprio
     testo piccolo. Scurito al valore piu' chiaro che passa su entrambi i
     fondi: 4,94:1 su bianco, 4,53:1 su pergamena. */
  --inchiostro-48: #707073;

  --tela: #ffffff;
  --pergamena: #f5f5f7;
  --perla: #fafafc;
  --scuro-1: #272729;
  --scuro-2: #2a2a2c;
  --scuro-3: #252527;
  --nero: #000000;

  --su-scuro: #ffffff;
  --su-scuro-attenuato: #cccccc;
  --filo: #e0e0e0;
  --filo-tenue: #f0f0f0;
  /* Il filo tenue va bene per separare due riquadri, che sono decorazione.
     Il bordo di un campo o di una scelta invece e' l'unica cosa che dice
     dove finisce il controllo: WCAG chiede 3:1. Questo fa 3,28:1 su bianco
     e 3,01:1 su pergamena. */
  --filo-controllo: #8e8e8e;

  /* forma */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pillola: 9999px;

  /* spazio */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 17px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-sezione: 80px;

  /* l'unica ombra del sistema: sta sotto le fotografie, mai sotto l'interfaccia */
  --ombra-foto: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  /* misure */
  --largh-testo: 980px;
  --largh-piena: 1440px;
  --alt-nav: 56px;
  --alt-sottonav: 52px;

  --carattere-display: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Inter", "Helvetica Neue", Arial, sans-serif;
  --carattere-testo: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- azzeramento */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alt-nav) + var(--alt-sottonav) + 8px);
}

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

body {
  margin: 0;
  background: var(--tela);
  color: var(--inchiostro);
  font-family: var(--carattere-testo);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--carattere-display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--azione); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Con il blu, un collegamento dentro un testo si riconosceva dal colore.
   Ora e' nero come il testo che lo circonda, quindi lo deve dire la
   sottolineatura — WCAG 1.4.1: il colore da solo non puo' portare
   un'informazione, e qui non c'e' piu' nemmeno quello. */
p a, li a, address a, blockquote a, dd a, figcaption a, summary a,
.contatto .valore a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
/* Fuori dai testi il posto basta: menu, piede, briciole, schede, bottoni. */
.nav-voci a, .nav-azioni a, .nav-marchio, .sotto-nav a, .briciole a, .pie a,
.tessera a, .scheda a, .persona a, .articolo-tessera a, .barra-azioni a,
.bottone, .collegamento-avanti, .salta-al-contenuto { text-decoration: none; }

/* Sul nero l'anello nero non si vedrebbe: qui la variabile diventa bianca e
   la ereditano tutti i discendenti. */
.nav-globale, .eroe, .fascia-scura, .fascia-scura-2, .fascia-scura-3,
.fascia-nera, .tessera { --fuoco: var(--su-scuro); }
/* ...tranne i riquadri bianchi appoggiati sopra una fascia scura. */
.modulo-guscio, .scheda-chiara { --fuoco: var(--nero); }

:focus-visible {
  outline: 2px solid var(--fuoco);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tela);
  color: var(--azione);
  padding: var(--s-sm) var(--s-lg);
  border-radius: 0 0 var(--r-sm) 0;
}
.salta-al-contenuto:focus { left: 0; }

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

/* ------------------------------------------------------------ tipografia */

.display-eroe {
  font-family: var(--carattere-display);
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.028em;
}

.display-grande {
  font-family: var(--carattere-display);
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.display-medio {
  font-family: var(--carattere-testo);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
}

/* L'occhiello e' un'etichetta, non un collegamento. Prima era Action Blue:
   in un sistema dove il blu vuol dire «cliccabile», tingere di blu una
   parola che non porta da nessuna parte insegna al lettore la cosa
   sbagliata. Resta l'inchiostro attenuato, che passa 4,94:1 su bianco. */
.occhiello {
  font-family: var(--carattere-testo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inchiostro-48);
  margin: 0 0 var(--s-sm);
}
.fascia-scura .occhiello,
.fascia-scura-2 .occhiello,
.fascia-scura-3 .occhiello,
.fascia-nera .occhiello { color: var(--su-scuro-attenuato); }

.guida {
  font-family: var(--carattere-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.007em;
  color: var(--inchiostro-80);
}
.fascia-scura .guida { color: var(--su-scuro-attenuato); }

.guida-ariosa {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
}

.occhiello-tag {
  font-family: var(--carattere-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.011em;
}

.didascalia {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.016em;
  color: var(--inchiostro-48);
}

.minuta { font-size: 12px; line-height: 1.4; letter-spacing: -0.01em; }

/* --------------------------------------------------------------- impianto */

/* La scheda Apple dice 80px di aria dentro una fascia, che sul telefono
   diventano troppi: il minimo scende a 48px e il massimo resta il valore
   della scala. */
.fascia {
  padding-block: clamp(var(--s-xxl), 8vw, var(--s-sezione));
  padding-inline: var(--s-lg);
}

.fascia-chiara     { background: var(--tela);      color: var(--inchiostro); }
.fascia-pergamena  { background: var(--pergamena); color: var(--inchiostro); }
.fascia-scura      { background: var(--scuro-1);   color: var(--su-scuro); }
.fascia-scura-2    { background: var(--scuro-2);   color: var(--su-scuro); }
.fascia-scura-3    { background: var(--scuro-3);   color: var(--su-scuro); }
.fascia-nera       { background: var(--nero);      color: var(--su-scuro); }

.fascia-scura h1, .fascia-scura h2, .fascia-scura h3,
.fascia-scura-2 h1, .fascia-scura-2 h2, .fascia-scura-2 h3,
.fascia-scura-3 h1, .fascia-scura-3 h2, .fascia-scura-3 h3,
.fascia-nera h1, .fascia-nera h2, .fascia-nera h3 { color: var(--su-scuro); }

.fascia-scura a:not(.bottone), .fascia-scura-2 a:not(.bottone),
.fascia-scura-3 a:not(.bottone), .fascia-nera a:not(.bottone) {
  color: var(--azione-su-scuro);
}

.contenitore { max-width: var(--largh-piena); margin-inline: auto; }
.contenitore-testo { max-width: var(--largh-testo); margin-inline: auto; }
.contenitore-stretto { max-width: 720px; margin-inline: auto; }

.centrato { text-align: center; }
.pila { display: flex; flex-direction: column; }
.pila-lg { gap: var(--s-lg); }
.pila-xl { gap: var(--s-xl); }

.testata-fascia { max-width: 760px; margin-bottom: var(--s-xxl); }
.testata-fascia.centrato { margin-inline: auto; }
.testata-fascia > p { margin-top: var(--s-md); }

/* ---------------------------------------------------------------- bottoni */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pillola);
  font-family: var(--carattere-testo);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.bottone:hover { text-decoration: none; }
.bottone:active { transform: scale(0.95); }
.bottone[disabled] { opacity: 0.45; cursor: not-allowed; }
.bottone[disabled]:active { transform: none; }

.bottone-primario { background: var(--azione); color: #fff; }
.bottone-primario:hover { background: var(--azione-fuoco); color: #fff; }

.bottone-fantasma {
  background: transparent;
  color: var(--azione);
  border-color: var(--azione);
}
.bottone-fantasma:hover { background: rgba(0, 0, 0, 0.06); }

/* Bottone della scelta che non e' quella suggerita (il pannello dei
   consensi). Con l'azione blu era un pieno grigio contro un pieno blu;
   adesso che l'azione e' nera un pieno grigio accanto a un pieno nero
   pesa troppo poco, quindi qui e' un contorno: stessa misura, stesso
   carattere, un pieno e un vuoto che si guardano alla pari. */
.bottone-neutro {
  background: transparent;
  color: var(--inchiostro);
  border-color: var(--inchiostro);
}
.bottone-neutro:hover { background: rgba(0, 0, 0, 0.06); color: var(--inchiostro); }

.fascia-scura .bottone-fantasma,
.fascia-scura-2 .bottone-fantasma,
.fascia-scura-3 .bottone-fantasma,
.fascia-nera .bottone-fantasma {
  color: var(--azione-su-scuro);
  border-color: var(--azione-su-scuro);
}

/* Su fondo scuro il pieno nero sparirebbe: il bottone principale si
   rovescia, bianco con la scritta nera. Oggi nel sito il primario sta sempre
   dentro il riquadro bianco del modulo, ma la regola evita che un domani
   qualcuno lo appoggi al fondo scuro e resti invisibile. */
.fascia-scura .bottone-primario, .fascia-scura-2 .bottone-primario,
.fascia-scura-3 .bottone-primario, .fascia-nera .bottone-primario {
  background: var(--su-scuro);
  color: var(--nero);
}
.fascia-scura .bottone-primario:hover, .fascia-scura-2 .bottone-primario:hover,
.fascia-scura-3 .bottone-primario:hover, .fascia-nera .bottone-primario:hover {
  background: var(--su-scuro-attenuato);
  color: var(--nero);
}
/* dentro il riquadro bianco del modulo torna nero */
.modulo-guscio .bottone-primario { background: var(--azione); color: var(--su-scuro); }
.modulo-guscio .bottone-primario:hover { background: var(--azione-fuoco); color: var(--su-scuro); }

/* Sopra una fotografia l'Action Blue sparisce: contro una pelle chiara o un
   muro bianco il bordo blu non si vede. Qui il bottone secondario diventa
   bianco su vetro smerigliato — resta un solo colore d'azione nel sistema,
   perche' questo non ne introduce nessuno. */
.bottone-su-foto {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bottone-su-foto:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

.bottone-utile {
  background: var(--inchiostro);
  color: #fff;
  border-radius: var(--r-sm);
  min-height: 36px;
  padding: 8px 15px;
  font-size: 14px;
  letter-spacing: -0.016em;
}

.bottone-perla {
  background: var(--perla);
  color: var(--inchiostro-80);
  border: 3px solid var(--filo-tenue);
  border-radius: var(--r-md);
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
}

.gruppo-bottoni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  align-items: center;
}
.centrato .gruppo-bottoni { justify-content: center; }

.collegamento-avanti::after {
  content: "\203A";
  margin-left: 4px;
  display: inline-block;
  transition: transform 0.16s ease;
}
.collegamento-avanti:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------- barra alta */

.nav-globale {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--nero);
  color: var(--su-scuro);
  height: var(--alt-nav);
  display: flex;
  align-items: center;
}
.nav-globale .contenitore {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  padding-inline: var(--s-lg);
}

.nav-marchio { display: flex; align-items: center; gap: var(--s-xs); }
/* Il marchio e' un lettering sottilissimo: sotto i 18px, invertito su nero,
   diventa illeggibile. A 34px in una barra da 56 restano 11px d'aria sopra e
   sotto, e si legge anche la riga piccola sotto il nome. */
.nav-marchio img { height: 34px; width: auto; filter: invert(1) brightness(2); }

/* Il guscio <nav> esiste per dare al menu un ruolo di navigazione: senza,
   chi usa un lettore di schermo non ha modo di saltarci dentro. Non porta
   stile suo, lo passa all'elenco. */
.nav-voci-guscio { margin: 0 auto 0 var(--s-lg); }

.nav-voci {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-voci a {
  color: var(--su-scuro);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  opacity: 0.86;
}
.nav-voci a:hover { opacity: 1; text-decoration: none; }
.nav-voci a[aria-current="page"] { opacity: 1; font-weight: 600; }

.nav-azioni { display: flex; align-items: center; gap: var(--s-md); margin-left: auto; }

/* Sul nero il pieno nero sparirebbe: in barra il bottone si rovescia. */
.nav-globale .bottone-primario { background: var(--su-scuro); color: var(--nero); }
.nav-globale .bottone-primario:hover { background: var(--su-scuro-attenuato); color: var(--nero); }
/* Compatto: in una barra da 56 un bottone da 44 la riempie tutta. */
.bottone-barra { min-height: 36px; padding: 7px 16px; font-size: 14px; }
.nav-wa { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-azioni a {
  color: var(--su-scuro);
  font-size: 14px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-interruttore {
  display: none;
  background: none;
  border: 0;
  color: var(--su-scuro);
  padding: var(--s-xs);
  margin-left: auto;
  cursor: pointer;
}

/* --------------------------------------------------------- barra di sezione */

.sotto-nav {
  position: sticky;
  top: var(--alt-nav);
  z-index: 80;
  height: var(--alt-sottonav);
  display: flex;
  align-items: center;
  background: rgba(245, 245, 247, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sotto-nav .contenitore {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  padding-inline: var(--s-lg);
}
.sotto-nav .titolo-sezione {
  font-family: var(--carattere-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.011em;
  color: var(--inchiostro);
  white-space: nowrap;
}
.sotto-nav .titolo-sezione a { color: inherit; }
.sotto-nav ul {
  display: flex;
  gap: var(--s-lg);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.sotto-nav ul a {
  font-size: 14px;
  letter-spacing: -0.016em;
  color: var(--inchiostro-80);
}
.sotto-nav ul a[aria-current="page"] { color: var(--azione); font-weight: 600; }
.sotto-nav .bottone { min-height: 32px; padding: 6px 16px; font-size: 14px; }

/* --------------------------------------------------------------- eroe */

.eroe {
  position: relative;
  min-height: min(70vh, 640px);
  display: flex;
  align-items: flex-end;
  background: var(--nero);
  color: var(--su-scuro);
  overflow: hidden;
}
.eroe-sfondo, .eroe-sfondo video, .eroe-sfondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Due veli sovrapposti, non uno. Quello dal basso da' peso al blocco di
   testo; quello da sinistra serve perche' la fotografia della sala d'attesa
   e' chiarissima proprio dove cade il titolo, e con il solo velo verticale
   il bianco su bianco non si leggeva. Non e' decorazione: senza, il testo
   non passa il contrasto. */
.eroe-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.28) 100%);
}
/* Sul telefono il velo laterale sparisce (il testo occupa tutta la larghezza)
   e resta solo quello dal basso. Misurato sul pixel piu' chiaro della foto
   sotto il blocco di testo: con 0,45 di velo l'occhiello bianco arrivava a
   3,36:1, sotto la soglia. Con 0,70 sale a 8,45:1. */
/* Il menu disteso vuole 1029px per stare in riga: marchio 34px, sei voci a
   14px, WhatsApp e il bottone «Prenota una visita». Sotto quella misura si
   stringeva fino a sovrapporsi, quindi il panino compare gia' sul tablet.
   La soglia e' 1060 e non 1029 per lasciare un margine: le voci del menu
   sono testo, e cambiano larghezza col carattere che il browser trova. */
@media (max-width: 1060px) {
  .nav-voci-guscio { display: none; }
  /* Il panino sta nell'HTML subito dopo il marchio, ma in barra va all'estrema
     destra: senza l'ordine finiva in mezzo, fra il marchio e i recapiti. */
  .nav-interruttore { display: inline-flex; order: 3; margin-left: var(--s-md); }
  .nav-azioni { order: 2; margin-left: auto; }
  .nav-globale.aperta { height: auto; align-items: stretch; }
  /* row-gap a zero: la barra ha `gap: var(--s-lg)`, e quando va a capo quei
     24px si infilano anche fra l'ultima voce e il filo dei recapiti,
     lasciando un buco nero. Le distanze qui le danno i margini. */
  .nav-globale.aperta .contenitore {
    flex-wrap: wrap;
    row-gap: 0;
    padding-bottom: var(--s-md);
  }
  /* L'elenco aperto va in fondo (order 4): con l'ordine dell'HTML si infilava
     fra il marchio e i recapiti e, essendo largo quanto la barra, spingeva
     recapiti e panino su una terza riga. */
  .nav-globale.aperta .nav-voci-guscio {
    display: block;
    order: 4;
    width: 100%;
    margin: var(--s-md) 0 0;
  }
  /* Ogni voce e' una riga intera separata da un filo, non una parola
     appoggiata nel nero: il bersaglio passa da 20 a 46px, sopra i 44
     richiesti per il dito. */
  .nav-globale.aperta .nav-voci {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-globale.aperta .nav-voci li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .nav-globale.aperta .nav-voci a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 17px;
    opacity: 1;
  }
}

@media (max-width: 833px) {
  .eroe-velo {
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.72) 62%,
      rgba(0, 0, 0, 0.4) 100%);
  }
}
.eroe-contenuto {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--largh-piena);
  margin-inline: auto;
  /* Il testo sta in basso: tutto lo spazio che avanza finisce sopra di lui.
     Il margine di sopra e' meta' di quello di sotto, e il riquadro e' piu'
     basso, altrimenti fra la barra e l'occhiello resta mezzo schermo vuoto. */
  padding: clamp(20px, 3.5vw, 40px) var(--s-lg) clamp(40px, 7vw, 80px);
}
/* Sopra la fotografia l'occhiello resta bianco: il blu chiaro delle fasce
   scure, su uno scatto luminoso, non si legge. */
.eroe-contenuto .occhiello { color: #ffffff; }
.eroe-contenuto h1 { color: var(--su-scuro); max-width: 15ch; }
.eroe-contenuto .guida { color: rgba(255, 255, 255, 0.9); max-width: 46ch; margin-top: var(--s-lg); }
.eroe-contenuto .gruppo-bottoni { margin-top: var(--s-xl); }

.eroe-semplice {
  background: var(--pergamena);
  color: var(--inchiostro);
  padding: clamp(28px, 4.5vw, 52px) var(--s-lg) clamp(40px, 6vw, 64px);
}
.eroe-semplice h1 { max-width: 20ch; }
.eroe-semplice .guida { margin-top: var(--s-lg); max-width: 58ch; }

/* --------------------------------------------------------------- griglie */

.griglia { display: grid; gap: var(--s-lg); }
.griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.affiancato {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.affiancato.rovesciato > :first-child { order: 2; }

/* ---------------------------------------------------------------- schede */

.scheda {
  background: var(--tela);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
.fascia-scura .scheda, .fascia-scura-2 .scheda, .fascia-scura-3 .scheda {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--su-scuro);
}
.scheda h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.24; }
.scheda p { font-size: 15px; color: var(--inchiostro-80); margin: 0; }
.fascia-scura .scheda p { color: var(--su-scuro-attenuato); }

.scheda-immagine {
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* La storia di Sofia e' un montaggio di tre fotografie sovrapposte, non uno
   scatto solo: ritagliarlo a 4/3 tagliava a meta' il primo e l'ultimo
   riquadro. Questa resta intera, con le proporzioni sue. */
.scheda-immagine-intera { aspect-ratio: auto; object-fit: contain; background: var(--perla); }

/* fotografia appoggiata a una superficie: l'unica ombra del sistema */
.foto-appoggiata { box-shadow: var(--ombra-foto); border-radius: var(--r-sm); }

/* I filmati dello studio sono verticali 9:16: a tutta larghezza sarebbero
   alti due schermi, quindi stanno in una colonna stretta, centrata. Il
   guscio serve a tenere il comando dell'audio appoggiato sopra il video. */
.filmato { position: relative; display: block; width: 100%; }
.filmato-verticale { max-width: 340px; margin-inline: auto; }
.filmato video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  background: #000;
}

/* Il comando dell'audio sta sul video, quindi non puo' essere ne' nero ne'
   bianco pieno: e' vetro smerigliato con il bordo chiaro, come il bottone
   secondario sopra le fotografie. */
.audio-filmato {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pillola);
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.audio-filmato:hover { background: rgba(0, 0, 0, 0.5); }
.audio-filmato:active { transform: scale(0.94); }
.audio-filmato .suona { display: none; }
.audio-filmato[aria-pressed="true"] .muto { display: none; }
.audio-filmato[aria-pressed="true"] .suona { display: block; }
/* finche' il JavaScript non l'ha collegato non serve a niente: resta fuori */
.audio-filmato:not([aria-pressed]) { display: none; }

.riquadro-figura { margin: 0; }
.riquadro-figura figcaption { margin-top: var(--s-sm); }

/* --------------------------------------------------- schede dei trattamenti */

.tessera {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--pergamena);
  min-height: 420px;
  isolation: isolate;
}
.tessera img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.tessera::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.05) 100%);
}
.tessera-corpo {
  margin-top: auto;
  padding: var(--s-lg);
  color: #fff;
}
.tessera-corpo h3 { color: #fff; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
.tessera-corpo p { color: rgba(255, 255, 255, 0.86); font-size: 15px; margin-top: var(--s-xs); }
.tessera-corpo .collegamento-avanti { color: var(--azione-su-scuro); display: inline-block; margin-top: var(--s-sm); }
.tessera a::after { content: ""; position: absolute; inset: 0; }

/* ------------------------------------------------------ confronto prima/dopo */

.confronto {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--pergamena);
  touch-action: pan-y;
  user-select: none;
}
.confronto img { width: 100%; display: block; }
.confronto-dopo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--taglio, 50%));
}
.confronto-maniglia {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--taglio, 50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-1px);
  pointer-events: none;
}
.confronto-maniglia::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.confronto-cursore {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.confronto-cursore:focus-visible + .confronto-maniglia::after {
  outline: 2px solid var(--fuoco);
  outline-offset: 3px;
}
.confronto-etichetta {
  position: absolute;
  top: var(--s-sm);
  padding: 5px 12px;
  border-radius: var(--r-pillola);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.confronto-etichetta.a-sinistra { left: var(--s-sm); }
.confronto-etichetta.a-destra { right: var(--s-sm); }

/* ---------------------------------------------------------------- persone */

.persona { display: flex; flex-direction: column; gap: var(--s-sm); position: relative; }
.persona img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--r-lg);
  background: var(--pergamena);
}
.persona h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.persona .ruolo { font-size: 14px; color: var(--inchiostro-48); letter-spacing: -0.016em; }
.persona a::after { content: ""; position: absolute; inset: 0; }

/* ----------------------------------------------------------------- orari */

.orari {
  margin: var(--s-lg) 0 var(--s-sm);
  display: grid;
  grid-template-columns: max-content auto;
  gap: 4px var(--s-lg);
  font-size: 15px;
}
.orari dt { color: var(--inchiostro-80); }
.orari dd { margin: 0; font-variant-numeric: tabular-nums; }
.orari .chiuso { color: var(--inchiostro-48); }

/* ------------------------------------------------------------- recensioni */

.voto {
  margin-top: var(--s-md);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.voto-conto { font-weight: 400; color: var(--inchiostro-80); }
.fascia-scura .voto-conto { color: var(--su-scuro-attenuato); }


.recensione {
  background: var(--tela);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
.recensione blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--inchiostro-80); }
.recensione cite { font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: -0.016em; }
.stelle { color: var(--inchiostro); letter-spacing: 2px; font-size: 13px; }

/* Le recensioni sono lunghe in modo molto diverso fra loro: in griglia le
   righe si allineavano alla piu' alta e restavano buchi bianchi. In colonne
   ogni scheda si sistema sotto la precedente, senza spazi morti. */
.muro-recensioni { columns: 3; column-gap: var(--s-lg); }
.muro-recensioni .recensione { break-inside: avoid; margin-bottom: var(--s-lg); }

/* -------------------------------------------------------------- domande */

.domanda {
  border-bottom: 1px solid var(--filo);
}
.domanda > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-lg) 40px var(--s-lg) 0;
  position: relative;
  font-family: var(--carattere-testo);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
}
.domanda > summary::-webkit-details-marker { display: none; }
.domanda > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: calc(50% - 6px);
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--azione);
  border-bottom: 2px solid var(--azione);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.domanda[open] > summary::after { transform: rotate(-135deg); top: calc(50% - 2px); }
.domanda .risposta { padding-bottom: var(--s-lg); color: var(--inchiostro-80); max-width: 78ch; }

/* --------------------------------------------------------- modulo a passi */

.modulo-guscio {
  background: var(--tela);
  border-radius: var(--r-lg);
  border: 1px solid var(--filo);
  padding: clamp(20px, 3vw, 40px);
  max-width: 720px;
  margin-inline: auto;
}
.fascia-scura .modulo-guscio,
.fascia-scura-2 .modulo-guscio,
.fascia-scura-3 .modulo-guscio,
.fascia-nera .modulo-guscio {
  background: var(--tela);
  color: var(--inchiostro);
  border-color: transparent;
}
/* Il modulo e' una scheda bianca appoggiata su una fascia scura: dentro, i
   titoli devono tornare neri. Senza questa riga la regola generale delle
   fasce scure li lasciava bianchi su bianco, cioe' invisibili. */
.fascia-scura .modulo-guscio :is(h1, h2, h3, h4),
.fascia-scura-2 .modulo-guscio :is(h1, h2, h3, h4),
.fascia-scura-3 .modulo-guscio :is(h1, h2, h3, h4),
.fascia-nera .modulo-guscio :is(h1, h2, h3, h4) { color: var(--inchiostro); }
.fascia-scura .modulo-guscio a:not(.bottone),
.fascia-scura-2 .modulo-guscio a:not(.bottone),
.fascia-scura-3 .modulo-guscio a:not(.bottone),
.fascia-nera .modulo-guscio a:not(.bottone) { color: var(--azione); }

.avanzamento { margin-bottom: var(--s-xl); }
.avanzamento-righe { display: flex; gap: 6px; }
.avanzamento-righe span {
  flex: 1;
  height: 3px;
  border-radius: var(--r-pillola);
  background: var(--filo);
  transition: background-color 0.25s ease;
}
.avanzamento-righe span.fatto { background: var(--azione); }
.avanzamento-testo {
  margin-top: var(--s-sm);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--inchiostro-48);
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
}

.passo { display: none; }
.passo.attivo { display: block; animation: entra 0.28s ease both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.passo-titolo {
  font-family: var(--carattere-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-xs);
}
.passo-guida { color: var(--inchiostro-48); font-size: 15px; margin-bottom: var(--s-lg); }

/* scelte a tessera del primo passo. Il <fieldset> serve a dichiarare che i
   quattro pulsanti sono un gruppo con una domanda sola: il browser gli mette
   addosso un bordo e dei margini suoi, che qui non servono. */
.gruppo-scelte { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.gruppo-scelte > .errore { display: block; margin-top: var(--s-xs); }

.scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sm); }
.scelta { position: relative; }
.scelta input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.scelta span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100%;
  padding: var(--s-md);
  border: 1px solid var(--filo-controllo);
  border-radius: var(--r-md);
  background: var(--tela);
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.scelta span b { font-size: 15px; font-weight: 600; letter-spacing: -0.016em; }
.scelta span i { font-style: normal; font-size: 13px; color: var(--inchiostro-48); line-height: 1.35; }
.scelta input:hover + span { border-color: var(--inchiostro-48); }
.scelta input:checked + span {
  border: 2px solid var(--azione);
  padding: calc(var(--s-md) - 1px);
  background: rgba(0, 0, 0, 0.04);
}
.scelta input:focus-visible + span { outline: 2px solid var(--fuoco); outline-offset: 3px; }
.scelta input:active + span { transform: scale(0.98); }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-md); }
.campo label { font-size: 14px; font-weight: 600; letter-spacing: -0.016em; }
.campo .aiuto { font-size: 12px; color: var(--inchiostro-48); }
.campo input, .campo textarea, .campo select {
  font-family: var(--carattere-testo);
  font-size: 17px;
  letter-spacing: -0.022em;
  color: var(--inchiostro);
  background: var(--tela);
  border: 1px solid var(--filo-controllo);
  border-radius: var(--r-pillola);
  padding: 12px 20px;
  min-height: 46px;
  width: 100%;
}
.campo textarea { border-radius: var(--r-md); min-height: 110px; resize: vertical; }
.campo input:focus, .campo textarea:focus {
  outline: 2px solid var(--fuoco);
  outline-offset: 1px;
  border-color: transparent;
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #b3261e; }
.campo .errore { font-size: 13px; color: #b3261e; min-height: 1.2em; }

.coppia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md); }

.consenso {
  display: flex;
  gap: var(--s-sm);
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--inchiostro-80);
  background: var(--pergamena);
  border-radius: var(--r-md);
  padding: var(--s-md);
}
.consenso input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--azione); }

.riepilogo {
  background: var(--pergamena);
  border-radius: var(--r-md);
  padding: var(--s-md);
  margin-bottom: var(--s-md);
  font-size: 14px;
}
.riepilogo dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-md); margin: 0; }
.riepilogo dt { color: var(--inchiostro-48); }
.riepilogo dd { margin: 0; font-weight: 600; }

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.comandi-passo { display: flex; gap: var(--s-sm); align-items: center; margin-top: var(--s-lg); }
.comandi-passo .a-destra { margin-left: auto; }

.esito-modulo {
  margin-top: var(--s-md);
  font-size: 15px;
  border-radius: var(--r-md);
  padding: var(--s-md);
}
/* Non «display: none» quando e' vuota: un lettore di schermo non annuncia
   mai il contenuto di una regione live che nasce nascosta. Resta nel flusso,
   senza riquadro e senza spazio, finche' non c'e' niente da dire. */
.esito-modulo:empty { padding: 0; min-height: 0; margin-top: 0; }
.esito-modulo.ok { background: rgba(0, 0, 0, 0.05); color: var(--inchiostro); }
.esito-modulo.ko { background: rgba(179, 38, 30, 0.08); color: #b3261e; }

/* -------------------------------------------------------------- contatti */

.riga-contatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-lg); }
.contatto {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-lg);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  background: var(--tela);
  position: relative;
}
.contatto .etichetta { font-size: 14px; font-weight: 600; letter-spacing: -0.016em; }
.contatto .valore { font-family: var(--carattere-display); font-size: 21px; font-weight: 600; letter-spacing: 0.011em; }
.contatto p { font-size: 14px; color: var(--inchiostro-48); margin: 0; }
.contatto a::after { content: ""; position: absolute; inset: 0; }

.mappa-segnaposto {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--pergamena);
  border: 1px solid var(--filo);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  text-align: center;
  padding: var(--s-xl);
}
.mappa-segnaposto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ----------------------------------------------------------------- blog */

.articolo-tessera { display: flex; flex-direction: column; gap: var(--s-sm); position: relative; }
.articolo-tessera img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--pergamena);
}
.articolo-tessera h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.3; }
.articolo-tessera p { font-size: 14px; color: var(--inchiostro-80); margin: 0; }
.articolo-tessera a::after { content: ""; position: absolute; inset: 0; }

.corpo-articolo { max-width: 720px; margin-inline: auto; }
.corpo-articolo h2 { font-size: clamp(22px, 2.4vw, 28px); margin: var(--s-xl) 0 var(--s-sm); line-height: 1.2; }
.corpo-articolo h3 { font-size: 21px; margin: var(--s-lg) 0 var(--s-xs); }
.corpo-articolo p, .corpo-articolo li { font-size: 16px; line-height: 1.6; }
.corpo-articolo ul, .corpo-articolo ol { padding-left: 1.3em; margin: 0 0 var(--s-md); }
.corpo-articolo li { margin-bottom: 6px; }
.corpo-articolo blockquote {
  margin: var(--s-lg) 0;
  padding-left: var(--s-lg);
  border-left: 2px solid var(--azione);
  color: var(--inchiostro-80);
}
.corpo-articolo hr { border: 0; border-top: 1px solid var(--filo); margin: var(--s-xl) 0; }
.corpo-articolo table { width: 100%; border-collapse: collapse; font-size: 15px; }
.corpo-articolo th, .corpo-articolo td {
  border-bottom: 1px solid var(--filo);
  padding: var(--s-sm);
  text-align: left;
  vertical-align: top;
}
.tabella-scorrevole { overflow-x: auto; }

.briciole { font-size: 12px; letter-spacing: -0.01em; color: var(--inchiostro-48); margin-bottom: var(--s-md); }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.briciole li:not(:last-child)::after { content: "\203A"; margin-left: 6px; color: var(--filo); }
.fascia-scura .briciole, .eroe .briciole { color: rgba(255, 255, 255, 0.7); }

/* ------------------------------------------------------------ pie' pagina */

.pie {
  background: var(--pergamena);
  color: var(--inchiostro-80);
  padding: 64px var(--s-lg) var(--s-xl);
}
.pie .contenitore { display: grid; gap: var(--s-xl); }
.pie-alto { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-xl); }
.pie h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.016em; margin-bottom: var(--s-xs); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie ul a { font-size: 15px; line-height: 2.1; color: var(--inchiostro-80); }
.pie ul a:hover { color: var(--azione); }
.pie .indirizzo { font-style: normal; font-size: 15px; line-height: 1.7; }
.pie-basso {
  border-top: 1px solid var(--filo);
  padding-top: var(--s-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
  align-items: center;
  font-size: 12px;
  color: var(--inchiostro-48);
}
.pie-basso a { color: var(--inchiostro-48); }
.pie-basso .legali { display: flex; flex-wrap: wrap; gap: var(--s-lg); margin-left: auto; }
.pie-marchio img { height: 36px; width: auto; margin-bottom: var(--s-md); }

/* ------------------------------------------------------- barra fissa mobile */

.barra-azioni {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  display: none;
  gap: var(--s-xs);
  padding: 10px var(--s-sm) calc(10px + env(safe-area-inset-bottom));
  background: rgba(245, 245, 247, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.barra-azioni .bottone { flex: 1; font-size: 15px; padding: 10px 12px; }

/* ------------------------------------------------------------ via breve */

/* Sotto il modulo: chi non ha voglia di compilare tre passaggi scrive due
   righe su WhatsApp. E' la stessa richiesta, per un'altra strada. */
.via-breve {
  margin: var(--s-lg) auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 15px;
  color: var(--inchiostro-80);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm) var(--s-md);
}
.fascia-scura .via-breve, .fascia-scura-2 .via-breve,
.fascia-scura-3 .via-breve, .fascia-nera .via-breve { color: var(--su-scuro-attenuato); }
.via-breve .bottone { font-size: 15px; min-height: 40px; padding: 9px 18px; }
.via-breve .segno { margin-right: 2px; }

/* ------------------------------------------------------- pannello consensi */

/* Stesso vetro smerigliato della barra di sezione, stessa larghezza di
   contenuto del resto delle pagine: il pannello si legge come una fascia del
   sito appoggiata in fondo, non come un riquadro arrivato da un'altra parte. */
.consensi {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  /* 0,94 e non 0,8 come la barra di sezione: quella sta sempre su fondo
     chiaro, questo galleggia anche sopra l'eroe nero e le fasce scure. Sotto
     0,92 il vetro si scurisce e il collegamento alla Cookie Policy scende a
     4,02:1, sotto la soglia. */
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: var(--s-lg) 0 calc(var(--s-lg) + env(safe-area-inset-bottom));
  animation: consensi-entra 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.consensi[hidden] { display: none; }
/* Il pannello prende il fuoco da solo all'apertura, per far leggere la
   domanda prima delle risposte. Non e' un comando e non si raggiunge col
   Tab: l'anello azzurro attorno al riquadro era solo una riga blu storta
   sopra la barra. I due bottoni dentro il loro anello ce l'hanno. */
.consensi:focus, .consensi:focus-visible { outline: none; }

@keyframes consensi-entra {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .consensi { animation: none; }
}

.consensi .contenitore {
  width: 100%;
  max-width: var(--largh-piena);
  margin-inline: auto;
  padding-inline: var(--s-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
  align-items: center;
}
.consensi-testo { flex: 1 1 380px; min-width: 0; }
.consensi-titolo {
  font-family: var(--carattere-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--inchiostro);
  margin: 0 0 2px;
}
.consensi p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--inchiostro-80); max-width: 62ch; }
.consensi .gruppo-bottoni { margin-left: auto; flex: 0 0 auto; }
.consensi .bottone { min-height: 44px; font-size: 15px; padding: 11px 20px; }

/* ------------------------------------------------------------- reattivita' */

@media (max-width: 1068px) {
  .griglia-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 833px) {
  /* Qui subentra la barra fissa in basso con Chiama e WhatsApp: gli stessi
     due recapiti anche in cima sono un doppione che ruba larghezza. */
  .nav-azioni { display: none; }
  /* sparita la riga dei recapiti, e' il panino a doversi spingere a destra */
  .nav-interruttore { margin-left: auto; }

  /* Menu aperto sul telefono. Senza questi ordini le quattro parti si
     impilavano ognuna sulla sua riga — marchio, recapiti, panino da solo,
     elenco — perche' i recapiti sono larghi quanto la barra e mandavano a
     capo il panino. L'ordine giusto e': marchio e panino insieme in cima,
     poi l'elenco, poi i recapiti. */
  .nav-globale.aperta .nav-interruttore { order: 1; }
  .nav-globale.aperta .nav-voci-guscio { order: 2; }
  .nav-globale.aperta .nav-azioni {
    order: 3;
    display: flex;
    width: 100%;
    gap: var(--s-lg);
    /* niente margine sopra: il filo deve attaccarsi all'ultima voce come
       tutti gli altri, altrimenti resta un buco nero in mezzo */
    margin: 0;
    padding-top: var(--s-md);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .sotto-nav ul { display: none; }
  .griglia-3, .griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .muro-recensioni { columns: 2; }
  .affiancato { grid-template-columns: 1fr; }
  .affiancato.rovesciato > :first-child { order: 0; }
  .riga-contatti { grid-template-columns: 1fr; }
  .pie-alto { grid-template-columns: 1fr 1fr; }
  .barra-azioni { display: flex; }
  body { padding-bottom: 68px; }

  /* Chiama e WhatsApp restano fissi in basso: il pannello dei consensi si
     appoggia sopra invece di coprirli, altrimenti la prima cosa che il
     visitatore vede al posto dei due tasti e' un riquadro di testo legale. */
  .consensi {
    bottom: calc(68px + env(safe-area-inset-bottom));
    /* la tacca del telefono la sta gia' scavalcando la barra qui sotto:
       ripetere env() nel padding lascerebbe una striscia vuota */
    padding-bottom: var(--s-lg);
  }
  .consensi .gruppo-bottoni { margin-left: 0; width: 100%; }
  .consensi .gruppo-bottoni .bottone { flex: 1; }

  /* Sul telefono il blocco di testo e' alto meno della meta' del riquadro: con
     70vh restavano oltre 200px di fotografia vuota fra la barra e l'occhiello.
     Queste due righe stanno in fondo al foglio di proposito: piu' su le
     scavalcava il `.eroe` del blocco a 640px. */
  .eroe { min-height: min(54vh, 460px); }
  .eroe-contenuto { padding-top: 28px; }
}

@media (max-width: 640px) {
  .griglia-2, .griglia-3, .griglia-4 { grid-template-columns: 1fr; }
  .muro-recensioni { columns: 1; }
  .scelte { grid-template-columns: 1fr; }
  .coppia-campi { grid-template-columns: 1fr; }
  .pie-alto { grid-template-columns: 1fr; }
  .pie-basso .legali { margin-left: 0; }
  .tessera { min-height: 340px; }
}

@media print {
  .nav-globale, .sotto-nav, .barra-azioni, .consensi, .modulo-guscio { display: none !important; }
  body { padding-bottom: 0; }
}