/* =========================================================
   Artificial Healthcare — design system
   I token :root sono iniettati dal Worker (comandabili via API).
   Qui non esiste un solo hex grezzo.
   ========================================================= */

/* ---------- font ---------- */
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- misure di sistema ----------
   L'altezza dell'header è una costante di layout: la usa il ripiegamento
   dello scroll E il padding dell'hero, che deve stare in 100svh esatti. */
:root{--hdr-h:82px}
@media(max-width:1023px){:root{--hdr-h:70px}}
@media(max-height:760px){:root{--hdr-h:68px}}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 10px)}
body{margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body),system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-4);line-height:1.7;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
/* L'anello di fuoco usa OUTLINE, non box-shadow: i bottoni hanno gia' una
   loro ombra piu' specifica, che vinceva sulla regola generica e lasciava
   dieci controlli senza nessun segno visibile di fuoco. L'outline non se lo
   contende nessuno. Contrasti misurati: --brand-700 su bianco 8.33:1, su
   --surface 7.87:1, su --brand-100 7.53:1; sui fondi scuri --brand-200 su
   --brand-800 fa 8.14:1. Soglia richiesta 3:1. */
:focus-visible{outline:3px solid var(--brand-700);outline-offset:2px;border-radius:6px}
.section--dark :focus-visible,.ft :focus-visible,.mnav :focus-visible,
.hdr.is-on-dark :focus-visible{outline-color:var(--brand-200)}
/* lo skip-link galleggia sopra la PAGINA, che e' chiara: l'anello chiaro qui
   farebbe 1.40:1 contro il bianco. Tiene quello scuro di default. */

/* ---------- tipografia ---------- */
.display{font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);
  font-size:var(--fs-8);line-height:1.02;letter-spacing:-.028em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144}
.h2{font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);
  font-size:var(--fs-7);line-height:1.1;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 72}
.h3{font-size:var(--fs-6);font-weight:var(--fw-semi);line-height:1.28;letter-spacing:-.012em}
.lead{font-size:var(--fs-5);line-height:1.62;color:var(--ink-muted);max-width:56ch}
.small{font-size:var(--fs-3);line-height:1.55}
.muted{color:var(--ink-muted)}
b,strong{font-weight:var(--fw-semi);color:var(--ink)}

.kicker{display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-2);font-weight:var(--fw-semi);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-600)}
.kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent);flex:none}
.on-dark .kicker{color:var(--brand-200)}

/* enfasi dentro il testo */
.em{color:var(--brand-600);font-weight:var(--fw-semi)}
.mark{background-image:linear-gradient(180deg,transparent 58%,var(--brand-200) 58%,var(--brand-200) 94%,transparent 94%);
  padding:0 .06em;border-radius:2px}

/* ---------- layout ---------- */
/* fluido: su 1707px il contenuto non resta perso al centro come con 1220 fisso */
:root{--wrap-pad:clamp(1.15rem,4vw,3rem)}
.wrap{width:100%;max-width:min(1440px,92vw);margin-inline:auto;padding-inline:var(--wrap-pad)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Salta al contenuto: fuori schermo finché non prende il fuoco, poi scende
   sopra l'header. Non è .sr-only perché deve poter DIVENTARE visibile. */
.skip{position:fixed;left:12px;top:-120px;z-index:200;
  padding:12px 20px;border-radius:var(--r);
  background:var(--brand-800);color:var(--on-dark,var(--white));font-weight:var(--fw-semi);font-size:var(--fs-3);
  box-shadow:var(--sh-2);transition:top var(--dur-1) var(--ease)}
.skip:focus{top:12px}
/* il contenitore prende il fuoco per portarci lo screen reader, ma non deve
   disegnare un anello attorno a mezza pagina */
main:focus{outline:none}
@media(prefers-reduced-motion:reduce){.skip{transition:none}}
/* REGOLA DI GIUNZIONE — lo stacco fra due sezioni è UNO, non la somma di
   due padding. Ogni sezione mette metà dello stacco; i bordi esterni della
   catena (prima dopo l'hero, ultima prima del footer) prendono la misura
   piena. Prima due sezioni adiacenti sommavano 2×144 = 288px di bianco. */
.section{--sec-pad:clamp(4.25rem,2.6rem + 6.6vw,9rem);
  padding-block:calc(var(--sec-pad) * .5);position:relative}
main > .section:first-of-type{padding-top:var(--sec-pad)}
main > .section:last-of-type{padding-bottom:var(--sec-pad)}
.section--tint{background:var(--surface)}
.section--band{background:var(--brand-100)}
/* la hairline serve SOLO dove due sezioni dello stesso tono si toccano
   (qui: fascia --brand-100 → --surface). Non è un divisore da mettere ovunque. */
.section--hairline::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1440px,92vw);height:1px;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--brand-400),transparent)}
.section--dark{background:var(--brand-800);color:var(--on-dark,var(--white))}
.section--dark .lead,.section--dark .muted{color:color-mix(in srgb,var(--brand-200) 78%,var(--on-dark,var(--white)))}
.stack-8{display:grid;gap:8px}.stack-12{display:grid;gap:12px}
.stack-20{display:grid;gap:20px}.stack-32{display:grid;gap:32px}

/* ---------- il contenitore d'icona ----------
   Una regola sola per ogni icona incassata. Prima erano sette quadrati
   arrotondati leggermente diversi, tutti in tinta PIENA --brand-100 col
   glifo in --brand-600 saturo. Il quadrato in tinta piena e il blu che
   grida sono meta' del motivo per cui le icone sembravano "da bambino":
   l'icona diventava un blocco di colore, cioe' la protagonista, invece che
   il segnale accanto al titolo.
   Ora: cerchio, velo (il colore del marchio a bassa alpha — resta parente
   del brand senza fare massa) e glifo desaturato. Il contrasto glifo/velo
   e' CALCOLATO per composizione, non stimato: theme.iconNota in site.json.
   Due taglie, per ruolo: chi fa da testata a una card e' 56/48 con l'icona
   a meta' del cerchio; chi sta accanto a una riga di testo resta piccolo,
   altrimenti spezza il ritmo della lista. */
/* SIMBOLO di card o di sezione: nessun cerchio, glifo nudo e piu' grande.
   Dentro una card il cerchio era una macchia che competeva col titolo; il
   segno nudo si legge come una firma e sta meglio accanto al serif dei
   titoli. Contrasto del glifo sul fondo della card: 8.33:1 su bianco,
   7.87:1 su --surface — calcolati a mano, vedi theme.iconNota. */
/* width:auto su un figlio di colonna lo faceva STIRARE a tutta la
   colonna (347px in prima-seduta): il contenitore dev'essere il glifo, non
   la cella. Qui lo span E' la scatola dell'icona. */
.treat__ic,.pat__ic,.ps__ic{
  flex:none;display:block;width:32px;height:32px;
  align-self:start;justify-self:start;
  background:none;border:0;border-radius:0;color:var(--icon)}
.treat__ic svg,.pat__ic svg,.ps__ic svg{width:100%;height:100%;display:block}
@media(min-width:760px){.treat__ic,.pat__ic,.ps__ic{width:36px;height:36px}}
/* MARCATORE DI RIGA: il cerchietto resta, perche' li' fa un lavoro —
   allinea le righe e costruisce la colonna sinistra. Ora e' piu' chiaro,
   con un filetto di un gradino piu' scuro che gli da' il bordo senza
   appesantirlo (3.44:1 sul riempimento, 3.80:1 sul bianco della card). */
.cred__ic,.cv__ic,.hc__ic{
  border-radius:999px;flex:none;display:grid;place-items:center;
  background:var(--icon-bg);color:var(--icon);border:1px solid var(--icon-bd)}
.cred__ic{width:44px;height:44px}
.cred__ic svg{width:22px;height:22px}
.cv__ic{width:34px;height:34px}
.cv__ic svg{width:17px;height:17px}
/* fascia scura: logica invertita, velo bianco e glifo --brand-200 */
.hc__ic{width:44px;height:44px;background:var(--icon-veil-dark);color:var(--icon-on-dark);
  border-color:color-mix(in srgb,var(--icon-on-dark) 34%,transparent)}
.hc__ic svg{width:22px;height:22px}
.hr-soft{height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--brand-400),transparent);opacity:.5}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 26px;border-radius:999px;
  font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.005em;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),
             background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.btn svg{width:20px;height:20px;flex:none}
.btn--primary{background:var(--fill,var(--brand-600));color:var(--fill-ink,var(--white));box-shadow:var(--sh-brand)}
.btn--primary:hover{background:var(--fill-hover,var(--brand-700));transform:translateY(-2px);
  box-shadow:0 14px 34px color-mix(in srgb,var(--fill,var(--brand-600)) 34%,transparent)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{border:1.5px solid var(--brand-400);color:var(--brand-600);background:transparent}
.btn--ghost:hover{background:var(--brand-100);transform:translateY(-2px)}
/* Bianco su --whatsapp fa 1.98:1 ed e' VOLUTO: e' il marchio WhatsApp, che
   WCAG 1.4.11 esenta dai requisiti di contrasto in quanto logotipo. Qui
   conta il riconoscimento immediato, non la leggibilita' del glifo. Non
   scurire il verde: la nota completa e' in data/site.json (whatsappNota). */
.btn--wa{background:var(--whatsapp);color:var(--white);
  box-shadow:0 10px 26px color-mix(in srgb,var(--whatsapp) 38%,transparent)}
.btn--wa:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn--sm{min-height:44px;padding:0 18px;font-size:var(--fs-3)}
.btn--on-dark{background:var(--on-dark,var(--white));color:var(--brand-800)}
.btn--on-dark:hover{background:var(--brand-200);transform:translateY(-2px)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;transition:all var(--dur-2) var(--ease)}
.hdr__in{display:flex;align-items:center;gap:22px;
  height:var(--hdr-h);transition:height var(--dur-2) var(--ease)}
.hdr.is-scrolled{background:color-mix(in srgb,var(--white) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line),0 8px 28px color-mix(in srgb,var(--ink) 6%,transparent)}
.hdr.is-scrolled .hdr__in{height:calc(var(--hdr-h) - 16px)}
/* la barra è trasparente sull'hero e diventa solida allo scroll, uguale
   su desktop e mobile: l'hero è chiaro in entrambi, quindi il marchio
   scuro si legge senza trattamenti speciali. */
/* Sopra una zona scura (fascia domicilio, footer) la barra bianca sembrava
   appiccicata: qui si scurisce e il testo passa al chiaro. Contrasti sul
   fondo brand-800: bianco 11.41:1 · --brand-200 8.14:1. */
.hdr.is-scrolled.is-on-dark{
  background:color-mix(in srgb,var(--brand-800) 88%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--brand-200) 20%,transparent)}
.hdr.is-on-dark .brand__name{color:var(--on-dark,var(--white))}
.hdr.is-on-dark .brand__role{color:var(--brand-200)}
/* Sopra una fascia scura il badge si schiariva verso --brand-400, e il
   monogramma bianco sopra faceva 3.80:1 (serve 4.5, e' testo di 15px).
   Inverto: pastiglia chiara e monogramma scuro, 8.14:1, e sul blu scuro
   della barra si stacca meglio di prima. */
