/* ============================================================
   Laboratorio Analisi Cliniche Dott. Giorgio Barreca
   Direzione: "Referto" — il sito parla la lingua del laboratorio.
   Direzione visiva: "Salvia istituzionale" — verde salvia, serif
   di carattere, corpo lineare. Scelta definita su temi.html.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Salvia — palette scelta. I nomi semantici storici restano stabili
     per i componenti, mentre i valori formano un'unica scala verde. */
  --ink: #1b3a2b;
  --ink-soft: #38604c;
  /* Sulla carta piena questo verde misurava 4,6:1, e sotto il vetro piu'
     trasparente scendeva ancora: le note sotto il nome dell'esame e le
     didascalie erano le prime a perdersi. Sceso di un gradino sta fra
     --ink-soft e dov'era, e sulla carta misura 6,0:1. */
  --ink-faint: #4c6858;
  --porcelain: #edf4ef;
  --paper: #fafdfb;
  --insegna: #2d6a4f;
  --insegna-deep: #1b3a2b;
  --insegna-bright: #95d5b2;
  --travertino: #dcebe2;
  --oro: #2d6a4f;
  --serum: #95d5b2;
  --lino: #e9f3ec;
  --lino-line: #c9e0d2;
  --salvia: #d5e8dc;
  --salvia-line: #bcd8c6;
  --insegna-ink: #1b3a2b;
  --mist: #c9e0d2;
  --line: rgba(var(--ink-rgb)/0.13);
  --line-strong: rgba(var(--ink-rgb)/0.3);
  --line-invert: rgba(var(--paper-rgb)/0.18);

  /* avviso di chiusura straordinaria: ambrato caldo, segnale accanto alla salvia */
  --ferie: #b45309;
  --ferie-bg: #fdf1e0;
  --ferie-line: #eed8b0;

  /* canali rgb: ogni tema ridefinisce i triplet e le alpha restano istantanee */
  --ink-rgb: 27 58 43;
  --serum-rgb: 149 213 178;
  --paper-rgb: 250 253 251;
  --porcelain-rgb: 237 244 239;
  --deep-rgb: 10 28 19;
  --insegna-rgb: 45 106 79;
  --ok-rgb: 46 160 92;
  --ok-deep-rgb: 16 90 52;
  --serum-soft: #c6e8d2;

  /* Il vetro deve lasciare leggibile il campo, non soltanto dichiarare un blur.
     Con banda + card sovrapposte resta visibile circa il 39% del fondale.
     Piu' trasparente vuol dire anche piu' vetro e non solo piu' velo: il
     bordo chiaro e il riflesso interno sono il taglio della lastra, ed e'
     quello a farla leggere come vetro invece che come velina.
     Il vetro scuro resta dov'era: sopra ci corre testo chiaro, e renderlo
     piu' trasparente lo avvicina al fondale invece di staccarlo. */
  --glass-band-alpha: 0.42;
  --glass-card-alpha: 0.32;
  --glass-dark-alpha: 0.64;
  --glass-border: rgba(255, 255, 255, 0.62);
  --glass-shadow: 0 1.1rem 3rem rgba(var(--deep-rgb)/0.16), inset 1px 1px 0 rgba(255, 255, 255, 0.72);
  /* La saturazione dei backdrop-filter e' salita insieme (da 1,14-1,2 a
     1,32-1,36): e' lei a far arrivare il colore del fondale attraverso la
     lastra, e senza di lei una lastra piu' trasparente sbiadisce invece di
     schiarirsi. Il blur non si tocca: e' la voce cara di queste superfici. */

  /* angoli: scala unica. Le pill restano a scomparsa totale (999px),
     i contenitori di pagina usano questa scala morbida */
  --radius-s: 0.4rem;
  --radius-m: 0.8rem;
  --radius-l: 1.15rem;

  /* tipografia istituzionale: Marcellus per i titoli, Public Sans per
     il corpo, IBM Plex Mono per numeri e micro-etichette da referto */
  --f-display: "Marcellus", Georgia, serif;
  --f-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;

  --t-hero: clamp(2.6rem, 7.4vw, 6.5rem);
  --t-h1: clamp(2.1rem, 5vw, 4rem);
  --t-h2: clamp(1.65rem, 3.4vw, 2.9rem);
  --t-h3: clamp(1.15rem, 1.7vw, 1.5rem);
  --t-body: clamp(1rem, 0.55vw + 0.88rem, 1.15rem);
  --t-mono: 0.72rem;

  /* spazio */
  --gut: clamp(1.25rem, 4vw, 4rem);
  --sec: clamp(4.5rem, 9vw, 9rem);
  --maxw: 78rem;
  --maxw-text: 40rem;

  /* movimento */
  --ease: cubic-bezier(0.16, 0.84, 0.28, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* campo istologico globale: il JS aggiorna solo queste tre opacita' */
  --histology-sage: 0;
  --histology-jade: 0;
  --histology-night: 0;

  /* accento di sezione: il JS interpola solo questi tre valori mentre si
     scorre. Il verde del vetrino resta sotto, l'accento lo attraversa. */
  --accent-rgb: 108 205 145;
  --accent-hue: 0deg;
  --accent-veil: 0;
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  /* clip e non hidden: taglia il pannello nav fuori schermo senza rompere position:sticky */
  overflow-x: clip;
}

body {
  margin: 0;
  background: #0a291b;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  isolation: isolate;
}

/* Un unico vetrino resta dietro tutte le pagine. Le masse seguono lo scroll,
   mentre bande e card mantengono sempre uno strato leggibile sopra il campo. */
.histology-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #0a291b;
  contain: strict;
  isolation: isolate;
}

.histology-bg__tone,
.histology-bg__field,
.histology-bg__cells,
.histology-bg__glass {
  position: absolute;
  display: block;
  pointer-events: none;
}

.histology-bg__tone {
  /* margine largo perche' i toni scivolano col parallax: fino a 150px di
     traslazione verticale senza mai scoprire i bordi del fondale */
  inset: -18vmax;
  transition: opacity 0.16s linear;
  z-index: 0;
}

.histology-bg__tone--deep {
  background:
    radial-gradient(circle at 72% 8%, rgba(91, 160, 115, 0.52), transparent 38%),
    linear-gradient(160deg, #061f15 0%, #174f37 52%, #0a2b1d 100%);
}

.histology-bg__tone--sage {
  opacity: var(--histology-sage);
  background:
    radial-gradient(circle at 22% 28%, rgba(211, 240, 221, 0.58), transparent 42%),
    linear-gradient(150deg, #234e39 0%, #659b7a 48%, #397558 100%);
}

.histology-bg__tone--jade {
  opacity: var(--histology-jade);
  background:
    radial-gradient(circle at 78% 44%, rgba(185, 241, 210, 0.52), transparent 44%),
    linear-gradient(145deg, #0a3b2c 0%, #277e5e 50%, #123f30 100%);
}

.histology-bg__tone--night {
  opacity: var(--histology-night);
  background:
    radial-gradient(circle at 32% 18%, rgba(110, 186, 139, 0.32), transparent 37%),
    linear-gradient(160deg, #061d15 0%, #123a2a 48%, #071f17 100%);
}

/* Il vetro colorato del fondale. Sta SOPRA le masse, che sono bianche e
   ferme: il colore che vedi nelle bolle e' questo velo, non la loro tinta.
   Cosi' a cambiare mentre si scorre e' una sola opacita' su un layer gia'
   promosso - pura composizione - invece di quattro superfici sfocate che
   si spostano e si ridipingono a ogni fotogramma. */
.histology-bg__accent {
  position: absolute;
  display: block;
  inset: -8vmax;
  z-index: 2;
  pointer-events: none;
  opacity: var(--accent-veil);
  background:
    radial-gradient(circle at 24% 30%, rgba(var(--accent-rgb) / 0.6), transparent 52%),
    radial-gradient(circle at 80% 66%, rgba(var(--accent-rgb) / 0.46), transparent 50%),
    linear-gradient(155deg, rgba(var(--accent-rgb) / 0.46), rgba(var(--accent-rgb) / 0.3));
  /* il JS aggiorna di continuo: la transizione serve solo a coprire i gradini
     di quantizzazione, non a raccontare il cambio di sezione */
  transition: opacity 0.25s linear;
  will-change: opacity;
}

/* quando il JS prende il controllo crea una copia per accento, colore fisso
   ciascuna, e incrocia solo le opacita' fra la fascia attiva e la successiva.
   L'opacita' su un layer promosso (will-change) e' pura composizione: il velo
   smette di ridipingere un gradiente a schermo pieno a ogni passo. Questa
   regola e' il percorso senza JS: la pagina resta velata comunque. */
.histology-bg__accent--auto {
  background: none;
  opacity: 0;
  transition: none;
}

/* accento di pagina: il CSS fissa il punto di partenza, il JS lo sposta
   di fascia in fascia. Senza JS la pagina resta comunque velata. */
body[data-page="chi-siamo"] { --accent-rgb: 198 122 84; --accent-hue: -124deg; --accent-veil: 0.74; }
body[data-page="servizi"] { --accent-rgb: 132 190 148; --accent-hue: -12deg; --accent-veil: 0.58; }
body[data-page="lista-esami"] { --accent-rgb: 82 170 158; --accent-hue: 30deg; --accent-veil: 0.82; }
body[data-page="pacchetti-salute"],
body[data-page="pacchetto"] { --accent-rgb: 222 178 96; --accent-hue: -102deg; --accent-veil: 0.78; }
body[data-page="documenti"] { --accent-rgb: 118 136 164; --accent-hue: 74deg; --accent-veil: 0.72; }
body[data-page="recensioni"] { --accent-rgb: 166 134 196; --accent-hue: 130deg; --accent-veil: 0.70; }
body[data-page="contattaci"] { --accent-rgb: 92 166 208; --accent-hue: 58deg; --accent-veil: 0.70; }
body[data-page="404"] { --accent-rgb: 120 132 148; --accent-hue: 70deg; --accent-veil: 0.78; }

/* il campo NON porta filtri: un filter sull'antenato blocca la promozione
   dei blob a layer propri e ritarerebbe l'intera superficie a ogni frame.
   Lo smalto arriva dalle alfa dei gradienti, non dai filtri. */
.histology-bg__field {
  inset: -12vmax;
  z-index: 1;
}

/* La massa e' solo il contenitore: niente filtri qui, un filter sull'antenato
   ritarerebbe l'intera superficie. Il respiro torna come animazione sui
   singoli blob, solo transform su layer gia' promossi; il filtro resta vietato. */
.histology-bg__blob {
  position: absolute;
  display: block;
  border-radius: 47% 53% 38% 62% / 58% 42% 58% 42%;
  opacity: 1;
}

.histology-bg__blob::before,
.histology-bg__blob::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

/* Sfocatura, saturazione e accento stanno sulla superficie dipinta: e' un
   layer proprio, quindi il respiro resta un'animazione di sola composizione. */
.histology-bg__blob::before {
  inset: 0;
  border-radius: inherit;
  background: var(--lava-fill);
  filter: blur(clamp(2px, 0.28vw, 4px));
  box-shadow:
    0 0 5rem rgba(255, 255, 255, 0.14),
    inset 2.2rem 1.1rem 3.4rem rgba(255, 255, 255, 0.18),
    inset -1.6rem -1.2rem 3rem rgba(28, 46, 38, 0.22);
}

.histology-bg__blob::after {
  width: 34%;
  height: 25%;
  left: 20%;
  top: 17%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(6px);
}

.histology-bg__blob--one {
  --lava-fill: radial-gradient(ellipse at 35% 32%, rgba(255, 255, 255, 0.62), rgba(246, 252, 248, 0.42) 42%, rgba(228, 240, 234, 0.22) 72%, rgba(214, 230, 222, 0.04) 90%, transparent 97%);
  width: max(54vw, 30rem);
  height: max(39vw, 24rem);
  left: -2%;
  top: -7%;
}

.histology-bg__blob--two {
  --lava-fill: radial-gradient(ellipse at 44% 35%, rgba(255, 255, 255, 0.58), rgba(244, 251, 247, 0.4) 48%, rgba(226, 239, 233, 0.2) 73%, rgba(212, 229, 221, 0.04) 89%, transparent 96%);
  width: max(50vw, 29rem);
  height: max(40vw, 24rem);
  right: -4%;
  top: 16%;
}

.histology-bg__blob--three {
  --lava-fill: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.56), rgba(245, 251, 248, 0.38) 50%, rgba(227, 239, 234, 0.2) 74%, rgba(213, 229, 222, 0.04) 91%, transparent 97%);
  width: max(46vw, 27rem);
  height: max(38vw, 23rem);
  left: 12%;
  bottom: -10%;
}

.histology-bg__blob--drop {
  --lava-fill: radial-gradient(circle, rgba(255, 255, 255, 0.64), rgba(247, 252, 249, 0.38) 54%, rgba(229, 241, 235, 0.18) 76%, rgba(215, 231, 224, 0.04) 90%, transparent 96%);
  width: max(20vw, 11rem);
  height: max(18vw, 10rem);
  left: 46%;
  top: 30%;
}


.histology-bg__cells {
  inset: -5vmax;
  z-index: 2;
}


.histology-bg__glass {
  inset: clamp(0.65rem, 1.5vw, 1.35rem);
  z-index: 3;
  border: 1px solid rgba(238, 255, 245, 0.18);
  border-radius: 1rem 0.28rem 1rem 0.28rem;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    0 1.2rem 4rem rgba(1, 18, 9, 0.12);
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--serum); color: var(--ink); }

.skip {
  position: absolute;
  left: 50%;
  top: -4rem;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--ink);
  color: var(--porcelain);
  padding: 0.7rem 1.2rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 0.5rem; }

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

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--wide { max-width: 92rem; }

