/* ============================================================
   dottnicoladelbianco.com — v3 «Petali di luce»
   Token, base, componenti, sezioni della home, pagine interne.
   Regola: lo stato FINALE è nel CSS; le animazioni partono da JS
   (html.js) e sono disattivate con prefers-reduced-motion o
   html[data-motion="reduce"].
   ============================================================ */

/* W4: i caratteri stanno sul sito (dist/fonts): nessuna richiesta a Google. File variabili con licenza OFL (le licenze sono accanto ai file).
   Il gruppo latin-ext del testo si scarica solo se una pagina o il modulo contengono lettere straniere (un cognome rumeno o polacco). */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/montserrat-v31-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/montserrat-v31-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/atkinson-next-v7-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/atkinson-next-v7-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* W3b: caratteri di riserva con le misure di quelli veri: quando arrivano quelli veri il testo non salta */
@font-face { font-family: "Testo Riserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 99.58%; }
@font-face { font-family: "Titoli Riserva"; src: local("Arial Bold"), local("Arial"), local("Roboto"); size-adjust: 111.62%; ascent-override: 86.73%; descent-override: 22.49%; line-gap-override: 0%; }
:root {
  --navy-900: #0e1838; --navy-800: #152452; --navy-700: #1b326c; --navy-600: #213e82;
  --navy-500: #254898; --blu-400: #2b54b0; --blu-300: #5f84cf; --blu-200: #a9bfe8;
  --blu-100: #dbe5f7; --blu-50: #eef3fb; --sabbia: #f7f3ec; --crema: #f6f1e8;
  --oro: #d9a441; --verde: #1f7a5a; --bianco: #fff; --wa: #1a7a43;
  --bg: #ffffff; --fg: #152452;
  --display: "Montserrat", "Titoli Riserva", "Helvetica Neue", Arial, sans-serif;
  --testo: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Testo Riserva", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs: clamp(1.25rem, 1.1rem + .5vw, 1.375rem);
  --h1: clamp(2.6rem, 1.9rem + 3.6vw, 5.4rem);
  --h2: clamp(2rem, 1.55rem + 1.9vw, 3.3rem);
  --h3: clamp(1.45rem, 1.3rem + .6vw, 1.8rem);
  --wrap: 1180px; --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
  --r-petalo: 48px 8px 48px 8px; --r: 18px;
  --ombra: 0 10px 30px rgba(21, 36, 82, .10), 0 2px 6px rgba(21, 36, 82, .06);
  --ombra-alta: 0 24px 60px rgba(21, 36, 82, .18);
  /* --top-h = altezza vera dell'intestazione: site.js la misura (cambia con il testo ingrandito); questi sono i valori di partenza.
     --top-min = altezza minima della riga dell'intestazione (separata, così la misura non si somma a se stessa) */
  --top-h: 84px; --top-min: 84px;
  /* sempre chiaro: niente inversione automatica dei colori (modalità scura forzata di Chrome Android, Samsung Internet) */
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html[data-motion="reduce"] { scroll-behavior: auto; }
body {
  margin: 0; font-family: var(--testo); font-size: var(--fs); line-height: 1.6;
  color: var(--fg); background: var(--bg); overflow-x: hidden; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* C9: una parola che da sola non sta nella riga (testo del browser ingrandito, telefono piccolo) va a capo invece di
     essere tagliata dal bordo dello schermo; le parole che ci stanno non cambiano */
  overflow-wrap: break-word;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--navy-600); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--blu-400); } }
:focus-visible { outline: 3px solid var(--blu-400); outline-offset: 3px; border-radius: 6px; }
/* sui fondi navy l'anello è oro (il blu avrebbe 2,1:1); dentro il modulo bianco torna blu (l'oro sul bianco avrebbe 2,2:1) */
.scuro :focus-visible, .cta-fine :focus-visible, .piede-sito :focus-visible { outline-color: var(--oro); }
.scuro .form :focus-visible { outline-color: var(--blu-400); }
[tabindex="-1"]:focus { outline: none; }
/* telefono e tablet: l'elemento col fuoco non finisce sotto la barra fissa in basso */
@media (max-width: 1000px) { html { scroll-padding-bottom: 104px; } }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
/* C9: titoli al massimo il 12% (h1) e il 10% (h2) della larghezza: con il testo del browser al 150% «Metatarsalgia»,
   «Parliamone», «all'intervento» restano dentro il telefono; con il testo normale da 375 px in su non cambia nulla */