.hdr.is-on-dark .brand__mark{background:var(--icon-veil-dark);color:var(--icon-on-dark)}
.hdr.is-on-dark .nav a{color:var(--on-dark,var(--white))}
.hdr.is-on-dark .nav a:hover,.hdr.is-on-dark .nav a.is-active{color:var(--brand-200)}
.hdr.is-on-dark .nav a::after{background:var(--brand-200)}
.hdr.is-on-dark .burger{color:var(--on-dark,var(--white));
  background:color-mix(in srgb,var(--on-dark,var(--white)) 12%,transparent);
  border-color:color-mix(in srgb,var(--brand-200) 30%,transparent)}

.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
/* Il monogramma e' il marchio del sito, e parla la lingua delle icone:
   cerchio, velo, tono desaturato, piu' un filetto che lo chiude come un
   sigillo. Prima era un quadrato arrotondato col gradiente pieno e l'ombra
   colorata — cioe' esattamente il trattamento che stiamo abbandonando — e
   accanto alle icone nuove stonava per primo. */
.brand__mark{width:42px;height:42px;border-radius:999px;flex:none;
  display:grid;place-items:center;font-weight:var(--fw-strong);font-size:var(--fs-3);letter-spacing:.02em;
  background:var(--icon-bg);color:var(--icon)}
/* Lo slot del logo vero (pro.logo). L'altezza segue quella dell'header
   invece di essere fissa: quando la barra si accorcia il logo si accorcia
   con lei e non sfonda. Se pro.logo e' vuoto questa regola non serve a
   nessuno e il monogramma resta com'e'. */
.brand__logo{height:calc(var(--hdr-h) * .5);width:auto;max-width:200px;
  flex:none;object-fit:contain;object-position:left center}
.ft__brand .brand__logo{height:46px}
.brand__txt{display:grid;gap:4px;line-height:1.15;min-width:0}
.brand__name{font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);font-size:var(--fs-4);letter-spacing:var(--name-track,-.015em);text-transform:var(--name-case,none);
  font-variation-settings:"SOFT" 0,"WONK" 0}
.brand__role{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600)}

.nav{display:flex;align-items:center;gap:4px}
.nav a{position:relative;padding:9px 13px;border-radius:10px;
  font-size:var(--fs-3);font-weight:var(--fw-semi);color:var(--ink);
  transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:var(--brand-600);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease)}
.nav a:hover{color:var(--brand-600)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--brand-600)}

.burger{display:none;width:46px;height:46px;border-radius:13px;
  align-items:center;justify-content:center;border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--white) 70%,transparent)}
.burger svg{width:22px;height:22px}

/* menu mobile */
.mnav{position:fixed;inset:0;z-index:70;display:none;
  background:var(--white);padding:24px clamp(1.15rem,4vw,3rem) 40px;
  flex-direction:column;overflow-y:auto}
.mnav.is-open{display:flex;animation:mnav-in var(--dur-2) var(--ease) both}
@keyframes mnav-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav__top{display:flex;align-items:center;height:58px;gap:22px}
.mnav__list{display:grid;gap:2px;margin-top:22px}
/* Inter e non Fraunces: una lista di navigazione e' INTERFACCIA, non un
   titolo. A 30px in carattere display competeva con gli h2 della pagina e
   nove voci finivano a 810px su un viewport di 844, spingendo i due bottoni
   fuori schermo. A 1.3rem in Inter la lista e i CTA stanno dentro anche a
   375x667, e ogni voce resta un bersaglio da 48px. */
.mnav__list a{font-family:var(--font-body),system-ui,sans-serif;font-weight:var(--fw-semi);
  font-size:var(--fs-5);letter-spacing:-.01em;
  display:flex;align-items:center;min-height:48px;padding:6px 0;
  border-bottom:1px solid var(--line)}
.mnav__list a:hover{color:var(--brand-600)}
.mnav__cta{margin-top:26px;display:grid;gap:12px}
/* Sui telefoni bassi (667px e' il caso peggiore) nove voci da 48px piu' i
   due bottoni finivano 30px fuori dallo schermo. Stringo le spaziature, non
   il corpo del testo: le voci restano bersagli da 44px, il minimo toccabile. */
@media(max-height:700px){
  .mnav{padding-top:16px;padding-bottom:22px}
  .mnav__top{height:50px}
  .mnav__list{margin-top:12px}
  .mnav__list a{min-height:44px;padding:4px 0}
  .mnav__cta{margin-top:16px;gap:10px}
}

/* ================= hero =================
   Requisito: la sezione è ALTA ESATTAMENTE quanto il viewport (100svh) e
   tutto il contenuto ci sta dentro — per costruzione, non a occhio.
   Il modo in cui regge: ogni misura verticale (titolo, lead, spazi,
   bottoni, foto) è un clamp legato ANCHE a svh, quindi scende insieme al
   viewport invece di sfondare la piega. Il caso critico è il basso-e-largo
   (1440x720): lì comanda il termine svh, non quello vw. */
.hero{
  /* la scala verticale dell'hero, tutta in un posto.
     I gap NON sono px fissi: crescono in svh, così il ritmo si apre
     insieme alla finestra invece di restare compresso in mezzo. */
  --pad-t:clamp(16px,4.6svh,58px);
  --pad-b:clamp(18px,5.3svh,66px);
  --t-size:clamp(1.85rem,min(1.35rem + 3.9vw,.4rem + 9.6svh),5.4rem);
  --l-size:clamp(.95rem,.8rem + 1.5svh,1.6rem);
  --gap-s:clamp(.4rem,.05rem + 2.2svh,1.9rem);    /* kicker → titolo */
  --gap-m:clamp(.5rem,.08rem + 2.9svh,2.5rem);    /* titolo → lead  */
  --btn-h:clamp(46px,36px + 3.4svh,72px);

  position:relative;overflow:clip;
  height:100svh;min-height:100svh;          /* ← il requisito, per costruzione */
  display:flex;align-items:stretch;
  padding-top:calc(var(--hdr-h) + var(--pad-t));
  padding-bottom:var(--pad-b);
  background:
    radial-gradient(120% 90% at 88% 8%, color-mix(in srgb,var(--brand-200) 62%,transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 4% 96%, color-mix(in srgb,var(--accent) 13%,transparent) 0%, transparent 60%),
    linear-gradient(180deg,var(--brand-100) 0%, var(--white) 62%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;z-index:0;
  background-image:var(--grain);background-size:180px 180px;mix-blend-mode:multiply}
.hero__grid{position:relative;z-index:1;display:grid;gap:clamp(1.6rem,.5rem + 3.6vw,4.5rem);
  grid-template-columns:1fr;align-items:stretch}
@media(min-width:1150px){
  .hero__grid{grid-template-columns:1.04fr .96fr}
  /* a due colonne il lead non deve crescere oltre quanto regge la colonna,
     o su 1024 diventa un paragrafo di 6 righe da 34 caratteri */
  .hero{--l-size:clamp(.95rem,min(.8rem + 1.5svh,.5rem + 1.25vw),1.6rem)}
}

/* La colonna testo occupa TUTTA l'altezza utile, come la figura accanto:
   niente blocco compatto che galleggia in mezzo. I due spaziatori sotto
   sono elastici (flex-grow pesato) e distribuiscono lo spazio che avanza
   come un ritmo — più aria fra lead e CTA, meno fra CTA e prove. */
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;height:100%}
/* anche l'occhiello cresce con la finestra, se no resta un dettaglio da 13px
   sopra un titolo da 80 */
.hero .kicker{font-size:var(--fs-2)}
.hero__sp{display:block;width:100%;flex:1 1 0;min-height:clamp(14px,2.6svh,34px)}
.hero__sp--b{flex-grow:2.1;min-height:clamp(10px,1.8svh,24px)}
.hero__title{font-size:var(--t-size);margin-top:var(--gap-s);
  text-transform:var(--hero-title-case,none);letter-spacing:var(--hero-title-track,-.028em);font-weight:var(--hero-title-weight,var(--fw-semi))}
/* l'evidenziatore non deve mai spezzarsi a metà su due righe */
.hero__title .mark{white-space:nowrap}
.hero__lead{font-size:var(--l-size);line-height:1.55;max-width:52ch;margin-top:var(--gap-m)}
.hero__lead--short{display:none}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__cta .btn{min-height:var(--btn-h)}
.hero__cta .btn--ghost svg{transition:transform var(--dur-1) var(--ease)}
.hero__cta .btn--ghost:hover svg{transform:translateX(4px)}

/* tre badge, una riga sola: non possono più andare a capo e lasciare un orfano.
   Le colonne si dimensionano sul contenuto (niente stiramento), ma possono
   comprimersi se lo spazio manca invece di sfondare. */
.hero__badges{display:grid;grid-template-columns:repeat(3,minmax(0,auto));
  justify-content:start;gap:clamp(6px,.6vw,10px);width:100%}
/* sotto i 1200px l'etichetta lunga non ci sta in una riga: resta il numero */
@media(min-width:1150px) and (max-width:1399px){.badge__k{display:none}}
.badge{display:inline-flex;align-items:center;gap:7px;min-width:0;
  padding:clamp(7px,1.5svh,15px) clamp(11px,1.05vw,19px);border-radius:999px;
  background:color-mix(in srgb,var(--white) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-400) 30%,transparent);
  backdrop-filter:blur(6px);box-shadow:var(--sh-1)}
.badge svg{width:clamp(15px,1.9svh,17px);height:clamp(15px,1.9svh,17px);color:var(--brand-600);flex:none}
.badge__v{font-size:var(--fs-2);font-weight:var(--fw-semi);line-height:1.2;white-space:nowrap}
.badge__k{font-size:var(--fs-1);color:var(--ink-muted);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* figura hero: riempie l'altezza utile esattamente come la colonna testo,
   così le due colonne partono e finiscono alla stessa quota */
.hero__fig{position:relative;margin:0;width:100%;height:100%;min-height:0}
.hero__fig::before{content:"";position:absolute;inset:auto -16px -16px auto;
  width:70%;height:70%;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--accent),var(--brand-400));opacity:.22;
  transform:rotate(3deg);animation:blob 13s ease-in-out infinite}
.hero__img{position:relative;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:50% 20%;
  border-radius:var(--r-lg);box-shadow:var(--sh-3);border:6px solid var(--white)}

/* la card recensioni si appoggia sull'angolo della foto e respira appena */
.float-card{position:absolute;left:-5%;bottom:6%;z-index:3;
  display:flex;align-items:center;gap:11px;
  padding:clamp(8px,1.1svh,13px) 17px clamp(8px,1.1svh,13px) 13px;border-radius:17px;
  background:var(--white);box-shadow:var(--sh-2);border:1px solid var(--line);
  animation:floaty 6s ease-in-out infinite}
.float-card__b{display:grid}
/* la card porta alle recensioni: link a copertura, zero impatto sul layout */
.float-card__link{position:absolute;inset:0;border-radius:inherit}
.float-card__n{font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);
  font-size:var(--fs-6);line-height:1;
  color:var(--brand-600);font-variation-settings:"SOFT" 0,"WONK" 0}