.band {
  padding-block: var(--sec);
  position: relative;
  background: rgba(var(--porcelain-rgb)/var(--glass-band-alpha));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.42), inset 0 -1px rgba(var(--ink-rgb)/0.08);
  /* Il fondale scrive le proprie variabili a ogni fotogramma e il browser
     ricalcola lo stile di tutto quello che potrebbe leggerle: senza questa
     riga la spesa vale per ogni fascia del documento, comprese quelle a mezzo
     chilometro dallo schermo. Con content-visibility il ricalcolo si ferma
     alla fascia in vista. La misura di riserva tiene ferma l'altezza della
     pagina mentre le fasce entrano ed escono. */
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
.band--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.band--travertino {
  background:
    linear-gradient(125deg, rgba(var(--serum-rgb)/0.18), rgba(var(--porcelain-rgb)/0.04)),
    rgba(var(--porcelain-rgb)/var(--glass-band-alpha));
}
.band--ink { background: rgba(var(--ink-rgb)/var(--glass-dark-alpha)); color: var(--porcelain); }
.band--paper {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(var(--serum-rgb)/0.08)),
    rgba(var(--paper-rgb)/var(--glass-band-alpha));
}
.band--rule { border-top: 1px solid var(--line); }
.band--ink.band--rule { border-top-color: var(--line-invert); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--flip > :first-child { order: 2; }

/* ---------- 4. Tipografia di servizio ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--insegna);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.band--ink .eyebrow { color: var(--serum); }

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
}
.band--ink .lede { color: rgba(var(--paper-rgb)/0.78); }

.prose { max-width: var(--maxw-text); color: var(--ink-soft); }
.prose h3 { color: var(--ink); margin: 2.2rem 0 0.7rem; font-size: var(--t-h3); }
.barreca-editorial { border-bottom: 1px solid var(--line); }
.barreca-editorial .entry-content { max-width: 72rem; }
.barreca-editorial .entry-content > * + * { margin-top: 1.1em; }
.barreca-editorial .entry-content > :where(h2, h3) { margin-top: 1.5em; }
.barreca-editorial .entry-content a { color: var(--insegna); text-decoration: underline; text-underline-offset: 0.18em; }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }

/* ---------- 5. Pulsanti ---------- */
.btn {
  --btn-bg: var(--insegna);
  --btn-fg: #fff;
  --btn-fill: var(--insegna-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), color 0.35s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0.7rem 1.6rem rgba(var(--ink-rgb)/0.24); }
.btn:hover::after { transform: translateY(0); }
.btn svg { flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-fill: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { --btn-fg: var(--porcelain); box-shadow: none; }

.btn--serum {
  --btn-bg: var(--serum);
  --btn-fg: var(--ink);
  --btn-fill: var(--ink);
}
.btn--serum:hover { --btn-fg: var(--porcelain); }

.btn--onink {
  --btn-bg: transparent;
  --btn-fg: var(--porcelain);
  --btn-fill: var(--porcelain);
  border-color: var(--line-invert);
}
.btn--onink:hover { --btn-fg: var(--insegna-deep); }

.linkarrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--insegna);
  min-height: 24px;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.linkarrow:hover { border-bottom-color: currentColor; gap: 0.95rem; }
.band--ink .linkarrow { color: var(--serum); }

/* ---------- 6. Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.4s var(--ease);
}
/* Il vetro smerigliato sta su uno strato dedicato, non sull'header:
   backdrop-filter renderebbe .masthead blocco contenitore e il pannello
   del menu mobile (position: fixed) sarebbe alto quanto l'header. */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--porcelain-rgb)/0.9);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.masthead.is-stuck { box-shadow: 0 0.5rem 2rem rgba(var(--ink-rgb)/0.08); }

.masthead__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--insegna), var(--serum));
}

.masthead__inner {
  display: flex;
  align-items: center;
  /* margine laterale più contenuto del resto: su schermi larghi il gutter da 4rem
     stringeva la barra sotto la larghezza richiesta da marchio + menu + CTA */
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.6rem;
  transition: min-height 0.4s var(--ease);
}
.masthead.is-stuck .masthead__inner { min-height: 3.9rem; }

.brand { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.brand__mark { width: 2.35rem; height: 2.35rem; flex: none; transition: transform 0.6s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(-90deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand__sub {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--ink-faint);
  margin-top: 0.28rem;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.5rem); }
.nav__link {
  display: block;
  padding: 0.5rem 0.15rem;
  font-family: var(--f-mono);
  font-size: 0.71rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.1rem;
  width: 100%; height: 1px;
  background: var(--insegna);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out);
}
.nav__link:hover::after,
.nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__item.is-current > .nav__link { color: var(--insegna); }

.nav__item--has-sub { position: relative; }
.nav__sub {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: -1rem;
  min-width: 15rem;
  background: rgba(var(--paper-rgb)/0.93);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 0.5rem;
  box-shadow: 0 1.2rem 3rem rgba(var(--ink-rgb)/0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.nav__sub { list-style: none; margin: 0; }
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub a {
  display: block;
  padding: 0.6rem 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-left: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s, padding-left 0.25s;
}
/* La voce del sottomenu prometteva una transizione verso uno stato che non
   esisteva: col mouse sopra non cambiava niente e non si capiva quale riga
   si stava per aprire. Sul menu del telefono lo stato c'era gia' da sempre;
   qui e' lo stesso, con la voce che si accende del verde dell'insegna. */
.nav__sub a:hover,
.nav__sub a:focus-visible {
  background: var(--porcelain);
  border-left-color: var(--insegna);
  color: var(--insegna);
  padding-left: 1rem;
}
.masthead__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
/* Coda del menu a scomparsa: esiste solo da telefono, dove ospita il
   selettore di lingua tolto dalla testata. Sul desktop il menu e' una riga
   orizzontale e la lingua sta accanto a Contattaci, quindi qui non serve. */
.nav__foot {
  display: none;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.nav__foot__lab {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.masthead__cta { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--porcelain, #edf4ef);
  border: 1px solid var(--salvia-line, #bcd8c6);
  border-radius: 100px;
  user-select: none;
  isolation: isolate;
}
.lang-switch__indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--insegna, #2d6a4f);
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(10, 28, 19, 0.15);
  transform: translate3d(0, 0, 0);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}
.lang-switch[data-active="en"] .lang-switch__indicator,
[data-lang="en"] .lang-switch .lang-switch__indicator {
  transform: translate3d(100%, 0, 0);
}
.lang-switch__btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  padding: 0.18rem 0.45rem;
  border-radius: 100px;
  font-family: var(--f-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint, #52796f);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease;
}
.lang-switch__btn:hover {
  color: var(--insegna, #2d6a4f);
}
.lang-switch__btn.is-active,
.lang-switch__btn[aria-pressed="true"] {
  color: var(--paper, #fafdfb);
  font-weight: 700;
}
.lang-switch__sep {
  display: none;
}

.burger {
  display: none;
  width: 2.6rem; height: 2.6rem;
  /* La riga della testata e' flessibile: quando su telefono i pezzi non ci
     stavano, l'unico che poteva cedere era questo, e i 41,6 px dichiarati
     diventavano 14, oltre il bordo destro della pagina. Non cede piu'. */
  flex: none;
  border: 1px solid rgba(14, 21, 18, 0.5);
  background: transparent;
  border-radius: 2px;
  position: relative;
  /* Il pannello del menu (.nav, z-index 101) e' un fratello dentro la stessa
     testata: aperto copriva anche il bottone che l'ha aperto, e non si vedeva
     piu' come richiuderlo. Sopra il pannello, lo stesso bottone e' la x. */
  z-index: 103;
}
.burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.15rem; height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out), opacity 0.2s;
}
.burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 4px)); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* striscia stato apertura, calcolata dagli orari reali */
.statusbar {
  background: rgba(var(--ink-rgb)/0.92);
  color: rgba(var(--paper-rgb)/0.9);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.statusbar__inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 2.2rem;
  flex-wrap: wrap;
}
.statusbar__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--serum);
  color: var(--serum);
  flex: none;
  position: relative;
}
.statusbar__dot::after {
  content: "";
  position: absolute;
  inset: -0.28rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: ping 2.6s var(--ease-out) infinite;
}
.statusbar[data-open="1"] .statusbar__dot { background: #4ede9f; color: #4ede9f; }
.statusbar__sep { opacity: 0.35; }
.statusbar__link { margin-left: auto; border-bottom: 1px solid var(--line-invert); }
.statusbar__link:hover { border-bottom-color: var(--serum); color: var(--serum); }

/* durante una chiusura straordinaria il pallino resta acceso e pulsa */
.statusbar[data-vacation="1"] .statusbar__dot { background: var(--ferie); color: var(--ferie); }
@media (prefers-reduced-motion: no-preference) {
  .statusbar[data-vacation="1"] .statusbar__dot { animation: dotBlink 1.3s var(--ease-out) infinite; }
  .statusbar[data-vacation="1"] .statusbar__dot::after { animation-duration: 1.3s; }
}
@keyframes dotBlink { 50% { opacity: 0.35; } }

/* pill riapribile dentro la barra, visibile dopo la chiusura dell'avviso */
.closure-pill {
  border: 1px solid rgba(var(--paper-rgb)/0.5);
  background: transparent;
  color: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
}
.closure-pill:hover { border-color: var(--serum); color: var(--serum); }
.closure-pill[hidden] { display: none; }

/* Avviso di chiusura straordinaria: banda sotto la barra orari */
.closure-banner {
  background: var(--ferie-bg);
  color: var(--ink);
  border-bottom: 1px solid var(--ferie-line);
  font-family: var(--f-body);
}
.closure-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0 0.65rem;
  font-size: 0.95rem;
}
.closure-banner__inner strong {
  color: var(--ferie);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* comparsa con discesa morbida e campanella: solo chi non evita l'animazione */
@keyframes bannerDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes bellRing {
  0%, 22%, 62%, 100% { transform: rotate(0); }
  32% { transform: rotate(14deg); }
  47% { transform: rotate(-12deg); }
  72% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .closure-banner { animation: bannerDrop 0.5s var(--ease-out) 0.05s both; }
  .closure-banner__bell { animation: bellRing 1.6s var(--ease-out) 0.9s 3; transform-origin: top center; }
}
.closure-banner__bell { flex: none; color: var(--ferie); }
.closure-banner__count {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ferie);
  border: 1px solid var(--ferie-line);
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
}
.closure-banner__cta {
  margin-left: auto;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ferie);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.18rem 0.9rem;
  text-decoration: none;
}
.closure-banner__cta:hover { background: var(--ferie); color: #fff; }
.closure-banner__close {
  align-self: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  opacity: 0.65;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.closure-banner__close:hover { opacity: 1; background: var(--ferie-line); }

@keyframes ping {
  0% { opacity: 0.9; transform: scale(0.6); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: rgba(var(--ink-rgb)/var(--glass-dark-alpha));
  color: var(--porcelain);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5.5rem);
  isolation: isolate;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.2);
}
.hero__rack {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0);
  background-size: 1.5rem 1.5rem;
  mask-image: linear-gradient(160deg, #000 5%, transparent 62%);
  -webkit-mask-image: linear-gradient(160deg, #000 5%, transparent 62%);
}
.hero__glow {
  position: absolute;
  z-index: -2;
  width: 46rem; height: 46rem;
  right: -14rem; top: -18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--serum-rgb)/0.18), transparent 62%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-4rem, 3rem, 0) scale(1.12); }
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.hero__kicker {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--serum);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.6rem;
}
.hero__kicker::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: currentColor;
}

.hero__title {
  font-size: var(--t-hero);
  letter-spacing: -0.038em;
  line-height: 0.93;
  margin: 0 0 1.7rem;
  max-width: 18ch;
}
.hero__title em {
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--serum);
}

.hero__body {
  max-width: 44ch;
  color: rgba(var(--paper-rgb)/0.8);
  font-size: clamp(1rem, 1.1vw, 1.13rem);
  margin: 0 0 2.2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* orari concreti dentro la fase del prelievo: la domanda vera è "quando posso venire" */
.stagefacts {
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.55rem;
  border-top: 1px solid rgba(var(--insegna-rgb)/0.32);
  padding-top: 0.9rem;
}
.stagefacts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.stagefacts dt {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb)/0.78);
}
.stagefacts dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--oro);
  text-align: right;
}

/* barra contatti fissa su telefono: su mobile la telefonata converte, il form no */
.calldock { display: none; }

@media (max-width: 52rem) {
  .calldock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line-invert);
    border-top: 1px solid var(--line-invert);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .calldock__act {
    display: grid;
    gap: 0.15rem;
    align-content: center;
    justify-items: center;
    min-height: 3.6rem;
    padding: 0.5rem 0.4rem;
    background: var(--insegna-deep);
    color: var(--porcelain);
    text-decoration: none;
    text-align: center;
  }
  .calldock__act--call { background: var(--insegna); }
  .calldock__act:active { background: var(--insegna-bright); }
  .calldock__label {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .calldock__sub {
    font-family: var(--f-mono);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    color: rgba(var(--paper-rgb)/0.62);
  }
  /* spazio in fondo: la barra non deve coprire il piede pagina */
  body { padding-bottom: 4.2rem; }
}

/* torna su: appare dopo la prima schermata, non copre la calldock su mobile */
.totop {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 75;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(var(--paper-rgb)/0.94);
  color: var(--insegna);
  box-shadow: 0 0.5rem 1.5rem rgba(var(--deep-rgb)/0.25);
  cursor: pointer;
}
.totop:hover { color: var(--serum); border-color: var(--serum); }
.totop:focus-visible { outline: 2px solid var(--serum); outline-offset: 2px; }
@media (max-width: 52rem) {
  .totop { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}

.hero__aside { display: grid; gap: 1.6rem; }

/* ricerca esami nell'hero: la domanda più frequente, alla prima schermata */
.herosearch { margin-top: 2rem; max-width: 32rem; position: relative; }
.herosearch__label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(var(--paper-rgb)/0.72);
  margin-bottom: 0.6rem;
}
.herosearch__field {
  display: flex;
  border: 1px solid var(--line-invert);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s var(--ease);
}
.herosearch__field:focus-within { border-color: var(--serum); }
.herosearch__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--porcelain);
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
}
.herosearch__field input::placeholder { color: rgba(var(--paper-rgb)/0.4); }
.herosearch__field input:focus { outline: 0; }
.herosearch__field input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.herosearch__go {
  border: 0;
  border-left: 1px solid var(--line-invert);
  /* il bottone e' l'angolo destro del campo: senza raggio proprio i suoi
     spigoli quadrati lasciavano vedere la curva del bordo dietro di se' */
  border-start-end-radius: calc(var(--radius-m) - 1px);
  border-end-end-radius: calc(var(--radius-m) - 1px);
  background: var(--serum);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-inline: clamp(1rem, 2vw, 1.6rem);
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.herosearch__go:hover { background: var(--paper); }
.herosearch__meta {
  margin: 0.7rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(var(--paper-rgb)/0.74);
}
.herosearch__hits {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-invert);
  border: 1px solid var(--line-invert);
  max-height: 15rem;
  overflow-y: auto;
}
.herosearch__hits button {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--insegna-deep);
  color: var(--porcelain);
  font-family: var(--f-body);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  transition: background 0.18s var(--ease);
}
.herosearch__hits button:hover,
.herosearch__hits button:focus-visible { background: rgba(var(--ok-rgb)/0.28); }
.herosearch__hits em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(var(--paper-rgb)/0.5);
  white-space: nowrap;
}

