/* ==========================================================================
   Vivavoce, funnel evergreen «colloquio gratuito»: stile condiviso
   assets/css/vivavoce.css, usato da index.html, richiesta.html, grazie.html e componenti.html.
   Famiglia «Vivavoce 2.0» della landing webinar del 14/10: stessi token, Lexend, forme organiche.
   Mobile first, solo tema chiaro, nessuna libreria, nessun file esterno.
   Il CSS di pagina (landing.css, quiz.css, grazie.css) si carica dopo questo file.

   Indice
    1. Font
    2. Token
    3. Reset e base
    4. Tipografia
    5. Layout: contenitore, sezioni, fondi, griglie
    6. Pulsanti
    7. Scelte: .opt, .opt--tile, .pill, .pill-btn, .tag
    8. Campi del modulo, .combo, .sede-card
    9. Card, note, citazioni, badge, chip, bollini, riscontri, toast
   10. Fascia loghi
   11. Video: facciata YouTube, riquadro, modal
   12. Recensioni, persone, profili, numeri, volti
   13. Domande frequenti
   14. Tappe, timeline, avanzamento
   15. Header, footer, barra fissa, barra del quiz, pannello dal basso
   16. Onde, blob, foto organiche
   17. Blocco «pa-pa-pa... parola»
   18. Utility
   19. Varianti di target (data-only, v-*)
   20. Modalità verifica (?verifica=1)
   21. Movimento ridotto
   ========================================================================== */


/* 1. Font
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/lexend-latin-wght.woff2") format("woff2");
}
/* Fallback con le metriche di Lexend: se il font arriva dopo il primo disegno
   le righe non cambiano lunghezza (meno salti di layout, CLS). Misurato il 12/10. */
@font-face {
  font-family: "Lexend Fallback";
  font-weight: 100 549;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 108.4%;
  ascent-override: 92.3%;
  descent-override: 23.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Lexend Fallback";
  font-weight: 550 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 107.5%;
  ascent-override: 93%;
  descent-override: 23.3%;
  line-gap-override: 0%;
}


/* 2. Token
   -------------------------------------------------------------------------- */