.stars{display:flex;gap:2px}
.stars svg{width:13px;height:13px;color:var(--star)}
.float-card__t{font-size:var(--fs-1);color:var(--ink-muted);line-height:1.3;margin-top:3px;white-space:nowrap}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes blob{0%,100%{transform:rotate(3deg) scale(1)}50%{transform:rotate(-2.5deg) scale(1.04)}}

/* ---------- hero: il progetto mobile ----------
   STESSA LINGUA VISIVA DEL DESKTOP: fondo chiaro col gradiente brand,
   testo in ink, evidenziatore azzurro, foto in cornice con ombra e forma
   decorativa dietro, card recensioni bianca appoggiata sulla foto, badge
   chiari col bordo. Qui cambia SOLO la DISPOSIZIONE — una colonna, testo
   sopra e foto sotto, badge ridotti a due — non lo stile né i colori. */
@media(max-width:1149px){
  .hero{align-items:stretch;
    --photo-h:clamp(190px,36svh,380px);
    /* il ritmo è più stretto del desktop: qui la colonna è una sola e
       deve contenere anche la foto */
    --gap-s:clamp(.3rem,.05rem + 1.1svh,1rem);
    --gap-m:clamp(.4rem,.08rem + 1.4svh,1.3rem);
    --btn-h:clamp(46px,38px + 1.4svh,54px);
    --l-size:clamp(.94rem,.8rem + .75svh,1.15rem)}
  .hero__grid{position:static;display:flex;flex-direction:column;
    gap:clamp(14px,2.4svh,30px)}
  .hero__copy{flex:1 1 auto;min-height:0}
  .hero__sp{flex-grow:1.3;min-height:clamp(8px,1.4svh,20px)}
  .hero__sp--b{flex-grow:1;min-height:clamp(6px,1svh,16px)}

  /* la foto resta una figura in cornice, come sul desktop: raggio, bordo
     bianco, ombra e la forma colorata dietro. Solo più bassa e larga. */
  .hero__fig{position:relative;flex:none;width:100%;max-width:none;
    height:var(--photo-h);margin:0}
  .hero__img{position:relative;width:100%;height:100%;
    object-position:50% 25%;
    border:6px solid var(--white);border-radius:var(--r-lg);
    box-shadow:var(--sh-3);filter:none}
  .hero__fig::before{inset:auto -12px -12px auto;width:62%;height:64%}

  .hero__lead{max-width:40ch}
  .hero__lead--full{display:none}
  .hero__lead--short{display:block}

  .hero__cta{display:grid;grid-template-columns:1fr;gap:10px;width:100%;
    max-width:clamp(320px,44vw,520px)}
  .hero__cta .btn{width:100%}

  /* due badge invece di tre, e senza l'etichetta lunga: è una riduzione di
     LAYOUT. Lo stile resta quello chiaro del desktop. */
  .hero__badges{grid-template-columns:repeat(2,minmax(0,auto));gap:8px}
  .badge:nth-child(n+3){display:none}
  .badge__k{display:none}

  /* Sul TELEFONO i badge spariscono del tutto: le stesse tre credenziali
     tornano nella striscia sotto e nella lista di "chi sono", e qui in alto
     erano l'elemento di troppo. Lo spazio non resta vuoto: se lo prendono
     il sottotitolo (versione piena) e la foto, non i vuoti elastici. */
  @media(max-width:699px){
    .hero__badges{display:none}
    .hero__lead{max-width:34ch}
  }

  /* il kicker deve stare in una riga sola: niente orfano "PROVINCIA".
     Serve .hero davanti, o la regola alta dell'hero vince e torna a capo. */
  /* il pavimento era .68rem = 10.88px, il testo piu' piccolo della pagina.
     .75rem = 12px e' il minimo sotto cui non si scende. */
  .hero .kicker{font-size:var(--fs-1);letter-spacing:.1em;gap:8px}
  .kicker::before{width:20px}

  /* la card si appoggia sull'angolo della foto, come sul desktop */
  .float-card{left:-10px;right:auto;top:auto;bottom:12px;
    gap:9px;padding:8px 14px 8px 11px;border-radius:15px;animation:none}
  .float-card__n{font-size:var(--fs-5)}
  .float-card__t{font-size:var(--fs-1)}
  .stars svg{width:11px;height:11px}
}
/* tablet e laptop stretti: c'è spazio per il lead lungo — più contenuto
   vero al posto del vuoto, invece del taglio pensato per il telefono */
@media(min-width:700px) and (max-width:1149px){
  .hero__lead--full{display:block;max-width:46ch}
  .hero__lead--short{display:none}
}
/* Più lo schermo è basso, più la foto si stringe: il testo ha la
   precedenza e deve entrarci senza comprimersi. */
@media(max-width:1149px) and (max-height:900px){.hero{--photo-h:clamp(170px,33svh,320px)}}
@media(max-width:1149px) and (max-height:780px){.hero{--photo-h:clamp(150px,28svh,260px)}}
@media(max-width:1149px) and (max-height:680px){.hero{--photo-h:clamp(125px,23svh,210px)}}
@media(max-width:1149px) and (max-height:560px){.float-card{display:none}}

/* =========================================================
   SISTEMA DI SEPARAZIONE DELLE SEZIONI
   Tre leve, nient'altro:
   1. il CICLO DEI FONDI — mai due sezioni adiacenti con lo stesso fondo.
      Ordine attuale: hero (gradiente) → striscia scorrevole (--brand-200,
      tinta piena) → chi-sono (bianco) → metodo (--surface) → recensioni
      (bianco). La striscia E' il gradino: prima hero e chi-sono finivano
      e cominciavano tutt'e due quasi bianche e il confine non si vedeva.
   2. l'ANATOMIA — ogni sezione apre con kicker / h2 con una parola
      evidenziata / lead, con le STESSE spaziature ovunque (.sec__head).
   3. la FIRMA ripetuta — il trattino cyan del kicker, uno solo in tutto
      il sito. Niente altri divisori: un separatore su ogni giunzione è il
      tell da template che stiamo evitando. La hairline (.hr-soft) serve
      solo dove due sezioni dello stesso tono finiscono per toccarsi.
   ========================================================= */
.sec__head{margin-bottom:clamp(2rem,1.1rem + 2.8vw,3rem)}   /* lead → contenuto (48) */
.sec__head .kicker{margin-bottom:clamp(9px,.85vw,12px)}      /* kicker → h2   (12) */
.sec__head .h2{margin-bottom:clamp(13px,1.4vw,20px)}         /* h2 → lead     (20) */
.sec__head .lead{max-width:56ch}
/* come nell'hero: l'evidenziazione non si spezza a metà fra due righe */
.sec__title .mark{white-space:nowrap}

/* ---------- chi sono ---------- */
.about__grid{display:grid;gap:clamp(1.8rem,1rem + 3vw,3.4rem);
  grid-template-columns:1fr;align-items:start}
/* le due colonne finiscono alla stessa quota, come nell'hero: il ritratto
   si allunga fino al fondo del testo invece di lasciare sotto un vuoto */
@media(min-width:900px){
  .about__grid{grid-template-columns:2fr 3fr;align-items:stretch}
  .about__fig{height:100%}
  .about__img{height:100%;aspect-ratio:auto;min-height:380px}
}
/* stesso trattamento della foto hero: raggio, ombra, forma dietro */
.about__fig{position:relative;margin:0;width:100%;max-width:420px;justify-self:center}
.about__fig::before{content:"";position:absolute;inset:auto -14px -14px auto;
  width:68%;height:68%;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--accent),var(--brand-400));opacity:.2;
  transform:rotate(-3deg)}
.about__img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 18%;border-radius:var(--r-lg);box-shadow:var(--sh-3);
  border:6px solid var(--white)}
.about__text{display:grid;gap:clamp(.85rem,.6rem + .7vw,1.1rem);max-width:62ch;
  font-size:var(--fs-4);line-height:1.72;color:var(--ink-muted)}
.cred__list{display:grid;gap:11px;margin-top:clamp(1.4rem,1rem + 1.4vw,2rem)}
.cred{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  font-size:var(--fs-3);line-height:1.45}
.about__sign{margin-top:clamp(1.4rem,1rem + 1.4vw,2rem);
  font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);
  font-size:var(--fs-6);letter-spacing:-.015em;line-height:1.15;
  color:var(--brand-800);font-variation-settings:"SOFT" 0,"WONK" 0}
.about__sign-role{display:block;margin-top:5px;
  font-family:var(--font-body),sans-serif;font-size:var(--fs-1);font-weight:var(--fw-semi);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- come lavoro ---------- */
.steps{--n-size:var(--fs-7);--step-gap:clamp(1.4rem,.8rem + 2vw,2.2rem);
  display:grid;gap:var(--step-gap)}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;display:grid;gap:7px;align-content:start}
/* i numeroni erano --brand-200 su --surface: 1.32:1, cioe' quasi invisibili.
   --brand-400 fa 3.59:1, sopra il 3:1 del testo grande. Stessa correzione
   fatta al 404: il token chiaro va bene sui fondi scuri, non sui chiari. */
.step__n{font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);
  font-size:var(--n-size);line-height:.9;color:var(--brand-400);
  font-variation-settings:"SOFT" 0,"WONK" 0}
.step__t{font-size:var(--fs-5);font-weight:var(--fw-semi);letter-spacing:var(--step-title-track,-.012em);
  font-family:var(--step-title-font,inherit);text-transform:var(--step-title-case,none)}
.step__s{font-size:var(--fs-3);line-height:1.6;color:var(--ink-muted)}
/* la linea che collega i passi: orizzontale da 820px, verticale sotto */
@media(min-width:820px){
  .step::after{content:"";position:absolute;height:2px;border-radius:2px;
    top:calc(var(--n-size) * .45);left:calc(50% + var(--n-size) * .55);
    right:calc(-50% + var(--step-gap));
    background:linear-gradient(90deg,var(--brand-200),
      color-mix(in srgb,var(--brand-200) 20%,transparent))}
  .step:last-child::after{display:none}
}
@media(max-width:819px){

  .step{grid-template-columns:auto 1fr;grid-template-areas:"n t" "n s";
    column-gap:16px;row-gap:4px}
  .step__n{grid-area:n;width:1.6em;text-align:center}
  .step__t{grid-area:t}.step__s{grid-area:s}
  .step::after{content:"";position:absolute;width:2px;border-radius:2px;
    left:calc(var(--n-size) * .8);transform:translateX(-1px);
    top:calc(var(--n-size) * 1.05);bottom:calc(-1 * var(--step-gap));
    background:linear-gradient(180deg,var(--brand-200),
      color-mix(in srgb,var(--brand-200) 15%,transparent))}
  .step:last-child::after{display:none}
}

/* ---------- trattamenti ---------- */
/* conteggi espliciti: 8 card riempiono sempre righe intere (1 / 2 / 4),
   con auto-fill capitavano righe da 5 e code da 3 */
