/* ══════════════════════════════════════════════════════════════════════════
   LUISA D'ANIELLO · v4 — «LA FILIGRANA»
   Sistema visivo ricavato dal logotipo. Ordine del file:
   1 · font   2 · token   3 · base   4 · logotipo   5 · elementi
   6 · sezioni   7 · movimento   8 · risposte allo schermo
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · FONT ─── variabili: un file, tutti i pesi da 200 a 900.
   🔴 Il nome della famiglia NON può essere `Serif`/`Sans`/`Mono`: sono parole
      chiave generiche del CSS e il browser scarta la regola. Prefisso «LD». */
@font-face{font-family:"LD Serif";src:url(../fonts/serif-var.woff2)format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"LD Serif";src:url(../fonts/serif-var-i.woff2)format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"LD Sans";src:url(../fonts/sans-var.woff2)format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"LD Mono";src:url(../fonts/mono-var.woff2)format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

/* ─── 2 · TOKEN ─── */
:root{
  /* colore — dal logotipo: inchiostro profondo, carta calda, un oro trattenuto */
  --notte:#16243D;
  --notte-2:#1D2E4B;
  --notte-3:#26395D;
  --carta:#FBFAF7;
  --nebbia:#F1EDE6;
  --bianco:#FFFFFF;
  --testo:#252E3B;
  --tenue:#5C6878;
  --tenue-scuro:#96A3B4;
  --oro:#A88A5C;
  --oro-chiaro:#CBB08A;
  --oro-testo:#80653C;  /* l'oro per il TESTO su fondo chiaro: 4,68:1 anche sulla nebbia */
  --blu:#1E4E7A;
  --blu-chiaro:#5E9BC9;
  --filo:rgba(37,46,59,.13);
  --filo-scuro:rgba(251,250,247,.14);

  /* carattere */
  --serif:"LD Serif",Georgia,"Times New Roman",serif;
  --sans:"LD Sans","Segoe UI",system-ui,sans-serif;
  --mono:"LD Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* scala tipografica — 1.26 su mobile, si apre a 1.33 su desktop */
  --t--1:clamp(.74rem,.72rem + .1vw,.8rem);
  --t-0:clamp(.94rem,.9rem + .18vw,1.02rem);
  --t-1:clamp(1.06rem,1rem + .3vw,1.2rem);
  --t-2:clamp(1.3rem,1.16rem + .62vw,1.66rem);
  --t-3:clamp(1.6rem,1.34rem + 1.16vw,2.3rem);
  --t-4:clamp(2rem,1.55rem + 2vw,3.2rem);
  --t-5:clamp(2.35rem,1.75rem + 2.5vw,3.9rem);

  /* spaziatura — passo 4, scala armonica */
  --s-1:.5rem;  --s-2:.75rem; --s-3:1rem;   --s-4:1.5rem;
  --s-5:2rem;   --s-6:3rem;   --s-7:4rem;   --s-8:6rem;
  --sezione:clamp(4rem,3rem + 6vw,8rem);

  /* gabbia e forme */
  --gabbia:min(76rem,100% - 2.5rem);
  --gabbia-stretta:min(52rem,100% - 2.5rem);
  --raggio:4px;
  --raggio-g:10px;
  --testata:4.5rem;

  /* profondità — mai un'ombra piatta: due strati, uno stretto e uno largo */
  --alza-1:0 1px 2px rgba(11,18,32,.05), 0 4px 14px rgba(11,18,32,.05);
  --alza-2:0 2px 4px rgba(11,18,32,.06), 0 14px 38px rgba(11,18,32,.09);
  --alza-3:0 3px 6px rgba(11,18,32,.07), 0 26px 60px rgba(11,18,32,.13);

  --molla:cubic-bezier(.2,.7,.3,1);
}

/* ─── 3 · BASE ─── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;background:var(--carta);color:var(--testo);
  font-family:var(--sans);font-size:var(--t-0);font-weight:400;line-height:1.65;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:380;margin:0;letter-spacing:-.018em;line-height:1.14}
p{margin:0}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--blu);text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px;border-radius:2px}
.su-scuro :focus-visible,.sez--scura :focus-visible,.piede :focus-visible{outline-color:var(--blu-chiaro)}
::selection{background:var(--oro);color:var(--bianco)}

.salta{position:absolute;left:-9999px;top:0;z-index:99;background:var(--notte);color:#fff;padding:.8rem 1.2rem;border-radius:var(--raggio)}
.salta:focus{left:.6rem;top:.6rem}

section[id]{scroll-margin-top:calc(var(--testata) + 1rem)}

.gabbia{width:var(--gabbia);margin-inline:auto}
.stretta{width:var(--gabbia-stretta);margin-inline:auto}

/* ══════════════════════════════════════════════════════════════════════════
   4 · IL LOGOTIPO — è il punto di partenza di tutto il sistema
   Tre elementi: il nome in maiuscoletto serif molto spaziato, un filo d'oro,
   la qualifica in mono strettissimo. Da qui discendono le occhiellature, i
   filetti e l'oro usati in tutto il sito.
   ══════════════════════════════════════════════════════════════════════════ */
.logo{display:inline-flex;flex-direction:column;gap:.44em;text-decoration:none;color:inherit;line-height:1}
.logo__nome{
  font-family:var(--serif);font-weight:400;
  font-size:1em;letter-spacing:.17em;text-transform:uppercase;
  color:var(--notte);white-space:nowrap;
}
.logo__nome b{font-weight:520;letter-spacing:.155em}
.logo__filo{display:block;height:1px;width:2.6em;background:var(--oro);opacity:.9}
.logo__qual{
  font-family:var(--mono);font-weight:400;
  font-size:max(.69rem,.46em);letter-spacing:.24em;text-transform:uppercase;
  color:var(--tenue);white-space:nowrap;
}
/* variante su fondo scuro */
.su-scuro .logo__nome{color:var(--carta)}
.su-scuro .logo__qual{color:var(--tenue-scuro)}
.su-scuro .logo__filo{background:var(--oro-chiaro)}
/* variante compatta per la testata: una riga sola */
.logo--riga{flex-direction:row;align-items:center;gap:.7em}
.logo--riga .logo__filo{width:1.5em;flex:0 0 auto}

/* ══════════════════════════════════════════════════════════════════════════
   5 · ELEMENTI DEL SISTEMA
   ══════════════════════════════════════════════════════════════════════════ */

/* — occhiello: la firma tipografica del logo, riusata ovunque — */
.occhiello{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:var(--t--1);font-weight:450;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro-testo);
  margin-bottom:var(--s-3);
}
.occhiello::before{content:"";width:1.8rem;height:1px;background:var(--oro);opacity:.8}
.su-scuro .occhiello{color:var(--oro-chiaro)}
.su-scuro .occhiello::before{background:var(--oro-chiaro)}

/* — testa di sezione — */
.testa{max-width:44rem;margin-bottom:var(--s-6)}
.testa h2{font-size:var(--t-3);margin-bottom:var(--s-3)}
.testa p{color:var(--tenue);font-size:var(--t-1);line-height:1.6;max-width:40rem}
.su-scuro .testa p{color:var(--tenue-scuro)}
.su-scuro h1,.su-scuro h2,.su-scuro h3,.su-scuro h4{color:var(--carta)}

