/* PROPOSTA B — "Studio": colonna unica, titoli serif grandi e leggeri, molto respiro */
:root{
  --ground:#F4F4F1; --surface:#FBFBF9; --surface-2:#E9E9E2;
  --ink:#1C2321; --ink-2:#414B48; --muted:#717C78;
  --rule:#D8D8CF; --rule-soft:#E6E6DE;
  --accent:#0E5E73; --accent-ink:#0A4B5C;
  --area-clinica:#1F6B5B; --area-formazione:#4A4E8C; --area-ricerca:#0E5E73;
  --focus:#0E5E73; --shadow:none; --maxw:800px; --prose:62ch; --r:0px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131614; --surface:#1A1E1B; --surface-2:#222724;
    --ink:#ECEDE7; --ink-2:#C6CBC6; --muted:#949C97;
    --rule:#2D332F; --rule-soft:#242926;
    --accent:#6FB7CB; --accent-ink:#8CCADC;
    --area-clinica:#68B8A3; --area-formazione:#9C9FD8; --area-ricerca:#6FB7CB;
    --focus:#6FB7CB;
  }
}
:root[data-theme="dark"]{
  --ground:#131614; --surface:#1A1E1B; --surface-2:#222724;
  --ink:#ECEDE7; --ink-2:#C6CBC6; --muted:#949C97;
  --rule:#2D332F; --rule-soft:#242926;
  --accent:#6FB7CB; --accent-ink:#8CCADC;
  --area-clinica:#68B8A3; --area-formazione:#9C9FD8; --area-ricerca:#6FB7CB;
  --focus:#6FB7CB;
}

*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.72;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:400;letter-spacing:-.01em;text-wrap:balance;line-height:1.18;margin:0}
p{margin:0} ul{margin:0;padding:0;list-style:none}
img{max-width:100%}

.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px}

header.site{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--rule-soft)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:20px}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.brand b{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:1.1rem}
.brand span{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
nav.main{display:flex;gap:18px;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--muted);font-size:.8rem;font-weight:500;letter-spacing:.04em;padding:2px 0;
  border-bottom:1px solid transparent;white-space:nowrap}
