/* ============================================================
   fisioleone.it — stile della home
   Sistema visivo: DESIGN-BRIEF.md · geometrie: riferimento-visivo\
   ============================================================ */

/* ---------- Font, ospitati in locale (niente CDN Google) ---------- */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("font/inter.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("font/newsreader.woff2") format("woff2");
}

/* ---------- Colori del sistema — nessun altro colore entra ---------- */
:root{
  --base:#FFFFFF;
  --antracite:#3C4147;
  --grigio:#6B7178;
  --blu:#0F6BA8;
  --verde:#25D366; /* SOLO il cerchio dietro il glifo della CTA: niente testo, fondi o bordi verdi */
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--antracite);
     font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.7}
button{font:inherit}
img{max-width:100%}
/* la sola barra blu e' ferma in alto: 48 di barra + 16 di aria
   (misurata nel browser il 15/09 dopo l'ingrandimento di «Menu sito») */
[id]{scroll-margin-top:64px}

/* gabbia unica da 1440 per tutte le sezioni; il respiro delle sezioni e'
   fluido, con clamp: niente soglie per il padding */
.wrapc{max-width:1440px;margin:0 auto}
.sez{padding:clamp(44px,5vw,84px) clamp(20px,4vw,48px)}

.eb{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:var(--blu);margin:0 0 14px}
h1{font-family:Newsreader,serif;font-weight:500;font-size:52px;line-height:1.10;
   letter-spacing:-.02em;margin:0 0 18px;color:var(--antracite)}
/* +2px su tutta la scala dal 25/09 (M2): era clamp(26px,2.6vw,38px) */
h2{font-family:Newsreader,serif;font-weight:500;font-size:clamp(28px,calc(2.6vw + 2px),40px);line-height:1.14;
   letter-spacing:-.015em;color:var(--blu);margin:0 0 20px}
h3{font-family:Newsreader,serif;font-weight:600;font-size:23px;line-height:1.28;
   color:var(--antracite);margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:var(--grigio);margin:0 0 18px}
p.forte{color:var(--antracite)}

/* ---------- La banda col nome della sezione (M3, 25/09) ----------
   E' la barra «Menu sito» ripetuta in testa alle sezioni: fondo blu,
   scritta bianca col corpo e il peso di .apri (20px 600, 19 sotto i 900),
   alta 48 (44), centrata, larga quanto lo schermo. Non e' sticky: scorre e
   passa sotto la barra del menu (z-index 30). Sta DOPO il respiro della
   sezione, e sotto lascia 14px (lo stacco occhiello-titolo) al contenuto.
   Dove e' l'H2 della sezione non ne prende mai la misura.
   Tutta larghezza senza toccare il layout: l'ombra piena e il clip-path
   allargato dipingono il blu fino ai bordi dello schermo, ma non creano
   scorrimento orizzontale (l'ombra non e' overflow) — funziona anche
   dentro lo studio, che ha una gabbia sua */
.banda{display:flex;align-items:center;justify-content:center;min-height:48px;
       margin:0 0 14px;padding:0 16px;background:var(--blu);color:#fff;
       box-shadow:0 0 0 100vmax var(--blu);clip-path:inset(0 -100vmax);
       font-family:Inter,system-ui,sans-serif;font-size:20px;font-weight:600;
       line-height:1.2;letter-spacing:0;text-align:center}

/* ---------- La forma — il taglio, fisso in pixel ---------- */
.shape{border-radius:0 8px 34px 8px;
  clip-path:polygon(70px 0,100% 0,100% 100%,0 100%,0 20px,.6px 17.3px,2.7px 15.1px,64px 1.9px,66.9px .8px)}
/* lo strato interno usa la STESSA sagoma dell'esterno: essendo spostato di 2px
   dal padding, i due tagli restano paralleli e la linea diagonale del bordo
   è piena e uniforme fino in fondo (col poligono ridotto si assottigliava) */
.shape-in{border-radius:0 6px 31px 6px;
  clip-path:polygon(70px 0,100% 0,100% 100%,0 100%,0 20px,.6px 17.3px,2.7px 15.1px,64px 1.9px,66.9px .8px)}
.shape-el{border-radius:0 10px 56px 10px;
  clip-path:polygon(92px 0,100% 0,100% 100%,0 100%,0 26px,.8px 22.5px,3.5px 19.6px,84.5px 2.4px,87.5px 1px)}

/* ---------- La CTA — non piu' la pillola: Paolo l'ha vista e ha chiesto lo
   spigolo arrotondato della foto che ha rimandato lo stesso giorno (foto 3 e
   4 del suo PDF — S5 di STATO.md, DESIGN-BRIEF §6) ----------
   Fondo base, bordo e testo blu, a sinistra il cerchio verde col glifo bianco.
   L'<a> NON porta la classe .shape: il suo clip-path vincerebbe sul
   border-radius e il bottone resterebbe tagliato in diagonale.
   Il cerchio e' l'<svg> stesso, nessun contenitore in piu': un .btn senza
   <svg> e' un bottone di solo testo. Il verde non esce dal cerchio. */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--base);color:var(--blu);
     border:2px solid var(--blu);border-radius:14px;text-decoration:none;
     font-weight:600;font-size:15px;line-height:1;padding:8px 26px 8px 8px;
     transition:background .15s,color .15s,box-shadow .15s}