/* — bottoni — */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:var(--t-0);font-weight:560;line-height:1;
  padding:.95em 1.5em;border-radius:var(--raggio);border:1px solid transparent;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .28s var(--molla),box-shadow .28s var(--molla),background-color .2s,color .2s,border-color .2s;
}
.btn svg{width:1.05em;height:1.05em;flex:0 0 auto;transition:transform .28s var(--molla)}
.btn--primo{background:var(--blu);color:#fff;box-shadow:var(--alza-1)}
.btn--primo:hover{background:#17405f;transform:translateY(-2px);box-shadow:var(--alza-2)}
.btn--primo:hover svg{transform:translateX(3px)}
.btn--fantasma{background:transparent;color:var(--notte);border-color:var(--filo)}
.btn--fantasma:hover{border-color:var(--notte);transform:translateY(-2px)}
.su-scuro .btn--fantasma{color:var(--carta);border-color:var(--filo-scuro)}
.su-scuro .btn--fantasma:hover{border-color:var(--oro-chiaro);color:var(--oro-chiaro)}
.btn--oro{background:var(--oro);color:var(--notte);font-weight:600;box-shadow:var(--alza-1)}
.btn--oro:hover{background:var(--oro-chiaro);transform:translateY(-2px);box-shadow:var(--alza-2)}
.btn:active{transform:translateY(0)}
.btn.fatto{background:var(--notte);color:#fff;border-color:var(--notte)}

/* — card — */
.card{
  background:var(--bianco);border:1px solid var(--filo);border-radius:var(--raggio-g);
  padding:var(--s-5);position:relative;
  transition:transform .35s var(--molla),box-shadow .35s var(--molla),border-color .35s;
}
.su-scuro .card{background:var(--notte-2);border-color:var(--filo-scuro)}

/* — icone: un set solo, 24×24, tratto 1.5 — */
.ico{width:1.5rem;height:1.5rem;stroke:var(--oro);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico-box{
  width:3rem;height:3rem;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--filo);border-radius:var(--raggio);background:var(--carta);
  transition:background-color .3s,border-color .3s;
}
.su-scuro .ico-box{background:rgba(203,176,138,.07);border-color:var(--filo-scuro)}
.su-scuro .ico{stroke:var(--oro-chiaro)}


/* — utilità di testo e icone usate nelle sezioni — */
.testo-guida{color:var(--tenue);font-size:var(--t-1);line-height:1.6;margin-top:var(--s-3);max-width:38rem}
.su-scuro .testo-guida{color:var(--tenue-scuro)}
.ico--min{width:.85em;height:.85em;stroke:currentColor}
.btn .ico{stroke:currentColor}

/* — separatore curato — */

/* ══════════════════════════════════════════════════════════════════════════
   6 · SEZIONI
   ══════════════════════════════════════════════════════════════════════════ */
.sez{padding:var(--sezione) 0;position:relative}
.sez--chiara{background:var(--carta)}
.sez--nebbia{background:var(--nebbia)}
.sez--scura{background:var(--notte);color:var(--carta)}
.sez--scura p{color:var(--tenue-scuro)}

/* trama finissima: dà consistenza al fondo senza disegnare niente */
.trama::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:var(--grana,none);mix-blend-mode:multiply;
}
.sez--scura.trama::before{mix-blend-mode:screen;opacity:.22}

/* ══════════ TESTATA ══════════ */
.testata{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:var(--s-4);
  min-height:var(--testata);padding:.7rem clamp(1.1rem,4vw,2.6rem);
  background:rgba(11,18,32,0);border-bottom:1px solid transparent;
  transition:background-color .35s,border-color .35s,box-shadow .35s;
}
.testata .logo{font-size:.95rem}
.testata.attaccata{
  background:rgba(251,250,247,.92);border-bottom-color:var(--filo);box-shadow:0 1px 20px rgba(11,18,32,.05);
}
@supports (backdrop-filter:blur(10px)){.testata.attaccata{backdrop-filter:blur(12px) saturate(1.3)}}
.testata.attaccata .logo__nome{color:var(--notte)}
.testata.attaccata .logo__qual{color:var(--tenue)}
.testata.attaccata .logo__filo{background:var(--oro)}
.testata.attaccata .menu a{color:var(--tenue)}
.testata.attaccata .menu a:hover{color:var(--notte)}

.menu{display:flex;gap:var(--s-4);margin-left:auto;align-items:center}
.menu a{
  font-family:var(--mono);font-size:.68rem;font-weight:450;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tenue);text-decoration:none;white-space:nowrap;position:relative;padding:.3rem 0;
  transition:color .25s;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--oro);transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--molla);
}
.menu a:hover{color:var(--notte)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.testata.attaccata .menu a::after{background:var(--oro)}
.testata__btn{flex:0 0 auto}

/* ══════════ 1 · APERTURA ══════════ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  flex-direction:column;align-items:stretch;
  padding:calc(var(--testata) + var(--s-6)) 0 0;
  background:var(--carta);color:var(--notte);overflow:hidden;
}
/* fondo lavorato, su CARTA: un alone freddo e un velo d'oro che respirano piano.
   Si muove solo `transform`: il fondo scorre sulla scheda video, non ridisegna. */
.hero::before{
  content:"";position:absolute;inset:-20%;pointer-events:none;opacity:1;mix-blend-mode:multiply;
  background:
    radial-gradient(42rem 34rem at 78% 20%,rgba(30,78,122,.09),transparent 62%),
    radial-gradient(34rem 28rem at 12% 86%,rgba(168,138,92,.15),transparent 64%),
    radial-gradient(50rem 30rem at 45% -8%,rgba(94,155,201,.08),transparent 70%);
}
.hero__griglia{
  position:absolute;inset:0;pointer-events:none;opacity:1;
  background-image:linear-gradient(rgba(37,46,59,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,46,59,.055) 1px,transparent 1px);
  background-size:7.5rem 7.5rem;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}
.hero__c{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:var(--gabbia);margin-inline:auto;padding-bottom:var(--s-6)}
.hero .nastro{position:relative;z-index:2}

/* la qualifica dell'apertura: sta sotto il nome, che ora è l'H1 */
.hero__qual{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:var(--t-2);line-height:1.3;color:var(--oro-testo);
  margin:var(--s-2) 0 var(--s-4);
}
.hero h1{font-size:var(--t-5);font-weight:340;letter-spacing:-.026em;line-height:1.05;margin:0;max-width:none;color:var(--notte)}
.hero__dato span{max-width:17rem}

.hero__somm{font-size:var(--t-1);line-height:1.62;color:var(--tenue);max-width:34rem;margin-bottom:var(--s-5)}
.hero .btn--fantasma{color:var(--notte);border-color:rgba(22,36,61,.5)}
.hero .btn--fantasma:hover{border-color:var(--notte);background:rgba(22,36,61,.04)}
.hero__azioni{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6)}
.hero__dati{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-6);padding-top:var(--s-4);border-top:1px solid rgba(37,46,59,.16)}
.hero__dato b{display:block;font-family:var(--serif);font-size:var(--t-2);font-weight:400;color:var(--notte);line-height:1}
.hero__dato span{display:block;margin-top:.45rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}

.hero__foto{position:relative;margin:0}
.hero__foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%;
  border-radius:var(--raggio-g);box-shadow:var(--alza-3);
}
.hero__foto::after{
  content:"";position:absolute;inset:0;border-radius:var(--raggio-g);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(37,46,59,.08);
  background:linear-gradient(to top,rgba(22,36,61,.55),transparent 42%);
}
.hero__didascalia{
  position:absolute;left:var(--s-4);bottom:var(--s-4);z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,250,247,.88);
}

/* ══════════ nastro delle istituzioni ══════════ */
.nastro{background:var(--notte-2);border-block:1px solid var(--filo-scuro);overflow:hidden;padding:var(--s-4) 0}
.nastro__pista{display:flex;width:max-content;animation:scorre 83s linear infinite}
.nastro__g{display:flex;flex:0 0 auto}
.nastro__g span{
  font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tenue-scuro);padding:0 1.7rem;white-space:nowrap;display:flex;align-items:center;gap:1.7rem;
}
.nastro__g span::after{content:"";width:4px;height:4px;background:var(--oro);transform:rotate(45deg);opacity:.75}
@keyframes scorre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ══════════ 2 · CHI È ══════════ */
.duo{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.duo__foto{position:relative;border-radius:var(--raggio-g);overflow:hidden;box-shadow:var(--alza-2)}
.duo__foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s-5) var(--s-4) var(--s-3);
  background:linear-gradient(to top,rgba(22,36,61,.82),transparent);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}

/* ══════════ 3 · LO DICONO ALTRI ══════════ */