nav.main a:hover{color:var(--ink);border-bottom-color:var(--rule)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

main{padding-block:0 72px;min-height:60vh}
.page{display:none} .page.is-on{display:block}

.hero{padding-block:72px 56px}
.salta{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:50}
.salta:focus{left:12px;top:12px}
.hero-foto{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:end}
@media (max-width:620px){.hero-foto{grid-template-columns:1fr;gap:18px;align-items:start}}
.sede{border-left:1px solid var(--rule);padding-left:22px}
@media (max-width:620px){.sede{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:16px}}
.sede .et{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sede .nome{font-family:"Newsreader",Georgia,serif;font-size:1.22rem;font-weight:400;margin-top:8px;color:var(--ink)}
.sede .ind{font-size:.92rem;color:var(--ink-2);margin-top:6px}
.sede .ind a{color:var(--accent-ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ritratto{width:100%;max-width:200px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  background:var(--surface-2);justify-self:start}
.ritratto-sm{width:100%;max-width:240px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  background:var(--surface-2);margin-bottom:22px}
.hero h1{font-size:clamp(2.6rem,7vw,4rem);font-weight:300;letter-spacing:-.025em}
.ruolo{margin-top:14px;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)}
.hero .lead{max-width:var(--prose);margin-top:28px;font-size:1.14rem;color:var(--ink-2);line-height:1.68}
.hero .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.chip{font-size:.73rem;font-weight:500;letter-spacing:.03em;color:var(--muted);
  border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);padding:5px 12px}

.phead{padding-block:66px 38px}
.phead h1{font-size:clamp(2rem,5vw,3rem);font-weight:300;letter-spacing:-.02em;margin-top:16px}
.phead .lead{max-width:var(--prose);margin-top:22px;font-size:1.08rem;color:var(--ink-2)}
.phead.clinica .eyebrow{color:var(--area-clinica)}
.phead.formazione .eyebrow{color:var(--area-formazione)}
.phead.ricerca .eyebrow{color:var(--area-ricerca)}

section.block{padding-block:44px;border-top:1px solid var(--rule-soft)}
section.block h2{font-size:1.65rem;font-weight:400}
section.block h3{font-size:1.02rem;font-family:"Public Sans",sans-serif;font-weight:600}
.stack{display:flex;flex-direction:column;gap:22px}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.prose{max-width:var(--prose);color:var(--ink-2)}
.prose p + p{margin-top:16px}

/* colonna unica: la scheda laterale diventa un blocco in linea */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.aside{position:static;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px 28px;margin-block:44px 0}
.aside h2, section.block .aside h2{font-family:"Public Sans",sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.aside dl{margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.aside dt{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.aside dd{margin:5px 0 0;font-size:.93rem;color:var(--ink)}

/* porte: righe tipografiche grandi */
.doors{display:flex;flex-direction:column}
.door{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;
  padding-block:30px;border-top:1px solid var(--rule);text-decoration:none;color:inherit;background:transparent}
.door:last-child{border-bottom:1px solid var(--rule)}
.door:hover h3{color:var(--dot)}
.door .eyebrow{color:var(--dot)}
.door h3, section.block .door h3{font-family:"Newsreader",Georgia,serif;font-size:1.9rem;font-weight:300;letter-spacing:-.02em;margin-top:10px;transition:color .15s ease}
.door p{margin-top:12px;color:var(--ink-2);font-size:.97rem;max-width:54ch}
.door .go{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dot);white-space:nowrap}
@media (max-width:640px){.door{grid-template-columns:1fr;gap:14px}}

.tl{display:flex;flex-direction:column}
.tl .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;padding-block:22px;border-top:1px solid var(--rule-soft)}
.tl .row:first-child{border-top:0}
.tl .when{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:5px}
.tl .what strong{font-weight:600;font-size:1.02rem}
.tl .what .org{color:var(--muted);font-size:.93rem;margin-top:3px}
.tl .what p{margin-top:9px;color:var(--ink-2);font-size:.94rem;max-width:58ch}
.tl .what ul{margin-top:11px;display:flex;flex-direction:column;gap:8px}
.tl .what li{color:var(--ink-2);font-size:.92rem;padding-left:17px;position:relative}
.tl .what li::before{content:"";position:absolute;left:0;top:.74em;width:8px;height:1px;background:var(--muted)}
@media (max-width:640px){.tl .row{grid-template-columns:1fr;gap:6px}}

.bullets{display:flex;flex-direction:column;gap:13px;max-width:var(--prose)}
.bullets li{color:var(--ink-2);padding-left:22px;position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:.76em;width:11px;height:1px;background:var(--accent)}
.bullets li strong{color:var(--ink);font-weight:600}

.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.group h3, section.block .group h3{font-family:"Public Sans",sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.group ul{margin-top:13px;display:flex;flex-direction:column;gap:8px}
.group li{font-size:.93rem;color:var(--ink-2)}

.notice{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:26px 28px;max-width:var(--prose)}
.notice h3, section.block .notice h3{font-family:"Newsreader",Georgia,serif;font-size:1.25rem;font-weight:400}
.notice p{margin-top:12px;color:var(--ink-2);font-size:.95rem}
.notice p + p{margin-top:12px}

.arts{display:flex;flex-direction:column}
.art{display:grid;grid-template-columns:130px minmax(0,1fr);gap:26px;padding-block:20px;border-top:1px solid var(--rule-soft)}
.art:first-child{border-top:0}
.art .when{font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.art h3, section.block .art h3{font-family:"Newsreader",Georgia,serif;font-size:1.35rem;font-weight:400}
.art p{margin-top:8px;color:var(--ink-2);font-size:.94rem;max-width:56ch}
.art-t{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;display:block}
.art-t:hover{color:var(--accent-ink)}
.art-body{margin-top:14px;display:flex;flex-direction:column;gap:14px;max-width:var(--prose)}
.art-body p{margin-top:0;font-size:.96rem;max-width:none}
.empty{border:1px solid var(--rule);background:var(--surface);padding:24px;max-width:var(--prose);color:var(--muted);font-size:.94rem}
@media (max-width:640px){.art{grid-template-columns:1fr;gap:5px}}

.refs{display:flex;flex-direction:column;gap:18px;max-width:68ch}
.refs li{padding-left:22px;position:relative;color:var(--ink-2);font-size:.94rem;line-height:1.6}
.refs li::before{content:"";position:absolute;left:0;top:.76em;width:11px;height:1px;background:var(--muted)}

.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:100%}
.ccard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.ccard dt{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ccard dd{margin:8px 0 0;font-size:.98rem}
.ccard dd a{word-break:break-word}

/* pulsanti "a due lati", come su Everroot */
.cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:var(--accent);color:#fff;
  text-decoration:none;font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:15px 28px;border:1px solid var(--accent);border-radius:0;cursor:pointer;font-family:inherit;
  transition:background .15s ease,border-color .15s ease}
.cta:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
:root[data-theme="dark"] .cta, :root[data-theme="dark"] .cta:hover{color:#0B1417}

footer.site{border-top:1px solid var(--rule);background:var(--ground)}
.foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;padding-block:40px}
.foot h2, footer.site .foot h2{font-family:"Public Sans",sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.foot ul{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.foot li,.foot p{font-size:.87rem;color:var(--ink-2)}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--accent-ink);text-decoration:underline}
.legal{border-top:1px solid var(--rule-soft);padding-block:20px 104px;font-size:.7rem;letter-spacing:.06em;color:var(--muted);line-height:2}
.legal span{white-space:nowrap}
.legal span + span::before{content:"/";margin:0 12px;color:var(--rule)}

.gestisci{background:none;border:0;padding:0;font:inherit;font-size:.86rem;color:var(--muted);cursor:pointer;text-align:left}
.gestisci:hover{color:var(--accent-ink);text-decoration:underline}

.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--rule)}
.barra-in{max-width:var(--maxw);margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.barra-t{font-size:.88rem;color:var(--ink-2)}
.barra-az{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.bbtn{font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;
  border:0;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;
  background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.bbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.bbtn-p{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.bbtn-p:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
:root[data-theme="dark"] .bbtn-p, :root[data-theme="dark"] .bbtn-p:hover{color:#0B1417}
@media (max-width:640px){
  .barra-in{flex-direction:column;align-items:stretch;gap:8px;padding:10px 20px 12px}
  .barra-t{font-size:.78rem;color:var(--muted);text-align:center}
  .barra-az{width:100%;margin-left:0;gap:6px}
  .bbtn{flex:1;text-align:center;padding:12px 4px;font-size:.66rem}
}
.nota-priv{font-size:.84rem;color:var(--muted);background:var(--surface-2);padding:14px 16px}

dialog.ed{width:min(720px,94vw);max-height:88vh;padding:0;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);color:var(--ink)}
dialog.ed::backdrop{background:rgba(20,24,20,.5)}
.ed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 18px;border-bottom:1px solid var(--rule-soft)}
.ed-head h2{font-size:1.5rem;font-weight:400}
.ed-head p{margin-top:7px;font-size:.87rem;color:var(--muted)}
.ed-body{padding:24px 26px;overflow:auto;display:flex;flex-direction:column;gap:22px}
.ed-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:18px 26px;border-top:1px solid var(--rule-soft);background:var(--surface-2)}
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:.62rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--ground);
  border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px;width:100%}
.campo textarea{min-height:170px;resize:vertical;line-height:1.65}
.campo .aiuto{font-size:.81rem;color:var(--muted)}
.due{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.due{grid-template-columns:1fr}}
.btn{font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;
  border:0;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;cursor:pointer;background:transparent;color:var(--ink)}
.btn-p{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn-p:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn-p:disabled{opacity:.5;cursor:progress}
.btn-g{color:var(--ink-2)}
.btn-g:hover{color:var(--ink);border-color:var(--muted)}
.btn-d{border:0;color:var(--muted);font-size:.68rem;padding:5px 8px}
.btn-d:hover{color:#8F3A33}
.ed-msg{font-size:.84rem;color:var(--muted);margin-right:auto;max-width:42ch;text-transform:none;letter-spacing:0}
.ed-msg.ko{color:#8F3A33}
.elenco{display:flex;flex-direction:column;border:1px solid var(--rule)}
.voce{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 15px;border-top:1px solid var(--rule-soft)}
.voce:first-child{border-top:0}
.voce .titolo{font-size:.92rem;color:var(--ink)}
.voce .quando{font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.voce .azioni{display:flex;gap:4px;flex-shrink:0}
.nessuno{padding:15px;font-size:.87rem;color:var(--muted)}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ---------- telefono: stessa esperienza, meno ingombro ---------- */
@media (max-width:640px){
  .wrap{padding-inline:20px}
  .bar{padding-block:14px;gap:10px}
  nav.main{gap:14px}
  nav.main a{font-size:.78rem}
  .hero{padding-block:40px 40px}
  .phead{padding-block:36px 26px}
  section.block{padding-block:32px}
  .hero h1{font-size:2.3rem}
  .hero .lead{font-size:1.05rem;margin-top:22px}
  .door h3, section.block .door h3{font-size:1.5rem}
  .ritratto{max-width:100%}
}

/* ============================================================
   BANDE, PROFONDITÀ E MOVIMENTO
   ============================================================ */
:root{
  --sabbia:#EDE6DC;
  --verde:#123C47;
  --su-verde:#EAF2F3;
  --ombra:0 1px 2px rgba(22,32,30,.05), 0 16px 34px -24px rgba(22,32,30,.45);
  --ombra-alta:0 2px 4px rgba(22,32,30,.06), 0 28px 54px -30px rgba(22,32,30,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sabbia:#1E1D19; --verde:#0C2B33; --su-verde:#DCEAEC;
    --ombra:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -24px rgba(0,0,0,.8);
    --ombra-alta:0 2px 4px rgba(0,0,0,.45), 0 28px 54px -30px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --sabbia:#1E1D19; --verde:#0C2B33; --su-verde:#DCEAEC;
  --ombra:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -24px rgba(0,0,0,.8);
  --ombra-alta:0 2px 4px rgba(0,0,0,.45), 0 28px 54px -30px rgba(0,0,0,.85);
}

/* la banda esce dalla colonna e attraversa tutta la pagina */
[data-banda]{
  background:var(--banda);
  box-shadow:0 0 0 100vw var(--banda);
  clip-path:inset(0 -100vw);
  border-top:0 !important;
  padding-block:60px;
  margin-block:8px;
}
[data-banda="sabbia"]{--banda:var(--sabbia)}
[data-banda="verde"]{--banda:var(--verde);color:var(--su-verde)}
[data-banda="verde"] h2,
[data-banda="verde"] h3,
[data-banda="verde"] .prose,
[data-banda="verde"] .prose p,
[data-banda="verde"] p{color:var(--su-verde)}
[data-banda="verde"] .eyebrow{color:color-mix(in srgb,var(--su-verde) 70%,transparent)}
[data-banda="verde"] .cta{background:var(--su-verde);border-color:var(--su-verde);color:var(--verde)}
[data-banda="verde"] .cta:hover{background:#fff;border-color:#fff;color:var(--verde)}
[data-banda="verde"] .bullets li::before{background:var(--su-verde)}
@media (max-width:640px){[data-banda]{padding-block:42px}}

/* intestazioni di pagina: velo del colore dell'area */
.phead.clinica,.phead.formazione,.phead.ricerca{
  background:var(--velo);box-shadow:0 0 0 100vw var(--velo);clip-path:inset(0 -100vw);padding-bottom:44px}
.phead.clinica{--velo:color-mix(in srgb,var(--area-clinica) 8%,var(--ground))}
.phead.formazione{--velo:color-mix(in srgb,var(--area-formazione) 8%,var(--ground))}
.phead.ricerca{--velo:color-mix(in srgb,var(--area-ricerca) 8%,var(--ground))}

/* profondità */
.ritratto{box-shadow:var(--ombra-alta);transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease}
.ritratto:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--ombra-alta)}
.ccard,.aside,.empty{box-shadow:var(--ombra)}
.notice{box-shadow:var(--ombra)}
[data-banda="sabbia"] .ccard,[data-banda="sabbia"] .notice{background:var(--surface)}
.door{transition:transform .22s cubic-bezier(.2,.7,.3,1),padding-left .22s ease}
.door:hover{transform:translateX(4px)}
.bbtn,.cta{transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.bbtn:hover,.cta:hover{transform:translateY(-1px)}
.barra{box-shadow:0 -10px 30px -24px rgba(22,32,30,.8)}

/* ------------------------- movimento ------------------------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes entraFoto{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
  .hero h1{animation:entra .62s cubic-bezier(.2,.7,.3,1) both}
  .hero .ruolo{animation:entra .62s cubic-bezier(.2,.7,.3,1) .08s both}
  .hero .lead{animation:entra .62s cubic-bezier(.2,.7,.3,1) .16s both}
  .hero .meta{animation:entra .62s cubic-bezier(.2,.7,.3,1) .24s both}
  .hero-foto{animation:entraFoto .8s cubic-bezier(.2,.7,.3,1) .3s both}

  @supports (animation-timeline: view()){
    /* parte gia' leggibile: il movimento accompagna, non nasconde */
    @keyframes sali{from{opacity:.62;transform:translateY(16px)}to{opacity:1;transform:none}}
    .door,.tl .row,.ccard,.group,.art,.notice{
      animation:sali linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 18%;
    }
  }
}

/* ============================================================
   RIFINITURA: verdino al posto del beige, forme morbide,
   intestazione più presente
   ============================================================ */
:root{
  --verdino:#E981EA;           /* segnaposto sostituito sotto */
  --r-card:18px; --r-bottone:12px; --r-foto:18px;
}
:root{ --verdino:#E3EBE8; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --verdino:#17231F; } }
:root[data-theme="dark"]{ --verdino:#17231F; }

/* le bande diventano verdino, con volume */
[data-banda="sabbia"]{--banda:var(--verdino)}
[data-banda]{
  background:none;
  box-shadow:none;
  clip-path:none;
  position:relative;
  isolation:isolate;
  padding-block:68px;
  margin-block:14px;
}
[data-banda]::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;bottom:0;left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--banda) 70%, #ffffff) 0%, transparent 60%),
    linear-gradient(180deg, var(--banda) 0%, color-mix(in srgb,var(--banda) 93%, #000000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 24px 48px -40px rgba(12,34,32,.75);
}
[data-banda="verde"]::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 28px 54px -38px rgba(0,0,0,.8);
}
@media (max-width:640px){[data-banda]{padding-block:48px}}

/* intestazioni di pagina: stesso volume */
.phead.clinica,.phead.formazione,.phead.ricerca{
  background:none;box-shadow:none;clip-path:none;position:relative;isolation:isolate}
.phead.clinica::before,.phead.formazione::before,.phead.ricerca::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--velo) 60%, #ffffff) 0%, transparent 62%),
    linear-gradient(180deg, var(--velo) 0%, color-mix(in srgb,var(--velo) 92%, #000000) 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.05), 0 22px 44px -40px rgba(12,34,32,.7);
}

/* forme morbide */
.ccard,.aside,.notice,.empty,.elenco,.contact,dialog.ed{border-radius:var(--r-card)}
.ritratto,.ritratto-sm{border-radius:var(--r-foto)}
.cta,.btn,.bbtn{border-radius:var(--r-bottone)}
.chip{border:1px solid var(--rule);border-radius:999px;padding:7px 16px;background:var(--surface)}
.bbtn{border:1px solid var(--rule);background:var(--surface);letter-spacing:.06em;text-transform:none;font-size:.84rem;padding:11px 18px}
.bbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn{border:1px solid var(--rule);background:var(--surface);text-transform:none;letter-spacing:.01em;font-size:.88rem;padding:10px 18px}
.btn-g{background:transparent}
.btn-d{border-color:transparent;background:transparent}
.cta{text-transform:none;letter-spacing:.01em;font-size:.94rem;font-weight:600;padding:14px 26px}
.ccard{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta)}
.door{border-radius:var(--r-card)}
.notice{padding:28px 30px}

/* intestazione più alta, voci in verde */
header.site{border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--ground) 92%, transparent);backdrop-filter:saturate(160%) blur(8px)}
.bar{padding-block:24px}
.brand b{font-size:1.3rem;font-weight:500}
.brand span{font-size:.68rem;letter-spacing:.17em;color:var(--accent-ink);font-weight:700}
nav.main{gap:24px}
nav.main a{font-size:.92rem;font-weight:500;color:var(--accent-ink);letter-spacing:.005em;padding:4px 0;
  border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink);border-bottom-color:color-mix(in srgb,var(--accent) 40%,transparent)}
nav.main a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
@media (max-width:640px){
  .bar{padding-block:16px}
  .brand b{font-size:1.1rem}
  nav.main{gap:16px}
  nav.main a{font-size:.84rem}
}

/* ripristino dei pulsanti pieni dopo l'ammorbidimento */
.bbtn-p{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.bbtn-p:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn-p:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
:root[data-theme="dark"] .bbtn-p,:root[data-theme="dark"] .bbtn-p:hover,
:root[data-theme="dark"] .btn-p,:root[data-theme="dark"] .btn-p:hover{color:#0B1417}
[data-banda="verde"] .cta{background:var(--su-verde);border-color:var(--su-verde);color:var(--verde)}

/* l'intestazione respira su tutta la larghezza, il testo resta in colonna */
header.site .wrap{max-width:1080px}
footer.site .wrap{max-width:1080px}
.barra-in{max-width:1080px}
@media (min-width:900px){
  .bar{flex-wrap:nowrap}
  nav.main{flex-wrap:nowrap}
}

/* ============================================================
   AREE COME SCHEDE, ELENCHI, STATI AL PASSAGGIO
   ============================================================ */

/* le tre aree diventano schede staccate, con cornice fissa */
.doors{display:flex;flex-direction:column;gap:20px;border:0}
.door{
  border:1px solid var(--rule);
  border-left:4px solid var(--dot);
  border-radius:var(--r-card);
  background:var(--surface);
  padding:28px 30px;
  box-shadow:var(--ombra);
  border-top:1px solid var(--rule);
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease,
             border-left-width .24s ease,background .24s ease;
}
.door:last-child{border-bottom:1px solid var(--rule)}
.door:hover{
  transform:translateY(-4px);
  box-shadow:var(--ombra-alta);
  border-left-width:9px;
  background:color-mix(in srgb,var(--dot) 5%, var(--surface));
}
.door:hover h3,section.block .door:hover h3{color:var(--dot)}
.door h3,section.block .door h3{margin-top:12px}

/* il "Vai" diventa un pulsante vero */
.door .go{
  font-size:.95rem;font-weight:600;letter-spacing:.02em;text-transform:none;
  border:1px solid var(--dot);border-radius:999px;padding:11px 22px;color:var(--dot);
  transition:background .2s ease,color .2s ease,transform .2s ease;
  align-self:center;
}
.door:hover .go{background:var(--dot);color:var(--surface);transform:translateX(3px)}
@media (max-width:640px){.door .go{align-self:start;display:inline-block}}

/* elenchi puntati più eleganti */
.bullets{gap:16px}
.bullets li{padding-left:30px;position:relative;line-height:1.7}
.bullets li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:transparent;
  border:1.5px solid var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%, transparent);
}
.bullets li strong{color:var(--accent-ink);font-weight:600}
[data-banda="verde"] .bullets li::before{border-color:var(--su-verde);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--su-verde) 14%, transparent)}
[data-banda="verde"] .bullets li strong{color:#fff}

.tl .what li{padding-left:24px}
.tl .what li::before{content:"";width:5px;height:5px;border-radius:50%;background:transparent;
  border:1.5px solid var(--muted);top:.68em;left:3px}
.refs li{padding-left:26px}
.refs li::before{content:"";width:5px;height:5px;border-radius:50%;background:transparent;
  border:1.5px solid var(--muted);top:.72em;left:3px}

/* barra in fondo: testo e pulsanti più grandi */
.barra-t{font-size:1rem;color:var(--ink);font-weight:500}
.bbtn{font-size:.95rem;padding:13px 22px}
@media (max-width:640px){
  .barra-t{font-size:.9rem}
  .bbtn{font-size:.82rem;padding:13px 6px}
}

/* tutto ciò che si clicca reagisce */
a,button{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease}
.foot a:hover{color:var(--accent-ink);text-decoration:underline}
.ccard dd a:hover{color:var(--accent);text-decoration:underline}
.art-t{transition:transform .18s ease,color .18s ease}
.art-t:hover{transform:translateX(3px);color:var(--accent-ink)}
.gestisci:hover{transform:translateX(2px)}
.prose a:hover,.notice a:hover{color:var(--accent)}
.cta:hover{transform:translateY(-2px);box-shadow:var(--ombra)}
.bbtn:hover{transform:translateY(-2px);box-shadow:var(--ombra)}
.brand:hover b{color:var(--accent-ink)}

/* ============================================================
   HOME: le tre aree affiancate in tre riquadri
   ============================================================ */
.doors{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:stretch;
}
@media (min-width:860px){
  .doors{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* i riquadri escono dalla colonna di testo e usano tutta la larghezza utile */
@media (min-width:1000px){
  .doors{width:min(1080px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
}

.door{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:30px 28px 26px;
  border:1px solid var(--rule);
  border-left:1px solid var(--rule);
  border-top:4px solid var(--dot);
  border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:var(--ombra);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease,
             border-top-width .26s ease,background .26s ease;
}
.door:last-child{border-bottom:1px solid var(--rule)}
.door > div{flex:1 1 auto}
.door:hover{
  transform:translateY(-8px);
  box-shadow:var(--ombra-alta);
  border-left-width:1px;
  border-top-width:9px;
  background:color-mix(in srgb,var(--dot) 5%, var(--surface));
}
.door:focus-visible{outline:2px solid var(--dot);outline-offset:4px}
.door h3,section.block .door h3{margin-top:10px;font-size:1.6rem}
.door p{margin-top:12px;max-width:none;font-size:.95rem}
.door .go{
  align-self:flex-start;
  margin-top:auto;
}
@media (max-width:859px){
  .door{padding:26px 24px}
  .door h3,section.block .door h3{font-size:1.5rem}
}

/* ============================================================
   SEGNI GRAFICI, RIQUADRI PIÙ ARIOSI, CITAZIONE
   ============================================================ */
.icona{
  display:grid;place-items:center;
  width:58px;height:58px;border-radius:50%;
  background:color-mix(in srgb,var(--dot) 9%, var(--surface));
  color:var(--dot);
  flex:0 0 auto;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dot) 18%, transparent);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),background .32s ease,box-shadow .32s ease;
}
.icona svg{width:30px;height:30px;display:block}
.door:hover .icona{
  transform:scale(1.09) rotate(-4deg);
  background:color-mix(in srgb,var(--dot) 16%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dot) 34%, transparent);
}

/* riquadri: più aria, angoli più generosi, luce in alto */
.door{
  padding:32px 30px 28px;
  border-radius:22px;
  border-top:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.door::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--dot),color-mix(in srgb,var(--dot) 25%, transparent));
  transform:scaleX(.26);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.door:hover::after{transform:scaleX(1)}