/* Il ritratto: la squadra montata come una stampa. Passe-partout, filo
   d'oro un millimetro dentro il bordo e targhetta sotto, come al museo.
   La cornice non decora: dice che questa fotografia e' il soggetto. */
.ritratto {
  position: relative;
  z-index: 2;
  width: min(100%, 41rem);
  margin: 0 0 0 auto;
  padding: clamp(0.8rem, 1.7vw, 1.25rem);
  /* il passe-partout e' piu' scuro del fondo, non piu' chiaro: la cornice
     sembra incassata, e la targhetta in oro resta sopra 4.5:1 */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), transparent 54%),
    rgba(var(--deep-rgb)/0.24);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-m);
  box-shadow: 0 1.8rem 6rem rgba(18, 34, 30, 0.26), inset 1px 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.32);
  backdrop-filter: blur(10px) saturate(1.32);
  opacity: 0;
  transform: translateY(1rem);
  animation: lineup 1s var(--ease-out) 0.22s forwards;
}
/* il filo d'oro interno: e''' la cornice dentro la cornice */
.ritratto::before {
  content: "";
  position: absolute;
  inset: 0.42rem;
  border: 1px solid rgba(var(--serum-rgb)/0.24);
  pointer-events: none;
}
.ritratto__mount {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1385 / 1136;
  background: rgba(0, 0, 0, 0.15);
}
.ritratto__mount img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04);
  transform: scale(1.02);
  transition: transform 1.5s var(--ease-out), filter 0.8s var(--ease);
}
.ritratto:hover .ritratto__mount img { transform: scale(1.06); filter: none; }
.ritratto__plate {
  display: grid;
  gap: 0.25rem;
  margin-top: clamp(0.7rem, 1.4vw, 1rem);
  font-family: var(--f-mono);
}
.ritratto__plate b {
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--serum);
}
.ritratto__plate span {
  font-size: 0.64rem;
  line-height: 1.4;
  color: rgba(var(--paper-rgb)/0.84);
}

/* hero "Segnale umano": il tracciato e la squadra condividono un'unica scena */
.hero--signal {
  min-height: calc(100svh - 6.8rem);
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 6vh, 5.5rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%),
    radial-gradient(circle at 78% 28%, rgba(var(--serum-rgb)/0.08), transparent 28rem),
    rgba(var(--ink-rgb)/0.56);
}
.hero--signal .hero__inner {
  grid-template-columns: minmax(0, 0.92fr) minmax(28rem, 1.08fr);
  align-items: center;
}
.hero--signal .hero__inner > .lineup {
  position: relative;
  z-index: 1;
}
.hero--signal .hero__inner > .lineup::before {
  content: "";
  position: absolute;
  inset: clamp(-1.4rem, -2.4vw, -0.9rem);
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(var(--serum-rgb)/0.035) 58%),
    rgba(var(--deep-rgb)/0.2);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-l);
  box-shadow: 0 1.4rem 4rem rgba(var(--deep-rgb)/0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.32);
  backdrop-filter: blur(10px) saturate(1.32);
}
.hero--signal .hero__title {
  display: grid;
  gap: 0.08em;
  max-width: 13ch;
  font-size: clamp(3.4rem, 6.3vw, 6.7rem);
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.hero--signal .hero__title span { display: block; }
.hero--signal .hero__title em {
  display: block;
  font-size: 0.67em;
  line-height: 1;
  letter-spacing: -0.025em;
}
.hero--signal .hero__body {
  max-width: 48ch;
  font-size: clamp(1.02rem, 1vw, 1.18rem);
}

.hero__scrollcue {
  position: absolute;
  right: var(--gut);
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  /* 0.72: sotto questa soglia il testo piccolo scende sotto 4.5:1 sul fondo scuro */
  color: rgba(var(--paper-rgb)/0.72);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* porta al racconto: e' un collegamento, non una didascalia */
  text-decoration: none;
  min-height: 1.75rem;
  transition: color 0.3s var(--ease);
}
.hero__scrollcue:hover { color: var(--serum); }
.hero__scrollcue span {
  width: 2.4rem;
  height: 1px;
  overflow: hidden;
  background: var(--line-invert);
}
.hero__scrollcue span::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--serum);
  transform: translateX(-100%);
  animation: cue-line 2.2s var(--ease-out) infinite;
}
@keyframes cue-line {
  45%, 100% { transform: translateX(100%); }
}

/* informazioni pratiche prima della narrazione */
.quickstrip {
  position: relative;
  z-index: 4;
  background: rgba(var(--paper-rgb)/var(--glass-band-alpha));
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(24px) saturate(1.36);
  backdrop-filter: blur(24px) saturate(1.36);
}
.quickstrip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-inline: var(--gut);
  padding-block: clamp(0.75rem, 1.5vw, 1.15rem);
  gap: clamp(0.55rem, 1.2vw, 0.9rem);
}
.quickstrip__item {
  min-width: 0;
  padding: clamp(1.2rem, 2.3vw, 1.8rem);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 54%),
    rgba(var(--paper-rgb)/var(--glass-card-alpha));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-m);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.34);
  backdrop-filter: blur(20px) saturate(1.34);
  display: grid;
  align-content: start;
  gap: 0.2rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.quickstrip__item:last-child { border-right-color: var(--glass-border); }
.quickstrip__item:hover {
  background: rgba(var(--ink-rgb)/0.76);
  color: var(--porcelain);
}
.quickstrip__label,
.quickstrip__meta {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-faint);
}
.quickstrip__label { color: var(--insegna); }
.quickstrip__value {
  overflow-wrap: anywhere;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-weight: 650;
  line-height: 1.2;
}
.quickstrip__item:hover .quickstrip__label { color: var(--serum); }
.quickstrip__item:hover .quickstrip__meta { color: rgba(var(--paper-rgb)/0.62); }

/* ---------- 8. Reference bar — elemento firma ---------- */
.refstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.refbar {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.15rem, 2vw, 1.55rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.035) 56%),
    rgba(var(--paper-rgb)/0.28);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.32);
  backdrop-filter: blur(14px) saturate(1.32);
}
.refbar__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.refbar__code {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
}
.band--ink .refbar__code { color: rgba(var(--paper-rgb)/0.5); }
.refbar__val {
  font-family: var(--f-display);
  font-weight: 700;
  max-width: 100%;
  font-size: clamp(1.9rem, 2.7vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.refbar__unit {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 0.35rem;
}
.band--ink .refbar__unit { color: rgba(var(--paper-rgb)/0.5); }

.refbar__track {
  position: relative;
  height: 1px;
  background: var(--line-strong);
}
.band--ink .refbar__track { background: var(--line-invert); }
.refbar__track::before,
.refbar__track::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px; height: 7px;
  background: inherit;
}
.refbar__track::before { left: 0; }
.refbar__track::after { right: 0; }

.refbar__zone {
  position: absolute;
  top: -2px;
  height: 5px;
  left: 18%;
  right: 12%;
  background: var(--mist);
  opacity: 0.7;
}
.band--ink .refbar__zone { background: rgba(var(--serum-rgb)/0.25); }

.refbar__marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--insegna);
  transform: translate(-50%, -50%) scale(0);
  transition: left 1.4s var(--ease-out), transform 0.5s var(--ease-out) 0.35s;
}
.band--ink .refbar__marker { background: var(--serum); }
.is-in .refbar__marker { transform: translate(-50%, -50%) scale(1); }

.refbar__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.band--ink .refbar__scale { color: rgba(var(--paper-rgb)/0.42); }

/* ---------- 9. Testata di sezione ---------- */
.sechead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sechead--solo { grid-template-columns: minmax(0, 1fr); }
.sechead__title { font-size: var(--t-h2); max-width: 22ch; }
.sechead__aside { padding-bottom: 0.35rem; }

/* ---------- 10. Card servizi ---------- */
.svcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  background: transparent;
  border: 0;
  overflow: visible;
}
.svc {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 52%, rgba(var(--serum-rgb)/0.1)),
    rgba(var(--porcelain-rgb)/var(--glass-card-alpha));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
  position: relative;
  overflow: hidden;
  transition: background 0.45s var(--ease), transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.band--paper .svc {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08) 52%, rgba(var(--serum-rgb)/0.1)),
    rgba(var(--paper-rgb)/var(--glass-card-alpha));
}
.svc::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--insegna);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.svc:hover::before { transform: scaleX(1); }
.svc:hover {
  background: rgba(var(--porcelain-rgb)/0.68);
  transform: translateY(-0.25rem);
  box-shadow: 0 1.5rem 3.4rem rgba(var(--deep-rgb)/0.18), inset 1px 1px 0 rgba(255, 255, 255, 0.68);
}
.svc__code {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--insegna);
}
.svc__title { font-size: var(--t-h3); }
.svc__text { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }

/* ---------- 11. Valori (su fondo scuro) ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  background: transparent;
}
.value {
  padding: 1.6rem 1.4rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  background:
    linear-gradient(145deg, rgba(var(--serum-rgb)/0.14), rgba(var(--ink-rgb)/0.08)),
    rgba(var(--ink-rgb)/var(--glass-dark-alpha));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-l);
  box-shadow: 0 1.2rem 3rem rgba(var(--deep-rgb)/0.18), inset 1px 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.34);
  backdrop-filter: blur(22px) saturate(1.34);
}
.value__n {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--serum);
}
.value__t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.value__d { font-size: 0.9rem; color: rgba(var(--paper-rgb)/0.62); margin: 0; }

/* ---------- 12. Timeline storia ---------- */
.timeline { display: grid; border-top: 1px solid var(--line); }
.tl {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: padding-left 0.4s var(--ease);
}
.tl:hover { padding-left: 0.7rem; }
.tl__year {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--insegna);
}
.tl__body { max-width: 52ch; }
.tl__title { font-size: 1.08rem; margin-bottom: 0.4rem; }
.tl__text { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* storia: il ritratto del fondatore accanto alla linea del tempo che lui apre */
.storia {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.quadro { margin: 0; }
.quadro__frame {
  position: relative;
  overflow: hidden;
  background: var(--insegna-deep);
  border: 0.55rem solid var(--travertino);
  outline: 1px solid var(--line-strong);
  box-shadow: 0 1.4rem 3.5rem rgba(16, 24, 20, 0.22);
}
.quadro__frame img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.01);
  transition: transform 1.4s var(--ease-out);
}
.quadro:hover .quadro__frame img { transform: scale(1.045); }

/* il riflesso del vetro: la tela è fotografata sotto vetro, il bagliore la racconta */
.quadro__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, 0.28) 47%, rgba(255, 255, 255, 0.06) 55%, transparent 66%);
  transform: translateX(-115%);
}
.quadro.is-in .quadro__glass { animation: quadro-sheen 2.4s var(--ease-out) 0.45s both; }
.quadro:hover .quadro__glass { animation: quadro-sheen 1.5s var(--ease-out) both; }
@keyframes quadro-sheen {
  from { transform: translateX(-115%); }
  to { transform: translateX(115%); }
}

.quadro__cap { margin-top: 1.1rem; }
.quadro__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}
.quadro__role {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--insegna);
  margin-top: 0.3rem;
}
.quadro__cap p {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
}

.storia .timeline { margin-top: 0; }

/* confronto allora/oggi: una sola facciata, due epoche, una maniglia */
.thenow { display: grid; gap: 0.9rem; }
.thenow__frame {
  --split: 0%;
  position: relative;
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  box-shadow: 0 1.6rem 4.5rem rgba(16, 24, 20, 0.24);
  touch-action: pan-y;
}
.thenow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* la stampa d'archivio è a bassa risoluzione: il contrasto la rende voluta, non sciatta */
.thenow__img--then {
  object-position: 50% 6%;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
}
.thenow__img--now { object-position: 50% 44%; }

.thenow__reveal {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  will-change: clip-path;
}

.thenow__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: var(--porcelain);
  box-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.thenow__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.9rem;
  height: 2.9rem;
  transform: translate(-50%, -50%);
  background: var(--porcelain);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-content: center;
}
.thenow__grip::before {
  content: "‹ ›";
  font-family: var(--f-mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.thenow__tag {
  position: absolute;
  bottom: 0;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.45rem 0.75rem;
  background: rgba(var(--ink-rgb)/0.9);
  color: var(--porcelain);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
/* la finestra si apre da sinistra: l'oggi scopre l'allora, quindi la
   targhetta di oggi sta a sinistra e quella di allora resta a destra,
   ognuna sulla sua meta' invece che scambiate */
.thenow__tag--then { right: 0; }
.thenow__tag--now { left: 0; opacity: 0; }
.thenow.is-revealing .thenow__tag--now { opacity: 1; }

/* il range copre tutto il riquadro: trascinamento, tocco e tastiera senza codice in più */
.thenow__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.thenow__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3rem;
  height: 100%;
}
.thenow__range::-moz-range-thumb {
  width: 3rem;
  height: 100%;
  border: 0;
  opacity: 0;
}
.thenow__range:focus-visible { opacity: 1; outline: 3px solid var(--serum); outline-offset: 3px; }

.thenow__hint {
  margin: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  transition: opacity 0.4s var(--ease);
}
.thenow.is-touched .thenow__hint { opacity: 0; }

/* le due epoche affiancate: lo slider fa scoprire, il collage fa vedere tutto insieme */
.thenow__still {
  margin: clamp(1.8rem, 3.5vw, 3rem) auto 0;
  max-width: 58rem;
}
.thenow__still img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
}
.thenow__still figcaption {
  margin-top: 0.7rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

/* ---------- 13. Staff ---------- */
/* Il filo. Prima era una griglia di sette ritratti tutti uguali: nessun ordine,
   nessun racconto. Qui le persone stanno su un filo che si disegna mentre
   scorri, e il nodo che le aggancia porta la sigla del reparto — la stessa che
   trovi sulla provetta. Il connettore non decora: dice dove lavora ciascuno. */
.thread {
  --thread: 0;
  position: relative;
  padding-block: 1rem;
}
.thread__line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--line);
  overflow: hidden;
}
.thread__fill {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, var(--insegna) 0%, var(--insegna-bright) 45%, var(--oro) 100%);
  transform-origin: top;
  transform: scaleY(var(--thread, 0));
}
.thread__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.tnode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6rem minmax(0, 1fr);
  align-items: center;
}
.tnode__mark {
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  transition: background 0.55s var(--ease), border-color 0.55s var(--ease),
              color 0.55s var(--ease), transform 0.55s var(--ease-out);
}
/* il nodo si accende quando il filo lo raggiunge, e cresce quando arriva
   sulla riga di lettura: chi stai leggendo e' grande, gli altri si ritirano */