/* ══════════ 4 · I CASI — la firma ══════════ */
.casi{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.caso{padding:var(--s-5)}
.caso h3{font-size:var(--t-2);font-weight:400}
.caso__stato{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.36em .8em;border-radius:99px;border:1px solid;white-space:nowrap;
}
.caso__stato[data-s="aperto"]{color:var(--oro-testo);border-color:rgba(168,138,92,.45);background:rgba(168,138,92,.08)}
.caso__stato[data-s="chiuso"]{color:var(--blu);border-color:rgba(30,78,122,.3);background:rgba(30,78,122,.07)}
.caso__cosa{color:var(--tenue);margin-bottom:var(--s-4);max-width:44rem}
.linea{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.linea__anno,.linea__oggi{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;white-space:nowrap;color:var(--tenue)}
.linea__anno{color:var(--notte);font-weight:500}
.linea__oggi b{font-family:var(--serif);font-weight:400;font-size:1.32rem;color:var(--oro-testo);letter-spacing:0}
.linea__tratto{display:block;width:100%;height:20px;background:linear-gradient(to right,var(--oro) 0 88%,transparent) center/100% 2px no-repeat}
html.js:not(.senza-linee) .linea__tratto{background:none}
.caso dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--filo)}
.caso dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-bottom:.2rem}
.caso dd{margin:0;font-size:.92rem}

/* ══════════ 5 · LE MATERIE ══════════ */


/* ══════════ LE FORME DELL'INCARICO — schede descrittive, due per riga ══════════ */

/* ══════════ I PASSI — come si svolge un accertamento ══════════ */

/* ══════════ ELENCO DEGLI AMBITI — voce + descrizione + norma ══════════ */
.ambiti{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-6);border-top:1px solid var(--filo)}
.su-scuro .ambiti{border-color:var(--filo-scuro)}
.ambito{padding:var(--s-4) 0;border-bottom:1px solid var(--filo)}
.su-scuro .ambito{border-color:var(--filo-scuro)}
.ambito h3{font-size:var(--t-1);font-weight:450;margin-bottom:.3rem}
.ambito p{color:var(--tenue);font-size:.92rem;line-height:1.55}
.su-scuro .ambito p{color:var(--tenue-scuro)}
.ambito .norma{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.su-scuro .ambito .norma{color:var(--oro-chiaro)}

/* ══════════ FORMAZIONE — elenco sobrio a due colonne ══════════ */
.studi{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-6);border-top:1px solid var(--filo);margin:0}
.studi>div{display:grid;grid-template-columns:1fr auto;gap:.5rem 1.2rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--filo)}
.studi dt{font-family:var(--serif);font-size:1.02rem;font-weight:400}
.studi dd{margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tenue);text-align:right;white-space:nowrap}

@media (max-width:820px){ .ambiti,.studi{grid-template-columns:1fr} .ambiti,.studi{gap:0} }
@media (max-width:560px){ .studi>div{grid-template-columns:1fr} .studi dd{text-align:left} }

/* ══════════ 6 · IL BANCO ══════════ */
.banco{margin-bottom:var(--s-6)}
.gruppo{border:0;margin:0 0 var(--s-4);padding:0}
.gruppo legend{display:block;width:100%;padding:0;margin-bottom:var(--s-2);font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tenue)}
.gruppo__b{display:flex;flex-wrap:wrap;gap:.45rem}
.gruppo button{
  font-family:var(--sans);font-size:.86rem;font-weight:500;line-height:1;
  padding:.72em 1.05em;cursor:pointer;color:var(--testo);background:var(--bianco);
  border:1px solid var(--filo);border-radius:99px;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s var(--molla);
}
.gruppo button:hover:not(:disabled){border-color:var(--oro);transform:translateY(-1px)}
.gruppo button[aria-pressed=true]{background:var(--notte);border-color:var(--notte);color:#fff}
.gruppo button.spento{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.contatore{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-testo);margin-top:var(--s-2)}


/* ══════════ 7 · AUDIZIONI — sezione ferma ══════════ */

/* ══════════ 8 · I VIDEO ══════════ */
.clip{overflow:hidden;padding:0}
.clip a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.clip__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--notte-2);display:grid;place-items:center}
.clip__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:transform .5s var(--molla)}
.clip a:hover .clip__img img{filter:none;transform:scale(1.04)}
.clip__tipo{font-family:var(--serif);font-size:var(--t-2);color:var(--tenue-scuro);text-align:center;padding:0 1rem;line-height:1.2}
.clip__play{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(251,250,247,.94);display:grid;place-items:center;
  transition:transform .3s var(--molla),background-color .3s;box-shadow:var(--alza-1);
}
.clip__play::after{content:"";border-left:12px solid var(--notte);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.clip a:hover .clip__play{transform:scale(1.1);background:var(--oro)}
.clip a:hover .clip__play::after{border-left-color:#fff}

/* sulla scheda tipografica il pulsante va in basso a destra: al centro
   coprirebbe il titolo, che è l'unica cosa che quella scheda ha */
.clip__img:has(.clip__tipo) .clip__play{left:auto;right:.9rem;top:auto;bottom:.9rem;margin:0;width:42px;height:42px}
.clip__img:has(.clip__tipo) .clip__play::after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px}
@supports not selector(:has(*)){
  .clip__tipo{padding-bottom:3.4rem}
}
.clip__tipo{position:relative;z-index:1}

.clip__corpo{padding:var(--s-4);display:flex;flex-direction:column;flex:1}
.clip__testa{font-family:var(--serif);font-size:var(--t-1);font-weight:400;margin-bottom:.35rem}
.clip__meta{margin-top:var(--s-3);font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--oro-testo)}

/* ══════════ 10 · LA SOGLIA ══════════ */

/* ══════════ 11 · PSICOTERAPIA ══════════ */
.clinica{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.clinica__elenco{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-4)}
.clinica__elenco li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.5}
.clinica__elenco li::before{content:"";width:5px;height:5px;margin-top:.62em;flex:0 0 auto;background:var(--oro);border-radius:50%}
.perno{position:sticky;top:calc(var(--testata) + 1.5rem);padding:var(--s-5)}
.perno h3{font-size:var(--t-1);font-weight:400;margin-bottom:var(--s-2)}
.perno p{color:var(--tenue);font-size:.92rem;line-height:1.6;margin-bottom:var(--s-4)}

/* ══════════ 12 · FAQ ══════════ */

/* ══════════ 13 · CONTATTI ══════════ */
.contatti{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.recapiti{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-3)}
.recapiti li{display:flex;gap:var(--s-3);align-items:center}
.recapiti a,.recapiti span{color:var(--carta);text-decoration:none;font-size:var(--t-0);word-break:break-word}
.recapiti a:hover{color:var(--oro-chiaro)}
.recapiti small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue-scuro);margin-bottom:.1rem}
.azioni{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}

/* ══════════ PIEDE ══════════ */
.piede{background:var(--notte);color:var(--tenue-scuro);padding:var(--s-6) 0 var(--s-5);border-top:1px solid var(--filo-scuro)}
.piede__alto{display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;align-items:flex-start;padding-bottom:var(--s-5);border-bottom:1px solid var(--filo-scuro)}
.piede__dati{font-size:.84rem;line-height:1.9;max-width:30rem}
.piede__dati b{color:var(--carta);font-weight:500}
.piede__basso{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;padding-top:var(--s-4);font-size:.78rem}
.piede a{color:var(--tenue-scuro)}
.piede a:hover{color:var(--oro-chiaro)}

/* ══════════════════════════════════════════════════════════════════════════
   7 · MOVIMENTO — sobrio: i blocchi entrano, i pezzi no
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .entra{opacity:0;transform:translateY(22px);transition:opacity .75s var(--molla),transform .75s var(--molla)}
  .entra.dentro{opacity:1;transform:none}
  .entra-2{transition-delay:.09s}
  .entra-3{transition-delay:.18s}
  }
/* 🔴 senza JS non si vede niente di nascosto: la classe .entra la mette il JS */
html:not(.js) .entra{opacity:1;transform:none}

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

/* ══════════════════════════════════════════════════════════════════════════
   8 · RISPOSTE ALLO SCHERMO — mobile first: qui si RIDUCE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:880px){
  .hero__c{grid-template-columns:1fr;gap:var(--s-6)}
  .hero__foto{max-width:30rem}
  .hero{min-height:0;padding-top:calc(var(--testata) + var(--s-6))}
  .hero__c{padding-bottom:var(--s-6)}
}
@media (max-width:880px){
  .duo,.clinica,.contatti{grid-template-columns:1fr}
    .duo__foto{max-width:32rem}
  .perno{position:static}
  }
/* 🔴 v9: la testata va su due righe fino a 1000px (non più 820): fra 821 e 1199px
   il pulsante «Contatti» usciva dallo schermo e «Attività clinica» restava tagliata. */