.door:hover{border-top-width:1px;transform:translateY(-8px)}
.door .eyebrow{margin-top:4px}
.door h3,section.block .door h3{margin-top:10px}

/* filigrana nelle intestazioni di area */
.phead.clinica,.phead.formazione,.phead.ricerca{position:relative}
.deco{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:168px;height:168px;pointer-events:none;opacity:.14;
}
.deco svg{width:100%;height:100%;stroke-width:.85}
.phead.clinica .deco{color:var(--area-clinica)}
.phead.formazione .deco{color:var(--area-formazione)}
.phead.ricerca .deco{color:var(--area-ricerca)}
@media (max-width:1040px){.deco{width:120px;height:120px;right:8px;opacity:.1}}
@media (max-width:760px){.deco{display:none}}

/* citazione accanto al ritratto */
.aside-top{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:center;
  margin-bottom:28px;
}
.aside-top .ritratto-sm{margin:0}
@media (max-width:700px){.aside-top{grid-template-columns:1fr;gap:22px}}
.citazione{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:1.46rem;line-height:1.48;color:var(--accent-ink);
  margin:0;padding-left:28px;position:relative;text-wrap:balance;
}
.citazione::before{
  content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 10%, transparent));
}
@media (max-width:700px){.citazione{font-size:1.22rem;padding-left:22px}}