.treat{display:grid;gap:clamp(12px,1.2vw,18px);grid-template-columns:1fr}
@media(min-width:560px){.treat{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1250px){.treat{grid-template-columns:repeat(var(--cols,4),1fr)}}
.treat__i{display:flex;flex-direction:column;gap:9px;
  padding:clamp(16px,1.5vw,22px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.treat__i:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.treat__t{font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.012em;line-height:1.3}
.treat__s{font-size:var(--fs-3);line-height:1.55;color:var(--ink-muted)}
/* il rimando sta in fondo alla card: così è allineato in tutta la riga */
.treat__l{align-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;
  font-size:var(--fs-2);font-weight:var(--fw-semi);color:var(--brand-600)}
/* Su touch il link era 70x27: sotto il minimo di 44px. Non lo ingrandisco
   otticamente, gli do l'area: padding verticale e margine negativo, cosi'
   il bersaglio cresce ma il disegno della card non si muove. */
@media(hover:none){
  .treat__l{min-height:44px;padding-block:10px;margin-bottom:-10px}
}
.treat__ic{flex:none}
.treat__l svg{width:15px;height:15px;transition:transform var(--dur-1) var(--ease)}
.treat__i:hover .treat__l svg{transform:translateX(3px)}
.treat__l:hover{color:var(--brand-700)}

/* ---------- tariffe ----------
   Nessuna gerarchia commerciale: niente piano in evidenza, niente sconti,
   niente confronto. Il prezzo ha lo STESSO peso della durata — si legge,
   non grida — ed è in tabular-nums perché le cifre restino incolonnate. */
/* la riga non deve allungarsi per tutta la pagina: il nome resterebbe
   lontanissimo dal prezzo e si leggerebbe a fatica */
/* Tariffe e FAQ: colonna di lettura stretta a sinistra, card a destra.
   La misura stretta e' voluta (nome e prezzo devono restare legati), ma
   mezzo schermo bianco faceva sembrare incompiute proprio le due sezioni
   che decidono se uno scrive. Sotto i 1100px tornano impilate. */
/* Un solo spazio fra le colonne per tutte le griglie a due colonne del
   sito: prima erano quattro valori diversi (34 qui e in FAQ, 44 in
   contatti, 32 negli studi) e a 1707px l'ultima cifra del prezzo finiva a
   34px dal bordo della card bianca — si vedeva. Vedi theme.gutterNota. */
.price__wrap,.faq__wrap{display:grid;gap:var(--gutter)}
@media(min-width:1100px){
  .price__wrap,.faq__wrap{grid-template-columns:minmax(0,820px) minmax(280px,1fr);
    align-items:start}
}
.price__side,.faq__side{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:clamp(20px,2vw,26px)}
@media(min-width:1100px){
  /* la card si allinea alla prima riga del listino, non al titolo */
  .faq__side{position:sticky;top:calc(var(--hdr-h) + 22px)}
}
.side__t{font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.012em;line-height:1.3;
  margin-bottom:12px}
.side__p{font-size:var(--fs-3);line-height:1.6;color:var(--ink-muted);margin-bottom:16px}
.faq__side .btn{width:100%;justify-content:center}
.faq__side .btn + .btn{margin-top:10px}
.price__side .price__notes{margin-top:0}
.price{display:grid;max-width:820px}
.price__r{display:grid;grid-template-columns:1fr auto auto;gap:4px 18px;align-items:baseline;
  padding-block:clamp(13px,1.2vw,18px);
  border-bottom:1px solid color-mix(in srgb,var(--brand-400) 25%,transparent);
  scroll-margin-top:calc(var(--hdr-h) + 24px)}
.price__r:last-of-type{border-bottom:0}
.price__n{font-weight:var(--fw-semi);font-size:var(--fs-4);letter-spacing:-.01em;line-height:1.35}
.price__d,.price__p{font-size:var(--fs-3);font-weight:var(--fw-semi);line-height:1.4;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.price__d{color:var(--ink-muted)}
.price__p{color:var(--ink);text-align:right;min-width:5ch}
.price__notes{margin-top:clamp(1.1rem,.8rem + 1vw,1.7rem);display:grid;gap:9px}
.price__note{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:var(--fs-2);line-height:1.55;color:var(--ink-muted);max-width:66ch}
.price__note svg{width:16px;height:16px;color:var(--brand-600);margin-top:3px}
@media(max-width:520px){
  .price__r{grid-template-columns:1fr auto;row-gap:2px}
  .price__n{grid-column:1/-1}
}



/* ---------- patologie trattate ----------
   Deve rispondere in pochi secondi a "il mio problema c'e'?", quindi
   gruppi larghi e voci come chip, non prosa. */
.pat{display:grid;gap:clamp(12px,1.3vw,18px);grid-template-columns:1fr}
@media(min-width:620px){.pat{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1150px){.pat{grid-template-columns:repeat(4,1fr)}}
.pat__g{display:flex;flex-direction:column;gap:10px;
  padding:clamp(16px,1.5vw,22px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-1)}
/* L'unico componente che tiene l'icona ACCANTO al titolo: i titoli sono
   corti, quindi qui non costa una riga in piu'.
   Ma sotto i 420px no: la griglia patologie e' a due colonne e il cerchio da
   48px accanto al titolo porta la larghezza minima della card a 167px, che
   per due non ci stanno in 328px utili — misurato, il sito sbordava in
   orizzontale a 360px, cioe' sul telefono di Fra. Li' l'icona torna sopra e
   la card puo' stringersi. */
.pat__head{display:flex;flex-direction:column;gap:10px}
@media(min-width:420px){.pat__head{flex-direction:row;align-items:center;gap:13px}}
.pat__t{font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.012em;line-height:1.3}
.pat__d{display:flex;flex-direction:column;gap:10px;flex:1}
/* su desktop il summary e' un paragrafo: niente marker, niente click */
.pat__s{font-size:var(--fs-2);line-height:1.5;color:var(--ink-muted);list-style:none;pointer-events:none}
.pat__s::-webkit-details-marker{display:none}
.pat__voci{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
/* MOBILE: otto card impilate erano 2852px di strada per una sezione di
   consultazione. Griglia a due colonne con icona e titolo; le voci stanno
   in un details chiuso, la descrizione breve fa da summary. */
@media(max-width:699px){
  .pat{grid-template-columns:repeat(2,1fr);gap:10px}
  .pat__g{padding:13px 12px;gap:8px}
  .pat__t{font-size:var(--fs-3)}
  .pat__s{pointer-events:auto;cursor:pointer;font-size:var(--fs-2);line-height:1.4;
    display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
    border-radius:8px}
  .pat__s::after{content:"";width:7px;height:7px;flex:none;
    border-right:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);
    transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-1) var(--ease)}
  .pat__d[open] .pat__s::after{transform:rotate(-135deg) translateY(-2px)}
  .pat__voci{padding-top:6px;gap:5px}
  .pat__voci li{font-size:var(--fs-1);padding:4px 9px}
  /* il gruppo aperto prende tutta la riga, cosi' le chip hanno spazio */
  .pat__g:has(.pat__d[open]){grid-column:1/-1}
}
.pat__voci li{padding:5px 11px;border-radius:999px;font-size:var(--fs-2);line-height:1.3;
  color:var(--ink);background:var(--surface);
  border:1px solid color-mix(in srgb,var(--brand-400) 24%,transparent)}
/* voci lunghe (frasi del paziente, non parole): una riga ciascuna, angoli
   morbidi invece della pillola, che su due righe diventava uno stadio.
   DOPO la regola base: stessa specificita', vince l'ultima */
.pat__voci--frasi{display:grid;gap:6px}
.pat__voci--frasi li{border-radius:10px}
/* chiusura onesta + CTA discreta */
.pat__fine{margin-top:clamp(18px,2vw,28px);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  padding:clamp(14px,1.4vw,20px) clamp(16px,1.6vw,24px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line)}
.pat__fine p{margin:0;font-size:var(--fs-3);line-height:1.55;color:var(--ink-muted);max-width:62ch}
.pat__fine .btn{margin-left:auto}
@media(max-width:560px){.pat__fine .btn{margin-left:0;width:100%}}

/* ---------- dove ricevo: tre schede + UNA mappa ---------- */
.studi{display:grid;gap:var(--gutter);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.studi{grid-template-columns:minmax(300px,.85fr) 1.15fr}}
.studi__list{display:grid;gap:clamp(12px,1.2vw,16px)}
.studio{padding:clamp(15px,1.4vw,20px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-1);
  scroll-margin-top:calc(var(--hdr-h) + 24px);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.studio.is-active{border-color:var(--brand-400);box-shadow:var(--sh-2)}
.studio__pick{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:0}
.studio__n{width:28px;height:28px;border-radius:999px;flex:none;display:grid;place-items:center;
  background:var(--fill,var(--brand-600));color:var(--fill-ink,var(--white));font-weight:var(--fw-strong);font-size:var(--fs-2)}
.studio__h{font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.012em}
.studio__a{margin-top:8px;font-style:normal;font-size:var(--fs-3);line-height:1.5;color:var(--ink-muted)}
.studio__oggi{margin-top:9px;font-size:var(--fs-3);line-height:1.45}
.studio__oggi b{font-weight:var(--fw-semi)}
.studio__ap{color:var(--ink-muted)}
.studio__chiuso{color:var(--ink-muted)}
/* studio senza orari (hours vuoto): una riga sola, "Su appuntamento".
   Il glifo prende il tono delle icone, il testo resta secondario. */
.studio__oggi--app{display:flex;align-items:center;gap:8px;color:var(--ink-muted)}
.studio__oggi--app svg{width:17px;height:17px;flex:none;color:var(--icon)}
.studio__ore{margin-top:7px}
.studio__ore summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:var(--fs-2);font-weight:var(--fw-semi);color:var(--brand-600);list-style:none}
.studio__ore summary::-webkit-details-marker{display:none}
.studio__ore summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-1) var(--ease)}
.studio__ore[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.studio__ul{margin-top:8px;display:grid;gap:5px;font-size:var(--fs-2);color:var(--ink-muted)}
.studio__ul li{display:flex;justify-content:space-between;gap:14px;max-width:280px}
.studio__links{margin-top:11px;display:flex;flex-wrap:wrap;gap:8px 18px}
.studio__links a{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-2);font-weight:var(--fw-semi);color:var(--brand-600)}
.studio__links a:hover{color:var(--brand-700)}
.studio__links svg{width:15px;height:15px}

/* la mappa: prima un'immagine statica costruita in build, Leaflet solo al click */
/* L'anteprima è l'immagine statica: è LEI a dare l'altezza al riquadro
   (width:100%; height:auto), così si vede anche se il resto del CSS non
   arriva. Niente aspect-ratio da tenere in sincrono col file. */
.mappa{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-1);background:var(--surface)}
@media(min-width:1000px){.mappa{position:sticky;top:calc(var(--hdr-h) + 20px)}}
.mappa__preview{position:relative;display:block}
.mappa__img{display:block;width:100%;height:auto}
.mappa__box{position:absolute;inset:0;z-index:1;display:none}
.mappa.is-live .mappa__box{display:block}
/* mappa viva a zoom frazionario (locations.map.bounds): i tile scalati
   lasciano cuciture di 1px fra l'uno e l'altro, e il plus-lighter di Leaflet
   le schiarisce invece di chiuderle. Tile sovrapposti di 1px e fusione
   normale. Una classe in piu' perche' leaflet.css arriva dopo questo file */
.mappa .mappa__box--esatta img.leaflet-tile{mix-blend-mode:normal;width:257px!important;height:257px!important}
.mappa.is-live .mappa__preview{display:none}
.mappa__load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
/* locations.map.button: 'bottom' | 'top' | 'below' — quando uno studio cade al centro
   dell'anteprima il bottone lo coprirebbe: si sposta in basso (sopra la
   nota) o in alto, dove non ci sono pin */
.mappa--bottone-basso .mappa__load{top:auto;bottom:calc(var(--fs-1) * 1.4 + 18px + 16px);transform:translateX(-50%)}
.mappa--bottone-alto .mappa__load{top:16px;transform:translateX(-50%)}
/* 'below': bottone e nota escono dall'immagine e le stanno SOTTO, in una
   barra. Per studi vicini ai bordi dell'anteprima, dove a qualche larghezza
   ogni posto sopra l'immagine copre un pin (lo misura work/pin-coperti.mjs) */
.mappa--sotto .mappa__preview{display:flex;flex-direction:column;align-items:flex-start}
.mappa--sotto .mappa__load{position:static;transform:none;margin:14px clamp(12px,1.4vw,18px) 0}
.mappa--sotto .mappa__nota{position:static;padding-bottom:14px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.mappa__nota{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:9px clamp(12px,1.4vw,18px);font-size:var(--fs-1);line-height:1.4;color:var(--ink-muted);
  background:color-mix(in srgb,var(--white) 90%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* i segnaposto di Leaflet: colori dal tema, evidenziazione senza cambiare
   il contrasto del numero (anello, non tinta) */
.pin{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  background:var(--fill,var(--brand-600));color:var(--fill-ink,var(--white));border:3px solid var(--fill-ink,var(--white));
  box-shadow:var(--sh-2);font-weight:var(--fw-strong);font-size:var(--fs-2);line-height:1;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
/* un solo studio: niente numero, il segnaposto e' un punto pieno */
.pin--solo{width:22px;height:22px}
.pin.is-active{transform:scale(1.3);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 42%,transparent),var(--sh-2)}
.leaflet-container{font:inherit;background:var(--surface)}
.leaflet-container a{color:var(--brand-600)}

/* ---------- fascia a domicilio (l'unica scura) ---------- */
/* le DUE onde di tutta la pagina: entrata col bianco della sezione sopra,
   uscita col --surface di quella sotto */
.onda{position:absolute;left:0;width:100%;display:block;z-index:1;pointer-events:none;
  height:clamp(34px,4.4vw,70px)}
.onda--su{top:-1px}
.onda--su path{fill:var(--white)}
.onda--giu{bottom:-1px;transform:scaleY(-1)}
.onda--giu path{fill:var(--surface)}
#domicilio{padding-block:calc(var(--sec-pad) * .5 + clamp(34px,4.4vw,70px))}
.section--dark > .wrap{position:relative;z-index:2}
/* l'evidenziatore su fondo scuro diventa una pastiglia piena: la banda a
   metà altezza lascerebbe le lettere metà su chiaro e metà su scuro */
.section--dark .mark{background-image:none;background-color:var(--brand-200);
  color:var(--brand-800);padding:0 .14em;border-radius:5px}
.hc{display:grid;gap:clamp(20px,2.4vw,40px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.hc{grid-template-columns:1.05fr .95fr;align-items:center}}
.hc__list{display:grid;align-content:start}
/* righe con chip: quattro voci da una riga pesavano 141px contro i 311 della
   card accanto, e sotto restavano 227px di vuoto */
.hc__i{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding-block:clamp(11px,1.15vw,15px);font-size:var(--fs-4);line-height:1.45;
  border-bottom:1px solid color-mix(in srgb,var(--brand-200) 18%,transparent)}
.hc__i:last-child{border-bottom:0}
.hc__area{padding:clamp(18px,1.8vw,26px);border-radius:var(--r);
  background:color-mix(in srgb,var(--white) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-200) 26%,transparent)}
.hc__area-t{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-200)}
.hc__comuni{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
/* un nome di comune non si spezza a meta': o sta sulla riga o va sulla
   successiva. Erano "Sommacam / pagna" su desktop e su mobile. */
.hc__comuni li{padding:5px 12px;border-radius:999px;font-size:var(--fs-2);
  white-space:nowrap;
  background:color-mix(in srgb,var(--white) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-200) 30%,transparent)}
.hc__nota{margin-top:14px;font-size:var(--fs-3);line-height:1.55;
  color:color-mix(in srgb,var(--brand-200) 80%,var(--white))}
.hc__area .btn{margin-top:16px}

/* ---------- recensioni Google ---------- */
#recensioni{overflow-x:clip}          /* contiene lo scorrevole a filo schermo */
.gsum{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(13px,1.6vw,24px);
  padding:clamp(15px,1.5vw,20px) clamp(17px,1.9vw,26px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-1);
  margin-bottom:clamp(1.5rem,1rem + 1.8vw,2.4rem)}
.gsum__logo{display:grid;place-items:center;flex:none}
/* La G di Google viene da Phosphor come tutto il resto (via l'unico hex
   grezzo che restava nei componenti). Monocroma prende currentColor: senza
   un tono suo ereditava il colore del testo e spariva. */
.gsum__logo svg{width:30px;height:30px;color:var(--icon)}
.gsum__b{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;min-width:0}
.gsum__score{font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);
  font-size:var(--fs-6);line-height:1;color:var(--brand-600);
  font-variation-settings:"SOFT" 0,"WONK" 0}
.gsum__meta{flex-basis:100%;font-size:var(--fs-2);color:var(--ink-muted);line-height:1.4}
.gsum__profile{color:var(--ink);font-weight:var(--fw-semi)}
.gsum__cta{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.gsum__cta .btn svg{width:16px;height:16px}
.gsum__link{font-size:var(--fs-3);font-weight:var(--fw-semi);color:var(--brand-600);
  text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand-400) 55%,transparent);
  text-underline-offset:3px}
.gsum__link:hover{color:var(--brand-700)}
/* su schermo stretto l'etichetta lunga del bottone non sta in una riga:
   va a capo invece di uscire dalla card */
@media(max-width:640px){
  .gsum{align-items:flex-start}
  .gsum__cta{margin-left:0;flex-basis:100%;gap:12px}
  .gsum__cta .btn{width:100%;white-space:normal;line-height:1.3;
    padding-block:10px;text-align:center}
}

/* mobile: scorrimento orizzontale con snap · desktop: griglia */
/* larghezza FISSA della colonna: con minmax(0,84%) le 15 card si
   comprimono a zero invece di far scorrere il nastro */
.rev__track{display:grid;gap:clamp(12px,1.3vw,18px);
  grid-auto-flow:column;grid-auto-columns:clamp(250px,82%,330px);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  margin-inline:calc(-1 * var(--wrap-pad));padding:4px var(--wrap-pad) 16px;
  scrollbar-width:thin;scrollbar-color:var(--brand-400) transparent}
/* Da tablet in su: griglia a righe. Le colonne tipografiche chiudevano a
   scaletta (prima colonna molto più corta, fondo frastagliato); con le righe
   e il testo tagliato allo STESSO numero di righe per tutte, le card hanno
   la stessa altezza e il fondo della sezione è dritto. */
/* tre colonne, non auto-fill: 6 (chiuso) e 15 (aperto) sono entrambi
   divisibili per 3, quindi nessuna riga finale spaiata in nessuno dei due stati */
@media(min-width:760px){
  .rev__track{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);
    overflow:visible;margin-inline:0;padding:0}
}
@media(min-width:1150px){.rev__track{grid-template-columns:repeat(3,1fr)}}
.rev{scroll-snap-align:start;display:grid;gap:9px;align-content:start;
  padding:clamp(15px,1.4vw,20px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-1)}