@media (max-width:1000px){
  :root{--testata:7.6rem}
  /* 🔴 Il menu NON sparisce: diventa una riga che scorre a dito sotto il marchio.
     Prima era display:none e il sito restava 23.000px senza navigazione. */
  .testata{flex-wrap:wrap;row-gap:.15rem;padding-bottom:.3rem}
  .testata__btn{margin-left:auto;order:2}
  .menu{
    order:3;flex:1 0 100%;margin-left:0;gap:1.15rem;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-snap-type:x proximity;
    padding-block:.1rem .25rem;
  }
  .menu::-webkit-scrollbar{display:none}
  .menu a{scroll-snap-align:start;font-size:.7rem;letter-spacing:.12em}
  /* la sfumatura a destra dice che la riga continua */
  .menu{padding-right:2.5rem}
  /* R03: la sfumatura sta sulla testata, sopra il bordo destro del menu, e sparisce a fine corsa */
  .testata::after{content:"";position:absolute;right:0;bottom:0;z-index:2;width:3.5rem;height:2.75rem;pointer-events:none;
    background:linear-gradient(to right,rgba(251,250,247,0),rgba(251,250,247,.96) 75%);opacity:0;transition:opacity .25s}
  .testata.menu-continua::after{opacity:1}
  .menu a::after{display:none}
}
/* 🔴 Sotto i 560px il logotipo in testata perde la qualifica e il filo:
   con tutti e tre gli elementi il pulsante «Contatti» finiva fuori schermo. */
@media (max-width:560px){
  :root{--testata:7.8rem}
  .testata{padding-inline:1rem;gap:.7rem}
  .testata .logo__qual,.testata .logo__filo{display:none}
  .testata .logo{font-size:.88rem}
  .testata__btn{padding:.72em 1.05em;font-size:.84rem}
}
/* 🔴 Su telefono nessun testo scende sotto gli 11px: le occhiellature in mono
   erano a 9,3px, illeggibili in mano e all'aperto. */
@media (max-width:700px){
  :root{--t--1:.8rem}
  .occhiello{font-size:.74rem;letter-spacing:.17em}
  .caso__stato,.contatore,.clip__meta,.scatto span,.recapiti small,.gruppo legend,.caso dt,.linea__anno,.linea__oggi,.hero__dato span,.hero__didascalia,.duo__foto figcaption,.nastro__g span,.piede__basso,.ambito .norma,.studi dd{font-size:.7rem!important;letter-spacing:.1em}
    .piede__dati{font-size:.86rem}
}
/* 🔴 Bersagli tattili: mai sotto i 44px. Legati alla LARGHEZZA e non a
   `pointer:coarse`, che non tutti i browser e nessun emulatore riportano. */
@media (max-width:820px),(pointer:coarse){
  .btn{padding:1.05em 1.5em;min-height:46px}
  .gruppo button{padding:.9em 1.2em;min-height:44px}
    .menu a{min-height:44px;display:inline-flex;align-items:center;padding:.55rem 0}
  .recapiti a{display:inline-block;padding:.45rem 0}
    }
@media (max-width:700px){
    /* 🔴 i video RESTANO a 2 per riga: mai un elemento gigante sotto l'altro */
    .clinica__elenco{grid-template-columns:1fr}
  .caso dl{grid-template-columns:1fr}
  .linea{grid-template-columns:1fr;gap:.4rem;justify-items:start}
  .linea__tratto{width:100%}
      .hero__dati{gap:var(--s-4)}
}
@media (max-width:480px){
  .card,.caso,.perno{padding:var(--s-4)}
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · AGGIUNTE DELLA v7 — Modifiche 1
   ══════════════════════════════════════════════════════════════════════════ */

/* — la riga dell'albo: discreta, come chiesto in call — */

/* — la voce di terzi, dentro la scheda del caso a cui si riferisce — */
.caso__voce{
  margin:var(--s-4) 0 0;padding:var(--s-4);border-left:2px solid var(--oro);
  background:var(--nebbia);border-radius:0 var(--raggio) var(--raggio) 0;
}
.caso__voce p{
  font-family:var(--serif);font-style:italic;font-size:var(--t-1);line-height:1.55;
  margin:0 0 .7rem;color:var(--notte);
}
.caso__voce footer{
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue-scuro);
}
.caso__voce footer a{color:var(--oro);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.caso__voce footer a:hover{color:var(--notte)}

/* — i video del caso: sempre due per riga, mai uno gigante sotto l'altro — */
.caso__clip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.clip--riga{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--filo);border-radius:var(--raggio);overflow:hidden;background:var(--bianco);
  transition:border-color .3s,transform .3s var(--molla);
}
@media (hover:hover){.clip--riga:hover{border-color:var(--oro);transform:translateY(-2px)}}
.clip--riga .clip__img{aspect-ratio:16/9}
.clip--riga .clip__corpo{padding:var(--s-3)}
.clip--riga .clip__testa{font-size:.92rem;line-height:1.3}
.clip--riga .clip__meta{margin-top:.4rem}

/* — al tocco il colore non resta bloccato: il grigio si toglie solo col mouse — */
@media (hover:none){
  .clip__img img{filter:none}
}

@media (max-width:560px){
  .caso__voce{padding:var(--s-3)}
  .caso__voce p{font-size:.95rem}
}

/* — l'icona sulla scheda della materia — */

/* — bersagli tattili: anche i collegamenti nuovi arrivano a 44px — */
@media (max-width:820px),(pointer:coarse){
  .caso__voce footer a{min-height:44px;align-items:center}
  .recapiti a{min-height:44px;display:inline-flex;align-items:center;padding:0}
  .piede__basso a{display:inline-flex;min-height:44px;align-items:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   10 · CONTROLLO della v7 — correzioni dello STEP 3
   ══════════════════════════════════════════════════════════════════════════ */

/* — il filtro ora sta su fondo scuro: colori pensati per il blu — */
.su-scuro .gruppo legend{color:var(--tenue-scuro)}
.su-scuro .gruppo button{background:transparent;color:var(--carta);border-color:var(--filo-scuro)}
.su-scuro .gruppo button:hover:not(:disabled){border-color:var(--oro-chiaro)}
.su-scuro .gruppo button[aria-pressed=true]{background:var(--oro);border-color:var(--oro);color:var(--notte);font-weight:600}
.su-scuro .gruppo button.spento{opacity:.45}
.su-scuro .contatore{color:var(--oro-chiaro)}

/* — la norma sulla scheda: una riga sua, in mono, come nella v6 — */

/* — le aggiunte su fondo chiaro: colori da fondo chiaro — */
.caso__voce footer{color:var(--tenue);font-size:.7rem}
.caso__voce footer b{color:var(--notte);font-weight:600}
.caso__voce footer a{color:var(--blu)}
.caso__voce footer a:hover{color:var(--notte)}
.caso__voce + .caso__voce{margin-top:var(--s-3)}

/* — le clip dei casi: il pulsante non copre più il nome della testata — */
.clip--riga .clip__tipo{font-size:.95rem;padding:0 .6rem}
.clip--riga .clip__img:has(.clip__tipo) .clip__play{width:30px;height:30px;right:.5rem;bottom:.5rem}
.clip--riga .clip__img:has(.clip__tipo) .clip__play::after{border-left-width:8px;border-top-width:5px;border-bottom-width:5px}
.clip--riga .clip__img:has(.clip__tipo) .clip__tipo{padding-bottom:1.6rem}

/* — «Interventi pubblici»: tre per riga da desktop, riga che scorre da telefono.
     A 2 colonne il testo finiva largo 62px e usciva dalla scheda. — */
.card.clip{padding:0}


/* — nella scheda del caso resta la sola riga «Ruolo»: a tutta larghezza — */
.caso dl{grid-template-columns:1fr}

/* — tablet (701-1040px): i tre video di «Interventi pubblici» stanno in una riga sola.
     A 2 colonne il terzo restava solo nella seconda riga. — */

/* — i blocchi divisi per stare in 3 righe da telefono: restano un gruppo solo — */
.testo-guida + .testo-guida{margin-top:var(--s-2)}

/* ══════════════════════════════════════════════════════════════════════════
   11 · v8 — MODIFICHE 2: il sito come un curriculum, registro da studio legale
   ══════════════════════════════════════════════════════════════════════════ */

/* — «Dott.ssa» sopra il nome — */
.hero__titolo{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oro-testo);margin:0 0 .5rem;
}

/* — formazione: una voce per riga, come nel CV — */
.studi--cv{grid-template-columns:1fr;max-width:56rem}
.studi--cv dt small{
  display:block;margin-top:.25rem;font-family:var(--sans);font-size:.84rem;
  letter-spacing:0;text-transform:none;color:var(--tenue);line-height:1.45;
}

/* — incarichi: elenco lineare, un filo d'oro per voce — */
.cv-lista{list-style:none;margin:0 0 var(--s-6);padding:0;border-top:1px solid var(--filo);max-width:56rem}
.cv-lista li{
  position:relative;padding:var(--s-3) 0 var(--s-3) 1.5rem;border-bottom:1px solid var(--filo);
  font-size:1rem;line-height:1.55;color:var(--notte);
}
.cv-lista li::before{content:"";position:absolute;left:0;top:1.35em;width:.6rem;height:1px;background:var(--oro)}

/* — attività peritale: schede con il solo titolo — */

/* — le interviste televisive: scheda tipografica con il nome del programma — */
.clip--tv .clip__img{background:var(--notte)}
.clip--tv .clip__tipo{color:var(--oro-chiaro)}

/* — tre fonti per un caso: tre in riga da desktop, riga che scorre da telefono — */
.caso__clip--tre{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){
  .caso__clip--tre{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:var(--s-2);
  }
  .caso__clip--tre > *{scroll-snap-align:start}
}

/* — una fonte sola: scheda orizzontale compatta, mai un riquadro gigante — */
.caso__clip--uno{grid-template-columns:1fr;max-width:34rem}
.caso__clip--uno .clip--riga{flex-direction:row;align-items:stretch}
.caso__clip--uno .clip__img{flex:0 0 42%;aspect-ratio:16/9}
.caso__clip--uno .clip__corpo{display:flex;flex-direction:column;justify-content:center}

/* — contatti: una colonna sola, sobria — */
.contatti--uno{grid-template-columns:1fr;max-width:46rem}
.contatti--uno .azioni{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s-5)}