/* ============================================================
   RIQUADRI HOME: testata ad arco, icona grande, titolo in grassetto
   ============================================================ */
.door{
  padding:0 0 30px;
  border-radius:26px;
  overflow:hidden;
  border:1px solid var(--rule);
  border-top:1px solid var(--rule);
  background:var(--surface);
}
.door::after{display:none}
.door > div{padding:24px 30px 0}
.door .go{margin:auto 30px 0}

/* la testata: fascia tinta che si chiude ad arco */
.icona{
  width:100%;
  height:130px;
  border-radius:0 0 78px 78px;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb,var(--dot) 20%, var(--surface)) 0%,
                    color-mix(in srgb,var(--dot) 7%, var(--surface)) 72%);
  color:var(--dot);
  display:grid;place-items:center;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--dot) 16%, transparent);
  transition:border-radius .36s cubic-bezier(.2,.7,.3,1),background .36s ease,height .36s ease;
}
.icona svg{width:48px;height:48px;transition:transform .36s cubic-bezier(.2,.7,.3,1)}
.door:hover .icona{
  border-radius:0 0 40px 40px;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb,var(--dot) 30%, var(--surface)) 0%,
                    color-mix(in srgb,var(--dot) 12%, var(--surface)) 72%);
}
.door:hover .icona svg{transform:translateY(-3px) scale(1.07)}