.tnode.is-lit .tnode__mark {
  background: var(--insegna);
  border-color: var(--insegna);
  color: #fff;
}
.tnode__mark { transform: scale(calc(1 + 0.14 * var(--focus, 0))); }
.tnode__card {
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.tnode.is-lit .tnode__card { opacity: 1; transform: none; }
/* dispari a sinistra del filo, pari a destra: la lettura scende a zigzag.
   Il ritratto sta sempre dalla parte del filo, il testo verso il margine. */
.tnode:nth-child(odd) .tnode__card { grid-column: 1; }
.tnode:nth-child(odd) .tnode__ph { order: 2; }
/* la fascia che il ritratto usa per crescere e' riservata qui: senza, a fuoco
   pieno il ritratto finirebbe sopra il nome */
.tnode:nth-child(odd) .tnode__txt { order: 1; text-align: right; padding-right: clamp(3.5rem, 6.5vw, 6rem); }
.tnode:nth-child(even) .tnode__txt { padding-left: clamp(3.5rem, 6.5vw, 6rem); }
.tnode:nth-child(even) .tnode__card {
  grid-column: 3;
  grid-template-columns: 8rem minmax(0, 1fr);
}
/* La colonna del ritratto e' piccola e non cambia mai: a crescere e' solo la
   scala, e il ritratto in fuoco deborda nell'aria fra una riga e l'altra —
   aria che c'e' comunque, perche' le righe si alternano ai due lati del filo.
   Cosi' il fuoco e' vistoso e la pagina non sobbalza mentre scorri. */
.tnode__ph {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--travertino);
  border: 1px solid var(--line);
  transform: scale(calc(0.8 + 0.62 * var(--focus, 0)));
  transition: transform 0.5s var(--ease-out);
}
.tnode:nth-child(odd) .tnode__ph { transform-origin: right center; }
.tnode:nth-child(even) .tnode__ph { transform-origin: left center; }
.tnode__ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* il colore arriva col fuoco: fuori fuoco resta un provino in bianco e nero */
  filter: grayscale(calc(1 - var(--focus, 0))) contrast(calc(1.06 - 0.06 * var(--focus, 0)));
  transition: filter 0.5s var(--ease);
}
.tnode__card:hover .tnode__ph img { filter: grayscale(0) contrast(1); }
.tnode__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  letter-spacing: -0.014em;
  line-height: 1.2;
}
.tnode__role {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--oro);
  margin-top: 0.35rem;
}
.tnode__note {
  margin: 0.6rem 0 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}
.tnode:nth-child(odd) .tnode__note { margin-left: auto; }
/* sotto i 62rem lo zigzag non ci sta: alla colonna del testo resterebbero
   poche decine di pixel. Il filo passa a sinistra e tutti si allineano alla
   sua destra, come una scaletta. */
@media (max-width: 62rem) {
  .thread__line { left: 1.5rem; }
  .tnode {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0 clamp(0.75rem, 3vw, 1.15rem);
    align-items: start;
  }
  .tnode__mark { grid-column: 1; justify-self: start; }
  .tnode:nth-child(odd) .tnode__card,
  .tnode:nth-child(even) .tnode__card {
    grid-column: 2;
    grid-template-columns: clamp(5.5rem, 24vw, 8rem) minmax(0, 1fr);
    align-items: start;
  }
  .tnode:nth-child(odd) .tnode__ph { order: -1; }
  .tnode:nth-child(odd) .tnode__txt,
  .tnode:nth-child(even) .tnode__txt { order: 2; text-align: left; padding: 0; }
  /* su telefono i ritratti stanno tutti in colonna: se crescessero come sul
     desktop si toccherebbero. Cresce dall'angolo alto a sinistra, e di meno. */
  .tnode:nth-child(odd) .tnode__ph,
  .tnode:nth-child(even) .tnode__ph {
    transform-origin: left top;
    transform: scale(calc(0.88 + 0.22 * var(--focus, 0)));
  }
  .tnode:nth-child(odd) .tnode__note { margin-left: 0; }
}

/* ---------- 14. Galleria struttura ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
.shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin: 0;
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.shot:hover img { transform: scale(1.06); }
.shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 0.9rem 0.9rem;
  background: linear-gradient(transparent, rgba(var(--ink-rgb)/0.94) 62%);
  color: var(--porcelain);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

/* ---------- 15. Lista esami ---------- */
/* riga ricerca + conteggio in cima alla barra strumenti */
.examfilter__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.examfilter__top > .search--examfinder { flex: 1 1 16rem; }
/* i filtri attivi hanno un filetto sopra: sono una riga loro, non una cella */
.examfilter__top > .activefilters { flex: 1 0 100%; }
.examfilter__group { margin-top: 0.15rem; }

/* pannello "Area diagnostica (avanzato)" pieghevole */
.examfilter__adv { border-top: 1px solid var(--line); }
.examfilter__adv summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.15rem 0.25rem;
  font: 600 0.8rem/1 var(--f-body);
  color: var(--insegna);
  user-select: none;
}
.examfilter__adv summary::-webkit-details-marker { display: none; }
.examfilter__adv summary::before {
  content: "▸";
  font-size: 0.85rem;
  transition: transform 0.2s;
}
.examfilter__adv[open] summary::before { transform: rotate(90deg); }
.examfilter__adv .filterbar__row--scroll { padding: 0.2rem 0 0.6rem; }

/* pill dei filtri attivi, con × per togliere il singolo filtro */
.activefilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.38rem;
  border-top: 1px dashed var(--line-strong);
}
.activefilters[hidden] { display: none; }
.activefilters__lab {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.activefilters__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.activefilters__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.85rem;
  border-radius: 100px;
  background: var(--insegna);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.activefilters__x {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.activefilters__x:hover { opacity: 1; }
.activefilters__clear {
  border: 0;
  background: transparent;
  padding: 0.3rem 0.45rem;
  color: var(--insegna);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.filterbar__row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.search input {
  border: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: 1rem;
  width: 100%;
  color: inherit;
}
.search input:focus { outline: none; }
.search__control svg { flex: none; opacity: 0.5; }
.search__label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--insegna);
}
.search__control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: var(--porcelain);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.search__control:focus-within {
  border-color: var(--insegna);
  box-shadow: 0 0 0 3px rgba(var(--insegna-rgb)/0.12);
}
.search--examfinder {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.search--examfinder input { font-size: 0.96rem; }

.chip {
  font-family: var(--f-body);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: 100px;
  box-shadow: 0 1px 1px rgba(var(--deep-rgb)/0.04);
  transition: background 0.28s, color 0.28s, border-color 0.28s, box-shadow 0.28s;
}
.chip:hover { border-color: var(--insegna); color: var(--insegna); }
.chip[aria-pressed="true"] { background: var(--insegna); border-color: var(--insegna); color: #fff; }

.filterbar__count {
  font-family: var(--f-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: auto;
}

.filterbar__lab {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  flex: none;
  margin-right: 0.2rem;
}
.filterbar__row--scroll .chip { flex: none; }
/* su schermi stretti i filtri scorrono in orizzontale invece di occupare cinque righe */
@media (max-width: 60rem) {
  .filterbar__row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.3rem;
    -webkit-overflow-scrolling: touch;
  }
}

.band--catalog { padding-top: clamp(2rem, 4.5vw, 4.5rem); }

/* Il catalogo e' l'unica distesa di testo piccolo che corre per migliaia di
   pixel appoggiata direttamente al fondale: le masse passano dietro i nomi e
   la nota sotto ogni esame scendeva a 1,4:1, cioe' invisibile. Qui la lista
   posa su una lastra di carta sua, cosi' il contrasto smette di dipendere da
   dove si trova la massa in quel momento: misurati sul punto piu' scuro del
   fondale, 9,8:1 il nome (era 2,9), 4,9:1 la nota, 5,1:1 le targhette.
   Il fondale continua a leggersi attraverso il 18% scoperto.
   Niente backdrop-filter, per la stessa ragione della barra qui sopra:
   sfocare una superficie alta quanto la pagina costringe il browser a rifare
   la sfocatura a ogni fotogramma di scorrimento. Il vetro qui sta tutto
   nell'alfa, nel bordo chiaro e nel riflesso interno. */
.examlist {
  margin-top: 0.85rem;
  padding-inline: clamp(0.6rem, 1.8vw, 1.35rem);
  background: rgba(var(--paper-rgb)/0.82);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
}
.exam { border-bottom: 1px solid var(--line); }
/* l'ultima riga si appoggia al bordo della lastra, non a un suo trattino */
.exam:last-child { border-bottom: 0; }
.exam__hd { margin: 0; font-size: inherit; font-weight: inherit; }
.exam__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.6rem 1rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1rem 0.4rem;
  color: inherit;
  transition: background 0.3s, padding-left 0.3s var(--ease);
}
.exam__btn:hover { background: var(--paper); padding-left: 1rem; }
.exam.is-open > .exam__hd > .exam__btn { background: var(--paper); }
.exam__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.012em;
}
.exam__note { display: block; font-size: 0.85rem; color: var(--ink-faint); margin: 0.2rem 0 0; }
.exam__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* il segno + diventa − quando la riga è aperta */
.exam__sign { position: relative; width: 0.85rem; height: 0.85rem; flex: none; }
.exam__sign::before,
.exam__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--insegna);
  transition: transform 0.35s var(--ease-out);
}
.exam__sign::after { transform: rotate(90deg); }
.exam.is-open .exam__sign::after { transform: rotate(0deg); }

.exam__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.exam.is-open .exam__panel { grid-template-rows: 1fr; }
.exam__inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0.45s;
}
.exam.is-open .exam__inner { visibility: visible; }
.exam__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem 2rem;
  padding: 0.4rem 0.4rem 1.6rem;
  border-left: 2px solid var(--insegna);
  margin: 0 0 0 0.4rem;
  padding-left: 1.2rem;
}
.exam__k {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--insegna);
  margin: 0 0 0.4rem;
}
.exam__v { font-size: 0.92rem; line-height: 1.65; margin: 0; color: var(--ink-soft); }
.exam__kw {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0 0.4rem 1.5rem 1.6rem;
}
.exam__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  padding: 0 0.4rem 1.6rem 1.6rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.exam__in-label {
  font-family: var(--f-mono);
  font-size: 0.57rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.26rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
}
.exam__in a {
  color: var(--insegna);
  text-underline-offset: 0.15em;
}
.exam__in a:hover { color: var(--ink); }
.tagbtn {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--mist);
  border-radius: 100px;
  background: transparent;
  color: var(--insegna);
  transition: background 0.25s, color 0.25s;
}
.tagbtn:hover { background: var(--insegna); color: #fff; }
.tag {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  white-space: nowrap;
}
.tag--fast { border-color: var(--serum); color: var(--insegna); background: rgba(var(--serum-rgb)/0.13); }
.tag--area { border-color: var(--mist); color: var(--insegna); }
.tag--sample { border-style: dashed; }

/* chiude la lista: chi ha scorso tutto senza trovare il suo esame trova qui
   la strada per il modulo, senza dover tornare al menu */
.examhelp { margin-top: 1.6rem; }

.emptystate {
  padding: 3rem 1rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- 16. Pacchetti ---------- */
.packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  background: transparent;
  border: 0;
  overflow: visible;
  align-items: stretch;
}
.pack {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.07) 54%, rgba(var(--serum-rgb)/0.1)),
    rgba(var(--paper-rgb)/var(--glass-card-alpha));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  min-height: 14rem;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.pack:hover {
  background: rgba(var(--porcelain-rgb)/0.68);
  transform: translateY(-0.25rem);
  box-shadow: 0 1.5rem 3.4rem rgba(var(--deep-rgb)/0.18), inset 1px 1px 0 rgba(255, 255, 255, 0.68);
}
.pack--cta { background: rgba(var(--porcelain-rgb)/0.58); }
.pack--cta:hover { background: rgba(var(--serum-rgb)/0.56); }
.pack__eta {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--insegna);
}
.pack__name { font-size: 1.22rem; }
.pack__desc { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.pack__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
  padding: 0.65rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--insegna);
  text-decoration: none;
  cursor: pointer;
}
.pack__toggle svg { transition: transform 0.35s var(--ease-out); }
.pack__toggle:hover svg { transform: translateX(0.25rem); }
.pack__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem 0 0.2rem;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.25s;
}
.pack__all:hover { color: var(--insegna); }