/* — da telefono le voci del curriculum stanno in 3 righe — */
@media (max-width:560px){
  .cv-lista li{font-size:.95rem;padding-left:1.2rem}
  .cv-lista li::before{width:.5rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   12 · v9 — MODIFICHE 3: la hero CHIARA, la testata sempre leggibile,
        la galleria degli interventi con il video del convegno
   ══════════════════════════════════════════════════════════════════════════ */

/* — testata: è sempre chiara. In cima alla pagina si alleggerisce e perde il filo — */
.testata.attaccata.in-cima{background:rgba(251,250,247,.7);border-bottom-color:transparent;box-shadow:none}

/* — il filo del logotipo si allunga al passaggio — */
.logo__filo{transform-origin:0 50%;transition:transform .45s var(--molla)}
@media (hover:hover){.logo:hover .logo__filo{transform:scaleX(1.5)}}

/* — la foto della hero si solleva appena — */
.hero__foto img{transition:transform .8s var(--molla),box-shadow .6s var(--molla)}
@media (hover:hover){.hero__foto:hover img{transform:translateY(-4px);box-shadow:0 4px 8px rgba(11,18,32,.08),0 34px 70px rgba(11,18,32,.16)}}

/* — il nastro: scorre sempre, non si ferma mai; la voce sotto il puntatore si accende — */
.nastro__g span{transition:color .3s}
@media (hover:hover){.nastro__g span:hover{color:var(--carta)}}

/* — curriculum: la voce sotto il puntatore prende il blu, il filo d'oro si allunga — */
.cv-lista li{transition:color .3s}
.cv-lista li::before{transform-origin:0 50%;transition:transform .35s var(--molla)}
.studi dt{transition:color .3s}
.recapiti small{transition:color .3s}
.piede a{transition:color .25s}
.caso__voce{transition:border-color .3s,background-color .3s}
@media (hover:hover){
  .cv-lista li:hover{color:var(--blu)}
  .cv-lista li:hover::before{transform:scaleX(1.9)}
  .studi--cv>div:hover dt{color:var(--blu)}
  .recapiti li:hover small{color:var(--oro-chiaro)}
  .caso__voce:hover{border-left-color:var(--blu);background:#EDE8DF}
}

/* ══════════ LA GALLERIA «IN AULA E AI CONVEGNI» ══════════
   Una riga sola che scorre: da desktop se ne vedono tre e il bordo della quarta,
   da telefono una e il bordo della seconda. Le foto sono in bianco e nero e
   prendono colore quando sono intere nella riga. */
.registro{margin-top:var(--s-7)}
.registro__testa{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);
  margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--filo);
}
.registro__testa h3{font-size:var(--t-2);font-weight:400;color:var(--notte)}
.registro__frecce{display:flex;gap:.5rem;flex:0 0 auto}
.freccia{
  width:2.75rem;height:2.75rem;display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid rgba(22,36,61,.5);background:var(--bianco);color:var(--notte);
  transition:background-color .25s,border-color .25s,color .25s,opacity .25s;
}
.freccia .ico{width:1.1rem;height:1.1rem;stroke:currentColor}
.freccia--indietro .ico{transform:rotate(180deg)}
@media (hover:hover){.freccia:hover:not([aria-disabled=true]){background:var(--notte);border-color:var(--notte);color:var(--carta)}}
.freccia[aria-disabled=true]{opacity:.35;cursor:default}

.registro__riga{
  display:flex;gap:var(--s-4);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:.4rem 0 var(--s-2);
}
.registro__riga::-webkit-scrollbar{display:none}
.scatto{flex:0 0 calc((100% - 3 * var(--s-4)) / 3.25);margin:0;scroll-snap-align:start}
.scatto__quadro{display:block;position:relative;border-radius:var(--raggio-g);overflow:hidden;background:var(--nebbia);box-shadow:var(--alza-1)}
.scatto img,.scatto video{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform .7s var(--molla);
}
/* R35: il video della galleria è sempre a colori (è la parte che si muove) */
.scatto--video video{filter:none}
.scatto.viva img,.scatto.viva video{filter:none}
@media (hover:hover){.scatto:hover img,.scatto:hover video{filter:none;transform:scale(1.045)}}
.scatto figcaption{padding:.85rem .1rem 0}
.scatto b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:400;line-height:1.3;color:var(--notte);transition:color .3s}
@media (hover:hover){.scatto:hover b{color:var(--blu)}}
.scatto span{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-testo);line-height:1.5}

.registro__barra{height:2px;margin-top:var(--s-4);background:var(--filo);border-radius:2px;overflow:hidden}
.registro__barra i{display:block;height:100%;background:var(--oro);transform-origin:0 50%;transform:scaleX(var(--p,.25));transition:transform .3s linear}

@media (max-width:1040px){.scatto{flex-basis:calc((100% - var(--s-4)) / 2.3)}}
@media (max-width:700px){
  .registro{margin-top:var(--s-6)}
  .registro__riga{gap:var(--s-3)}
  .scatto{flex-basis:78%}
  .registro__testa{align-items:center}
  .registro__testa h3{font-size:1.2rem}
}

/* ══════════ MOVIMENTO della v9 — solo transform e opacity ══════════ */
@media (prefers-reduced-motion:no-preference){
  /* il fondo della hero respira: lento, mai fermo */
  .hero::before{animation:hero-aloni 26s ease-in-out infinite alternate;will-change:transform}
  /* il testo della hero entra, una riga dopo l'altra */
  .hero__c>div>*{animation:hero-sale 1s var(--molla) both}
  .hero__c>div>:nth-child(1){animation-delay:.05s}
  .hero__c>div>:nth-child(2){animation-delay:.13s}
  .hero__c>div>:nth-child(3){animation-delay:.22s}
  .hero__c>div>:nth-child(4){animation-delay:.31s}
  .hero__c>div>:nth-child(5){animation-delay:.4s}
  .hero__c>div>:nth-child(6){animation-delay:.49s}
  /* la foto sale e si scopre dall'alto, come un fascicolo aperto */
  .hero__foto{animation:hero-sale 1.1s .18s var(--molla) both}
  .hero__foto::before{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:var(--raggio-g);
    background:var(--nebbia);transform-origin:50% 0;animation:hero-sipario 1.25s .5s cubic-bezier(.7,0,.2,1) both;
  }
}
@keyframes hero-sale{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes hero-sipario{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes hero-aloni{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.06)}
  100%{transform:translate3d(2%,-2%,0) scale(1.03)}
}