/* titoli delle aree in grassetto */
.door h3,section.block .door h3{font-weight:600;font-size:1.55rem;margin-top:10px}
.door .eyebrow{margin-top:0}

@media (max-width:859px){
  .icona{height:112px;border-radius:0 0 64px 64px}
  .icona svg{width:42px;height:42px}
  .door > div{padding:22px 24px 0}
  .door .go{margin:auto 24px 0}
}

/* ============================================================
   SENZA ICONE · PULSANTI OMOGENEI · INGRESSO DELLA HOME
   ============================================================ */

/* la testata resta come campo di colore, più bassa */
.icona{height:92px;border-radius:0 0 72px 72px}
.door:hover .icona{height:100px;border-radius:0 0 46px 46px}
.deco{display:none}
@media (max-width:859px){.icona{height:78px;border-radius:0 0 58px 58px}}

/* un solo sistema di pulsanti: pastiglia, stesso verde, pieno o contornato */
.cta,.btn,.bbtn,.door .go{
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  padding:13px 26px;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--accent-ink);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.cta,.bbtn-p,.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.cta:hover,.bbtn-p:hover,.btn-p:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;transform:translateY(-2px)}
.bbtn:hover,.btn:hover,.door .go{border-color:var(--accent)}
.bbtn:not(.bbtn-p):hover,.btn:not(.btn-p):hover{background:color-mix(in srgb,var(--accent) 8%, transparent);transform:translateY(-2px)}
.door .go{color:var(--accent-ink);border-color:var(--accent);background:transparent}
.door:hover .go{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(3px)}
.btn-d{border-color:transparent;background:transparent;color:var(--muted);font-size:.84rem;padding:6px 12px}
.btn-d:hover{background:var(--surface-2);border-color:transparent;color:#8F3A33;transform:none}
:root[data-theme="dark"] .cta,:root[data-theme="dark"] .cta:hover,
:root[data-theme="dark"] .bbtn-p,:root[data-theme="dark"] .bbtn-p:hover,
:root[data-theme="dark"] .btn-p,:root[data-theme="dark"] .btn-p:hover,
:root[data-theme="dark"] .door:hover .go{color:#0B1417}
[data-banda="verde"] .cta{background:var(--su-verde);border-color:var(--su-verde);color:var(--verde)}
[data-banda="verde"] .cta:hover{background:#fff;border-color:#fff;color:var(--verde)}

/* ingresso della home: sequenza più ampia */
@media (prefers-reduced-motion: no-preference){
  @keyframes saleDolce{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes salePiano{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes entraDaDestra{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  @keyframes avvicinaFoto{from{opacity:0;transform:translateY(30px) scale(.955)}to{opacity:1;transform:none}}
  @keyframes schedaSu{from{opacity:0;transform:translateY(42px) scale(.975)}to{opacity:1;transform:none}}

  .pag-home .hero h1{animation:saleDolce .78s cubic-bezier(.17,.75,.27,1) both}
  .pag-home .hero .ruolo{animation:salePiano .7s cubic-bezier(.17,.75,.27,1) .12s both}
  .pag-home .hero .lead{animation:salePiano .7s cubic-bezier(.17,.75,.27,1) .22s both}
  .pag-home .hero .meta{animation:none}
  .pag-home .hero .meta .chip{animation:salePiano .6s cubic-bezier(.17,.75,.27,1) both}
  .pag-home .hero .meta .chip:nth-child(1){animation-delay:.32s}
  .pag-home .hero .meta .chip:nth-child(2){animation-delay:.39s}
  .pag-home .hero .meta .chip:nth-child(3){animation-delay:.46s}
  .pag-home .hero-foto{animation:none}
  .pag-home .ritratto{animation:avvicinaFoto .9s cubic-bezier(.17,.75,.27,1) .5s both}
  .pag-home .sede{animation:entraDaDestra .8s cubic-bezier(.17,.75,.27,1) .66s both}

  .pag-home .door{animation:schedaSu .8s cubic-bezier(.17,.75,.27,1) both}
  .pag-home .door:nth-child(1){animation-delay:.8s}
  .pag-home .door:nth-child(2){animation-delay:.9s}
  .pag-home .door:nth-child(3){animation-delay:1s}

  @supports (animation-timeline: view()){
    /* in home l'ingresso ha la precedenza sulla comparsa a scorrimento */
    .pag-home .door{animation-timeline:auto;animation-range:normal}
  }
}

/* ============================================================
   RIQUADRI PULITI · INGRESSO A SCORRIMENTO · EVIDENZA AL PASSAGGIO
   ============================================================ */

/* niente testata colorata: solo contenuto */
.icona{display:none}
.door{padding:32px 30px 30px}
.door > div{padding:0}
.door .go{margin:auto 0 0}
@media (max-width:859px){.door{padding:28px 24px 26px}}

/* le tre schede entrano a cascata quando la sezione arriva sullo schermo */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .pag-home .door{
      animation:schedaSu linear both;
      animation-timeline:view();
      animation-delay:0s;
    }
    .pag-home .door:nth-child(1){animation-range:entry 2% entry 62%}
    .pag-home .door:nth-child(2){animation-range:entry 10% entry 72%}
    .pag-home .door:nth-child(3){animation-range:entry 18% entry 82%}
  }
  /* se le timeline di scorrimento non ci sono, resta l'ingresso al caricamento */
  @supports not (animation-timeline: view()){
    .pag-home .door:nth-child(1){animation-delay:.8s}
    .pag-home .door:nth-child(2){animation-delay:.9s}
    .pag-home .door:nth-child(3){animation-delay:1s}
  }
}

/* evidenza al passaggio su ogni riga di contenuto */
.tl .row,.art{
  position:relative;
  border-radius:14px;
  padding-inline:18px;
  margin-inline:-18px;
  transition:background .26s ease,transform .26s cubic-bezier(.2,.7,.3,1);
}
.tl .row::before,.art::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:var(--accent);opacity:0;transform:scaleY(.35);transform-origin:center;
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1);
}
.tl .row:hover,.art:hover{
  background:color-mix(in srgb,var(--accent) 5%, transparent);
  transform:translateX(4px);
}
.tl .row:hover::before,.art:hover::before{opacity:1;transform:scaleY(1)}
[data-banda="verde"] .tl .row:hover{background:color-mix(in srgb,var(--su-verde) 10%, transparent)}
[data-banda="verde"] .tl .row::before{background:var(--su-verde)}

.bullets li{transition:transform .22s cubic-bezier(.2,.7,.3,1),color .22s ease}
.bullets li:hover{transform:translateX(5px);color:var(--ink)}
.bullets li:hover::before{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%, transparent)}
[data-banda="verde"] .bullets li:hover{color:#fff}
[data-banda="verde"] .bullets li:hover::before{background:var(--su-verde);border-color:var(--su-verde)}

.refs li,.group li{transition:color .22s ease,transform .22s ease}
.refs li:hover,.group li:hover{color:var(--ink);transform:translateX(3px)}
.refs li:hover::before{border-color:var(--accent);background:var(--accent)}

.aside dl > div{border-radius:10px;padding-inline:10px;margin-inline:-10px;
  transition:background .22s ease}
.aside dl > div:hover{background:color-mix(in srgb,var(--accent) 5%, transparent)}

/* ============================================================
   ULTIME RIFINITURE: barra staccata, qualifica contornata,
   blocchi in evidenza, pulsanti con inclinazione
   ============================================================ */

/* la barra in alto si stacca dalla pagina */
header.site{
  background:var(--surface);
  border-bottom:1px solid var(--rule);
  box-shadow:0 8px 24px -20px rgba(14,34,32,.6);
  backdrop-filter:none;
}

/* la qualifica sotto il nome diventa un riquadro */
.ruolo{
  display:inline-block;
  border:1px solid color-mix(in srgb,var(--accent) 38%, transparent);
  border-radius:999px;
  padding:8px 18px;
  background:color-mix(in srgb,var(--accent) 5%, transparent);
  transition:background .24s ease,border-color .24s ease,transform .24s cubic-bezier(.2,.7,.3,1),
             box-shadow .24s ease;
}
.ruolo:hover{
  background:color-mix(in srgb,var(--accent) 12%, transparent);
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--ombra);
}

/* le etichette del profilo reagiscono */
.chip{transition:background .24s ease,border-color .24s ease,color .24s ease,
      transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease}
.chip:hover{
  border-color:var(--accent);
  color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 7%, var(--surface));
  transform:translateY(-3px);
  box-shadow:var(--ombra);
}