/* pagina singola di un pacchetto: dettaglio a indirizzo proprio */
.packsingle {
  max-width: 52rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.07) 54%),
    rgba(var(--paper-rgb)/var(--glass-card-alpha));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
}
.packsingle__desc { max-width: 56ch; margin: 0.4rem 0 2rem; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.65; }
.packsingle__eta,
.packsingle__label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--insegna);
}
.packsingle__label { margin: 0 0 0.4rem; }
.packsingle__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.2rem;
  padding: 1rem 0 0.4rem;
  border-top: 1px solid var(--line);
  margin: 0 0 2rem;
}
.packsingle__list li { min-width: 0; }
.packsingle__exam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  min-height: 2.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--line);
  text-decoration: none;
  transition: color 0.25s, padding-left 0.25s var(--ease);
}
.packsingle__exam span:first-child { min-width: 0; overflow-wrap: anywhere; }
.packsingle__exam span:last-child { flex: none; color: var(--insegna); }
.packsingle__exam:hover { color: var(--insegna); padding-left: 0.35rem; }
/* voce senza scheda propria: resta leggibile, ma non finge di essere un link */
.packsingle__exam--plain { color: var(--ink-soft); cursor: default; }
.packsingle__exam--plain:hover { color: var(--ink-soft); padding-left: 0; }
/* prezzo: il dato che la gente cerca per primo, quindi sta prima dell'elenco */
.packsingle__price {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.packsingle__price-label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.packsingle__price-value {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1;
  color: var(--insegna);
}
.packsingle__advised { max-width: 62ch; margin: 0 0 2rem; color: var(--ink-soft); line-height: 1.65; }
.packsingle__prep { margin: 0 0 2rem; padding-left: 1.1rem; max-width: 62ch; color: var(--ink-soft); line-height: 1.6; }
.packsingle__prep li { margin-bottom: 0.4rem; }
.packsingle__related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.7rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.packsingle__related-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.packsingle__related-card:hover { border-color: var(--insegna); color: var(--insegna); }
.packsingle__related-price { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-soft); }
.packsingle__back { margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.packsingle__back a { color: var(--ink); border-bottom: 1px solid var(--line-strong); text-decoration: none; transition: color 0.25s, border-color 0.25s; }
.packsingle__back a:hover { color: var(--insegna); border-color: var(--insegna); }

/* chiusura dei dialoghi esami: scocca condivisa con il vecchio dettaglio pacchetti */
.packdialog__closeform {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}
.packdialog__close {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 1.55rem;
  line-height: 1;
}
.packdialog__close:hover { color: #fff; background: var(--insegna); border-color: var(--insegna); }

/* scheda esame in modale: stessa scocca dei pacchetti, corpo con le info */
.examdialog {
  width: min(calc(100% - 2rem), 46rem);
  max-width: none;
  max-height: min(84dvh, 48rem);
  margin: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.05) 56%, rgba(var(--serum-rgb)/0.12)),
    rgba(var(--paper-rgb)/0.64);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--radius-l);
  box-shadow: 0 2rem 7rem rgba(var(--deep-rgb)/0.38), inset 1px 1px 0 rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(14px) saturate(1.34);
  backdrop-filter: blur(14px) saturate(1.34);
  overflow: auto;
  overscroll-behavior: contain;
}
.examdialog[open] { display: grid; gap: 0.9rem; }
.examdialog::backdrop {
  background:
    radial-gradient(circle at 50% 24%, rgba(var(--insegna-rgb)/0.18), transparent 54%),
    rgba(var(--deep-rgb)/0.52);
}
.examdialog.is-fallback-open {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 300;
  transform: translate(-50%, -50%);
}
.examdialog__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  padding-right: 3rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--insegna);
}
.examdialog__title { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.12; }
.examdialog__note { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.examdialog__body { margin-top: 0.4rem; }
.examdialog__body .exam__kw { margin-top: 1.1rem; }
.examdialog__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 0.45rem 0.8rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--insegna);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.examdialog__copy:hover { background: var(--insegna); color: #fff; }
.examdialog__copy.is-copied { border-color: var(--serum); color: var(--insegna); }

/* ---------- 17. Procedura numerata (sequenza reale) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  background: transparent;
  border: 0;
  overflow: visible;
}
.step {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 54%),
    rgba(var(--paper-rgb)/var(--glass-card-alpha));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
.step__n {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--insegna);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.step__t { font-size: 1.08rem; }
.step__d { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }

/* ---------- 18. Documenti ---------- */
.docs { border-top: 1px solid var(--line); }
.doc {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: center;
  padding: 1.35rem 0.4rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s, padding-left 0.3s var(--ease);
}
.doc:hover { background: var(--paper); padding-left: 1rem; }
.doc__ext {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.45rem 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--insegna);
}
/* Nome e descrizione sono due span dentro un terzo: senza display: block
   restano sulla stessa riga incollati, e il margine di .doc__desc — scritto
   per un blocco — non fa niente. Stessa forma della gemella .exam__note. */
.doc__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.012em;
}
.doc__desc { display: block; font-size: 0.88rem; color: var(--ink-faint); margin: 0.2rem 0 0; }
.doc__dl {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--insegna);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition: gap 0.3s var(--ease);
}
.doc:hover .doc__dl { gap: 0.8rem; }

/* ---------- 19. Recensioni ---------- */
.reviewdemo {
  --review-gap: clamp(1rem, 2vw, 1.6rem);
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.reviewdemo__notice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  color: var(--ink-soft);
  background: rgba(var(--serum-rgb)/0.12);
  border: 1px solid rgba(var(--serum-rgb)/0.38);
  border-radius: var(--radius-m);
}
.reviewdemo__notice p { margin: 0; }
.reviewdemo__badge {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--serum);
  border-radius: 999px;
}

.reviewconfig {
  padding: clamp(1.2rem, 2.5vw, 2rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.08) 58%),
    rgba(var(--paper-rgb)/0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
}
.reviewconfig__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.reviewconfig__head .eyebrow { margin-bottom: 0.35rem; }
.reviewconfig__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: -0.025em;
}
.reviewconfig__reset {
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--insegna);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.reviewconfig__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}
.reviewconfig__field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reviewconfig__field select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 2.1rem 0.65rem 0.75rem;
  font: 500 0.82rem/1.2 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background-color: rgba(var(--paper-rgb)/0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.reviewconfig__field select:disabled { opacity: 0.48; cursor: not-allowed; }
.reviewconfig__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.reviewconfig__checks label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.reviewconfig__checks input { accent-color: var(--insegna); }
.reviewconfig :focus-visible,
.reviews-preview :focus-visible {
  outline: 3px solid rgba(var(--serum-rgb)/0.8);
  outline-offset: 3px;
}

.reviews-preview {
  padding: clamp(1.15rem, 2.5vw, 2rem);
  overflow: hidden;
  background: rgba(var(--paper-rgb)/0.28);
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--radius-l) + 0.25rem);
}
.reviews-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.reviews-preview__label {
  margin: 0 0 0.3rem;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reviews-preview__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}
.reviews-preview__score strong {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1;
}
.reviews-preview__score > span { color: var(--serum); letter-spacing: 0.08em; }
.reviews-preview__score small { color: var(--ink-faint); }
.reviews-preview__source {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  font-weight: 700;
  color: #4285f4;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(66, 133, 244, 0.24);
  border-radius: 999px;
}
.reviews-preview__source small {
  font-family: var(--f-mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reviews-window { min-width: 0; }

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--review-gap);
}
.quotes--carousel {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--review-card-width, calc((100% - (var(--review-gap) * 2)) / 3));
  align-items: stretch;
  max-width: 100%;
  padding: 0.3rem 0.2rem 0.8rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb)/0.24) transparent;
}
.quotes--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.quotes--featured {
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  align-items: stretch;
}
.quotes--featured .quote--featured {
  grid-row: span 2;
  padding: clamp(1.7rem, 3vw, 2.6rem);
}
.quote {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 54%),
    rgba(var(--paper-rgb)/var(--glass-card-alpha));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.quotes--carousel .quote { min-height: 100%; scroll-snap-align: start; }
.quote:hover { transform: translateY(-4px); box-shadow: 0 1rem 2.4rem rgba(var(--ink-rgb)/0.1); }
.quote__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.quote__stars { display: flex; gap: 0.15rem; color: var(--serum); }
.quote__rating {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  color: var(--ink-faint);
}
.quote__text { font-size: 1rem; line-height: 1.62; margin: 0; }
.quote--clamped .quote__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.quote--clamped.is-expanded .quote__text { display: block; overflow: visible; }
.quote__more {
  justify-self: start;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--insegna);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.quote__who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.quote__avatar {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--paper);
  background: var(--insegna);
  border-radius: 50%;
}
.quote__identity { display: grid; gap: 0.18rem; min-width: 0; }
.quote__identity strong { font-size: 0.78rem; color: var(--ink); }
.quote__meta {
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 0.52rem;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
}
.quote__source {
  display: inline-flex;
  grid-column: 2;
  justify-self: start;
  gap: 0.25rem;
  font-family: var(--f-mono);
  font-size: 0.54rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--insegna);
  text-decoration: none;
}

.reviews-preview[data-surface="paper"] .quote {
  background: rgba(var(--paper-rgb)/0.96);
  border-color: rgba(var(--ink-rgb)/0.14);
  box-shadow: 0 0.65rem 1.6rem rgba(var(--ink-rgb)/0.07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.reviews-preview[data-surface="compact"] .quote {
  gap: 0.7rem;
  padding: 1rem;
  border-radius: var(--radius-m);
}
.reviews-preview[data-surface="compact"] .quote__text { font-size: 0.9rem; line-height: 1.5; }
.reviews-preview[data-surface="compact"] .quote__avatar { width: 2rem; height: 2rem; }
.reviews-preview[data-surface="compact"] .quote__source { font-size: 0; }
.reviews-preview[data-surface="compact"] .quote__source span { font-size: 0.68rem; }

.reviews-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.reviews-nav[hidden] { display: none; }
.reviews-nav__arrow {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  color: var(--ink);
  background: rgba(var(--paper-rgb)/0.72);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.reviews-nav__dots { display: flex; align-items: center; gap: 0.4rem; }
.reviews-nav__dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  background: rgba(var(--ink-rgb)/0.18);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width 0.25s var(--ease), background 0.25s var(--ease);
}
.reviews-nav__dots button.is-active {
  width: 1.55rem;
  background: var(--insegna);
  border-radius: 999px;
}

/* Lo shortcode resta di Trustindex; questa pelle è circoscritta allo slot
   Barreca per non cambiare altri widget dello stesso plugin. */
.barreca-reviews-widget {
  min-width: 0;
  padding: clamp(1.15rem, 2.5vw, 2rem);
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.08) 58%),
    rgba(var(--paper-rgb)/0.5);
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--radius-l) + 0.25rem);
  box-shadow: var(--glass-shadow);
}
.barreca-reviews-widget--notice {
  display: grid;
  gap: 0.55rem;
  color: var(--ink-soft);
  border-color: rgba(var(--serum-rgb)/0.42);
}
.barreca-reviews-widget--notice strong { color: var(--ink); }
.barreca-reviews-widget--notice code {
  justify-self: start;
  padding: 0.38rem 0.55rem;
  color: var(--ink);
  background: rgba(var(--serum-rgb)/0.15);
  border-radius: var(--radius-s);
}
.barreca-reviews-widget .ti-widget.ti-goog {
  color: var(--ink) !important;
  font-family: var(--f-body) !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-widget-container,
.barreca-reviews-widget .ti-widget.ti-goog .ti-reviews-container,
.barreca-reviews-widget .ti-widget.ti-goog .ti-reviews-container-wrapper {
  min-width: 0;
  background: transparent !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-reviews-container-wrapper {
  align-items: stretch !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-review-item {
  height: auto !important;
  /* Alcuni slider Trustindex collocano fumetto, coda e autore nello spazio
     verticale dell'item: non sovrascriverlo, altrimenti avatar e nome vengono
     tagliati. Uniformiamo soltanto la distanza orizzontale fra le card. */
  padding-inline: 0.45rem !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-review-item > .ti-inner {
  height: 100% !important;
  padding: clamp(1.3rem, 2.2vw, 1.85rem) !important;
  color: var(--ink) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 54%),
    rgba(var(--paper-rgb)/var(--glass-card-alpha)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-l) !important;
  box-shadow:
    0 0.55rem 1.35rem rgba(var(--deep-rgb)/0.08),
    inset 1px 1px 0 rgba(255, 255, 255, 0.68) !important;
}
/* Slider VI (layout 15) mette foto, nome e data sotto il fumetto, ma sempre
   dentro .ti-inner. Lo stretch generico faceva terminare l'elemento prima
   dell'intestazione autore; il nastro Trustindex, che usa overflow:hidden,
   la ritagliava. La riserva inferiore resta dentro il nastro e non espone le
   slide laterali del carosello. */
.barreca-reviews-widget .ti-widget.ti-goog[data-layout-id="15"] .ti-reviews-container-wrapper {
  align-items: flex-start !important;
  padding-bottom: clamp(4.25rem, 6vw, 5.25rem) !important;
}
.barreca-reviews-widget .ti-widget.ti-goog[data-layout-id="15"] .ti-review-item > .ti-inner {
  height: auto !important;
  box-shadow: none !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-name {
  color: var(--ink) !important;
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-date,
.barreca-reviews-widget .ti-widget.ti-goog .ti-review-content {
  color: var(--ink-soft) !important;
  font-family: var(--f-body) !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-review-content {
  font-size: 1rem !important;
  line-height: 1.62 !important;
}
.barreca-reviews-widget .ti-widget.ti-goog .ti-controls .ti-next,
.barreca-reviews-widget .ti-widget.ti-goog .ti-controls .ti-prev {
  color: var(--ink) !important;
  background-color: rgba(var(--paper-rgb)/0.82) !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  box-shadow: 0 0.45rem 1.2rem rgba(var(--ink-rgb)/0.08) !important;
}
.barreca-reviews-widget .ti-widget.ti-goog a:focus-visible,
.barreca-reviews-widget .ti-widget.ti-goog button:focus-visible {
  outline: 3px solid rgba(var(--serum-rgb)/0.8) !important;
  outline-offset: 3px;
}

@media (max-width: 64rem) {
  .reviewconfig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .reviewdemo__notice { align-items: flex-start; }
  .quotes--carousel { grid-auto-columns: min(88%, 22rem); }
  .quotes--featured { grid-template-columns: minmax(0, 1fr); }
  .quotes--featured .quote--featured { grid-row: auto; }
}
@media (max-width: 36rem) {
  .reviewdemo__notice { display: grid; }
  .reviewdemo__badge { justify-self: start; }
  .reviewconfig__head { display: grid; }
  .reviewconfig__reset { justify-self: start; }
  .reviewconfig__grid { grid-template-columns: minmax(0, 1fr); }
  .reviews-preview__head { align-items: flex-start; flex-direction: column; }
  .reviews-preview__source { align-self: flex-start; }
  .reviews-preview__source small { display: none; }
  .barreca-reviews-widget { padding: 0.8rem; }
  .barreca-reviews-widget .ti-widget.ti-goog .ti-review-item { padding-inline: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .quotes--carousel { scroll-behavior: auto; }
  .quote,
  .reviews-nav__dots button { transition: none; }
  .barreca-reviews-widget .ti-widget.ti-goog * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-invert);
  padding-block: 1rem;
}
.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
  color: rgba(var(--paper-rgb)/0.5);
  display: flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
}
.marquee__item::after { content: "●"; font-size: 0.4em; color: var(--serum); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 20. Contatti & form ---------- */
.contactgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.infolist { border-top: 1px solid var(--line); }
.info {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.info__k {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.info__v { font-size: 1rem; overflow-wrap: anywhere; }
.info__v a { border-bottom: 1px solid var(--mist); transition: border-color 0.3s, color 0.3s; }
.info__v a:hover { border-bottom-color: var(--insegna); color: var(--insegna); }

.hours { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hours caption {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  padding-bottom: 0.8rem;
}
.hours th,
.hours td {
  text-align: left;
  padding: 0.7rem 0.5rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.hours th {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.hours td:last-child { font-family: var(--f-mono); font-size: 0.85rem; text-align: right; }
.hours tr.is-today th,
.hours tr.is-today td { background: rgba(var(--serum-rgb)/0.15); }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.45rem; }
.field > label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.field input,
.field select,
.field textarea {
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: inherit;
  border-radius: var(--radius-s);
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--insegna);
  box-shadow: 0 0 0 3px rgba(var(--ok-deep-rgb)/0.13);
}
.fieldrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }

.consent { display: flex; min-width: 0; gap: 0.7rem; align-items: flex-start; font-size: 0.85rem; color: var(--ink-soft); }
.consent input { margin-top: 0.25rem; accent-color: var(--insegna); width: auto; }
.consent a { border-bottom: 1px solid var(--mist); }
.consent span { min-width: 0; overflow-wrap: anywhere; }

.honeypot { position: absolute; left: -9999px; }

.formnote {
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--serum);
  background: rgba(var(--serum-rgb)/0.1);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.formnote--ok { border-left-color: var(--insegna); background: rgba(var(--ok-deep-rgb)/0.08); }

.mapframe {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--travertino);
}
.mapframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05); }
.mapframe__notice { max-width: 38ch; margin: 0; padding: 1.5rem; text-align: center; color: var(--ink-soft); }
.mapframe__notice a { color: var(--insegna); border-bottom: 1px solid currentColor; }

/* ---------- 21. CTA finale ---------- */
.endcta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.endcta__title { font-size: var(--t-h1); max-width: 20ch; }

/* ---------- 22. Footer ---------- */
.foot {
  background: rgba(var(--ink-rgb)/var(--glass-dark-alpha));
  color: rgba(var(--paper-rgb)/0.72);
  /* Il bottone torna-su e la barra mobile stanno fissi nell'angolo in basso:
     arrivati in fondo si posano sull'ultima riga del piede, e coprivano la
     coda di "Documenti". Il fondo si tira indietro oltre il loro ingombro. */
  padding-block: clamp(3rem, 6vw, 5rem) 5rem;
  -webkit-backdrop-filter: blur(24px) saturate(1.32);
  backdrop-filter: blur(24px) saturate(1.32);
}
.foot__quote {
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--porcelain);
  max-width: 34ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-invert);
}
.foot__h {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--serum);
  margin: 0 0 1rem;
}
/* l'email è una parola unica più larga della colonna: deve poter spezzarsi */
.foot__cols > * { min-width: 0; }
.foot__list { display: grid; gap: 0.55rem; font-size: 0.92rem; overflow-wrap: anywhere; }
.foot__list a { transition: color 0.25s, padding-left 0.25s; }
.foot__list a:hover { color: var(--porcelain); padding-left: 0.3rem; }
.foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.86rem;
}
.foot__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: rgba(var(--paper-rgb)/0.82);
  transition: color 0.25s;
}
.foot__social a:hover,
.foot__social a:focus-visible { color: var(--serum); }
.foot__social svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  padding-top: 1.6rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(var(--paper-rgb)/0.72);
}
.foot__bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-left: auto; }
/* Su schermo stretto il bottone torna-su sale sopra la barra fissa e finisce
   proprio dove cade la riga legale, che è spinta a destra. Invece di
   rincorrere l'ingombro con l'imbottitura, la riga esce dall'angolo. */
@media (max-width: 52rem) {
  .foot__bottom nav { margin-left: 0; }
}
.foot__bottom a:hover { color: var(--serum); }

/* ---------- 23. 404 ---------- */
.notfound { min-height: 58vh; display: grid; place-content: center; text-align: center; gap: 1.5rem; }
.notfound__code {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--insegna);
}
.notfound__links { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- 24. Intestazione pagina + breadcrumb ---------- */
.pagehead {
  background: rgba(var(--ink-rgb)/var(--glass-dark-alpha));
  color: var(--porcelain);
  padding-block: clamp(2.6rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: blur(18px) saturate(1.34);
  backdrop-filter: blur(18px) saturate(1.34);
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.2);
}
.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 1.4rem 1.4rem;
  mask-image: linear-gradient(200deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%);
}
.pagehead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  position: relative;
  isolation: isolate;
}
.pagehead__inner::before {
  content: "";
  position: absolute;
  inset: clamp(-1.2rem, -2vw, -0.7rem) clamp(0.45rem, 1.2vw, 0.9rem);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.025) 58%),
    rgba(var(--ink-rgb)/0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-l);
  box-shadow: 0 1.25rem 3.5rem rgba(var(--deep-rgb)/0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.32);
  backdrop-filter: blur(10px) saturate(1.32);
}
.pagehead__title { font-size: var(--t-h1); max-width: 20ch; }
.pagehead__lede { color: rgba(var(--paper-rgb)/0.75); font-size: 1.02rem; max-width: 44ch; margin: 0; }
/* il ritorno all'elenco sta in testa, dove serve: la briciola dice dove sei,
   il bottone e' la strada per tornare indietro senza usare il tasto del browser */
.pagehead__back { margin: 1.4rem 0 0; }

.pagehead--examfinder {
  padding-block: clamp(1.6rem, 4vw, 3.25rem);
  overflow: visible;
}
.pagehead--examfinder .pagehead__inner {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
.pagehead--examfinder .pagehead__lede { margin-top: 0.9rem; }
/* la barra strumenti resta in vista mentre si scorre il catalogo (sotto il masthead sticky) */
.examfinder__tool {
  position: sticky;
  top: var(--mast-h, 4.4rem);
  z-index: 2;
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08) 58%),
    rgba(var(--paper-rgb)/var(--glass-card-alpha));
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--serum);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
}
.examfinder__tool .filterbar__count { margin: 0; }

/* Scorrendo il catalogo la barra si stringe in una pillola e i filtri passano
   in un pannello a comparsa. Il cassetto esce dal flusso prima che la larghezza
   si muova, cosi' la transizione ridisegna solo la riga di ricerca e non le
   trenta chip che stanno sotto. */
.examfinder__tool {
  max-width: 100%;
  margin-inline: auto;
  /* La barra resta ferma davanti a un fondale che si muove: senza un piano
     tutto suo il compositore la rifonde con lo sfondo a ogni fotogramma.
     Misurato: 20,6 ms mediani contro 16,7 fissi. translate3d non basta, serve
     dichiarare l'intenzione. */
  will-change: transform, opacity;
  /* Fra distesa e pillola cambiano larghezza, imbottitura e raggio: tre
     proprieta' di layout. Animarle significa rifare il riquadro a ogni
     fotogramma della transizione, con il catalogo intero sotto. Qui la forma
     cambia in un colpo solo mentre la barra non si vede, e a muoversi resta
     solo l'opacita': lavoro del compositore, non del layout. */
  transition: opacity 0.15s linear, transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.examfinder__tool.is-morphing {
  opacity: 0;
  transform: translateY(-0.3rem);
}
/* mentre e' invisibile niente animazioni interne: quando rientra, la nuova
   forma dev'essere gia' ferma */
.examfinder__tool.is-morphing * { transition: none; }
/* Il cassetto dei filtri sta fuori dal flusso in tutte e due le forme, non
   soltanto in pillola. Da distesa la barra portava trenta chip in colonna:
   221 px dei 353 di ingombro, e finche' quell'ingombro non era passato sopra
   il bordo dello schermo la barra non poteva stringersi senza lasciare un
   buco fra la pillola e la prima scheda. Con i filtri dietro il bottone la
   barra nasce alta 114 e la pillola arriva dopo 527 px invece di 766. */
.examfilter__drawer { gap: 0.85rem; }

.examfilter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.36rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.78rem/1 var(--f-body);
  white-space: nowrap;
  cursor: pointer;
}
.examfilter__toggle:hover { border-color: var(--insegna); color: var(--insegna); }
.examfilter__toggle[aria-expanded="true"] {
  background: var(--insegna);
  border-color: var(--insegna);
  color: #fff;
}
.examfilter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--serum);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
}
.examfilter__badge[hidden] { display: none; }
.examfilter__toggle[aria-expanded="true"] .examfilter__badge {
  background: var(--paper);
  color: var(--insegna);
}
.examfilter__caret { font-size: 0.6rem; transition: transform 0.2s; }
.examfilter__toggle[aria-expanded="true"] .examfilter__caret { transform: rotate(180deg); }