:root {
  /* Colori (classe .vv30 della landing webinar) */
  --ink: #0b2a3f;
  --ink-2: #34506a;
  --muted: #4f6679;
  --deep: #062f52;
  --deep-2: #041f38;
  --blue: #1463ff;
  --blue-hover: #0b4fd8;
  --blue-tint: #eaf1ff;
  --teal: #178096;
  --teal-ink: #0f6b7d;
  --teal-light: #e6f6f8;
  --mint: #bdf4fa;
  --aqua: #22c4e6;
  --grad: linear-gradient(118deg, #178096 0%, #1c76a5 46%, #2468b0 100%);
  --air: #eef6fc;
  --line: #d6e5f0;
  --line-2: #b9d0e1;
  --error: #c22740;
  /* Aggiunte (valori della webinar o derivati, contrasto controllato) */
  --error-bg: #fff1f3;
  --error-line: #e7a1ad;
  --field: #f8fbfe;
  --placeholder: #5f7488;                /* AA (4,6:1 sul fondo dei campi); la specifica diceva #6b8093, 3,9:1 */
  --mark: #7d95a9;                       /* bordo del segno non selezionato e delle caselle: 3:1 (WCAG 1.4.11) */
  --on-grad: rgba(6, 47, 82, .40);       /* pillole e chip sul gradiente: bianco circa 7:1 */
  --star: #f4b400;
  --verifica: #ffd23f;                    /* modalità verifica */
  --verifica-ink: #241a00;
  --focus: #1463ff;                       /* anello di focus su fondo chiaro (bianco su fondo scuro) */

  /* Testo */
  --font: "Lexend", "Lexend Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Raggi e forme */
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-field: 14px;
  --r-organic: 26px 26px 30px 22px;       /* card video */
  --r-photo: 32px 32px 38px 28px;         /* foto con angoli organici leggeri */
  --r-fact: 20px 20px 24px 18px;
  --blob-1: 46% 54% 42% 58% / 40% 44% 56% 60%;
  --blob-2: 58% 42% 55% 45% / 52% 38% 62% 48%;
  --blob-3: 40% 60% 62% 38% / 44% 56% 44% 56%;

  /* Ombre */
  --shadow: 0 1px 0 #0b2a3f0a, 0 28px 56px -30px #062f526b;
  --shadow-grad: 0 34px 70px -34px #03193cb8;      /* card bianca sul gradiente */
  --shadow-sm: 0 1px 2px #0b2a3f14, 0 10px 24px -16px #062f5259;
  --shadow-btn: 0 12px 26px -12px #1463ffbf;
  --shadow-step: 10px 12px 0 -2px #d6e5f0;         /* ombra «a gradino» */
  --shadow-step-blue: 10px 12px 0 -2px #c9dbff;

  /* Misure */
  --header-h: 56px;
  --gutter: 20px;
  --container: 1140px;
  --section-y: clamp(56px, 8vw, 104px);
  --wave-h: clamp(34px, 5vw, 70px);
  --sticky-space: 88px;                             /* spazio in fondo dove c'è la barra fissa */

  /* Spazi: 4, 8, 12, 16, 20, 24, 32, 40, 56 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* Movimento (massimo 220 ms) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;

  /* Livelli */
  --z-header: 40;
  --z-sticky: 50;
  --z-sheet: 70;
  --z-modal: 80;
  --z-verifica: 90;

  /* Icone in linea per i fondi (spunte, frecce) */
  --ico-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --ico-check-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231463ff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --ico-check-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178096' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6679' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ico-arrow-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9d0e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");

  /* Valori che i contesti cambiano */
  --opt-bg: #fff;              /* fondo delle opzioni: bianco sulle pagine, --field dentro le card */
  --pill-btn-bg: var(--air);   /* scorciatoie: --air nelle card, bianco sulle pagine --air */
  --fact-bg: var(--air);
  --quote-bg: var(--air);

  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1000px) {
  :root { --header-h: 72px; }
}


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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Con la barra fissa in basso (landing) o la barra «Avanti» (quiz) il focus portato in vista da Tab
   non finisce sotto la barra (WCAG 2.4.11). Le classi le mettono common.js e quiz.js. */
@media (max-width: 999.98px) {
  html.sticky-on { scroll-padding-bottom: 104px; }
  html.q-bar-on { scroll-padding-bottom: 112px; }
}

body,
.vvcb {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.62;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 650; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; border-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong, b { font-weight: 600; }
/* Lexend non ha il corsivo: mai font-style italic */
em, i, cite, address, var { font-style: normal; }
em { font-weight: 500; }
small { font-size: 14.5px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: #c7dbff; color: var(--ink); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* Testo solo per i lettori di schermo */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link «salta», visibile solo da tastiera */
.skip-link {
  position: absolute;
  top: -80px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 12px; outline-color: #fff; }

/* Icone SVG dello sprite (assets/partials/icone.html) */
.i {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.i-fill { fill: currentColor; stroke: none; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 24px; height: 24px; }


/* 4. Tipografia
   Scala fluida tra 390 e 1000 px con i valori della specifica (2.3).
   -------------------------------------------------------------------------- */
.h1-big,
.h1-sub { display: block; }
.h1-big {
  font-size: clamp(36px, 9.6vw, 60px);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -.04em;
}
.h1-sub {
  margin-top: 12px;
  font-size: clamp(19px, 4.9vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.h2 {
  font-size: clamp(28px, 7.2vw, 44px);
  font-weight: 670;
  line-height: 1.1;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(20px, 18.72px + .328vw, 22px);
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.h4 {
  font-size: 17px;
  font-weight: 640;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.q-title {
  font-size: clamp(24px, 20.16px + .984vw, 30px);
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.q-title:focus { outline: none; }
.q-sub {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.lead {
  max-width: 34em;
  font-size: clamp(18px, 17.04px + .246vw, 19.5px);
  font-weight: 350;
  line-height: 1.55;
  color: var(--muted);
}
.body-text { font-size: 17px; line-height: 1.62; }
.small { font-size: 14.5px; font-weight: 400; line-height: 1.45; }
.tiny { font-size: 13px; font-weight: 400; line-height: 1.45; }
.eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--teal-ink);
}
.prose > * + * { margin-top: 14px; }
.prose p,
.measure { max-width: 34em; }
.link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.link:hover { color: var(--blue-hover); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }


/* 5. Layout: contenitore, sezioni, fondi, griglie
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.container--narrow { --container: 760px; }
.container--text { --container: 720px; }
.container--quiz { --container: 1040px; }

/* Sezione: ritmo verticale e taglio dei decori (blob, onde) */
.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
  overflow: clip;
}
.section > .container { position: relative; z-index: 1; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--flush-top { padding-top: 0; }
.has-wave-top { padding-top: calc(var(--section-y) + var(--wave-h)); }
.has-wave-bottom { padding-bottom: calc(var(--section-y) + var(--wave-h)); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head > .eyebrow + * { margin-top: 10px; }
.section-head > .lead,
.section-head > p { margin-top: 14px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* Fondi. .on-dark mette testi bianchi e anello di focus bianco. */
.bg-white { background: #fff; }
.bg-air { background: var(--air); --opt-bg: #fff; --pill-btn-bg: #fff; --pill-btn-ring: var(--line); --pill-btn-hover: #fff; --pill-btn-ring-hover: var(--line-2); --fact-bg: #fff; --quote-bg: #fff; }
.bg-teal-light { background: var(--teal-light); --fact-bg: #fff; --quote-bg: #fff; }
.bg-deep { background: var(--deep); }
.bg-deep-2 { background: var(--deep-2); }
.bg-grad { background: var(--grad); }
.on-dark,
.bg-deep,
.bg-deep-2,
.bg-grad { color: #fff; --focus: #fff; }
.bg-deep .eyebrow,
.bg-deep-2 .eyebrow { color: var(--aqua); }
.bg-grad .eyebrow { color: #fff; }
.bg-deep .lead,
.bg-deep-2 .lead { color: rgba(255, 255, 255, .85); }
.bg-grad .lead,
.bg-grad .q-sub { color: #fff; }   /* sul gradiente solo bianco pieno */

/* Griglie: una colonna su mobile, poi più colonne */
.grid { display: grid; gap: var(--gap, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .grid-2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: var(--split, minmax(0, 1fr) minmax(0, 1fr)); gap: var(--split-gap, 56px); align-items: var(--split-align, center); }
}
.grid-auto { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); }

/* Riga che scorre su mobile (video, recensioni) e diventa griglia da 760 px.
   La pagina non scorre mai di lato: scorre solo la riga. */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 340px);
  gap: 16px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 12px;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; min-width: 0; }
.scroller--85 { grid-auto-columns: min(85%, 360px); }
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}
.bg-deep .scroll-hint,
.bg-deep-2 .scroll-hint { color: rgba(255, 255, 255, .75); }
@media (min-width: 760px) {
  .scroller {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .scroller > * { grid-column: span 2; }
  /* ultima riga centrata: 5 card = 3 + 2 al centro, 4 card = 3 + 1 al centro */
  .scroller > :nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .scroller > :nth-child(3n+1):last-child { grid-column: 3 / span 2; }
  .scroll-hint { display: none; }
}

/* Pile e righe */
.stack > * + * { margin-top: var(--stack, 16px); }
.stack-sm { --stack: 8px; }
.stack-lg { --stack: 24px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, 10px); }
ul.cluster,
ol.cluster,
.list-reset { margin: 0; padding: 0; list-style: none; }


/* 6. Pulsanti
   Un solo testo per l'azione principale: «Richiedi il colloquio gratuito».
   Il pulsante blu non sta mai direttamente sul gradiente (lì va in una card bianca).
   -------------------------------------------------------------------------- */
.btn {
  --h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 8px 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-wrap: balance;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--dur), box-shadow var(--dur), color var(--dur), transform .15s;
}
.btn .i { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.btn-blue { background: var(--blue); color: #fff; box-shadow: var(--shadow-btn); }
.btn-blue:hover { background: var(--blue-hover); color: #fff; }

.btn-outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-outline:hover { color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn-outline .i { color: var(--teal); }
.btn-outline:hover .i { color: var(--blue); }

/* Su fondo scuro o sul gradiente */
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .62); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.btn-white { background: #fff; color: var(--deep); box-shadow: 0 12px 26px -14px #03193c99; }
.btn-white:hover { color: var(--blue); }
.btn-white .i { color: var(--teal); }
/* Anello bianco del pulsante dell'header sopra l'hero */
.btn-ring { box-shadow: 0 0 0 2px #fff9, 0 12px 26px -12px #03193c99; }

.btn-sm { --h: 44px; padding: 6px 18px; font-size: 15px; }
.btn-sm .i { width: 18px; height: 18px; }
.btn-lg { --h: 56px; padding: 8px 28px; font-size: 17px; }
@media (min-width: 1000px) {
  .btn-lg { --h: 60px; }
}
.btn-block { display: flex; width: 100%; }
@media (max-width: 599.98px) {
  .btn-block-mobile { display: flex; width: 100%; }
}

/* Pulsante testuale (Continua, Modifica, Cosa succede dopo?) */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-text:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }
.btn-text .i { width: 18px; height: 18px; }
.btn-text--light,
.on-dark .btn-text,
.bg-deep .btn-text,
.bg-deep-2 .btn-text,
.bg-grad .btn-text { color: #fff; }
.on-dark .card .btn-text,
.bg-deep .card .btn-text,
.bg-grad .card .btn-text { color: var(--blue); }
.btn-text--muted { color: var(--ink-2); font-weight: 500; }

/* Pulsante tondo con sola icona (chiudi) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur);
}
.icon-btn .i { width: 22px; height: 22px; }
.icon-btn--soft { background: var(--air); }

/* Stati */
.btn[disabled],
.btn[aria-disabled="true"] { opacity: .7; cursor: not-allowed; transform: none; }
.btn-blue[disabled],
.btn-blue[aria-disabled="true"] { box-shadow: none; }
.btn.is-loading { cursor: progress; }
.btn.is-loading::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vv-spin .8s linear infinite;
}
.btn-outline.is-loading::before,
.btn-white.is-loading::before { border-color: #1463ff40; border-top-color: var(--blue); }
@keyframes vv-spin { to { transform: rotate(360deg); } }

/* Gruppi di pulsanti */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Due pulsanti affiancati se c'è spazio (almeno 260 px ciascuno), altrimenti uno sotto l'altro */
.btn-pair { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.btn-pair--start { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), max-content)); }
.btn-note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.bg-deep .btn-note,
.bg-grad .btn-note { color: #fff; }


/* 7. Scelte
   Le opzioni del quiz sono veri input radio o checkbox (opacità 0 sopra tutta la card).
   Nell'hero e nella CTA finale sono link <a class="opt opt--tile"> con .is-selected.
   -------------------------------------------------------------------------- */
.opt-list { display: grid; gap: 10px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt-sep { height: 1px; margin: 2px 0; background: var(--line); border: 0; }

.opt {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.opt-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.opt-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 60px;
  padding: 12px 44px 12px 14px;
  border-radius: var(--r-md);
  background: var(--opt-bg);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .15s, background-color .15s, transform .15s var(--ease);
}
.opt-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal);
  transition: background-color .15s, color .15s;
}
.opt-icon .i { width: 22px; height: 22px; }
.opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-label { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.opt-detail { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.opt-mark {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--mark);
  transition: background-color .15s, box-shadow .15s, transform .15s var(--ease);
}
.opt-input[type="checkbox"] + .opt-body .opt-mark { border-radius: 6px; }

@media (hover: hover) {
  .opt:hover .opt-body { box-shadow: inset 0 0 0 1.5px var(--line-2); }
}
.opt:active .opt-body { transform: scale(.992); }

/* Focus da tastiera */
.opt-input:focus-visible + .opt-body,
a.opt:focus-visible .opt-body { outline: 3px solid var(--focus); outline-offset: 2px; }
a.opt:focus-visible { outline: none; }

/* Selezionata */
.opt-input:checked + .opt-body,
.opt.is-selected .opt-body {
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 3px #1463ff1f;
}
.opt-input:checked + .opt-body .opt-icon,
.opt.is-selected .opt-icon { background: #fff; color: var(--blue); }
.opt-input:checked + .opt-body .opt-mark,
.opt.is-selected .opt-mark {
  background: var(--blue) var(--ico-check-white) center / 12px no-repeat;
  box-shadow: none;
}

/* Disattivata */
.opt-input:disabled { cursor: not-allowed; }
.opt-input:disabled + .opt-body { opacity: .5; box-shadow: inset 0 0 0 1.5px var(--line); transform: none; }

/* Gruppo con errore */
[aria-invalid="true"] .opt-body { box-shadow: inset 0 0 0 1.5px var(--error-line); }
[aria-invalid="true"] .opt-input:checked + .opt-body { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 3px #1463ff1f; }

/* Variante a riquadro (griglia 2x2 «Per chi» dell'hero e della CTA finale) */
.opt--tile .opt-body {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  padding: 12px;
}
.opt--tile .opt-icon { width: 34px; height: 34px; }
.opt--tile .opt-label { font-size: 15.5px; line-height: 1.25; }
.opt--tile .opt-mark {
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  transform: scale(.6);
}
.opt--tile.is-selected .opt-mark,
.opt--tile .opt-input:checked + .opt-body .opt-mark { opacity: 1; transform: none; background-size: 11px; }
/* Sotto i 400 px riquadri più compatti: le 4 opzioni dell'hero restano sopra la piega (specifica 2.11) */
@media (max-width: 399.98px) {
  .opt--tile .opt-body { gap: 4px; padding: 10px 11px; }
  .opt--tile .opt-icon { width: 30px; height: 30px; }
  .opt--tile .opt-icon .i { width: 20px; height: 20px; }
}
@media (hover: hover) {
  .opt--tile:hover .opt-body {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1.5px var(--line-2), 0 12px 22px -18px #062f5280;
  }
}

/* Riga «Per lavoro: logopedisti, insegnanti, medici» sotto la griglia */
.opt-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 6px;
  padding: 8px 4px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 450;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
}
.opt-link .i { width: 18px; height: 18px; color: var(--teal); }
.opt-link .i:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .15s var(--ease); }
.opt-link:hover { color: var(--ink); }
.opt-link:hover .i:last-child { transform: translateX(2px); }
.opt-link--sep { border-top: 1px solid var(--line); border-radius: 0; padding-top: 10px; }

/* Pillole: legame, canale, fasce orarie (input veri) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pill { position: relative; display: inline-flex; min-width: 0; cursor: pointer; }
.pills--grid .pill { display: flex; }
.pills--grid .pill > span { padding: 6px 12px; border-radius: var(--r-md); }
.pill > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pill > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 15.5px;
  font-weight: 550;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  transition: box-shadow .15s, background-color .15s;
}
.pill > span::before {
  content: "";
  flex: none;
  width: 0;
  height: 16px;
  margin-right: 0;
  background: var(--ico-check-blue) center / 16px no-repeat;
  opacity: 0;
  transition: width .15s var(--ease), margin .15s var(--ease), opacity .15s;
}
.pill > span .i { width: 18px; height: 18px; margin-right: 8px; color: var(--teal); }
.pill > span small { margin-left: 6px; font-size: 13.5px; font-weight: 400; color: var(--muted); }
@media (hover: hover) {
  .pill:hover > span { box-shadow: inset 0 0 0 1.5px var(--line-2); }
}
.pill > input:checked + span { background: var(--blue-tint); box-shadow: inset 0 0 0 2px var(--blue); }
.pill > input:checked + span::before { width: 16px; margin-right: 6px; opacity: 1; }
.pill > input:checked + span .i { color: var(--blue); }
.pill > input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.pill > input:disabled { cursor: not-allowed; }
.pill > input:disabled + span { opacity: .5; }
[aria-invalid="true"] .pill > span { box-shadow: inset 0 0 0 1.5px var(--error-line); }

/* Scorciatoie (province): pulsanti, senza spunta */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-btn-bg);
  box-shadow: inset 0 0 0 1px var(--pill-btn-ring, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}
@media (hover: hover) {
  .pill-btn:hover { background: var(--pill-btn-hover, #e2eef8); box-shadow: inset 0 0 0 1px var(--pill-btn-ring-hover, transparent); }
}

/* Pillole statiche (città) e pillole del riepilogo */
.pill--static {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tags .btn-text { font-size: 14.5px; }


/* 8. Campi del modulo
   -------------------------------------------------------------------------- */
.field { display: block; min-width: 0; }
.field + .field,
.fields-2 + .field,
.field + .fields-2 { margin-top: 18px; }
.label,
.field > label,
.field-legend {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.field-legend { font-size: 16px; }
.label-note { font-weight: 400; color: var(--muted); }

.input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--mark);          /* 3:1 sul bianco e su --field (WCAG 1.4.11) */
  border-radius: var(--r-field);
  background-color: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 17px;          /* sotto i 16px iPhone ingrandisce la pagina */
  font-weight: 400;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
@media (hover: hover) {
  .input:hover { border-color: var(--muted); }
}
.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--blue);
  background-color: #fff;
  box-shadow: inset 0 0 0 .5px var(--blue), 0 0 0 4px #1463ff26;
}
.input[aria-invalid="true"] { border-color: var(--error); background-color: #fff7f8; }
.input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 .5px var(--error), 0 0 0 4px #c2274024; }
.input.is-valid,
.input[data-valid="true"] {
  padding-right: 46px;
  background-image: var(--ico-check-teal);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
.input:disabled,
.input[readonly] { color: var(--ink-2); background-color: #f1f5f9; cursor: default; }
.input[readonly]:focus { box-shadow: none; border-color: var(--mark); }

select.input {
  padding-right: 42px;
  background-image: var(--ico-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}
select.input:invalid,
select.input.is-empty { color: var(--placeholder); }
select.input option { color: var(--ink); }

textarea.input {
  height: auto;
  min-height: 104px;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
}

/* Telefono: prefisso + numero */
.tel-group { display: flex; gap: 8px; }
.tel-group select.input {
  flex: none;
  width: 96px;
  padding: 0 28px 0 12px;
  background-position: right 8px center;
  background-size: 16px;
}
.tel-group .input:not(select) { flex: 1; min-width: 0; }

/* Nome e cognome affiancati da 360 px */
.fields-2 { display: grid; gap: 18px 12px; }
.fields-2 > .field { margin-top: 0; }
@media (min-width: 360px) {
  .fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Testi sotto il campo */
.help { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.field-error {
  position: relative;
  margin-top: 6px;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--error);
}
.field-error > .i { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; }
.field-echo { margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--teal-ink); }
.field-suggest { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.field-suggest .btn-text { margin-left: 2px; }
.field-counter { display: block; margin-top: 6px; font-size: 13px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Consensi: riga intera cliccabile */
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.check > input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--mark);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s, border-color .15s;
}
.check > input:checked { border-color: var(--blue); background: var(--blue) var(--ico-check-white) center / 14px no-repeat; }
.check > input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.check > input[aria-invalid="true"] { border-color: var(--error); background-color: #fff7f8; }
.check a { color: var(--ink); font-weight: 500; }
.checks-group > .check + .check { margin-top: 2px; }

/* Avvisi del modulo */
.alert-error,
.alert-info {
  position: relative;
  padding: 12px 14px 12px 44px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
}
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-info { background: var(--teal-light); color: var(--teal-ink); }
.alert-error > .i,
.alert-info > .i { position: absolute; top: 13px; left: 14px; width: 20px; height: 20px; }

/* Campo provincia con suggerimenti (role=combobox) */
.combo { position: relative; }
.combo-list {
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--r-field);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  max-height: calc(6 * 48px + 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.combo--overlay .combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; }
.combo-opt {
  display: block;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}
.combo-opt mark { background: none; color: inherit; font-weight: 650; }
.combo-opt.is-active,
.combo-opt[aria-selected="true"] { background: var(--blue-tint); }
.combo-empty { min-height: 48px; padding: 13px 16px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.combo-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Card della sede più vicina (passo «dove» del quiz) */
.sede-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--teal-light);
  color: var(--ink);
}
.sede-card > .i { grid-row: span 9; width: 22px; height: 22px; margin-top: 1px; color: var(--teal); }
.sede-card-title { font-size: 17px; font-weight: 640; line-height: 1.35; }
.sede-card-addr { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.sede-card p:not(.sede-card-title):not(.sede-card-addr) { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }


/* 9. Card, note, citazioni, badge, chip, bollini, riscontri, toast
   -------------------------------------------------------------------------- */
.card {
  --card-pad: 20px;
  position: relative;
  padding: var(--card-pad);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
  /* dentro una card tornano i valori dei fondi chiari */
  --focus: var(--blue);
  --opt-bg: var(--field);
  --pill-btn-bg: var(--air);
  --pill-btn-ring: transparent;
  --pill-btn-hover: #e2eef8;
  --pill-btn-ring-hover: transparent;
  --fact-bg: var(--air);
  --quote-bg: var(--air);
}
@media (min-width: 1000px) {
  .card { --card-pad: 28px; }
}
.card--grad { border-radius: var(--r-xl); box-shadow: var(--shadow-grad); }
.card--xl { border-radius: var(--r-xl); }
.card--line { box-shadow: inset 0 0 0 1.5px var(--line); }
.card--flat { box-shadow: none; }
.card--air { background: var(--air); box-shadow: none; --opt-bg: #fff; --quote-bg: #fff; }
.card--tight { --card-pad: 18px; }
.card--fase {
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-step);
}
.card--fase.is-featured {
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 2px var(--blue), var(--shadow-step-blue);
}
.card-title { font-size: 19px; font-weight: 640; line-height: 1.25; letter-spacing: -.015em; }
.card-q { margin-top: 6px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.card-title + .card-q { margin-top: 14px; }
.card > * + .opt-grid,
.card-q + .opt-grid,
.card-q + .opt-list { margin-top: 12px; }
.card-foot { margin-top: 14px; }
/* Striscia in cima alla card (richiesta a metà, richiesta inviata) */
.card-strip .btn-text { color: var(--blue-hover); }   /* blu su --blue-tint sarebbe 4,35:1 */
.card-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 16px;
  padding: 6px var(--card-pad);
  min-height: 52px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: var(--blue-tint);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}


/* Riquadri informativi */
.note {
  position: relative;
  padding: 14px 16px 14px 50px;      /* spazio per l'icona; senza icona: .note--plain */
  border-radius: var(--r-sm);
  background: var(--blue-tint);
  box-shadow: inset 4px 0 0 var(--blue);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.note--plain { padding-left: 18px; }
.note > .i { position: absolute; top: 15px; left: 18px; width: 20px; height: 20px; color: var(--blue); }
.note--teal { background: var(--teal-light); box-shadow: inset 4px 0 0 var(--teal); }
.note--teal > .i { color: var(--teal); }
.note--lg { padding: 20px 20px 20px 58px; font-size: 16px; }
.note--lg.note--plain { padding-left: 22px; }
.note--lg > .i { top: 21px; left: 22px; width: 24px; height: 24px; }
.note-title { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 640; line-height: 1.35; color: var(--ink); }
.note p + p { margin-top: 6px; }

/* Citazioni (le virgolette «» sono nel testo) */
.quote {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--quote-bg);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--ink);
}
.quote-by,
.quote cite { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.quote--sm { padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.quote--sm .quote-by { font-size: 13.5px; }
.quote .stars { display: flex; margin-bottom: 6px; }

/* Badge (pillole piccole) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  white-space: nowrap;
}
.badge .i { width: 14px; height: 14px; }
.badge--soft { background: var(--blue-tint); color: var(--blue-hover); }   /* «adesso»: blu scuro per il contrasto AA */
.badge--teal { background: var(--teal-light); color: var(--teal-ink); }
.badge--white { background: #fff; color: var(--deep); }
.badge--grad { background: var(--on-grad); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

/* Chip informativi (non cliccabili) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.chip .i { width: 16px; height: 16px; }
.chip--line { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.chip--hero {
  gap: 8px;
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--on-grad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
  color: #fff;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.25;
}
.chip--hero .i { width: 18px; height: 18px; color: var(--mint); }

/* Eyebrow a pillola dell'hero */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--on-grad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.kicker::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px #bdf4fa33;
}

/* Icona in bollino */
.bollino {
  --b: 44px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--b);
  height: var(--b);
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal);
}
.bollino .i { width: calc(var(--b) * .5); height: calc(var(--b) * .5); }
.bollino--sm { --b: 32px; }
.bollino--lg { --b: 56px; }
.bollino--xl { --b: 72px; }
.bollino--blob { border-radius: var(--blob-1); }
.bollino--blob-2 { border-radius: var(--blob-2); }
.bollino--blue { background: var(--blue-tint); color: var(--blue); }
.bollino--solid { background: var(--teal); color: #fff; }
.bollino--grad { background: var(--grad); color: #fff; }
.bollino--deep { background: var(--deep); color: #fff; }
.bollino--white { background: #fff; color: var(--teal); box-shadow: var(--shadow-sm); }
.bollino--glass { background: rgba(255, 255, 255, .18); color: #fff; }
.bollino--solid .i,
.bollino--grad .i { stroke-width: 2.4px; }

/* Riscontro del quiz e righe di rassicurazione */
.feedback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.feedback .i { width: 16px; height: 16px; stroke-width: 2.2px; }
.reassure { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: var(--muted); }
.reassure > li { position: relative; padding-left: 24px; }
.reassure > li > .i { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; color: var(--teal); }
/* Riga con icona a sinistra; il testo può contenere link e span (anche data-verifica) */
.icon-row { position: relative; padding-left: 30px; }
.icon-row > .i { position: absolute; top: .18em; left: 0; width: 20px; height: 20px; color: var(--teal); }
.icon-row.small,
.icon-row.tiny { padding-left: 24px; }
.icon-row.small > .i,
.icon-row.tiny > .i { top: .12em; width: 16px; height: 16px; }
.icon-row .btn-text,
.field-suggest .btn-text { margin-block: -12px; vertical-align: middle; }

/* Elenco con spunte (thank you) ed elenco puntato */
.checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.checks > li { position: relative; min-height: 28px; padding-left: 40px; font-size: 16.5px; line-height: 1.5; }
.checks > li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--blob-1);
  background: var(--teal) var(--ico-check-white) center / 15px no-repeat;
}
.list-dots { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.list-dots > li { position: relative; padding-left: 18px; }
.list-dots > li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* Avviso breve in basso (Numero copiato.) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 95;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 16px 36px -16px #03193ccc;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity var(--dur), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--dur), transform var(--dur) var(--ease); }
.sticky-on .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }


/* 10. Fascia loghi
   Su mobile: riga 1 intera, riga 2 in due metà, riga 3 intera; da 1180 px una fascia sola.
   Loghi a colori (specifica 2.5.6). .logos--mono e .logos--scroll sono varianti facoltative.
   -------------------------------------------------------------------------- */
.logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logos-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 0;
}
.logos-group + .logos-group { border-top: 1px solid var(--line); }
.logos-group--full { grid-column: 1 / -1; }
.logos-group--half { padding-right: 12px; }
.logos-group--half + .logos-group--half { padding-left: 12px; padding-right: 0; border-left: 1px solid var(--line); }
.logos-label {
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}
.logos-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.logos-group--half .logos-list { gap: 12px 14px; }
.logos-list > li { display: flex; align-items: center; min-width: 0; }
.logos-list img { width: auto; max-width: 100%; height: var(--lh, 36px); }
/* Altezze di ogni logo (specifica 3.3): mobile e da 1000 px */
[data-logo="unisr"] { --lh: 34px; --lh-d: 42px; }
[data-logo="cnpl"] { --lh: 44px; --lh-d: 52px; }
[data-logo="cattolica"] { --lh: 44px; --lh-d: 52px; }
[data-logo="cmr-fisios"] { --lh: 22px; --lh-d: 32px; }
[data-logo="zetesis"] { --lh: 28px; --lh-d: 38px; }
[data-logo="fondazione-filarete"] { --lh: 28px; --lh-d: 38px; }
[data-logo="wylab"] { --lh: 24px; --lh-d: 32px; }
[data-logo="fondazione-social-venture-gda"] { --lh: 34px; --lh-d: 42px; }
[data-logo="unione-europea"] { --lh: 36px; --lh-d: 44px; }
[data-logo="opes-italia"] { --lh: 30px; --lh-d: 38px; }
[data-logo="sefea-impact"] { --lh: 32px; --lh-d: 40px; }
@media (min-width: 1000px) {
  .logos-list img { height: var(--lh-d, var(--lh, 40px)); }
  .logos-group { padding: 20px 0; }
}
/* Tra 1000 e 1179 px: due righe da due gruppi, separatori verticali dentro la riga */
@media (min-width: 1000px) and (max-width: 1179.98px) {
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-group,
  .logos-group--full,
  .logos-group--half,
  .logos-group--half + .logos-group--half { grid-column: auto; padding: 20px 0; border-left: 0; }
  .logos-group:nth-child(odd) { padding-right: 32px; }
  .logos-group:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
  .logos-group:nth-child(-n+2) { border-top: 0; }
  .logos-group:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (min-width: 1180px) {
  .logos { display: flex; justify-content: space-between; gap: 0; }
  .logos-group,
  .logos-group--half,
  .logos-group--half + .logos-group--half { flex: 0 1 auto; padding: 4px 26px; border-top: 0; }
  .logos-group:first-child { padding-left: 0; }
  .logos-group:last-child { padding-right: 0; }
  .logos-group + .logos-group { border-top: 0; border-left: 1px solid var(--line); }
  .logos-list,
  .logos-group--half .logos-list { flex-wrap: nowrap; gap: 18px 20px; }
}
/* Variante: loghi in scala di grigi che prendono colore al passaggio (solo dove c'è il mouse) */
.logos--mono img { filter: grayscale(1); opacity: .68; transition: filter .3s, opacity .3s; }
@media (hover: hover) {
  .logos--mono li:hover img { filter: none; opacity: 1; }
}
@media (hover: none) {
  .logos--mono img { filter: none; opacity: 1; }
}
/* Variante: su mobile i gruppi in una riga che scorre di lato (solo la riga, mai la pagina) */
@media (max-width: 759.98px) {
  .logos--scroll {
    display: flex;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .logos--scroll::-webkit-scrollbar { display: none; }
  .logos--scroll .logos-group,
  .logos--scroll .logos-group--half,
  .logos--scroll .logos-group--half + .logos-group--half {
    flex: none;
    padding: 12px 22px;
    border-top: 0;
    scroll-snap-align: start;
  }
  .logos--scroll .logos-group:first-child { padding-left: 0; }
  .logos--scroll .logos-group + .logos-group { border-left: 1px solid var(--line); }
  .logos--scroll .logos-list { flex-wrap: nowrap; }
}


/* 11. Video: facciata YouTube (miniatura locale, l'iframe nasce solo al tocco)
   -------------------------------------------------------------------------- */
.video { min-width: 0; margin: 0; }
.yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: var(--r-organic);
  overflow: hidden;
  isolation: isolate;
  background: var(--grad);
  color: #fff;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.yt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--yt-pos, 50% 50%);
  transform: scale(var(--yt-zoom, 1));
  transform-origin: var(--yt-origin, 50% 50%);
}
.yt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* più scuro in basso della webinar: le miniature hanno il logo in basso a sinistra, sotto la didascalia */
  background: linear-gradient(180deg, #03163000 38%, #0316308c 66%, #031630e6 100%);
}
.yt-play {
  /* in basso a destra, in riga con la didascalia: al centro copriva il volto (occhi e bocca) in 3 storie su 5 */
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, #1463ff 0%, #22c4e6 100%);
  color: #fff;
  box-shadow: 0 12px 30px -8px #00000080;
  transition: transform .2s var(--ease);
}
.yt-play .i { width: 22px; height: 22px; margin-left: 3px; }
.yt-cap { position: absolute; left: 14px; right: 80px; bottom: 14px; z-index: 2; }
.yt-cap b { display: block; font-size: 17px; font-weight: 640; line-height: 1.3; color: #fff; }
.yt-cap span { display: block; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.yt-dur {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--on-grad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.yt:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) {
  .yt:hover .yt-play { transform: scale(1.06); }
}
@media (hover: hover) and (min-width: 760px) {
  .video:hover .yt:not(.yt--placeholder) { transform: translateY(-4px); box-shadow: 0 24px 40px -26px #03193cb3; }
}
.yt-frase { margin-top: 12px; padding: 0 4px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.bg-deep .yt-frase,
.bg-deep-2 .yt-frase { color: rgba(255, 255, 255, .85); }
.bg-grad .yt-frase { color: #fff; }

/* Ritagli per video (specifica 3.6), controllati con gli screenshot del 12/10:
   Luca e Stefano: la parte bassa con il logo bianco resta fuori (sotto la didascalia si leggeva male).
   Annaclaudia: fuori il cartello a sinistra (con un claim vietato) e la scritta in basso a destra.
   Massimiliano e Martina: metà sinistra della miniatura doppia (un volto solo, nitido, senza il logo
   in basso e senza la riga che divide le inquadrature); a destra Martina è sfocata e tagliata. */
.yt[data-slug="luca"],
.yt[data-slug="stefano17"] { --yt-zoom: 1.36; --yt-origin: 50% 0%; }
.yt[data-slug="annaclaudia"] { --yt-pos: 100% 50%; --yt-zoom: 1.45; --yt-origin: 100% 28%; }
.yt[data-slug="massimiliano"],
.yt[data-slug="martina"] { --yt-pos: 0% 50%; --yt-zoom: 1.85; --yt-origin: 0% 40%; }
.yt[data-slug="giovanni"] { --yt-pos: 50% 26%; }

/* Variante verticale 9:16 (video delle ads, con copertina) */
.yt--vertical { aspect-ratio: 9 / 16; border-radius: 24px 24px 28px 20px; }
.yt--vertical .yt-play { right: 12px; bottom: 12px; }
.yt--vertical .yt-cap { left: 12px; right: 12px; bottom: 12px; }
.yt--vertical .yt-cap b { font-size: 15.5px; }
.yt--vertical .yt-cap span { font-size: 13px; }
.video-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) {
  .video-pair { grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); gap: 22px; }
}

/* Segnaposto di un video che non abbiamo ancora (si vede solo con ?verifica=1) */
.yt--placeholder { cursor: default; background: linear-gradient(165deg, #1c76a5 0%, #0d4572 55%, #062f52 100%); }
.yt--placeholder::after { background: linear-gradient(#03163000 50%, #031630b3 100%); }
.yt--placeholder .yt-play { opacity: .45; }
.yt-ph {
  position: absolute;
  top: 16px;
  left: 14px;
  right: 14px;
  z-index: 2;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}
.yt-ph-initial {
  display: block;
  margin-bottom: 8px;
  font-size: 46px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(189, 244, 250, .55);
}
@supports (-webkit-text-stroke: 1px #000) {
  .yt-ph-initial { color: transparent; -webkit-text-stroke: 1.3px rgba(189, 244, 250, .85); }
}

/* Riquadro con il player (stessa misura della facciata: nessun salto di layout) */
.yt-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-organic);
  overflow: hidden;
  background: #000;
}
.yt-frame--vertical { aspect-ratio: 9 / 16; border-radius: 24px 24px 28px 20px; }
.yt-frame::before,
.vmodal-player::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vv-spin .8s linear infinite;
}
.yt-frame iframe,
.vmodal-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .3s;
}
.yt-frame.is-loaded iframe,
.vmodal-player.is-loaded iframe { opacity: 1; }
.yt-frame.is-loaded::before,
.vmodal-player.is-loaded::before { display: none; }

/* Modal del video (landing) */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--deep-2);              /* su mobile a tutto schermo, fondo pieno */
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur), visibility 0s linear var(--dur);
  --focus: #fff;
}
.vmodal.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur); }
.vmodal-panel {
  position: relative;
  width: 100%;
  max-height: 100%;
  padding: 64px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(12px);
  transition: transform var(--dur) var(--ease);
}
.vmodal.is-open .vmodal-panel { transform: none; }
.vmodal-close { position: absolute; top: 10px; right: 10px; color: #fff; }
@media (hover: hover) {
  .vmodal-close:hover { background: rgba(255, 255, 255, .12); }
}
.vmodal-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.vmodal-title { margin-top: 18px; font-size: 20px; font-weight: 640; line-height: 1.3; color: #fff; }
.vmodal-role { margin-top: 2px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.vmodal-frase { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: #fff; }
.vmodal-actions { display: grid; gap: 6px; margin-top: 20px; }
.vmodal-actions .btn-text { justify-self: center; color: #fff; }
@media (min-width: 760px) {
  .vmodal { padding: 24px; background: rgba(4, 31, 56, .86); }
  .vmodal-panel { max-width: 960px; padding: 60px 0 8px; }
  .vmodal-close { top: 6px; right: -6px; }
  .vmodal-actions { grid-template-columns: max-content max-content; align-items: center; gap: 16px; }
}


/* 12. Recensioni, persone, profili, numeri, volti
   -------------------------------------------------------------------------- */
.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.review-head { display: flex; align-items: center; gap: 12px; }
.review-initials {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
}
.review-name { font-size: 15.5px; font-weight: 640; line-height: 1.3; }
.review-meta { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.review-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .i { width: 16px; height: 16px; stroke: #d39b00; stroke-width: .8px; }
.stars--sm .i { width: 14px; height: 14px; }

/* Griglia dell'équipe */
.person-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.person { min-width: 0; text-align: center; }
.person img {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 4px var(--teal-light);   /* stesso anello dei profili: le foto con fondo bianco non spariscono */
}
.person-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.person-role {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media (max-width: 999.98px) {
  .person-grid.is-collapsed > :nth-child(n+7) { display: none; }
}
@media (min-width: 760px) {
  .person-role { -webkit-hyphens: manual; hyphens: manual; }
}
@media (min-width: 760px) {
  .person-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .person-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
}

/* Profilo (fondatore, Direttore Sanitario, tutor) */
.profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: center; }
.profile-body { grid-column: 1 / -1; margin-top: 12px; }
@media (min-width: 600px) {
  .profile { align-items: start; }
  .profile-body { grid-column: 2; margin-top: 8px; }
  .profile-head { padding-top: 4px; }
}
.profile-body > .creds:first-child,
.profile-body > .profile-text:first-child { margin-top: 0; }
.profile-photo {
  width: var(--ph, 72px);
  height: var(--ph, 72px);
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 4px var(--teal-light);
}
.profile--lg { --ph: 80px; }
@media (min-width: 600px) {
  .profile--lg { --ph: 96px; }
}
.profile-name { font-size: 18px; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; }
.profile-role { margin-top: 3px; font-size: 15px; font-weight: 550; line-height: 1.4; color: var(--teal-ink); }
.profile-text { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.creds { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.creds > li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.creds > li > .i { position: absolute; top: 1px; left: 0; width: 18px; height: 18px; color: var(--teal); }

/* Card del fondatore: foto 4:3 sopra, da 760 px foto a sinistra e testo a destra */
.founder-card { display: grid; gap: 18px; }
.founder-photo { margin: 0; }
.founder-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--r-lg);
  background: var(--teal-light);
}
@media (min-width: 760px) {
  .founder-card { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: center; }
  .founder-photo img { aspect-ratio: 1 / 1; }
}
/* citazione e pulsante del video sotto foto e testo, a tutta larghezza della card */
.founder-foot { margin-top: 18px; }
.founder-foot > * + * { margin-top: 14px; }

/* Numeri */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.facts > li { min-width: 0; padding: 16px; border-radius: var(--r-fact); background: var(--fact-bg); }
.facts b {
  display: block;
  font-size: 30px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.facts span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Riga della ricerca con logo */
.research { display: flex; align-items: center; gap: 14px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.research img { flex: none; width: auto; height: 28px; }

/* Volti tondi sovrapposti (decorativi, sfondo CSS ritagliato dalla miniatura) */
.faces { display: flex; align-items: center; gap: 12px; }
.faces-stack { display: flex; flex: none; }
.face {
  flex: none;
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--teal-light);
  background-repeat: no-repeat;
  background-size: var(--face-size, 360%) auto;
}
.face + .face { margin-left: -10px; }
.face--luca { background-image: url("../img/video/luca.webp"); background-position: 66% 18%; }
.face--annaclaudia { background-image: url("../img/video/annaclaudia.webp"); background-position: 46% 12%; }
.face--stefano17 { --face-size: 280%; background-image: url("../img/video/stefano-17.webp"); background-position: 39% 0%; }
.faces-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* 13. Domande frequenti: <details> e <summary>, funzionano anche senza JavaScript
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 2px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary .i { width: 22px; height: 22px; color: var(--teal); transition: transform var(--dur) var(--ease); }
.faq-item[open] > summary .i { transform: rotate(180deg); }
@media (hover: hover) {
  .faq-item > summary:hover { color: var(--teal-ink); }
}
.faq-item > summary:focus-visible { outline-offset: 2px; }
.faq-body { max-width: 40em; padding: 0 2px 18px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.faq-body > * + * { margin-top: 10px; }
.faq-body .list-dots > li + li { margin-top: 0; }
/* Apertura morbida dove il browser la supporta */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      height: 0;
      overflow: clip;
      transition: height .22s var(--ease), content-visibility .22s allow-discrete;
    }
    .faq-item[open]::details-content { height: auto; }
  }
}
.address-list { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; }
.address-list > li { position: relative; padding-left: 24px; }
.address-list > li > .i { position: absolute; top: 4px; left: 0; width: 16px; height: 16px; color: var(--teal); }


/* 14. Tappe, timeline, avanzamento
   Markup: <ol class="steps"><li [class="is-done|is-current|is-next"]>
             <span class="step-num">1</span><div class="step-body">...</div></li></ol>
   -------------------------------------------------------------------------- */
.steps { display: grid; margin: 0; padding: 0; list-style: none; }
.steps > li { position: relative; display: flex; gap: 14px; padding-bottom: 24px; }
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 6px;
  left: 19px;
  width: 2px;
  border-radius: 2px;
  background: var(--line-2);
}
.steps > li:last-child::before { content: none; }
.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.step-body { flex: 1; min-width: 0; padding-top: 8px; }
.step-body--card { padding-top: 0; }
.step-title { font-size: 17px; font-weight: 640; line-height: 1.35; }
.step-title .badge { margin-left: 6px; vertical-align: 2px; }
.step-text { margin-top: 2px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.step-text + .step-text { margin-top: 6px; }

/* Stati (pannello del quiz, thank you) */
.steps > li.is-done .step-num { background: var(--teal) var(--ico-check-white) center / 18px no-repeat; color: transparent; }
.steps > li.is-done::before { background: var(--teal); }
.steps > li.is-current .step-num { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 3px var(--blue); }
.steps > li.is-next .step-num { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* Su fondo scuro (CTA finale): cerchi scuri trasparenti, cifra bianca (contrasto AA) */
.steps--on-dark > li::before { background: rgba(255, 255, 255, .32); }
.steps--on-dark .step-num { background: var(--on-grad); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.steps--on-dark .step-body { padding-top: 9px; }
.steps--on-dark .step-title { font-size: 16px; font-weight: 600; color: #fff; }
.steps--on-dark .step-text { color: #fff; }
.steps--tight > li { padding-bottom: 14px; }
.steps--tight > li::before { top: 44px; bottom: 4px; }

/* In riga da 1000 px (Come funziona, CTA finale) */
@media (min-width: 1000px) {
  .steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 24px; }
  .steps--row > li { flex-direction: column; gap: 16px; padding-bottom: 0; }
  .steps--row > li::before { top: 19px; right: -12px; bottom: auto; left: 52px; width: auto; height: 2px; }
  .steps--row > li:last-child::before { content: none; }
  .steps--row .step-body { padding-top: 0; }
  /* card della stessa altezza nella riga */
  .steps--row .step-body--card { display: flex; flex-direction: column; }
  .steps--row .step-body--card > .card { flex: 1; }
}

/* Tappe compatte in una riga: 1 Richiesta · 2 Contatto della segreteria · 3 Colloquio gratuito */
.steps.steps--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}
.steps.steps--compact > li { display: inline-flex; align-items: center; gap: 8px; padding: 0; }
.steps.steps--compact > li::before { content: none; }
.steps.steps--compact > li + li::before {
  content: "";
  position: static;
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: var(--ico-arrow-line) center / 14px no-repeat;
}
.steps.steps--compact > li + li.is-done::before { background: var(--ico-arrow-line) center / 14px no-repeat; }
.steps.steps--compact > li > .step-num { width: auto; height: auto; background: none; color: inherit; font-size: inherit; font-weight: 600; box-shadow: none; }
.steps.steps--compact > li.is-current { color: var(--blue-hover); font-weight: 600; }
.steps.steps--compact > li.is-done { color: var(--teal-ink); }
/* Sui telefoni la riga andava a capo con la freccia sola all'inizio della seconda riga:
   tre colonne affiancate, il numero sopra l'etichetta, senza frecce */
@media (max-width: 479.98px) {
  .steps.steps--compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .steps.steps--compact > li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .steps.steps--compact > li + li::before { content: none; }
}

/* Barra di avanzamento a segmenti (quiz) */
.progress { display: flex; gap: 4px; }
.progress > span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); transition: background-color .3s; }
.progress > span.is-done { background: var(--teal); }
.progress > span.is-current { background: var(--blue); }


/* 15. Header, footer, barra fissa, barra del quiz, pannello dal basso
   -------------------------------------------------------------------------- */
.site-header {
  --logo-h: 28px;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.brand { position: relative; display: block; flex: none; line-height: 0; }
.brand img { width: auto; height: var(--logo-h); transition: opacity .25s; }
.brand .brand-white { position: absolute; top: 0; left: 0; opacity: 0; }
@media (min-width: 1000px) {
  .site-header { --logo-h: 36px; }
}
/* Quiz e thank you: header bianco, logo più piccolo */
.site-header--solid { --logo-h: 24px; }
@media (min-width: 1000px) {
  .site-header--solid { --logo-h: 32px; }
}
/* Landing: fisso, trasparente sopra l'hero con il logo bianco, bianco dopo 24 px di scorrimento */
.site-header--overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color .25s, box-shadow .25s;
}
.site-header--overlay:not(.is-scrolled) .brand-white { opacity: 1; }
.site-header--overlay:not(.is-scrolled) .brand-color { opacity: 0; }
.site-header--overlay.is-scrolled { background: rgba(255, 255, 255, .96); box-shadow: 0 8px 24px -20px #062f5280; }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .site-header--overlay.is-scrolled {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}
/* Pulsante dell'header: solo da 1000 px e solo quando la card #richiesta è uscita dallo schermo */
.header-cta { display: none; }
@media (min-width: 1000px) {
  .header-cta { display: inline-flex; }
  .js .header-cta[data-header-cta] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .js .is-cta-on .header-cta[data-header-cta] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur), transform var(--dur) var(--ease);
  }
}
.site-header--overlay:not(.is-scrolled) .header-cta.btn-blue { box-shadow: 0 0 0 2px #fff9, 0 12px 26px -12px #03193c99; }
/* Header del quiz: Indietro, logo al centro, passo */
.header-inner--center { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.header-start { display: flex; align-items: center; justify-self: start; min-width: 0; }
.header-end { display: flex; align-items: center; justify-self: end; gap: 12px; min-width: 0; }
@media (min-width: 1000px) {
  .header-inner--center { display: flex; }
  .header-inner--center > .header-start:empty,
  .header-inner--center > .header-start.only-mobile { display: none; }
}
.header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: -6px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
}
.header-back .i { width: 20px; height: 20px; }
.header-back.is-hidden { visibility: hidden; }
@media (hover: hover) {
  .header-back:hover { background: var(--air); }
}
.header-meta { font-size: 13.5px; line-height: 1.3; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Footer */
.site-footer {
  padding: 48px 0;
  background: var(--deep-2);
  color: rgba(255, 255, 255, .75);
  font-size: 14.5px;
  line-height: 1.55;
  --focus: #fff;
}
.site-footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.site-footer a:hover { text-decoration-color: #fff; }
.footer-grid { display: grid; gap: 28px; }
.footer-logo { width: auto; height: 32px; }
.footer-desc { max-width: 32em; margin-top: 16px; color: rgba(255, 255, 255, .85); }
.footer-legal { max-width: 40em; margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.footer-title { margin-bottom: 4px; font-size: 15px; font-weight: 600; color: #fff; }
.footer-contacts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.footer-contacts a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.footer-contacts a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.footer-contacts .i { width: 18px; height: 18px; color: var(--mint); }
.footer-cell { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.footer-contacts .footer-wa { gap: 6px; font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.footer-contacts .footer-wa .i { width: 16px; height: 16px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: rgba(255, 255, 255, .9); }
.footer-links .i { width: 14px; height: 14px; opacity: .8; }
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}
/* Spazio per la barra fissa su mobile (landing) */
@media (max-width: 999.98px) {
  body.has-sticky-cta .site-footer,
  .site-footer--sticky-space { padding-bottom: calc(48px + var(--sticky-space) + env(safe-area-inset-bottom)); }
}

/* Barra fissa con il pulsante su mobile (landing): compare quando la card #richiesta esce dallo schermo */
.sticky-cta,
.quiz-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -1px 0 var(--line), 0 -10px 30px -18px #062f5273;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .sticky-cta,
  .quiz-bar {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}
.sticky-cta {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform var(--dur) var(--ease); }
.sticky-cta .btn { --h: 48px; display: flex; width: 100%; }
.sticky-cta-inner,
.quiz-bar-inner { max-width: 560px; margin-inline: auto; }
@media (min-width: 1000px) {
  .sticky-cta { display: none; }
}
/* Barra «Avanti» del quiz (il JS del quiz la mostra o la nasconde con hidden) */
.quiz-bar { padding-block: 12px calc(12px + env(safe-area-inset-bottom)); }
.quiz-bar .btn { --h: 56px; display: flex; width: 100%; }
.has-quiz-bar { padding-bottom: 96px; }

/* Pannello dal basso (mobile): role=dialog, si apre con VV.overlay */
.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 31, 56, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, visibility 0s linear .22s;
}
.sheet.is-open { opacity: 1; visibility: visible; transition: opacity .22s; }
.sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  max-height: 80dvh;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 -20px 50px -20px #03193c80;
  transform: translateY(100%);
  transition: transform .22s var(--ease);
  --focus: var(--blue);
}
.sheet.is-open .sheet-panel { transform: none; }
.sheet.is-dragging .sheet-panel { transition: none; }
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -20px;
  padding: 22px 12px 10px 20px;
  background: #fff;
  touch-action: none;
}
.sheet-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: var(--line-2);
}
.sheet-title { padding-top: 8px; font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; }
.sheet-body { padding-top: 6px; }
.sheet-foot { margin-top: 20px; }

/* Pagina bloccata sotto un modal o un pannello */
.vv-locked body { overflow: hidden; }


/* 16. Onde, blob, foto organiche
   Onda: <svg class="wave wave--bottom wave--white" viewBox="0 0 1440 80" preserveAspectRatio="none" ...>
   Il colore è quello della sezione che segue (in basso) o che precede (in alto).
   -------------------------------------------------------------------------- */
.wave {
  position: absolute;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: var(--wave-h);
  pointer-events: none;
}
.wave--bottom { bottom: -1px; }
.wave--top { top: -1px; transform: scaleY(-1); }
.wave--hero { height: 56px; }
@media (min-width: 1000px) {
  .wave--hero { height: 96px; }
}
.wave--white { color: #fff; }
.wave--air { color: var(--air); }
.wave--deep { color: var(--deep); }
.wave--deep-2 { color: var(--deep-2); }
.wave--teal-light { color: var(--teal-light); }

.blob {
  --size: 420px;
  position: absolute;
  z-index: 0;
  width: var(--size);
  height: calc(var(--size) * .92);
  border-radius: var(--blob-1);
  background: var(--blob-bg, #ffffff12);
  pointer-events: none;
}
.blob--2 { border-radius: var(--blob-2); }
.blob--3 { border-radius: var(--blob-3); }
.blob--white { --blob-bg: #ffffff12; }
.blob--mint { --blob-bg: #bdf4fa1f; }
.blob--aqua { --blob-bg: #22c4e61a; }
.blob--teal { --blob-bg: var(--teal-light); }
.blob--air { --blob-bg: var(--air); }

/* Foto in forma di blob con alone dietro (hero desktop, card di Giovanni) */
.photo-blob { position: relative; }
.photo-blob::before {
  content: "";
  position: absolute;
  inset: -12px -16px -8px -10px;
  border-radius: var(--blob-2);
  background: #bdf4fa38;
}
.photo-blob img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--blob-1);
  box-shadow: 0 26px 50px -24px #03193c99;
}
.photo-blob--on-light::before { background: var(--teal-light); }
/* Foto con angoli organici leggeri e didascalia */
.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--r-photo); object-fit: cover; box-shadow: 0 30px 60px -34px #062f5280; }
.photo figcaption { position: relative; margin-top: 12px; padding: 0 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.photo figcaption.has-icon { padding-left: 30px; }
.photo figcaption > .i { position: absolute; top: 1px; left: 4px; width: 18px; height: 18px; color: var(--teal); }


/* 17. Blocco «pa-pa-pa... parola» (dalla landing webinar, testi impersonali)
   -------------------------------------------------------------------------- */
.iceberg {
  position: relative;
  padding: 24px;
  border-radius: var(--r-xl);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (min-width: 1000px) {
  .iceberg { padding: 28px; }
}
.ice-top { padding-bottom: 22px; }
.ice-label { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.ice-sound {
  margin-top: 6px;
  font-size: clamp(26px, 7.6vw, 54px);   /* la frase sta sempre su una riga dentro la card */
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--blue);
}
@supports (-webkit-text-stroke: 1px #000) {
  .ice-sound { color: transparent; -webkit-text-stroke: 1.4px var(--blue); }
}
@supports (font-size: 1cqi) {
  .iceberg { container-type: inline-size; }
  .ice-sound { font-size: min(54px, 11.2cqi); }
}
/* Sillabe: ferme e leggibili finché il blocco non entra nello schermo (landing.js aggiunge .is-playing).
   Poi due cicli in meno di 5 secondi (WCAG 2.2.2) e alla fine «parola» resta visibile. */
.stutter-syllable { display: inline-block; }
.stutter-word { display: inline-block; }
.ice-sound.is-playing .stutter-syllable { animation: vv-stutter-beat 2.4s ease-in-out 2; }
.ice-sound.is-playing .stutter-syllable:nth-child(2) { animation-delay: 80ms; }
.ice-sound.is-playing .stutter-syllable:nth-child(3) { animation-delay: .16s; }
.ice-sound.is-playing .stutter-word { animation: vv-stutter-reveal 4.8s ease-in-out both; }
@keyframes vv-stutter-beat {
  0%, 25%, 100% { opacity: 1; transform: translateX(0); }
  8%, 18% { opacity: .65; transform: translateX(-1.5px); }
  13% { opacity: 1; transform: translateX(1.5px); }
}
@keyframes vv-stutter-reveal {
  0%, 23% { opacity: 0; transform: translateX(-5px); }
  35%, 60% { opacity: 1; transform: translateX(0); }
  73% { opacity: 0; transform: translateX(-5px); }
  85%, 100% { opacity: 1; transform: translateX(0); }
}
.ice-bottom { margin: 0 -24px -24px; padding: 22px 24px 24px; border-top: 2px dashed #7ccbd6; background: var(--teal-light); }
@media (min-width: 1000px) {
  .ice-bottom { margin: 0 -28px -28px; padding: 24px 28px 28px; }
}
.ice-list { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.ice-list > li { display: grid; gap: 2px; }
.ice-list b { font-size: 17px; font-weight: 640; line-height: 1.35; color: var(--teal-ink); }
.ice-list span { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 521px) {
  .ice-list > li { grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; gap: 12px; }
}


/* 18. Utility
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.text-muted { color: var(--muted); }
.text-ink-2 { color: var(--ink-2); }
.text-white { color: #fff; }
.w-100 { width: 100%; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.mx-auto { margin-inline: auto; }
@media (max-width: 999.98px) {
  .only-desktop { display: none !important; }
}
@media (min-width: 1000px) {
  .only-mobile { display: none !important; }
}
/* Elementi visibili solo in modalità verifica (per esempio i segnaposto dei video da esportare) */
html:not(.vv-verifica):not(.is-verifica) .solo-verifica { display: none !important; }


/* 19. Varianti di target
   html[data-target] è impostato nel <head> prima del CSS (script in assets/partials/head.html).
   data-only accetta più valori separati da spazio: "default", "genitori", "adulti".
   Le classi v-base, v-genitori, v-adulti, v-no-adulti della specifica (sezione 4.2) funzionano allo stesso modo.
   -------------------------------------------------------------------------- */
html:not([data-target="genitori"]):not([data-target="adulti"]) [data-only]:not([data-only~="default"]):not([data-only~="base"]),
html[data-target="genitori"] [data-only]:not([data-only~="genitori"]),
html[data-target="adulti"] [data-only]:not([data-only~="adulti"]) { display: none !important; }

html:not([data-target="genitori"]):not([data-target="adulti"]) .v-genitori,
html:not([data-target="genitori"]):not([data-target="adulti"]) .v-adulti,
html[data-target="genitori"] .v-base,
html[data-target="genitori"] .v-adulti,
html[data-target="adulti"] .v-base,
html[data-target="adulti"] .v-genitori,
html[data-target="adulti"] .v-no-adulti { display: none !important; }


/* 20. Modalità verifica (?verifica=1)
   Contorno giallo e motivo in un'etichetta su ogni [data-verifica];
   bordo tratteggiato e chiave su ogni [data-config]. Il contatore lo crea common.js.
   -------------------------------------------------------------------------- */
:where(html.vv-verifica, html.is-verifica),
:where(html.vv-verifica, html.is-verifica) body { overflow-x: hidden; }
:where(html.vv-verifica, html.is-verifica) :where([data-verifica], [data-config]) { position: relative; }
html.vv-verifica [data-verifica],
html.is-verifica [data-verifica] {
  outline: 3px dashed var(--verifica);
  outline-offset: 3px;
  background-color: rgba(255, 210, 63, .16);
  border-radius: 4px;
}
html.vv-verifica [data-verifica]::after,
html.is-verifica [data-verifica]::after {
  content: attr(data-verifica);
  position: absolute;
  top: 100%;
  left: var(--vv-lab-x, 0px);   /* spostamento calcolato da common.js: l'etichetta resta dentro lo schermo */
  right: auto;
  z-index: var(--z-verifica);
  display: block;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--verifica);
  color: var(--verifica-ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
  font: 600 12px/1.35 var(--font);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
html.vv-verifica [data-verifica].vv-lab-r::after,
html.is-verifica [data-verifica].vv-lab-r::after { left: auto; right: 0; }
html.vv-verifica [data-verifica].vv-lab-up::after,
html.is-verifica [data-verifica].vv-lab-up::after { top: auto; bottom: 100%; margin: 0 0 6px; }
html.vv-verifica [data-config],
html.is-verifica [data-config] { outline: 2px dashed var(--teal-ink); outline-offset: 2px; }
html.vv-verifica [data-config]::before,
html.is-verifica [data-config]::before {
  content: "CONFIG " attr(data-config);
  position: absolute;
  bottom: 100%;
  left: var(--vv-lab-x, 0px);
  z-index: var(--z-verifica);
  width: max-content;
  max-width: min(240px, calc(100vw - 32px));
  margin-bottom: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--teal-ink);
  color: #fff;
  font: 600 11px/1.3 var(--mono);
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
html.vv-verifica [data-config].vv-lab-r::before,
html.is-verifica [data-config].vv-lab-r::before { left: auto; right: 0; }
/* Gruppi con più frasi CONFIG (fasce orarie): una sola etichetta sul gruppo, nelle pillole solo «[da compilare]» */
html.vv-verifica [data-config-gruppo],
html.is-verifica [data-config-gruppo] { position: relative; outline: 2px dashed var(--teal-ink); outline-offset: 4px; }
html.vv-verifica [data-config-gruppo]::before,
html.is-verifica [data-config-gruppo]::before {
  content: "CONFIG " attr(data-config-gruppo) ": orari accanto alle pillole";
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: var(--z-verifica);
  width: max-content;
  max-width: min(240px, calc(100vw - 32px));
  margin-bottom: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--teal-ink);
  color: #fff;
  font: 600 11px/1.3 var(--mono);
  pointer-events: none;
}
html.vv-verifica [data-config-gruppo] [data-config],
html.is-verifica [data-config-gruppo] [data-config] { outline: 0; }
html.vv-verifica [data-config-gruppo] [data-config]::before,
html.is-verifica [data-config-gruppo] [data-config]::before { content: none; }
/* Nei caroselli (scorrono di lato e tagliano in basso) e nella griglia dei numeri (etichette vicine che si
   coprirebbero) l'etichetta va sotto l'elemento, nel flusso della pagina */
html.vv-verifica .scroller [data-verifica]::after,
html.is-verifica .scroller [data-verifica]::after,
html.vv-verifica .facts [data-verifica]::after,
html.is-verifica .facts [data-verifica]::after { position: static; width: auto; max-width: none; margin-top: 8px; }
/* Domande frequenti con l'apertura animata (::details-content con overflow: clip): l'etichetta dell'ultimo
   elemento della risposta non resta tagliata */
html.vv-verifica .faq-item[open]::details-content { overflow: visible; }
html.is-verifica .faq-item[open]::details-content { overflow: visible; }
.vv-config-ph { color: var(--teal-ink); font-weight: 600; background: #e6f6f8; border-radius: 4px; padding: 0 4px; white-space: normal; overflow-wrap: anywhere; }
.bg-grad .vv-config-ph,
.bg-deep .vv-config-ph,
.site-footer .vv-config-ph { color: var(--deep); }
html.vv-verifica .vv-verifica-focus,
html.is-verifica .vv-verifica-focus { outline: 4px solid #ff7a00 !important; outline-offset: 4px; animation: vv-verifica-pulse 1s ease-out 2; }
@keyframes vv-verifica-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 122, 0, .55); }
  100% { box-shadow: 0 0 0 18px rgba(255, 122, 0, 0); }
}

/* Contatore e elenco (creati da common.js) */
.vv-check {
  position: fixed;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: var(--z-verifica);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  font-family: var(--font);
  --focus: var(--ink);
}
.sticky-on .vv-check { bottom: calc(76px + env(safe-area-inset-bottom)); }
.vv-check-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--verifica);
  color: var(--verifica-ink);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(36, 26, 0, .15);
  font: 650 13.5px/1.2 var(--font);
  cursor: pointer;
}
.vv-check-btn b { font-weight: 760; font-variant-numeric: tabular-nums; }
.vv-check-btn--list { padding: 0 14px; background: #fff; color: var(--ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line); }
.vv-check-pos { font-weight: 500; opacity: .8; }
.vv-check-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(66px + env(safe-area-inset-bottom));
  max-width: 440px;
  max-height: min(62vh, 560px);
  padding: 14px;
  overflow-y: auto;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(3, 25, 60, .55), 0 0 0 1px var(--line);
  font-size: 13.5px;
  line-height: 1.4;
}
.sticky-on .vv-check-panel { bottom: calc(130px + env(safe-area-inset-bottom)); }
.vv-check-h { margin: 6px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vv-check-panel ol,
.vv-check-panel ul { display: grid; gap: 2px; margin: 0 0 12px; padding: 0; list-style: none; }
.vv-check-panel button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vv-check-panel button:hover { background: var(--air); }
.vv-check-panel b { font-weight: 700; }
.vv-check-panel em { color: var(--muted); font-weight: 400; }
.vv-check-panel .vv-cfg { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; }
.vv-check-panel .vv-cfg code { font: 600 12px/1.4 var(--mono); color: var(--teal-ink); }


/* 21. Movimento ridotto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .stutter-syllable,
  .stutter-word { animation: none !important; opacity: 1; transform: none; }
}