.rev__top{display:flex;align-items:center;gap:10px}
.rev__av{width:36px;height:36px;border-radius:999px;flex:none;display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-700);font-weight:var(--fw-strong);font-size:var(--fs-1);letter-spacing:.02em}
.rev__who{display:grid;line-height:1.2;min-width:0}
.rev__name{font-weight:var(--fw-semi);font-size:var(--fs-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev__date{font-size:var(--fs-1);color:var(--ink-muted)}
.rev__top svg{width:18px;height:18px;margin-left:auto;flex:none;color:var(--icon)}
/* stesso taglio per tutte (5 righe) e stessa altezza minima del blocco:
   è quello che tiene allineate le righe della griglia */
.rev__t{font-size:var(--fs-3);line-height:1.62;color:var(--ink-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
  min-height:calc(5 * 1.62em)}
.rev.is-open .rev__t{-webkit-line-clamp:99;min-height:0}
/* in chiuso se ne vedono 6: 15 card aperte erano troppa pagina */
.rev__track:not(.is-expanded) > .rev:nth-child(n+7){display:none}
.rev__foot{display:flex;justify-content:center;margin-top:clamp(14px,1.5vw,20px)}
.rev__toggle[hidden]{display:none}
.rev__more{align-self:start;justify-self:start;text-align:left;
  padding:2px 0;font-size:var(--fs-2);font-weight:var(--fw-semi);
  color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}
.rev__more:hover{color:var(--brand-700)}



/* ---------- prima seduta ---------- */
.ps{display:grid;gap:clamp(12px,1.3vw,18px);grid-template-columns:1fr}
@media(min-width:720px){.ps{grid-template-columns:repeat(3,1fr)}}
.ps__b{display:flex;flex-direction:column;gap:10px;
  padding:clamp(18px,1.7vw,26px);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line)}
.ps__t{font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.012em}
.ps__s{font-size:var(--fs-3);line-height:1.58;color:var(--ink-muted)}
.ps__tempi{margin-top:clamp(16px,1.6vw,22px);display:inline-flex;align-items:flex-start;gap:10px;line-height:1.5;
  font-size:var(--fs-3);font-weight:var(--fw-semi);color:var(--brand-700)}
.ps__tempi svg{width:19px;height:19px;color:var(--brand-600);flex:none;margin-top:2px}

/* ---------- faq ----------
   details nativi: si aprono senza JS. Il summary e' tutto cliccabile, il
   chevron ruota, il focus si vede. */
.faq{display:grid;gap:10px;max-width:820px}
.faq__i{border-radius:var(--r);background:var(--white);border:1px solid var(--line);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.faq__i[open]{border-color:color-mix(in srgb,var(--brand-400) 55%,transparent);box-shadow:var(--sh-1)}
.faq__q{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:clamp(14px,1.4vw,18px) clamp(16px,1.6vw,22px);cursor:pointer;
  font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.01em;line-height:1.35;
  list-style:none;border-radius:var(--r)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:focus-visible{box-shadow:var(--ring)}
.faq__chev{width:9px;height:9px;flex:none;margin-right:4px;
  border-right:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-2) var(--ease)}
.faq__i[open] .faq__chev{transform:rotate(-135deg) translateY(-3px)}
.faq__a{margin:0;padding:0 clamp(16px,1.6vw,22px) clamp(14px,1.4vw,18px);
  font-size:var(--fs-3);line-height:1.62;color:var(--ink-muted);max-width:66ch}

/* ---------- contatti ---------- */
.cont{display:grid;gap:var(--gutter);grid-template-columns:1fr;align-items:start}
/* La scheda NON si allunga fino alla quota del form. Lo stretch +
   space-between di prima le spartiva l'avanzo (~300px su desktop) fra i
   blocchi: due voragini dentro una card. Meglio una card corta e piena. */
@media(min-width:960px){.cont{grid-template-columns:1.15fr .85fr}}
/* i campi non seguono la colonna fino in fondo: oltre i ~640px una riga di
   input diventa scomoda da leggere e da compilare */
.cont__form fieldset{border:0;padding:0;margin:0;display:grid;gap:clamp(13px,1.3vw,17px);
  max-width:640px}
.campo{display:grid;gap:6px;margin:0}
.campo label{font-size:var(--fs-3);font-weight:var(--fw-semi);color:var(--ink)}
.campo__hint{font-weight:var(--fw-body);color:var(--ink-muted)}
/* --line e' pensato per i filetti decorativi: su un campo da compilare fa
   1.11:1 contro la sezione e il bordo sparisce. I campi sono componenti UI e
   vogliono 3:1, quindi usano --line-strong (3.62:1 su bianco, 3.28:1 su
   --brand-100). I filetti decorativi restano leggeri: la' 3:1 non serve. */
.campo input,.campo select,.campo textarea{
  width:100%;padding:12px 14px;border-radius:var(--r);
  background:var(--white);border:1.5px solid var(--line-strong);color:var(--ink);
  font:inherit;font-size:var(--fs-4);line-height:1.4;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.campo textarea{resize:vertical;min-height:132px}
.campo select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--brand-600) 50%),
                   linear-gradient(135deg,var(--brand-600) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
/* a fuoco il campo si scurisce sul bordo, ma l'anello resta quello globale */
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  border-color:var(--brand-600)}
.campo [aria-invalid="true"]{border-color:var(--brand-700)}
.campo__err{min-height:1.1em;font-size:var(--fs-2);line-height:1.35;color:var(--brand-700);font-weight:var(--fw-semi)}
.campo__err:empty{min-height:0}
/* avviso sanitario: sta SOPRA il messaggio, dove serve leggerlo */
.cont__avviso{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:12px 14px;border-radius:var(--r);
  background:color-mix(in srgb,var(--white) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-400) 32%,transparent);
  font-size:var(--fs-2);line-height:1.5;color:var(--ink-muted)}
.cont__avviso svg{width:18px;height:18px;color:var(--brand-600);margin-top:2px}
.campo--check{gap:8px}
.check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:var(--fs-3);line-height:1.5;font-weight:var(--fw-body);color:var(--ink-muted);cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand-600);cursor:pointer}
.check a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
/* campo esca: fuori dallo schermo, mai a display:none (i bot lo notano) */
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cont__send{justify-self:start;margin-top:2px}
.cont__send[aria-busy="true"]{opacity:.72;cursor:progress}
.cont__stato{margin:0;font-size:var(--fs-3);line-height:1.5;font-weight:var(--fw-semi)}
.cont__stato:empty{display:none}
.cont__stato.is-ok{color:var(--brand-700)}
.cont__stato.is-ko{color:var(--brand-800);font-weight:var(--fw-semi)}
.cont__stato.is-ok::before,.cont__stato.is-ko::before{content:"";display:inline-block;
  width:9px;height:9px;border-radius:999px;margin-right:9px;vertical-align:middle}