.btn svg{width:34px;height:34px;flex:0 0 34px;padding:8px;border-radius:50%;
         background:var(--verde);fill:#fff}
/* sotto il mouse il bordo raddoppia con un'ombra interna, senza spostare il
   layout; premuto si riempie di blu; da tastiera un anello blu a 3px */
.btn:hover{background:rgba(15,107,168,.08);box-shadow:inset 0 0 0 1px var(--blu)}
.btn:active{background:var(--blu);color:#fff;box-shadow:none}
.btn:focus-visible{outline:2px solid var(--blu);outline-offset:3px}

/* ---------- Foto delle sezioni. Dove la foto vera non c'è ancora
     resta il gradiente segnaposto: per sostituirlo, al posto del
     gradiente mettere background-image:url("immagini/NOMEFILE.jpg");
     background-size:cover;background-position:center ---------- */
.foto{position:relative;display:flex;align-items:flex-end;padding:16px 18px;overflow:hidden}
.foto span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
           color:rgba(255,255,255,.92);position:relative;z-index:2}
/* le foto di Paolo in aula e delle problematiche sono dentro gli
   slideshow dal 25/09 (M1): <img>, non piu' background per classe */

/* ============================================================
   NAVBAR — due righe: il lockup sopra, la barra del menu sotto
   ============================================================ */
/* riga 1: il lockup, centrato. Non e' sticky: scorre via.
   Il disegno e' un'immagine (ritaglio del vecchio JPG, 54x165 nativi),
   le scritte sono testo: il corpo lo decide il CSS, non la larghezza
   dello schermo — e' il motivo per cui il JPG intero e' uscito (D13).
   Il disegno e' alto quanto il blocco delle due scritte. */
.nav-logo{background:var(--base);display:flex;justify-content:center;padding:12px 16px}
/* non e' un collegamento: niente stati, niente fuoco */
.lockup{display:flex;align-items:center;gap:16px;color:var(--antracite)}
.lockup .disegno{height:78px;width:auto;display:block}
/* le due righe in maiuscolo spaziato con il filetto rosso in mezzo: il
   rosso #AD4D4C e' quello del logo e vive SOLO qui e nell'immagine
   (DESIGN-BRIEF §2). Il margine negativo a destra toglie lo spazio che
   letter-spacing lascia dopo l'ultima lettera, cosi' il filetto — che
   si stira sulla riga piu' larga — finisce sull'ultima lettera e non oltre */
.lockup .nome{display:flex;flex-direction:column;align-items:center;gap:7px;
              text-transform:uppercase;line-height:1;white-space:nowrap}
.lockup .pl{font-family:Newsreader,serif;font-weight:500;font-size:40px;
            letter-spacing:.42em;margin-right:-.42em}
.lockup .filo{align-self:stretch;height:1px;background:#AD4D4C}
/* .ruolo e' un <h1>: font-family, line-height e margin-block spengono la
   regola generale h1 senza toccare il margin-right negativo qui sopra */
.lockup .ruolo{font-weight:500;font-size:22px;letter-spacing:.24em;margin-right:-.24em;
               color:var(--grigio);font-family:inherit;line-height:1;margin-block:0}

/* riga 2: la barra del menu, l'unica ferma in alto allo scorrimento */
.nav-menu{position:sticky;top:0;z-index:30;background:var(--blu)}
/* il panino e la scritta si centrano insieme, come un blocco solo.
   I 16px di padding del bottone servono al velo del passaggio, che
   cosi' deborda dalle lettere invece di tagliarle.
   Corpo 20px (da 14) su richiesta di Paolo, 15/09: la barra e' alta 48 */
.nav-menu .in{display:flex;justify-content:center}
.apri{display:flex;align-items:center;gap:14px;height:48px;padding:0 18px;
      background:transparent;border:0;cursor:pointer;color:#fff;
      font-size:20px;font-weight:600;transition:background .15s}
/* bianco sul blu medicale: 5,69:1, sopra AA. Al passaggio e al fuoco da
   tastiera non entra nessun colore nuovo, la fascia SCURISCE con un velo
   di nero — come il bottone primario del brief, §6.
   Schiarire era la scelta naturale ed e' sbagliata: un velo di bianco al
   12% porta il fondo a #2C7DB2 e il testo bianco a 4,49:1, sotto la
   soglia AA per un pelo. Scurendo si sale a 6,88:1. */
.apri:hover,.apri:focus-visible{background:rgba(0,0,0,.12);outline:none}
.panino{display:flex;flex-direction:column;gap:6px;width:28px;flex:0 0 28px}
.panino i{display:block;height:2px;width:100%;background:#fff}

/* ---------- Il pannello laterale ---------- */
.velo{position:fixed;inset:0;background:rgba(24,27,31,.4);opacity:0;pointer-events:none;
      transition:opacity .25s;z-index:40}
.velo.on{opacity:1;pointer-events:auto}
.lat{position:fixed;top:0;bottom:0;left:0;width:372px;max-width:88vw;z-index:41;
     transform:translateX(-102%);transition:transform .3s;
     background:rgba(255,255,255,.94);border-right:1px solid rgba(60,65,71,.14);
     -webkit-backdrop-filter:saturate(140%) blur(18px);backdrop-filter:saturate(140%) blur(18px);
     padding:24px 30px 40px;overflow-y:auto}
.lat.on{transform:translateX(0)}
.lat .testa{display:flex;justify-content:flex-end;margin-bottom:22px}
.lat .chiudi{background:transparent;border:0;font-size:20px;cursor:pointer;padding:0;line-height:1;color:var(--grigio)}
.lat h4{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px;
        position:relative;padding-left:16px;color:var(--grigio)}
.lat h4::before{content:"";position:absolute;left:0;top:4px;bottom:2px;width:1px;background:rgba(15,107,168,.9)}
.lat ul{list-style:none;margin:16px 0 0;padding:0}
.lat li{border-bottom:1px solid rgba(60,65,71,.12)}
/* voci a 21px (da 17) su richiesta di Paolo, 15/09. Nessuna sottovoce:
   il sotto-menu delle problematiche e' uscito insieme al primo tocco che
   lo apriva — e con lui il difetto «clicco una voce e se ne apre un'altra» */
.lat a.riga{display:flex;align-items:center;gap:8px;text-decoration:none;
            font-size:21px;padding:15px 0;font-family:Newsreader,serif;font-weight:500;color:var(--antracite)}
.lat a.riga:hover,.lat a.riga:focus-visible{color:var(--blu);outline:none}
.lat .wa-lat{display:flex;align-items:center;gap:10px;margin-top:22px;text-decoration:none;font-size:21px;
             font-family:Newsreader,serif;font-weight:500;color:var(--antracite);padding:15px 0}
.lat .wa-lat:hover,.lat .wa-lat:focus-visible{color:var(--blu);outline:none}
.lat .wa-lat svg{width:20px;height:20px;fill:currentColor}

/* ============================================================
   1 · HERO
   ============================================================ */
/* Colonna unica: occhiello, poi il blocco testo+ritratto e la CTA sotto,
   nella stessa colonna. Niente H1 dal 15/09 (l'H1 della pagina e' nello
   studio): l'occhiello e' il primo elemento e si allinea al bordo sinistro
   del testo, non piu' al centro di un titolo che non c'e'.
   Il ritratto FLOTTA a destra del paragrafo.
   Nessuna altezza minima dal 15/09: il vecchio 100vh meno 306 era tarato sul
   banner delle recensioni che seguiva e che ora sta in fondo alla pagina
   (R8). La hero e' alta quanto il suo contenuto, e «Chi sono» comincia
   sopra la piega. */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
      padding:clamp(32px,3.6vw,52px) clamp(20px,4vw,48px) clamp(28px,3vw,44px)}
/* lo sfondo a tutta larghezza: oggi bianco. Quando arriva la foto dello
   studio si aggiunge qui background-image:url("immagini/NOMEFILE.jpg") */
.hero .sfondo{position:absolute;inset:0;background:var(--base) center/cover no-repeat}
.hero .dentro{position:relative;width:100%;max-width:1440px;margin:0 auto;
              display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px)}
/* stessa gabbia del corpo, e i 22px a sinistra lo mettono in asse col
   testo oltre il filetto */
.hero .eb{font-size:12px;letter-spacing:.16em;white-space:nowrap;
          width:100%;max-width:min(960px,86%);margin:0 auto;padding-left:22px}
/* flow-root contiene il flottante: il blocco e' alto quanto il piu' alto
   fra ritratto e paragrafo, e la CTA che segue non ci finisce sotto */
.hero .corpo{width:100%;max-width:min(960px,86%);margin:0 auto;display:flow-root}
/* +20% il 26/09 (Simone): era clamp(140px,15vw,220px), tarato perche'
   fosse alto quanto paragrafo piu' CTA; ora sporge di piu' sotto la CTA */
.hero .ritratto{float:right;width:clamp(168px,18vw,264px);aspect-ratio:1/1;
                margin:0 0 12px clamp(18px,3vw,48px);
                background:url("immagini/ritratto-paolo.jpg") center/cover no-repeat}
/* il paragrafo e' in Newsreader, col filetto blu a sinistra: e' la voce di
   Paolo, non un sottotitolo di sistema. hyphens:auto lavora grazie al lang */
.hero .sub{font-family:Newsreader,serif;font-size:clamp(18px,1.5vw,23px);line-height:1.55;
           color:var(--antracite);margin:0;padding-left:22px;
           border-left:1px solid rgba(15,107,168,.55);
           -webkit-hyphens:auto;hyphens:auto;text-wrap:pretty}
/* i 22 a sinistra allineano la CTA al testo, oltre il filetto */
.hero .cta-riga{display:flex;padding:clamp(24px,3vw,40px) 0 0 22px}
/* ============================================================
   6 · COSA DICONO I PAZIENTI — recensioni Google, banner a tutta larghezza
   ============================================================ */
/* Dal 15/09 sta fra contatti e corsi (D5): i due filetti la chiudono sopra e
   sotto, e il respiro glielo danno i padding delle sezioni accanto — niente
   margine suo e niente z-index, che serviva solo ad appoggiarla sopra lo
   sfondo della hero (R3).
   L'unico colore fuori dal sistema e' il giallo delle stelle, #F4B400:
   e' il colore di Google, non nostro, e non esce da questa sezione.
   Dal 25/09 (M3) comincia col respiro delle sezioni e la banda blu; il
   riquadro del voto (4,8, 37 recensioni) e' uscito (M8) e il nastro
   scorre su tutta la larghezza */
.recensioni{background:var(--base);padding-top:clamp(44px,5vw,84px);
            border-top:1px solid rgba(60,65,71,.16);border-bottom:1px solid rgba(60,65,71,.16)}
.rev{display:flex;align-items:stretch;overflow:hidden}
/* il nastro: la finestra taglia, il binario e' largo quanto tutte le card e
   scorre di meta' — cioe' di una serie intera — e ricomincia. Le card hanno
   il margine a SINISTRA, cosi' le due serie sono lunghe uguali al pixel.
   Dal 26/09 non e' piu' un'animazione CSS: lo muove script.js spostando lo
   scorrimento della .vista, a 47px al secondo (Simone: «bloccare solo se
   tengo premuto e scorrere su mobile; su pc non si possono bloccare o
   scorrere»). Sul PC la .vista taglia e basta: niente pausa al passaggio
   del mouse, niente scorrimento a mano. Sui dispositivi a dito la .vista
   si puo' trascinare, con la barra nascosta: il taglio del nastro resta
   quello. Vale per le recensioni e per le foto delle problematiche.
   Il nastro scorre sempre, anche con «riduci animazioni» acceso (risparmio
   energetico su Android), come gli slideshow (Simone, 25/09/2026) */
.vista{flex:1 1 auto;padding:10px 0;overflow:hidden}
.nastro{display:flex;align-items:stretch;width:max-content}
@media (hover:none) and (pointer:coarse){
  .vista{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .vista::-webkit-scrollbar{display:none}
}
/* card da 380 (era 340): la recensione piu' lunga sta su meno righe e detta
   un'altezza minore a tutte — le card restano alte uguali (stretch) */
.card{display:flex;flex-direction:column;gap:7px;width:380px;flex:0 0 380px;margin-left:12px;
      padding:11px 18px 12px;background:#fff;border:1px solid rgba(60,65,71,.16);border-radius:14px}
.card .chi{display:flex;align-items:center;gap:10px}
.card .ini{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--blu);color:#fff;
           font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.card .nome{display:flex;flex-direction:column;line-height:1.25;font-size:12px;color:var(--grigio)}
.card .nome b{font-size:13.5px;font-weight:600;color:var(--antracite)}
.card .st{font-size:13px;color:#F4B400;letter-spacing:1px;line-height:1}
.card .st .off{color:rgba(60,65,71,.25)}
.card p{font-size:14px;color:var(--antracite);line-height:1.45;margin:0;text-wrap:pretty}

/* ============================================================
   2 · CHI SONO
   ============================================================ */
/* la testa: H2 e paragrafo centrati, niente foto. Il tetto di 74 caratteri
   (DESIGN-BRIEF §4) sta sul solo paragrafo: l'H2 resta su una riga. */
/* l'occhiello «Chi sono» e' uscito il 25/09: al suo posto la banda (M3) */
.esperienza .testa{margin:0 auto clamp(26px,3vw,40px)}
.esperienza .col-testo{text-align:center}
.esperienza .col-testo h2{margin-bottom:16px;text-wrap:pretty}
.esperienza .col-testo p.forte{max-width:74ch;margin:0 auto;text-wrap:pretty}
/* sempre tre colonne; due su telefono, in fondo al file */
.griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* LA CARD E' A DUE STRATI, e la logica non si tocca.
   Un border CSS e un clip-path non convivono: il taglio cancella il bordo
   sulla diagonale (DESIGN-BRIEF §6). Lo strato esterno .cella porta il
   colore del bordo, lo strato interno .dentro il bianco, e i 2px di padding
   sono lo spessore. L'esterno non ha un colore piatto ma una sfumatura:
   la stessa linea e' blu pieno sopra e lungo il taglio, sfuma sui fianchi e
   torna piena nella spalla in basso a destra. Una linea sola a intensita'
   variabile, non piu' linee sovrapposte.
   La forma interna NON e' l'esterna rimpicciolita in proporzione: e'
   calcolata scostando la retta di 2px perpendicolari. */
.cella{display:grid;padding:2px;
  background:radial-gradient(circle at 100% 100%, var(--blu) 0 44px,
                             rgba(15,107,168,.12) 84px),
             linear-gradient(to bottom, var(--blu) 0 34px,
                             rgba(15,107,168,.12) 104px)}
.cella > .dentro{background:var(--base);padding:30px 30px 28px 34px;
  border-radius:0 8px 54px 8px;
  clip-path:polygon(90.3px 0,100% 0,100% 100%,0 100%,0 25.5px,
                    .8px 22px,3.5px 19.1px,82.8px 2.4px,85.8px 1px)}
.cella h3{font-family:Newsreader,serif;font-weight:600;font-size:18.5px;
          color:var(--antracite);margin:0 0 6px;line-height:1.25}
.cella p{font-size:14.5px;line-height:1.6;color:var(--grigio);margin:0}
/* la coda: testo e foto affiancati, si impilano da soli quando non ci
   stanno (flex-wrap, nessuna soglia). Il paragrafo e' in Newsreader col
   filetto blu, come quello della hero: e' Paolo che parla. */
.coda{display:flex;flex-wrap:wrap;gap:clamp(20px,2.5vw,44px);align-items:center;
      margin-top:clamp(28px,3vw,48px);padding-top:clamp(24px,3vw,40px);
      border-top:1px solid rgba(60,65,71,.14)}
.coda .testo{flex:1 1 min(100%,340px)}
.coda h3{font-weight:500;font-size:clamp(24px,2.2vw,32px);line-height:1.18;
         letter-spacing:-.012em;margin:0 0 16px}
.coda p{font-family:Newsreader,serif;font-size:clamp(17px,1.3vw,19.5px);line-height:1.6;
        color:var(--antracite);margin:0;padding-left:22px;
        border-left:1px solid rgba(15,107,168,.55);max-width:56ch;text-wrap:pretty}
/* lo slideshow della coda (M1, 25/09) prende il posto della foto fissa e la
   sua proporzione, 16:10, cosi' il blocco non cambia forma (sotto si
   aggiunge solo la barra con frecce e numero). Resta a destra: l'order
   delle Docenze qui non vale */
.coda .slideshow{order:0;flex:1 1 min(100%,300px)}
.coda .stage{aspect-ratio:16/10;min-height:0;max-height:none}

/* ============================================================
   3 · DI CHE PROBLEMATICHE MI OCCUPO
   ============================================================ */
/* Titolo, elenco, due foto (LAVORO-GROSSO.md D6, D14 — 15/09/2026).
   L'elenco sta nella gabbia del testo (74ch, DESIGN-BRIEF §4), a sinistra,
   in colonna unica: con otto voci di lunghezza molto diversa due colonne
   lasciano buchi. Pallino blu come l'elenco dei corsi; il secondo livello
   e' rientrato, col pallino piu' piccolo e il testo grigio. */
/* il titolo della sezione e' la banda (M3, 25/09): la regola del vecchio
   H2 centrato e' uscita con lui */
.problematiche .elenco{max-width:74ch;margin:0 auto;padding:0;list-style:none;
                       color:var(--antracite);line-height:1.7;text-wrap:pretty}
.problematiche .elenco li{position:relative;padding-left:22px}
.problematiche .elenco>li+li{margin-top:6px}
.problematiche .elenco li::before{content:"";position:absolute;left:0;top:.68em;
                                  width:5px;height:5px;border-radius:50%;
                                  background:rgba(15,107,168,.55)}
.problematiche .elenco ul{list-style:none;margin:2px 0 0;padding:0;color:var(--grigio)}
.problematiche .elenco ul li::before{width:4px;height:4px;top:.72em;left:1px}
/* le voci sono H3 e H4 ma vestono come il testo corrente: niente scala dei
   titoli qui (DESIGN-BRIEF §13, deroga D5) */
.problematiche .elenco h3,.problematiche .elenco h4{font:inherit;color:inherit;margin:0}
/* il nastro di foto sotto l'elenco (M9, 26/09): il nastro delle recensioni
   (.vista/.nastro qui sopra: stessa velocita', 47px al secondo, stesso
   comportamento al dito e sul PC) con dentro dodici foto invece delle
   card. Tutte alte uguali — 280px, vicino ai 289 delle due foto di prima;
   200 sotto i 720 — e larghe quanto chiede la loro proporzione; 12px a
   SINISTRA di ognuna, come le card, cosi' le due serie sono lunghe uguali
   e il giro non salta. Ogni foto tiene il taglio di sistema (.shape-el).
   Uguale su PC e telefono. A tutta larghezza come le recensioni (Simone, 26/09): sta
   fuori dalla gabbia e i margini negativi annullano il padding laterale
   della sezione (.sez) — 100vw porterebbe dentro la barra di scorrimento
   e uno scorrimento orizzontale */
.nastro-foto{margin:clamp(28px,3vw,44px) calc(-1 * clamp(20px,4vw,48px)) 0}
.nastro-foto img{display:block;height:280px;width:auto;flex:0 0 auto;margin-left:12px}
@media (max-width:720px){
  .nastro-foto img{height:200px}
}

/* ============================================================
   4 · STUDIO
   ============================================================ */
/* Non piu' al vivo: la sezione sta nella gabbia (1536 col padding = 1440 di
   contenuto), testo a sinistra e mappa a destra. Le due colonne hanno base
   360: fino ai 901 restano affiancate, sotto i 900 vanno a colonna unica
   (nel blocco responsive). Con base 420 si spezzavano gia' a ~990 mentre
   la cornice teneva la posizione da desktop e sporgeva dal bordo (15/09). */
.studio{max-width:1536px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
        gap:clamp(28px,3vw,56px)}
.studio .sx{flex:1 1 min(100%,360px);display:flex;flex-direction:column;align-items:flex-start;
            gap:clamp(22px,2.4vw,32px);padding-right:clamp(0px,2vw,24px)}
/* l'occhiello «Solo su appuntamento» a 8px dall'H2, su tutte le larghezze
   (Simone, 26/09 sera): il gap della colonna si sommava al margine
   dell'occhiello (46px a 1440, 36 sul telefono); il margine negativo
   riporta la somma a 8 */
.studio .sx .eb{margin-bottom:calc(8px - clamp(22px,2.4vw,32px))}
/* il titolo dello studio: un H2 come gli altri titoli di sezione (l'H1 della
   pagina e' la qualifica nel lockup). Questa regola sta dopo la h2 generale
   e vince su tutto, margine compreso */
.studio h2{margin:0;font-family:Newsreader,serif;font-weight:500;color:var(--blu);
           font-size:clamp(28px,calc(2.5vw + 2px),38px);line-height:1.16;letter-spacing:-.015em;text-wrap:pretty}
/* la banda (M3) e' un figlio della riga flex dello studio: prende tutta la
   riga, e il margine negativo riporta a 14px lo stacco che il gap della
   sezione (28-56) allargherebbe */
.studio .banda{flex:0 0 100%;margin-bottom:calc(14px - clamp(28px,3vw,56px))}
/* i dati dello studio dal 26/09 (M8): quelli della sezione Contatti, che
   e' uscita — due righe da due (indirizzo · telefono, email · Facebook),
   griglia e gap dei Contatti, e la lineetta blu 32x2 sopra ogni dato.
   La voce resta a 15px normale antracite come la sotto-riga (M2), cosi'
   l'H2 resta l'unica cosa in evidenza. Due per riga anche sul telefono:
   minmax(0,1fr) perche' una voce lunga vada a capo invece di allargare la
   colonna (l'email ha un <wbr> prima della @) */
.studio .dati{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-self:stretch}
.studio .dati>div::before{content:"";display:block;width:32px;height:2px;
  background:var(--blu);margin:0 0 8px}
.studio .dati .k{font-size:15px;font-weight:400}
/* .dati: coppie valore (.k) / sotto-riga (.v). Nato nello studio, dal 15/09
   e' anche la sezione contatti (D15): un componente solo, senza prefisso */
.dati{display:flex;flex-direction:column;gap:16px}
.dati .k{font-size:17px;font-weight:600;color:var(--antracite);margin:0 0 3px}
/* i collegamenti dentro .k — telefono, WhatsApp (senza glifo dal 15/09:
   «Toglierei il logo whatsApp»), email, indirizzo che apre la scheda su
   Google Maps con la stessa query dell'incorporamento — hanno tutti la
   stessa faccia: antracite senza sottolineatura, blu al passaggio e al
   fuoco da tastiera */
.dati .k a{text-decoration:none;color:var(--antracite);transition:color .15s}
.dati .k a:hover,
.dati .k a:focus-visible{color:var(--blu);outline:none}
.dati .v{font-size:15px;color:var(--grigio);margin:0;line-height:1.5}
.studio .dx{flex:1.15 1 min(100%,360px);position:relative;padding-left:clamp(0px,4vw,56px)}
/* la mappa non prende il taglio: solo contorno sottile (incorporamento di terze parti) */
.mappa{position:relative;border:1px solid rgba(60,65,71,.22);aspect-ratio:720/520}
.mappa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* la foto in cornice si appoggia sull'angolo basso-sinistro della mappa e
   sconfina verso il testo. Il bianco e' la cornice, e porta il taglio di
   sistema; la foto dentro ha un taglio piu' piccolo (78 di taglio, 44 di
   spalla) parallelo a quello della cornice: stesso angolo, ridotto del
   padding — un bordo e il taglio non convivono sullo stesso elemento
   (DESIGN-BRIEF §6). */
.studio .cornice{position:absolute;left:-9%;bottom:7.7%;width:50%;min-width:170px;
                 background:var(--base);padding:clamp(8px,1vw,16px)}
/* dal 26/09 (M8) nella cornice c'e' uno slideshow (esterno, poi interno):
   il riquadro delle foto tiene il 4:3 e il taglio piccolo della foto di
   prima, e la cornice resta stretta attorno alla foto come prima. Le
   frecce NON stanno sotto la foto — dentro il bianco allungavano la
   cornice e la deformavano («brutto», Simone, 26/09) —: stanno SOPRA la
   foto, in basso a sinistra (l'angolo quasi dritto: a destra c'e' la
   spalla da 44), in due cerchi bianchi. Posizione e altezze delle
   Docenze qui non valgono */
.studio .cornice .slideshow{order:0;position:relative}
.studio .cornice .stage{aspect-ratio:4/3;min-height:0;max-height:none;border-radius:0 8px 44px 8px;
  clip-path:polygon(78px 0,100% 0,100% 100%,0 100%,0 22px,.7px 19px,3px 16.6px,71.5px 2px,74px .9px)}
.studio .cornice .barra{position:absolute;left:10px;bottom:10px;margin:0;gap:6px;justify-content:flex-start}
.studio .cornice .frec{background:rgba(255,255,255,.9);border-radius:50%;color:var(--antracite)}
.studio .cornice .frec:hover,.studio .cornice .frec:focus-visible{color:var(--blu)}

/* ============================================================
   6 · DOCENZE
   ============================================================ */
/* fondo bianco, niente occhiello: slideshow a sinistra e testo a destra,
   che si impilano da soli (flex-wrap). Su telefono il testo viene prima */
.docenze{background:var(--base)}
.docenze .wrapc{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4vw,64px)}
.docenze .testo{flex:1 1 min(100%,460px)}
/* l'H2 «Corsi disponibili» e' la banda dal 25/09 (M3): con lui esce la
   deroga D6 dell'H2 antracite */
/* l'elenco dei corsi e' l'unico testo della sezione (il sottotitolo e'
   uscito il 15/09): in asse con l'H2, pallino blu come l'elenco delle
   problematiche. «Qui» e' un collegamento dentro la frase: sottolineato,
   perche' si veda che si clicca */
.docenze .corsi{list-style:none;margin:0;padding:0;
                font-size:17px;line-height:1.72;color:var(--antracite);text-wrap:pretty}
.docenze .corsi li{position:relative;padding-left:22px}
.docenze .corsi li+li{margin-top:6px}
.docenze .corsi li::before{content:"";position:absolute;left:0;top:.68em;
                           width:5px;height:5px;border-radius:50%;
                           background:rgba(15,107,168,.55)}
.docenze .corsi a{color:var(--blu);font-weight:600;text-decoration:underline;
                  text-underline-offset:3px;text-decoration-thickness:1px}
.docenze .corsi a:hover{text-decoration-thickness:2px}
.docenze .corsi a:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
/* lo slideshow: il taglio sta sul contenitore (.shape-el nell'HTML), le 16
   foto si dissolvono dentro. .slideshow e' il figlio flex (order:-1 lo porta
   a sinistra del testo); .stage e' solo il riquadro tagliato che le contiene.
   .slideshow e' a sua volta flex in colonna: senza, .stage tornerebbe un
   blocco normale e, con aspect-ratio+max-height, l'auto-width si
   restringerebbe per restare in proporzione, lasciando un vuoto a destra
   invece di riempire la colonna come faceva da solo prima di questo cambio */
.slideshow{order:-1;flex:1.2 1 min(100%,480px);display:flex;flex-direction:column}
.stage{position:relative;aspect-ratio:4/3;
       min-height:240px;max-height:clamp(240px,34vw,460px);overflow:hidden}
.stage .f{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.stage .f.on{opacity:1}
.stage .f img{width:100%;height:100%;object-fit:cover;display:block}
/* contatore e frecce, sotto la foto: comando manuale che ferma per sempre
   la rotazione automatica (script.js) */
.barra{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:10px}
.conta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
       color:rgba(60,65,71,.55);font-variant-numeric:tabular-nums}
.frec{display:inline-flex;align-items:center;justify-content:center;
      width:28px;height:28px;padding:0;border:0;background:transparent;
      color:rgba(60,65,71,.45);cursor:pointer;transition:color .15s}
.frec:hover,.frec:focus-visible{color:var(--blu)}
.frec:focus-visible{outline:2px solid var(--blu);outline-offset:2px}

/* 5 · CONTATTI — la sezione e' uscita il 26/09 (M8): i suoi dati sono
   nello Studio, e con lei sono uscite le sue regole e il filetto
   verticale sfumato (.divisore) che usava solo lei */

/* ============================================================
   8 · APPROFONDIMENTI (M6, 25/09)
   ============================================================ */
/* La card e' QUELLA della vecchia pagina indice su WordPress (Simone,
   25/09 pomeriggio), copiata dal tema (approfondimenti.css) con le sue
   misure — PAGE-BRIEF-APPROFONDIMENTI §5.2-5.5: larga 1040, alta 130, foto
   da 240 che sfuma nel fondo per 32px, filetto blu 1,5px a due strati; al
   passaggio e al fuoco il filetto diventa blu pieno e 2,5px e la foto
   zooma. Tutta la card e' il collegamento all'articolo.
   Con lei entra nella home la forma interna dei box, .shape-el-in (e la
   -forte dello stato acceso): calcolata per scarto perpendicolare, NON
   ricavata rimpicciolendo .shape-el. Fino a oggi viveva solo nel tema. */
.shape-el-in{border-radius:0 8.5px 54.5px 8.5px;
  clip-path:polygon(90.7px 0,100% 0,100% 100%,0 100%,0 25.6px,
                    .8px 22.1px,3.5px 19.2px,83.2px 2.4px,86.2px 1px)}
.ap-lista{display:flex;flex-direction:column;gap:24px;align-items:center}
.ap-riga{display:block;width:1040px;max-width:100%;background:rgba(15,107,168,.62);padding:1.5px;
     text-decoration:none;color:inherit;transition:background .22s ease,padding .22s ease}
/* minmax(0,1fr) e non 1fr: con 1fr l'anteprima su una riga non si taglia
   con i puntini (nota del tema, misurata il 21/08) */
.ap-riga > .dentro{display:grid;grid-template-columns:240px minmax(0,1fr);background:var(--base);
     height:130px;overflow:hidden}
.ap-riga:hover,.ap-riga:focus-visible{background:var(--blu);padding:2.5px;outline:none}
.ap-riga:hover > .dentro,.ap-riga:focus-visible > .dentro{
  border-radius:0 7.5px 53.5px 7.5px;
  clip-path:polygon(89.8px 0,100% 0,100% 100%,0 100%,0 25.4px,
                    .8px 21.9px,3.5px 19px,82.3px 2.4px,85.3px 1px)}
.rfoto{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 32px),transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 32px),transparent 100%)}
/* senza foto resta il gradiente segnaposto del tema */
.rfoto i{display:block;width:100%;height:100%;
  background:linear-gradient(150deg,#B9AFA5 0%,#A79C92 46%,#8E857C 100%);
  transform:scale(1);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
/* la foto riempie la colonna, come nella pagina indice online (provate
   il 25/09 la foto intera e una via di mezzo: tornati a questa) */
.rfoto i.con-foto{background-size:cover;background-position:center}
.ap-riga:hover .rfoto i,.ap-riga:focus-visible .rfoto i{transform:scale(1.07)}
.rtesto{padding:15px 36px 15px 34px;display:flex;flex-direction:column;justify-content:center}
.rtesto .eb{margin:0 0 8px}
.rtitolo{font-family:Newsreader,serif;font-weight:600;font-size:23px;line-height:1.28;
     color:var(--antracite);margin:0 0 5px}
/* anteprima su DUE righe coi puntini, e niente data (Simone, 25/09): il
   tema la teneva su una riga, con la data sotto */
.ranteprima{font-size:15px;line-height:1.5;color:var(--grigio);margin:0;
     display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* oltre i 5 articoli (li scrive solo il plugin): la riga che apre gli
   altri, testo d'interfaccia grigio con la freccia dello slideshow girata
   in giu', che si gira in su da aperta */
.altri{width:1040px;max-width:100%;margin:24px auto 0}
.altri>summary{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0;
     cursor:pointer;list-style:none;font-size:15px;font-weight:600;color:var(--grigio);transition:color .15s}
.altri>summary::-webkit-details-marker{display:none}
.altri>summary:hover,.altri>summary:focus-visible{color:var(--blu)}
.altri>summary:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
.altri>summary svg{transition:transform .25s}
.altri[open]>summary svg{transform:rotate(180deg)}
.altri>.ap-lista{margin-top:16px}
@media (prefers-reduced-motion:reduce){
  .ap-riga,.rfoto i,.altri>summary svg{transition:none}
}
/* su telefono restano righe, non schede: la foto si stringe ma resta a
   sinistra con la sua sfumatura (misure del tema, §5.5 del suo brief) */
@media (max-width:900px){
  .ap-lista{gap:16px}
  .ap-riga > .dentro{grid-template-columns:140px minmax(0,1fr);height:116px}
  .rtesto{padding:12px 18px 12px 22px}
  .rtesto .eb{margin:0 0 5px}
  .rtitolo{font-size:17px;line-height:1.25;margin:0 0 4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ranteprima{font-size:13px}
}
@media (max-width:640px){
  .ap-riga > .dentro{grid-template-columns:112px minmax(0,1fr);height:104px}
  .rtesto{padding:10px 14px 10px 16px}
  .rtitolo{font-size:15.5px}
  /* senza la data, titolo e anteprima (due righe ciascuno) ci stanno anche
     qui: il tema la nascondeva per far posto alla data */
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--base);color:var(--antracite);border-top:1px solid rgba(60,65,71,.14);
      padding:clamp(32px,4vw,52px) clamp(20px,3vw,44px) 0}
.foot a{text-decoration:none;font-size:13.5px;color:var(--antracite)}
.foot a:hover{color:var(--blu)}
/* tre colonne flex che si impilano da sole: logo, mappa, contatti — prese
   per CLASSE (f-logo, f-mappa, f-contatti), non per posizione: i selettori
   nth-child di prima si rompevano in silenzio togliendo una colonna (R7).
   Su telefono diventa una griglia, in fondo */
.fgrid{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,38px);padding-bottom:34px;
       max-width:1440px;margin:0 auto}
.f-logo{flex:0 1 90px;display:flex;justify-content:center}
.fcol{flex:1 1 min(100%,220px)}
.f-mappa{flex:1.4 1 min(100%,260px)}
/* il logo del footer dal 25/09 (M7): logo-footer.jpg, 402x757 — piu' largo
   in proporzione del vecchio (1:1,9 contro 1:3). Prende tutta la colonna
   (90px) e l'altezza viene dalla proporzione, 169px: la colonna resta
   quella di prima e il footer non cambia impaginazione. Il vecchio era
   76 x clamp(150px,18vw,230px) */
.flogo{width:90px;aspect-ratio:402/757;align-self:flex-start;background-image:url("immagini/logo-footer.jpg");
       background-repeat:no-repeat;background-size:contain;background-position:center}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol ul li{border-top:1px solid rgba(60,65,71,.10)}
.fcol ul li:first-child{border-top:0}
.fcol ul li a{display:block;padding:9px 0}
.fcol ul.ico li a{display:flex;gap:11px;align-items:flex-start;line-height:1.5;padding:11px 0}
.fcol ul.ico svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;fill:var(--grigio)}
.gbp{font-size:11px;letter-spacing:.06em;color:var(--grigio);margin:0 0 8px}
.mappa-f{position:relative;height:148px;border:1px solid rgba(60,65,71,.22)}
.mappa-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.flegal{border-top:1px solid rgba(60,65,71,.12);padding:16px 0 20px;display:flex;gap:18px;
        align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--grigio);
        max-width:1440px;margin:0 auto}