/* — la hero sta TUTTA nella prima schermata, nastro compreso (desktop).
     La foto si adatta all'altezza disponibile; sugli schermi bassi (768-920px)
     si stringono gli spazi, non il testo. — */
@media (min-width:881px){
  .hero__foto{justify-self:end;width:min(100%,calc((100svh - var(--testata) - 10.5rem) * .8))}
}
@media (min-width:881px) and (max-height:920px){
  .hero{padding-top:calc(var(--testata) + var(--s-4))}
  .hero__c{padding-bottom:var(--s-5)}
  .hero__qual{margin-bottom:var(--s-3)}
  .hero__somm{margin-bottom:var(--s-4)}
  .hero__azioni{margin-bottom:var(--s-5)}
  .hero__dati{gap:var(--s-3) var(--s-6)}
}

/* — la foto della hero ora è CHIARA (Suor Orsola): il velo in basso si fa più
     deciso, altrimenti la didascalia bianca sul tavolo di vetro non si legge — */
.hero__foto::after{background:linear-gradient(to top,rgba(22,36,61,.74),rgba(22,36,61,.3) 20%,transparent 44%)}
.hero__didascalia{color:#fff;text-shadow:0 1px 8px rgba(11,18,32,.35)}

/* — testata fra 1001 e 1240px: una riga sola, compatta. Il logotipo perde la
     qualifica, il menu stringe gli spazi: così «Contatti» resta sempre dentro. — */
@media (min-width:1001px) and (max-width:1240px){
  .testata{gap:var(--s-3)}
  .testata .logo__qual,.testata .logo__filo{display:none}
  .menu{gap:1.05rem}
  .menu a{letter-spacing:.1em}
}

/* ══════════════════════════════════════════════════════════════════════════
   13 · v9 — I CASI COME SCHEDE PICCOLE, IN UNA RIGA CHE SCORRE
   Richiesta di Domenico: «più piccoli e più stretti, a quadrati: così occupano
   troppo spazio e gli si dà troppa importanza». Video e dichiarazioni si aprono
   nella scheda del caso (un pannello), non stanno più in pagina.
   ══════════════════════════════════════════════════════════════════════════ */
.registro--casi{margin-top:0}
.registro__testa--frecce{align-items:center}
.registro__nota{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}

.casi.registro__riga{display:flex;gap:var(--s-4);list-style:none;margin:0;padding:.4rem 0 var(--s-2)}
.casi .caso{
  flex:0 0 calc((100% - 3 * var(--s-4)) / 3.25);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:.75rem;padding:var(--s-4);aspect-ratio:1/1;
}
@media (hover:hover){.casi .caso:hover{border-color:rgba(168,138,92,.45);box-shadow:var(--alza-2)}}
.caso .caso__stato{align-self:flex-start}
.casi .caso h3{font-size:1.18rem;line-height:1.25}
.casi .caso__cosa{font-size:.88rem;line-height:1.5;margin:0}
.casi .linea{margin:0;gap:.6rem}
.casi .linea__oggi b{font-size:1.1rem}
.caso__ruolo{font-size:.86rem;line-height:1.4;color:var(--notte);padding-top:.7rem;border-top:1px solid var(--filo)}
.casi .caso__ruolo{margin-top:auto}
.caso__ruolo small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-bottom:.2rem}

/* — il pulsante che apre la scheda del caso — */
.caso__fonti summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  min-height:44px;padding:.6rem .9rem;border:1px solid rgba(30,78,122,.4);border-radius:var(--raggio);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blu);
  transition:background-color .25s,color .25s,border-color .25s;
}
.caso__fonti summary::-webkit-details-marker{display:none}
.caso__fonti summary .ico{width:1rem;height:1rem;stroke:currentColor;flex:0 0 auto;transition:transform .3s var(--molla)}
@media (hover:hover){
  .caso__fonti summary:hover{background:var(--blu);border-color:var(--blu);color:#fff}
  .caso__fonti summary:hover .ico{transform:translateX(3px)}
}
/* senza JS il <details> si apre sul posto */
.caso__fonti[open] .caso__dossier{margin-top:var(--s-3)}
.caso__fonti[open] .caso__clip{grid-template-columns:1fr}

@media (max-width:1040px){.casi .caso{flex-basis:calc((100% - var(--s-4)) / 2.3)}}
@media (max-width:700px){
  .casi.registro__riga{gap:var(--s-3)}
  .casi .caso{flex-basis:84%;min-width:0;aspect-ratio:auto;padding:1.15rem}
  .caso__fonti summary{letter-spacing:.02em!important;padding-inline:.75rem;white-space:normal;line-height:1.35}
  .registro__nota{font-size:.7rem}
  .casi .linea{grid-template-columns:auto 1fr auto;justify-items:stretch}
  .caso__ruolo small,.caso__fonti summary{font-size:.7rem!important}
}

/* ══════════ LA SCHEDA DEL CASO — <dialog> ══════════ */
.scheda{
  border:0;padding:0;margin:auto;width:min(48rem,100% - 2rem);max-height:min(88vh,54rem);
  border-radius:var(--raggio-g);background:var(--carta);color:var(--testo);overflow:hidden;
  box-shadow:0 4px 10px rgba(11,18,32,.12),0 34px 90px rgba(11,18,32,.34);
}
.scheda::backdrop{background:rgba(22,36,61,.58);backdrop-filter:blur(3px)}
.scheda__c{display:flex;flex-direction:column;max-height:min(88vh,54rem)}
.scheda__testa{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);background:var(--bianco);border-bottom:1px solid var(--filo);
}
.scheda__testa .occhiello{margin-bottom:.35rem}
.scheda__titolo{font-size:var(--t-2);color:var(--notte)}
.scheda__chiudi{
  width:2.75rem;height:2.75rem;flex:0 0 auto;display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid rgba(22,36,61,.5);background:var(--bianco);color:var(--notte);
  transition:background-color .25s,color .25s;
}
.scheda__chiudi .ico{width:1.1rem;height:1.1rem;stroke:currentColor}
@media (hover:hover){.scheda__chiudi:hover{background:var(--notte);color:var(--carta)}}
.scheda__corpo{overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4) var(--s-5) var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.scheda__corpo .caso__stato{align-self:flex-start}
.scheda__corpo .caso__cosa{margin:0;max-width:none}
.scheda__corpo .caso__ruolo{padding-top:var(--s-3)}
.scheda__corpo .caso__clip{margin-top:var(--s-2)}
@media (max-width:700px){
  .scheda{width:calc(100% - 1.5rem)}
  .scheda__testa{padding:var(--s-3) var(--s-4)}
  .scheda__corpo{padding:var(--s-3) var(--s-4) var(--s-4)}
}
@media (prefers-reduced-motion:no-preference){
  .scheda[open]{animation:scheda-entra .38s var(--molla)}
  .scheda[open]::backdrop{animation:velo-entra .38s ease}
}
@keyframes scheda-entra{from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes velo-entra{from{opacity:0}to{opacity:1}}

/* — v9 · correzioni dalla verifica dei casi — */
/* il canvas degli anni ha width="800" nell'HTML: senza min-width:0 e minmax(0,1fr),
   se il JS non gira, le schede diventavano larghe 959 px */
.casi .caso{min-width:0}
.casi .linea{grid-template-columns:auto minmax(0,1fr) auto}
/* lo stato va a capo invece di uscire dalla scheda (telefoni stretti) */
.casi .caso__stato{white-space:normal;max-width:100%}
/* fra 881 e 1040 px le schede non devono essere più grandi che da desktop */
@media (min-width:881px) and (max-width:1040px){.casi .caso{flex-basis:calc((100% - 2 * var(--s-4)) / 2.7)}}
@media (max-width:359px){.caso__fonti summary{white-space:normal;letter-spacing:0!important;line-height:1.35;padding-inline:.6rem}}
/* senza JS il <details> si apre nella scheda: le altre schede non si allungano,
   e i video stanno uno per riga dentro la scheda (non scorrono di lato) */
.casi.registro__riga:has(.caso__fonti[open]){align-items:flex-start}
.caso__fonti[open] .caso__clip,.caso__fonti[open] .caso__clip--tre{
  grid-template-columns:1fr;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding-bottom:0
}
/* nel pannello: un solo passo fra i blocchi, senza il margine vecchio delle dichiarazioni */
.scheda__corpo .caso__dossier{margin-top:.5rem}
.scheda__corpo .caso__dossier > :first-child{margin-top:0}

/* ══════════════════════════════════════════════════════════════════════════
   14 · MODIFICHE 4 · AUDIT (22/09/2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* — R80: testo solo per chi usa un lettore di schermo — */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* — R01 + R09: quattro dati sotto il nome, in una griglia 2×2 ordinata — */
@media (min-width:561px){.hero__dati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5)}}