.cont__stato.is-ok::before{background:var(--whatsapp)}
.cont__stato.is-ko::before{background:var(--star)}

/* La scheda dei contatti e' UNA lista sola di modi per raggiungerlo.
   Prima erano tre blocchi con tre linguaggi diversi — quadratini tinti,
   testo nudo, paragrafo grigio — separati da due filetti e da ~115px di
   vuoto: 657px su un viewport da 844. Ora telefono, WhatsApp, email e i tre
   studi sono la stessa riga, i sotto-blocchi si distinguono per ritmo (una
   riga contro due) e non ripetono l'etichetta maiuscola, e la nota sui tempi
   chiude la card su fondo tinto invece di essere l'ultimo paragrafo grigio.
   Il padding e' una variabile perche' righe e nota lo rileggono per andare a
   filo dei bordi: e' il filetto a tutta larghezza che fa la lista. */
.cont__dir{--pad:clamp(16px,1.8vw,26px);
  padding:var(--pad) var(--pad) 0;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-1)}
/* una sola etichetta maiuscola in tutta la scheda: la sezione si chiama gia'
   Contatti, e tre erano rumore */
.cont__dir-t{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 clamp(12px,1.2vw,17px)}
.cont__lista{display:grid;margin-inline:calc(var(--pad) * -1)}
/* il filetto va da bordo a bordo della card, come il fondo dell'hover e come
   la riga tinta: e' quello che fa leggere le sei voci come una lista sola
   invece che come blocchi impilati. Per questo il margine negativo sta sul
   <li> e il padding che rimette il contenuto in colonna sta sul link. */
.cv{border-top:1px solid var(--line)}
.cv__r{display:grid;grid-template-columns:34px minmax(0,1fr);
  column-gap:12px;row-gap:1px;align-items:start;
  padding:7px var(--pad);
  color:var(--brand-600);
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
a.cv__r:hover{background:var(--brand-100);color:var(--brand-700)}
a.cv__r:active{background:var(--brand-100)}
/* il quadratino occupa la PRIMA riga della griglia e il valore ci si centra
   dentro: sulle righe a due linee resta appeso al nome invece di galleggiare
   in mezzo al blocco. Nessun numero magico: e' la griglia a tenerli insieme. */
.cv__ic{grid-column:1;grid-row:1}
.cv__val{grid-column:2;grid-row:1;align-self:center;min-width:0;
  font-size:var(--fs-4);font-weight:var(--fw-semi);line-height:1.32;letter-spacing:-.01em}
/* L'indirizzo mail e' lungo 31 caratteri e a 1rem andava a capo, spezzando
   l'allineamento della colonna. Misurato: il testo vuole 233px, la colonna ne
   offre 242 a 390px di viewport ma solo 214 a 360. Quindi il corpo scende con
   la larghezza — 14px da 390 in su, 12.4px a 360 — e si ferma a 12px, che e'
   il pavimento leggibile. Sotto i ~355px la riga non ci sta a nessun corpo
   ammesso: li' va a capo sul <wbr> dopo la chiocciola, che e' l'unico taglio
   che si legge ancora come un indirizzo. */
.cv__val--mail{font-size:var(--fs-4);
  letter-spacing:-.014em;overflow-wrap:normal}
.cv__sub{grid-column:2;grid-row:2;min-width:0;
  font-size:var(--fs-2);line-height:1.4;color:var(--ink-muted)}
/* riga di chiusura: stessa riga delle altre, ma tinta e non cliccabile.
   Arriva al bordo basso della card (per questo la card non ha padding
   sotto), cosi' si legge come la nota utile che e'. */
.cont__nota{margin:0 calc(var(--pad) * -1);padding-block:12px;
  border-top:1px solid var(--line);background:var(--brand-100);color:var(--ink);
  border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)}
.cont__nota .cv__val{color:var(--ink)}
.cv__ic--nota{background:var(--white)}

/* ---------- striscia scorrevole ----------
   La fascia e' tinta PIENA nell'azzurro dell'evidenziatore: cosi' si vede
   da sola e fa da gradino fra hero e chi-sono, che prima si toccavano
   entrambe quasi bianche. Testo --brand-800 sul fondo --brand-200: 8.14:1,
   calcolato a mano.
   Loop: due copie identiche affiancate, la traccia trasla di -50% e riparte
   esattamente sul gemello. Nessun salto, e nessuna richiesta in piu'. */