/* il riquadro "In sintesi" e gli altri blocchi */
.aside,.notice,.empty{
  transition:box-shadow .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.aside:hover,.notice:hover{
  box-shadow:var(--ombra-alta);
  border-color:color-mix(in srgb,var(--accent) 35%, var(--rule));
  transform:translateY(-3px);
}

/* inclinazione dei pulsanti al passaggio */
.cta,.bbtn,.btn,.door .go{
  transform:perspective(620px) translateZ(0);
  will-change:transform;
}
.cta:hover,.bbtn:hover,.btn:not(.btn-d):hover{
  transform:perspective(620px) rotateX(11deg) translateY(-3px) scale(1.015);
  box-shadow:0 12px 22px -14px rgba(14,46,54,.75);
}
.cta:active,.bbtn:active,.btn:not(.btn-d):active{
  transform:perspective(620px) rotateX(4deg) translateY(-1px) scale(.995);
}
.door:hover .go{
  transform:perspective(620px) rotateX(11deg) translateY(-3px) translateX(3px) scale(1.015);
  box-shadow:0 12px 22px -14px rgba(14,46,54,.75);
}

/* i riquadri bianchi si comportano come le schede della home:
   nessuna evidenza interna, è il blocco intero a sollevarsi */
.aside dl > div{background:none;border-radius:0;padding-inline:0;margin-inline:0;transition:none}
.aside dl > div:hover{background:none}

.aside,.notice{
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease;
}
.aside:hover,.notice:hover{
  transform:translateY(-8px);
  box-shadow:var(--ombra-alta);
  border-color:var(--rule);
}
.ccard:hover{transform:translateY(-8px);box-shadow:var(--ombra-alta)}

/* la qualifica torna testo semplice */
.ruolo{display:block;border:0;background:none;padding:0;box-shadow:none;transform:none}
.ruolo:hover{background:none;border:0;box-shadow:none;transform:none}

/* è la presentazione a diventare un blocco che si solleva */
.pag-home .hero .lead{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  padding:26px 30px;
  box-shadow:var(--ombra);
  max-width:var(--prose);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease;
}
.pag-home .hero .lead:hover{transform:translateY(-8px);box-shadow:var(--ombra-alta)}
@media (max-width:640px){.pag-home .hero .lead{padding:22px 22px}}

/* i pulsanti si sollevano come i riquadri: nessuna rotazione */
.cta,.bbtn,.btn,.door .go{transform:none;will-change:transform}
.cta:hover,.bbtn:hover,.btn:not(.btn-d):hover,.door:hover .go{
  transform:translateY(-6px);
  box-shadow:var(--ombra-alta);
}
.cta:active,.bbtn:active,.btn:not(.btn-d):active{transform:translateY(-2px);box-shadow:var(--ombra)}

/* anche il ritratto in home si solleva come gli altri blocchi */
.pag-home .ritratto{transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease}
.pag-home .ritratto:hover{transform:translateY(-8px);box-shadow:var(--ombra-alta)}

/* anche le voci del menu si sollevano */
nav.main{gap:8px}
nav.main a{
  padding:9px 15px;
  border-radius:999px;
  border-bottom:2px solid transparent;
  transition:background .2s ease,color .2s ease,
             transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease;
}
nav.main a:hover{
  background:color-mix(in srgb,var(--accent) 9%, transparent);
  color:var(--ink);
  transform:translateY(-5px);
  box-shadow:var(--ombra);
  border-bottom-color:transparent;
}
nav.main a[aria-current="page"]{border-bottom-color:var(--accent)}
nav.main a[aria-current="page"]:hover{border-bottom-color:var(--accent)}
@media (max-width:640px){
  nav.main{gap:4px}
  nav.main a{padding:7px 10px}
}

/* le animazioni di ingresso rilasciano la proprietà quando finiscono,
   altrimenti bloccano il sollevamento al passaggio del mouse */
@media (prefers-reduced-motion: no-preference){
  .pag-home .hero h1,
  .pag-home .hero .ruolo,
  .pag-home .hero .lead,
  .pag-home .hero .meta .chip,
  .pag-home .ritratto,
  .pag-home .sede,
  .pag-home .door{
    animation-fill-mode:backwards;
  }
}

/* anche qui la comparsa a scorrimento deve rilasciare la proprietà */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .door,.tl .row,.ccard,.group,.art,.notice{animation-fill-mode:backwards}
  }
}