/* — R11: sotto il numero, che cosa misura («dai fatti», «fino alla Cassazione») — */
.linea__coda{grid-column:1/-1;justify-self:end;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--tenue);line-height:1.2;margin-top:-.45rem}
.casi .caso--senza-ruolo .caso__fonti{margin-top:auto}

/* — R37: gli ambiti come elenco con filetti, soli titoli — */
.ambito[id]{scroll-margin-top:calc(var(--testata) + 1rem)}
.ambito[hidden]{display:none}
.ambito h3{line-height:1.3}
.ambito.evidenziata h3,.ambito:target h3{color:var(--oro-chiaro)}
@media (max-width:820px){.ambito{padding:var(--s-3) 0} .ambito h3{margin-bottom:0} .ambito .norma{margin-top:.35rem}}

/* — R61: nessuna etichetta sotto gli 11,2 px, anche da desktop — */
.hero__dato span,.hero__didascalia,.duo__foto figcaption,.studi dd,.scatto span,.gruppo legend,.contatore,
.registro__nota,.caso__stato,.caso__ruolo small,.caso__fonti summary,.clip__meta,.recapiti small,.ambito .norma{font-size:.7rem}
.menu a,.nastro__g span{font-size:.74rem;letter-spacing:.12em}
.logo__qual{font-size:max(.7rem,.46em)}

/* — R64: la qualifica lunga in testata. Fra 1001 e 1380 px la testata è compatta,
     sotto i 700 px la qualifica si nasconde (il pulsante resta sempre dentro) — */
@media (min-width:1001px) and (max-width:1380px){
  .testata{gap:var(--s-3)}
  .testata .logo__qual,.testata .logo__filo{display:none}
  .menu{gap:1.05rem}
  .menu a{letter-spacing:.1em}
}
@media (max-width:700px){.testata .logo__qual,.testata .logo__filo{display:none}}

/* — R25: da telefono la testata a filo del contenuto: 6.2rem invece di 7.8 — */
@media (max-width:560px){
  :root{--testata:6.2rem}
  .testata{padding:.5rem 1rem 0;gap:0 .7rem}
  .testata .testata__btn{padding:.6em 1.05em;font-size:.84rem;min-height:44px}
  .menu{padding-block:0}
}

/* — D3 · R04 R05 R65: sotto gli 880 px la foto sopra il nome, bassa, centrata sul viso — */
@media (max-width:880px){
  .hero__foto{order:-1;max-width:none;width:100%}
  .hero__foto img{aspect-ratio:3/2;max-height:42vh;max-height:42svh;object-position:50% 20%}
}
@media (max-width:880px) and (prefers-reduced-motion:no-preference){
  .hero__foto{animation:hero-sale .9s .1s var(--molla) both}
  .hero__foto::before{animation:hero-sipario 1s .35s cubic-bezier(.7,0,.2,1) both}
}
@media (max-width:560px){
  .hero{padding-top:calc(var(--testata) + var(--s-4))}
  .hero__c{gap:var(--s-4)}
  .hero__qual{margin-bottom:var(--s-3)}
  .hero__somm{margin-bottom:var(--s-4)}
  .hero__azioni{margin-bottom:var(--s-5)}
  /* il Profilo: foto piccola accanto a occhiello e titolo, il testo sotto a tutta larghezza */
  .duo{grid-template-columns:8.5rem minmax(0,1fr);column-gap:var(--s-4);row-gap:0;align-items:start}
  .duo>div{display:contents}
  .duo__foto{grid-row:1 / span 2;grid-column:1;margin:0 0 var(--s-4);max-width:none}
  .duo__foto img{aspect-ratio:3/4}
  .duo__foto figcaption{padding:var(--s-3) .5rem .5rem;letter-spacing:.06em}
  .duo .occhiello{grid-column:2;grid-row:1;align-self:end;margin-bottom:.4rem}
  .duo h2{grid-column:2;grid-row:2;align-self:start}
  .duo .testo-guida{grid-column:1 / -1}
}

/* — D1: «Copia l'indirizzo» accanto all'email (il form è rinviato) — */
.copia{
  display:inline-flex;align-items:center;margin-left:.6rem;padding:.3rem .6rem;min-height:2rem;cursor:pointer;
  border:1px solid rgba(203,176,138,.5);border-radius:var(--raggio);background:none;color:var(--oro-chiaro);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .25s,color .25s;
}
@media (hover:hover){.copia:hover{border-color:var(--oro-chiaro);color:var(--carta)}}
.copia.fatto{color:var(--carta);border-color:var(--oro-chiaro)}
@media (max-width:820px),(pointer:coarse){.copia{display:flex;margin:.4rem 0 0;min-height:44px}}

/* — R54: Instagram nel piede — */
.piede__social{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:var(--tenue-scuro);text-decoration:none;transition:color .25s}
@media (hover:hover){.piede__social:hover{color:var(--oro-chiaro)}}
.piede__social .ico{width:1.25rem;height:1.25rem;stroke:currentColor}

/* — fra 881 e 1040 px (iPad in orizzontale) i quattro dati si stringono, così il nastro
     resta nella prima schermata; le schede dei casi un po' più fitte, per restare quasi quadrate — */