.flegal .dx{margin-left:auto;display:flex;gap:16px;align-items:center}
.flegal a{font-size:12.5px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Il layout e' fluido — clamp, flex-wrap, min(100%, N) — e le sezioni si
   impilano da sole. Qui restano solo le cose che il fluido non sa fare:
   la barra del menu piu' sottile, e la soglia unica da telefono a 720. */
@media (max-width:900px){
  body{font-size:16.5px}
  h3{font-size:20px}
  /* navbar: il lockup scala — 28px e' il minimo per «PAOLO LEONE» su
     telefono (D13); il tracking si stringe perche' a 360px di schermo
     la riga deve starci intera */
  .nav-logo{padding:10px 14px}
  .lockup{gap:12px}
  .lockup .disegno{height:56px}
  .lockup .nome{gap:5px}
  .lockup .pl{font-size:28px;letter-spacing:.3em;margin-right:-.3em}
  .lockup .ruolo{font-size:15.5px;letter-spacing:.17em;margin-right:-.17em}
  /* la barra si assottiglia appena: 44 di altezza, 19px di corpo */
  .apri{height:44px;font-size:19px}
  /* la banda segue la barra: 44 di altezza, 19px di corpo */
  .banda{min-height:44px;font-size:19px}
  /* barra 44 + 16 di aria: le ancore si fermano appena sotto */
  [id]{scroll-margin-top:60px}

  /* studio a colonna unica: la foto in cornice si appoggia sull'angolo
     basso-destro della mappa, e la colonna si allunga sotto per farle posto */
  .studio .sx,.studio .dx{flex-basis:100%}
  .studio .dx{padding-left:0;padding-bottom:56px}
  .studio .cornice{left:auto;right:16px;bottom:0;width:58%;padding:8px}
}

/* i dati dello studio restano due per riga anche sul telefono (Simone,
   26/09 sera): fino ad allora sotto i 760 andavano uno sotto l'altro */

@media (max-width:720px){
  /* hero: ritratto piccolo in alto (4:5, con un taglio ridotto in proporzione
     — DEROGA come per le card qui sotto), CTA centrata sotto tutto.
     Nessuna altezza minima dal 25/09 (M5, richiesta di Paolo): la hero
     finisce dopo la CTA col suo margine, e «Chi sono» comincia li', dentro
     il primo schermo. Fino ad allora era calc(100svh - 120px), perche'
     «Chi sono» partisse esattamente alla piega (15/09). */
  .hero{align-items:stretch;padding-top:30px;padding-bottom:44px}
  /* Il contenuto riempie la gabbia invece di galleggiarci in mezzo come una
     card (esempio di Paolo, foto 3-4 del PDF): gabbia a tutta larghezza,
     e .corpo in display:contents cosi' .testo (ritratto + paragrafo) e la
     CTA sono figli diretti di .dentro. Griglia a cinque righe: occhiello,
     32 di spazio (piu' gli 8 di margine del paragrafo = 40), testo, 32 di
     spazio (piu' gli 8 di padding della CTA = 40), CTA. La sesta riga
     elastica (1fr), che assorbiva l'altezza minima, e' uscita con lei */
  .hero .dentro{display:grid;gap:0;
    grid-template-rows:auto 32px auto 32px auto}
  .hero .corpo{display:contents}
  .hero .eb{grid-row:1;font-size:10.5px;letter-spacing:.12em;padding-left:10px;max-width:none}
  .hero .testo{grid-row:3}
  /* foto 110, 8 dal testo, 10 oltre il filetto e 18.5 di corpo sono tarati
     insieme sui 384 di larghezza (il telefono di Simone): la colonna
     accanto alla foto e' 216px e «Mi occupo di problematiche» ne misura
     211, cosi' la prima riga resta intera. Con 19 di corpo la foto
     scenderebbe a 104 — Simone, 15/09/2026.
     Il 26/09 la foto e' passata a 132 (+20%, Simone): la colonna accanto
     scende a 194 e la prima riga si spezza anche a 384 */
  .hero .ritratto{width:132px;aspect-ratio:2/3;margin:4px 0 8px 8px;
    border-radius:0 6px 26px 6px;
    clip-path:polygon(44px 0,100% 0,100% 100%,0 100%,0 12.5px,.4px 10.8px,1.7px 9.4px,40.4px 1.1px,41.9px .5px)}
  /* niente sillabazione qui: si va a capo per parole e il testo scorre
     sotto la foto, come nell'esempio di Paolo. A 360 la colonna accanto
     alla foto e' 192px e «muscoloscheletriche.» ne misura 155: ci sta.
     overflow-wrap:anywhere resta come rete per gli schermi da 320 */
  /* studio sul telefono: l'occhiello «Solo su appuntamento» piu' vicino
     alla banda, 8px (erano 14 — Simone, 26/09 sera). La distanza dall'H2
     vale per tutte le larghezze, nella regola dello studio */
  .studio .banda{margin-bottom:calc(8px - clamp(28px,3vw,56px))}
  .hero .sub{margin-top:8px;font-size:18.5px;line-height:1.55;padding-left:10px;
    -webkit-hyphens:manual;hyphens:manual;overflow-wrap:anywhere}
  .hero .cta-riga{grid-row:5;justify-content:center;padding:8px 0 0}

  /* recensioni: senza il riquadro del voto (M8) resta solo il nastro */
  .vista{padding:6px 0 14px}

  /* esperienza: le sei celle a due colonne, compatte.
     DEROGA alla forma di sistema: qui la card e' larga ~167px e il taglio
     da 92 si mangerebbe meta' del lato. Scende a 55 di taglio e 34 di
     spalla — stesso angolo, stesso disegno, piu' piccolo. */
  .griglia{grid-template-columns:1fr 1fr;gap:12px}
  .esperienza .cella{border-radius:0 6px 34px 6px;
    clip-path:polygon(55px 0,100% 0,100% 100%,0 100%,0 15.5px,
                      .5px 13.5px,2.1px 11.7px,50.5px 1.4px,52.3px .6px);
    background:radial-gradient(circle at 100% 100%, var(--blu) 0 26px,
                               rgba(15,107,168,.12) 56px),
               linear-gradient(to bottom, var(--blu) 0 22px,
                               rgba(15,107,168,.12) 78px)}
  .esperienza .cella > .dentro{padding:18px 14px 16px 20px;
    border-radius:0 4px 32px 4px;
    clip-path:polygon(53.3px 0,100% 0,100% 100%,0 100%,0 15px,
                      .5px 13px,2.1px 11.2px,48.8px 1.4px,50.6px .6px)}
  .esperienza .cella h3{font-size:15.5px}
  .esperienza .cella p{font-size:12.5px}

  /* docenze: testo prima, foto dopo */
  .slideshow{order:1}

  /* footer: logo stretto a sinistra su tutta l'altezza; a destra la mappa
     sopra e i contatti sotto. Per classe, non per posizione (R7) */
  .fgrid{display:grid;grid-template-columns:56px 1fr;gap:14px 16px;padding-bottom:18px}
  .f-logo{grid-column:1;grid-row:1 / 3;justify-content:flex-start;align-items:start}
  /* il logo nuovo prende la colonna da 56: 56 x 105 (il vecchio 50 x 150) */
  .flogo{width:56px}
  .f-mappa{grid-column:2;grid-row:1}
  .mappa-f{height:120px}
  .f-contatti{grid-column:2;grid-row:2}
  .fcol ul li a{padding:5px 0;font-size:12.5px;line-height:1.35}
  .fcol ul.ico li a{padding:7px 0;font-size:12.5px}
  /* le due righe legali in fondo: una riga sola, corpo piu' piccolo */
  .flegal{padding:12px 0 16px;gap:10px;font-size:10.5px;flex-wrap:nowrap;
    white-space:nowrap;overflow-x:auto}
  .flegal a{font-size:10.5px}
  .flegal .dx{margin-left:0;gap:10px;flex-wrap:nowrap}
}

/* ---------- Le due policy (cookie-policy.html, privacy-policy.html) ----------
   Testo del vecchio sito com'e' (LAVORO-GROSSO-PASSAGGIO.md D6): una colonna
   di 74 caratteri, la gabbia di lettura gia' usata in Chi sono; il resto
   (p, h2, strong, elenchi) lo danno le regole di base. 28/09/2026 */
.policy{max-width:74ch;margin:0 auto}
.policy a{color:var(--blu)}