/* i riquadri degli articoli in attesa si sollevano come gli altri */
.empty{
  background:var(--surface);
  border:1px solid var(--rule);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease;
}
.empty:hover{transform:translateY(-8px);box-shadow:var(--ombra-alta)}

/* il nome in alto reagisce come le voci di menu */
.brand{
  padding:10px 16px;
  border-radius:16px;
  margin-left:-16px;
  transition:background .2s ease,transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease;
}
.brand:hover{
  background:color-mix(in srgb,var(--accent) 8%, transparent);
  transform:translateY(-4px);
  box-shadow:var(--ombra);
}
@media (max-width:640px){.brand{padding:8px 12px;margin-left:-12px}}

/* ingresso anche nelle altre pagine: riparte a ogni cambio di sezione */
@media (prefers-reduced-motion: no-preference){
  .phead .eyebrow{animation:salePiano .6s cubic-bezier(.17,.75,.27,1) backwards}
  .phead h1{animation:saleDolce .74s cubic-bezier(.17,.75,.27,1) .08s backwards}
  .phead .lead{animation:salePiano .68s cubic-bezier(.17,.75,.27,1) .2s backwards}
  .phead .deco{animation:salePiano .9s cubic-bezier(.17,.75,.27,1) .3s backwards}
  .phead + .wrap > section.block:first-of-type,
  .phead + .cols > div > section.block:first-of-type{
    animation:salePiano .72s cubic-bezier(.17,.75,.27,1) .3s backwards;
  }
}