h1 { font-size: min(var(--h1), 12vw); font-weight: 800; }
h2 { font-size: min(var(--h2), 10vw); }
h3 { font-size: var(--h3); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
ul, ol { padding-left: 1.3em; }
li { margin: .35em 0; }
strong { font-weight: 700; }
small { font-size: .9em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 820px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 1000; background: var(--navy-800); color: #fff; padding: 12px 18px; border-radius: 10px; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.occhiello { font-family: var(--testo); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: max(.78em, 16px); color: var(--blu-400); margin: 0 0 .9em; display: flex; align-items: center; gap: .6em; }
.occhiello::before { content: ""; width: 14px; height: 14px; background: var(--blu-400); border-radius: 14px 2px 14px 2px; flex: none; }
[data-fg="#f6f1e8"] .occhiello, .scuro .occhiello { color: var(--oro); }
[data-fg="#f6f1e8"] .occhiello::before, .scuro .occhiello::before { background: var(--oro); }
.lead { font-size: 1.15em; max-width: 56ch; }
.centro { text-align: center; }
.centro p { margin-inline: auto; }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 58px; padding: 14px 30px; border-radius: 999px; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 2px solid transparent; line-height: 1.2;
  transition: transform .25s, box-shadow .25s, background-color .25s, color .25s;
}
/* P11.4 (C9): livello grafico fisso solo per i pulsanti «magnetici» (si muovono con il mouse sul computer), non per
   tutti i 17 pulsanti della home */
.btn--magnet { will-change: transform; }
.btn svg { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.btn-primary { background: var(--navy-500); color: #fff; box-shadow: 0 8px 22px rgba(37, 72, 152, .28); }
.btn-primary:focus-visible { background: var(--blu-400); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(43, 84, 176, .32); }
@media (hover: hover) { .btn-primary:hover { background: var(--blu-400); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(43, 84, 176, .32); } }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 22px rgba(31, 138, 76, .28); }
.btn-wa:focus-visible { background: #146436; color: #fff; transform: translateY(-2px); }
@media (hover: hover) { .btn-wa:hover { background: #146436; color: #fff; transform: translateY(-2px); } }
.btn-ghost { background: transparent; color: var(--navy-800); border-color: currentColor; }
.btn-ghost:focus-visible { background: var(--navy-800); color: #fff; }
@media (hover: hover) { .btn-ghost:hover { background: var(--navy-800); color: #fff; } }
.scuro .btn-ghost, [data-fg="#f6f1e8"] .btn-ghost { color: var(--crema); }
@media (hover: hover) { .scuro .btn-ghost:hover, [data-fg="#f6f1e8"] .btn-ghost:hover { background: var(--crema); color: var(--navy-800); } }
.btn-oro { background: var(--oro); color: var(--navy-900); }
.btn-oro:focus-visible { background: #e6b65a; color: var(--navy-900); transform: translateY(-2px); }
@media (hover: hover) { .btn-oro:hover { background: #e6b65a; color: var(--navy-900); transform: translateY(-2px); } }
.btn-wide { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.4em 0 .6em; }
/* link di testo (P07.1, per tutti i .textlink): sottolineati come testo, così quando vanno a capo la riga segue le
   parole e la freccia resta attaccata all'ultima parola (prima, in inline-flex, la sottolineatura prendeva tutta la
   colonna e la freccia restava sola sul bordo); lo spazio sopra e sotto non sposta le righe ma li rende alti almeno
   44 px da toccare (prima 34-37 px) */
.textlink { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; padding-block: 10px; }
.textlink svg { display: inline; width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.2em; margin-left: .3em; transition: transform .25s; }
@media (hover: hover) { .textlink:hover svg { transform: translateX(4px); } }

/* ---------- header ---------- */
/* P11.4 (C9): niente backdrop-filter (con lo sfondo quasi opaco la sfocatura si notava appena, ma il telefono la ricalcolava
   a ogni fotogramma di scorrimento sopra video e canvas); sfondo bianco pieno perché senza sfocatura testi e foto che
   scorrono sotto si intravedrebbero (provato: al 97% si leggono ancora, fino a 8 livelli su 255) */
.top { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid rgba(21, 36, 82, .08); }
.top__in { display: flex; align-items: center; gap: 20px; min-height: var(--top-min); }
.logo { display: block; flex: none; }
.logo img { height: 56px; width: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a { display: block; padding: 12px 11px; font-weight: 700; text-decoration: none; color: var(--navy-800); border-radius: 12px; font-size: .92em; white-space: nowrap; }
.nav a[aria-current="page"] { background: var(--blu-50); color: var(--navy-500); }
@media (hover: hover) { .nav a:hover { background: var(--blu-50); color: var(--navy-500); } }
.top__cta { min-height: 50px; padding: 10px 22px; white-space: nowrap; }
.burger { display: none; margin-left: auto; min-height: 50px; padding: 8px 14px; font: inherit; font-weight: 700; background: var(--navy-800); color: #fff; border: 0; border-radius: 12px; cursor: pointer; align-items: center; gap: 8px; }
.burger::before { content: ""; width: 22px; height: 2px; background: #fff; box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; }
/* P06.4: menu aperto, le tre linee diventano una X (coerente con la scritta «Chiudi») */
.burger { position: relative; }
.burger[aria-expanded="true"]::before { height: 3px; box-shadow: none; transform: rotate(45deg); }
.burger[aria-expanded="true"]::after { content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 3px; margin-top: -1.5px; background: #fff; transform: rotate(-45deg); }
/* voci solo nel menu a tendina (Domande frequenti, «Riduci le animazioni», i capitoli della home) */
.nav .solo-tel { display: none; }
.progresso { position: fixed; left: 0; top: 0; height: 4px; width: 100%; background: var(--oro); transform-origin: 0 50%; transform: scaleX(0); z-index: 70; pointer-events: none; }
.no-js .progresso, html[data-motion="reduce"] .progresso { display: none; }

@media (max-width: 1260px) {
  .nav li:first-child { display: none; }
  .nav a { padding: 12px 9px; font-size: .88em; }
  .top__cta { padding: 10px 16px; font-size: .9em; }
}
@media (max-width: 1000px) {
  :root { --top-h: 72px; --top-min: 72px; }
  /* P06.4: logo più grande (il nome del Dottore a circa 11 px invece di 9), intestazione sempre 72 px */
  .logo img { height: 54px; }
  .top__cta { display: none; }
  .burger { display: inline-flex; }
  /* ADDENDUM C10: il menu non supera lo schermo (telefono in orizzontale, testo ingrandito) e scorre al suo interno */
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid rgba(21, 36, 82, .1); box-shadow: var(--ombra); display: none; padding: 10px var(--gutter) 18px; max-height: calc(100vh - var(--top-h)); max-height: calc(100svh - var(--top-h)); max-height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 64px; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav a { padding: 16px 14px; font-size: 1.05em; }
  /* P06.4: nel menu a tendina anche «Home» e le voci solo-tel */
  .nav li:first-child, .nav .solo-tel { display: block; }
}
/* C9: sopra i 1000 px, se la riga dell'intestazione non ci sta (testo del browser ingrandito, finestra di 1001-1020 px)
   site.js mette html.menu-stretto: lo stesso menu a tendina dei telefoni (COPIA delle regole del blocco max-width: 1000px
   qui sopra: chi cambia il menu dei telefoni cambi anche queste), con «Prenota una visita» che resta accanto al pulsante
   Menu (sopra i 1000 px non c'è la barra in basso); html.menu-stretto-cta la toglie solo se non ci sta neppure così.
   Le voci partono dalla colonna del contenuto (come il logo), non dal bordo dello schermo. */
html.menu-stretto .top__cta { margin-left: auto; }
html.menu-stretto-cta .top__cta { display: none; }
html.menu-stretto .burger { display: inline-flex; margin-left: 0; }
html.menu-stretto-cta .burger { margin-left: auto; }
html.menu-stretto .nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid rgba(21, 36, 82, .1); box-shadow: var(--ombra); display: none; padding: 10px max(var(--gutter), calc((100% - var(--wrap)) / 2)) 18px; max-height: calc(100vh - var(--top-h)); max-height: calc(100svh - var(--top-h)); max-height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 64px; }
html.menu-stretto .nav.open { display: block; }
html.menu-stretto .nav ul { flex-direction: column; gap: 2px; }
html.menu-stretto .nav li:first-child, html.menu-stretto .nav .solo-tel { display: block; }
html.menu-stretto .nav a { padding: 16px 14px; font-size: 1.05em; white-space: normal; }
/* sopra i 1280 px i capitoli sono già i pallini a destra: nel menu a tendina non si ripetono */
@media (min-width: 1280px) { html.menu-stretto .nav .nav__capitoli { display: none; } }
/* ADDENDUM C10: con il menu aperto la barra dei contatti in basso si nasconde (copriva le ultime voci) */
html.menu-aperto .barra-mobile { display: none; }
/* «In questa pagina» (solo nella home): i capitoli su due colonne, voci alte 48 px */
.nav__capitoli { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(21, 36, 82, .12); }
.nav__titolo { margin: 0 0 6px; padding: 0 14px; max-width: none; font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blu-400); }
.nav .nav__capitoli ul, html.menu-stretto .nav .nav__capitoli ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.nav .nav__capitoli a, html.menu-stretto .nav .nav__capitoli a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; font-size: 1em; line-height: 1.25; white-space: normal; }
/* ADDENDUM C11: «Riduci le animazioni» in fondo all'elenco del menu a tendina */
.nav .motion-toggle { display: block; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 12px 14px; font: inherit; font-size: 1em; font-weight: 700; line-height: 1.3; color: var(--navy-800); background: var(--blu-50); border: 0; border-radius: 12px; text-align: left; cursor: pointer; }
@media (hover: hover) { .nav .motion-toggle:hover { background: var(--blu-100); color: var(--navy-800); } }
/* C7: se un browser ignora «only light» e inverte i colori, il logo blu resta su un fondo bianco (stessa misura;
   il fondo sta sul link e non sull'immagine, perché gli angoli arrotondati taglierebbero il payoff del logo).
   L'intestazione diventa bianca piena, così chi ha il telefono in modalità scura non vede un riquadro intorno al logo. */
@media (prefers-color-scheme: dark) { .top { background: #fff; } .logo { background: #fff; border-radius: 10px; box-shadow: 0 0 0 5px #fff; } }

/* ---------- capitoli (nav laterale home) ---------- */
/* Solo il pallino (44 px) prende il mouse; il nome compare a sinistra al passaggio del mouse o col fuoco,
   e per il capitolo attivo solo sugli schermi larghi, dove il margine laterale lo tiene fuori dal contenuto.
   Nascosto (visibility) finché la prima schermata non è passata: così il tasto Tab non finisce su link invisibili. */
.capitoli { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 50; display: none; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s, visibility .3s; }
.capitoli.visibile, .capitoli:focus-within, html[data-motion="reduce"] .capitoli { visibility: visible; opacity: 1; pointer-events: auto; }
.capitoli ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.capitoli li { margin: 0; }
.capitoli a { position: relative; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; color: var(--navy-700); font-size: .8em; font-weight: 700; border-radius: 8px; }
.capitoli a::after { content: ""; width: 12px; height: 12px; border-radius: 12px 2px 12px 2px; background: var(--blu-300); transition: background .3s, transform .3s; flex: none; }
.capitoli a span { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; background: #fff; padding: 2px 10px; border-radius: 8px; box-shadow: var(--ombra); }
.capitoli a:focus-visible span { opacity: 1; }
@media (hover: hover) { .capitoli a:hover span { opacity: 1; } }
@media (min-width: 1680px) { .capitoli a[aria-current] span { opacity: 1; } }
.capitoli a[aria-current]::after { background: var(--oro); transform: scale(1.5); }
@media (min-width: 1280px) { .js .capitoli { display: block; } }
/* tra 1280 e 1303 px il margine laterale è stretto: i pallini si spostano verso il bordo, fuori dal contenuto */
@media (max-width: 1303px) { .capitoli { right: 4px; } }

/* ---------- sezioni ---------- */
/* P07.1: meno spazio tra le sezioni (prima 128 + 128 px sul computer) */
.sec { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.sec--stretta { padding: clamp(40px, 6vw, 80px) 0; }
.scuro { background: var(--navy-800); color: var(--crema); }
.scuro a { color: var(--blu-200); }
/* il modulo è una scheda bianca dentro la sezione scura: i suoi link tornano scuri (contrasto 10:1) */
.scuro .form a { color: var(--navy-600); text-decoration: underline; }
@media (hover: hover) { .scuro .form a:hover { color: var(--blu-400); } }
.sabbia { background: var(--sabbia); }
.cielo { background: var(--blu-50); }
/* Colori fissi per sezione (niente più cambio di colore della pagina mentre si scorre) */
.intervento, .rete, .mappa { background: #fff; }
.sabbia, .cielo, .faq details { color: var(--navy-800); }
.sabbia .textlink, .cielo .textlink { color: var(--navy-800); }
.griglia-2 { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .griglia-2 { grid-template-columns: 1fr 1fr; } .griglia-2.testo-largo { grid-template-columns: 1.15fr .85fr; } }
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.card { background: #fff; border-radius: var(--r-petalo); padding: 30px 30px 26px; box-shadow: var(--ombra); color: var(--navy-800); text-decoration: none; display: flex; flex-direction: column; gap: 10px; position: relative; transition: transform .35s, box-shadow .35s; transform-style: preserve-3d; }
a.card:focus-visible { transform: translateY(-6px); box-shadow: var(--ombra-alta); color: var(--navy-800); }
@media (hover: hover) { a.card:hover { transform: translateY(-6px); box-shadow: var(--ombra-alta); color: var(--navy-800); } }
.card h3 { margin: 0; }
.card p { margin: 0; flex: 1; }
.card .more { font-weight: 700; color: var(--blu-400); display: inline-flex; align-items: center; gap: .4em; }
.card .more svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.picto { width: 72px; height: 72px; border-radius: 24px 6px 24px 6px; background: var(--blu-50); display: grid; place-items: center; color: var(--navy-500); margin-bottom: 8px; }
.picto svg { width: 42px; height: 42px; }
.foto { border-radius: var(--r-petalo); overflow: hidden; box-shadow: var(--ombra-alta); position: relative; }
.foto img, .foto video { width: 100%; height: 100%; object-fit: cover; }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--1x1 { aspect-ratio: 1; }
.foto--3x4 { aspect-ratio: 3 / 4; }
.foto--sipario { clip-path: inset(0 0 0 0); }
.rivela { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="reduce"]) .rivela { animation: entra linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes entra { from { opacity: 0; transform: translateY(26px); } }
.petalo-bullet { list-style: none; padding: 0; }
.petalo-bullet li { position: relative; padding-left: 2em; margin: .55em 0; }
.petalo-bullet li::before { content: ""; position: absolute; left: .2em; top: .5em; width: 14px; height: 14px; background: var(--blu-400); border-radius: 14px 2px 14px 2px; }
.scuro .petalo-bullet li::before { background: var(--oro); }

/* ---------- HERO ---------- */
/* W4 (07.11.2026, idea 1 scelta da Giulio): il logo compare intero, poi i quattro petali si allargano fino a diventare lo
   schermo del video (home.js). Telefono in verticale: video a tutta larghezza, il titolo sopra su una sfumatura scura,
   testo e pulsanti sotto. Computer e telefono in orizzontale: testo a sinistra, video a destra fino al bordo e alto quanto
   la prima schermata. Senza JavaScript o senza animazioni questo è subito lo stato finale. */
.hero { position: relative; background: linear-gradient(180deg, #fff 0%, var(--sabbia) 100%); overflow: hidden; overflow: clip; }
.hero__griglia { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: calc(100svh - var(--top-h)); padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); }
.hero__testo { color: var(--navy-800); }
.hero__testo .occhiello { color: var(--blu-400); }
.hero h1 { max-width: 11ch; margin-bottom: .3em; font-size: clamp(2.7rem, 1.8rem + 3.6vw, 5.4rem); line-height: 1.02; }
/* W9: la maschera di ogni riga (SplitText, mask: 'lines') taglia solo sopra e sotto: di lato una parola più larga della riga
   restava mozzata («camminare» su schermi del computer stretti) */
.hero h1 > div { overflow: visible !important; clip-path: inset(0 -100vw 0 -.2em); }
.hero h1 em { font-style: italic; font-weight: 300; color: var(--navy-500); }
.hero .lead { font-size: 1.2em; max-width: 34ch; color: var(--navy-700); }
.hero .lead strong { color: var(--navy-800); }
.hero__tel { margin: .4em 0 0; font-size: 1em; color: var(--navy-700); }
/* P07.1: i due pulsanti, quando vanno a capo, hanno la stessa larghezza (la scritta non va mai a capo) */
.hero .cta-row .btn { flex: 1 1 260px; justify-content: center; white-space: nowrap; }
@media (min-width: 900px) { .hero .cta-row { max-width: 460px; } }
.hero__tel a { font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; margin-left: -6px; }
/* lo schermo del video: --velo è la sfumatura sotto il titolo del telefono (home.js la accende quando il video è aperto) */
.hero__schermo { --velo: 1; position: relative; overflow: hidden; }
.hero__video { position: absolute; inset: 0; background: var(--navy-800); }
.hero__video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* W5: finché il logo non si apre, il video sta sotto i quattro blu dei petali (stesso quarto di schermo di ogni petalo); home.js
   ne abbassa l'opacità (--tinta), e i colori veri arrivano mentre il logo si apre */
.hero__video::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg at 50% 50%, #254898 0 25%, #213e82 0 50%, #1b326c 0 75%, #152452 0); opacity: var(--tinta, 0); pointer-events: none; }
.hero__petali { position: absolute; left: 50%; top: 50%; width: 50%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.hero__petali path { opacity: 0; transform-box: fill-box; }
.hero__pausa { position: absolute; z-index: 2; right: 16px; bottom: 16px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 0; background: rgba(14, 24, 56, .72); color: #fff; font: inherit; font-weight: 700; font-size: .85em; line-height: 1.2; cursor: pointer; }
.hero__pausa:focus-visible { background: var(--navy-900); }
@media (hover: hover) { .hero__pausa:hover { background: var(--navy-900); } }
/* compare alla fine dei petali (home.js); con il fuoco della tastiera si vede subito; senza JavaScript non servirebbe a nulla */
.hero__pausa:focus-visible { opacity: 1 !important; outline-color: var(--oro); }
.no-js .hero__pausa { display: none; }
/* computer e telefono in orizzontale: il video a destra, dal bordo alto al bordo basso della prima schermata */
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .hero__schermo { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; }
  .hero__testo { max-width: min(600px, calc(54vw - var(--gutter) - 40px)); container-type: inline-size; }
  /* W9: «camminare» (5,9 em nel peso 800) deve stare nella colonna: il carattere segue anche la larghezza della colonna */
  .hero h1 { font-size: min(clamp(2.7rem, 1.8rem + 3.6vw, 5.4rem), 16cqi); }
}
/* telefono e tablet in verticale: il video occupa la prima schermata (resta un filo del testo sotto, per invitare a scorrere);
   il titolo sta sul video, in bianco su una sfumatura scura; testo e pulsanti sotto */
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .hero__griglia { min-height: 0; align-items: start; padding: 0 0 22px; }
  .hero__testo { display: contents; }
  .hero__schermo { grid-area: 1 / 1; margin-inline: calc(-1 * var(--gutter)); height: clamp(340px, calc(100svh - var(--top-h) - 150px), 760px); }
  .hero__schermo::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, rgba(14, 24, 56, 0), rgba(14, 24, 56, .55) 45%, rgba(14, 24, 56, .9)); opacity: var(--velo); pointer-events: none; }
  .hero__titolo { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; padding-bottom: 18px; color: #fff; }
  .hero__titolo .occhiello { color: #f1d9a6; }
  .hero h1 { max-width: 13ch; margin-bottom: 0; color: #fff; text-shadow: 0 1px 12px rgba(14, 24, 56, .5); }
  .hero h1 em { color: #dce5f7; }
  .hero .lead { margin-top: 20px; }
  .hero__pausa { top: 14px; right: 14px; bottom: auto; }
}
@media (max-width: 699px) {
  .hero .occhiello { margin-bottom: .5em; }
  .hero h1 { font-size: min(2.6rem, 11.5vw); }
  .hero .lead { font-size: 1.05em; line-height: 1.5; margin-bottom: .5em; }
  .hero .cta-row { margin-top: .7em; }
}
/* P11.4 (C9): html.attesa = solo nella home, solo con le animazioni attive e al massimo per 1,2 s (build.py,
   librerie_home): la prima schermata resta ferma finché home.js non ha preparato l'ingresso (poi toglie la classe). */
html.attesa .hero__testo > *, html.attesa .hero__video, html.attesa .hero__pausa { visibility: hidden; }
/* P11.2 (C9): senza JavaScript i loop mostrano la copertina nel <noscript> (la copertina del video la mette site.js) */
.no-js .fase__media video, .no-js .passi-statici video { display: none; }

/* ---------- MARQUEE ---------- */
.marquee { position: relative; cursor: pointer; overflow: hidden; padding: 18px 0; border-top: 1px solid rgba(21, 36, 82, .08); border-bottom: 1px solid rgba(21, 36, 82, .08); -webkit-mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent); background: #fff; }
.marquee__track { display: flex; gap: 0; width: max-content; animation: scorri 70s linear infinite; }
.marquee__track > span { padding: 0 1.4em; font-family: var(--display); font-size: 1.25em; color: var(--navy-700); white-space: nowrap; display: inline-flex; align-items: center; gap: 1.4em; }
.marquee__track > span::after { content: ""; width: 10px; height: 10px; border-radius: 10px 2px 10px 2px; background: var(--oro); }
.marquee:focus-within .marquee__track, .marquee.pausa .marquee__track { animation-play-state: paused; }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
.marquee:focus-within { -webkit-mask: none; mask: none; }
.marquee__pausa.vh:focus-visible { position: absolute !important; right: 8px; top: 50%; transform: translateY(-50%); width: auto; height: auto; clip: auto; overflow: visible; background: var(--navy-800); color: #fff; padding: 8px 14px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; min-height: 44px; outline-color: var(--oro); }
@keyframes scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee__track [aria-hidden] { display: none; } }
html[data-motion="reduce"] .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
html[data-motion="reduce"] .marquee__track [aria-hidden] { display: none; }

/* ---------- DOVE FA MALE (mappa del piede) ---------- */
.piede-griglia { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .piede-griglia { grid-template-columns: minmax(0, 640px) minmax(330px, 1fr); } .piede-col { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: center; } .piede-col .piede { max-width: 320px; } .piede-col .raddrizza { margin: 0; } }
.piede { position: relative; width: 100%; max-width: 280px; margin-inline: auto; }
@media (max-width: 959px) { .piede { max-width: 220px; } .raddrizza { margin-top: 14px; } .raddrizza__stato { margin-bottom: 10px; } .raddrizza__ai { margin: 8px 0 12px; } }
.piede svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(21, 36, 82, .12)); }
.punto { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #fff; background: var(--navy-500); color: #fff; text-decoration: none; font: inherit; font-family: var(--display); font-weight: 800; font-size: .98em; cursor: pointer; transition: transform .25s, background .25s, color .25s, box-shadow .25s; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(21, 36, 82, .3); z-index: 2; }
.punto .etichetta { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap; background: var(--navy-900); color: #fff; font-family: var(--testo); font-weight: 700; font-size: 1rem; padding: 8px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.punto:focus-visible .etichetta { opacity: 1; transform: translate(0, -50%); }
/* I numeri sono vicini: ogni etichetta va dove non copre un altro numero e resta dentro lo schermo (misurato con il
   punto acceso, cioè ingrandito, a 320, 375, 768, 960, 1024 e 1440 px): 1 e 2 sotto il punto, 3 e 4 sopra, 5 sopra e
   verso destra (sotto, sul piede piccolo). L'etichetta dell'1, vicino al bordo, va su due righe. */
.punto[data-pat="alluce-valgo"] .etichetta, .punto[data-pat="metatarsalgia"] .etichetta { left: 50%; right: auto; top: calc(100% + 12px); transform: translate(-50%, -6px); }
.punto[data-pat="alluce-valgo"] .etichetta { white-space: normal; width: max-content; max-width: 6em; text-align: center; line-height: 1.25; }
.punto[data-pat="dita-a-martello"] .etichetta, .punto[data-pat="spina-calcaneare"] .etichetta { left: 50%; right: auto; top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 6px); }
.punto[data-pat="neuroma-di-morton"] .etichetta { left: 0; right: auto; top: auto; bottom: calc(100% + 12px); transform: translate(0, 6px); }
.punto[data-pat]:focus-visible .etichetta { transform: translate(-50%, 0); }
@media (hover: hover) { .punto[data-pat]:hover .etichetta { transform: translate(-50%, 0); } }
.punto[data-pat="neuroma-di-morton"]:focus-visible .etichetta { transform: translate(0, 0); }
@media (hover: hover) { .punto[data-pat="neuroma-di-morton"]:hover .etichetta { transform: translate(0, 0); } }
@media (min-width: 960px) {
  /* piede grande nella colonna di sinistra: l'etichetta dell'1 si allunga verso destra, così non esce dallo schermo */
  .punto[data-pat="alluce-valgo"] .etichetta { transform: translate(-35%, -6px); }
  .punto[data-pat="alluce-valgo"]:focus-visible .etichetta { transform: translate(-35%, 0); }
  @media (hover: hover) { .punto[data-pat="alluce-valgo"]:hover .etichetta { transform: translate(-35%, 0); } }
}
@media (max-width: 959px) {
  /* piede piccolo (telefono e tablet): etichette lunghe su due righe; quella del 5 sotto il punto */
  .punto .etichetta { white-space: normal; width: max-content; max-width: 8em; text-align: center; line-height: 1.25; }
  .punto[data-pat="alluce-valgo"] .etichetta { max-width: 6em; }
  .punto[data-pat="neuroma-di-morton"] .etichetta { left: 50%; top: calc(100% + 16px); bottom: auto; transform: translate(-50%, -6px); }
  .punto[data-pat="neuroma-di-morton"]:focus-visible .etichetta { transform: translate(-50%, 0); }
  @media (hover: hover) { .punto[data-pat="neuroma-di-morton"]:hover .etichetta { transform: translate(-50%, 0); } }
}
.punto::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--blu-400); opacity: 0; animation: pulsa 2.2s ease-out infinite; pointer-events: none; }
@keyframes pulsa { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.punto.attivo { background: var(--oro); color: var(--navy-900); transform: scale(1.15); }
@media (hover: hover) { .punto:hover { background: var(--oro); color: var(--navy-900); transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .punto::after { animation: none; } }
html[data-motion="reduce"] .punto::after { animation: none; }
/* Elenco compatto: ogni voce apre lo stesso riquadro del numero */
.pat-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pat__testa { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; overflow-wrap: break-word; align-items: center; gap: 16px; width: 100%; text-align: left; background: #fff; border: 2px solid transparent; border-radius: 22px 6px 22px 6px; box-shadow: var(--ombra); padding: 14px 18px; font: inherit; color: var(--navy-800); text-decoration: none; cursor: pointer; min-height: 72px; transition: border-color .25s, transform .25s; }
.pat__testa.attivo { border-color: var(--blu-400); transform: translateX(4px); color: var(--navy-800); }
@media (hover: hover) { .pat__testa:hover { border-color: var(--blu-400); transform: translateX(4px); color: var(--navy-800); } }
.pat-lista .n { width: 48px; height: 48px; border-radius: 50%; background: var(--blu-50); display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--navy-500); font-size: 1.05em; transition: background .25s, color .25s; }
.pat__testa.attivo .n { background: var(--oro); color: var(--navy-900); }
@media (hover: hover) { .pat__testa:hover .n { background: var(--oro); color: var(--navy-900); } }
.pat__testa strong { display: block; font-size: 1.08em; font-family: var(--display); font-weight: 700; }
.pat__testa span.d { display: block; font-size: .9em; color: var(--navy-600); }
.piu { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--navy-500); color: var(--navy-500); display: grid; place-items: center; font-weight: 800; font-size: 1.2em; line-height: 1; }
@media (max-width: 620px) { .pat__testa { grid-template-columns: 42px minmax(0, 1fr) 28px; gap: 12px; padding: 12px 14px; } .pat-lista .n { width: 42px; height: 42px; } .pat__testa span.d { display: none; } }
/* Riquadro (dialog nativo: Esc e focus gestiti dal browser) */
.pop { border: 0; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); border-radius: 36px 10px 36px 10px; background: #fff; color: var(--navy-800); box-shadow: 0 30px 80px rgba(14, 24, 56, .35); overflow: auto; }
.pop::backdrop { background: rgba(14, 24, 56, .55); backdrop-filter: blur(3px); }
html:has(.pop[open]) { overflow: hidden; }
.pop[open] { animation: pop-entra .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes pop-entra { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .pop[open] { animation: none; } }
html[data-motion="reduce"] .pop[open] { animation: none; }
.pop__corpo { padding: clamp(26px, 4vw, 44px); }
.pop__corpo h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin-bottom: .3em; }
.pop__breve { font-size: 1.12em; color: var(--navy-600); }
.pop__corpo .cta-row { margin-bottom: 0; }
.pop__chiudi { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--blu-50); color: var(--navy-800); font-size: 1.8em; line-height: 1; cursor: pointer; }
@media (hover: hover) { .pop__chiudi:hover { background: var(--navy-800); color: #fff; } }

/* ---------- INTERVENTO IN 4 PASSI (pin + scrub) ---------- */
/* La scena fissata (pin) c'è solo quando lo schermo è largo E alto abbastanza da contenerla tutta, tasti compresi:
   è la stessa condizione «desk» di home.js, da 1001 px (ADDENDUM D7: fino a 1000 px c'è la barra fissa dei contatti,
   che coprirebbe il fondo della scena). Sotto (telefoni, tablet, portatili bassi, telefoni in orizzontale) si vedono
   le 4 schede statiche. */
.intervento__scena { display: grid; gap: 28px; align-items: center; min-height: 70vh; }
@media (min-width: 1001px) and (min-height: 700px) { .intervento__scena { grid-template-columns: 1fr 1fr; min-height: calc(100svh - var(--top-h) - 20px); } }
/* computer stretti (1001-1199 px): più spazio alla colonna del testo, così testo e tasti dei passi vanno meno a capo e la
   scena sta tutta nello schermo anche a 1001x700 */
@media (min-width: 1001px) and (max-width: 1199px) and (min-height: 700px) { .intervento__scena { grid-template-columns: 1.15fr .85fr; } }
.passi { position: relative; display: grid; }
.passo { grid-area: 1 / 1; }
/* rete di sicurezza: finché home.js non ha costruito la timeline (classe .pronta) i passi stanno uno sotto l'altro, mai sovrapposti */
.intervento__scena:not(.pronta) .passo { grid-area: auto; }
.passo__n { font-family: var(--display); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1; color: var(--navy-600); font-weight: 700; margin: 0 0 .3em; letter-spacing: .04em; }
.passo__n span { font-size: clamp(3.6rem, 2.4rem + 5vw, 7.5rem); font-weight: 800; color: #b8862b; letter-spacing: -.03em; vertical-align: -.12em; }
.passo h3 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem); }
.passo p { font-size: 1.05em; }
/* nella scena fissata il margine sotto l'ultimo paragrafo del passo era solo spazio vuoto prima della barra (23 px):
   senza, con i caratteri veri la scena sta nello schermo anche alta 700 px (verifica C4 del 05.11) */
.intervento__scena .passo > :last-child { margin-bottom: 0; }
.no-js .passo, html[data-motion="reduce"] .passo { position: static; }
.no-js .passi, html[data-motion="reduce"] .passi { display: grid; gap: 40px; }
.no-js .passo, html[data-motion="reduce"] .passo { grid-area: auto; }
.passi__media { position: relative; }
.passi__media .foto { aspect-ratio: 4 / 5; max-width: 480px; margin-inline: auto; }
.passi__media .foto > * { position: absolute; inset: 0; }
.passi__media .foto > *:not(:first-child) { opacity: 0; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.passi-statici .card .foto { margin-bottom: 12px; box-shadow: none; }
.passi-statici .passo__n { margin: 4px 0 .1em; } .passi-statici .passo__n span { font-size: 3.4rem; }
.no-js .passi__media, html[data-motion="reduce"] .passi__media { display: none; }
/* la barra (e sotto i tasti) finiscono prima della foto inserita, che entra di qualche px nella colonna (P07.1) */
.passi__barra { height: 6px; background: var(--blu-100); border-radius: 6px; margin-top: 26px; margin-right: 40px; overflow: hidden; }
.passi__barra i { display: block; height: 100%; width: 100%; background: var(--navy-500); transform-origin: 0 50%; transform: scaleX(.25); border-radius: 6px; }
/* tasti dei passi in due colonne uguali (prima 2+1+1 su tre righe di larghezze diverse), scritta a sinistra */
.passi__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; margin-right: 40px; }
/* line-height 1.25: i tasti 3 e 4, che vanno su due righe, restano compatti (con l'interlinea del testo, 1.6, erano
   alti 79 px e a 700-720 px di altezza uscivano sotto lo schermo) */
.passi__nav button { min-height: 48px; min-width: 48px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--navy-500); background: #fff; color: var(--navy-500); font: inherit; font-weight: 700; line-height: 1.25; cursor: pointer; text-align: left; }
.passi__nav button[aria-current="step"] { background: var(--navy-500); color: #fff; }
/* portatili bassi (700-800 px di altezza): tasti un po' più compatti e spazi verticali più stretti, così la scena
   fissata sta tutta nello schermo, tasto «4.» compreso (misurato a 1010x720, 1024x768, 1280x720, 1366x768) */
@media (min-width: 1001px) and (min-height: 700px) and (max-height: 800px) {
  .passi__nav { margin-top: 10px; gap: 6px; }
  .passi__nav button { font-size: .9em; padding: 6px 14px; }
  .passi__barra { margin-top: 14px; }
  .intervento__scena .passo__dato { margin-bottom: .5em; }
}
/* sotto i 740 px di altezza anche il numero oro un po' più piccolo (stesso disegno) */
@media (min-width: 1001px) and (min-height: 700px) and (max-height: 740px) { .intervento__scena .passo__n span { font-size: 4.6rem; } }
.no-js .passi__barra, .no-js .passi__nav, html[data-motion="reduce"] .passi__barra, html[data-motion="reduce"] .passi__nav { display: none; }
/* schede mai più strette di 300 px (sotto i 900) o 400 px (sopra): titoli e testi leggibili, niente colonne strettissime */
.passi-statici { display: none; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin-top: 32px; }
@media (min-width: 900px) { .passi-statici { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } }
.no-js .passi-statici, html[data-motion="reduce"] .passi-statici { display: grid; }
.no-js .intervento__scena, html[data-motion="reduce"] .intervento__scena { display: none; }
@media (max-width: 1000px), (max-height: 699px) { .intervento__scena { display: none; } .passi-statici { display: grid; } }

/* ---------- NUMERI ---------- */
.numeri { background: var(--navy-800); color: var(--crema); }
.numeri__griglia { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 620px) { .numeri__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .numeri__griglia { grid-template-columns: repeat(3, 1fr); } }
.numero { padding: 26px 24px; border-radius: var(--r-petalo); background: rgba(255, 255, 255, .05); border: 1px solid rgba(217, 164, 65, .35); }
.numero b { display: block; font-family: var(--display); font-size: clamp(2.4rem, 1.9rem + 1.8vw, 3.8rem); line-height: 1; color: var(--oro); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em; }
/* « min» in piccolo accanto alla cifra, mai sotto i 16 px (sul telefono la cifra è a 32 px) */
.numero b small { font-size: max(.45em, 16px); font-weight: 400; margin-left: .15em; }
.numero > span { display: block; margin-top: 10px; font-size: 1em; color: rgba(246, 241, 232, .9); }

/* ---------- VOCI / VIDEO FACCIATA ---------- */
.video-fac { position: relative; margin: 0; border-radius: var(--r-petalo); overflow: hidden; background: var(--navy-900); box-shadow: var(--ombra-alta); aspect-ratio: 16 / 9; }
/* larghezza sempre definita: al clic l'immagine lascia il posto al video (position: absolute) e il riquadro non deve collassare */
.video-fac.vert { aspect-ratio: 9 / 16; max-width: 360px; width: 100%; margin-inline: auto; }
/* nella griglia della pagina Video la scheda è larga quanto la colonna (al massimo 360 px, centrata come prima): con
   width: auto, tolta l'immagine al clic, il riquadro restava senza contenuto e si chiudeva a 0x0 (il video spariva) */
.video-griglia .video-fac.vert { width: 100%; }
.video-fac img { width: 100%; height: 100%; object-fit: cover; }
/* W5 (09.11.2026, Giulio: «questi pulsanti play non mi piacciono per niente»): il video parte da solo, senza audio; tutto il
   riquadro è il tasto che attiva l'audio e lo fa ripartire dall'inizio. Si vede solo l'etichetta in alto a destra (come «Pausa
   video» della prima schermata): lì il petalo ha l'angolo piccolo e in basso restano liberi i sottotitoli. */
.video-fac button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.video-fac.con-audio button { display: none; }
.video-fac__audio { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 11px; border-radius: 999px; background: rgba(14, 24, 56, .78); font-weight: 700; font-size: .92rem; line-height: 1.15; transition: background .2s; }
.video-fac__audio svg { flex: none; width: 23px; height: 23px; fill: currentColor; }
@media (hover: hover) { .video-fac button:hover .video-fac__audio { background: var(--navy-500); } }
.video-fac button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--navy-900); }
/* il video appare quando è davvero partito: fino ad allora si vede la copertina, niente riquadro nero */
.video-fac video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; opacity: 0; transition: opacity .4s; }
.video-fac.va video { opacity: 1; }
.video-voce { min-width: 0; }
.voci__griglia { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-top: 20px; align-items: start; }
.voci__video .video-fac.vert { max-width: 300px; }
/* P08.4 / ADDENDUM B1: da dove vengono le frasi e «ogni piede è diverso», sotto le voci (18 px, contrasto alto) */
.voci__nota { margin: 28px 0 0; max-width: 62ch; font-size: 18px; line-height: 1.5; color: var(--navy-700); }
/* il titolo del video sta sotto il riquadro: sul video restano solo l'etichetta dell'audio e i sottotitoli */
.video-fac__cap { margin: 14px auto 0; max-width: 300px; text-align: center; font-weight: 700; color: var(--navy-800); }
.video-voce .video-fac__cap { max-width: 360px; }
/* P07.1: le virgolette (oro) stanno sopra il testo, non sulla prima riga */
.cit { margin: 0; background: #fff; border-radius: var(--r-petalo); padding: 52px 28px 28px; box-shadow: var(--ombra); position: relative; }
.cit::before { content: "“"; position: absolute; top: 2px; left: 24px; font-family: var(--display); font-size: 4.2rem; line-height: 1; color: var(--oro); }
.cit p { position: relative; margin: 0 0 .8em; font-size: 1.05em; }
.cit footer { font-weight: 700; color: var(--navy-600); }
.tv { display: grid; gap: 20px; align-items: center; background: var(--navy-900); color: var(--crema); border-radius: var(--r-petalo); padding: 26px; margin-top: 30px; }
@media (min-width: 800px) { .tv { grid-template-columns: 1fr 1fr; } }
.tv .video-fac { box-shadow: none; }
.testate { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
.testate span { font-family: var(--display); font-weight: 600; font-size: 1.2em; color: var(--oro); }

/* ---------- MEDICO ---------- */
.medico .foto { max-width: 520px; }
.firma { height: 64px; width: auto; margin-top: 18px; opacity: .9; }
.timeline { list-style: none; padding: 0; margin: 20px 0 0; border-left: 3px solid var(--blu-200); }
.timeline li { padding: 0 0 18px 26px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -10px; top: 8px; width: 16px; height: 16px; border-radius: 16px 3px 16px 3px; background: var(--navy-500); }
.timeline b { display: block; }

/* ---------- MAPPA ITALIA ---------- */
.mappa__griglia { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .mappa__griglia { grid-template-columns: 1fr 1fr; } }
.italia { max-width: 520px; margin-inline: auto; }
.italia svg { width: 100%; height: auto; }
.italia .terra { fill: var(--blu-50); stroke: var(--blu-200); stroke-width: 1.2; }
/* P07.2: niente transform-box/transform-origin sui punti e sugli aloni: l'origine la calcola GSAP (transformOrigin
   'center') dentro la matrice; con le due regole insieme l'origine veniva applicata due volte (punti che entravano dal
   mare, aloni fuori dall'Italia) */
.italia .pin { fill: var(--navy-500); stroke: #fff; stroke-width: 2; }
.italia .pin.cli { fill: var(--oro); }
.italia .pin.sel { fill: var(--blu-400); r: 9; }
.italia .alone { fill: none; stroke: var(--navy-500); stroke-width: 1.5; opacity: 0; }
/* clinica nella stessa zona di un ambulatorio: anello oro attorno al punto blu (prima il punto oro lo copriva) */
.italia .pin.anello { fill: none; stroke: var(--oro); stroke-width: 3; }
.legenda { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; font-size: .95em; font-weight: 700; }
.legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.legenda i.anello { background: var(--navy-500); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--oro); margin: 0 10px 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--navy-800); text-decoration: none; font-weight: 700; box-shadow: var(--ombra); border: 2px solid transparent; transition: transform .25s, border-color .25s; }
.chip:focus-visible { border-color: var(--blu-400); transform: translateY(-2px); color: var(--navy-800); }
@media (hover: hover) { .chip:hover { border-color: var(--blu-400); transform: translateY(-2px); color: var(--navy-800); } }

/* ---------- FAQ ---------- */
.faq details { background: #fff; border-radius: 22px 6px 22px 6px; box-shadow: var(--ombra); margin: 0 0 14px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 64px 20px 26px; font-weight: 700; font-size: 1.08em; position: relative; min-height: 64px; display: flex; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
/* il riquadro taglia ciò che sporge (overflow: hidden): l'anello del fuoco sta dentro */
.faq summary:focus-visible, details.sapere summary:focus-visible { outline-offset: -5px; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; border-right: 3px solid var(--navy-500); border-bottom: 3px solid var(--navy-500); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details[open] summary { color: var(--navy-500); }
.faq details > div { padding: 0 26px 24px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- PRENOTA / FORM ---------- */
.prenota__griglia { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .prenota__griglia { grid-template-columns: .9fr 1.1fr; } }
@media (max-width: 959px) { .chiaro .prenota__griglia .form { order: -1; } }
.contatti-lista { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.contatti-lista a, .contatti-lista .riga { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 22px 6px 22px 6px; background: rgba(255, 255, 255, .07); color: inherit; text-decoration: none; min-height: 72px; border: 1px solid rgba(255, 255, 255, .12); transition: background .25s; }
@media (hover: hover) { .contatti-lista a:hover { background: rgba(255, 255, 255, .14); color: inherit; } }
.contatti-lista svg { width: 30px; height: 30px; fill: currentColor; flex: none; }
.contatti-lista b { display: block; font-size: 1.15em; }
.contatti-lista small { opacity: .85; }
.chiaro .contatti-lista a, .chiaro .contatti-lista .riga { background: #fff; color: var(--navy-800); border-color: transparent; box-shadow: var(--ombra); }
@media (hover: hover) { .chiaro .contatti-lista a:hover { background: var(--blu-50); } }
/* telefoni: numeri ed email un po' più piccoli e schede con meno margine interno, così «dottnicoladelbianco.com» sta su
   una riga anche a 320-360 px (l'email va a capo solo dopo la @) */
@media (max-width: 420px) { .contatti-lista b { font-size: 1.05em; } .contatti-lista a, .contatti-lista .riga { padding-inline: 14px; gap: 12px; } .contatti-lista a[href^="mailto:"] b { font-size: .95em; } }
@media (max-width: 359px) { .contatti-lista svg { width: 26px; height: 26px; } .contatti-lista a[href^="mailto:"] b { font-size: .9em; } }
/* pagina Contatti: Instagram e Facebook da soli su una riga, quindi alti almeno 44 px come gli altri link da toccare */
.social a { display: inline-flex; align-items: center; min-height: 44px; }
.form { background: #fff; color: var(--navy-800); border-radius: var(--r-petalo); padding: clamp(24px, 4vw, 40px); box-shadow: var(--ombra-alta); display: grid; gap: 16px; }
/* titolo del modulo: h3 nella home, h2 in Contatti, stesso aspetto */
.form .form-titolo { margin: 0; font-size: var(--h3); font-weight: 700; letter-spacing: -.01em; }
.form label { display: grid; gap: 6px; font-weight: 700; }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; padding: 14px 16px; border: 2px solid var(--blu-300); border-radius: 12px; background: #fff; color: var(--navy-800); min-height: 56px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blu-400); outline: 3px solid rgba(43, 84, 176, .25); outline-offset: 0; }
.form .f2 { display: grid; gap: 16px; }
@media (min-width: 620px) { .form .f2 { grid-template-columns: 1fr 1fr; } }
/* due campi affiancati: le caselle restano allineate anche se un'etichetta va su due righe («Città o zona (ad esempio
   Bari)») o se sotto un campo compare la scritta rossa (righe comuni con subgrid) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 620px) {
    .form .f2 { grid-template-rows: auto auto auto; row-gap: 0; }
    .form .f2 > label { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
  }
}
.form .consent { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-weight: 400; font-size: .95em; align-items: start; }
.form .consent input { width: 26px; height: 26px; min-height: 0; margin-top: 4px; accent-color: var(--navy-500); }
.form .hp { position: absolute; left: -9999px; }
.form-msg { margin: 0; font-weight: 700; min-height: 1.4em; scroll-margin-bottom: 110px; }
.form-msg.ok { color: var(--verde); } .form-msg.err { color: #b3261e; }
.form-msg a { color: inherit; }
/* il suggerimento nel messaggio non deve sembrare già scritto */
.form ::placeholder { color: #5b6380; font-weight: 400; font-style: italic; opacity: 1; }
.form-nota { margin: -4px 0 0; font-size: .9em; color: var(--navy-600); }
/* errori: scritta rossa sotto il campo (resta finché non lo si corregge) e bordo rosso */
.form label > .err { grid-column: 1 / -1; color: #b3261e; font-weight: 700; font-size: .92em; line-height: 1.35; }
.form [aria-invalid="true"], .form [aria-invalid="true"]:focus { border-color: #b3261e; }
.form .consent input[aria-invalid="true"] { outline: 3px solid #b3261e; outline-offset: 2px; }

/* ---------- FOOTER ---------- */
.piede-sito { background: var(--navy-900); color: var(--crema); padding: 60px 0 120px; position: relative; overflow: hidden; overflow: clip; }
.piede-sito a { color: var(--crema); overflow-wrap: normal; }
/* l'email va a capo solo dopo la @ (<wbr> in build.py), mai dentro il dominio */
.piede-sito a[href^="mailto:"] { font-size: .9em; }
/* link alti almeno 44 px (anziani, dita meno precise) */
.piede-sito li a { display: inline-block; padding: 9px 0; }
.piede-sito__griglia { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
@media (min-width: 1000px) { .piede-sito__griglia { grid-template-columns: 1fr 1.3fr 1fr 1fr; } }
/* titoli delle colonne: h2 (prima erano h4, un salto di livello) con lo stesso aspetto */
.piede-sito .piede-titolo { font-family: var(--testo); font-size: .85em; text-transform: uppercase; letter-spacing: .12em; color: var(--oro); margin-bottom: .8em; }
.piede-sito ul { list-style: none; padding: 0; margin: 0; }
.piede-sito li { margin: 0; }
.piede-sito .logo-b img { height: 64px; width: auto; }
/* P12.2: riga legale (Dott. Del Bianco e Doctor Who s.r.l. s.t.p.), 16 px, crema all'85% sul navy: contrasto 12:1 */
.legale { margin: 40px 0 0; font-size: 1rem; line-height: 1.55; color: var(--crema); opacity: .85; max-width: 78ch; }
.dw { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; font-size: .9em; color: rgba(246, 241, 232, .75); }
.dw svg { height: 28px; width: auto; }
/* il logo Doctor Who è un link: alto almeno 44 px come gli altri del piè di pagina */
.dw a { min-height: 44px; align-items: center; }
.motion-toggle { background: transparent; border: 2px solid rgba(246, 241, 232, .4); color: var(--crema); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: .9em; cursor: pointer; min-height: 44px; }
.piede-sito .petali-bg { position: absolute; right: -8vw; bottom: -14vw; width: 46vw; max-width: 560px; opacity: .08; pointer-events: none; }

/* ---------- BARRA MOBILE ---------- */
.barra-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: none; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid rgba(21, 36, 82, .12); }
.barra-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; min-width: 0; padding-inline: 4px; border-radius: 16px; text-decoration: none; font-weight: 800; font-size: clamp(16px, .85em, 18px); color: var(--navy-800); background: var(--blu-50); }
/* tre pulsanti uguali quando le parole ci stanno; se una non ci sta, quella colonna prende la larghezza della sua parola
   (minmax qui sopra). Le parole non si spezzano mai: a 320 e a 360 px diventavano «WhatsAp/p» e «Richiamam/i» */
.barra-mobile a span { white-space: nowrap; text-align: center; line-height: 1.1; }
.barra-mobile a svg { width: 24px; height: 24px; fill: currentColor; }
.barra-mobile a.b-tel { background: var(--navy-800); color: #fff; }
.barra-mobile a.b-wa { background: var(--wa); color: #fff; }
@media (max-width: 1000px) { .barra-mobile { display: grid; } .piede-sito { padding-bottom: calc(152px + env(safe-area-inset-bottom)); } }
/* telefoni: pulsanti alti 52 px (resta più schermo per la pagina); sotto i 360 px la scritta a 16 px, così le tre parole
   stanno dentro lo spazio fino a 310 px (testo mai sotto i 16 px) */
@media (max-width: 420px) { .barra-mobile a { min-height: 52px; } }
@media (max-width: 359px) { .barra-mobile { gap: 6px; padding-inline: 8px; } .barra-mobile a { font-size: 16px; } }

/* ---------- PAGINE INTERNE ---------- */
.testa { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); background: linear-gradient(180deg, var(--blu-50), #fff); }
.testa h1 { max-width: 18ch; }
.testa .lead { font-size: 1.15em; }
.briciole { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: .9em; font-weight: 700; }
.briciole li { margin: 0; }
.briciole li:not(:last-child)::after { content: "›"; margin: 0 .5em; color: var(--blu-300); }
.briciole a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.prose h2 { margin-top: 1.6em; font-size: min(clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem), 10vw); }
.prose h3 { margin-top: 1.3em; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.8em; }
.prose ul li::before { content: ""; position: absolute; left: .15em; top: .55em; width: 12px; height: 12px; background: var(--blu-400); border-radius: 12px 2px 12px 2px; }
/* P08.5: nella linea del tempo di «Il medico» il petalo sta sulla linea (la regola qui sopra lo spostava a destra) */
.prose ul.timeline li { padding-left: 26px; }
.prose ul.timeline li::before { left: -10px; top: 8px; width: 16px; height: 16px; background: var(--navy-500); border-radius: 16px 3px 16px 3px; }
.riquadro { background: var(--sabbia); border-radius: var(--r-petalo); padding: 26px 30px; border-left: 6px solid var(--oro); margin: 1.6em 0; }
.riquadro p:last-child { margin-bottom: 0; }
.avviso { background: #fff5e6; border-left-color: #e08a00; }
/* P08.4: nelle risposte delle domande frequenti numero, WhatsApp e rimandi hanno un'area da toccare più alta (il
   padding verticale di un link in linea non cambia l'interlinea e il link va a capo come il resto della frase);
   nel riquadro «Quando chiamarci subito» telefono e WhatsApp sono pulsanti grandi */
.faq details p a { padding-block: 10px; }
.avviso__bottoni { margin: 4px 0 1em; }
@media (max-width: 480px) {
  /* sul telefono il riquadro è un po' meno imbottito e i due pulsanti, larghi quanto il riquadro, stanno su una riga da 375 px in su */
  .avviso { padding: 22px 16px 22px 18px; }
  .avviso__bottoni .btn { flex: 1 1 100%; padding-inline: 14px; }
}
/* «Dove trovarlo» (Il medico): i tre social in fila, che vanno a capo senza un «·» a inizio riga */
.riquadro .social { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 8px 0 0; }
details.sapere { background: var(--blu-50); border-radius: var(--r-petalo); padding: 0; margin: 1.6em 0; }
details.sapere summary { cursor: pointer; padding: 20px 26px; font-weight: 700; font-size: 1.05em; min-height: 64px; display: flex; align-items: center; gap: 12px; }
details.sapere > div { padding: 0 26px 22px; }
/* freccia piccola a destra, come le domande frequenti: dice che il riquadro si apre */
details.sapere summary { list-style: none; position: relative; padding: 16px 64px 16px 26px; line-height: 1.3; }
details.sapere summary::-webkit-details-marker { display: none; }
details.sapere summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 14px; height: 14px; border-right: 3px solid var(--navy-500); border-bottom: 3px solid var(--navy-500); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
details.sapere[open] summary::after { transform: translateY(-30%) rotate(225deg); }
html[data-motion="reduce"] details.sapere summary::after { transition: none; }
/* ---------- SEDI: ambulatori e cliniche (P10.3) ----------
   Telefono e tablet: ricerca, regioni e schede una sotto l'altra (niente mappa: c'è già nella home).
   Computer (da 1001 px, come le scene della home: niente barra dei contatti in basso): a sinistra ricerca e mappa,
   ferme mentre si scorre se ci stanno nello schermo; a destra i pulsanti delle regioni e le schede. Da 700 px le
   regioni vanno su due colonne, come in un elenco del telefono; nelle schede strette i pulsanti vanno sotto. */
/* W4: orari della segreteria (Contatti, home) */
.orari { margin: 18px 0 0; display: grid; gap: 6px; font-size: .92em; }
.orari > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; padding-bottom: 6px; border-bottom: 1px solid rgba(21, 36, 82, .12); }
.scuro .orari > div { border-bottom-color: rgba(255, 255, 255, .18); }
.orari dt { font-weight: 700; }
.orari dd { margin: 0; }
.seg-stato::before { content: none; }
.seg-stato.aperta::before, .seg-stato.chiusa::before { content: ""; display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-right: .4em; vertical-align: .02em; background: var(--oro); }
.seg-stato.aperta::before { background: #2fbf86; box-shadow: 0 0 0 0 rgba(47, 191, 134, .55); animation: segPulsa 2.4s ease-out infinite; }
@keyframes segPulsa { 70%, 100% { box-shadow: 0 0 0 .55em rgba(47, 191, 134, 0); } }
html[data-motion="reduce"] .seg-stato.aperta::before { animation: none; }
.finder { margin: 0 0 16px; }
.finder label { display: block; font-weight: 700; margin-bottom: 8px; }
.finder input { font: inherit; font-size: 1.1em; width: 100%; max-width: 560px; padding: 14px 20px; min-height: 60px; border-radius: 999px; border: 2px solid var(--blu-300); background: #fff; color: var(--navy-800); }
.finder input:focus { border-color: var(--blu-400); outline: 3px solid rgba(43, 84, 176, .25); outline-offset: 0; }
.finder-empty { margin: 0 0 18px; padding: 14px 18px; border-radius: 16px 4px 16px 4px; background: var(--sabbia); border-left: 6px solid var(--oro); }
.finder-empty[hidden] { display: none; }
/* W4 — «Atlante»: la mappa animata di ambulatori e cliniche (src/atlante.js). Computer: due metà, mappa fissa a sinistra, titolo,
   ricerca ed elenco a destra. Telefono e tablet: fascia navy a tutta larghezza tra il titolo e la ricerca. Senza JavaScript resta l'SVG. */
.atl__testa { padding: clamp(6px, 2vw, 20px) var(--gutter) 14px; background: linear-gradient(180deg, var(--blu-50), #fff); }
.atl__testa h1 { margin-bottom: 0; }
.atl__lead { margin: 0; padding: 18px var(--gutter) 0; font-size: 1.08em; }
.atl__testa h1 { font-size: clamp(2.3rem, 1.7rem + 2.4vw, 4rem); max-width: 15ch; }
.atl__palco { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: radial-gradient(120% 85% at 52% 42%, #223a80 0%, var(--navy-800) 48%, var(--navy-900) 100%); }
.atl__palco :focus-visible { outline-color: var(--oro); }
.atl__scena { position: relative; height: min(122vw, 74svh); min-height: 340px; }
.atl__scena canvas, .atl__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atl__svg { padding: 12px; }
.atl__svg .terra { fill: rgba(95, 132, 207, .22); stroke: var(--blu-200); stroke-width: 1.2; }
.atl__svg .pin { fill: #f4c765; stroke: var(--navy-900); stroke-width: 2; }
.atl__svg .pin.ssn { fill: #6fe0b8; }
.atl--vivo .atl__svg { visibility: hidden; }
.atl--pronto .atl__scena { opacity: 0; }
.atl--via .atl__scena { opacity: 1; transition: opacity .45s ease-out; }
html[data-motion="reduce"] .atl__scena { opacity: 1 !important; transition: none !important; }
.atl__hud { position: absolute; z-index: 2; top: clamp(12px, 3vw, 32px); right: clamp(14px, 3vw, 40px); display: grid; justify-items: end; text-align: right; pointer-events: none; line-height: 1.08; }
.atl__num { font-family: var(--display); font-weight: 800; font-size: clamp(2.9rem, 2.1rem + 3.2vw, 5.6rem); line-height: .95; letter-spacing: -.035em; color: var(--oro); font-variant-numeric: tabular-nums; }
.atl__num-t { font-weight: 700; font-size: clamp(.98rem, .88rem + .4vw, 1.25rem); max-width: 10.5em; margin-top: 4px; text-wrap: balance; }
.atl__tutta { position: absolute; z-index: 3; top: clamp(10px, 2vw, 20px); left: clamp(10px, 2vw, 22px); min-height: 46px; padding: 6px 18px; border-radius: 999px; font-family: inherit; font-size: .92em; font-weight: 700; color: #fff; background: rgba(14, 24, 56, .76); border: 1px solid rgba(169, 191, 232, .5); cursor: pointer; }
.atl__tutta[hidden] { display: none; }
@media (hover: hover) { .atl__tutta:hover { background: var(--navy-600); } }
.atl__info { position: relative; z-index: 2; padding: 14px var(--gutter) 18px; border-top: 1px solid rgba(169, 191, 232, .2); }
.atl__info p { margin: 0; line-height: 1.35; }
.atl__info-o { color: #f7dda3; font-weight: 700; font-size: .86em; }
.atl__info-t { font-family: var(--display); font-weight: 800; font-size: 1.22em; letter-spacing: -.01em; margin: 1px 0 3px !important; }
.atl__info-s { font-size: .92em; color: #e8eefb; }
.atl__info .az { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; }
.atl__info .btn { min-height: 46px; padding: 8px 20px; font-size: .92em; }
.atl__info-km { color: #f7dda3; font-weight: 700; font-size: .9em; margin-top: 3px !important; }
.atl__info-km[hidden] { display: none; }
.atl__link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; font-size: .92em; }
@media (hover: hover) { .atl__link:hover { color: #f7dda3; } }
.atl__legenda { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 10px var(--gutter) 0; font-size: .86em; font-weight: 700; pointer-events: none; }
.atl__legenda span { display: inline-flex; align-items: center; gap: 7px; }
.atl__legenda i { width: 11px; height: 11px; border-radius: 50%; background: #f4c765; flex: none; }
.atl__legenda i.ssn { background: #6fe0b8; }
.no-js .atl__legenda { padding-bottom: 12px; }
.atl__cerca { padding: 20px var(--gutter) 0; }
.finder-vicino { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px 4px 16px 4px; background: var(--blu-50); border-left: 6px solid var(--oro); font-weight: 700; }
.finder-vicino[hidden] { display: none; }
.atl__regioni { padding: 4px var(--gutter) 0; }
.atl__filtri { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px var(--gutter) 0; }
.atl__filtri .chip { font-family: inherit; font-size: .92em; cursor: pointer; min-height: 46px; }
.atl__filtri .chip b { margin-left: 2px; color: var(--navy-500); }
.atl__filtri .chip[aria-pressed="true"], .sedi__regioni .chip[aria-current="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.atl__filtri .chip[aria-pressed="true"] b { color: #f7dda3; }
.no-js .atl__filtri { display: none; }
.atl__spiega { padding: 18px var(--gutter) 6px; }
.atl__spiega .riquadro { margin: 0; }
.atl__elenco { padding: 14px var(--gutter) 0; }
.atl__elenco--uno { columns: auto !important; }
.reg h2 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
@media (hover: hover) { .reg h2 a:hover { text-decoration: underline; color: var(--navy-600); } }
.atl__piu { padding: 0 var(--gutter); min-width: 0; }
.atl__piu h2 { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.95rem); margin: 1.4em 0 .4em; }
.atl__piu h3 { font-size: 1.04em; margin: 1em 0 .2em; }
.atl__piu .chips { list-style: none; padding: 0; margin: 12px 0 0; gap: 8px; }
.atl__piu .chips li { margin: 0; }
.atl__piu .chip { min-height: 44px; padding: 6px 16px; font-size: .9em; }
.atl__piu .amb { margin-bottom: 12px; }
.atl__visita { display: grid; gap: 20px clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(24px, 4vw, 48px); }
.atl__visita .foto img { object-position: var(--fuoco, 50% 30%); }
@media (min-width: 900px) { .atl__visita { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); } }
.firma { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; max-width: 62ch; font-size: .84em; line-height: 1.35; color: var(--navy-600); }
.firma img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.firma a { font-weight: 700; }
.pat-testo { margin-top: 18px; font-size: .92em; }
.amb.acceso { border-color: var(--oro) !important; box-shadow: 0 0 0 3px rgba(217, 164, 65, .5), var(--ombra); }
.sedi__regioni p { margin: 0; font-weight: 700; }
.sedi__regioni .chips { list-style: none; padding: 0; margin: 10px 0 20px; gap: 8px; }
.sedi__regioni .chip { min-height: 44px; padding: 6px 16px; font-size: .9em; }
.sedi__regioni .chips li { margin: 0; }
/* durante una ricerca i risultati salgono subito sotto il campo (sul telefono la tastiera copre il resto) */
.sedi.cercando .sedi__regioni { display: none; }
.sedi__elenco { min-width: 0; }
@media (min-width: 700px) and (max-width: 1000px) { .sedi__elenco { columns: 2; column-gap: 24px; } }
@media (min-width: 1001px) {
  .atl { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; }
  .atl__palco { grid-column: 1; grid-row: 1 / span 5; position: sticky; top: var(--top-h); align-self: start; height: calc(100svh - var(--top-h)); min-height: 480px; }
  .atl__scena { height: 100%; min-height: 0; }
  .atl__testa, .atl__lead, .atl__cerca, .atl__regioni, .atl__filtri, .atl__spiega, .atl__elenco, .atl__piu { grid-column: 2; padding-left: clamp(28px, 4vw, 60px); padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
  .atl__testa { background: none; padding-top: clamp(12px, 2.4vh, 30px); padding-bottom: 0; }
  .atl__testa h1 { margin-bottom: 0; }
  .atl__cerca { padding-top: 16px; }
  .atl__info { position: absolute; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2.4vh, 28px); width: min(320px, 44%); padding: 14px 18px; border: 1px solid rgba(169, 191, 232, .28); border-radius: 22px 6px 22px 6px; background: rgba(14, 24, 56, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .atl__legenda { position: absolute; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2.4vh, 28px); padding: 0; flex-direction: column; align-items: flex-start; }
}
@media print { .atl__palco, .atl__filtri { display: none !important; } .atl { display: block; } }
.reg { margin: 0 0 22px; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; container-type: inline-size; }
.reg[hidden] { display: none; }
.reg h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); display: flex; align-items: center; gap: 12px; margin-bottom: .4em; }
.reg h2::before { content: ""; width: 18px; height: 18px; background: var(--oro); border-radius: 18px 3px 18px 3px; flex: none; }
.amb { display: grid; gap: 12px 16px; grid-template-columns: minmax(0, 1fr); align-items: center; background: #fff; border-radius: 22px 6px 22px 6px; padding: 14px 18px; box-shadow: var(--ombra); margin: 0 0 10px; border: 2px solid transparent; transition: border-color .2s; }
.amb:focus-within { border-color: var(--blu-200); }
@media (hover: hover) { .amb:hover { border-color: var(--blu-200); } }
.amb[hidden] { display: none; }
.amb__titolo { font-size: 1.05em; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 4px; text-wrap: pretty; }
.amb__titolo .tag { vertical-align: .08em; margin-left: 4px; }
.amb__nome, .amb .ind { margin: 0; font-size: .9em; line-height: 1.38; }
.amb__nome { font-weight: 700; }
.amb .ind { color: var(--navy-600); }
.amb .az { display: flex; gap: 8px; flex-wrap: wrap; }
.amb .az a { min-height: 46px; padding: 8px 18px; font-size: .9em; }
/* scheda larga (colonna di almeno 390 px): pulsanti a destra, uno sopra l'altro */
@container (min-width: 390px) {
  .amb { grid-template-columns: minmax(0, 1fr) auto; }
  .amb .az { flex-direction: column; align-items: stretch; }
  /* «Gorle e Bergamo» ha due mappe: i tre pulsanti sotto il testo, altrimenti il testo resta strettissimo */
  .amb:has(.az a:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .amb:has(.az a:nth-child(3)) .az { flex-direction: row; }
}
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .82em; font-weight: 800; background: var(--blu-50); color: var(--navy-600); }
.tag.ssn { background: #e4f3ec; color: var(--verde); }
.riquadro--cliniche { margin-top: 0; margin-bottom: 36px; }
.riquadro--cliniche p { max-width: 72ch; }
.riquadro--cliniche p + p { margin-top: .7em; }
.sommario { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin: 20px 0 30px; }
.sommario a { display: block; padding: 14px 18px; border-radius: 16px 4px 16px 4px; background: #fff; box-shadow: var(--ombra); text-decoration: none; font-weight: 700; color: var(--navy-800); }
@media (hover: hover) { .sommario a:hover { color: var(--blu-400); } }
.cta-fine { background: var(--navy-800); color: var(--crema); border-radius: var(--r-petalo); padding: clamp(28px, 5vw, 56px); margin-top: clamp(40px, 6vw, 80px); display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .cta-fine { grid-template-columns: 1.2fr .8fr; } }
/* C9: le colonne possono stringersi (a 320 px con il testo al 150% il pulsante «Chiama 340 374 9665» allargava il
   riquadro oltre lo schermo e titolo e testo venivano tagliati) */
.cta-fine > * { min-width: 0; }
.cta-fine h2 { margin: 0; }
/* il riquadro è più stretto della pagina: il titolo si misura sul riquadro, così «preparazione?» resta intera */
@media (max-width: 859px) { .cta-fine { container-type: inline-size; } .cta-fine h2 { font-size: min(var(--h2), 9.5cqi); } }
.cta-fine .cta-row { margin: 0; justify-content: flex-end; }
/* il riquadro è blu ma non è .scuro: il pulsante del telefono va schiarito qui (prima era blu su blu, invisibile) */
.cta-fine .btn-ghost { color: var(--crema); border-color: rgba(246, 241, 232, .75); }
.cta-fine .btn-ghost:focus-visible { background: var(--crema); color: var(--navy-800); }
@media (hover: hover) { .cta-fine .btn-ghost:hover { background: var(--crema); color: var(--navy-800); } }
.cta-fine .btn { justify-content: center; text-align: center; }
/* su una riga solo dove c'è posto; sul telefono i pulsanti prendono tutta la larghezza e, a 320 px,
   vanno a capo solo dopo «Chiama» (il numero ha spazi non divisibili) */
@media (min-width: 860px) { .cta-fine .btn { white-space: nowrap; } }
@media (max-width: 859px) { .cta-fine .cta-row { justify-content: flex-start; } .cta-fine .cta-row .btn { flex: 1 1 100%; padding-inline: 18px; } }
/* C9, telefoni sotto i 360 px con il testo del browser ingrandito: meno margine interno e scritta del pulsante al
   massimo l'8,5% della larghezza, così «340 374 9665» resta intero e dentro lo schermo (con il testo normale il
   pulsante è a 20 px e non cambia) */
@media (max-width: 359px) {
  .cta-fine { padding-inline: 16px; }
  .cta-fine .cta-row .btn { padding-inline: 12px; font-size: min(1em, 8.5vw); }
  .cta-fine .btn svg { width: min(1.25em, 30px); height: min(1.25em, 30px); }
}
.narrow .cta-fine { grid-template-columns: 1fr; }
.narrow .cta-fine .cta-row { justify-content: flex-start; }
/* C7: auto-fill (non auto-fit): in ogni blocco i video hanno la stessa larghezza e partono da sinistra, come i titoli,
   anche quando nel blocco ce ne sono solo uno o due (pagina Video, Prima, Dopo) */
.video-griglia { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
/* pagina Grazie: tre blocchi brevi; 404: le pagine più cercate */
.blocchi { display: grid; gap: 20px; margin: 36px 0 28px; }
.blocco h2 { font-size: var(--h3); margin: 0; }
.blocco ul { margin: 0; }
.blocco p { flex: none; }
.blocco .textlink { align-self: flex-start; }
.h-piccolo { font-size: var(--h3); margin: 0 0 .2em; }
.privacy-data { margin-top: 2em; font-weight: 700; }
.testa .cta-row { margin-bottom: 0; }
/* telefoni piccoli: «Chiama 340 374 9665» su una riga (pulsante più basso) */
@media (max-width: 359px) { .cta-row .btn { padding-inline: 18px; } }
.nf-home { margin-top: 28px; }

@media print {
  .top, .barra-mobile, .capitoli, .progresso, .hero__scendi, .marquee, .video-fac, .video-voce, .voci__video, .cta-fine, .piede-sito__griglia, .piede-sito .dw, .piede-sito .petali-bg,
  .motion-toggle, .briciole-nav, .pop, details.sapere:not([open]), .skip, .hero__pausa { display: none !important; }
  body, .scuro, .sabbia, .cielo, .piede-sito, .testa { background: #fff !important; color: #000 !important; }
  body { padding-bottom: 0 !important; }
  .sec, .sec--stretta, .testa { padding: 12px 0 !important; }
  .foto, figure { max-width: 9cm; break-inside: avoid; box-shadow: none !important; }
  .riquadro { break-inside: avoid; }
  /* «Quando chiamarci subito»: sulla carta i due pulsanti diventano numeri in chiaro, senza fondo */
  .avviso__bottoni { gap: 6px 14px; margin: 4px 0 .6em; }
  .avviso__bottoni .btn { background: none !important; color: #000 !important; border: 1px solid #000; box-shadow: none !important; min-height: 0; padding: 4px 12px; }
  /* istruzioni più compatte sulla carta (stesso corpo del testo): Dopo l'intervento resta in 3 pagine A4 */
  .prose h2 { margin-top: 1em; }
  .prose li, .prose p { line-height: 1.45; }
  .prose ul li { margin-bottom: .25em; }
  .dopo-media { display: none !important; }
  .testa h1 { font-size: 2.4rem; }
  .riquadro { padding: 16px 22px; margin: 1em 0; }
  h2, h3 { break-after: avoid; }
  /* domande frequenti: si stampano con le risposte aperte (site.js le apre anche con l'evento beforeprint) */
  .faq details::details-content { content-visibility: visible; }
  .faq details { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc; }
  .faq summary::after { display: none; }
  /* in fondo alla stampa, i contatti in chiaro */
  .piede-sito { padding: 12px 0 0 !important; border-top: 1px solid #000; }
  .piede-sito::after { content: "Segreteria 340 374 9665 · WhatsApp 353 430 1588 · dottnicoladelbianco.com"; display: block; text-align: center; font-weight: 700; }
}

/* nessun contenuto deve allargare la pagina sui telefoni (email lunghe, griglie) */
.prenota__griglia > *, .griglia-2 > *, .piede-griglia > *, .mappa__griglia > *, .hero__griglia > * { min-width: 0; }
/* numeri ed email non si spezzano a caso (spazi non divisibili e <wbr> dopo la @ in build.py); le righe piccole sì */
.contatti-lista b { overflow-wrap: break-word; }
.contatti-lista small { overflow-wrap: anywhere; }
/* la colonna del testo può stringersi: se proprio non c'è posto (testo del browser ingrandito) l'email va a capo
   dentro la scheda invece di allargare la pagina */
.contatti-lista a > span { min-width: 0; }


/* Piede «prima/dopo»: due copie della stessa forma (bordo spesso sotto, pelle sopra) = un solo contorno */
.piede .f-bordo { fill: #fff; stroke: var(--navy-700); stroke-width: 6; stroke-linejoin: round; }
.piede .f-pelle { fill: #fff; stroke: none; }
.piede .dito-sopra { fill: #fff; stroke: var(--navy-700); stroke-width: 3; }
.piede .unghia { fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.piede .ossa line { stroke: #e6edf9; stroke-width: 9; stroke-linecap: round; }
.piede .ossa .m1, .piede .ossa .f1 { stroke: #cddcf5; stroke-width: 13; }
.piede .callo { fill: #e4572e; fill-opacity: .35; }
.piede .asse { stroke: var(--navy-500); stroke-width: 2; stroke-dasharray: 5 6; }
.piede .arco { fill: none; stroke: var(--oro); stroke-width: 5; stroke-linecap: round; }
.piede .gradi { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--navy-900); paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
@media (hover: hover) { .punto:hover .etichetta { opacity: 1; transform: translate(0, -50%); } }
.raddrizza { margin: 22px auto 0; max-width: 360px; }
.raddrizza__stato { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.raddrizza__n { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; color: #c8452c; min-width: 2.4ch; font-variant-numeric: tabular-nums; transition: color .4s; white-space: nowrap; }
.raddrizza.ok .raddrizza__n { color: var(--navy-500); }
.raddrizza__t { font-size: .92em; color: var(--navy-600); line-height: 1.35; }
.raddrizza__t strong { display: block; font-family: var(--display); font-size: 1.2em; color: var(--navy-900); }
/* cursore alto 44 px (si tocca bene), con il binario disegnato a 14 px */
.raddrizza__r { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; outline-offset: 6px; cursor: pointer; margin: 0; }
.raddrizza__r::-webkit-slider-runnable-track { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #f3c9bd, var(--blu-50)); }
.raddrizza__r::-moz-range-track { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #f3c9bd, var(--blu-50)); }
.raddrizza__r::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -15px; border-radius: 50%; background: var(--navy-700); border: 5px solid #fff; box-shadow: 0 6px 16px rgba(21, 36, 82, .35); }
.raddrizza__r::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-700); border: 5px solid #fff; box-shadow: 0 6px 16px rgba(21, 36, 82, .35); }
.raddrizza__ai { display: flex; justify-content: space-between; font-weight: 700; color: var(--navy-700); margin: 10px 0 14px; font-size: .95em; }
.raddrizza__play { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--navy-500); background: #fff; color: var(--navy-800); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .raddrizza__play:hover { background: var(--navy-800); color: #fff; } }
.raddrizza__nota { font-size: .85em; color: var(--navy-600); margin: 12px 0 0; }

/* L'intervento: apertura con la fasciatura su canvas */
.int-apertura { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 1001px) and (min-height: 700px) { .int-apertura { grid-template-columns: 1.1fr .9fr; min-height: calc(100svh - var(--top-h) - 20px); } }
.int-apertura__punti { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: 12px; }
.int-apertura__punti li { display: flex; align-items: center; gap: 14px; font-size: 1.15em; opacity: .8; transform: translateX(-6px); transition: opacity .5s, transform .5s; }
.int-apertura__punti li::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blu-50) center / 16px no-repeat; transition: background-color .5s; }
.int-apertura__punti li.acceso { opacity: 1; transform: none; }
.int-apertura__punti li.acceso::before { background-color: var(--oro); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23152452'/%3E%3C/svg%3E"); }
html[data-motion="reduce"] .int-apertura__punti li, .no-js .int-apertura__punti li { opacity: 1; transform: none; }
html[data-motion="reduce"] .int-apertura__punti li::before, .no-js .int-apertura__punti li::before { background-color: var(--oro); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23152452'/%3E%3C/svg%3E"); }
/* frasi che descrivono un'animazione: spariscono quando le animazioni sono ridotte (o senza JavaScript) */
html[data-motion="reduce"] .solo-anim, .no-js .solo-anim { display: none; }
.int-apertura__media { position: relative; margin: 0 auto; width: 100%; max-width: 460px; aspect-ratio: 3 / 4; border-radius: var(--r-petalo); overflow: hidden; background: var(--navy-900); box-shadow: var(--ombra-alta); }
@media (min-width: 1001px) and (min-height: 700px) { .int-apertura__media { max-height: calc(100svh - var(--top-h) - 70px); width: auto; height: calc(100svh - var(--top-h) - 70px); max-width: 100%; } }
.int-apertura__media img, .int-apertura__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.int-apertura__media canvas { opacity: 0; transition: opacity .4s; }
.int-apertura.pronta canvas { opacity: 1; }
.int-apertura__media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 22px; background: linear-gradient(180deg, transparent, rgba(14, 24, 56, .75)); color: #fff; font-weight: 700; font-size: .9em; }
.int-apertura__barra { position: absolute; left: 20px; right: 20px; bottom: 12px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.int-apertura__barra i { display: block; height: 100%; background: var(--oro); transform-origin: 0 50%; transform: scaleX(0); }
.int-passi-titolo { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin: clamp(50px, 8vw, 100px) 0 0; }
/* P07.1: «Passo per passo» sta dentro la scena fissata (sopra il passo, senza il vuoto di prima); la copia per le schede
   statiche c'è solo quando si vedono le schede (stesse condizioni di .passi-statici) */
.intervento__scena .int-passi-titolo { margin: 0 0 .5em; }
/* portatili bassi (700-800 px di altezza): titolo e titolo del passo un po' più vicini al testo (stesso disegno) */
@media (min-width: 1001px) and (min-height: 700px) and (max-height: 800px) {
  .intervento__scena .int-passi-titolo { margin-bottom: .3em; }
  .intervento__scena .passo h3 { margin-bottom: .35em; }
}
.int-passi-titolo--statici { display: none; }
.no-js .int-passi-titolo--statici, html[data-motion="reduce"] .int-passi-titolo--statici { display: block; }
@media (max-width: 1000px), (max-height: 699px) { .int-passi-titolo--statici { display: block; } }
.passo__dato { display: inline-flex; align-items: center; gap: 10px; background: var(--blu-50); color: var(--navy-800); font-weight: 800; padding: 8px 18px 8px 12px; border-radius: 999px; margin: .1em 0 .9em; }
.passo__dato::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--oro); }
.passi__inset { position: absolute; left: max(-6%, -40px); bottom: -7%; width: 40%; max-width: 200px; aspect-ratio: 3 / 4; z-index: 2; pointer-events: none; }
.passi__inset > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px 6px 24px 6px; border: 6px solid #fff; box-shadow: var(--ombra-alta); }
.passi__inset > span { display: none; }
/* «Tutto sulla tecnica percutanea» e «Tutti i video» al centro della pagina (prima il paragrafo era largo 64ch) */
.int-tutto { text-align: center; max-width: none; margin: clamp(40px, 6vw, 70px) 0 0; }
/* Pagina «La tecnica percutanea»: i vantaggi */
.vantaggi { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .vantaggi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vantaggi { grid-template-columns: repeat(3, 1fr); } }
.vantaggio { background: #fff; border-radius: var(--r-petalo); padding: 26px 26px 22px; box-shadow: var(--ombra); }
.vantaggio__n { font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: #a67a1f; }
.vantaggio h3 { margin: .35em 0 .3em; font-size: 1.3rem; }
.vantaggio p { margin: 0; }

/* Le fasi: linea del tempo verticale (al centro sul computer, a sinistra sul telefono) */
.fasi { position: relative; margin-top: clamp(30px, 5vw, 56px); --x: 31px; }
.fasi__linea { position: absolute; top: 31px; bottom: 31px; left: var(--x); width: 6px; margin-left: -3px; border-radius: 6px; background: var(--blu-100); overflow: hidden; }
.fasi__linea i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--blu-400), var(--oro)); transform-origin: 50% 0; transform: scaleY(0); }
.fasi__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 44px); }
.fase { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; align-items: start; }
/* testo del browser ingrandito: le parole lunghe vanno a capo dentro la scheda (W3b: niente sillabe col trattino,
   sul tablet spezzavano «MEZZO» anche con il testo normale) */
.fase__testo { overflow-wrap: break-word; }
.fase__icona { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 3px solid var(--blu-100); display: grid; place-items: center; color: var(--navy-500); transition: background .45s, border-color .45s, color .45s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.fase__icona svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fase.accesa .fase__icona { background: var(--navy-700); border-color: var(--oro); color: #fff; transform: scale(1.08); }
.fase__testo { background: #fff; border-radius: var(--r-petalo); box-shadow: var(--ombra); padding: 18px 22px; transform: translateY(10px); transition: transform .5s; }
.fase.accesa .fase__testo { opacity: 1; transform: none; }
.fase__quando { margin: 0 0 .2em; font-family: var(--display); font-weight: 800; font-size: .82em; letter-spacing: .08em; text-transform: uppercase; color: #85601a; }
.fase__testo h3 { margin: 0 0 .25em; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
.fase__testo p:last-child { margin: 0; }
/* da 700 px (tablet compresi, P06.3) la linea è al centro e le schede si alternano ai due lati, come sul computer */
@media (min-width: 700px) {
  .fasi { --x: 50%; }
  .fase { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); gap: 28px; }
  .fase .fase__icona { grid-column: 2; grid-row: 1; }
  .fase:nth-child(odd) .fase__testo { grid-column: 1; grid-row: 1; }
  .fase:nth-child(even) .fase__testo { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .fase__testo, .fase__icona { transition: none; } }

/* Le fasi nella home: ogni tappa ha il suo video o la sua foto */
.fase__media { grid-column: 2; border-radius: var(--r-petalo); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--ombra); background: var(--navy-900); }
.fase__media img, .fase__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco, 50% 50%); display: block; }
.fase__media { opacity: .8; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.no-js .fase__testo, .no-js .fase__media { opacity: 1; transform: none; }
.no-js .fasi__linea i { transform: none; }
.fase.accesa .fase__media { opacity: 1; transform: none; }
@media (min-width: 700px) {
  .fase__media { aspect-ratio: 4 / 5; width: min(260px, 100%); grid-row: 1; }
  .fase:nth-child(odd) .fase__media { grid-column: 3; justify-self: start; }
  .fase:nth-child(even) .fase__media { grid-column: 1; justify-self: end; }
  .fase { align-items: center; }
}

/* Dicono di noi: un muro di testate, tutte con lo stesso peso */
.stampa-muro { grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 620px) { .stampa-muro { grid-template-columns: repeat(2, 1fr); } }
/* se le testate diventano dispari, l'ultima scheda occupa tutta la riga invece di lasciare un buco a destra */
@media (min-width: 620px) { .stampa-muro > .stampa-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.stampa-card { display: flex; flex-direction: column; gap: 6px; }
.stampa-card__testata { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--navy-800); }
.stampa-card time { font-size: .88em; font-weight: 700; color: #85601a; }
.stampa-card p:not(.stampa-card__testata) { margin: .3em 0 0; }
.stampa-card .textlink { margin-top: auto; padding-top: 10px; align-self: flex-start; }
@media (min-width: 900px) {
  .voci__griglia { grid-template-columns: 1fr 320px; column-gap: clamp(30px, 5vw, 70px); grid-auto-flow: dense; }
  .voci__griglia .cit { grid-column: 1; }
  .voci__video { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
.stampa-card > p { flex-grow: 0; }

/* ---------- HOME SUL TELEFONO E SUL TABLET (P06.2, P06.3; blocco «A» del collega senza le tre regole tolte
   dall'ADDENDUM C12: tutte e 6 le testate restano visibili, payoff e video della testimonianza non si rimpiccioliscono) */
/* schede dei passi: i paragrafi non si allungano (il dato in evidenza resta una pillola della sua misura); lo spazio
   in più, se la riga della griglia è più alta, va in fondo alla scheda */
.passi-statici .card > p { flex: none; }
.passi-statici .card > p:last-child { flex: 1; }
.passi-statici .passo__dato { align-self: flex-start; }
.passi-statici .foto video { object-position: var(--fuoco, 50% 50%); }
/* La squadra: con due colonne (circa 590-899 px) la terza scheda prende tutta la riga invece di restare sola a metà */
@media (max-width: 899px) { #la-rete .card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* tablet in verticale: il piede più grande, accanto all'elenco */
@media (min-width: 700px) and (max-width: 899px) {
  .piede-griglia { grid-template-columns: 300px minmax(0, 1fr); }
  .piede { max-width: 300px; }
  /* percorso a due lati: media un po' più stretti (le colonne sono di circa 290 px) */
  .fase__media { width: min(240px, 100%); }
}
/* fascia delle città con le animazioni ridotte: sul telefono sparisce (32 nomi uno per riga erano alti più di 1.200 px;
   le città sono comunque nella sezione «Dove visito»), da 700 px resta compatta e senza sfumatura ai bordi */
@media (max-width: 699px) {
  html[data-motion="reduce"] .marquee { display: none; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) { .no-js .marquee { display: none; } }
@media (min-width: 700px) {
  html[data-motion="reduce"] .marquee { -webkit-mask: none; mask: none; }
  html[data-motion="reduce"] .marquee__track > span { padding: 0 .5em; font-size: 1em; gap: .5em; }
}
/* telefoni in orizzontale (schermo alto meno di 560 px): video dei passi in 16:9 e fasciatura più piccola, così una
   scheda non è alta il doppio dello schermo */
@media (max-height: 560px) {
  .passi-statici .foto--4x5 { aspect-ratio: 16 / 9; }
  .int-apertura__media { max-width: 300px; }
}
@media (max-width: 699px) {
  /* passi: video 16:9 in cima alla scheda, schede più compatte */
  .passi-statici { gap: 18px; }
  .passi-statici .card { padding: 20px 20px 18px; }
  .passi-statici .foto--4x5 { aspect-ratio: 16 / 9; }
  .passi-statici .passo__dato { border-radius: 14px; padding: 6px 14px 6px 10px; font-size: .92em; }
  /* i fatti a due colonne, sempre uguali (minmax(0, 1fr)): con 1fr la colonna di «30.000+» si allargava mentre le cifre
     contavano e a 320 px la sezione cresceva di 82 px durante lo scorrimento (un salto a #prenota finiva 82 px prima).
     Cifra a 8vw e margini di 12 px: «30.000+» (circa 4,25 volte il carattere) sta nella scheda anche a 320 px */
  .numeri__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .numero { padding: 18px 12px; }
  .numero b { font-size: min(2rem, 8vw); }
  .numero > span { font-size: .85em; }
  /* Dicono di noi: schede più compatte (tutte e 6) */
  .stampa-card { padding: 22px; }
  /* La squadra: una colonna, icona accanto al titolo */
  #la-rete .cards { grid-template-columns: minmax(0, 1fr); }
  #la-rete .card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  #la-rete .card .picto { width: 56px; height: 56px; grid-row: span 2; margin: 0; }
  #la-rete .card .picto svg { width: 32px; height: 32px; }
  /* percorso: linea del tempo più stretta, schede mai oltre il margine (anche a 320 px) e media più bassi
     (16:9, al massimo 180 px); la fase 2 in 4:3, così il volto del Dottore resta intero */
  .fasi { --x: 22px; }
  .fasi__linea { top: 22px; bottom: 22px; }
  .fase { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .fase__icona { width: 44px; height: 44px; border-width: 2px; }
  .fase__icona svg { width: 22px; height: 22px; }
  .fase__testo { padding: 16px 18px; }
  .fase__quando { overflow-wrap: anywhere; }
  .fase__media { max-height: 180px; }
  .fase--2 .fase__media { aspect-ratio: 4 / 3; max-height: none; }   /* fase--2: anche quando l'elenco non parte dalla 1 (C8) */
  /* piè di pagina della home: niente colonna «Contatti» (gli stessi contatti sono appena sopra, in «Prenota la visita»,
     e nella barra in basso) e le altre due affiancate. Solo sulla home: nelle altre pagine la colonna dei contatti resta
     e l'email (che va a capo solo dopo la @) non starebbe in mezza larghezza */
  /* min-content: la colonna non è mai più stretta del suo titolo («Informazioni» a 320 px si spezzava) */
  body[data-page="home"] .piede-sito__griglia { grid-template-columns: repeat(2, minmax(min-content, 1fr)); gap: 24px 16px; }
  body[data-page="home"] .piede-sito__griglia > :first-child { grid-column: 1 / -1; }
  body[data-page="home"] .piede-sito__griglia > div:nth-child(2) { display: none; }
  /* contatti in schede più basse */
  .contatti-lista a { min-height: 56px; padding: 10px 14px; }
  .contatti-lista b { font-size: 1em; }
}

/* ============================================================
   C7 (05.11.2026): video con i sottotitoli (P05), pagine patologia (P09), voce del menu della sezione
   ============================================================ */
/* P05.1: sottotitoli WebVTT grandi, su fondo navy quasi pieno (pazienti anziani, chi sente poco). tg1.vtt usa
   «line:35%», misurato da MF2 con questa grandezza e questa interlinea: se cambiano, la misura va rifatta (MF2.md) */
.video-fac video::cue { font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: 1.15rem; line-height: 1.35; color: #fff; background: rgba(14, 24, 56, .85); }
/* pagina Video (P05.4): i blocchi dopo il primo e la scheda orizzontale del TG1 (colonna di al massimo 300 px) */
.video-blocco { margin-top: 50px; }
.video-griglia--tv { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
/* Prima e Dopo: in stampa le facciate dei video non ci sono, e quindi nemmeno la loro sezione */
@media print { .video-sez, .sez-cta { display: none !important; } }   /* .sez-cta: sezione con il solo riquadro finale */
/* un riquadro finale in una sezione tutta sua (Prima, Dopo) non ha il margine sopra (P10.2) */
.sec--stretta > .wrap > .cta-fine:first-child { margin-top: 0; }
/* P09.3: nelle sottopagine resta accesa la voce del menu della sezione (aria-current="true") */
.nav a[aria-current="true"] { background: var(--blu-50); color: var(--navy-500); }
/* P09.3: nel riquadro finale (fondo navy) il link agli ambulatori è chiaro e alto da toccare */
.cta-fine p a { color: var(--crema); padding-block: 10px; }
@media (hover: hover) { .cta-fine p a:hover { color: #fff; } }

/* P09.3 / P10.1 (proposta archivio-foto-06): testata con la foto a destra sul computer, sotto il testo sul telefono */
.testa__griglia { display: grid; gap: clamp(22px, 4vw, 56px); align-items: center; }
.testa__foto { aspect-ratio: 16 / 10; }
.testa__foto img { object-position: var(--fuoco, 50% 30%); }
@media (min-width: 900px) {
  .testa__griglia { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
  .testa__foto { aspect-ratio: 4 / 5; width: 100%; max-width: 420px; justify-self: end; }
}
/* P09.2: nelle 5 patologie il piede della home con il punto della pagina acceso in oro. Sul telefono è piccolo, accanto
   al sottotitolo (occhiello e titolo restano larghi: «Metatarsalgia» deve stare su una riga); sul computer è a destra */
.testa__griglia--lato { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 3vw, 56px); row-gap: 0; align-items: start; }
.testa__griglia--lato > .testa__testo { display: contents; }
.testa__griglia--lato > .testa__testo > * { grid-column: 1 / -1; }
.testa__griglia--lato > .testa__testo > .lead { grid-column: 1; }
.testa__piede { grid-column: 2; grid-row: 3; align-self: center; margin: 0; }
.testa__piede svg { display: block; width: auto; height: 140px; overflow: visible; filter: drop-shadow(0 10px 18px rgba(21, 36, 82, .12)); }
@media (min-width: 900px) {
  .testa__griglia--lato { align-items: center; }
  .testa__griglia--lato > .testa__testo { display: block; }
  .testa__piede { grid-row: 1; margin-right: clamp(0px, 5vw, 72px); }
  .testa__piede svg { height: 340px; }
}
.testa__piede .pp-bordo { fill: #fff; stroke: var(--navy-700); stroke-width: 6; stroke-linejoin: round; }
.testa__piede .pp-pelle { fill: #fff; }
.testa__piede .pp-ossa line { stroke: #e6edf9; stroke-width: 9; stroke-linecap: round; }
.testa__piede .pp-dito-sopra { fill: #fff; stroke: var(--navy-700); stroke-width: 3; }
.testa__piede .pp-unghie path { fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.testa__piede .pp-punto circle { fill: #fff; stroke: var(--navy-500); stroke-width: 4; }
.testa__piede .pp-punto text { font-family: var(--display); font-weight: 800; font-size: 28px; fill: var(--navy-500); }
.testa__piede .pp-punto--acceso circle { fill: var(--oro); stroke: #fff; stroke-width: 6; }
.testa__piede .pp-punto--acceso .pp-alone { fill: var(--oro); stroke: none; opacity: .3; }
.testa__piede .pp-punto--acceso text { font-size: 46px; fill: var(--navy-900); }

/* P09.2: pagine patologia. Niente buco tra la testata e «Che cos'è»; colonna dei media con il riquadro che resta in
   vista sul computer; sul telefono foto e video salgono sopra il testo (il riquadro resta dopo il testo, dove arriva
   la sua domanda) */
.prose > h2:first-child { margin-top: 0; }
.testa + .pat-sez { padding-top: clamp(24px, 4vw, 48px); }
.pat-griglia { align-items: start; }
.pat-media { display: grid; gap: 26px; }
.pat-media .riquadro { margin: 0; }
.pat-riquadro__bottoni { display: grid; gap: 12px; margin: 16px 0 4px; }
.pat-riquadro__bottoni .btn { justify-content: center; padding-inline: 18px; }
/* computer stretto (900-1199 px): colonna più stretta, riquadro meno imbottito («Chiama 340 374 9665» su una riga) */
@media (min-width: 900px) and (max-width: 1199px) { .pat-riquadro { padding: 24px 20px 24px 22px; } }
/* sul telefono il riquadro è meno imbottito: «Chiama 340 374 9665» sta su una riga (come il riquadro avviso di Dopo) */
@media (max-width: 480px) { .pat-riquadro { padding: 22px 16px 22px 18px; } .pat-riquadro__bottoni .btn { padding-inline: 14px; } }
@media (min-width: 900px) {
  .pat-media { align-self: stretch; align-content: start; }
  .pat-media .riquadro { position: sticky; top: calc(var(--top-h) + 24px); }
}
@media (max-width: 899px) {
  .pat-media { display: contents; }
  .pat-media > .foto, .pat-media > .video-voce { order: -1; }
}

/* P09.3: schede delle patologie. Con tutte e 5 (pagina Patologie) 3+2 centrate sul computer e 2+2+1 sul tablet;
   il pittogramma è il piede con il punto oro numerato; sotto i 640 px schede compatte (icona accanto al titolo) */
@media (min-width: 1000px) {
  .cards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards--5 > * { grid-column: span 2; }
  .cards--5 > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .cards--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards--5 > * { grid-column: span 2; }
  .cards--5 > :nth-child(5) { grid-column: 2 / span 2; }
}
.picto--piede svg { width: auto; height: 62px; overflow: visible; }
.picto--piede .pp-bordo { fill: #fff; stroke: var(--navy-700); stroke-width: 22; stroke-linejoin: round; }
.picto--piede .pp-pelle { fill: #fff; }
.picto--piede .pp-oro { fill: var(--oro); stroke: #fff; stroke-width: 16; }
.picto--piede text { font-family: var(--display); font-weight: 800; font-size: 150px; fill: var(--navy-900); }
@media (max-width: 639px) {
  a.card:has(.picto) { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 20px 20px 18px; align-items: start; }
  a.card:has(.picto) .picto { grid-row: 1 / span 3; width: 56px; height: 56px; margin: 0; }
  a.card:has(.picto) .picto--piede svg { height: 48px; }
  /* «Le altre patologie» in fondo alle schede: un elenco di link (piede con il numero, nome, freccia); la descrizione è
     nella pagina di ogni patologia. «Scopri di più» resta per i lettori di schermo */
  .cards--altre { gap: 12px; }
  .cards--altre a.card:has(.picto) { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; padding: 12px 18px 12px 14px; }
  .cards--altre a.card:has(.picto) .picto { grid-row: auto; }
  .cards--altre a.card p { display: none; }
  .cards--altre .more__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cards--altre a.card h3 { font-size: 1.3rem; }
}
/* telefoni piccoli: «Metatarsalgia» deve stare su una riga accanto al piede (la freccia si toglie: è tutta un link) */
@media (max-width: 359px) {
  .cards--altre a.card:has(.picto) { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding-right: 12px; }
  .cards--altre a.card:has(.picto) .picto { width: 48px; height: 48px; }
  .cards--altre a.card .more { display: none; }
}

/* ============================================================
   C8 (05.11.2026): testate con foto e pagine interne (P10.1, P10.2), bendaggio in Dopo (D5)
   ============================================================ */
/* P10.1: meno spazio bianco sotto la testata */
.testa { padding-bottom: clamp(20px, 3vw, 32px); }
/* P10.1: testata stretta come il contenuto (Prima, Domande frequenti) e con la foto: sul computer la foto ha una colonna
   fissa di 240 px e il titolo è un po' più piccolo, così le parole lunghe («all'intervento») stanno intere nei 540 px
   rimasti e titolo e testo restano allineati alla stessa x del contenuto */
@media (min-width: 900px) {
  .testa .narrow .testa__griglia { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 40px; }
  .testa .narrow .testa__griglia h1 { font-size: min(var(--h1), 3.6rem); }
}
/* «Il medico»: la colonna con il video, «Dove trovarlo» e la foto dello studio. Sul computer è alta quanto la
   biografia e la foto resta in vista mentre si legge; sul telefono la colonna si scioglie nella griglia e il video
   «Il Dottore si presenta» viene subito dopo la testata (prima arrivava dopo sei schermate di testo) */
.chi-media { display: grid; gap: 26px; }
.chi-media > * { min-width: 0; }
@media (min-width: 900px) {
  .chi-media { align-self: stretch; align-content: start; }
  .chi-media__studio { position: sticky; top: calc(var(--top-h) + 24px); }
}
@media (max-width: 899px) {
  .chi-media { display: contents; }
  .chi-media > .video-voce { order: -1; }
}
/* Contatti: il volto del Dottore (cerchio con il bordo oro) con «Ti risponde la segreteria…», nella testata: sotto il
   sottotitolo sul telefono, a destra del titolo sul computer (stessa griglia del piede delle patologie, testa() lato=) */
.volto { display: flex; gap: 18px; align-items: center; }
.volto img { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--oro); object-fit: cover; flex: none; }
.volto p { margin: 0; }
.testa__griglia--lato > .volto { grid-column: 1 / -1; margin-top: 22px; }
@media (max-width: 380px) { .volto { gap: 14px; } .volto img { width: 88px; height: 88px; border-width: 3px; } }   /* telefoni piccoli: più posto al testo */
@media (min-width: 900px) {
  .testa__griglia--lato > .volto { grid-column: 2; grid-row: 1; width: 380px; margin: 0; }
}
/* Dopo (P10.2, D5): colonna delle foto centrata, foto larghe al massimo 360 px; sul computer, se lo schermo è alto
   abbastanza da contenerla tutta (circa 780 px), resta in vista accanto al testo lungo invece di lasciare la metà vuota */
.dopo-media { display: grid; gap: 26px; justify-items: center; }
.dopo-media .foto { width: 100%; max-width: 360px; }
@media (min-width: 900px) and (min-height: 640px) { .dopo-media { position: sticky; top: calc(var(--top-h) + 24px); } .dopo-media .foto { max-width: min(360px, calc((100svh - var(--top-h) - 74px) * 3 / 7)); } }
/* La tecnica (P10.2): la radiografia accanto alla definizione resta in vista sul computer; i 4 passi della home sempre
   visibili (nella home le schede ci sono solo senza la scena fissata), due per riga con il video in 4:3 da 700 px
   (sotto i 700 px 16:9, come nella home); i vantaggi rimasti sono 4: due per riga */
.tec-griglia { align-items: start; }
.tec-media { width: 100%; max-width: 440px; justify-self: center; aspect-ratio: 900 / 1056; }
@media (min-width: 900px) { .tec-media { position: sticky; top: calc(var(--top-h) + 24px); } }
.passi-statici--sempre { display: grid; }
@media (min-width: 700px) {
  .passi-statici--sempre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passi-statici--sempre .foto--4x5 { aspect-ratio: 4 / 3; }
}
.tec-passi .lead { max-width: 62ch; }
@media (min-width: 1000px) { .vantaggi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Domande frequenti (P10.2): quattro gruppi con il loro titolo (grande come i titoli dei testi), sotto il sommario a
   due colonne (quattro voci: niente voce sola su una riga) */
.faq-gruppo + .faq-gruppo { margin-top: clamp(36px, 5vw, 56px); }
.faq-gruppo h2 { margin: 0 0 .6em; font-size: min(clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem), 10vw); }
.faq .sommario { grid-template-columns: minmax(0, 1fr); margin: 0 0 clamp(32px, 5vw, 48px); }
@media (min-width: 600px) { .faq .sommario { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Prima e Dopo: in stampa niente linea del tempo (ha i video), niente sommario; gli elementi che entrano in scena
   scorrendo (.rivela) sulla carta sono sempre visibili */
@media print {
  .fasi-sez, .sommario { display: none !important; }
  .legale { color: #000 !important; opacity: 1 !important; }
  .rivela { animation: none !important; opacity: 1 !important; transform: none !important; }
  .passi-statici .card, .vantaggio, .card { break-inside: avoid; }
}

/* ============================================================
   W3b (05.11.2026): correzioni della revisione finale (registro: docs/impl/W3b.md)
   ============================================================ */
/* vecchi iPhone (prima di iOS 15.4): il riquadro chiuso non resta in pagina come una scatola vuota */
dialog:not([open]) { display: none; }
/* numeri di telefono nel carattere dei titoli: lo zero barrato dei testi si può leggere come un 8 */
.hero__tel a, .piede-sito a[href^="tel:"], .piede-sito a[href*="wa.me"], .contatti-lista a[href^="tel:"] b, .contatti-lista a[href*="wa.me"] b, a[href^="tel:"].btn, .avviso__bottoni a[href*="wa.me"], .barra-mobile a { font-family: var(--display); font-weight: 700; }
a[href^="tel:"].btn { letter-spacing: -.01em; }
.barra-mobile a { font-weight: 800; }
/* numero sempre in vista nell'intestazione sugli schermi larghi; la voce Home lascia il posto (il logo porta già alla home) */
.top__tel { display: none; }
@media (min-width: 1400px) {
  .top__tel { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; font-family: var(--display); font-weight: 800; color: var(--navy-800); text-decoration: none; white-space: nowrap; }
  .nav li:first-child { display: none; }
}
html.menu-stretto .top__tel { display: none; }
/* capitoli: il nome si vede da solo per un attimo quando cambia il capitolo */
.capitoli a.appena span { opacity: 1; }
/* la fascia delle città non è un link: niente manina sul computer */
@media (hover: hover) { .marquee { cursor: default; } }
/* prima schermata sui portatili bassi: tutto dentro lo schermo, pulsanti compresi (la composizione non cambia) */
@media (min-width: 1200px) and (max-height: 800px) {
  .hero__griglia { padding-block: 16px 24px; }
  .hero h1 { font-size: min(clamp(2.7rem, 9.6svh, 4.8rem), 16cqi); }
  .hero .lead { font-size: 1.08em; line-height: 1.45; margin-bottom: .6em; }
  .hero .cta-row { max-width: none; margin-top: .6em; flex-wrap: nowrap; gap: 10px; }
  .hero .cta-row .btn { flex: 1 1 0; padding-inline: 12px; min-height: 52px; }
  .hero__tel { margin-top: .2em; }
}
@media (min-width: 900px) and (max-width: 1199px) and (max-height: 800px) {
  .hero__griglia { padding-block: 10px 14px; }
  .hero h1 { font-size: min(clamp(2.6rem, 8svh, 3.8rem), 16cqi); }
  .hero .lead { font-size: 1.04em; line-height: 1.38; margin-bottom: .4em; }
  .hero .cta-row { margin-top: .4em; gap: 8px; }
  .hero .cta-row .btn { min-height: 50px; }
  .hero__tel { margin-top: 0; }
}
/* prima schermata sui telefoni veri, con le barre di Safari aperte: la frase intera e il primo pulsante che spunta */
@media (max-width: 699px) {
  .hero .occhiello { font-size: .8em; letter-spacing: .06em; margin-bottom: .3em; }
  .hero h1 { font-size: min(2.3rem, 10.5vw); }
  /* il nome sta già nel logo: su una riga, così il primo pulsante si vede */
  .occhiello__piu { display: none; }
  /* pulsante del video: un tondo con il solo simbolo (il testo resta per il lettore di schermo): la pillola copriva un petalo */
  .hero__pausa { width: 44px; padding: 0; font-size: 0; }
  .hero__pausa::before { content: "❚❚"; font-size: 16px; }
  .hero__pausa[data-stato="ferma"]::before { content: "▶"; }
}
/* iPhone in Risparmio energetico: niente triangolo di sistema sopra la prima schermata, c'è già il suo pulsante */
.hero__video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* il piede: su telefono piede e cursore stanno insieme nello schermo, anche con le barre di Safari aperte */
@media (max-width: 959px) { .piede { max-width: clamp(170px, calc((100svh - var(--top-h) - 248px) * .48), 220px); } }
/* telefono in verticale: numero e cursore su una riga sotto il piede, il nome e la spiegazione più in basso. Così piede e cursore
   stanno insieme nello schermo anche su iPhone SE e vecchi Android con le barre aperte, e il piede resta grande.
   141 px: barra in basso 73, spazio sopra il piede 12, riga del cursore 56. In orizzontale c'è il blocco più sotto. */
@media (max-width: 699px) and (orientation: portrait) {
  .piede { max-width: clamp(150px, calc((100svh - var(--top-h) - 141px) * .48), 220px); }
  .raddrizza { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; margin-top: 8px; }
  .raddrizza__stato { display: contents; }
  .raddrizza__n { grid-area: 1 / 1; }
  .raddrizza__r { grid-area: 1 / 2; }
  .raddrizza__ai { grid-area: 2 / 2; margin: 0 0 10px; font-size: .8em; }
  .raddrizza__t, .raddrizza__play, .raddrizza__nota { grid-column: 1 / -1; }
  .raddrizza__t { margin-bottom: 12px; }
  .raddrizza__play { justify-self: start; }
}
@media (min-width: 700px) and (max-width: 899px) { .piede { max-width: 300px; } }
/* computer tra 960 e 1119 px: piede e cursore su una riga, sotto l'elenco su due colonne (prima colonne strettissime) */
@media (min-width: 960px) and (max-width: 1119px) {
  .piede-griglia { grid-template-columns: 1fr; }
  .piede-col { grid-template-columns: 320px minmax(0, 380px); justify-content: center; }
  .pat-lista { grid-template-columns: repeat(2, 1fr); }
  .pat-lista > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* il cursore non salta quando «Alluce valgo» diventa «Alluce corretto» e va su due righe */
@media (min-width: 960px) { .raddrizza__stato { min-height: 122px; } }
.raddrizza__ai { gap: 12px; }
/* schermi bassi: il piede si vede sempre intero */
@media (min-width: 960px) and (max-height: 800px) { .piede-col .piede { max-width: min(320px, calc((100svh - var(--top-h) - 32px) * 360 / 750)); } }
/* computer: il piede resta fermo mentre si scorre l'elenco accanto */
@media (min-width: 1120px) { .piede-griglia { align-items: start; } .piede-col { position: sticky; top: calc(var(--top-h) + 16px); } }
/* etichetta del 5 sotto il numero, come 1 e 2: non copre più i gradi */
.punto[data-pat="neuroma-di-morton"] .etichetta { left: 50%; right: auto; top: calc(100% + 12px); bottom: auto; transform: translate(-50%, -6px); }
.punto[data-pat="neuroma-di-morton"]:focus-visible .etichetta { transform: translate(-50%, 0); }
@media (hover: hover) { .punto[data-pat="neuroma-di-morton"]:hover .etichetta { transform: translate(-50%, 0); } }
/* foto inserita nella scena dei passi, portatili bassi: resta tutta dentro lo schermo */
@media (min-width: 1001px) and (min-height: 700px) and (max-height: 800px) { .passi__inset { bottom: -1%; max-width: 165px; } }
/* le fasi del percorso: sul computer il racconto per immagini non è un francobollo */
@media (min-width: 1200px) { .fase__media { width: min(340px, 100%); } }
/* fase 1: la radiografia torna bianca e nera (il monitor fotografato dava un fondo rosso-bruno) */
.fase--1 .fase__media img { filter: grayscale(1) contrast(1.08); }
/* video in facciata: in riproduzione angoli piccoli; verticali mai più alti dello spazio tra intestazione e barra in basso */
.video-fac.in-play { border-radius: 12px; }
@media (max-width: 1000px) {
  .video-fac.vert { max-width: clamp(200px, calc((100svh - var(--top-h) - 97px) * 9 / 16), 360px); }
  .voci__video .video-fac.vert { max-width: clamp(200px, calc((100svh - var(--top-h) - 97px) * 9 / 16), 300px); }
}
@media (min-width: 1200px) {
  .voci__griglia { grid-template-columns: 1fr 380px; }
  .voci__video .video-fac.vert, .video-fac__cap { max-width: 360px; }
}
/* senza JavaScript: via i comandi che non farebbero nulla, il menu resta leggibile, i video si aprono con il link */
.no-js .burger, .no-js .motion-toggle, .no-js .raddrizza__r, .no-js .raddrizza__play, .no-js .raddrizza__ai, .no-js .video-fac button, .no-js .stampa-btn, .no-js .finder { display: none; }
/* il menu resta aperto, quindi la testata non può restare ferma in alto: coprirebbe la pagina */
@media (max-width: 1000px) { .no-js .top { position: static; } .no-js .nav { display: block; position: static; max-height: none; padding-bottom: 18px; } .no-js .top__in { flex-wrap: wrap; } }
.video-fac noscript a { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); white-space: nowrap; }
/* modulo: in Safari la tendina era alta 33 px e con il disegno di sistema */
.form select { -webkit-appearance: none; appearance: none; padding-right: 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23152452' d='M12 16 5 9l1.4-1.4 5.6 5.6 5.6-5.6L19 9z'/%3E%3C/svg%3E") no-repeat right 14px center / 24px; }
/* mentre si scrive la barra dei contatti sparisce: copriva i campi (su iPhone resta sopra la tastiera) */
html:has(.form input:focus, .form select:focus, .form textarea:focus, #q:focus) .barra-mobile { display: none; }
/* mappa della home: si tocca */
#dove-visito .italia svg { cursor: pointer; }
.italia__tip { margin: 12px 0 0; padding: 12px 16px; max-width: none; background: var(--blu-50); border-radius: 16px 4px 16px 4px; font-size: .95em; line-height: 1.35; }
.italia__tip[hidden] { display: none; }
.italia__tip > span { display: block; }
.italia__tip > span + span { margin-top: 8px; }
.italia__tip strong { display: block; }
.legenda span { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 8px; }
.legenda i { margin: .3em 0 0; }
.legenda i.anello { margin: .35em 4px 0 4px; }
/* riquadri delle patologie: la X resta su una fascia, il testo non ci finisce sotto; su touch niente anello attorno alla X */
.pop__barra { position: sticky; top: 0; z-index: 2; height: 64px; margin-bottom: -64px; display: flex; justify-content: flex-end; padding: 8px 8px 0; background: linear-gradient(#fff 70%, rgba(255, 255, 255, 0)); }
.pop__chiudi { position: static; float: none; margin: 0; }
.pop__corpo > .occhiello { padding-right: 48px; }
@media (hover: none) { .pop__chiudi:focus-visible { outline: none; } }
@media (max-width: 359px) { .pop__corpo .cta-row .btn { width: 100%; justify-content: center; padding-inline: 14px; } .pop__corpo .cta-row .btn svg { display: none; } }
/* menu del telefono più raccolto: voci alte 58 px, in vista anche «Contatti» */
@media (max-width: 1000px) { .nav > ul > li { margin: 0; } .nav > ul > li > a { padding: 12px 14px; } .nav .nav__capitoli li { margin: 0; } }
/* «Zoom pagina» di Safari: le scritte non si spezzano a metà parola, il pulsante Menu non esce dallo schermo */
.barra-mobile a svg { flex: none; }
@media (max-width: 309px) {
  .barra-mobile { padding-inline: 6px; gap: 4px; }
  .barra-mobile a { font-size: 14px; padding-inline: 2px; }
}
@media (max-width: 257px) { .barra-mobile a { font-size: 11px; } }
@media (max-width: 300px) {
  .top__in { gap: 8px; }
  .logo img { height: 44px; }
}
@media (max-width: 250px) { .burger { font-size: 0; gap: 0; padding: 8px 12px; min-width: 48px; } }
/* telefono in orizzontale: intestazione che scorre via, barra sottile, prima schermata e piede dentro lo schermo */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  :root { --top-min: 50px; }
  .top { position: relative; }
  html { scroll-padding-top: 12px; }
  .logo img { height: 38px; }
  .burger { min-height: 44px; padding: 4px 12px; }
  .barra-mobile { padding-block: 4px calc(4px + env(safe-area-inset-bottom)); }
  .barra-mobile a { flex-direction: row; gap: 8px; min-height: 44px; }
  .piede-sito { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .hero__griglia { padding-top: 10px; padding-bottom: 16px; align-items: start; }
  .hero__schermo { width: 40%; }
  .hero__testo { max-width: 58%; }
  .hero h1 { font-size: 2.2rem; margin-bottom: .2em; max-width: none; }
  .hero .lead { font-size: 1em; max-width: 46ch; margin-bottom: .4em; }
  .hero .occhiello { margin-bottom: .4em; }
  .hero .cta-row .btn { flex: 1 1 200px; }
  .piede-griglia { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .piede-col { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; }
  .piede { max-width: 130px; }
  .punto { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: .8em; border-width: 2px; }
  .raddrizza { margin: 0; }
  .raddrizza__t, .raddrizza__nota { display: none; }
  .raddrizza__stato { margin-bottom: 0; }
  .raddrizza__ai { font-size: .85em; flex-wrap: wrap; gap: 0 8px; }
  .raddrizza__play { padding: 6px 10px; font-size: .85em; }
  .video-fac.vert, .voci__video .video-fac.vert { max-width: calc((100svh - 118px) * 9 / 16); }
  .video-griglia .video-fac.vert { width: 100%; }
  .video-fac__cap { max-width: none; }
  .medico .foto--3x4 { max-width: 240px; margin-inline: auto; }
}
/* schermi molto grandi (iMac 27 pollici): la pagina non resta un francobollo al centro */
@media (min-width: 2000px) {
  html { font-size: 125%; }
  :root { --wrap: 1560px; }
  .passi__media .foto { max-width: 620px; }
  .passi__inset { max-width: 260px; }
  .piede-griglia { grid-template-columns: minmax(0, 800px) minmax(330px, 1fr); }
  .piede-col { grid-template-columns: 400px 1fr; }
  .piede-col .piede { max-width: 400px; }
  .italia { max-width: 680px; }
}
/* il piede: il contorno di com'era resta tratteggiato mentre l'alluce si raddrizza */
.piede .ombra-prima { fill: none; stroke: #c8452c; stroke-width: 2.5; stroke-dasharray: 5 6; }
/* patologie: i tempi a colpo d'occhio (sul telefono ogni riga è una scheda) */
.tempi { width: 100%; border-collapse: collapse; background: #fff; border-radius: 22px 6px 22px 6px; box-shadow: var(--ombra); overflow: hidden; }
.tempi th, .tempi td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid rgba(21, 36, 82, .1); }
.tempi thead th { border-top: 0; background: var(--navy-800); color: var(--crema); font-size: .9em; line-height: 1.3; }
.tempi tbody th { font-family: var(--display); font-weight: 700; }
.tempi tbody th a { display: inline-block; padding-block: 10px; color: var(--navy-800); }
@media (max-width: 699px) {
  .tempi, .tempi tbody, .tempi tr, .tempi th, .tempi td { display: block; }
  .tempi thead { display: none; }
  .tempi tbody th { padding: 16px 18px 4px; }
  .tempi td { border-top: 0; padding: 2px 18px; }
  .tempi td::before { content: attr(data-t) ": "; font-weight: 700; }
  .tempi td:last-child { padding-bottom: 16px; }
  .tempi tr + tr { border-top: 1px solid rgba(21, 36, 82, .1); }
}
/* pulsante «Stampa queste istruzioni»: solo dove c'è una stampante a portata di mano */
.stampa-btn { margin-top: .6em; }
@media (max-width: 699px) { .stampa-btn { display: none; } }
/* stampa: elenchi con i pallini (la stampante non disegna gli sfondi), meno fogli */
@media print {
  .prose ul { list-style: disc !important; padding-left: 1.3em !important; }
  .prose ul li { padding-left: .2em !important; }
  .prose ul li::before { content: none !important; display: none !important; }
  .testa__foto, .stampa-btn { display: none !important; }
  .testa__griglia { display: block !important; }
  .faq details { margin: 0 0 8px !important; }
  .faq summary { padding: 8px 14px !important; min-height: 0 !important; }
  .faq details > div { padding: 0 14px 8px !important; }
  .legale { font-size: 9pt !important; margin-top: 6px !important; line-height: 1.3 !important; }
  .testa::before { content: "Dott. Nicola Del Bianco · Segreteria 340 374 9665"; display: block; font-weight: 700; margin-bottom: 8px; }
}

/* P11.4 (C9): le regole di vendor/lenis.css (Lenis 1.x) qui dentro, al posto di un foglio a parte (era una richiesta in
   più che bloccava il primo disegno). Valgono solo con html.lenis, cioè quando home.js accende Lenis (ramo desk). */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }