/* ==========================================================================
   Palma Marino Aimone — landing
   Design: kit V7 di ChatGPT (Design/kit). Colori MISURATI sul design approvato
   (confronta-design.py --colori + campioni per zona), font e pezzi del kit.
   ========================================================================== */

/* Font locali del kit (licenze OFL in assets/fonts/) */
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("../fonts/DMSerifDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("../fonts/DMSerifDisplay-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Allura";src:url("../fonts/Allura-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* colori misurati sul design */
  --inchiostro:#0B1430;      /* titoli e testo (blu notte del design) */
  --grigio:#4B5261;          /* testo secondario */
  --arancio:#FC8828;         /* diagonale della hero */
  --arancio-vivo:#E83A12;    /* icone, note a mano, titoli grandi (testo grande: 4,2:1) */
  --arancio-testo:#C42A0A;   /* occhielli, pulsanti, link (5,7:1 su bianco, 5,1:1 su pesca) */
  --rosso:#B80C04;           /* titolo della fascia contatti */
  --pesca:#FEF3EA;           /* fondi pesca, cerchi */
  --avorio:#FDF5EE;          /* pannelli */
  --bianco:#FFFFFF;
  --linea:#F1E2D9;           /* separatori */
  --linea-arancio:#F4B89C;   /* linea che unisce gli spazi */
  --pesca-alone:#FEE3CD;     /* forma pesca dietro il libro (misurata) */

  /* tipografia (kit) */
  --font-testo:"Manrope",Arial,sans-serif;
  --font-titoli:"DM Serif Display",Georgia,serif;
  --font-nota:"Allura",cursive;
  --corpo:clamp(1.125rem,1.06rem + .18vw,1.25rem);

  /* misure (kit, rifinite) */
  --larghezza:79rem;
  --margine:clamp(1.25rem,5vw,5.5rem);
  --spazio-sezione:clamp(3.5rem,6vw,6rem);
  --raggio-foto:.5rem;
  --raggio-pannello:1.75rem;
  --raggio-bottone:.1875rem;
  --altezza-testata:5.75rem;
}

/* --- Alto contrasto (pulsante dell'accessibilità) --- */
html[data-contrasto]{
  --grigio:#0B1430; --arancio-vivo:#8E1F04; --arancio-testo:#8E1F04; --rosso:#8E1F04;
  --linea:#4B5261; --linea-arancio:#8E1F04; --pesca:#FFFFFF; --avorio:#FFFFFF;
}
html[data-contrasto] .pannello{border:2px solid var(--inchiostro)}
html[data-contrasto] .hero__fondo .f-pesca{fill:#FFFFFF}
html[data-contrasto] .bottone{border-width:2px}
/* --- Evidenzia i link --- */
html[data-link] a:not(.marchio):not(.salta){text-decoration:underline!important;text-decoration-thickness:3px!important;text-underline-offset:.2em;background:#FFF3A8;color:#0B1430!important;box-shadow:0 0 0 2px #0B1430}
/* --- Carattere più leggibile --- */
html[data-leggibile]{--font-titoli:"Manrope",Arial,sans-serif}
html[data-leggibile] body{letter-spacing:.02em;word-spacing:.08em;line-height:1.7}
html[data-leggibile] .hero__titolo{font-style:normal;letter-spacing:-.01em}
html[data-leggibile] .titolo-sezione,html[data-leggibile] .attivita h3{font-weight:700;letter-spacing:-.01em}

/* --- Base --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--altezza-testata) + 1rem)}
body{margin:0;background:var(--bianco);color:var(--inchiostro);font-family:var(--font-testo);font-size:var(--corpo);line-height:1.55;font-weight:450;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:var(--arancio-testo);text-underline-offset:.2em}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--arancio-testo);outline-offset:4px;border-radius:2px}
main:focus,section[tabindex="-1"]:focus{outline:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.solo-lettori{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contenitore{width:min(100% - 2*var(--margine),var(--larghezza));margin-inline:auto}
.sezione{padding-block:var(--spazio-sezione)}

.salta{position:absolute;z-index:200;left:1rem;top:-5rem;padding:.9rem 1.2rem;background:var(--bianco);color:var(--inchiostro);font-weight:700;border:2px solid var(--arancio-testo);border-radius:var(--raggio-bottone);text-decoration:none}
.salta:focus{top:1rem}

/* icone del kit (sprite in linea: il tratto lo decide il CSS) */
.ico{width:1.5rem;height:1.5rem;flex:none;stroke-width:1.65;fill:none;color:currentColor}
.ico--grande{width:6.5rem;height:6.5rem;stroke-width:.78;color:var(--arancio-vivo)}
.ico--formare{width:6.5rem;height:8.125rem;margin-top:-1.625rem}
.ico--riga{width:3rem;height:3rem;stroke-width:1.15;color:var(--arancio-vivo)}
.ico--freccia{width:1.5rem;height:1.5rem;stroke-width:1.8;color:var(--arancio-vivo)}
.ico--spazi{width:5.5rem;height:5.5rem;stroke-width:.9;color:var(--arancio-vivo)}
.ico--illustrazione{width:100%;height:auto;aspect-ratio:1;fill:var(--pesca);color:var(--arancio-vivo);stroke-width:.55}

/* note scritte a mano: i file SVG del kit come maschera, colorati coi colori misurati */
.nota{display:block;background:var(--arancio-vivo);-webkit-mask:var(--nota) center/contain no-repeat;mask:var(--nota) center/contain no-repeat;pointer-events:none}
.nota--persone{--nota:url("../img/note/persone-lavoro-futuro.svg");aspect-ratio:315/345}
.nota--ogni{--nota:url("../img/note/ogni-persona-conta.svg");aspect-ratio:453/250}
.nota--prima{--nota:url("../img/note/le-persone-prima-di-tutto.svg");aspect-ratio:486/250}
.nota--nuove{--nota:url("../img/note/nuove-prospettive.svg");aspect-ratio:582/155}
/* note scritte col font a mano del kit (Allura), dove il design le spezza diversamente dal file */
.nota-testo{font:400 clamp(2.25rem,1.5rem + 2.2vw,3.5rem)/.95 var(--font-nota);color:var(--arancio-vivo);pointer-events:none}
.nota-testo span{display:block}
.nota-testo::after{content:"";display:block;width:75%;height:2px;margin:.35rem 0 0 18%;background:var(--arancio-vivo);transform:rotate(-4deg);border-radius:2px}
.riga{display:block}
@media (max-width:899px){.riga-telefono{display:block}}

/* testi ricorrenti */
.occhiello{font-size:.875rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--arancio-testo);margin-bottom:.9rem}
.titolo-sezione{font-family:var(--font-titoli);font-weight:400;font-size:clamp(2.125rem,1.45rem + 2.3vw,3.375rem);line-height:1.08;letter-spacing:-.015em;color:var(--inchiostro);text-wrap:balance}
.titolo-sezione--riga{font-size:clamp(2rem,1.45rem + 1.9vw,3rem)}
.titolo-sezione--sans{font-family:var(--font-testo);font-weight:500;letter-spacing:-.03em;line-height:1.1}

.bottone{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;min-height:3.5rem;padding:.75rem 1.6rem;border:1.5px solid var(--arancio-testo);border-radius:var(--raggio-bottone);background:var(--bianco);color:var(--arancio-testo);font-size:1.125rem;font-weight:650;line-height:1.2;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.bottone .ico{width:1.25rem;height:1.25rem;stroke-width:1.9;transition:transform .2s ease}
.bottone:hover{background:var(--pesca)}
.bottone:hover .ico{transform:translateX(3px)}
.bottone:active{background:var(--linea)}
.bottone--pieno{background:var(--arancio-testo);color:var(--bianco)}
.bottone--pieno:hover{background:var(--rosso);color:var(--bianco)}
.bottone .ico--esterno{width:1.15rem;height:1.15rem}
.bottone:hover .ico--esterno{transform:translate(2px,-2px)}
/* link alle pagine interne: testo arancio con la freccia */
.link-freccia{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;margin-top:1.25rem;color:var(--arancio-testo);font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em}
.link-freccia .ico{width:1.15rem;height:1.15rem;stroke-width:2;transition:transform .2s ease}
.link-freccia:hover .ico{transform:translateX(4px)}
.link-freccia:hover{text-decoration-thickness:2.5px}

.pannello{border-radius:var(--raggio-pannello);background:var(--avorio);position:relative;overflow:hidden}
.trattino{display:block;width:2.5rem;height:2px;background:var(--arancio-vivo);margin:1.4rem 0}

/* ==========================================================================
   TESTATA
   ========================================================================== */
.testata{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--altezza-testata);transition:background-color .25s ease,box-shadow .25s ease}
.testata.scorsa{background:rgb(255 255 255 / .97);box-shadow:0 1px 0 var(--linea)}
.testata__riga{height:100%;display:flex;align-items:center;gap:1.25rem}
/* il logo del kit ha margini vuoti nel file: si mostra solo il disegno (nessuna modifica al file) */
.marchio{--logo:clamp(15rem,28vw,25rem);display:flex;align-items:center;flex:none;overflow:hidden;width:calc(var(--logo) * .83);height:max(calc(var(--logo) * .138),3rem);border-radius:4px}
.marchio img{flex:none;width:var(--logo);max-width:none;height:auto;margin-left:calc(var(--logo) * -.03)}

.menu{margin-left:auto}
.menu__voci{display:flex;gap:clamp(1rem,2.3vw,2.75rem)}
.menu__voci a{position:relative;display:inline-flex;align-items:center;min-height:3rem;color:var(--inchiostro);font-weight:550;font-size:clamp(1rem,.85rem + .25vw,1.125rem);text-decoration:none}
.menu__voci a::after{content:"";position:absolute;left:50%;bottom:.45rem;width:1.5rem;height:2px;background:var(--arancio-testo);transform:translateX(-50%) scaleX(0);transition:transform .2s ease}
.menu__voci a:hover::after,.menu__voci a[aria-current]::after{transform:translateX(-50%) scaleX(1)}
.menu__bottone{display:none}

/* pulsante dell'accessibilità (in alto a sinistra, richiesto dalla cliente) */
.a11y{position:relative;flex:none}
.a11y__bottone{display:inline-flex;align-items:center;gap:.55rem;min-height:3rem;min-width:3rem;padding:.4rem .95rem .4rem .65rem;border:1.5px solid var(--arancio-testo);border-radius:2rem;background:var(--bianco);color:var(--arancio-testo);font-weight:650;font-size:.9375rem;transition:background-color .2s ease}
.a11y__bottone .ico{width:1.6rem;height:1.6rem;stroke-width:1.7}
/* tondo, con la sola icona: il nome accessibile è «Apri le opzioni di accessibilità»; la scritta «Accessibilità» è il titolo del pannello */
.a11y__etichetta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.a11y__bottone{padding:0;justify-content:center;width:3rem;height:3rem}
.a11y__bottone:hover,.a11y__bottone[aria-expanded="true"]{background:var(--pesca)}
.a11y__pannello{position:absolute;left:0;top:calc(100% + .6rem);width:min(20rem,calc(100vw - 2rem));padding:1rem;background:var(--bianco);border:1px solid var(--linea);border-radius:1rem;box-shadow:0 18px 40px -18px rgb(11 20 48 / .35)}
.a11y__titolo{font-weight:750;font-size:1rem;margin:0 0 .5rem .25rem;color:var(--inchiostro)}
.a11y__voci{display:grid;gap:.25rem}
.a11y__voci button{display:flex;align-items:center;gap:.75rem;width:100%;min-height:3rem;padding:.5rem .75rem;border:1px solid transparent;border-radius:.6rem;background:none;text-align:left;font-size:1rem;font-weight:550;color:var(--inchiostro)}
.a11y__voci button .ico{color:var(--arancio-testo)}
.a11y__voci button:hover{background:var(--pesca)}
.a11y__voci button[aria-pressed="true"]{background:var(--pesca);border-color:var(--arancio-testo)}
.a11y__voci button[aria-pressed="true"]::after{content:"✓";margin-left:auto;color:var(--arancio-testo);font-weight:800}
.a11y__voci button:disabled{opacity:.45;cursor:not-allowed}
.a11y__ripristina{border-top:1px solid var(--linea)!important;border-radius:0 0 .6rem .6rem!important;margin-top:.25rem}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--bianco);padding-top:var(--altezza-testata);min-height:clamp(46rem,61vw,56rem)}
.hero__fondo{position:absolute;inset:0;width:100%;height:100%}
.hero__fondo .f-arancio{fill:var(--arancio)}
.hero__fondo .f-pesca{fill:var(--pesca)}
.hero__fondo--telefono{display:none}
.hero__griglia{position:relative;min-height:calc(clamp(46rem,61vw,56rem) - var(--altezza-testata))}
.hero__testo{position:relative;z-index:2;width:min(100%,44rem);padding-top:clamp(2rem,4vw,4.25rem);padding-bottom:2.5rem}
.hero__titolo{font-family:var(--font-testo);font-weight:800;font-style:italic;font-size:clamp(2.5rem,.8rem + 4.3vw,4.875rem);line-height:.99;letter-spacing:-.045em;color:var(--inchiostro)}
.hero__titolo>span{display:block}
.hero__ruolo{margin-top:.55rem;font-weight:650;font-style:normal;font-size:clamp(1.375rem,.95rem + 1.25vw,2.25rem);line-height:1.15;letter-spacing:-.02em}
.hero__azioni{display:flex;flex-wrap:wrap;gap:.9rem 1rem;margin-top:2.1rem}
.hero__azioni .bottone{min-height:4rem;padding-inline:1.75rem;font-size:clamp(1.125rem,1rem + .3vw,1.3125rem)}
.hero__sotto{margin-top:1.5rem;font-size:clamp(1.25rem,.95rem + .95vw,2rem);line-height:1.25;font-weight:500;letter-spacing:-.015em;max-width:17.6em}
.hero__per{margin-top:.5rem;font-size:clamp(1.125rem,.95rem + .5vw,1.5rem);color:var(--inchiostro);max-width:38rem;letter-spacing:-.01em}

.hero__ritratto{position:absolute;z-index:1;right:calc(-1 * (100vw - min(100vw - 2*var(--margine),var(--larghezza))) / 2);bottom:0;width:min(692px,50vw)}
.hero__ritratto img{width:100%}
.hero__nota{position:relative;z-index:2;margin:clamp(2.75rem,3.6vw,3.75rem) 0 0 -.25rem;width:clamp(9rem,4rem + 6vw,12rem);transform:rotate(-13deg);transform-origin:left bottom}

/* ==========================================================================
   2 · ATTIVITÀ (tre colonne aperte, separatori sottili)
   ========================================================================== */
.attivita{padding-block:clamp(2.25rem,3.4vw,3.25rem) clamp(1.5rem,2.4vw,2.25rem)}
.attivita__testa{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,6vw,6.5rem);align-items:start;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.attivita__intro p{font-size:clamp(1.125rem,1rem + .35vw,1.375rem);line-height:1.45;max-width:32rem}
.attivita__intro p+p{margin-top:.6rem}
.attivita__apertura{font-weight:650}
.attivita__griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-block:0;padding:0;list-style:none;counter-reset:ambito}
.attivita__voce{counter-increment:ambito}
.attivita h3::before{content:counter(ambito,decimal-leading-zero);display:block;margin-bottom:.45rem;font:700 .875rem/1 var(--font-testo);letter-spacing:.22em;color:var(--arancio-testo)}
.attivita__voce{padding:0 clamp(1.5rem,3.4vw,3.25rem) .5rem}
.attivita__voce:first-child{padding-left:clamp(0rem,1vw,1.25rem)}
.attivita__voce+.attivita__voce{border-left:1px solid var(--linea)}
.attivita__voce .ico--grande{margin-inline:clamp(0rem,2vw,2rem) 0;margin-bottom:.6rem}
.attivita h3{font-family:var(--font-titoli);font-weight:400;font-size:clamp(2.25rem,1.5rem + 1.7vw,3rem);line-height:1.1;color:var(--arancio-vivo);letter-spacing:-.01em}
.attivita__voce p{margin-top:.6rem;color:var(--inchiostro);max-width:17rem;font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.4}
.attivita__voce::after{content:"";display:block;width:2.75rem;height:2px;margin-top:1.4rem;background:var(--arancio-vivo)}

/* ==========================================================================
   3 · PROFILO
   ========================================================================== */
.profilo{position:relative;overflow:hidden;padding-block:clamp(2.5rem,4vw,3.75rem) clamp(1.5rem,2.5vw,2.5rem)}
.profilo::before{content:"";position:absolute;z-index:0;left:-14rem;top:-3rem;width:52rem;height:52rem;background:url("../img/decorazioni/archi-profilo.svg") center/contain no-repeat;opacity:.95;pointer-events:none}
.profilo__griglia{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,6vw,6.5rem);align-items:start}
.profilo__testa{position:relative;padding-bottom:5.75rem}
.profilo__nota{position:absolute;left:clamp(10rem,22vw,16rem);bottom:0;width:clamp(10rem,7rem + 7vw,15rem);transform:rotate(-12deg)}
.profilo__intro{font-size:clamp(1.25rem,1rem + .75vw,1.625rem);line-height:1.4;font-weight:450;padding-top:2.1rem;max-width:17.5em}
.incarichi{margin-top:0}
.profilo__testo{margin-top:.8rem;max-width:30rem}
.associazioni{padding-top:0}
.associazioni .profilo__testa{padding-bottom:0}
.associazioni .incarichi li:first-child{padding-top:.25rem}
.incarichi li{display:flex;align-items:flex-start;gap:2rem;padding:1.6rem 0;font-size:clamp(1.0625rem,1rem + .25vw,1.25rem);line-height:1.45}
.incarichi li>div{max-width:30rem}
.incarichi p+p{margin-top:.4rem;color:var(--grigio)}
.incarichi__ruolo{font-weight:600}
.incarichi li+li{border-top:1px solid var(--linea-arancio)}
.incarichi .ico--riga{width:4.25rem;height:4.25rem;stroke-width:1.05}

/* ==========================================================================
   4 · DOCENZE
   ========================================================================== */
.docenze{padding-top:clamp(1rem,2vw,2rem);padding-bottom:clamp(2rem,3vw,3rem)}
.docenze__griglia{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.docenze__illustrazione{max-width:31rem;width:100%;justify-self:center}
.docenze__sotto{margin-top:.6rem;color:var(--inchiostro)}
.righe{margin-top:1.5rem}
.riga-statica,.riga-link{display:flex;align-items:center;gap:clamp(1.25rem,3vw,3rem);min-height:5.25rem;padding:.5rem 2rem .5rem .75rem;font-size:clamp(1.1875rem,1rem + .45vw,1.4375rem);font-weight:500}
.righe .ico--riga{width:3.25rem;height:3.25rem}
.righe>li+li{border-top:1px solid var(--linea-arancio)}
.riga__testo{flex:1}
.riga__fonte{display:block;margin-top:.15rem;font-size:.9em;font-weight:500;color:var(--grigio)}
.riga-link{color:var(--inchiostro);text-decoration:none;border-radius:.5rem;background:linear-gradient(90deg,var(--pesca),var(--pesca)) left/0% 100% no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.riga-link:hover,.riga-link:focus-visible{background-size:100% 100%}
.riga-link:hover .riga__titolo{text-decoration:underline;text-underline-offset:.2em}
.riga-link .ico--esterno{width:1.35rem;height:1.35rem;stroke-width:1.8;color:var(--arancio-vivo);transition:transform .2s ease}
.riga-link:hover .ico--esterno{transform:translate(3px,-3px)}
.riga-link:active{background-size:100% 100%;transform:scale(.995)}
.docenze__nota-testo{margin-top:.9rem;max-width:34rem}
.righe+.docenze__nota-testo{margin-top:1.5rem}

/* ==========================================================================
   5 · IL VALORE DEL CONFRONTO (pannello + galleria che cresce)
   ========================================================================== */
.sezione-pannello{padding-block:clamp(.75rem,1.2vw,1.25rem)}
.articoli__griglia{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.articoli__testa p{margin-top:1rem;max-width:24rem}
.righe--articoli{margin-top:0}
.righe--articoli .riga__titolo{font-weight:550}
.righe--articoli .riga-statica,.righe--articoli .riga-link{min-height:5rem;padding-block:.9rem}
.righe--articoli li{font-size:clamp(1.0625rem,1rem + .25vw,1.25rem);line-height:1.4}
.confronto__pannello{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start;padding:clamp(1.75rem,3vw,2.75rem) clamp(1.5rem,3vw,3rem) clamp(1.5rem,2.6vw,2.5rem) clamp(1.5rem,3.4vw,3.25rem)}
.confronto__testo .titolo-sezione{font-size:clamp(2rem,1.3rem + 1.6vw,2.75rem)}
.confronto__testo p{margin-top:1rem;max-width:12.5em;font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.4}
.confronto__nota{width:clamp(10rem,6rem + 6.5vw,13.5rem);margin-top:1.25rem;transform:rotate(-14deg);transform-origin:left center}

.galleria{min-width:0}
.confronto__elenco{grid-column:1/-1;border-top:1px solid var(--linea-arancio);padding-top:1.5rem}
.eventi{columns:2 22rem;column-gap:3rem}
.eventi li{position:relative;break-inside:avoid;padding:.35rem 0 .35rem 1.4rem;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);line-height:1.45}
.eventi li::before{content:"";position:absolute;left:0;top:.95em;width:.5rem;height:.5rem;border-radius:50%;background:var(--arancio-vivo)}
.confronto__elenco .link-freccia{margin-top:.75rem}
.galleria__traccia{display:flex;gap:clamp(1rem,1.8vw,1.5rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--linea-arancio) transparent;padding-bottom:.25rem}
.galleria__voce{flex:1 1 0;min-width:0;scroll-snap-align:start}
.galleria__voce--larga{flex-grow:1.24}
.galleria__foto{overflow:hidden;border-radius:var(--raggio-foto);background:var(--pesca)}
.galleria figure img{width:100%;height:clamp(13rem,21vw,19.5rem);object-fit:cover}
.galleria figcaption{margin-top:.75rem;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);color:var(--inchiostro)}
/* con più di due foto la galleria diventa una riga che scorre (elenco che cresce dal pannello) */
.galleria__traccia:has(> li:nth-child(3)) .galleria__voce{flex:0 0 min(26rem,46%)}

/* ==========================================================================
   6 · PUBBLICAZIONI
   ========================================================================== */
.pubblicazioni__pannello{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr) minmax(0,.38fr);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:center;padding:clamp(1rem,2vw,1.5rem) clamp(1.5rem,4vw,4rem) clamp(1rem,2vw,1.5rem) clamp(.5rem,2vw,2rem);background:linear-gradient(105deg,#FFFFFF 0%,var(--avorio) 100%)}
.libro{position:relative;display:grid;place-items:center}
.libro::before{content:"";position:absolute;inset:5% -25% 0 5%;background:radial-gradient(ellipse closest-side,var(--pesca-alone) 0 70%,rgb(254 227 205 / 0) 100%);transform:rotate(-16deg)}
.libro__img{position:relative;width:min(112%,40rem);max-width:none;margin:-9% -6% -8%}
.pubblicazioni__testo{position:relative;z-index:1;padding-block:2rem}
.libro__titolo{font-family:var(--font-testo);font-weight:500;font-size:clamp(1.25rem,1rem + .75vw,1.75rem);letter-spacing:-.02em;line-height:1.3}
.libro__cura{margin-top:.4rem;color:var(--inchiostro);max-width:22em;font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.4}
.pubblicazioni .bottone{margin-top:1.5rem;min-width:16.5rem;min-height:4rem;font-size:clamp(1.125rem,1rem + .3vw,1.3125rem)}
.libro__contributi{margin-top:1.75rem;font-weight:650}
.libro__elenco{margin-top:.35rem}
.libro__elenco li{position:relative;padding:.2rem 0 .2rem 1.4rem}
.libro__elenco li::before{content:"";position:absolute;left:0;top:.85em;width:.5rem;height:.5rem;border-radius:50%;background:var(--arancio-vivo)}
.libro__nuovo{margin-top:1rem;font-style:italic;color:var(--grigio)}
.pubblicazioni__nota{position:relative;justify-self:start;align-self:center;width:max-content;margin-top:3rem;margin-left:-2rem;transform:rotate(-24deg);text-align:left}
.pubblicazioni__nota span:nth-child(2){padding-left:.9em}
.pubblicazioni__nota span:nth-child(3){padding-left:.35em}

/* ==========================================================================
   7 · SPAZI DIVERSI (quattro gruppi uniti da una linea)
   ========================================================================== */
.spazi{padding-top:clamp(2.5rem,4vw,3.5rem);padding-bottom:clamp(2rem,3vw,3rem)}
.spazi__sotto{margin-top:.5rem;color:var(--inchiostro)}
.spazi__elenco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(2rem,3.5vw,3rem)}
.spazi__elenco li{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;font-weight:650;font-size:clamp(1.125rem,1rem + .45vw,1.4375rem)}
.spazi__elenco li+li::before{content:"";position:absolute;top:2.75rem;right:calc(50% + 4.25rem);width:calc(100% - 8.5rem);height:2px;background:linear-gradient(var(--linea-arancio),var(--linea-arancio)) center/100% 2px no-repeat}
.spazi__elenco li+li::after{content:"";position:absolute;top:calc(2.75rem - 6px);left:0;width:14px;height:14px;border-radius:50%;background:var(--arancio-vivo);transform:translateX(-50%)}

/* ==========================================================================
   8 · CONTATTI (fascia pesca)
   ========================================================================== */
.contatti{padding-bottom:clamp(1.5rem,2.5vw,2.5rem)}
.contatti__pannello{padding:clamp(2rem,4vw,3.75rem) clamp(1.5rem,5vw,5.5rem) clamp(2.25rem,4vw,3.5rem);background:
  radial-gradient(circle at 88% 22%,rgb(252 200 160 / .55) 0 21%,transparent 21.2%),
  radial-gradient(circle at 70% 118%,rgb(255 255 255 / .55) 0 26%,transparent 26.2%),
  linear-gradient(100deg,#FFF9F4 0%,var(--pesca) 55%,#FDE6D3 100%)}
.contatti__nota{position:relative;z-index:1;font:400 clamp(2rem,1.4rem + 2vw,3.375rem)/1 var(--font-nota);color:var(--arancio-vivo);transform:rotate(-7deg);transform-origin:left bottom;margin-bottom:1.1rem;width:max-content;max-width:100%}
.contatti__titolo{position:relative;z-index:1;color:var(--rosso);font-size:clamp(2.125rem,1.3rem + 2.7vw,3.75rem)}
.contatti__sotto{position:relative;z-index:1;margin-top:.5rem;font-size:clamp(1.25rem,.95rem + 1vw,2rem);line-height:1.3}
.modulo .bottone{margin-top:.35rem;font-size:clamp(1.0625rem,1rem + .25vw,1.25rem)}
.contatti__freccia{position:absolute;z-index:0;left:3%;bottom:3%;width:min(48%,36rem);aspect-ratio:1080/300;background:var(--arancio-vivo);-webkit-mask:url("../img/decorazioni/freccia-percorso.svg") center/contain no-repeat;mask:url("../img/decorazioni/freccia-percorso.svg") center/contain no-repeat;pointer-events:none}

/* ==========================================================================
   9 · DOMANDE FREQUENTI (fisarmonica: righe e chevron del kit)
   ========================================================================== */
.faq__voce+.faq__voce{border-top:1px solid var(--linea-arancio)}
.faq h3{margin:0;font:inherit}
.faq__domanda{display:flex;align-items:center;gap:1.5rem;width:100%;min-height:4.5rem;padding:1rem .75rem;border:0;background:none;text-align:left;font-size:clamp(1.125rem,1rem + .35vw,1.375rem);font-weight:600;color:var(--inchiostro);border-radius:.5rem;transition:background-color .2s ease}
.faq__domanda:hover{background:var(--pesca)}
.faq__domanda .ico{margin-left:auto;width:1.5rem;height:1.5rem;stroke-width:1.9;color:var(--arancio-vivo);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq__domanda[aria-expanded="true"] .ico{transform:rotate(180deg)}
.faq__risposta{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
.faq__risposta>div{overflow:hidden}
.faq__risposta p{padding:0 .75rem 1.25rem;max-width:40rem;color:var(--inchiostro)}
.faq__risposta.chiusa{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}

/* ==========================================================================
   10 · CONTATTI: testo e modulo
   ========================================================================== */
.contatti__pannello{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.contatti__testo{position:relative;z-index:1}
.contatti__nota{width:clamp(11rem,8rem + 7vw,16rem);margin-bottom:1rem}
.contatti__canali{margin-top:1.5rem;display:grid;gap:.25rem}
.contatti__canali li{display:flex;align-items:center;gap:.75rem;min-height:3rem;font-size:clamp(1.0625rem,1rem + .25vw,1.25rem)}
.contatti__canali .ico{color:var(--arancio-vivo)}
.contatti__canali a{display:inline-flex;align-items:center;min-height:3rem;color:var(--arancio-testo);font-weight:600;text-underline-offset:.2em}
.modulo{position:relative;z-index:1;display:grid;gap:1.1rem;padding:clamp(1.25rem,3vw,2.25rem);background:var(--bianco);border-radius:1.25rem;box-shadow:0 22px 50px -30px rgb(11 20 48 / .35)}
.campo{display:grid;gap:.4rem}
.campo label{font-weight:650;font-size:1.0625rem}
.campo input,.campo textarea{width:100%;min-height:3.25rem;padding:.7rem .9rem;border:1.5px solid var(--grigio);border-radius:.5rem;background:var(--bianco);color:var(--inchiostro);font:inherit;font-size:1.0625rem;line-height:1.4}
.campo textarea{min-height:8rem;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--grigio);opacity:1}
.campo input:focus-visible,.campo textarea:focus-visible{outline:3px solid var(--arancio-testo);outline-offset:2px;border-color:var(--arancio-testo)}
.campo [aria-invalid="true"]{border-color:var(--rosso);border-width:2px}
.campo__errore[hidden]{display:none}
.campo__errore{display:flex;align-items:flex-start;gap:.4rem;color:var(--rosso);font-weight:650;font-size:1rem}
.campo__errore::before{content:"!";flex:none;display:inline-grid;place-items:center;width:1.2rem;height:1.2rem;margin-top:.15rem;border-radius:50%;background:var(--rosso);color:var(--bianco);font-size:.8rem;font-weight:800}
.campo--spunta{grid-template-columns:auto 1fr;align-items:start;column-gap:.75rem}
.campo--spunta input{width:1.5rem;height:1.5rem;min-height:0;margin:.15rem 0 0;accent-color:var(--arancio-testo)}
.campo--spunta label{font-weight:500}
.campo--spunta .campo__errore{grid-column:1/-1}
.modulo__invia{justify-self:start;min-height:3.5rem}
.modulo__esito{font-weight:650}
.piede__contatti{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem clamp(1rem,3vw,2.5rem);padding-bottom:.75rem}
.piede__contatti>a{display:inline-flex;align-items:center;gap:.5rem}
.piede__contatti .ico{width:1.2rem;height:1.2rem;color:var(--arancio-vivo)}
.piede__contatti .piede__legale{margin-left:auto}

/* ==========================================================================
   PIÈ DI PAGINA (bianco, come nel design)
   ========================================================================== */
.piede{margin-top:clamp(1rem,2vw,1.75rem)}
.piede__riga{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding-block:clamp(1.5rem,2.5vw,2.25rem);border-top:1px solid var(--linea)}
.marchio--piede{--logo:clamp(15rem,30vw,29rem)}
.piede .marchio{justify-content:flex-start;min-width:0}
.piede__menu{margin-left:auto}
.piede__menu ul,.piede__legale{display:flex;flex-wrap:wrap;gap:0 clamp(.75rem,2vw,2rem)}
.piede a{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;min-width:2.75rem;color:var(--grigio);font-size:clamp(1rem,.95rem + .2vw,1.125rem);text-decoration:none}
.piede a:hover{color:var(--arancio-testo);text-decoration:underline}
.piede__legale{gap:0 .9rem}
.piede__legale li+li::before{content:"·";margin-right:.9rem;color:var(--grigio)}
.piede__fondo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 2rem;padding-bottom:1.5rem;font-size:.9375rem;color:var(--grigio)}
.piede__fondo a{font-size:inherit;min-height:2.75rem;color:var(--arancio-testo);text-decoration:underline}

/* ==========================================================================
   PAGINE DI SERVIZIO (privacy, 404): stessi pezzi della landing
   ========================================================================== */
.pagina-interna .testata{background:var(--bianco);box-shadow:0 1px 0 var(--linea)}
.documento{padding-top:calc(var(--altezza-testata) + clamp(2.5rem,5vw,4.5rem));padding-bottom:var(--spazio-sezione)}
.documento__corpo{max-width:46rem}
.documento h1{margin-bottom:.75rem}
.documento h2{font-family:var(--font-titoli);font-weight:400;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;margin:2.25rem 0 .6rem}
.documento p+p{margin-top:.8rem}
.documento__data{color:var(--grigio);font-size:1rem}
.documento__elenco{margin:.8rem 0;padding-left:1.25rem;list-style:disc}
.documento__elenco li+li{margin-top:.5rem}
.documento__torna{margin-top:2.5rem!important}
.documento--404{min-height:70vh;display:flex;align-items:center}
.documento--404 .documento__corpo{text-align:left}
.documento__nota{width:clamp(10rem,30vw,14rem);margin-bottom:1rem;transform:rotate(-10deg);transform-origin:left bottom}
.documento__testo{font-size:clamp(1.25rem,1rem + .6vw,1.5rem);margin-top:.5rem}

/* ==========================================================================
   BANNER COOKIE (una riga)
   ========================================================================== */
.cookie{position:fixed;z-index:60;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.45rem 1rem;background:var(--bianco);border-top:1px solid var(--linea);font-size:.875rem;line-height:1.35;color:var(--inchiostro);box-shadow:0 -6px 20px -14px rgb(11 20 48 / .4)}
.cookie[hidden]{display:none}
.cookie p{margin:0}
.cookie a{color:var(--arancio-testo)}
.cookie__ok{min-height:2.75rem;min-width:3.5rem;padding:.3rem .9rem;border:1.5px solid var(--arancio-testo);border-radius:var(--raggio-bottone);background:var(--bianco);color:var(--arancio-testo);font-weight:700;font-size:.9375rem}
.cookie__ok:hover{background:var(--pesca)}
/* una riga anche sul telefono: sotto i 620 px si mostra la frase corta */
@media (max-width:619px){.cookie__lungo{display:none}.cookie{gap:.6rem;padding:.25rem .5rem .25rem .75rem;font-size:.78rem}.cookie p{white-space:nowrap}.cookie__ok{min-width:2.75rem;padding:.3rem .6rem}}
@media (max-width:379px){.cookie p{white-space:normal}}

/* ==========================================================================
   MOVIMENTO (step 5-bis · rendilo tuo)
   Pochi effetti, una volta sola, mai in loop (WCAG 2.2.2). Senza JS tutto è visibile;
   con «riduci movimento» non si muove niente.
   ========================================================================== */
/* risposte al tocco e al mouse: valgono sempre (non sono movimento) */
.bottone:active,.a11y__bottone:active,.menu__bottone:active,.cookie__ok:active{transform:scale(.97)}
.bottone,.a11y__bottone,.cookie__ok{transition:background-color .2s ease,color .2s ease,transform .12s ease}
.testata{transition:background-color .25s ease,box-shadow .25s ease,height .25s ease}
@media (min-width:900px){.testata.scorsa{height:4.75rem}}

@media (prefers-reduced-motion:no-preference){
  /* 1 · la prima schermata entra: titolo riga per riga, poi testi, pulsante, ritratto,
         la diagonale arancio che scivola al suo posto e la nota che si scrive */
  @keyframes pma-sale{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes pma-appare{from{opacity:0}to{opacity:1}}
  @keyframes pma-diagonale{from{opacity:0;transform:translateX(9%)}to{opacity:1;transform:none}}
  @keyframes pma-scrive{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
  .hero__titolo>span{animation:pma-sale .8s cubic-bezier(.2,.7,.2,1) both}
  .hero__titolo>span:nth-child(2){animation-delay:.12s}
  .hero__sotto{animation:pma-sale .8s .3s cubic-bezier(.2,.7,.2,1) both}
  .hero__per{animation:pma-sale .8s .38s cubic-bezier(.2,.7,.2,1) both}
  .hero__azioni{animation:pma-sale .8s .46s cubic-bezier(.2,.7,.2,1) both}
  .hero__ritratto{animation:pma-sale 1s .2s cubic-bezier(.2,.7,.2,1) both}
  .hero__fondo .f-arancio{transform-box:fill-box;animation:pma-diagonale 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hero__fondo .f-pesca{animation:pma-appare 1.2s .25s ease both}
  .hero__nota{animation:pma-scrive 1.3s .9s cubic-bezier(.6,0,.25,1) both}

  /* 2 · le sezioni arrivano mentre si scorre (main.js mette .reveal solo a ciò che è sotto la piega) */
  .reveal{opacity:0;transform:translateY(24px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .8s ease var(--ritardo,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--ritardo,0ms)}
  [data-entra="gruppo"].reveal{opacity:1;transform:none}
  [data-entra="gruppo"].reveal>*{opacity:0;transform:translateY(22px)}
  [data-entra="gruppo"].reveal.in>*{opacity:1;transform:none;transition:opacity .7s ease var(--ritardo,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--ritardo,0ms)}

  /* 3 · le icone del kit si disegnano quando entrano */
  .reveal .ico--grande,.reveal .ico--riga,.reveal .ico--spazi,.reveal .ico--illustrazione{stroke-dasharray:90;stroke-dashoffset:90}
  .reveal.in .ico--grande,.reveal.in .ico--riga,.reveal.in .ico--spazi,.reveal.in .ico--illustrazione{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.2,1) calc(var(--ritardo,0ms) + .15s)}

  /* 4 · le note a mano e la freccia dei contatti si scrivono da sinistra a destra */
  .reveal .nota,.reveal .nota-testo,.reveal .contatti__nota,.reveal .contatti__freccia{clip-path:inset(-20% 100% -20% 0)}
  .reveal.in .nota,.reveal.in .nota-testo,.reveal.in .contatti__nota,.reveal.in .contatti__freccia{clip-path:inset(-20% 0 -20% 0);transition:clip-path 1.3s cubic-bezier(.6,0,.25,1) .55s}
  .reveal.in .contatti__freccia{transition-duration:1.6s;transition-delay:.8s}

  /* 5 · il libro si posa nel suo alone */
  .pubblicazioni__pannello.reveal .libro__img{transform:translateY(18px) rotate(-3deg)}
  .pubblicazioni__pannello.reveal.in .libro__img{transform:none;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
  .pubblicazioni__pannello.reveal .libro::before{opacity:0;transform:rotate(-16deg) scale(.88)}
  .pubblicazioni__pannello.reveal.in .libro::before{opacity:1;transform:rotate(-16deg);transition:opacity 1s ease .1s,transform 1.2s cubic-bezier(.2,.7,.2,1) .1s}

  /* 6 · foto e righe che rispondono al mouse e al dito */
  .galleria figure img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .galleria figure:hover img{transform:scale(1.045)}
  .galleria__traccia.trascina{cursor:grabbing;scroll-snap-type:none}
}
.galleria__traccia[tabindex]{cursor:grab}
.galleria__traccia:focus-visible{outline:3px solid var(--arancio-testo);outline-offset:4px}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width:1099px){
  /* menu a scomparsa: cinque voci non stanno accanto al logo sotto i 1100 px */
  .menu__bottone{display:inline-grid;place-items:center;width:3rem;height:3rem;padding:0;border:0;background:none;color:var(--arancio-testo);border-radius:.4rem}
  .menu__bottone .ico{width:2.1rem;height:2.1rem;stroke-width:1.5;grid-area:1/1}
  .menu__bottone .ico--chiudi,.menu__bottone[aria-expanded="true"] .ico--menu{display:none}
  .menu__bottone[aria-expanded="true"] .ico--chiudi{display:block}
  .menu__voci{display:none;position:fixed;left:0;right:0;top:var(--altezza-testata);flex-direction:column;gap:0;padding:.5rem var(--margine) 1.5rem;background:var(--bianco);border-bottom:1px solid var(--linea);box-shadow:0 20px 30px -20px rgb(11 20 48 / .3)}
  .testata.scorsa .menu__voci{top:100%}
  .menu.aperto .menu__voci{display:flex}
  .menu__voci li+li{border-top:1px solid var(--linea)}
  .menu__voci a{display:flex;min-height:3.5rem;font-size:1.25rem}
  .menu__voci a::after{display:none}
  .testata.menu-aperto{background:var(--bianco)}
  .attivita h3{font-size:clamp(2rem,.8rem + 2.6vw,2.75rem)}
  .attivita__testa{grid-template-columns:1fr;gap:1rem}
  .articoli__griglia{grid-template-columns:1fr;gap:1.5rem}
  .contatti__pannello{grid-template-columns:1fr;gap:2rem}
  .confronto__pannello{grid-template-columns:1fr;gap:1.5rem}
  .confronto__testo{display:grid;grid-template-columns:auto 1fr;gap:0 2.5rem;align-items:end}
  .confronto__testo p{max-width:18em}
  .confronto__nota{grid-column:2;margin-top:.5rem}
  .pubblicazioni__pannello{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pubblicazioni__nota{position:absolute;right:1.25rem;bottom:1.5rem;margin:0;font-size:clamp(1.75rem,1rem + 1.6vw,2.25rem)}
  .profilo__griglia{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .hero__testo{width:min(100%,32rem)}
  .hero__ritratto{width:min(692px,52vw)}
}

/* ==========================================================================
   TELEFONO E TABLET STRETTO (dal design da telefono)
   ========================================================================== */
@media (max-width:899px){
  :root{--altezza-testata:4.5rem}
  .marchio{--logo:min(17rem,(100vw - 2*var(--margine) - 7.5rem) / .83)}
  .marchio--piede{--logo:min(22rem,90vw)}
  .testata__riga{gap:.75rem}
  .a11y__etichetta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .a11y__bottone{padding:0;justify-content:center;width:3rem;height:3rem}


  /* hero: testo, pulsante, poi il ritratto sulla diagonale */
  .hero{min-height:0}
  .hero__fondo--computer{display:none}
  .hero__fondo--telefono{display:block}
  .hero__griglia{min-height:0;display:flex;flex-direction:column}
  .hero__testo{position:static;width:100%;padding-top:1.75rem;padding-bottom:0}
  .hero__titolo{font-size:clamp(2.125rem,10.9vw,3.5rem);line-height:1.02}
  .hero__sotto{margin-top:1.25rem}
  .hero__azioni{margin-top:1.6rem}
  .hero__ritratto{position:relative;right:auto;align-self:flex-end;width:min(70%,34rem);margin-top:.5rem;margin-right:calc(-1 * var(--margine))}
  .hero__nota{position:absolute;margin:0;left:.5rem;transform:rotate(-9deg);bottom:auto;top:calc(100% - min(70%,34rem) * 1.03 + 2rem);width:clamp(7rem,28vw,11rem)}

  /* attività: tre blocchi uno sotto l'altro, centrati */
  .attivita__griglia{grid-template-columns:1fr;max-width:26rem}
  .attivita__voce,.attivita__voce:first-child{padding:1.75rem 0;text-align:center}
  .attivita__voce+.attivita__voce{border-left:0}
  .attivita__voce .ico--grande{margin-inline:auto}
  .attivita__voce p{margin-inline:auto}
  .attivita__voce::after{margin:1.6rem auto 0}

  /* profilo e docenze in sequenza */
  .profilo__griglia{grid-template-columns:1fr;gap:0}
  .profilo::before{left:auto;right:-30rem;top:auto;bottom:-14rem;width:40rem;height:40rem}
  .profilo__testa{padding-bottom:0;display:contents}
  .profilo__testa .occhiello,.profilo__testa .titolo-sezione{grid-row:auto}
  .profilo__intro{padding-top:1.25rem;max-width:none}
  .profilo__nota{position:static;order:5;margin:1rem 0 0 .25rem;width:clamp(10rem,46vw,14rem)}
  .profilo__corpo{display:contents}
  .profilo__griglia{display:flex;flex-direction:column}
  .incarichi{margin-top:1.25rem}
  .incarichi li{gap:1.25rem;padding:1.1rem 0}
  .incarichi .ico--riga{width:3rem;height:3rem}

  .docenze__griglia{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .docenze__illustrazione{order:2;width:min(15rem,62vw);margin:1.75rem auto .5rem}
  .docenze__testo{display:contents}
  .docenze__testo .occhiello{order:0}
  .docenze__testo .titolo-sezione{order:0}
  .docenze__sotto{order:1}
  .righe{order:3;margin-top:.75rem}
  .riga-statica,.riga-link{min-height:4.25rem;padding:.6rem .25rem;gap:1.1rem;font-size:1.0625rem}
  .docenze__nota-testo,.docenze__testo .link-freccia{order:4}
  .righe--articoli .ico--riga{display:none}
  .righe--articoli .riga-statica,.righe--articoli .riga-link{min-height:4rem;padding-block:.8rem}
  .righe .ico--riga{width:2.5rem;height:2.5rem}

  /* il valore del confronto: testo, poi le foto in una riga che scorre col dito */
  .confronto__pannello{grid-template-columns:1fr;padding:1.75rem 0 1.5rem 1.25rem}
  .confronto__testo{padding-right:1.25rem;display:block}
  .confronto__elenco{margin-right:1.25rem}
  .eventi{columns:1}
  .confronto__nota{margin:1rem 0 0 auto;width:clamp(9rem,42vw,12rem)}
  .galleria__traccia{padding-right:1.25rem;scroll-padding-left:0}
  .galleria__voce,.galleria__voce--larga,.galleria__traccia:has(> li:nth-child(3)) .galleria__voce{flex:0 0 82%}
  .galleria figure img{height:auto;aspect-ratio:4/3}

  /* pubblicazioni: libro, titolo, testo, pulsante */
  .pubblicazioni__pannello{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:1.5rem 1.25rem 1.75rem}
  .pubblicazioni__testo{display:contents}
  .pubblicazioni__testo .titolo-sezione{order:-1;margin-bottom:.5rem}
  .libro{order:0;margin-bottom:.5rem}
  .libro__img{width:min(112%,26rem);margin:-10% -6% -9%}
  .pubblicazioni__testo>*{order:1}
  .pubblicazioni__nota{position:static;order:2;align-self:flex-end;margin:.25rem .5rem 0 0;font-size:clamp(1.625rem,7.4vw,2.125rem);transform:rotate(-14deg)}
  .pubblicazioni__nota::after{margin-top:.2rem}
  .pubblicazioni .bottone{min-width:0;align-self:flex-start}

  /* spazi: griglia 2x2 con separatori, senza linea */
  .spazi__elenco{grid-template-columns:1fr 1fr}
  .spazi__elenco li{padding:.9rem .5rem;font-size:1.125rem}
  .spazi{padding-top:1.5rem;padding-bottom:1.25rem}
  .spazi__elenco{margin-top:1.25rem}
  .spazi__elenco li+li::before,.spazi__elenco li+li::after{display:none}
  .spazi__elenco li:nth-child(odd){border-right:1px solid var(--linea)}
  .spazi__elenco li:nth-child(n+3){border-top:1px solid var(--linea)}
  .ico--spazi{width:3.75rem;height:3.75rem}

  /* contatti */
  .contatti__pannello{padding:1.75rem 1.25rem 1.5rem}
  .modulo{padding:1.25rem}
  .contatti__nota{width:clamp(10rem,48vw,13rem)}
  .contatti__freccia{position:relative;left:auto;bottom:auto;display:block;width:86%;margin:.25rem 0 0 auto}

  /* piè di pagina */
  .piede__riga{flex-wrap:wrap;gap:.25rem 1.5rem;padding-block:1.25rem .5rem}
  .piede__fondo{padding-bottom:1rem;gap:0 1rem}
  .piede__fondo p{min-height:0}
  .piede__menu{margin-left:0;width:100%}
  .piede__menu ul{justify-content:space-between}
  .piede__contatti{justify-content:center;border-top:1px solid var(--linea);padding-top:.5rem}
  .piede__contatti .piede__legale{margin-left:0;width:100%;justify-content:center}
  .piede__fondo{justify-content:center;text-align:center}
  .cookie{justify-content:space-between}
}

@media (max-width:899px) and (min-width:600px){
  .attivita__griglia{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
  .attivita__voce,.attivita__voce:first-child{padding:1rem .75rem}
  .attivita h3{font-size:clamp(1.75rem,.6rem + 3vw,2.25rem)}
  .hero__testo{max-width:36rem}
  .hero__nota{position:relative;top:auto;bottom:auto;left:auto;margin:1.75rem 0 0 .25rem;width:clamp(8rem,17vw,9.5rem)}
  .hero__ritratto{margin-top:-7rem}
  .galleria__voce,.galleria__voce--larga{flex:1 1 0}
  .galleria__traccia:has(> li:nth-child(3)) .galleria__voce{flex:0 0 46%}
}

@media (max-width:599px){
  /* il ritratto entra dal bordo destro, grande come nel design; il viso resta intero */
  .hero__ritratto{align-self:flex-start;width:min(150vw,36rem);margin-left:calc(-1 * var(--margine));margin-right:0}
  .hero__nota{top:calc(100% - min(150vw,36rem) * 1.03 + .5rem);width:min(6rem,26vw)}
}

@media (max-width:400px){
  .piede__menu ul{justify-content:center;gap:0 1rem}
}

/* testata non fissa quando lo schermo è basso (zoom forte, telefono in orizzontale) */
@media (max-height:500px){
  .testata{position:absolute}
}

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