/* ---------- barra contatti richiudibile ---------- */
.barra{transition:transform .25s ease, visibility 0s}
.barra.chiusa{transform:translateY(110%);visibility:hidden;transition:transform .25s ease, visibility 0s .25s}
.barra-x{position:absolute;top:-26px;right:14px;height:26px;padding:0 11px;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);border:1px solid var(--rule);border-bottom:0;border-radius:7px 7px 0 0;
  font:inherit;font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;line-height:1}
.barra-x:hover{color:var(--accent-ink);border-color:var(--accent)}
.barra-apri{position:fixed;right:14px;bottom:0;z-index:29;height:34px;padding:0 16px;
  display:inline-flex;align-items:center;
  font:inherit;font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--accent);color:#fff;border:0;border-radius:7px 7px 0 0;cursor:pointer;line-height:1}
.barra-apri:hover{background:var(--accent-ink)}
.barra-apri[hidden]{display:none}
:root[data-theme="dark"] .barra-apri,:root[data-theme="dark"] .barra-apri:hover{color:#0B1417}

/* ---------- telefono: menu a scomparsa ---------- */
.nav-tog{display:none}
@media (max-width:760px){
  .nav-tog{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;flex:0 0 auto;
    width:44px;height:40px;padding:0 10px;background:none;
    border:1px solid var(--rule);border-radius:8px;cursor:pointer}
  .nav-tog i{display:block;height:2px;background:var(--accent-ink);border-radius:2px}
  .nav-tog[aria-expanded="true"]{border-color:var(--accent)}
  nav.main{display:none;width:100%;flex-direction:column;gap:0;margin-top:12px;
    border-top:1px solid var(--rule-soft)}
  header.site.nav-aperto nav.main{display:flex}
  nav.main a{padding:13px 2px;font-size:.95rem;border-bottom:1px solid var(--rule-soft)}
  nav.main a:last-child{border-bottom:0}
  nav.main a[aria-current="page"]{color:var(--ink);font-weight:600;
    border-left:3px solid var(--accent);padding-left:12px}
}

/* ---------- telefono: niente scorrimento laterale, barra compatta ---------- */
@media (max-width:640px){
  /* fine riga legale: va a capo invece di sfondare lo schermo */
  .legal{padding-block:18px 152px;line-height:1.9}
  .legal span{white-space:normal;display:block}
  .legal span + span::before{content:none}

  /* barra contatti su due file invece di tre */
  .barra-in{padding:9px 16px 11px;gap:7px}
  .barra-t{font-size:.74rem}
  .barra-az{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin-left:0}
  .barra-az .bbtn{flex:none;padding:11px 4px;font-size:.63rem;letter-spacing:.08em}
  .barra-az .bbtn-p{grid-column:1 / -1}
}