.mq{background:var(--brand-200);color:var(--brand-800);overflow:hidden;
  padding-block:clamp(11px,1.1vw,15px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq__track{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
.mq__set{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.mq__i{display:flex;align-items:center;white-space:nowrap;
  font-size:var(--fs-2);font-weight:var(--fw-semi);
  letter-spacing:.16em;text-transform:uppercase}
/* il separatore e' un rombo, non il pallino di tutti: un quadrato ruotato,
   zero markup e zero peso in piu'. Al 60% fa 3.12:1 sul fondo della fascia. */
.mq__i::after{content:"";width:6px;height:6px;flex:none;
  margin:0 clamp(18px,2.2vw,32px);transform:rotate(45deg);
  background:color-mix(in srgb,var(--brand-800) 60%,transparent)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* fermo: niente scorrimento, la lista si legge tutta e centrata, e il
   gemello sparisce perche' senza animazione sarebbe solo un doppione */
@media(prefers-reduced-motion:reduce){
  .mq__track{animation:none;width:100%;justify-content:center}
  .mq__set[aria-hidden="true"]{display:none}
  .mq__set{flex-wrap:wrap;justify-content:center;gap:2px 0}
  .mq__i:last-child::after{display:none}
}

/* ================= bersagli toccabili =================
   Su touch ogni comando autonomo deve essere alto almeno 44px. Non li
   ingrandisco otticamente: aggiungo area con padding verticale e la
   riassorbo con un margine negativo, cosi' il disegno non si muove.
   Due esclusioni dichiarate, non dimenticanze:
   - il link "informativa privacy" dentro la frase della spunta e' un link
     IN LINEA nel testo: allargarlo spezzerebbe la riga, e le linee guida
     escludono proprio i link inline;
   - il campo esca anti-bot sta fuori schermo e non e' un comando. */
@media(hover:none){
  .brand{min-height:44px}
  .studio__pick,.studio__ore > summary,.studio__links a,
  .pat__d > summary,.doc__toc a,
  .gsum__link,.rev__more,.ft__list a,.ft__col li > a{
    min-height:44px;display:inline-flex;align-items:center}
  /* nelle liste fitte l'area cresce ma il ritmo verticale resta quello */
  .ft__list{gap:0}
  .studio__links{row-gap:0}
  .check input[type=checkbox]{width:24px;height:24px}
}

/* ---------- footer ----------
   Seconda e ultima zona scura. Contrasti su --brand-800, calcolati:
   bianco 11.41:1 · --brand-200 8.14:1 · brand-200 al 75% 5.34:1.
   --brand-600 qui vale 1.74:1 e infatti non compare mai. */
.ft{background:var(--brand-800);color:var(--on-dark,var(--white));
  padding-block:clamp(2.6rem,1.8rem + 3.4vw,4.4rem) 0}
.ft__in{display:grid;gap:clamp(26px,3vw,44px);grid-template-columns:1fr}
@media(min-width:680px){.ft__in{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ft__in{grid-template-columns:1.5fr .8fr 1.25fr .75fr}}
.ft__col{min-width:0}
/* "Sezioni" ha 10 voci contro le 2-3 delle altre colonne e allungava la
   griglia da sola. Da 1000px in su la lista si divide in due colonne da 5:
   il footer torna in equilibrio senza togliere nessuna voce. Sotto quella
   larghezza resta una colonna sola, come le altre. */
@media(min-width:1000px){
  .ft__in{grid-template-columns:1.5fr 1.15fr 1.25fr .75fr}
  .ft__list--nav{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(14px,1.4vw,22px)}
}
.ft__brand{margin-right:0}
/* sul fondo scuro il gradiente del marchio finiva nel fondo stesso:
   qui parte da brand-400 così il quadrato stacca. Bianco su brand-600 = 6.55:1 */
/* stesso caso del badge nell'header sopra una fascia scura: il bianco sullo
   stop chiaro faceva 3.80:1. Pastiglia chiara, monogramma scuro, 8.14:1. */
.ft__brand .brand__mark{background:var(--icon-veil-dark);color:var(--icon-on-dark)}
.ft__brand .brand__name{color:var(--on-dark,var(--white))}
.ft__brand .brand__role{color:var(--brand-200)}
.ft__tag{margin-top:14px;max-width:42ch;font-size:var(--fs-3);line-height:1.6;
  color:color-mix(in srgb,var(--brand-200) 85%,transparent)}
.ft__socs{margin-top:16px;display:flex;gap:10px}
.ft__soc{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  color:var(--on-dark,var(--white));background:color-mix(in srgb,var(--on-dark,var(--white)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-200) 26%,transparent);
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease)}
.ft__soc svg{width:19px;height:19px}
/* su touch il tondino social e' un comando: 44px come tutti gli altri
   (la vetrina non ne disegna nessuno, un clone con un profilo vero si') */
@media(hover:none){.ft__soc{width:44px;height:44px}}
.ft__soc:hover{background:color-mix(in srgb,var(--on-dark,var(--white)) 18%,transparent);
  color:var(--brand-200);transform:translateY(-2px)}
.ft__t{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-200)}
.ft__t--2{margin-top:clamp(16px,1.6vw,22px)}
.ft__t + *{margin-top:12px}
.ft__list{display:grid;gap:9px;font-size:var(--fs-3);line-height:1.45}
.ft__list a{color:var(--on-dark,var(--white));overflow-wrap:anywhere;
  transition:color var(--dur-1) var(--ease)}
.ft__list a:hover{color:var(--brand-200)}
.ft__studi{display:grid;gap:9px;font-size:var(--fs-2);line-height:1.45;
  color:color-mix(in srgb,var(--brand-200) 85%,transparent)}
.ft__studi b{color:var(--on-dark,var(--white));font-weight:var(--fw-semi)}

/* barra inferiore: separata da una linea sottile */
/* il torna-su è fixed in basso a sinistra: in fondo alla pagina finirebbe
   sopra il copyright, quindi sotto i 640px la barra si tiene la sua altezza */
.ft__bottom{margin-top:clamp(26px,3vw,42px);
  padding-block:clamp(16px,1.8vw,22px);
  border-top:1px solid color-mix(in srgb,var(--brand-200) 20%,transparent);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline}
.ft__id,.ft__cr{margin:0;font-size:var(--fs-2);line-height:1.5;
  color:color-mix(in srgb,var(--brand-200) 85%,transparent)}
.ft__id{max-width:76ch}
/* footer.partner: una riga piccola come le note legali, col link sottolineato
   (stesso colore del testo: contrasto delle note legali) */
.ft__cr a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:639px){.ft__bottom{padding-bottom:calc(clamp(16px,1.8vw,22px) + 58px)}}

/* torna su: a SINISTRA, così non litiga col FAB WhatsApp che sta a destra */
.su{position:fixed;left:16px;bottom:16px;z-index:50;
  width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
  background:var(--brand-800);color:var(--on-dark,var(--white));
  border:1px solid color-mix(in srgb,var(--brand-200) 34%,transparent);
  box-shadow:var(--sh-2);opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
             background-color var(--dur-1) var(--ease)}
.su svg{width:21px;height:21px}
.su.is-in{opacity:1;transform:none}
.su:hover{background:var(--brand-700)}
.su[hidden]{display:none}
@media(min-width:640px){.su{left:20px;bottom:20px;width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.su{transition:none;transform:none}}


/* ---------- pagine secondarie (privacy, cookie, 404) ----------
   Stesso guscio della home. Colonna singola a 68ch: un'informativa si legge,
   non si scansiona, quindi la misura conta piu' della larghezza. */
.pagina main{padding-top:calc(var(--hdr-h) + clamp(2rem,1.2rem + 3vw,3.6rem))}
.doc{padding-bottom:clamp(3rem,2rem + 4vw,6rem)}
.doc__head{max-width:68ch;margin-bottom:clamp(1.6rem,1rem + 2vw,2.6rem)}
.doc__title{margin-bottom:14px}
.doc__intro{max-width:68ch}
.doc__toc{max-width:68ch;margin-bottom:clamp(1.8rem,1.2rem + 2vw,2.8rem);
  padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line)}
.doc__toc-t{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:12px}
.doc__toc ol{display:grid;gap:7px;counter-reset:toc}
.doc__toc li{counter-increment:toc;display:grid;grid-template-columns:auto 1fr;gap:10px;
  font-size:var(--fs-3);line-height:1.45}
.doc__toc li::before{content:counter(toc) ".";color:var(--brand-600);font-weight:var(--fw-semi);
  font-variant-numeric:tabular-nums}
.doc__toc a{color:var(--brand-600)}
.doc__toc a:hover{color:var(--brand-700);text-decoration:underline;text-underline-offset:3px}
.doc__s{max-width:68ch;margin-bottom:clamp(1.6rem,1.1rem + 1.8vw,2.4rem);
  scroll-margin-top:calc(var(--hdr-h) + 20px)}
.doc__h{font-size:var(--fs-5);font-weight:var(--fw-semi);letter-spacing:-.014em;
  line-height:1.3;margin-bottom:12px}
.doc__s p{font-size:var(--fs-4);line-height:1.72;color:var(--ink-muted);margin-bottom:12px}
.doc__s p:last-child{margin-bottom:0}
.doc__s a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}
.doc__ul{display:grid;gap:8px;margin-top:4px}
.doc__ul li{display:grid;grid-template-columns:auto 1fr;gap:11px;
  font-size:var(--fs-4);line-height:1.6;color:var(--ink-muted)}
.doc__ul li::before{content:"";width:6px;height:6px;border-radius:999px;margin-top:.62em;
  background:var(--brand-400)}
.doc__agg{max-width:68ch;margin-top:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  padding-top:clamp(14px,1.4vw,20px);border-top:1px solid var(--line);
  font-size:var(--fs-2);color:var(--ink-muted)}

/* ---------- 404 ---------- */
.e404{padding-block:clamp(2rem,1rem + 4vw,5rem) clamp(3rem,2rem + 4vw,6rem);text-align:center}
.e404__n{font-family:var(--font-display),Georgia,serif;font-weight:var(--fw-semi);
  font-size:var(--fs-8);line-height:.9;letter-spacing:-.03em;
  /* --brand-200 su bianco fa 1.40:1: decorativo o no, resta testo che si
     vede, e axe lo conta. --brand-400 fa 3.80:1, sopra il 3:1 richiesto per
     il testo grande, e il numerone si legge invece di sparire. */
  color:var(--brand-400);font-variation-settings:"SOFT" 0,"WONK" 0;margin-bottom:8px}
.e404__t{margin:14px auto 0;max-width:52ch}
.e404__cta{margin-top:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media(max-width:520px){.e404__cta{display:grid}.e404__cta .btn{width:100%}}

/* ---------- FAB WhatsApp (da immobiliare-casa-adl) ---------- */
.wa-fab{position:fixed;right:16px;bottom:16px;z-index:50;
  width:52px;height:52px;border-radius:999px;display:grid;place-items:center;
  background:var(--whatsapp);color:var(--white);
  box-shadow:0 8px 24px rgb(37 211 102/.45);
  transition:transform var(--dur-1) var(--ease);
  animation:wa-pulse 2.4s ease-out infinite}
.wa-fab svg{width:27px;height:27px}
.wa-fab:hover,.wa-fab:focus-visible{transform:scale(1.06)}
.wa-fab:active{transform:scale(.95)}
@media(min-width:640px){.wa-fab{right:20px;bottom:20px;width:58px;height:58px}.wa-fab svg{width:30px;height:30px}}
.wa-fab__tip{position:absolute;right:calc(100% + 14px);white-space:nowrap;
  padding:7px 13px;border-radius:10px;background:var(--ink);color:var(--on-dark,var(--white));
  font-size:var(--fs-2);font-weight:var(--fw-semi);opacity:0;pointer-events:none;box-shadow:var(--sh-2);
  transition:opacity var(--dur-2) var(--ease)}
.wa-fab:hover .wa-fab__tip{opacity:1}
@media(max-width:767px){.wa-fab__tip{display:none}}
@keyframes wa-pulse{
  0%{box-shadow:0 8px 24px rgb(37 211 102/.45),0 0 0 0 rgb(37 211 102/.5)}
  70%{box-shadow:0 8px 24px rgb(37 211 102/.45),0 0 0 15px rgb(37 211 102/0)}
  100%{box-shadow:0 8px 24px rgb(37 211 102/.45),0 0 0 0 rgb(37 211 102/0)}}

/* ---------- reveal (entrata scaglionata) ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}
/* nell'hero l'entrata è più corta: il contenuto è già sotto gli occhi.
   .is-in va RIPETUTO con pari specificità, altrimenti queste regole
   vincono sull'arrivo e il contenuto resta traslato per sempre. */
.hero .reveal{transform:translateY(14px)}
.hero .reveal.is-in{transform:none}
.hero .hero__fig{transform:translateY(0) scale(.985)}
.hero .hero__fig.is-in{transform:none}

/* ---------- responsive header ----------
   A 1024px marchio + 6 voci + bottone non ci stanno e andavano a capo:
   la soglia del burger sta dove la barra smette davvero di entrare. */
/* Soglie MISURATE ogni volta che cambia il numero di voci: con 9 voci
   marchio + nav + bottone chiedono 1300px di contenuto, marchio + nav 1137px.
   Sotto 1560 cade il bottone WhatsApp (il FAB fa già quel lavoro), sotto
   1400 cade la nav e resta il menu completo nel burger. */
@media(max-width:1559px){.hdr .btn--wa{display:none}}
@media(max-width:1399px){
  .nav{display:none}
  .burger{display:flex}
}
/* il selettore di lingua resta nell'header anche quando il menu passa nel
   burger: e' piccolo (tre sigle) e cambiare lingua non deve richiedere di
   aprire il menu. Sotto i 700px non c'e' posto accanto al marchio: vive nel
   menu mobile. */
@media(max-width:699px){.hdr .lingue--hdr{display:none}}
.nav a,.brand__name,.brand__role{white-space:nowrap}
/* un nome in maiuscole spaziate sui telefoni piu' stretti: la spaziatura
   si stringe (theme.nameTrackingSm) invece di far traboccare il marchio */
@media(max-width:400px){.brand__name{letter-spacing:var(--name-track-sm,var(--name-track,-.015em))}}

/* =========================================================
   VARIANTI DAI DATI — per i cloni
   Nessuna di queste regole tocca la vetrina: scattano solo sulle classi che
   il render mette quando i dati le chiedono (hero.tone, hero.imageShape,
   passi con icona, sezioni con tone: 'dark'). Colori solo da token, con il
   ripiego sui token di sempre.
   ========================================================= */

/* ---- hero scuro (hero.tone: 'dark') ----
   Stessa macchina dell'altezza (100svh, misure in svh), colori invertiti:
   fondo --brand-800 con due aloni appena accennati, testo --on-dark, il
   lead e le etichette nel mix oro/crema che si usa in tutte le fasce scure.
   Contrasti per composizione nei dati del clone (theme.contrastiNota). */
.hero--dark{color:var(--on-dark,var(--white));
  background:
    radial-gradient(90% 80% at 86% 18%, color-mix(in srgb,var(--brand-200) 13%,transparent) 0%, transparent 62%),
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb,var(--fill-hover,var(--brand-700)) 60%,transparent) 0%, transparent 66%),
    var(--brand-800)}
.hero--dark::after{mix-blend-mode:soft-light;opacity:.45}
.hero--dark .lead{color:color-mix(in srgb,var(--brand-200) 78%,var(--on-dark,var(--white)))}
.hero--dark b,.hero--dark strong{color:var(--on-dark,var(--white))}
.hero--dark .badge{background:color-mix(in srgb,var(--on-dark,var(--white)) 6%,transparent);
  border-color:color-mix(in srgb,var(--brand-200) 40%,transparent);box-shadow:none}
.hero--dark .badge svg{color:var(--brand-200)}
.hero--dark .badge__k{color:color-mix(in srgb,var(--brand-200) 78%,var(--on-dark,var(--white)))}
.hero--dark .hero__fig::before{display:none}
.hero--dark :focus-visible{outline-color:var(--brand-200)}

/* ---- bottoni sui fondi scuri: UN sistema solo ----
   Su chiaro il primario e' il riempimento pieno col suo inchiostro; su
   scuro si inverte (fondo --on-dark, testo --brand-800) e il secondario e'
   il contorno chiaro. E' la stessa coppia di .btn--on-dark, applicata da
   sola a qualunque bottone finisca su una banda scura. */
.hero--dark .btn--primary,.section--dark .btn--primary{background:var(--on-dark,var(--white));
  color:var(--brand-800);box-shadow:none}
.hero--dark .btn--primary:hover,.section--dark .btn--primary:hover{background:var(--brand-200);color:var(--brand-800);box-shadow:none}
.hero--dark .btn--ghost,.section--dark .btn--ghost{border-color:var(--brand-200);color:var(--on-dark,var(--white))}
.hero--dark .btn--ghost:hover,.section--dark .btn--ghost:hover{background:color-mix(in srgb,var(--on-dark,var(--white)) 8%,transparent)}

/* ---- ritratto tondo (hero.imageShape: 'round') ----
   Chi ha gia' un ritratto rotondo col suo anello non deve vederlo in un
   rettangolo con la cornice bianca. La figura resta alta quanto la colonna
   (la misura dell'hero non cambia); dentro, il cerchio e' il piu' grande che
   ci sta, centrato. */
.hero__fig--tondo{display:flex;align-items:center;justify-content:center}
.hero__fig--tondo .hero__img{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:1/1;
  border:0;border-radius:50%;object-fit:cover;object-position:50% 50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-200) 30%,transparent),var(--sh-3)}