.examfilter__drawerhd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.examfilter__drawerclose {
  border: 0;
  background: transparent;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.examfilter__drawerclose:hover { background: var(--salvia); }

/* ---- pillola ---- */
.examfinder__tool.is-tight {
  max-width: 52rem;
  padding: 0.4rem 0.55rem 0.4rem 0.85rem;
  border-radius: 100px;
  border-top-width: 2px;
}
/* In pillola la riga non va mai a capo. Il campo di ricerca, con la base
   automatica, chiedeva la larghezza del proprio contenuto: sul telefono non
   ci stava insieme al bottone Filtri, che finiva sulla riga sotto, e il raggio
   da pillola si ritrovava tirato su due righe alte 84 px. Con la base corta il
   campo prende quello che avanza invece di pretenderlo. */
.examfinder__tool.is-tight .examfilter__top { flex-wrap: nowrap; gap: 0.5rem; }
.examfinder__tool.is-tight .search--examfinder { gap: 0; flex: 1 1 6rem; min-width: 5rem; }
.examfinder__tool.is-tight .search__label { display: none; }
.examfinder__tool.is-tight .search__control { padding: 0.32rem 0.8rem; border-radius: 100px; }
.examfinder__tool.is-tight .filterbar__count { display: none; }
/* i filtri attivi restano leggibili in pillola: una riga sola che scorre */
.examfinder__tool.is-tight .activefilters {
  flex-wrap: nowrap;
  gap: 0.3rem;
  max-width: 40%;
  padding: 0;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.examfinder__tool.is-tight .activefilters::-webkit-scrollbar { display: none; }
.examfinder__tool.is-tight .activefilters__lab,
.examfinder__tool.is-tight .activefilters__clear { display: none; }
.examfinder__tool.is-tight .activefilters__pill { flex: none; padding: 0.2rem 0.6rem; font-size: 0.72rem; }

.examfinder__tool .examfilter__drawer {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 3;
  /* Sul telefono il pannello e' alto quanto un terzo di schermo: aprendolo con
     la barra ancora a meta' pagina finiva sotto il bordo, e scorrere per
     raggiungerlo lo richiude. Il codice porta la barra sotto l'intestazione
     prima di aprire; qui resta la rete di sicurezza per gli schermi bassi,
     dove nemmeno cosi' ci starebbe: il pannello si ferma e scorre dentro. */
  max-height: calc(100dvh - var(--mast-h, 4.4rem) - 11rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.05rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.14) 58%),
    rgba(var(--paper-rgb)/0.98);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
}
.examfinder__tool.is-open .examfilter__drawer { display: grid; }

.crumbs {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(var(--paper-rgb)/0.72);
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
/* il testo è minuto, ma il bersaglio deve restare toccabile: 24px pieni (WCAG 2.2) */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.crumbs a:hover { color: var(--serum); }
.crumbs span[aria-hidden] { opacity: 0.4; }

.anchor { scroll-margin-top: 7.5rem; }

/* ---------- 25. Reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.rv.is-in { opacity: 1; transform: none; }
.rv--d1 { transition-delay: 0.08s; }
.rv--d2 { transition-delay: 0.16s; }
.rv--d3 { transition-delay: 0.24s; }
.rv--d4 { transition-delay: 0.32s; }

.lineup > * {
  opacity: 0;
  transform: translateY(1.2rem);
  animation: lineup 0.95s var(--ease-out) forwards;
}
.lineup > :nth-child(1) { animation-delay: 0.1s; }
.lineup > :nth-child(2) { animation-delay: 0.22s; }
.lineup > :nth-child(3) { animation-delay: 0.34s; }
.lineup > :nth-child(4) { animation-delay: 0.46s; }
.lineup > :nth-child(5) { animation-delay: 0.58s; }
@keyframes lineup { to { opacity: 1; transform: none; } }

/* le fotografie non si scoprono da sinistra a destra come una tendina: si
   mettono a fuoco, come un vetrino sotto l'obiettivo. Il movimento e' la messa
   a fuoco, e non serve una classe in piu' nel markup: basta che stiano dentro
   un blocco gia' marcato per la comparsa. */
.rv figure img,
figure.rv img {
  filter: blur(13px) saturate(0.5);
  transform: scale(1.055);
  transition: filter 1.05s var(--ease-out) 0.1s, transform 1.3s var(--ease-out) 0.1s;
}
.rv.is-in figure img,
figure.rv.is-in img { filter: blur(0) saturate(1); transform: none; }

/* ---------- 25c. Cambio pagina: dissolvenza al posto del lampo bianco ----------
   In WordPress lo fa il browser da solo sulle navigazioni vere; nel mock
   lo chiama il router. Dove non è supportato, il cambio resta quello di sempre. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.24s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.46s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-0.5rem); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1rem); } }

/* la testata resta ferma mentre il corpo cambia: è il punto fisso della pagina */
.masthead { view-transition-name: masthead; }
::view-transition-old(masthead),
::view-transition-new(masthead) { animation: none; }

/* ---------- 25b. Il percorso del campione: una provetta, quattro cose vere ----------
   Niente tracciato decorativo e niente icone: c'e' un solo oggetto, la provetta,
   e fa quello che fa davvero. Prende l'etichetta in accettazione, si riempie al
   prelievo, si separa in siero e cellule dopo la centrifuga, e alla fine il
   valore viene letto contro il suo intervallo. Il disegno e' verticale perche'
   la provetta lo e': su schermo stretto diventa un indicatore alto quanto la
   pagina invece di un'illustrazione orizzontale schiacciata. */
.vial {
  --signal-progress: 0;
  --label: 0;
  --fill: 0;
  --sep: 0;
  --ref: 0;
  position: relative;
  background: rgba(213 232 220 / var(--glass-band-alpha));
  color: var(--insegna-ink);
  -webkit-backdrop-filter: blur(24px) saturate(1.34);
  backdrop-filter: blur(24px) saturate(1.34);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.46), inset 0 -1px rgba(var(--ink-rgb)/0.08);
}

/* il telaio resta fermo, il testo gli scorre accanto */
.vial__rig {
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: 0;
  display: grid;
  align-content: center;
  justify-items: end;
  padding-right: clamp(1.5rem, 5vw, 5.5rem);
  pointer-events: none;
  overflow: clip;
}
.vial__tube {
  height: clamp(19rem, 62svh, 34rem);
  aspect-ratio: 260 / 780;
}
.vial__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- il vetro e il tappo ------------------------------------------------- */
.vial__glass {
  fill: rgba(255, 255, 255, 0.58);
  stroke: var(--insegna-deep);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.vial__cap { fill: var(--oro); }
.vial__collar { fill: #6d4722; }
.vial__ticks path {
  fill: none;
  stroke: var(--insegna-deep);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.34;
}
.vial__shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.7;
}

/* --- il contenuto -------------------------------------------------------- */
.vial__cells { fill: #7e3a30; }
.vial__serum { fill: #d9a23f; }
/* l'interfaccia fra i due strati: e' il momento in cui la centrifuga ha finito */
.vial__meniscus {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3;
  opacity: var(--sep);
}

/* --- l'etichetta: il codice a barre si stampa mentre arriva la richiesta --- */
.vial__label { opacity: var(--label); }
.vial__paper {
  fill: var(--paper);
  stroke: rgba(var(--ink-rgb)/0.24);
  stroke-width: 1.5;
}
.vial__bars {
  transform: scaleX(var(--label));
  transform-box: fill-box;
  transform-origin: left center;
}
.vial__bars rect { fill: var(--insegna-ink); }
.vial__labelrule {
  fill: none;
  stroke: rgba(var(--ink-rgb)/0.32);
  stroke-width: 3;
  stroke-linecap: round;
}

/* --- il referto: il valore entra nell'intervallo -------------------------- */
.vial__ref { opacity: var(--ref); }
.vial__refaxis {
  fill: none;
  stroke: rgba(var(--ink-rgb)/0.28);
  stroke-width: 2;
  stroke-linecap: round;
}
.vial__refband { fill: var(--mist); }
.vial__refdot { fill: var(--oro); }

/* --- l'indicatore per schermi stretti: la stessa provetta, ridotta a colonna */
.vial__gauge { display: none; }

/* --- il telaio del testo -------------------------------------------------- */
.vial__frame {
  position: relative;
  z-index: 1;
  margin-top: -100svh;
  padding-top: clamp(4.5rem, 9vh, 7rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.vial__head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 2rem;
}
.vial__title {
  font-size: clamp(2.1rem, 4vw, 4.3rem);
}
.vial__count {
  margin: 0;
  padding-top: 0.2rem;
  color: rgba(var(--ink-rgb)/0.76);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}
.vial__count [data-signal-current] {
  color: var(--oro);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 0.8;
}
.vial__stages {
  position: relative;
  z-index: 2;
}
/* Due righe: il testo sta al centro dello schermo, i fatti si appoggiano al
   fondo. Senza la riga di fondo la metà inferiore della fase resta vuota. */
.signal-stage {
  position: relative;
  min-height: 86svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: clamp(2rem, 6vh, 4rem);
  /* ogni fase usa un tono della palette scelta e mantiene la provetta leggibile */
  --tint: var(--travertino);
  --tint-ink: var(--insegna);
}
.signal-stage[data-signal-stage="2"] { --tint: var(--lino-line); --tint-ink: var(--insegna); }
.signal-stage[data-signal-stage="3"] { --tint: var(--serum-soft); --tint-ink: var(--ink); }
.signal-stage[data-signal-stage="4"] { --tint: var(--serum); --tint-ink: var(--ink); }

/* il campo di colore segue il lettore: entra con la fase e si spegne quando
   esce. Le fasi confinanti si sfumano l'una nell'altra da sole. */
.signal-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12svh -50vw;
  background: radial-gradient(60% 46% at 34% 50%, var(--tint), transparent 72%);
  opacity: calc(0.22 + 0.78 * var(--near, 1));
  pointer-events: none;
}

/* il testo poggia su una superficie sua, non su un'ombra sfumata */
.signal-stage__copy {
  align-self: center;
  /* lascia sempre libera la colonna della provetta */
  max-width: min(44rem, calc(100% - 14rem));
  padding: clamp(1.1rem, 2.2vw, 1.9rem) clamp(1.2rem, 2.4vw, 2.1rem);
  border-left: 3px solid var(--tint-ink);
  background: var(--tint);
  background: color-mix(in oklab, var(--tint) 62%, #ffffff);
  box-shadow: 0 1.1rem 3.4rem rgba(var(--ink-rgb)/0.12);
}
.stagefoot {
  align-self: end;
  max-width: min(44rem, calc(100% - 14rem));
  margin: 0;
  padding: 0.85rem 0 0 clamp(1.2rem, 2.4vw, 2.1rem);
  border-top: 1px solid color-mix(in oklab, var(--tint-ink) 42%, transparent);
  color: rgba(var(--ink-rgb)/0.74);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.vial[data-signal-bound] .stagefoot { opacity: calc(0.1 + 0.9 * var(--near, 1)); }
.stagefoot .stagefacts { margin-top: 0.9rem; }
/* dissolvenza legata alla posizione: entra salendo, esce sfumando. Niente scatti */
.vial[data-signal-bound] .signal-stage__copy {
  opacity: calc(0.12 + 0.88 * var(--near, 1));
  transform: translateY(calc((1 - var(--near, 1)) * 1.8rem));
}
.signal-stage__num {
  margin: 0 0 0.9rem;
  color: var(--tint-ink);
  font-family: var(--f-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.signal-stage__title {
  margin: 0 0 1rem;
  max-width: 100%;
  overflow-wrap: normal;
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: 0.84;
  letter-spacing: -0.06em;
}
.signal-stage__copy > p:last-child {
  max-width: 46ch;
  /* 0.84 e non 0.76: sul pannello tinto la soglia 4.5:1 si perde a 0.76 */
  color: rgba(var(--ink-rgb)/0.84);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}
.vial__note {
  position: relative;
  z-index: 3;
  max-width: 60ch;
  margin: 0;
  color: rgba(var(--ink-rgb)/0.78);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* vecchio percorso: mantenuto per compatibilità con eventuali contenuti salvati */
.journey__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.journey__stick { position: sticky; top: 7.5rem; }
.journey__lede {
  color: rgba(var(--paper-rgb)/0.72);
  max-width: 34ch;
  margin: 1.2rem 0 0;
  line-height: 1.75;
}
.journey__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 5vw, 4rem); }
/* le foto del laboratorio sono verticali: stanno accanto al testo, non sopra */
.jstep {
  display: grid;
  grid-template-columns: 2.8rem minmax(9rem, 0.66fr) minmax(0, 1fr);
  gap: 0 clamp(1rem, 2vw, 1.6rem);
  align-items: start;
  transform-origin: 50% 100%;
}
.jstep__body { padding-top: 0.15rem; }
.jstep__num {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--serum);
  padding-top: 0.35rem;
  position: relative;
}
.jstep__num::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 2.1rem;
  bottom: -2.2rem;
  width: 1px;
  background: linear-gradient(180deg, var(--line-invert), transparent);
}
.jstep:last-child .jstep__num::after { display: none; }
.jstep__ph {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--insegna-deep);
  border: 1px solid var(--line-invert);
}
.jstep__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.03); }
/* inquadratura: nelle foto 3 e 4 il soggetto sta sulla destra del fotogramma */
.jstep:nth-child(3) .jstep__ph img { object-position: 70% center; }
.jstep:nth-child(4) .jstep__ph img { object-position: 68% center; }
.jstep__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.jstep__text { color: rgba(var(--paper-rgb)/0.74); line-height: 1.75; margin: 0; max-width: 46ch; }

/* ---------- 25c. Animazioni legate allo scroll (nessun listener JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* parallasse leggera: solo transform, gira sul compositor */
    .par { overflow: hidden; }
    .par > img {
      animation: par-shift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
    @keyframes par-shift {
      from { transform: scale(1.1) translateY(-3.2%); }
      to { transform: scale(1.1) translateY(3.2%); }
    }

    /* il titolo si allarga e mette a fuoco mentre entra */
    .sweep {
      animation: sweep-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
    @keyframes sweep-in {
      from { opacity: 0.28; letter-spacing: 0.03em; }
      to { opacity: 1; letter-spacing: -0.03em; }
    }

    /* tappe del percorso: entrano, restano nitide, escono in secondo piano */
    .jstep {
      animation: step-focus linear both;
      animation-timeline: view();
      animation-range: entry 8% exit 92%;
    }
    @keyframes step-focus {
      0% { opacity: 0.18; transform: translateY(2.5rem) scale(0.965); }
      28%, 72% { opacity: 1; transform: none; }
      100% { opacity: 0.3; transform: scale(0.985); }
    }
    .jstep__num {
      animation: num-on linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 42%;
    }
    @keyframes num-on {
      from { color: rgba(var(--paper-rgb)/0.3); }
      to { color: var(--serum); }
    }

    /* la barra di progresso in header non ha più bisogno del listener di scroll */
    .masthead__progress {
      animation: bar-grow linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes bar-grow {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}

/* ---------- 26. Responsive ---------- */
.navscrim {
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-rgb)/0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
  z-index: 99;
}

/* larghezze intermedie: il menu completo deve stare su una riga senza traboccare */
@media (max-width: 76rem) {
  .nav__list { gap: 0.5rem; }
  .nav__link { font-size: 0.66rem; letter-spacing: 0.07em; }
  .brand__sub { display: none; }
}

@media (max-width: 66rem) {
  .hero__inner,
  .split,
  .split--even,
  .contactgrid,
  .endcta,
  .sechead,
  .pagehead__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--signal {
    min-height: auto;
    padding-block: clamp(3.5rem, 8vw, 6rem);
  }
  .hero--signal .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--signal .hero__title { max-width: 11ch; }
  .ritratto { width: min(100%, 46rem); margin-inline: auto; }
  .split--flip > :first-child { order: 0; }
  .sechead { align-items: start; }
  .endcta__title { max-width: none; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(22rem, 86vw);
    background: var(--paper);
    border-left: 1px solid var(--line);
    padding: 4.9rem 1.4rem max(1.4rem, env(safe-area-inset-bottom));
    transform: translateX(101%);
    transition: transform 0.5s var(--ease-out);
    overflow-y: auto;
    box-shadow: -1rem 0 3rem rgba(var(--ink-rgb)/0.14);
    z-index: 101;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { padding: 0.85rem 0; font-size: 0.78rem; }
  /* i sotto-link vanno a capo come pastiglie: due righe invece di sette,
     così tutto il menu resta visibile senza scorrere anche su schermi da 640px */
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0.8rem;
    min-width: 0;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .nav__sub a {
    padding: 0.4rem 0.7rem;
    font-size: 0.6rem;
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: 100px;
  }
  .nav__sub a:hover { background: var(--porcelain); border-color: var(--insegna); padding-left: 0.7rem; }
  .burger { display: block; order: 3; }
  /* Aperto il menu, la x si stacca dalla riga della testata e si ancora
     all'angolo in alto a destra del pannello. In cima alla pagina la testata
     sta sotto l'avviso di chiusura e la striscia degli orari, e la x si
     ritrovava centotrenta pixel dentro il pannello, in mezzo alle voci. Il
     posto che lascia nella riga non si vede: il pannello copre tutta la
     parte destra della testata. Lo scostamento da destra e' lo stesso della
     riga, cosi' a pagina gia' scorsa la x non si sposta di un pixel.
     Il pannello riserva 4,9rem in cima, quindi non tocca la prima voce. */
  .nav.is-open ~ .burger {
    position: fixed;
    /* su schermi bassi il pannello scorre dentro di se: senza un fondo pieno le
       voci passerebbero sotto la x, che e' un bottone trasparente */
    background: var(--paper);
    top: 0.62rem;
    right: clamp(1.25rem, 4vw, 2.5rem);
  }
  .masthead__cta { order: 2; margin-left: auto; }
  /* Il selettore di lingua scende dentro il menu a scomparsa. Nella testata
     stretta occupava i sessantasei pixel che mancavano al burger, e li
     toglieva proprio a lui. Sotto le voci del menu ha posto e si vede. */
  .masthead__actions .lang-switch { display: none; }
  .nav__foot { display: flex; }
  /* Senza questo, i ventotto pixel che avanzano restavano in coda alla riga e
     il bottone del menu galleggiava lontano dal bordo. Ora Contattaci e il
     bottone si appoggiano al margine destro, dove la mano li cerca. */
  .masthead__actions { margin-left: auto; }
  .navscrim.is-on { opacity: 1; visibility: visible; }
  .filterbar { position: static; }
  .pagehead--examfinder .pagehead__inner { grid-template-columns: minmax(0, 1fr); }
  .journey__wrap { grid-template-columns: minmax(0, 1fr); }
  .journey__stick { position: static; }
}

/* tablet landscape e piccoli laptop: la tesi e la squadra restano nello stesso impatto */
@media (min-width: 54rem) and (max-width: 66rem) {
  .hero--signal {
    min-height: calc(100svh - 6.8rem);
    padding-block: clamp(2.5rem, 5vh, 4rem);
  }
  .hero--signal .hero__inner {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: center;
  }
  .hero--signal .hero__title {
    max-width: 10ch;
    font-size: clamp(3.25rem, 5.65vw, 4.1rem);
  }
  .ritratto { width: 100%; }
}

/* schermi bassi (telefoni piccoli, orizzontale): il menu si comprime per stare
   tutto dentro una schermata */
@media (max-width: 66rem) and (max-height: 45rem) {
  .nav { padding-top: 4.4rem; }
  .nav__link { padding: 0.62rem 0; }
  .nav__sub { padding-bottom: 0.55rem; gap: 0.3rem; }
  .nav__sub a { padding: 0.32rem 0.6rem; }
}
/* sotto i 600px di altezza restano solo le voci principali: le scorciatoie
   alle ancore sono raggiungibili dalle pagine stesse e dal footer */
@media (max-width: 66rem) and (max-height: 37.5rem) {
  .nav__sub { display: none; }
}

/* sotto gli 832px la foto verticale passa sopra al testo, tagliata in quadrato */
@media (max-width: 52rem) {
  .quickstrip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quickstrip__item:nth-child(2) { border-right: 1px solid var(--line); }
  .quickstrip__item:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .vial__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  /* schermo stretto: la provetta resta la provetta, solo piu' piccola e
     appoggiata al bordo destro. Il disegno e' verticale, quindi ci sta: e'
     il testo che si stringe, non l'illustrazione che sparisce. */
  .vial__rig {
    justify-items: end;
    padding: 0 clamp(0.5rem, 2vw, 1.25rem) 0 0;
  }
  .vial__tube { height: clamp(15rem, 46svh, 24rem); }
  .vial__gauge { display: none; }
  .signal-stage { min-height: 84svh; }
  /* la colonna della provetta resta libera anche qui */
  .signal-stage__copy,
  .stagefoot {
    width: calc(100% - 5.5rem);
    min-width: 0;
    max-width: calc(100% - 5.5rem);
  }
  .signal-stage__title {
    font-size: clamp(2.35rem, 12vw, 4.8rem);
    line-height: 0.9;
  }
  .signal-stage[data-signal-stage="1"] .signal-stage__title {
    max-width: 100%;
    font-size: clamp(1.65rem, 8vw, 3.1rem);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .jstep { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 0.9rem; }
  .jstep__ph { aspect-ratio: 1 / 1; }
  .jstep__body { grid-column: 2; padding-top: 0.9rem; }
}

@media (max-width: 40rem) {
  /* Sul telefono il bottone Contattaci era alto 59 px dentro una testata di
     63: pesava piu' dell'insegna. Sceso a poco meno di 48 resta sopra il
     bersaglio minimo per il dito e smette di comandare la riga. */
  .masthead__cta .btn { padding: 0.8rem 1.15rem; font-size: 0.9rem; }

  .hero--signal .hero__inner { gap: 1.75rem; }
  .hero--signal .hero__title {
    font-size: clamp(3rem, 15.5vw, 4.4rem);
    line-height: 0.88;
  }
  .hero__scrollcue { display: none; }
  /* sotto i 40rem la striscia si alza: a 375px una 32/9 sarebbe una fessura */
  /* su telefono la cornice si assottiglia: a 350px un passe-partout largo
     mangerebbe la fotografia */
  .ritratto { padding: 0.55rem; }
  .ritratto::before { inset: 0.28rem; }

  .tl { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .info { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .doc { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .doc__dl { grid-column: 2; }
  .exam__btn { grid-template-columns: minmax(0, 1fr) auto; }
  .exam__meta { grid-column: 1; justify-content: flex-start; }
  .exam__sign { grid-row: 1; grid-column: 2; }
  .exam__info { grid-template-columns: minmax(0, 1fr); padding-left: 1rem; }
  .exam__kw { padding-left: 1.4rem; }
  .fieldrow { grid-template-columns: minmax(0, 1fr); }
  .packs { grid-template-columns: minmax(0, 1fr); }
  .pagehead--examfinder { padding-block: 1.35rem; }
  .pagehead--examfinder .pagehead__inner { gap: 1.25rem; }
  .pagehead--examfinder .pagehead__title { font-size: clamp(2rem, 11vw, 3rem); }
  .examfinder__tool { padding: 0.95rem; }
  /* nella pillola su telefono lo spazio basta per ricerca e pulsante: i filtri
     attivi restano contati dal pallino sul pulsante */
  .examfinder__tool.is-tight { padding: 0.4rem 0.5rem 0.4rem 0.75rem; }
  .examfinder__tool.is-tight .activefilters { display: none; }
  .search--examfinder input { font-size: 1rem; }
  .packsingle { padding-top: 2rem; }
  .packsingle__list { grid-template-columns: minmax(0, 1fr); }
  .jstep__num::after { display: none; }
}

@media (max-width: 30rem) {
  .quickstrip__grid { grid-template-columns: minmax(0, 1fr); }
  .quickstrip__item,
  .quickstrip__item:nth-child(2),
  .quickstrip__item:last-child {
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }
  .quickstrip__item:first-child { border-top: 0; }
}

/* telefoni molto stretti (320-360px): marchio, CTA e burger devono stare su una riga */
/* aree tattili: su touch i link isolati devono restare almeno 24px alti (WCAG 2.2) */
@media (max-width: 60rem), (pointer: coarse) {
  .foot__list a,
  .crumbs a,
  .statusbar__link,
  .linkarrow,
  .info__v a,
  .foot__bottom a { padding-block: 0.32rem; display: inline-block; }
  .foot__list { gap: 0.3rem; }
  .crumbs { gap: 0.4rem; }
}

@media (max-width: 23rem) {
  .masthead__inner { gap: 0.7rem; }
  .brand { gap: 0.55rem; }
  .brand__mark { width: 2rem; height: 2rem; }
  .brand__name { font-size: 0.9rem; }
  .masthead__cta .btn { padding: 0.8rem 0.8rem; font-size: 0.64rem; }
  .burger { width: 2.4rem; height: 2.4rem; }
}

/* Le superfici più dense restano leggibili ma rifrangono lo stesso campo:
   il blur è comune, le opacità sono definite accanto a ciascun componente. */
.timeline,
.docs,
.contactgrid > .rv,
.prose,
.barreca-editorial .entry-content,
.notfound {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.045) 56%, rgba(var(--serum-rgb)/0.08)),
    rgba(var(--paper-rgb)/0.36);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.32);
  backdrop-filter: blur(12px) saturate(1.32);
}

.timeline,
.docs {
  padding: clamp(0.45rem, 1vw, 0.8rem) clamp(1rem, 2.4vw, 1.8rem);
}

.contactgrid > .rv,
.prose,
.barreca-editorial .entry-content,
.notfound {
  padding: clamp(1.35rem, 3vw, 2.4rem);
}

.notfound {
  max-width: 52rem;
  margin-inline: auto;
}

.svc,
.pack,
.packsingle,
.step,
.quote,
.refbar,
.quickstrip__item,
.value,
.examdialog,
.nav__sub,
.totop {
  -webkit-backdrop-filter: blur(14px) saturate(1.32);
  backdrop-filter: blur(14px) saturate(1.32);
}

/* La barra esami e' l'unica superficie di vetro che resta ferma per l'intera
   altezza del catalogo. Sfocare uno sfondo che si muove sotto di lei costringe
   il browser a rifare la sfocatura a ogni fotogramma per settemila pixel di
   scorrimento: misurato, portava a un terzo i fotogrammi oltre i 20 ms. Qui il
   vetro si fa di carta quasi piena e la resa cambia appena. */
.examfinder__tool {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.08) 58%),
    rgba(var(--paper-rgb)/0.97);
}

/* Il blur su superfici grandi forza il ridisegno dell'intero viewport a ogni
   scatto dello scroll. Il vetro vero resta sui pannelli circoscritti. */
.quickstrip,
.pagehead,
.foot,
.vial {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .band,
  .quickstrip { background: rgba(var(--paper-rgb)/0.97); }
  .band--travertino { background: rgba(var(--porcelain-rgb)/0.97); }
  .band--ink,
  .hero,
  .pagehead,
  .foot,
  .value { background: rgba(var(--ink-rgb)/0.96); }
  .vial { background: rgba(213, 232, 220, 0.97); }
  .svc,
  .pack,
  .packsingle,
  .step,
  .quote,
  .refbar,
  .quickstrip__item,
  .examfinder__tool,
  .examdialog,
  .nav__sub,
  .totop,
  .timeline,
  .docs,
  .contactgrid > .rv,
  .prose,
  .barreca-editorial .entry-content,
  .notfound { background: rgba(var(--paper-rgb)/0.98); }
}

/* ---------- 27. Preferenze utente ---------- */
/* ---------- adattamenti dei blocchi nuovi ---------- */

/* oltre i 1600px la colonna cresce invece di lasciare due deserti ai lati */
@media (min-width: 100rem) {
  :root { --maxw: 86rem; }
}

@media (max-width: 66rem) {
  .storia { grid-template-columns: minmax(0, 1fr); }
  .quadro { max-width: 34rem; }
}

@media (max-width: 52rem) {
  .histology-bg__field {
    inset: -6vmax;
    opacity: 1;
  }
  .histology-bg__glass { inset: 0.45rem; }
  /* meno sfocatura: su schermo piccolo la massa deve leggersi come una
     bolla, non come un alone. La tinta non si tocca: le masse sono bianche
     e il colore lo mette il velo che sta sopra. */
  .histology-bg__blob::before {
    filter: blur(4px);
  }
  .histology-bg__blob::after { opacity: 0.8; }
  /* a schermo piccolo due masse bastano e ogni superficie sfocata costa: ne
     sparisce la meta', il raster del fondale cala di pari passo */
  .histology-bg__blob--three,
  .histology-bg__blob--drop { display: none; }
  /* Il vetro resta sulle poche superfici di cornice (testata, intestazione,
     piede, dialoghi). Sulle schede che compaiono a griglia no: dieci
     backdrop-filter insieme sono il vero motivo per cui lo scorrimento
     strappa su telefono, e il fondale si legge lo stesso attraverso l'alfa. */
  .pack,
  .step,
  .value,
  .quote,
  .docs,
  .quickstrip__item,
  .contactgrid > .rv {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .thenow__frame { aspect-ratio: 4 / 3; }
  .thenow__grip { width: 2.5rem; height: 2.5rem; }
}

@media (max-width: 40rem) {
  .thenow__tag {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.55rem;
    max-width: 52%;
  }
  .thenow__tag--now { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .histology-bg__tone { transition: none; }
  .histology-bg__accent { transition: none; }
  .histology-bg__blob,
  .histology-bg__cells {
    transform: none !important;
    will-change: auto;
  }
  .quadro__glass { display: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv,
  .lineup > * { opacity: 1; transform: none; }
  .refbar__marker { transform: translate(-50%, -50%) scale(1); }
  /* la dissolvenza resta: è opacità, non movimento. Sparisce la messa a fuoco */
  .rv figure img,
  figure.rv img { filter: none; transform: none; }
  /* il filo resta disegnato e tutti i ritratti alla stessa misura: è uno
     schema, non un'animazione */
  .thread { --thread: 1; }
  .tnode { --focus: 1; }
  .tnode__card { opacity: 1; transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  /* la provetta resta, ma già etichettata, piena e separata: uno schema, non
     un'animazione. Il JS la disegna direttamente nello stato finale. */
  .vial[data-signal-bound] .signal-stage__copy {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .histology-bg, .masthead, .statusbar, .foot__cols, .navscrim, .mapframe, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .pagehead, .band--ink, .foot { background: #fff !important; color: #000 !important; }
  /* si stampa il contenuto, non la struttura: niente avvisi, barre fisse,
     menu o schermate; le schede restano intere su una pagina quando possibile */
  .closure-banner, .calldock, .nav, .burger, .hero__scrollcue, .skip,
  .refbar, .totop { display: none !important; }
  .exam, .pack, .doc { break-inside: avoid; }
}


/* ---------- sheen: la luce attraversa il vetro ----------
   Un riflesso singolo quando la griglia entra a fuoco; sui puntatori fini
   ripete al passaggio della mano. Nessun ascoltatore nuovo: solo CSS,
   opacity/transform su un layer gia' ritagliato (overflow hidden). */
.pack {
  position: relative;
  overflow: hidden;
}
.svc::after,
.pack::after {
  content: "";
  position: absolute;
  inset: -30% -35%;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.4) 50%, transparent 56%);
  transform: translateX(-135%);
  pointer-events: none;
}
.is-in .svc::after,
.is-in .pack::after,
.svc.is-in::after,
.pack.is-in::after {
  animation: barreca-sheen 1.05s ease 0.45s both;
}
@media (hover: hover) {
  .svc.is-in:hover::after,
  .pack.is-in:hover::after { animation: barreca-sheen 0.85s ease both; }
}
@keyframes barreca-sheen {
  to { transform: translateX(135%); }
}
@media (prefers-reduced-motion: reduce) {
  .svc::after,
  .pack::after { content: none; }
}

/* ---------- vita autonoma del fondale ----------
   Le masse e le cellule respirano anche a scroll fermo: cicli lenti,
   sfasati con ritardi negativi, solo transform su layer gia' promossi.
   Il parallax legato allo scorrere (JS) sta sul contenitore del campo e
   sui toni; qui si muove il contenuto, cosi' i due motori non si pestano
   i piedi. prefers-reduced-motion spegne tutto nel blocco dedicato. */
.histology-bg__blob {
  animation: barreca-viva 26s ease-in-out infinite alternate;
}
.histology-bg__blob--two {
  animation-duration: 34s;
  animation-delay: -9s;
}
.histology-bg__blob--three {
  animation-name: barreca-viva-alt;
  animation-duration: 30s;
  animation-delay: -14s;
}
.histology-bg__blob--drop {
  animation-name: barreca-viva-alt;
  animation-duration: 22s;
  animation-delay: -4s;
}
@keyframes barreca-viva {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to   { transform: translate3d(3.6rem, -2.2rem, 0) scale(1.09) rotate(-2deg); }
}
@keyframes barreca-viva-alt {
  from { transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg); }
  to   { transform: translate3d(-3rem, 2.4rem, 0) scale(0.95) rotate(2deg); }
}