@media (min-width:881px) and (max-width:1040px){
  .hero__dato b{font-size:1.05rem;line-height:1.2}
  .hero__dati{gap:.9rem 1.25rem}
  .hero__azioni{margin-bottom:var(--s-5)}
}
@media (min-width:701px){
  .casi .caso{gap:.6rem}
  .casi .caso h3{font-size:1.12rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   15 · v50 — IL PANNELLO: l'avviso in cima al sito e il link Privacy nel piede
   ══════════════════════════════════════════════════════════════════════════ */
/* — l'avviso (lo accende Luisa dal pannello: ferie, chiusure, novità).
     Striscia notte, testo oro chiaro: contrasto 7,5:1. Sta NEL FLUSSO, prima della
     testata: all'arrivo la testata gli sta sotto; scorrendo, l'avviso esce e la testata
     si attacca in cima (sticky al posto di fixed, SOLO quando l'avviso c'è; il margine
     negativo le toglie lo spazio, come quando era fixed). Non copre la hero: la spinge
     giù della sua altezza. Su telefono va a capo, non si taglia mai il testo. — */
:root{--avviso-alto:2.5rem}
.avviso-sito{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--avviso-alto);padding:.45rem clamp(1rem,4vw,2.6rem);
  background:var(--notte);color:var(--oro-chiaro);
  font-family:var(--sans);font-size:.86rem;font-weight:450;line-height:1.35;letter-spacing:.01em;
  text-align:center;text-wrap:balance;overflow-wrap:anywhere;
  border-bottom:1px solid rgba(203,176,138,.22);
}
.avviso-sito ~ .testata{position:sticky;top:0;left:auto;right:auto;margin-bottom:calc(-1 * var(--testata))}
/* sul desktop la hero, nastro compreso, resta tutta nella prima schermata anche con l'avviso
   (−1px: la testata vera è alta 72,7 px, non i 72 di --testata, e il margine ne toglie 72) */
@media (min-width:881px){
  .avviso-sito ~ main .hero{min-height:calc(100svh - var(--avviso-alto) - 1px)}
  .avviso-sito ~ main .hero__foto{width:min(100%,calc((100svh - var(--testata) - var(--avviso-alto) - 10.5rem) * .8))}
}
/* 404 e privacy non hanno testata: la pagina d'errore resta alta uno schermo, avviso compreso */
.avviso-sito + .quattro{min-height:calc(100svh - var(--avviso-alto))}

/* — il link Privacy nel piede (c'è solo con l'informativa accesa): colore e passaggio
     del mouse sono quelli di .piede a, i 44 px da telefono quelli di .piede__basso a — */
.piede__privacy{white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════
   16 · v51 — MODIFICHE 5 (26/09): Profilo a blocchi, sigle, audio, riga TV, logo
   ══════════════════════════════════════════════════════════════════════════ */
/* — una sigla con la minuscola («S.P.Es.») resta com'è anche dove il resto è in maiuscolo — */
.sigla{text-transform:none;text-decoration:none;font-style:normal;border:0;cursor:inherit}

/* — il Profilo: la frase d'apertura in grande, poi i blocchi con il titoletto.
     Due colonne dal computer, una da telefono: mai più di quattro righe per blocco. — */
.profilo__blocchi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5);margin-top:var(--s-5);max-width:40rem}
.profilo__blocco{padding-top:var(--s-3);border-top:1px solid var(--filo)}
.profilo__blocco h3{
  font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.4;color:var(--oro-testo);margin-bottom:.45rem;
}
.profilo__blocco p{font-size:.96rem;line-height:1.6;color:var(--tenue)}
@media (max-width:700px){
  .profilo__blocchi{grid-template-columns:1fr;gap:var(--s-3);margin-top:var(--s-4)}
  .profilo__blocco h3{font-size:.7rem;letter-spacing:.1em}
}
@media (max-width:560px){ .duo .profilo__blocchi{grid-column:1 / -1} }

/* — il video con la voce: parte muto; il pulsante in basso fa sentire l'audio.
     Senza JavaScript il pulsante non serve e non c'è. — */
.scatto__audio{
  position:absolute;left:.6rem;bottom:.6rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem .9rem .45rem .75rem;
  border:0;border-radius:999px;background:rgba(22,36,61,.84);color:var(--carta);cursor:pointer;
  font-family:var(--sans);font-size:.8rem;font-weight:600;line-height:1.2;text-align:left;
  box-shadow:0 4px 14px rgba(22,36,61,.28);transition:background-color .25s,color .25s,transform .25s var(--molla);
}
.scatto__audio .ico{width:1.15rem;height:1.15rem;stroke:currentColor}
.scatto .scatto__audio span{display:inline;margin:0;font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.scatto__audio[aria-pressed=true]{background:var(--oro);color:var(--notte)}
@media (hover:hover){.scatto__audio:hover{transform:translateY(-1px);background:var(--notte)}.scatto__audio[aria-pressed=true]:hover{background:var(--oro-chiaro)}}
.scatto__audio:focus-visible{outline:3px solid var(--blu-chiaro);outline-offset:2px}
html:not(.js) .scatto__audio{display:none}

/* — la seconda riga della galleria: i fotogrammi delle trasmissioni televisive — */
.registro--tv{margin-top:var(--s-6)}

/* — il logo dell'ente accanto a un incarico (il file originale, fondo reso trasparente) — */
.cv-lista li.cv-lista__con-logo{display:flex;align-items:flex-start;gap:var(--s-4)}
.cv-lista__logo{flex:0 0 auto;width:5.6rem;height:auto;margin-left:auto}
@media (max-width:560px){ .cv-lista__logo{width:3.8rem} .cv-lista li.cv-lista__con-logo{gap:var(--s-3)} }

/* — con la qualifica completa («Criminologa clinica e investigativa») la riga sotto il nome va su tre righe:
     sui telefoni bassi (390×667) la prima schermata si stringe un poco, così «Profilo» resta visibile — */
@media (max-width:560px) and (max-height:760px){
  .hero__foto img{aspect-ratio:16/9;object-position:50% 32%}
  .hero__qual{line-height:1.22}
  .hero__somm{margin-bottom:var(--s-3)}
}

/* ══════════════════════════════════════════════════════════════════════════
   17 · v52 — STEP 3 delle Modifiche 5 (26/09): le correzioni del controllo totale
   ══════════════════════════════════════════════════════════════════════════ */
/* — il credito del fotografo della foto d'apertura (la filigrana di Felix è stata tagliata via) — */
.hero__credito{
  position:absolute;right:0;top:calc(100% + .35rem);z-index:2;pointer-events:none;white-space:nowrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
}   /* sotto la foto, a destra, nello spazio che c'è già: non copre mai il viso e non sposta niente */
/* — la didascalia da telefono non passa sul viso — */
@media (max-width:560px){ .hero__didascalia{bottom:var(--s-3)} }

/* — qualifiche e quattro dati: niente a capo brutti («Rete 4» o «parte» da soli) — */
.hero__qual,.hero__dato b,.hero__dato span{text-wrap:balance}
@media (max-width:340px){ .hero__qual{font-size:1.06rem} }

/* — nel nastro la sigla resta attaccata al nome della scuola (senza il gioco dello spazio fra le voci) — */
.nastro__g .sigla{display:contents}

/* — il caso con quattro fonti: nella finestra del caso due per riga, mai tre più una da sola — */
@media (min-width:701px){ .scheda__corpo .caso__clip--tre:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} }

/* — il Profilo intero è lungo: da computer la foto sta in alto e accompagna il testo — */
@media (min-width:881px){ #profilo .duo{align-items:start} }
@media (min-width:881px) and (min-height:760px){ #profilo .duo__foto{position:sticky;top:calc(var(--testata) + var(--s-5))} }

/* — telefono in orizzontale: la foto intera accanto al nome, non una striscia con gli occhi — */
@media (orientation:landscape) and (max-height:500px){
  .hero{padding-top:calc(var(--testata) + var(--s-4))}
  .hero__c{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s-5)}
  .hero__foto,.avviso-sito ~ main .hero__foto{order:0;justify-self:end;width:auto;max-width:none}
  .hero__foto img{width:auto;height:calc(100svh - var(--testata) - var(--s-4) - var(--s-3) - 3.4rem);max-height:none;aspect-ratio:4/3;object-position:50% 28%}
  .hero__dati{grid-template-columns:minmax(0,1fr)}
  .hero__didascalia{left:var(--s-3);right:var(--s-3);bottom:var(--s-3)}
}

/* — doppio check del 26/09: il Profilo intero si legge bene a ogni larghezza — */
/* da computer i blocchi in una colonna sola: mai più di tre righe, titoletti sempre su una riga */
@media (min-width:881px){ .profilo__blocchi{grid-template-columns:1fr} }
/* telefoni molto stretti: mai più di quattro righe per blocco */
@media (max-width:359px){ .profilo__blocco p{font-size:.875rem} }
/* tablet e telefono in orizzontale: la foto piccola accanto al titolo, il testo sotto a tutta larghezza */
@media (min-width:561px) and (max-width:880px){
  #profilo .duo{grid-template-columns:11rem minmax(0,1fr);column-gap:var(--s-5);row-gap:0;align-items:start}
  #profilo .duo>div{display:contents}
  #profilo .duo__foto{grid-row:1 / span 2;grid-column:1;margin:0 0 var(--s-5);max-width:none}
  #profilo .duo__foto img{aspect-ratio:3/4}
  #profilo .duo .occhiello{grid-column:2;grid-row:1;align-self:end;margin-bottom:.4rem}
  #profilo .duo h2{grid-column:2;grid-row:2;align-self:start}
  #profilo .duo .testo-guida,#profilo .duo .profilo__blocchi{grid-column:1 / -1}
}
/* didascalie: a capo bilanciato */
.hero__didascalia,.scatto figcaption b{text-wrap:balance}
/* telefoni da 320 px: il nome nel piede va a capo invece di uscire dallo schermo; i blocchi restano entro 4 righe */
@media (max-width:340px){
  .piede .logo__qual{white-space:normal}
  .profilo__blocco p{font-size:.84rem}
}