.hero__fig--tondo .float-card{left:auto;right:4%;bottom:10%}
@media(max-width:1149px){
  .hero__fig--tondo .hero__img{width:auto;height:100%;max-width:100%;border:0;border-radius:50%}
  /* la card si appoggia al bordo SINISTRO del cerchio: a destra c'e' il FAB */
  .hero__fig--tondo .float-card{right:auto;left:max(0px,calc(50% - var(--photo-h) * .5 - 10px));bottom:6px}
}

/* ---- selettore di lingua (solo con piu' lingue) ----
   Link semplici: nessun cookie, nessuna memoria. Nell'header sta accanto al
   menu e ne segue le soglie; nel menu mobile sta sotto le voci. La lingua
   corrente e' marcata (aria-current) e non sembra un link. */
.lingue{display:flex;align-items:center;gap:2px}
.lingue a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 8px;
  border-radius:10px;font-size:var(--fs-2);font-weight:var(--fw-semi);letter-spacing:.08em;color:var(--ink-muted);
  transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.lingue a:hover{color:var(--brand-600)}
.lingue a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand-600);border-radius:0}
.hdr.is-on-dark .lingue a{color:color-mix(in srgb,var(--brand-200) 78%,var(--on-dark,var(--white)))}
.hdr.is-on-dark .lingue a[aria-current="page"]{color:var(--on-dark,var(--white));box-shadow:inset 0 -2px 0 var(--brand-200)}
.lingue--hdr{padding-left:10px;margin-left:4px;border-left:1px solid var(--line)}
.hdr.is-on-dark .lingue--hdr{border-left-color:color-mix(in srgb,var(--brand-200) 30%,transparent)}
.lingue--menu{margin-top:18px;gap:6px}
.lingue--menu a{min-width:48px;min-height:44px;border:1px solid var(--line)}
.lingue--menu a[aria-current="page"]{border-color:var(--brand-600);box-shadow:none;border-radius:10px}
@media(hover:none){.lingue a{min-height:44px;min-width:44px}}

/* ---- nota accanto alla CTA dell'hero (hero.ctaNote) ----
   Una riga, piccola: "rispondo entro...". Sta sotto i bottoni, dove si
   decide se scrivere. */
.hero__nota{margin-top:10px;font-size:var(--fs-2);line-height:1.45;color:var(--ink-muted);max-width:62ch}
.hero--dark .hero__nota{color:color-mix(in srgb,var(--brand-200) 78%,var(--on-dark,var(--white)))}

/* ---- dettagli comuni a tutti gli studi (locations.sharedOnce) ---- */
.studi__col{display:grid;gap:clamp(12px,1.2vw,16px);align-content:start}
.studi__comune{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:0;
  padding:12px clamp(15px,1.4vw,20px);border-radius:var(--r);background:var(--brand-100);
  font-size:var(--fs-3);line-height:1.45;color:var(--ink)}
.studi__app,.studi__tel{display:inline-flex;align-items:center;gap:8px}
.studi__app svg,.studi__tel svg{width:17px;height:17px;flex:none;color:var(--icon)}
.studi__tel{font-weight:var(--fw-semi);color:var(--brand-600)}
.studi__tel:hover{color:var(--brand-700)}
@media(hover:none){.studi__tel{min-height:44px}}

/* ---- "cosa non faccio" (conditions.limits) ---- */
.pat__limiti{margin-top:clamp(18px,2vw,28px);padding:clamp(16px,1.6vw,24px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line)}
.pat__limiti-t{font-size:var(--fs-4);font-weight:var(--fw-semi);letter-spacing:-.01em;margin-bottom:10px}
.pat__limiti-l{display:grid;gap:7px clamp(20px,2.4vw,40px);grid-template-columns:1fr}
@media(min-width:900px){.pat__limiti-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pat__limiti-l li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:var(--fs-3);line-height:1.5;color:var(--ink-muted)}
.pat__limiti-l li::before{content:"";width:10px;height:2px;margin-top:.74em;border-radius:2px;background:var(--brand-400)}

/* ---- passi con icona (i pilastri: nessuna sequenza) ----
   L'icona sta in un anello sottile. Niente linea che li collega: quattro
   pilastri non sono passi uno dopo l'altro. Su desktop li separa un filetto
   verticale, come nel materiale stampato dei clienti che li usano. */
.step__ic{--ic:clamp(58px,3.6vw + 30px,76px);width:var(--ic);height:var(--ic);border-radius:999px;
  display:grid;place-items:center;flex:none;
  border:1px solid var(--brand-400);color:var(--brand-600)}
.step__ic svg{width:44%;height:44%}
.section--dark .step__ic{border-color:var(--brand-200);color:var(--brand-200)}
.steps--icone .step::after{display:none}
.steps--icone .step__t{font-size:max(var(--fs-5),1.25rem)}
@media(min-width:820px){
  .steps--icone .step{justify-items:center;text-align:center;gap:12px}
  .steps--icone .step + .step::before{content:"";position:absolute;top:8%;bottom:8%;
    left:calc(var(--step-gap) * -.5);width:1px;
    background:color-mix(in srgb,var(--brand-200) 45%,transparent)}
}
@media(max-width:819px){
  .steps--icone .step{grid-template-columns:auto 1fr;grid-template-areas:"n t" "n s";column-gap:18px;align-items:center}
  .steps--icone .step__ic{grid-area:n;--ic:56px;align-self:start}
}
.section--dark .step__n{color:var(--brand-200)}
.section--dark .step__s{color:color-mix(in srgb,var(--brand-200) 78%,var(--on-dark,var(--white)))}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ---------- informativa per i pazienti (pages.patientNotice) ----------
   Riepilogo in cima, bottone di stampa, modulo di conferma di lettura in
   fondo. La stampa toglie header, footer, indice, modulo e bottoni: resta
   il testo, nero su bianco. */
.doc__box{max-width:68ch;margin-bottom:clamp(1.6rem,1rem + 2vw,2.4rem);
  padding:clamp(18px,1.8vw,26px) clamp(20px,2vw,30px);border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--brand-600);box-shadow:var(--sh-1)}
.doc__box-t{font-size:var(--fs-5);font-weight:var(--fw-semi);line-height:1.3;margin-bottom:12px}
.doc__box ul{display:grid;gap:9px;list-style:none;padding:0;margin:0}
.doc__box li{position:relative;padding-left:22px;font-size:var(--fs-4);line-height:1.6;color:var(--ink)}
.doc__box li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:999px;background:var(--brand-600)}
.doc__box a,.ps__nota a,.faq__a a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}
.doc__azioni{max-width:68ch;margin:clamp(1.4rem,1rem + 1.4vw,2rem) 0 0}
.conf{max-width:68ch;margin-top:clamp(2rem,1.4rem + 2vw,3rem);padding:clamp(20px,2vw,32px);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  scroll-margin-top:calc(var(--hdr-h) + 20px)}
.conf__testo{font-size:var(--fs-4);line-height:1.65;color:var(--ink-muted);margin-bottom:18px}
.conf__form{display:grid;gap:16px}
.conf__invia{justify-self:start}
.ps__nota{display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  font-size:var(--fs-3);line-height:1.55;color:var(--ink-muted)}
.ps__nota svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--brand-600)}

@media print{
  .hdr,.ft,.skip,.wa-fab,.su,.mnav,.conf,.doc__azioni,.doc__toc{display:none !important}
  html,body{background:white !important;color:black !important}
  .reveal{opacity:1 !important;transform:none !important}
  .doc{padding:0}
  .doc .wrap{max-width:none;padding:0}
  .doc__head,.doc__box,.doc__s{max-width:none}
  .doc__box,.doc__s{break-inside:avoid-page}
  .doc__title{font-size:20pt}
  .doc__h,.doc__box-t{font-size:13pt}
  .doc__intro,.doc__s p,.doc__box li,.doc__ul li,.doc__agg{color:black !important;font-size:10.5pt;line-height:1.5}
  .doc__box{box-shadow:none;border:1px solid silver;border-left:4px solid gray}
  .doc a{color:black !important;text-decoration:none}
  @page{margin:16mm}
}